From: Donghyun Lee <dh0922.lee@samsung.com>
Date: Fri, 4 Sep 2015 03:46:26 +0000 (+0900)
Subject: LB reviewed and updated
X-Git-Tag: tizen_3.0/TD_SYNC/20161201~573
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=7f62b68a3ab8b4d17294444563988b382b9600c5;p=sdk%2Fonline-doc.git

LB reviewed and updated
---

diff --git a/org.tizen.devtools/html/common_tools/certificate_registration.htm b/org.tizen.devtools/html/common_tools/certificate_registration.htm
index 38ed441..92dd408 100644
--- a/org.tizen.devtools/html/common_tools/certificate_registration.htm
+++ b/org.tizen.devtools/html/common_tools/certificate_registration.htm
@@ -22,7 +22,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
 	</div>
 
 <h1>Certificate Registration</h1>
diff --git a/org.tizen.devtools/html/common_tools/connection_explorer.htm b/org.tizen.devtools/html/common_tools/connection_explorer.htm
index 40468d5..27e7fbf 100644
--- a/org.tizen.devtools/html/common_tools/connection_explorer.htm
+++ b/org.tizen.devtools/html/common_tools/connection_explorer.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.devtools/html/common_tools/emulator.htm b/org.tizen.devtools/html/common_tools/emulator.htm
index 766bff9..b5b7bc5 100644
--- a/org.tizen.devtools/html/common_tools/emulator.htm
+++ b/org.tizen.devtools/html/common_tools/emulator.htm
@@ -19,7 +19,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -226,21 +226,22 @@
 </li>
 
 <li>OpenGL&reg; ES version
-<p>You can select OpenGL&reg; ES version you want to use in Mac OS&reg;.
+<p>You can select the OpenGL&reg; ES version you want to use in Mac OS&reg;.</p>
 <ul>
-<li>v2.0 & v3.0</li>
-<li>v1.1 & v2.0</li>
+	<li>v2.0 &amp; v3.0</li>
+	<li>v1.1 &amp; v2.0</li>
 </ul>
+
 <table class="note">
-      <tbody>
-        <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">If GPU acceleration is set to <strong>OFF</strong> or <strong>Disable</strong>, this option is not available.</td>
-        </tr>
-      </tbody>
-    </table>
+	<tbody>
+		<tr>
+			<th class="note">Note</th>
+		</tr>
+		<tr>
+			<td class="note">If GPU acceleration is set to <strong>OFF</strong> or <strong>Disable</strong>, this option is not available.</td>
+		</tr>
+		</tbody>
+	</table>
 </li>
 
 <li>Advanced Option
@@ -248,14 +249,14 @@
 <ul>
   <li>Mobile
   <ul>
-    <li>Camera: Virtual, Webcam</li>
+	<li>Camera: virtual, Webcam</li>
     <li>Sensor: accelerometer, gyroscope, geo-magnetic, proximity, light, haptic, pressure, ultraviolet, heartbeat rate meter</li>
     <li>Device: battery</li>
     <li>Jack: ear jack, charger, USB</li>
   </ul></li>
   <li>Wearable
   <ul>
-    <li>Camera: Virtual, Webcam</li>
+	<li>Camera: virtual, Webcam</li>
     <li>Sensor: accelerometer, gyroscope, geomagnetic, proximity, light, haptic, pressure, ultraviolet, heartbeat rate meter</li>
     <li>Device: battery</li>
     <li>Jack: charger, USB</li>
@@ -353,7 +354,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo</pre>
 <p align="center"><img alt="Profile-specific skin Emulator Mobile" src="../images/emulator_profile_mobile.png" /> <img alt="Profile-specific skin Emulator Wearable O" src="../images/emulator_profile_wearable_o.png" /> <img alt="Profile-specific skin Emulator Wearable" src="../images/emulator_profile_wearable.png" /></p>
 
 <h3 id="general" name="general">General Purpose Skin</h3>
-<p>While <a href="#phone">profile-specific skin</a> provides a realistic skin and hardware keys, general purpose skin shows a consistent frame on every state of resolution, scale, or rotation and makes you enable to change the display resolution of Emulator to custom values. Besides, you can see another window, "Key Window".</p>
+
+<p>While <a href="#phone">profile-specific skin</a> provides a realistic skin and hardware keys, the general purpose skin shows a consistent frame on every state of resolution, scale, or rotation and enables you to change the Emulator display resolution to custom values. You can also see the key window.</p>
 
 <table class="note">
   <tbody>
@@ -361,18 +363,19 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo</pre>
       <th class="note">Note</th>
     </tr>
         <tr>
-           <td class="note">The layout of the general purpose skin is not configurable unlike profile-specific skin.</td>
+           <td class="note">The layout of the general purpose skin is not configurable like the profile-specific skin.</td>
        </tr>
   </tbody>
-</table></li>
+</table>
 
 <ul>
 <li>Key window
-<p>The key window consists of virtual hardware keys, which are embedded in profile-specific skins. You can use it as a remote controller of its main Emulator window. You can move it to any position seperate from the main window and dock to the right side of the main window. If it is docked with the main window, both windows can be moved together on the screen.
-You can make it appear or disappear via the Context Menu or <a href="keyboard_shortcuts.htm#emulator">shortcut key</a>.</p>
+<p>The key window consists of virtual hardware keys, which are embedded in profile-specific skins. You can use it as a remote controller of its main Emulator window. You can move it to any position separate from the main window or dock it to the right side of the main window. If it is docked with the main window, both windows can be moved together on the screen.</p>
+<p>You can make the key window appear or disappear through the Context Menu or a <a href="keyboard_shortcuts.htm#emulator">shortcut key</a>.</p>
+
 </li>
 <li>Pair tag
-<p>The color of pair tag indicates which main window is paired with the key window. The color changes every time Emulator boots.</p>
+<p>The color of the pair tag indicates which main window is paired with the key window. The color changes every time the Emulator boots.</p>
 </li>
 </ul>
 
@@ -387,11 +390,10 @@ You can make it appear or disappear via the Context Menu or <a href="keyboard_sh
       <th class="note">Note</th>
     </tr>
         <tr>
-           <td class="note">You can create an Emulator of custom resolution by using <a href="#manager-cli">Emulator Manager CLI</a> and launch it only with general purpose skin. Note: it is not guaranteed that all the Apps are correctly shown in the custom resolution.</td>
+           <td class="note">You can create a custom resolution Emulator by using the <a href="#manager-cli">Emulator Manager CLI</a>, and launch it with the general purpose skin. It is not guaranteed that all the applications are correctly shown in the custom resolution.</td>
        </tr>
   </tbody>
-</table></li>
-
+</table>
 
 <h3 id="controlkeys" name="controlkeys">Control Keys</h3>
 <p>The following hardware keys are available on the Emulator:</p>
@@ -401,10 +403,10 @@ You can make it appear or disappear via the Context Menu or <a href="keyboard_sh
 		</li>
   <li><strong>Home</strong> (mobile only)
   	<p>If you long press the <strong>Home</strong> key, the Task switcher application appears as in a real device.</p>
-  	</li>
+  	</li>	
   <li><strong>Back</strong>
   	<p>When you tap, it returns to the previous screen.</p>
-  	</li>
+  	</li>	
   <li><strong>Power</strong>
   	<p>You can power off the display by clicking the <strong>Power</strong> key in most general situations. 
   		Sometimes, the display does not power off though you click the <strong>Power</strong> key. 
@@ -424,7 +426,7 @@ You can make it appear or disappear via the Context Menu or <a href="keyboard_sh
 <ul>
 <li>Emulator name (the top row in the menu)
 <p>Display the <strong>Detailed Info</strong> window, showing the <strong>Shortcut Info</strong> and <strong>VM Info</strong> tabs. The <strong>Shortcut Info</strong> tab lists the <a href="keyboard_shortcuts.htm#emulator">Emulator keyboard shortcuts</a> and the <strong>VM Info</strong> tab defines the virtual machine details.</p>
-<p>In Mac OS® X: To use Emulator keyboard shortcuts, open the Keyboard Setting dialog and switch your Mac function keys option to work as standard function keys.</p>
+<p>In Mac OS&reg; X: To use Emulator keyboard shortcuts, open the Keyboard Setting dialog and switch your Mac function keys option to work as standard function keys.</p>
 <table border="1">
 	<caption>Table: VM Info tab</caption>
 		<tbody>
@@ -504,7 +506,6 @@ You can make it appear or disappear via the Context Menu or <a href="keyboard_sh
 
 <li><strong>Always On Top</strong>
 <p>Select this option to keep the Emulator window on top of other windows.</p>
-
 </li>
 <li><strong>Rotate</strong>
 <p>Select either <strong>Portrait</strong>, <strong>Landscape</strong>, <strong>Reverse Portrait</strong>, or <strong>Reverse Landscape</strong> as the orientation of the Emulator.</p></li>
@@ -1169,7 +1170,7 @@ You can make it appear or disappear via the Context Menu or <a href="keyboard_sh
 
 <tr>
 <td>Camera</td>
-<td><p>Virtual camera device is available. It can be connected to a host machine&#39;s Webcam and import an animated GIF image file.</p>
+<td><p>Virtual camera device is available. It can be connected to a host machine&#39;s Webcam and import an animated GIF image file.</p> 
 <p>Support: preview, capture, and record</p>
 <p>Image format: YUYV, I420, and YV12</p>
 <p>Attributes: brightness and contrast </p>
diff --git a/org.tizen.devtools/html/common_tools/emulator_features.htm b/org.tizen.devtools/html/common_tools/emulator_features.htm
index 5e10a87..61001bb 100644
--- a/org.tizen.devtools/html/common_tools/emulator_features.htm
+++ b/org.tizen.devtools/html/common_tools/emulator_features.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -41,7 +41,7 @@
 <ul>
 <li><a href="#multi">Use multi-point touch</a></li>
 <li><a href="#file">Share a directory</a></li>
-<li><a href="#camera">Use a Camera</a></li>
+<li><a href="#camera">Use a camera</a></li>
 <li><a href="#net">Use network features</a></li>
 <li><a href="#skin">Use custom skin layout</a></li>
 <li><a href="#eventcast">Use EventCast</a></li>
@@ -131,14 +131,11 @@ style="display: block; text-align: center; margin-left: auto; margin-right: auto
 
 
 <h2 id="camera" name="camera">Using a Camera</h2>
-<p>With the Emulator, you can develop an app using the Camera API. The Emulator provides a virtual camera. The virtual camera injects frames by using image files in host PC or using WebCam of PC.</p>
-<p>You can use an animated GIF image file.</p>
-
-<p>The Emulator provides an image file that can be used as the default.</p>
-<br>
-
+<p>With the Emulator, you can develop an application using the Camera API. The Emulator provides a virtual camera. The virtual camera injects frames by using the image files in a host PC or using the Webcam of a PC.</p>
+<p>You can use an animated GIF image file. The Emulator provides an image file that can be used as the default.</p>
 <p>In addition, you can host a Webcam just like a device camera.</p>
 
+
 <p>Before running the application, install a USB-connected Webcam or embedded Webcam on your machine. On Linux, the Webcam feature uses libv4l-0. If you do not have it on your machine, this feature does not work properly. You can check the feature status with the following command:</p>
 <pre class="prettyprint">$ dpkg -l | grep libv4l-0</pre>
 <table class="note">
@@ -920,14 +917,14 @@ maru-brightness -device virtio-vmodem-pci -device maru-camera -device virtio-tou
        <td>Emulator skin images specific to the Emulator resolution, and icons for the Emulator option button and shortcut</td>
 	</tr>
 	<tr>
-       <td><span style="font-family: Courier New,Courier,monospace">skins/&lt;skin name&gt;/layout.xml</span></td>
-       <td>Metafile for the Emulator skin layout</td>
-	</tr>
-	<tr>
        <td><span style="font-family: Courier New,Courier,monospace">skins/&lt;skin name&gt;/info.ini</span></td>	
        <td>File for specifying Emulator skin information</td>
 	</tr>
 	<tr>
+       <td><span style="font-family: Courier New,Courier,monospace">skins/&lt;skin name&gt;/layout.xml</span></td>	
+       <td>Metafile for the Emulator skin layout</td>
+	</tr>
+	<tr>
        <td><span style="font-family: Courier New,Courier,monospace">template/&lt;image name&gt;.xml</span></td>	
        <td>XML file for default configuration of the virtual machine created by the Emulator Manage</td>
 	</tr>
@@ -1020,4 +1017,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.devtools/html/common_tools/event_injec.htm b/org.tizen.devtools/html/common_tools/event_injec.htm
index d8fbd3d..b4b9e6d 100644
--- a/org.tizen.devtools/html/common_tools/event_injec.htm
+++ b/org.tizen.devtools/html/common_tools/event_injec.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -146,28 +146,31 @@
 </ol>
 
 
-<h2>Providing Sensor Data</h2>
-<p>In the Emulator Control Panel(ECP), you can model your actions such as shaking, throwing, and tilting the device for the emulator instance. And you can generate a single sensor event on the instance, or inject sequences of 3-axis sensor events to the instance.</p>
+<h2 id="sensor" name="sensor">Providing Sensor Data</h2>
+
+<p>In the Emulator Control Panel (ECP), you can model your actions, such as shaking, throwing, and tilting the device for the emulator instance. In addition, you can generate a single sensor event on the instance, or inject sequences of 3-axis sensor events to the instance.</p>
 <h3>Controlling 3-axis Sensors</h3>
-<p>Select <strong>Event Injector &gt; Sensor &gt; 3-Axis Sensor</strong>.&nbsp;The 3-Axis Sensor tab consist of 4 subtabs, in which you can adjust the acceleration, magnetic, and gyro sensors of the emulator instance. In the GUI subtab, you can intuitively adjust various sensor data by using 3D graphics. In the other subtabs, you can inject a single event into the individual sensor, and sequences of events into the sensor by using the sensor data files.</p>
-<p>&nbsp;</p>
+<p>Select <strong>Event Injector &gt; Sensor &gt; 3-Axis Sensor</strong>. The <strong>3-Axis Sensor</strong> tab consist of 4 subtabs, in which you can adjust the acceleration, magnetic, and gyro sensors of the emulator instance. In the <strong>GUI</strong> subtab, you can intuitively adjust various sensor data by using 3D graphics. In the other subtabs, you can inject a single event into the individual sensor, and sequences of events into the sensor by using the sensor data files.</p>
+
 <ul>
-<li><strong>GUI</strong><br />In the <strong>GUI</strong> subtab, you can select an active sensor and move the 3D model of the emulator instance by the 3 axis sliders or direction buttons(<strong>Portrait, Landscape, Reverse Portrait</strong>, and <strong>Reverse Landscape</strong>). The monitor of the instance displays the acceleration, magnetic, gyro values.<br />To better control the movement, select the <strong>With axis</strong> check box to see the axes in the Emulator image. You can also fix the y- or z-axis by selecting the <strong>X/Z</strong> or <strong>X/Y</strong> radio button, respectively. To change the Emulator accelerator value in the direction of the movement, select the <strong>Move</strong> radio button.</li>
-<li><strong>Acceleration</strong><br />
-<p>You can control the acceleration of the instance along the coordinate axes. When the instance is standing, the acceleration value of y axis is -1 g as gravitational acceleration. By using the sliders in the <strong>Acceleration</strong> subtab, you can control the acceleration 3-axis values from -2 g to 2 g.</p></li>
+<li><strong>GUI</strong>
+<p>In the <strong>GUI</strong> subtab, you can select an active sensor and move the 3D model of the emulator instance by the 3 axis sliders or direction buttons (<strong>Portrait</strong>, <strong>Landscape</strong>, <strong>Reverse Portrait</strong>, and <strong>Reverse Landscape</strong>). The instance monitor displays the acceleration, magnetic, and gyro values.</p>
+<p>To better control the movement, select the <strong>With axis</strong> check box to see the axes in the Emulator image. You can also fix the Y or Z axis by selecting the <strong>X/Z</strong> or <strong>X/Y</strong> radio button, respectively. To change the Emulator accelerator value in the direction of the movement, select the <strong>Move</strong> radio button.</p></li>
+<li><strong>Acceleration</strong>
+<p>You can control the acceleration of the instance along the coordinate axes. When the instance is standing, the acceleration value of the Y axis is -1 g as gravitational acceleration. By using the sliders in the <strong>Acceleration</strong> subtab, you can control the acceleration 3-axis values from -2 g to 2 g.</p></li>
 <li><strong>Magnetic</strong>
-<p>You can control the magnetic of the instance along the coordinate axes. When the instance is standing, the magnetic 3-axis tesla values (azimuth 0) are set for the North. By using the sliders in the <strong>Magnetic</strong> subtab, you can control the magnetic 3-axis values from -2000 uT to 2000 uT.</p></li>
+<p>You can control the magnetic values of the instance along the coordinate axes. When the instance is standing, the magnetic 3-axis tesla values (azimuth 0) are set for the North. By using the sliders in the <strong>Magnetic</strong> subtab, you can control the magnetic 3-axis values from -2000 uT to 2000 uT.</p></li>
 <li><strong>Gyro</strong>
-<p>You can control the gyro(rotation angle per second) of the instance along the coordinate axes. By using the sliders in the <strong>Gyro</strong> subtab, you can control the gyro 3-axis values from -10 rad to 10 rad.</p></li>
-<li>
-<p><strong>Event file</strong><br />The event file consists of the predefined events. It is written in ASCII. By loading the event file in the <strong>Acceleration</strong>, <strong>Magnetic</strong>, and <strong>Gyro</strong> subtabs, you can replay a sequence of predefined events. You can also add multiple event files to replay. The format of each line in the event file is</p>
-<table>
-<tbody>
-<tr>
-<td>timestamp, x, y, z</td></tr></tbody></table>
-<p>When you add the event files and click <strong>Start</strong>, the predefined events are injected at its specified relative timestamp. The unit of timestamp is 0.01 seconds. Some events can be discarded if they exceed certain limits of performance , resource, or logic.&nbsp;When you add multiple event files, the files are executed in sequence. And you can also repeat the replay.</p></li></ul>
+<p>You can control the gyro (rotation angle per second) of the instance along the coordinate axes. By using the sliders in the <strong>Gyro</strong> subtab, you can control the gyro 3-axis values from -10 rad to 10 rad.</p></li>
+<li><strong>Event file</strong>
+<p>The event file consists of predefined events. It is written in ASCII. By loading the event file in the <strong>Acceleration</strong>, <strong>Magnetic</strong>, or <strong>Gyro</strong> subtabs, you can replay a sequence of predefined events. You can also add multiple event files to replay. The format of each line in the event file is:</p>
+
+<p><span style="font-family: Courier New,Courier,monospace">timestamp, x, y, z</span></p>
+
+<p>When you add the event files and click <strong>Start</strong>, the predefined events are injected at their specified relative timestamp. The timestamp unit is 0.01 seconds. Some events can be discarded, if they exceed certain limits of performance, resource, or logic.When you add multiple event files, the files are executed in sequence. You can also repeat the replay.</p></li></ul>
 <h3>Controlling Other Sensors</h3>
-<p>In the <strong>Event Injector &gt; Sensor</strong> tab, you can control the sensors of light, proximity, pressure, ultraviolet, and HRM.</p>
+<p>In the <strong>Event Injector &gt; Sensor</strong> tab, you can control the light, proximity, pressure, ultraviolet, and HRM sensors:</p>
+
 <ul>
 <li>
 <p>To control the light sensor, set the <strong>Lux</strong> value in the <strong>Light</strong> tab. The range of this value is from 0 Lux to 65635 Lux.</p></li>
@@ -180,6 +183,7 @@
 <li>
 <p>To control the HRM (Heart Rate Monitor) sensor, use the sliders in the <strong>Heart Rate Monitor</strong> tab. You can set the <strong>Heart Rate</strong> value between 0 and 220, and the <strong>Peek-to-Peek</strong> value between 0 and 5000.</p></li></ul>
 
+
 <h2 id="telephony" name="telephony">Providing Telephony Features</h2>
 
 <p>The Emulator Control Panel (ECP) can be used to generate <a href="#call">incoming calls</a> and <a href="#message">messages</a> in the <strong>Telephony</strong> tab.</p>
@@ -270,4 +274,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.devtools/html/common_tools/keyboard_shortcuts.htm b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
index 106dc4a..ed4037f 100644
--- a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
+++ b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -866,61 +866,61 @@
                 <th>Support</th>
                 <th>Shortcut</th>
         </tr>
-        <tr>
+       <tr>
                 <td rowspan="2">Detailed Info</td>
-                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /></td>
                 <td>Ctrl+F1</td>
         </tr>
-        <tr>
-                <td><img alt="mac" src="../images/mac.png" /></td>
-                <td><img alt="command" src="../images/command.png" />+F1</td>
-        </tr>
-        <tr>
+		<tr>
+				<td><img alt="mac" src="../images/mac.png" /></td>
+				<td><img alt="command" src="../images/command.png" />+F1</td>
+		</tr>
+       <tr>
                 <td rowspan="2">Always on Top</td>
-                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /></td>
                 <td>Ctrl+F2</td>
         </tr>
-        <tr>
-                <td><img alt="mac" src="../images/mac.png" /></td>
-                <td><img alt="command" src="../images/command.png" />+F2</td>
+		<tr>
+				<td><img alt="mac" src="../images/mac.png" /></td>
+				<td><img alt="command" src="../images/command.png" />+F2</td>
         </tr>
-        <tr>
+       <tr>
                 <td rowspan="2">Rotate next</td>
-                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /></td>
                 <td>Ctrl+F12</td>
         </tr>
-        <tr>
-                <td><img alt="mac" src="../images/mac.png" /></td>
-                <td><img alt="command" src="../images/command.png" />+F12</td>
-        </tr>
-        <tr>
-                <td rowspan="2">Rotate prev</td>
-                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
-                <td>Ctrl+F11</td>
-        </tr>
-        <tr>
-                <td><img alt="mac" src="../images/mac.png" /></td>
-                <td><img alt="command" src="../images/command.png" />+F11</td>
-        </tr>
-        <tr>
+		<tr>
+				<td><img alt="mac" src="../images/mac.png" /></td>
+				<td><img alt="command" src="../images/command.png" />+F12</td>
+		</tr>
+		<tr>
+				<td rowspan="2">Rotate prev</td>
+				<td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
+				<td>Ctrl+F11</td>
+		</tr>
+		<tr>
+				<td><img alt="mac" src="../images/mac.png" /></td>
+				<td><img alt="command" src="../images/command.png" />+F11</td>
+		</tr>
+       <tr>
                 <td rowspan="2">Scale next</td>
-                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /></td>
                 <td>Ctrl+F10</td>
         </tr>
-        <tr>
-                <td><img alt="mac" src="../images/mac.png" /></td>
-                <td><img alt="command" src="../images/command.png" />+F10</td>
-        </tr>
-        <tr>
+		<tr>
+				<td><img alt="mac" src="../images/mac.png" /></td>
+				<td><img alt="command" src="../images/command.png" />+F10</td>
+		</tr>
+       <tr>
                 <td rowspan="2">Scale prev</td>
-                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /></td>
                 <td>Ctrl+F9</td>
         </tr>
-        <tr>
-                <td><img alt="mac" src="../images/mac.png" /></td>
-                <td><img alt="command" src="../images/command.png" />+F9</td>
-        </tr>
-        <tr>
+		<tr>
+				<td><img alt="mac" src="../images/mac.png" /></td>
+				<td><img alt="command" src="../images/command.png" />+F9</td>
+		</tr>
+		<tr>
                 <td rowspan="2">Controller</td>
                 <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
                 <td>Ctrl+F8</td>
@@ -928,27 +928,27 @@
         <tr>
                 <td><img alt="mac" src="../images/mac.png" /></td>
                 <td><img alt="command" src="../images/command.png" />+F8</td>
-        </tr>
-        <tr>
+		</tr>
+       <tr>
                 <td rowspan="2">Screen Shot</td>
-                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /></td>
                 <td>Ctrl+F7</td>
         </tr>
-        <tr>
-                <td><img alt="mac" src="../images/mac.png" /></td>
-                <td><img alt="command" src="../images/command.png" />+F7</td>
-        </tr>
-        <tr>
+		<tr>
+				<td><img alt="mac" src="../images/mac.png" /></td>
+				<td><img alt="command" src="../images/command.png" />+F7</td>
+		</tr>
+       <tr>
                 <td rowspan="2">Shell</td>
-                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /></td>
                 <td>Ctrl+F5</td>
         </tr>
-        <tr>
-                <td><img alt="mac" src="../images/mac.png" /></td>
-                <td><img alt="command" src="../images/command.png" />+F5</td>
-        </tr>
-        <tr>
-                <td rowspan="2">Control Panel</td>
+		<tr>
+				<td><img alt="mac" src="../images/mac.png" /></td>
+				<td><img alt="command" src="../images/command.png" />+F5</td>
+		</tr>
+       <tr>
+				<td rowspan="2">Control Panel</td>
                 <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
                 <td>Ctrl+F6</td>
         </tr>
@@ -956,7 +956,7 @@
                 <td><img alt="mac" src="../images/mac.png" /></td>
                 <td><img alt="command" src="../images/command.png" />+F6</td>
         </tr>
-        <tr>
+         <tr>
                 <td rowspan="2">Close</td>
                 <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /></td>
                 <td>Ctrl+F4</td>
@@ -965,13 +965,13 @@
                 <td><img alt="mac" src="../images/mac.png" /></td>
                 <td><img alt="command" src="../images/command.png" />+F4</td>
         </tr>
-        <tr>
+       <tr>
                 <td>Menu</td>
                 <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>
                 <td>F2</td>
         </tr>
-        <tr>
-                <td>Home</td>
+       <tr>
+				<td>Home</td>
                 <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>
                 <td>F1</td>
         </tr>
@@ -985,24 +985,25 @@
                 <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>
                 <td>F3</td>
         </tr>
-        <tr>
+       <tr>
                 <td rowspan="2">Volume +</td>
-                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /></td>
                 <td>Ctrl+]</td>
         </tr>
-        <tr>
-                <td><img alt="mac" src="../images/mac.png" /></td>
-                <td><img alt="command" src="../images/command.png" />+]</td>
-        </tr>
-        <tr>
+		<tr>
+				<td><img alt="mac" src="../images/mac.png" /></td>
+				<td><img alt="command" src="../images/command.png" />+]</td>
+		</tr>
+       <tr>
                 <td rowspan="2">Volume -</td>
-                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /></td>
                 <td>Ctrl+[</td>
         </tr>
-        <tr>
-                <td><img alt="mac" src="../images/mac.png" /></td>
-                <td><img alt="command" src="../images/command.png" />+[</td>
+		<tr>
+				<td><img alt="mac" src="../images/mac.png" /></td>
+				<td><img alt="command" src="../images/command.png" />+[</td>
         </tr>
+
 </tbody>
 </table>
 
diff --git a/org.tizen.devtools/html/common_tools/log_view.htm b/org.tizen.devtools/html/common_tools/log_view.htm
index 292c999..935a4c4 100644
--- a/org.tizen.devtools/html/common_tools/log_view.htm
+++ b/org.tizen.devtools/html/common_tools/log_view.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
 	</div>
 	
 <h1>Log View</h1>
diff --git a/org.tizen.devtools/html/common_tools/project_explorer.htm b/org.tizen.devtools/html/common_tools/project_explorer.htm
index edf8703..ce6ac77 100644
--- a/org.tizen.devtools/html/common_tools/project_explorer.htm
+++ b/org.tizen.devtools/html/common_tools/project_explorer.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
 	</div>
 	
 <h1>Project Explorer View</h1>
diff --git a/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm b/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
index fdf4bb9..4bb92aa 100644
--- a/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
+++ b/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
@@ -18,7 +18,7 @@
 
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.devtools/html/common_tools/smart_launch.htm b/org.tizen.devtools/html/common_tools/smart_launch.htm
index c30e079..a029f4a 100644
--- a/org.tizen.devtools/html/common_tools/smart_launch.htm
+++ b/org.tizen.devtools/html/common_tools/smart_launch.htm
@@ -19,7 +19,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
 	</div>
 	
   <h1>Smart Launch</h1> 
diff --git a/org.tizen.devtools/html/common_tools/tools_common.htm b/org.tizen.devtools/html/common_tools/tools_common.htm
index e043623..9722c42 100644
--- a/org.tizen.devtools/html/common_tools/tools_common.htm
+++ b/org.tizen.devtools/html/common_tools/tools_common.htm
@@ -21,24 +21,13 @@
 
 <div id="container"><div id="contents"><div class="content">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+        <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
     </div>
 	
  <h1>Common Tools</h1>
 
                 <p>The Tizen SDK provides the following set of common tools for application development:</p>
 
- <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Some of the IDE tools and views are visible only in specific IDE perspectives. To switch to the applicable perspective, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you want.</td>
-    </tr>
-   </tbody>
-  </table>
-
 <ul>
     <li><strong>Application generation management tools</strong>
     <ul>
@@ -68,6 +57,17 @@
 		<li><a href="keyboard_shortcuts.htm">Keyboard Shortcuts</a> <p>This tool allows you to operate more quickly and easily in different operating systems.</p></li>
 	</ul></li></ul>
  
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Some of the IDE tools and views are visible only in specific IDE perspectives. To switch to the applicable perspective, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you want.</td>
+    </tr>
+   </tbody>
+  </table>
+ 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.devtools/html/cover_page.htm b/org.tizen.devtools/html/cover_page.htm
index 1090528..7c3b1ee 100644
--- a/org.tizen.devtools/html/cover_page.htm
+++ b/org.tizen.devtools/html/cover_page.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
     <div id="profile">
-        <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/> <img alt="Wearable native" src="images/wn_icon.png"/></p>
+       <p><img alt="Mobile" src="images/mobile_s_wn.png"/> <img alt="Wearable" src="images/wearable_s_wn.png"/></p>
     </div>
 	
  <h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
@@ -42,7 +42,7 @@
   <li style="font-weight: normal;"><strong>Tools</strong>
     <p>The Tizen SDK provides various tools for <a href="web_tools/tools_w.htm">Web application</a> and <a href="native_tools/tools_n.htm">native application</a> development. Some <a href="common_tools/tools_common.htm">common tools</a> can be used for all application types.</p></li>
   <li style="font-weight: normal;"><strong>Sample applications</strong>
-	<p>The Tizen SDK includes <a href="https://developer.tizen.org/downloads/sample-applications" target="blank">practical examples</a> of using Tizen APIs in mobile Web, wearable Web, and mobile native applications.</p>
+	<p>The Tizen SDK includes <a href="https://developer.tizen.org/downloads/sample-applications" target="blank">practical examples</a> of using Tizen APIs in various applications.</p>
     </li>
 
 </ul>
diff --git a/org.tizen.devtools/html/images/Thumbs.db b/org.tizen.devtools/html/images/Thumbs.db
new file mode 100644
index 0000000..02e945d
Binary files /dev/null and b/org.tizen.devtools/html/images/Thumbs.db differ
diff --git a/org.tizen.devtools/html/images/fallback_directory.png b/org.tizen.devtools/html/images/fallback_directory.png
new file mode 100644
index 0000000..a86f68d
Binary files /dev/null and b/org.tizen.devtools/html/images/fallback_directory.png differ
diff --git a/org.tizen.devtools/html/images/fallback_folding.png b/org.tizen.devtools/html/images/fallback_folding.png
new file mode 100644
index 0000000..529b954
Binary files /dev/null and b/org.tizen.devtools/html/images/fallback_folding.png differ
diff --git a/org.tizen.devtools/html/images/fallback_hierarchy.png b/org.tizen.devtools/html/images/fallback_hierarchy.png
new file mode 100644
index 0000000..f0ef99e
Binary files /dev/null and b/org.tizen.devtools/html/images/fallback_hierarchy.png differ
diff --git a/org.tizen.devtools/html/images/fallback_icon.png b/org.tizen.devtools/html/images/fallback_icon.png
new file mode 100644
index 0000000..e7f5c61
Binary files /dev/null and b/org.tizen.devtools/html/images/fallback_icon.png differ
diff --git a/org.tizen.devtools/html/images/fallback_lists.png b/org.tizen.devtools/html/images/fallback_lists.png
new file mode 100644
index 0000000..530e20f
Binary files /dev/null and b/org.tizen.devtools/html/images/fallback_lists.png differ
diff --git a/org.tizen.devtools/html/images/fallback_output.png b/org.tizen.devtools/html/images/fallback_output.png
new file mode 100644
index 0000000..336aa12
Binary files /dev/null and b/org.tizen.devtools/html/images/fallback_output.png differ
diff --git a/org.tizen.devtools/html/images/fallback_resmanager.png b/org.tizen.devtools/html/images/fallback_resmanager.png
new file mode 100644
index 0000000..4a544ab
Binary files /dev/null and b/org.tizen.devtools/html/images/fallback_resmanager.png differ
diff --git a/org.tizen.devtools/html/images/fallback_resxml.png b/org.tizen.devtools/html/images/fallback_resxml.png
new file mode 100644
index 0000000..b3f4bac
Binary files /dev/null and b/org.tizen.devtools/html/images/fallback_resxml.png differ
diff --git a/org.tizen.devtools/html/images/fallback_tablist.png b/org.tizen.devtools/html/images/fallback_tablist.png
new file mode 100644
index 0000000..0406215
Binary files /dev/null and b/org.tizen.devtools/html/images/fallback_tablist.png differ
diff --git a/org.tizen.devtools/html/images/mn_division.png b/org.tizen.devtools/html/images/mn_division.png
index 1f7e337..faecb28 100644
Binary files a/org.tizen.devtools/html/images/mn_division.png and b/org.tizen.devtools/html/images/mn_division.png differ
diff --git a/org.tizen.devtools/html/images/mobile_s_n.png b/org.tizen.devtools/html/images/mobile_s_n.png
new file mode 100644
index 0000000..ad8c779
Binary files /dev/null and b/org.tizen.devtools/html/images/mobile_s_n.png differ
diff --git a/org.tizen.devtools/html/images/mobile_s_w.png b/org.tizen.devtools/html/images/mobile_s_w.png
new file mode 100644
index 0000000..f86df29
Binary files /dev/null and b/org.tizen.devtools/html/images/mobile_s_w.png differ
diff --git a/org.tizen.devtools/html/images/mobile_s_wn.png b/org.tizen.devtools/html/images/mobile_s_wn.png
new file mode 100644
index 0000000..ec30fd2
Binary files /dev/null and b/org.tizen.devtools/html/images/mobile_s_wn.png differ
diff --git a/org.tizen.devtools/html/images/mw_division.png b/org.tizen.devtools/html/images/mw_division.png
index 8fc3efa..c4a8655 100644
Binary files a/org.tizen.devtools/html/images/mw_division.png and b/org.tizen.devtools/html/images/mw_division.png differ
diff --git a/org.tizen.devtools/html/images/n_division.png b/org.tizen.devtools/html/images/n_division.png
index d687bc5..5a0b8f6 100644
Binary files a/org.tizen.devtools/html/images/n_division.png and b/org.tizen.devtools/html/images/n_division.png differ
diff --git a/org.tizen.devtools/html/images/nuib_ui_builder.png b/org.tizen.devtools/html/images/nuib_ui_builder.png
index 54e2ed4..d158bb5 100644
Binary files a/org.tizen.devtools/html/images/nuib_ui_builder.png and b/org.tizen.devtools/html/images/nuib_ui_builder.png differ
diff --git a/org.tizen.devtools/html/images/nuib_we_editor.png b/org.tizen.devtools/html/images/nuib_we_editor.png
index 993e751..151f370 100644
Binary files a/org.tizen.devtools/html/images/nuib_we_editor.png and b/org.tizen.devtools/html/images/nuib_we_editor.png differ
diff --git a/org.tizen.devtools/html/images/potential_bug_result.png b/org.tizen.devtools/html/images/potential_bug_result.png
index 1d5932c..27c7180 100644
Binary files a/org.tizen.devtools/html/images/potential_bug_result.png and b/org.tizen.devtools/html/images/potential_bug_result.png differ
diff --git a/org.tizen.devtools/html/images/properties_go_to_1.png b/org.tizen.devtools/html/images/properties_go_to_1.png
index 6607a5e..8de7f1e 100644
Binary files a/org.tizen.devtools/html/images/properties_go_to_1.png and b/org.tizen.devtools/html/images/properties_go_to_1.png differ
diff --git a/org.tizen.devtools/html/images/properties_specification_1.png b/org.tizen.devtools/html/images/properties_specification_1.png
index 61c3d3e..7ede8bd 100644
Binary files a/org.tizen.devtools/html/images/properties_specification_1.png and b/org.tizen.devtools/html/images/properties_specification_1.png differ
diff --git a/org.tizen.devtools/html/images/storyboard_add_new.png b/org.tizen.devtools/html/images/storyboard_add_new.png
new file mode 100644
index 0000000..7bd62cf
Binary files /dev/null and b/org.tizen.devtools/html/images/storyboard_add_new.png differ
diff --git a/org.tizen.devtools/html/images/storyboard_codegen.png b/org.tizen.devtools/html/images/storyboard_codegen.png
new file mode 100644
index 0000000..3a3bdc0
Binary files /dev/null and b/org.tizen.devtools/html/images/storyboard_codegen.png differ
diff --git a/org.tizen.devtools/html/images/storyboard_conn_properties.png b/org.tizen.devtools/html/images/storyboard_conn_properties.png
new file mode 100644
index 0000000..50425fc
Binary files /dev/null and b/org.tizen.devtools/html/images/storyboard_conn_properties.png differ
diff --git a/org.tizen.devtools/html/images/storyboard_contextmenu.png b/org.tizen.devtools/html/images/storyboard_contextmenu.png
new file mode 100644
index 0000000..02e6825
Binary files /dev/null and b/org.tizen.devtools/html/images/storyboard_contextmenu.png differ
diff --git a/org.tizen.devtools/html/images/storyboard_diagram.png b/org.tizen.devtools/html/images/storyboard_diagram.png
new file mode 100644
index 0000000..74be06c
Binary files /dev/null and b/org.tizen.devtools/html/images/storyboard_diagram.png differ
diff --git a/org.tizen.devtools/html/images/storyboard_drag.png b/org.tizen.devtools/html/images/storyboard_drag.png
new file mode 100644
index 0000000..dbcaa83
Binary files /dev/null and b/org.tizen.devtools/html/images/storyboard_drag.png differ
diff --git a/org.tizen.devtools/html/images/storyboard_properties.png b/org.tizen.devtools/html/images/storyboard_properties.png
new file mode 100644
index 0000000..6aa6425
Binary files /dev/null and b/org.tizen.devtools/html/images/storyboard_properties.png differ
diff --git a/org.tizen.devtools/html/images/storyboard_wizard.png b/org.tizen.devtools/html/images/storyboard_wizard.png
new file mode 100644
index 0000000..bcde043
Binary files /dev/null and b/org.tizen.devtools/html/images/storyboard_wizard.png differ
diff --git a/org.tizen.devtools/html/images/w_division.png b/org.tizen.devtools/html/images/w_division.png
index 88d9959..443a1ea 100644
Binary files a/org.tizen.devtools/html/images/w_division.png and b/org.tizen.devtools/html/images/w_division.png differ
diff --git a/org.tizen.devtools/html/images/wearable_s_n.png b/org.tizen.devtools/html/images/wearable_s_n.png
new file mode 100644
index 0000000..02e3791
Binary files /dev/null and b/org.tizen.devtools/html/images/wearable_s_n.png differ
diff --git a/org.tizen.devtools/html/images/wearable_s_w.png b/org.tizen.devtools/html/images/wearable_s_w.png
new file mode 100644
index 0000000..379a9c5
Binary files /dev/null and b/org.tizen.devtools/html/images/wearable_s_w.png differ
diff --git a/org.tizen.devtools/html/images/wearable_s_wn.png b/org.tizen.devtools/html/images/wearable_s_wn.png
new file mode 100644
index 0000000..280245d
Binary files /dev/null and b/org.tizen.devtools/html/images/wearable_s_wn.png differ
diff --git a/org.tizen.devtools/html/images/wn_division.png b/org.tizen.devtools/html/images/wn_division.png
index 11a7876..dca667f 100644
Binary files a/org.tizen.devtools/html/images/wn_division.png and b/org.tizen.devtools/html/images/wn_division.png differ
diff --git a/org.tizen.devtools/html/images/ww_division.png b/org.tizen.devtools/html/images/ww_division.png
index 65e7ab7..5f5160c 100644
Binary files a/org.tizen.devtools/html/images/ww_division.png and b/org.tizen.devtools/html/images/ww_division.png differ
diff --git a/org.tizen.devtools/html/index.htm b/org.tizen.devtools/html/index.htm
index 24e4900..5842c71 100644
--- a/org.tizen.devtools/html/index.htm
+++ b/org.tizen.devtools/html/index.htm
@@ -79,12 +79,16 @@
 			</ul>
 		</li>
 		<li><a href="native_tools/po_file_editor_n.htm">PO File Editor</a></li>
-		<li><a href="native_tools/uibuilder_n.htm">UI Builder</a></li>
+		<li><a href="native_tools/uibuilder_n.htm">UI Builder</a>
+			<ul>
+				<li><a href="native_tools/storyboard_n.htm">Storyboard</a></li>
+			</ul>
+		</li>
 		<li><a href="native_tools/enventor_n.htm">Enventor</a></li>
 		<li><a href="native_tools/command_line_interface_n.htm">Command Line Interface</a>
-		    <ul>
-            <li><a href="native_tools/project_conversion_n.htm">Project Conversion</a></li>
-		    </ul>
+			<ul>
+				<li><a href="native_tools/project_conversion_n.htm">Project Conversion</a></li>
+			</ul>
 		</li>
 		<li><a href="native_tools/call_stack_view_n.htm">Call Stack View</a></li>
 		<li><a href="native_tools/da_overview_n.htm">Dynamic Analyzer</a>
@@ -102,7 +106,8 @@
 		</li>
 		<li><a href="native_tools/static_analyzer_n.htm">Static Analyzer</a></li>
 		<li><a href="native_tools/valgrind_n.htm">Valgrind</a></li>
-		<li><a href="native_tools/t_trace_n.htm">T-trace</a></li>		
+		<li><a href="native_tools/t_trace_n.htm">T-trace</a></li>	
+		<li><a href="native_tools/resource_explorer_n.htm">Resource Explorer</a></li>
 		</ul>
 	</li>	
 </ul>
diff --git a/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm b/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm
index 542474b..400b70f 100644
--- a/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm
+++ b/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm
@@ -19,7 +19,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
   <h1>API and Privilege Checker</h1> 
diff --git a/org.tizen.devtools/html/native_tools/call_stack_view_n.htm b/org.tizen.devtools/html/native_tools/call_stack_view_n.htm
index 779f0e9..23a3e52 100644
--- a/org.tizen.devtools/html/native_tools/call_stack_view_n.htm
+++ b/org.tizen.devtools/html/native_tools/call_stack_view_n.htm
@@ -19,7 +19,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
   <h1>Call Stack View </h1> 
diff --git a/org.tizen.devtools/html/native_tools/command_line_interface_n.htm b/org.tizen.devtools/html/native_tools/command_line_interface_n.htm
index e4632b0..38278f3 100644
--- a/org.tizen.devtools/html/native_tools/command_line_interface_n.htm
+++ b/org.tizen.devtools/html/native_tools/command_line_interface_n.htm
@@ -19,7 +19,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 <div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
  <h1>Command Line Interface</h1>
 
@@ -105,10 +105,11 @@ Sets the default connection timeout value. The default is 60000 milliseconds.</p
 <pre class="prettyprint">
 $ tizen cli-config –g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat cli-config –g "default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml"
-</pre></li>
+&gt; tizen.bat cli-config –g &quot;default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml&quot;
+</pre>
+</li>
 <li><p>List all options for which values are set:</p>
 <pre class="prettyprint">
 $ tizen cli-config –l
@@ -171,10 +172,10 @@ tizen create native-project [-p|--profile &lt;profile name&gt;] [-t|--template &
 $ tizen create native-project –p mobile-2.3 –t basic_ui –n basic -- /home/workspace
 $ cd /home/workspace/basic
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat create native-project –p mobile-2.3 –t basic_ui –n basic -- C:\Users\workspace
-> cd C:\Users\workspace\basic
+&gt; tizen.bat create native-project –p mobile-2.3 –t basic_ui –n basic -- C:\Users\workspace
+&gt; cd C:\Users\workspace\basic
 </pre></li></ul>
 </td>
 	 </tr>	 
@@ -204,11 +205,12 @@ tizen build-native [-a|--arch &lt;architecture name&gt;] [-c|--compiler &lt;comp
 $ tizen build-native -–arch x86 –-compiler llvm –-configuration Debug -- /home/workspace/basic
 $ ls /home/workspace/basic/Debug/
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat build-native -–arch x86 –-compiler llvm –-configuration Debug -- C:\Users\workspace\basic
-> dir C:\Users\workspace\basic\Debug
-</pre></li>
+&gt; tizen.bat build-native -–arch x86 –-compiler llvm –-configuration Debug -- C:\Users\workspace\basic
+&gt; dir C:\Users\workspace\basic\Debug
+</pre>
+</li>
 <li><p>Build the project with the default options:</p>
 <pre class="prettyprint">
 $ tizen cli-config –l
@@ -218,34 +220,35 @@ default.build.configuration=Debug
 $ tizen build-native -- /home/workspace/basic
 $ ls /home/workspace/basic/Debug/
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat build-native -- C:\Users\workspace\basic
-> dir C:\Users\workspace\basic\Debug
+&gt; tizen.bat build-native -- C:\Users\workspace\basic
+&gt; dir C:\Users\workspace\basic\Debug
 </pre></li></ul>
 </td>
-	 </tr>	 
-    <tr id="tizen_clean">
-     <td><span style="font-family: Courier New,Courier,monospace">tizen clean</span> </td>
-     <td>
+	 </tr>	
+
+	<tr id="tizen_clean">
+		<td><span style="font-family: Courier New,Courier,monospace">tizen clean</span> </td>
+		<td>
 <pre class="prettyprint">
 tizen clean [--]
 </pre>
 </td>
-	 <td>Clean the Tizen native project.
-	 </td>
+        <td>Clean the Tizen native project.
+        </td>
      <td>
 <ul>
 <li><p>Clean the project:</p>
 <pre class="prettyprint">
 $ tizen clean -- /home/workspace/basic
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat clean -- C:\Users\workspace\basic
+&gt; tizen.bat clean -- C:\Users\workspace\basic
 </pre></li></ul>
 </td>
-	 </tr>
+        </tr>
     <tr id="tizen_package"> 
      <td><span style="font-family: Courier New,Courier,monospace">tizen package</span> </td> 
      <td> 
@@ -275,17 +278,18 @@ tizen package [-t | --type &lt;package type&gt;] [-s | --sign &lt;security profi
 <pre class="prettyprint">
 $ tizen cli-config –g default.profiles.path=/home/tizen-sdk/tools/ide/conf/profiles.xml
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat cli-config –g "default.profiles.path=C:\tizen-sdk\tools\ide\conf\profiles.xml"
-</pre></li>
+&gt; tizen.bat cli-config –g &quot;default.profiles.path=C:\tizen-sdk\tools\ide\conf\profiles.xml&quot;
+</pre>
+</li>
 <li><p>Set up the path of the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file that is created from the IDE:</p>
 <pre class="prettyprint">
 $ tizen cli-config –g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat cli-config –g "default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml"
+&gt; tizen.bat cli-config –g &quot;default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml&quot;
 </pre></li>
 <li><p>Package the profile:</p>
 <pre class="prettyprint">
@@ -295,18 +299,20 @@ $ ls /home/workspace/basic/Debug
 
 org.tizen.basic-1.0.0-i386.tpk
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat package –-type tpk –-sign myprofile -- C:\Users\workspace\basic\Debug
-</pre></li>
+&gt; tizen.bat package –-type tpk –-sign myprofile -- C:\Users\workspace\basic\Debug
+</pre>
+</li>
 <li><p>Re-sign the package:</p>
 <pre class="prettyprint">
 $ tizen package --type tpk --sign myprofile2 -- /home/workspace/basic/Debug/org.tizen.basic-1.0.0-i386.tpk
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat package --type tpk --sign myprofile2 -- C:\Users\workspace\basic\Debug\org.tizen.basic-1.0.0-i386.tpk
-</pre></li>
+&gt; tizen.bat package --type tpk --sign myprofile2 -- C:\Users\workspace\basic\Debug\org.tizen.basic-1.0.0-i386.tpk
+</pre>
+</li>
 </ul>
 </td>
 	 </tr> 
@@ -332,9 +338,9 @@ tizen install &lt;-t | -target &lt;target name&gt;&gt; &lt;-n | --name &lt;packa
 <pre class="prettyprint">
 $ tizen install -–target emulator-26101 –-name org.tizen.basic-1.0.0-i386.tpk -- /home/workspace/basic/Debug
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat install -–target emulator-26101 –-name org.tizen.basic-1.0.0-i386.tpk -- C:\Users\workspace\basic\Debug
+&gt; tizen.bat install -–target emulator-26101 –-name org.tizen.basic-1.0.0-i386.tpk -- C:\Users\workspace\basic\Debug
 </pre></li></ul>
 </td>
 	 </tr>
diff --git a/org.tizen.devtools/html/native_tools/content_assist_n.htm b/org.tizen.devtools/html/native_tools/content_assist_n.htm
index 928b0d8..e388284 100644
--- a/org.tizen.devtools/html/native_tools/content_assist_n.htm
+++ b/org.tizen.devtools/html/native_tools/content_assist_n.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
  <h1>Content Assist</h1>
diff --git a/org.tizen.devtools/html/native_tools/da_checkpoint_n.htm b/org.tizen.devtools/html/native_tools/da_checkpoint_n.htm
index 34ea149..7e1d0a1 100644
--- a/org.tizen.devtools/html/native_tools/da_checkpoint_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_checkpoint_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -36,13 +36,16 @@
 <h1>CheckPoint Analysis</h1>
   <p>The <strong>CheckPoint</strong> tab of the dynamic analyzer shows the actual value of variables at specific points of code (CheckPoint). You can trace the changes in the variable value to help in the application debugging.</p>
 <p>The CheckPoints can be <a href="#ide">set in the IDE source editor</a>, and the CheckPoint value is shown in the dynamic analyzer.</p>
-  <p class="figure">Figure: CheckPoint analysis</p> 
-  <p align="center"> <img alt="CheckPoint analysis" src="../images/da_checkpoint_analysis.png"/> </p> 
+
   <p>The tab consists of the following views:</p>
   <ol>
    <li><a href="#chart">CheckPoint chart</a> shows the values of all variables.</li>
    <li><a href="#list">CheckPoint list</a> shows the values of a specific variable selected on the chart.</li>  
   </ol> 
+  
+  <p class="figure">Figure: CheckPoint analysis</p> 
+  <p align="center"> <img alt="CheckPoint analysis" src="../images/da_checkpoint_analysis.png"/> </p> 
+
 
   <h2 name="ide" id="ide">Setting the CheckPoint in the IDE</h2> 
   <p>To use the CheckPoint Analysis, you must set a CheckPoint in the IDE source editor. The CheckPoint can be set on any valid point, which is a variable in an executable line:</p>
diff --git a/org.tizen.devtools/html/native_tools/da_file_n.htm b/org.tizen.devtools/html/native_tools/da_file_n.htm
index 264b526..eab4f7b 100644
--- a/org.tizen.devtools/html/native_tools/da_file_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_file_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -38,15 +38,17 @@
  <h1>File Analysis</h1> 
   
   <p>The <strong>File</strong> tab of the dynamic analyzer shows information associated with file operations. The <strong>File</strong> tab can be enabled or disabled in runtime from the <strong>Configuration</strong> dialog. If the file analysis capabilities are disables, the file API information is not displayed.</p>
-  
-  <p class="figure">Figure: File analysis</p> 
-  <p align="center"> <img alt="File analysis" src="../images/file_tab.png" /> </p> 
+ 
   <p>The tab consists of the following views:</p> 
   <ol> 
    <li><a href="#chart">File chart</a> shows file operations (open/close, read/write, lock) as a time flow chart.</li> 
    <li><a href="#api">File API List</a> view shows the file APIs that are associated with the file selected in the file chart.</li> 
    <li><a href="#details">File Details</a> view shows detail information of the file selected in the file chart.</li> 
   </ol> 
+   
+  <p class="figure">Figure: File analysis</p> 
+  <p align="center"> <img alt="File analysis" src="../images/file_tab.png" /> </p> 
+  
   <p>Together, the views shows the following information:</p>
 <ul><li>Name and location of the file</li>
 <li>Current state of the file (closed or open)</li>
diff --git a/org.tizen.devtools/html/native_tools/da_network_n.htm b/org.tizen.devtools/html/native_tools/da_network_n.htm
index 9dff939..3899547 100644
--- a/org.tizen.devtools/html/native_tools/da_network_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_network_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -40,8 +40,6 @@
   
   <p>The <strong>Network</strong> tab of the dynamic analyzer displays network information. It only supports the socket APIs of glibc.</p>
 
-  <p class="figure">Figure: Network analysis</p> 
-  <p align="center"> <img alt="Network analysis" src="../images/da_network.png" /> </p> 
   
   <p>The tab consists of the following views:</p>
   <ol> 
@@ -50,6 +48,9 @@
    <li><a href="#details">Network Details</a> view shows detail information of the socket selected in the socket chart.</li> 
    </ol>
 
+  <p class="figure">Figure: Network analysis</p> 
+  <p align="center"> <img alt="Network analysis" src="../images/da_network.png" /> </p>    
+   
   <h2 name="chart" id="chart">Network Chart</h2> 
   
   
diff --git a/org.tizen.devtools/html/native_tools/da_opengl_n.htm b/org.tizen.devtools/html/native_tools/da_opengl_n.htm
index 441b7ad..45dc692 100644
--- a/org.tizen.devtools/html/native_tools/da_opengl_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_opengl_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -40,9 +40,7 @@
   
   <p>The <strong>OpenGL</strong> (Open Graphics Library) page of the dynamic analyzer displays information about OpenGL&reg; 2.0 and EvasGL.</p>
 
-  <p class="figure">Figure: OpenGL&reg; analysis</p> 
-  <p align="center"> <img alt="OpenGL&reg; analysis" src="../images/da_opengl_analysis.png" /> </p> 
-  
+
   <p>The tab consists of the following views:</p>
   <ul> 
    <li><a href="#chart">OpenGL&reg; chart</a> shows the elapsed time of the frame.</li>
@@ -53,6 +51,9 @@
    <li><a href="#program">Program</a> list shows all the shader program information.</li> 
    <li><a href="#texture">Texture</a> list shows texture information.</li> </ul>
 
+     <p class="figure">Figure: OpenGL&reg; analysis</p> 
+  <p align="center"> <img alt="OpenGL&reg; analysis" src="../images/da_opengl_analysis.png" /> </p> 
+   
      <h2 name="chart" id="chart">OpenGL&reg; Chart</h2> 
   
   <p>The <strong>OpenGL&reg; chart</strong> displays the elapsed frame time with 2 charts:</p>
diff --git a/org.tizen.devtools/html/native_tools/da_overview_n.htm b/org.tizen.devtools/html/native_tools/da_overview_n.htm
index 034da08..5bd41af 100644
--- a/org.tizen.devtools/html/native_tools/da_overview_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_overview_n.htm
@@ -23,7 +23,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 <h1>Dynamic Analyzer</h1> 
   <p>You can monitor the performance and reliability of your Native application on a target device or the Emulator 
diff --git a/org.tizen.devtools/html/native_tools/da_range_info_n.htm b/org.tizen.devtools/html/native_tools/da_range_info_n.htm
index bfae7d1..836fb4d 100644
--- a/org.tizen.devtools/html/native_tools/da_range_info_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_range_info_n.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
   <h1>Range</h1> 
diff --git a/org.tizen.devtools/html/native_tools/da_summary_n.htm b/org.tizen.devtools/html/native_tools/da_summary_n.htm
index d7f7fdb..59dab2f 100644
--- a/org.tizen.devtools/html/native_tools/da_summary_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_summary_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -36,8 +36,7 @@
 <h1>Summary</h1> 
   <p>The <strong>Summary</strong> tab of the dynamic analyzer provides various information about the application performance.</p> 
 
-  <p class="figure">Figure: Summary information</p> 
-  <p align="center"> <img alt="Summary information" src="../images/da_summary_info.png" /> </p> 
+
   <p>The tab consists of the following views:</p> 
   <ol> 
 
@@ -46,7 +45,8 @@
    <li><a href="#usage">Function Usage Profiling view</a> shows profiling information of the used methods.</li> 
 
   </ol> 
-
+  <p class="figure">Figure: Summary information</p> 
+  <p align="center"> <img alt="Summary information" src="../images/da_summary_info.png" /> </p> 
   
   <h2 name="leak" id="leak">Leaks</h2> 
   <p>The <strong>Leaks</strong> view shows data that is recognized as a leak on application runtime, mainly related to memory allocation and file operations.</p> 
diff --git a/org.tizen.devtools/html/native_tools/da_thread_n.htm b/org.tizen.devtools/html/native_tools/da_thread_n.htm
index 36af9ea..8b30bab 100644
--- a/org.tizen.devtools/html/native_tools/da_thread_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_thread_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -37,8 +37,7 @@
 <div id="container"><div id="contents"><div class="content">
   <h1><a name="thread" id="thread">Thread Analysis</a></h1> 
   <p>The <strong>Thread</strong> tab of the dynamic analyzer displays information about threads and synchronization.</p> 
-  <p class="figure">Figure: Thread analysis</p> 
-  <p> <img alt="Thread analysis" src="../images/thread_analysis.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+
   <p>The tab consists of the following views:</p> 
   <ol> 
    <li><a href="#thread_chart">Thread chart</a> displays thread and synchronization operations and the thread load as a time flow graph.</li> 
@@ -47,6 +46,9 @@
    <li><a href="da_views_n.htm#snapshot">Snapshot</a> view provides additional information in the form of snapshots.</li>
   </ol> 
 
+    <p class="figure">Figure: Thread analysis</p> 
+  <p> <img alt="Thread analysis" src="../images/thread_analysis.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  
     <h2><a name="thread_chart" id="thread_chart">Thread Chart</a></h2> 
   <p>The thread chart displays the thread and the related synchronization object in a tree format using a graph.</p> 
   <p>You can select either thread or synchronization as a parent of the tree.</p> 
diff --git a/org.tizen.devtools/html/native_tools/da_timeline_n.htm b/org.tizen.devtools/html/native_tools/da_timeline_n.htm
index 34ad6ed..60f593b 100644
--- a/org.tizen.devtools/html/native_tools/da_timeline_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_timeline_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -35,8 +35,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Timeline</h1> 
   <p>The <strong>Timeline</strong> tab of the dynamic analyzer shows the data values over time as a graph.</p> 
-  <p class="figure">Figure: Timeline information</p> 
-  <p align="center"> <img alt="Timeline information" src="../images/timeline.png" /> </p> 
+
   <p>The tab consists of the following views:</p> 
   <ol> 
    <li><a href="#timechart">Timeline chart</a> shows the data values in a graph. The chart content can be edited in the <a href="#config">Edit chart</a> dialog.</li>
@@ -44,6 +43,9 @@
    <li><a href="#trace">Call Trace</a> shows the user API calls.</li> 
   </ol> 
 
+    <p class="figure">Figure: Timeline information</p> 
+  <p align="center"> <img alt="Timeline information" src="../images/timeline.png" /> </p> 
+  
   <h2 name="timechart" id="timechart">Timeline Chart</h2> 
   <p>The timeline chart shows the data values over time as a chart. You can create 12 different charts, which can be selected from the left side of the window.</p> 
 
diff --git a/org.tizen.devtools/html/native_tools/da_views_n.htm b/org.tizen.devtools/html/native_tools/da_views_n.htm
index a29f9b8..8c4f301 100644
--- a/org.tizen.devtools/html/native_tools/da_views_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_views_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.devtools/html/native_tools/enventor_n.htm b/org.tizen.devtools/html/native_tools/enventor_n.htm
index ea6e775..bad493f 100644
--- a/org.tizen.devtools/html/native_tools/enventor_n.htm
+++ b/org.tizen.devtools/html/native_tools/enventor_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -45,13 +45,8 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Enventor</h1> 
 	<p>Tizen SDK provides a useful theme editor tool, Enventor. Enventor supports the text edit function and the preview function for EDC source code. You can edit EDC source code to create your layout using Enventor.</p>
-
-<p>For more information about the EDC format, see <a href="http://docs.enlightenment.org/auto/edje/edje_main.html" target="_blank">Edje</a> module and <a href="http://docs.enlightenment.org/auto/edje/edcref.html" target="_blank">EDC</a> format.</p>
-
-<p class="figure">Figure: Enventor basic view</p> 
-<p align="center"><img alt="Enventor basic view" src="../images/enventor_basic_view.png" /></p> 
-  
-<p>Before using Enventor, familiarize yourself with the following:</p>
+	
+	<p>Before using Enventor, familiarize yourself with the following:</p>
 <ul>
 	<li><a href="#layout">Enventor Layout</a></li>
 	<li><a href="#textview">Using the Text View</a></li>
@@ -61,6 +56,24 @@
 	<li><a href="#conf">Configuration Setting</a></li>
 </ul>
 
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Enventor is supported only in mobile Ubuntu.</td>
+    </tr>
+   </tbody>
+  </table>
+	
+<p>For more information about the EDC format, see <a href="http://docs.enlightenment.org/auto/edje/edje_main.html" target="_blank">Edje</a> module and <a href="http://docs.enlightenment.org/auto/edje/edcref.html" target="_blank">EDC</a> format.</p>
+
+<p class="figure">Figure: Enventor basic view</p> 
+<p align="center"><img alt="Enventor basic view" src="../images/enventor_basic_view.png" /></p> 
+  
+
+
 
 <h2 id="layout" name="layout">Enventor Layout</h2>
 <p>Basically, the Enventor view is divided into 2 sections, the live view and the text view. The live view is the left pane of the Enventor window and it previews images corresponding to the part objects of EDC source code. The text view is the right pane of the Enventor window and it contains EDC source code.</p>
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 0688710..f931f72 100644
--- a/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
+++ b/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -340,21 +340,23 @@
 
 
 <h2 name="bg-category" id="bg-category">&lt;background-category&gt; Element</h2>
-<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>
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element represents the category of the application running on the background.</p>
 <table class="note">
 <tbody>
 <tr><th class="note">Note</th></tr>
-<tr><td class="note"><span stye="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> is not supported for lower than 2.4 version of the API, so an application with <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> may failed to be installed on the devices with Tizen lower than version 2.4. In this case, the element can be replaced with <span style="font-family: Courier New,Courier,monospace">&lt;metadata key=&quot;http://tizen.org/metadata/bacgkround-category/value&quot;/&gt;</span></td></tr>
+<tr><td class="note">The <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element is not supported for API versions lower than 2.4. An application with a <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element can fail to be installed on devices with a Tizen version lower than 2.4. In this case, the element can be replaced with <span style="font-family: Courier New,Courier,monospace">&lt;metadata key=&quot;http://tizen.org/metadata/bacgkround-category/&lt;value&gt;&quot;/&gt;</span>.</td>
+</tr>
 </tbody>
 </table>
+
 <table border="1"><tbody>
 <tr>
 <th style="text-align:left;margin-left:auto;margin-right:auto;">
 <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element</th> 
     </tr>
 <tr>
-<td> 
-<p>Category of the application that is allowed to run on the background</p> 
+<td>
+<p>Category of the application that is allowed to run on the background.</p> 
 <p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">Element hierarchy</a>.</p> 
 <p><strong>Occurrences:</strong> </p> 
 		<ul>
@@ -372,7 +374,7 @@
 <span style="font-family: Courier New,Courier,monospace">value</span> attribute</th> 
     </tr>
 <tr>
-<td> <p>Value of background category</p>
+<td> <p>Value of the background category.</p>
          <p><strong>Expected value:</strong> </p>      
          <ul>
 <li>String</li> 
@@ -380,8 +382,10 @@
 </td> 
     </tr>
 </tbody></table>
-<p><strong>For example:</strong></p><pre class="prettyprint">&lt;background-category value="download"/&gt;&lt;!-- for the API version 2.4 or later --&gt;
-&lt;metadata key=&quot;http://tizen.org/metadata/background-category/download&quot;/&gt;&lt;!-- for the API version lower than 2.4 --&gt;
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">
+&lt;background-category value=&quot;download&quot;/&gt;&lt;!--For the API version 2.4 or later--&gt;
+&lt;metadata key=&quot;http://tizen.org/metadata/background-category/download&quot;/&gt;&lt;!--For the API version lower than 2.4--&gt;
 </pre>
 
 
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 5180db2..53f633f 100644
--- a/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm
+++ b/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm
@@ -17,7 +17,7 @@
 
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -45,14 +45,7 @@
     <p>A Tizen native application package consists of exactly 1 manifest file, called <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span>, which is used to describe the application information. The manifest file is composed of XML elements, which include the root <a href="#manifest">&lt;manifest&gt;</a> element and its child elements representing application information, such as  <span style="font-family: Courier New,Courier,monospace;">&lt;version&gt;</span>, and <span style="font-family: Courier New,Courier,monospace;">&lt;privileges&gt;</span>. The <a href="#hierarchy">child elements are organized into a specific hierarchy</a>. The elements can have attributes associated with them, providing more information about the element.</p>
 <p>The manifest file information can be edited using the <a href="../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">manifest editor</a>, or you can modify the XML structure directly using the text editor. To open the manifest editor, double-click the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view of the IDE. To use the text editor, right-click the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view and select <strong>Open with &gt; Text Editor</strong>.</p>
 
-<table class="note"><tbody>
-<tr>
-<th class="note">Note</th> 
-      </tr>
-<tr>
-<td class="note">The <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file must conform to both the standard XML file format and the Tizen native application specification requirements. Editing the manifest file XML structure with the text editor is intended for advanced users only.</td> 
-      </tr>
-</tbody></table>
+
 <p>The following example illustrates the content and structure of a <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file:</p>
 <pre class="prettyprint">
 &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
@@ -60,8 +53,8 @@
 &nbsp;&nbsp;&nbsp;&lt;author email=&quot;email@email.com&quot; href=&quot;http://test.com&quot;&gt;author&lt;/author&gt;
 &nbsp;&nbsp;&nbsp;&lt;description&gt;testdescriptions&lt;/description&gt;
 &nbsp;&nbsp;&nbsp;&lt;description xml:lang=&quot;en-gb&quot;&gt;testdesc&lt;/description&gt;
-&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.uiapp&quot; auto-restart=&quot;false&quot; exec=&quot;uiapp&quot; launch_mode=&quot;single&quot; multiple=&quot;false&quot; nodisplay=&quot;false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on-boot=&quot;true&quot; taskmanage=&quot;true&quot; hw-acceleration=&quot;default&quot; type=&quot;capp&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.uiapp&quot; auto-restart=&quot;false&quot; exec=&quot;uiapp&quot; launch_mode=&quot;single&quot; multiple=&quot;false&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodisplay=&quot;false&quot; on-boot=&quot;true&quot; taskmanage=&quot;true&quot; hw-acceleration=&quot;default&quot; type=&quot;capp&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;uiapplication&lt;/label&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;testlang&lt;/label&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;uiapp.png&lt;/icon&gt;
@@ -97,6 +90,14 @@
 &lt;/manifest&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;">tizen-manifest.xml</span> file must conform to both the standard XML file format and the Tizen native application specification requirements. Editing the manifest file XML structure with the text editor is intended for advanced users only.</td> 
+      </tr>
+</tbody></table>
 
 <h2 name="hierarchy" id="hierarchy">Manifest Element Hierarchy</h2> 
   <p>The Tizen native application manifest file consists of XML elements organized in a hierarchy. The following tree structure shows the relationship between the elements of the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file.</p> 
@@ -114,159 +115,190 @@
 <td colspan="7" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#manifest">&lt;manifest&gt;</a></span></td>
 	</tr>
 <tr>
-<td style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="6" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#author">&lt;author&gt;</a></span></td>
 	</tr>
 <tr>
-<td style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="6" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#description">&lt;description&gt;</a></span></td>
 	</tr>
 <tr>
-<td style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="6" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#service">&lt;service-application&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="3" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="4" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#operation">&lt;operation&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="3" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="4" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#uri">&lt;uri&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="3" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="4" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#mime">&lt;mime&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</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 style="border:none;">&nbsp;</td>
 		<td colspan="6" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#ui">&lt;ui-application&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="3" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="4" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#operation">&lt;operation&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="3" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="4" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#uri">&lt;uri&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="3" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="4" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#mime">&lt;mime&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span>
 </td>
 	</tr>
 <tr>
-	<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</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 style="border:none;">&nbsp;</td>
 		<td colspan="6" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#account">&lt;account&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#accountprovider">&lt;account-provider&gt;</a></span>
 		</td>
 	</tr>
 <tr>
-<td colspan="3" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="4" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#icon">&lt;icon&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="3" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="4" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="3" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="4" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#capability">&lt;capability&gt;</a></span>
 </td>
@@ -274,67 +306,73 @@
 	
 	
 <tr>
-<td style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="6" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#privileges">&lt;privileges&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#privilege">&lt;privilege&gt;</a></span>
 		</td>
 	</tr>
 <tr>
-<td style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="6" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#feature">&lt;feature&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="6" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#profile_element">&lt;profile&gt;</a></span>
 </td>
 	</tr>
 <tr>
-<td style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="6" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#widget_app">&lt;widget-application&gt;</a></span>
 </td>
 	</tr>	
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#widget_icon">&lt;icon&gt;</a></span>
 		</td>
 	</tr>
 	<tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#widget_label">&lt;label&gt;</a></span>
 		</td>
 	</tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#widget_supportsize">&lt;support-size&gt;</a></span>
 		</td>
 	</tr>
 <tr>
-<td style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="6" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#watch_app">&lt;watch-application&gt;</a></span>
 </td>
 	</tr>	
 <tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#watch_icon">&lt;icon&gt;</a></span>
 		</td>
 	</tr>
 	<tr>
-<td colspan="2" style="border:none;"></td>
+<td style="border:none;">&nbsp;</td>
+<td style="border:none;">&nbsp;</td>
 		<td colspan="5" style="border:none;">
 		<span style="font-family: Courier New,Courier,monospace"><a href="#watch_label">&lt;label&gt;</a></span>
 		</td>
@@ -460,7 +498,7 @@
 <td> <p>Version number of the application.</p>
     <p><strong>Expected value:</strong> </p> 
     <ul>
-<li>Number in the &quot;x.y.z&quot; format, where 0 &lt; x &lt; 255, 0 &lt; y &lt; 255, and 0 &lt; z &lt; 65535</li> 
+<li>Number in the &quot;x.y.z&quot; format, where 0 &lt;= x &lt;= 255, 0 &lt;= y &lt;= 255, and 0 &lt;= z &lt;= 65535</li> 
       </ul>
 </td> 
     </tr>
@@ -474,10 +512,8 @@
 <td> <p>API version number for the application.</p>
     <p><strong>Expected value:</strong> </p> 
     <ul>
-<li>Number in the &quot;x.y.z&quot; format</li>
-<li>z is optional</li>
-<li>ex) 2.3.1, 2.4</li>
-      </ul>
+<li>Number in the &quot;x.y.z&quot; format, where z is optional (for example: <span style="font-family: Courier New,Courier,monospace">2.3.1</span> or <span style="font-family: Courier New,Courier,monospace">2.4</span>)</li>
+    </ul>
 </td> 
     </tr>
 </tbody></table>
@@ -845,24 +881,21 @@
 	<td>1 or more (optional)</td> 
 	</tr>
 
-
-		</tbody>
-		</table>
-	<p><strong>Attributes:</strong> </p>
-	<ul>
-		<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_appid">appid</a></span></li>
-		<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_exec">exec</a></span></li>
-		<li><span style="font-family: Courier New,Courier,monospace"><a href="#launch_mode">launch_mode</a></span></li>
-		<li><span style="font-family: Courier New,Courier,monospace"><a href="#hw-acceleration">hw-acceleration</a></span></li>
-		<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_multiple">multiple</a></span></li>
-		<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_nodisplay">nodisplay</a></span></li>
-		<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_taskmanage">taskmanage</a></span></li>
-		<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_type">type</a></span></li>
-	</ul>
-</td>
-</tr>
-  </tbody></table>
-
+</tbody></table>
+<p><strong>Attributes:</strong> </p>      
+	  <ul>
+<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_appid">appid</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_exec">exec</a></span></li> 
+	   <li><span style="font-family: Courier New,Courier,monospace"><a href="#launch_mode">launch_mode</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_multiple">multiple</a></span></li> 
+	   <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_nodisplay">nodisplay</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_taskmanage">taskmanage</a></span></li>
+	   <li><span style="font-family: Courier New,Courier,monospace"><a href="#hw-acceleration">hw-acceleration</a></span></li>
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_type">type</a></span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
 <table border="1" id="ui_appid"><tbody>
 <tr>
 <th style="text-align:left;margin-left:auto;margin-right:auto;">
@@ -908,30 +941,6 @@
 </td> 
     </tr>
 </tbody></table>
-
-
-	<table border="1" id="hw-acceleration">
-		<tbody>
-		<tr>
-			<th style="text-align:left;margin-left:auto;margin-right:auto;">
-				<span style="font-family: Courier New,Courier,monospace">hw-acceleration</span> attribute</th>
-		</tr>
-		<tr>
-			<td> <p>Application hardware acceleration.</p>
-				<p>By default, this value is set to <span style="font-family: Courier New,Courier,monospace">default</span>.</p>
-				<p><strong>Expected value:</strong> </p>
-				<ul>
-					<li><span style="font-family: Courier New,Courier,monospace">default</span> (Depend on system setting)</li>
-					<li><span style="font-family: Courier New,Courier,monospace">on</span> (Use hardware acceleration)</li>
-					<li><span style="font-family: Courier New,Courier,monospace">off</span> (Do not use hardware acceleration)</li>
-				</ul>
-			</td>
-		</tr>
-		</tbody>
-	</table>
-
-
-
 <table border="1" id="ui_multiple"><tbody>
 <tr>
 <th style="text-align:left;margin-left:auto;margin-right:auto;">
@@ -978,6 +987,27 @@
     </tr>
 </tbody></table>
 
+<table border="1" id="hw-acceleration">
+<tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+                               <span style="font-family: Courier New,Courier,monospace">hw-acceleration</span> attribute</th>
+</tr>
+<tr>
+	   <td> <p>Indicates the application hardware acceleration status.</p>
+			   <p>By default, this value is set to <span style="font-family: Courier New,Courier,monospace">default</span>.</p>
+			   <p><strong>Expected value:</strong> </p>
+			   <ul>
+					   <li><span style="font-family: Courier New,Courier,monospace">default</span> (depends on the system setting)</li>
+					   <li><span style="font-family: Courier New,Courier,monospace">on</span> (use hardware acceleration)</li>
+					   <li><span style="font-family: Courier New,Courier,monospace">off</span> (do not use hardware acceleration)</li>
+			   </ul>
+	   </td>
+</tr>
+</tbody>
+</table>
+
+
 <table border="1" id="ui_type"><tbody>
 <tr>
 <th style="text-align:left;margin-left:auto;margin-right:auto;">
@@ -999,7 +1029,8 @@
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">&lt;ui-application appid=&quot;org.tizen.uiapp&quot; auto-restart=&quot;false&quot; exec=&quot;uiapp&quot; launch_mode=&quot;single&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multiple=&quot;false&quot; hw-acceleration=&quot;default&quot; nodisplay=&quot;false&quot; on-boot=&quot;true&quot; taskmanage=&quot;true&quot; type=&quot;capp&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multiple=&quot;false&quot; nodisplay=&quot;false&quot; on-boot=&quot;true&quot; taskmanage=&quot;true&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hw-acceleration=&quot;default&quot; type=&quot;capp&quot;&gt;
 &nbsp;&nbsp;&nbsp;&lt;label&gt;uiapplication&lt;/label&gt;
 &nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;testlang&lt;/label&gt;
 &nbsp;&nbsp;&nbsp;&lt;icon&gt;uiapp.png&lt;/icon&gt;
@@ -1352,7 +1383,7 @@
 <p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p>
 <p><strong>Occurrences:</strong> </p> 
       <ul>
-<li>1 or more (optional)</li> 
+<li>1 (optional)</li> 
       </ul>
 <p><strong>Expected children:</strong> </p>      
 	    <table border="1"><tbody>
@@ -1362,15 +1393,15 @@
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_icon">&lt;icon&gt;</a></span></td> 
-     <td>1 or more (optional)</td> 
+     <td>1</td> 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_label">&lt;label&gt;</a></span></td> 
-     <td>1 or more (optional)</td> 
+     <td>1</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 or more</td> 
+     <td>1</td> 
     </tr>
 </tbody></table>
 <p><strong>Attributes:</strong> </p>      
@@ -1393,7 +1424,7 @@
 <td> <p>Widget application icon image.</p> 
 <p><strong>Occurrences:</strong> </p> 
       <ul>
-<li>1 or more (optional)</li> 
+<li>1</li> 
       </ul>
 
 <p><strong>Expected value:</strong> </p>     
@@ -1412,7 +1443,7 @@
 <td> <p>Widget application text.</p> 
 <p><strong>Occurrences:</strong> </p> 
       <ul>
-<li>1 or more (optional)</li> 
+<li>1</li> 
       </ul>
 
 <p><strong>Expected value:</strong> </p>     
@@ -1431,7 +1462,7 @@
 <td> <p>Size supported by the widget application.</p> 
 <p><strong>Occurrences:</strong> </p> 
       <ul>
-<li>1 or more</li> 
+<li>1</li> 
       </ul>
 <p><strong>Attributes:</strong> </p> 
 		<ul>
@@ -1697,4 +1728,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.devtools/html/native_tools/po_file_editor_n.htm b/org.tizen.devtools/html/native_tools/po_file_editor_n.htm
index 28cf0b0..34c03b3 100644
--- a/org.tizen.devtools/html/native_tools/po_file_editor_n.htm
+++ b/org.tizen.devtools/html/native_tools/po_file_editor_n.htm
@@ -21,24 +21,14 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 <h1>PO File Editor</h1> 
 
 <p>PO file editor is used to edit <span style="font-family: Courier New,Courier,monospace">.po</span> files to generate compiled <a href="https://www.gnu.org/software/gettext/" target="_blank">gettext</a> <span style="font-family: Courier New,Courier,monospace">.mo</span> files, which are used by Tizen native applications to localize the user interface. <strong>gettext</strong> is GNU Translation Project, an internationalization and localization (i18n) system commonly used for writing multilingual programs on Unix-like computer OS.</p>
 
-  <table class="note"><tbody>
-<tr>
-<th class="note">Note</th> 
-      </tr>
-<tr>
-<td class="note">There is no specific wizard to create <span style="font-family: Courier New,Courier,monospace">.po</span> files. To create a <span style="font-family: Courier New,Courier,monospace">.po</span> file,  go to <strong>New &gt; Other &gt; General &gt; File</strong> and save the file with the extension <span style="font-family: Courier New,Courier,monospace">.po</span> in the <span style="font-family: Courier New,Courier,monospace">res/po</span> directory.
-<p>A <span style="font-family: Courier New,Courier,monospace">.po</span> file name usually has the form <span style="font-family: Courier New,Courier,monospace">&lt;ll&gt;_&lt;CC&gt;.po</span>. Here <span style="font-family: Courier New,Courier,monospace">&lt;ll&gt;</span> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Country-Codes.html" target="_blank">ISO 639</a> 2-letter language code, and <span style="font-family: Courier New,Courier,monospace">&lt;CC&gt;</span> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Usual-Language-Codes.html" target="blank">ISO 3166</a> 2-letter country code. For example, for German in Germany, the file name is <span style="font-family: Courier New,Courier,monospace">de_DE.po</span>.</p>
-</td>
 
-      </tr>
-</tbody></table>
 
 <p>To open the PO file editor, double-click the <span style="font-family: Courier New,Courier,monospace">.po</span> file in the Project Explorer.</p>
 
@@ -62,6 +52,17 @@
 <p class="figure">Figure: Removing languages</p> 
 <p align="center"><img alt="Removing languages" src="../images/po_file_editor4.png" /></p> 
 
+  <table class="note"><tbody>
+<tr>
+<th class="note">Note</th> 
+      </tr>
+<tr>
+<td class="note">There is no specific wizard to create <span style="font-family: Courier New,Courier,monospace">.po</span> files. To create a <span style="font-family: Courier New,Courier,monospace">.po</span> file,  go to <strong>New &gt; Other &gt; General &gt; File</strong> and save the file with the extension <span style="font-family: Courier New,Courier,monospace">.po</span> in the <span style="font-family: Courier New,Courier,monospace">res/po</span> directory.
+<p>A <span style="font-family: Courier New,Courier,monospace">.po</span> file name usually has the form <span style="font-family: Courier New,Courier,monospace">&lt;ll&gt;_&lt;CC&gt;.po</span>. Here <span style="font-family: Courier New,Courier,monospace">&lt;ll&gt;</span> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Country-Codes.html" target="_blank">ISO 639</a> 2-letter language code, and <span style="font-family: Courier New,Courier,monospace">&lt;CC&gt;</span> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Usual-Language-Codes.html" target="blank">ISO 3166</a> 2-letter country code. For example, for German in Germany, the file name is <span style="font-family: Courier New,Courier,monospace">de_DE.po</span>.</p>
+</td>
+
+      </tr>
+</tbody></table>
 
     
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.devtools/html/native_tools/project_conversion_n.htm b/org.tizen.devtools/html/native_tools/project_conversion_n.htm
index eafc395..ba65b4e 100644
--- a/org.tizen.devtools/html/native_tools/project_conversion_n.htm
+++ b/org.tizen.devtools/html/native_tools/project_conversion_n.htm
@@ -11,39 +11,36 @@
 	<script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
 	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-	<title>Project Conversion for CLI</title>  
+	<title>Project Conversion</title>  
 </head>
 
-<body onload="prettyPrint()" style="overflow: auto;">
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-	</div>
 </div>	
 
 <div id="container"><div id="contents"><div class="content">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+	</div>
 
-<h1>Project Conversion for CLI</h1>
+<h1>Project Conversion</h1>
 
-<p>The Tizen SDK provides a method for building an IDE-created project by CLI:</p>
+<p>The Tizen SDK provides a method for building an IDE-created project using the CLI:</p>
 
 <ol>
-    <li>Select a Tizen native project in the Project Explorer View of the IDE.</li>
-    <li>Right-click the project, open the context menu, and then click <strong>Export to CLI Project</strong>.</li>
+    <li>Select a Tizen native project in the <strong>Project Explorer</strong> view of the IDE.</li>
+    <li>Right-click the project and, in the context menu, click <strong>Export to CLI Project</strong>.</li>
 </ol>
 
-<p>When the export is completed, 'make' files in 'Build' folder and 'project_def.prop' file which has many build options, will be added to the converted CLI project.</p>
+<p>During the export, the <span style="font-family: Courier New,Courier,monospace">make</span> files in the <span style="font-family: Courier New,Courier,monospace">Build</span> folder and the <span style="font-family: Courier New,Courier,monospace">project_def.prop</span> file (with many build options) are added to the converted CLI project.</p>
 
-<p>And then you can build a converted project by the following CLI command.</p>
 
-<pre class="prettyprint">
-  $ tizen build-native -–arch x86 –-compiler llvm –-configuration Debug -- /home/workspace/basic
-</pre>
+<p>The following table describes the properties in the <span style="font-family: Courier New,Courier,monospace">project_def.prop</span> file.</p>
 
   <table border="1"> 
      <caption>
-       Table: Properties in 'project_def.prop' file
+       Table: project_def.prop file properties
      </caption> 
      <tbody> 
       <tr> 
@@ -51,131 +48,177 @@
        <th style="text-align:center;margin-left:auto;margin-right:auto;">Value</th> 
       </tr> 
       <tr> 
-       <td>APPNAME</td> 
-       <td>It is the app name. It must be written in <strong>lowercase</strong> letters.<br><br>ex) APPNAME = test</td> 
+       <td><span style="font-family: Courier New,Courier,monospace">APPNAME</span></td> 
+       <td>Application name, which must be written in lowercase letters.
+	   <p>For example: <span style="font-family: Courier New,Courier,monospace">APPNAME = test</span></p></td> 
       </tr> 
 	  <tr> 
-       <td>type</td> 
-       <td>Select the application type in <strong>app</strong>, <strong>sharedLib</strong>, <strong>staticLib</strong><br><br>ex) type = app</td> 
+       <td><span style="font-family: Courier New,Courier,monospace">type</span></td> 
+       <td>Application type, which can be <strong>app</strong>, <strong>sharedLib</strong>, or <strong>staticLib</strong>.
+	   <p>For example: <span style="font-family: Courier New,Courier,monospace">type = app</span></p></td> 
       </tr>
 	  <tr> 
-       <td>profile</td> 
-       <td>Select the profile with version.<br><br>ex) profile = mobile-2.3</td>
+       <td><span style="font-family: Courier New,Courier,monospace">profile</span></td> 
+       <td>Profile with version.
+	   <p>For example: <span style="font-family: Courier New,Courier,monospace">profile = mobile-2.3</span></p></td>
       </tr>
 	  <tr> 
-       <td>USER_SRCS</td> 
-       <td>It is a list of '.c', '.cpp' source files in the current project.<br>It can be used with wildcard characters like '*'.<br>If more than two files, a separator is a white-space character.<br><br>ex) USER_SRCS = src/*.c</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_SRCS</span></td> 
+       <td>List of <span style="font-family: Courier New,Courier,monospace">.c</span> and <span style="font-family: Courier New,Courier,monospace">.cpp</span> source files in the current project.
+	   <p>The list can be used with wildcard characters, such as <span style="font-family: Courier New,Courier,monospace">*</span>.</p>
+	   <p>If there are more than 2 files, a white-space character separator is used.</p>
+	   <p>For example: <span style="font-family: Courier New,Courier,monospace">USER_SRCS = src/*.c</span></p></td>
       </tr>
 	  <tr> 
-       <td>USER_DEFS</td> 
-       <td>It is a list of user-defined C files added to the compilation process.<br>It must be used without <strong>-D</strong> characters for C compiler.<br><br>ex) USER_DEFS = ABC DEF</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_DEFS</span></td> 
+       <td>List of user-defined C files added to the compilation process.
+	   <p>The list must be used without the <strong>-D</strong> characters for the C compiler.</p>
+	   <p>For example: <span style="font-family: Courier New,Courier,monospace">USER_DEFS = ABC DEF</span></p></td>
       </tr>
 	  <tr> 
-       <td>USER_UNDEFS</td> 
-       <td>It is a list of user-defined C files excluded from the compilation process.<br>It must be used without <strong>-U</strong> characters for C compiler.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_UNDEFS</span></td> 
+       <td>List of user-defined C files excluded from the compilation process.
+	   <p>The list must be used without the <strong>-U</strong> characters for the C compiler.</p></td>
       </tr>
 	  <tr> 
-       <td>USER_CPP_DEFS</td> 
-       <td>It is a list of user-defined C++ files added to the compilation process.<br>It must be used without <strong>-D</strong> characters for C++ compiler.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_CPP_DEFS</span></td> 
+       <td>List of user-defined C++ files added to the compilation process.
+	   <p>The list must be used without the <strong>-D</strong> characters for the C++ compiler.</p></td>
       </tr>
 	  <tr> 
-       <td>USER_CPP_UNDEFS</td> 
-       <td>It is a list of user-defined C++ files excluded from the compilation process.<br>It must be used without <strong>-U</strong> characters for C++ compiler.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_CPP_UNDEFS</span></td> 
+       <td>List of user-defined C++ files excluded from the compilation process.
+	   <p>The list must be used without the <strong>-U</strong> characters for the C++ compiler.</p></td>
       </tr>
       <tr> 
-       <td>USER_LIBS</td> 
-       <td>It is a list of the library paths added to the linking process.<br>It must be used without <strong>-l</strong> characters.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_LIBS</span></td> 
+       <td>List of library paths added to the linking process.
+	   <p>The list must be used without the <strong>-l</strong> characters.</p></td>
       </tr>
       <tr> 
-       <td>USER_OBJS</td> 
-       <td>It is a path list of the '.o' files added to the linking process.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_OBJS</span></td> 
+       <td>Path list of the <span style="font-family: Courier New,Courier,monospace">.o</span> files added to the linking process.</td>
       </tr>
       <tr> 
-       <td>USER_OBJS_ABS</td> 
-       <td>It is a absolute path list of the '.o' files added to the linking process.<br>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_OBJS_ABS</span></td> 
+       <td>Absolute path list of the <span style="font-family: Courier New,Courier,monospace">.o</span> files added to the linking process.
+	   <p>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</p></td>
       </tr>
       <tr> 
-       <td>USER_INC_DIRS</td> 
-       <td>It is a path list of references for C compiling.<br>It must be used without <strong>-I</strong> characters.<br><br>ex) USER_INC_DIRS = inc</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_INC_DIRS</span></td> 
+       <td>Path list of references for C compiling.
+	   <p>The list must be used without the <strong>-I</strong> characters.</p>
+	   <p>For example: <span style="font-family: Courier New,Courier,monospace">USER_INC_DIRS = inc</span></p></td>
       </tr>
       <tr> 
-       <td>USER_INC_DIRS_ABS</td> 
-       <td>It is an absolute path list of references for C compiling.<br>It must be used without <strong>-I</strong> characters.<br>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.<br><br>ex) USER_INC_DIRS_ABS = $(workspace_loc)/extlib/lib</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_INC_DIRS_ABS</span></td> 
+       <td>Absolute path list of references for C compiling.
+	   <p>The list must be used without the <strong>-I</strong> characters.</p>
+	   <p>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</p>
+	   <p>For example: <span style="font-family: Courier New,Courier,monospace">USER_INC_DIRS_ABS = $(workspace_loc)/extlib/lib</span></p></td>
       </tr>
       <tr> 
-       <td>USER_INC_FILES</td> 
-       <td>It is a path list of '.h' files for C.<br>It must be used without <strong>-include</strong> characters.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_INC_FILES</span></td> 
+       <td>Path list of <span style="font-family: Courier New,Courier,monospace">.h</span> files for C.
+	   <p>The list must be used without the <strong>-include</strong> characters.</p></td>
       </tr>
       <tr> 
-       <td>USER_INC_FILES_ABS</td> 
-       <td>It is an absolute path list of '.h' files for C.<br>It must be used without <strong>-include</strong> characters.<br>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_INC_FILES_ABS</span></td> 
+       <td>Absolute path list of <span style="font-family: Courier New,Courier,monospace">.h</span> files for C.
+	   <p>The list must be used without the <strong>-include</strong> characters.</p>
+	   <p>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</p></td>
       </tr>
       <tr> 
-       <td>USER_CPP_INC_DIRS</td> 
-       <td>It is a path list of references for C++ compiling.<br>It must be used without <strong>-I</strong> characters.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_CPP_INC_DIRS</span></td> 
+       <td>Path list of references for C++ compiling.
+	   <p>The list must be used without the <strong>-I</strong> characters.</p></td>
       </tr>
       <tr> 
-       <td>USER_CPP_INC_DIRS_ABS</td> 
-       <td>It is an absolute path list of references for C++ compiling.<br>It must be used without <strong>-I</strong> characters.<br>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_CPP_INC_DIRS_ABS</span></td> 
+       <td>Absolute path list of references for C++ compiling.
+	   <p>The list must be used without the <strong>-I</strong> characters.</p>
+	   <p>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</p></td>
       </tr>
       <tr> 
-       <td>USER_CPP_INC_FILES</td> 
-       <td>It is a path list of '.h' files for C++.<br>It must be used without <strong>-include</strong> characters.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_CPP_INC_FILES</span></td> 
+       <td>Path list of <span style="font-family: Courier New,Courier,monospace">.h</span> files for C++.
+	   <p>The list must be used without the <strong>-include</strong> characters.</p></td>
       </tr>
       <tr> 
-       <td>USER_CPP_INC_FILES_ABS</td> 
-       <td>It is an absolute path list of '.h' files for C++.<br>It must be used without <strong>-include</strong> characters.<br>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_CPP_INC_FILES_ABS</span></td> 
+       <td>Absolute path list of <span style="font-family: Courier New,Courier,monospace">.h</span> files for C++.
+	   <p>The list must be used without the <strong>-include</strong> characters.</p>
+	   <p>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</p></td>
       </tr>
       <tr> 
-       <td>USER_LIB_DIRS</td> 
-       <td>It is a path list of references for the library linking.<br>It must be used without <strong>-L</strong> characters.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_LIB_DIRS</span></td> 
+       <td>Path list of references for the library linking.
+	   <p>The list must be used without the <strong>-L</strong> characters.</p></td>
       </tr>
       <tr> 
-       <td>USER_LIB_DIRS_ABS</td> 
-       <td>It is an absolute path list of references for the library linking.<br>It must be used without <strong>-L</strong> characters.<br>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_LIB_DIRS_ABS</span></td> 
+       <td>Absolute path list of references for the library linking.
+	   <p>The list must be used without the <strong>-L</strong> characters.</p>
+	   <p>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</p></td>
       </tr>
       <tr> 
-       <td>USER_EDCS</td> 
-       <td>It is a path list of '.edc' files.<br>It can be used with wildcard characters like '*'.<br>If more than two files, a separator is a white-space character.<br><br>ex) USER_EDCS = res/edje/*.edc</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS</span></td> 
+       <td>Path list of <span style="font-family: Courier New,Courier,monospace">.edc</span> files.
+	   <p>The list can be used with wildcard characters, such as <span style="font-family: Courier New,Courier,monospace">*</span>.</p>
+	   <p>If there are more than 2 files, a white-space character separator is used.</p>
+	   <p>For example: <span style="font-family: Courier New,Courier,monospace">USER_EDCS = res/edje/*.edc</span></p></td>
       </tr>
       <tr> 
-       <td>USER_EDCS_IMAGE_DIRS</td> 
-       <td>It is a path list of EDC references for compiling like <strong>'-id'</strong> option of the IDE.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS_IMAGE_DIRS</span></td> 
+       <td>Path list of EDC references for compiling, such as the <strong>-id</strong> option of the IDE.</td>
       </tr>
       <tr> 
-       <td>USER_EDCS_IMAGE_DIRS_ABS</td> 
-       <td>It is an absolute path list of EDC references for compiling like <strong>'-id'</strong> option of the IDE.<br>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS_IMAGE_DIRS_ABS</span></td> 
+       <td>Absolute path list of EDC references for compiling, such as the <strong>-id</strong> option of the IDE.
+	   <p>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</p></td>
       </tr>
       <tr> 
-       <td>USER_EDCS_SOUND_DIRS</td> 
-       <td>It is a path list of EDC references for compiling like <strong>'-sd'</strong> option of the IDE.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS_SOUND_DIRS</span></td> 
+       <td>Path list of EDC references for compiling, such as the <strong>-sd</strong> option of the IDE.</td>
       </tr>
       <tr> 
-       <td>USER_EDCS_SOUND_DIRS_ABS</td> 
-       <td>It is an absolute path list of EDC references for compiling like <strong>'-sd'</strong> option of the IDE.<br>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS_SOUND_DIRS_ABS</span></td> 
+       <td>Absolute path list of EDC references for compiling, such as the <strong>-sd</strong> option of the IDE.
+	   <p>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</p></td>
       </tr>
       <tr> 
-       <td>USER_EDCS_FONT_DIRS</td> 
-       <td>It is a path list of EDC references for compiling like <strong>'-fd'</strong> option of the IDE.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS_FONT_DIRS</span></td> 
+       <td>Path list of EDC references for compiling, such as the <strong>-fd</strong> option of the IDE.</td>
       </tr>
       <tr> 
-       <td>USER_EDCS_FONT_DIRS_ABS</td> 
-       <td>It is an absolute path list of EDC references for compiling like <strong>'-fd'</strong> option of the IDE.<br>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_EDCS_FONT_DIRS_ABS</span></td> 
+       <td>Absolute path list of EDC references for compiling, such as the <strong>-fd</strong> option of the IDE.
+	   <p>It is recommended to use <strong>$(workspace_loc)</strong> for IDE compatibility.</p></td>
       </tr>
       <tr> 
-       <td>USER_POS</td> 
-       <td>It is a path list of '.po' files.<br>It can be used with wildcard characters like '*'.<br>If more than two files, a separator is a white-space character.<br><br>ex) USER_POS = res/po/*.po</td>
+       <td><span style="font-family: Courier New,Courier,monospace">USER_POS</span></td> 
+       <td>Path list of <span style="font-family: Courier New,Courier,monospace">.po</span> files.
+	   <p>The list can be used with wildcard characters, such as <span style="font-family: Courier New,Courier,monospace">*</span>.</p>
+	   <p>If there are more than 2 files, a white-space character separator is used.</p>
+	   <p>For example: <span style="font-family: Courier New,Courier,monospace">USER_POS = res/po/*.po</span></p></td>
       </tr>
      </tbody> 
     </table>
 
+
+<p>To build a converted project, use the following CLI command:</p>
+
+<pre class="prettyprint">
+$ tizen build-native -–arch x86 –-compiler llvm –-configuration Debug -- /home/workspace/basic
+</pre>	
+	
 <table class="note">
     <tbody>
         <tr>
             <th class="note">Note</th>
         </tr>
         <tr>
-            <td class="note">The converted CLI project cannot be reconverted to the IDE-based project.</td>
+            <td class="note">A converted CLI project cannot be reconverted back to an IDE-based project.</td>
         </tr>
     </tbody>
 </table>
diff --git a/org.tizen.devtools/html/native_tools/project_wizard_n.htm b/org.tizen.devtools/html/native_tools/project_wizard_n.htm
index 6ffe6b1..21dd2a2 100644
--- a/org.tizen.devtools/html/native_tools/project_wizard_n.htm
+++ b/org.tizen.devtools/html/native_tools/project_wizard_n.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 
diff --git a/org.tizen.devtools/html/native_tools/resource_explorer_n.htm b/org.tizen.devtools/html/native_tools/resource_explorer_n.htm
new file mode 100644
index 0000000..fced898
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/resource_explorer_n.htm
@@ -0,0 +1,237 @@
+<!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>Resource Explorer</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">	 
+		 <li><a href="#config">Providing Configuration-specific Alternative Resources</a></li>	
+		 <li><a href="#example">Example of Managing Resources in the SDK</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Resource Explorer</h1> 
+  
+<p>Tizen native applications can run on different types of devices, such as wearable, phone, tablets, and TVs. Tizen also supports various resolutions (WVGA ~ XQXGA) and resources. Regardless of these advantages, remember that you must always polish your work to create an optimal application for each device.</p>
+
+<h2 id="config" name="config">Providing Configuration-specific Alternative Resources</h2>
+
+<p>An application must provide a different UI depending on a specific device configuration, such as the screen size and screen orientation. When developing the application, provide alternative resources for each device display state by grouping them in resource directories.</p>
+
+<h3>Predefined Resource Directory Hierarchy</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">res/contents</span> directory contains predefined directories for specific alternative resources, and the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file that is referenced at application runtime.</p>
+
+<p>The following example of a BasicUI project shows how to group the resources in your project. Place resources, such as images and sounds, in a specific subdirectory of the project&#39;s <span style="font-family: Courier New,Courier,monospace">res/contents</span> directory or the root directory of the <span style="font-family: Courier New,Courier,monospace">contents</span> directory.</p>
+<pre class="prettyprint">
+BasicUI/
+&nbsp;&nbsp;&nbsp;res/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contents/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LDPI /
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;basicui.png
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MDPI/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;basicui.png
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;basicui.png
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;res.xml
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Always include default resources in the root directory (not in a subdirectory of the <span style="font-family: Courier New,Courier,monospace">contents</span> directory) to ensure that your application has no dependencies on a specific device configuration.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>A specific subdirectory is named as <span style="font-family: Courier New,Courier,monospace">configuration-qualifier</span>. The configuration-qualifier is an indicator that represents each device configuration and more content can be appended to it with a dash (-). The following table shows the 2 configuration-qualifier types currently supported  by the SDK.</p>
+
+<table>
+<caption>Table: Configuration-qualifiers</caption>
+
+<tbody>
+<tr>
+ <th>Configuration-qualifier name</th>
+ <th>Type value</th>
+ <th>Description</th>
+</tr>
+ <tr>
+ <td>Language and region code</td>
+ <td>For example, <span style="font-family: Courier New,Courier,monospace">en_US</span> or <span style="font-family: Courier New,Courier,monospace">en_UK</span></td>
+ <td>The type values have the form <span style="font-family: Courier New,Courier,monospace">ll_CC</span>, where <span style="font-family: Courier New,Courier,monospace">ll</span> stands for an ISO 639 2-letter language code, and the optionally followed <span style="font-family: Courier New,Courier,monospace">CC</span> stands for an ISO 3166 2-upper letter region code.</td>
+ </tr>
+ <tr>
+ <td>DPI (Dot Per Inch) density</td>
+ <td><span style="font-family: Courier New,Courier,monospace">LDPI</span>
+<p><span style="font-family: Courier New,Courier,monospace">MDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">HDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">XHDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">XXHDPI</span></p></td>
+ <td>LDPI: low-dpi from 0 to 240
+<p>MDPI: medium-dpi from 241 to 300</p>
+<p>HDPI: high-dpi from 301 to 380</p>
+<p>XHDPI: extra-high-dpi from 381 to 480</p>
+<p>XXHDPI: extra-extra-high-dpi from 481 to 600</p></td>
+ </tr>
+ </tbody></table>
+
+<p>Each application base scale can be applied to each DPI through a relation modification between the DPI and profile factor.</p>
+
+<table>
+<caption>Table: DPI and profile factor</caption>
+
+<tbody>
+<tr>
+ <th>DPI type value</th>
+ <th>Small screen mobile
+<p>(profile factor: 0.7)</p></th>
+ <th>Large screen mobile
+<p>(profile factor: 0.8)</p></th>
+</tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">LDPI</span>
+<p><span style="font-family: Courier New,Courier,monospace">MDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">HDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">XHDPI</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">XXHDPI</span></p></td>
+ <td>0 ~ 1.9
+<p>1.9 ~ 2.3</p>
+<p>2.3 ~ 3.0</p>
+<p>3.0 ~ 3.7</p>
+<p>3.7 ~</p></td>
+ <td>0 ~ 2.1
+<p>2.1 ~ 2.7</p>
+<p>2.7 ~ 3.4</p>
+<p>3.4 ~ 4.3</p>
+<p>4.3 ~</p></td>
+ </tr>
+ </tbody></table>
+ 
+<p>The <span style="font-family: Courier New,Courier,monospace">res.xml</span> file is composed of XML elements and describes where each alternative resource is grouped into a device configuration. The following example shows a <span style="font-family: Courier New,Courier,monospace">res.xml</span> file based on the BasicUI project.</p>
+
+<pre class="prettyprint">
+&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;yes&quot;?&gt;
+&lt;res xmlns=&quot;http://tizen.org/ns/rm&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;group-image folder=&quot;contents&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;node folder=&quot;contents/LDPI&quot; screen-dpi-range=&quot;from 0 to 240&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;node folder=&quot;contents/MDPI&quot; screen-dpi-range=&quot;from 241 to 300&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/group-image&gt;
+&lt;/res&gt;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">res.xml</span> file is automatically generated as part of the build packaging process by the IDE. Since editing the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file manually is not easy, the IDE helps to minimize this difficulty by supporting the <strong>Resource Explorer</strong> view.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">You cannot modify the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file manually in IDE. The <span style="font-family: Courier New,Courier,monospace">res.xml</span> file is always overridden by the IDE during the packaging process.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<h3>Resource Explorer</h3> 
+<p>The <strong>Resource Explorer</strong> view helps you to place resources to support specific device configurations, such as different screen densities.</p>
+
+<p>In the <strong>Resource Explorer</strong> view, you can:</p>
+
+<ul><li>Show all resource configurations that the project provides (see the <a href="#tablist">Tab and folding lists</a> figure).</li>
+<li>Create multiple configuration-qualifier directories and remove them.</li>
+<li>Copy resources to an alternative directory by dragging and dropping into the view area. You can also remove resources.</li>
+<li>Generate code snippets by dragging and dropping into the source editor area.</li></ul>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">If the <strong>Resource Explorer</strong> view is not visible, open it by selecting <strong>Window &gt; Show View &gt; Other &gt; Resource Explorer</strong> from the IDE menu.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>To place a <span style="font-family: Courier New,Courier,monospace">basicui.png</span> image for LDPI and MDPI ()as shown in the Resource directory hierarchy figure below), use the following steps:</p>
+
+<ol><li>Open the <strong>Resource Configuration</strong> dialog by clicking <img alt="Resource Configuration" src="../images/fallback_icon.png" /> from the toolbar menu in the <strong>Resource Explorer</strong> view.</li>
+<li>Add a configuration by selecting <strong>LDPI</strong> and <strong>MDPI</strong> in the <strong>DPI</strong> combo box.</li>
+<li>Drag the <span style="font-family: Courier New,Courier,monospace">basicui.png</span> file and drop it into the proper tab list view area in the <strong>Resource Explorer</strong> view.</li></ol>
+
+<p class="figure">Figure: Resource directory hierarchy</p> 
+<p align="center"><img alt="Resource directory hierarchy" src="../images/fallback_directory.png" /></p> 
+ 
+<p>The following figure shows the Tab list view (on the left) and the Folding list view (on the right) of the <strong>Resource Explorer</strong> view. You can switch between the views using the buttons in the <strong>Resource Explorer</strong> view toolbar menu (<img alt="Switch to folding" src="../images/fallback_folding.png" /> to switch to folding lists and <img alt="Switch to tabs" src="../images/fallback_tablist.png" /> to switch to tab lists).</p>
+ 
+<p class="figure" id="tablist">Figure: Tab and folding lists</p> 
+<p align="center"><img alt="Tab and folding lists" src="../images/fallback_lists.png" /></p>  
+
+<h2 id="example" name="example">Example of Managing Resources in the SDK</h2>
+
+<p>The following steps provide a quick how-to for managing resources in the SDK:</p>
+
+<ol><li>Create a BasicUI project.</li>
+<li>Create a resource directory hierarchy and copy images into it.
+<p align="center"><img alt="Resource directory hierarchy and the Resource Explorer" src="../images/fallback_hierarchy.png" /></p>  
+</li> 
+<li>Create a <span style="font-family: Courier New,Courier,monospace">res.xml</span> file with the Build Package command.</li>
+<li>Check the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file.
+<p align="center"><img alt="res.xml" src="../images/fallback_resxml.png" /></p>
+</li> 
+<li>Add code for loading alternative resources by using the Resource Manager API (in <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">mobile</a> and <a href="../../../org.tizen.native.wearable.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">wearable</a> applications).
+<p align="center"><img alt="Resource Manager" src="../images/fallback_resmanager.png" /></p> 
+
+</li>
+<li>Build and run the BasicUI project.
+<p align="center"><img alt="Output" src="../images/fallback_output.png" /></p></li></ol>
+ 
+<p>In case of predefined application layouts (edc), you can use the <span style="font-family: Courier New,Courier,monospace">res.xml</span> file manually.</p>
+
+
+  
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/native_tools/static_analyzer_n.htm b/org.tizen.devtools/html/native_tools/static_analyzer_n.htm
index 416027c..df3211d 100644
--- a/org.tizen.devtools/html/native_tools/static_analyzer_n.htm
+++ b/org.tizen.devtools/html/native_tools/static_analyzer_n.htm
@@ -1,10 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<!-- saved from url=(0102)https://developer.tizen.org/dev-guide/2.3.0/org.tizen.devtools/html/native_tools/static_analyzer_n.htm -->
-<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">
+<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>
@@ -12,33 +12,30 @@
 	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
 	<title>Static Analyzer</title>  
-<style type="text/css"></style></head>
+</head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
-
-	<div id="toc_border" style="height: 556px;"><div id="toc" style="top: 81px; height: 543px; width: 254px;">
+	
+	<div id="toc_border"><div id="toc">
 				<p class="toc-title">Content</p>
 		<ul class="toc">
-			<li>
-<a href="#run">Running the Static Analyzer</a>
+			<li><a href="#run">Running the Static Analyzer</a>
 			</li>
-			<li>
-<a href="#bugs">Checkers selection</a>
+			<li><a href="#bugs">Selecting Checkers</a>
 			</li>
-			<li>
-<a href="#view">Viewing Static Analyzer Results</a>
+			<li><a href="#view">Viewing Static Analyzer Results</a>
 			</li>
 			
 		</ul>
 	</div></div>
 </div>	
 
-<div id="container"><div id="contents" style="padding-top: 0px; margin-bottom: 46px; right: 329px;"><div class="content">
+<div id="container"><div id="contents"><div class="content">
 <h1>Static Analyzer</h1> 
 	<p>Tizen Static Analyzer is a source code analysis tool that finds bugs in Tizen applications:</p> 
   <ul>
@@ -47,7 +44,7 @@
 </li> 
 
 <li>
- <a href="#bugs">Checkers selection</a> <p>Describes how to select the checkers you want for Static Analysis of your project </p>
+ <a href="#bugs">Selecting Checkers</a> <p>Describes how to select the checkers you want for the static analysis of your project.</p>
 </li> 
 <li>
   <a href="#view">Viewing Static Analyzer Results</a> <p>Describes how to view the results analyzed by Tizen Static Analyzer.</p>
@@ -57,38 +54,39 @@
   <h2 name="run" id="run">Running the Static Analyzer</h2> 
 	<p>To run a static analysis for your application:</p> 
   <ol>
-<li>
-<p>Choose the target project in the <strong>Project Explorer</strong> view, open the context menu, and select <strong>Check Potential Bugs with Build</strong>.</p>
-<p style="text-align:center;"><img alt="Running the Static Analyzer" src="../images/running_tizen_sa.png"></p>
+<li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Check Potential Bugs with Build</strong>.</p>
+<p align="center"><img alt="Running the Static Analyzer" src="../images/running_tizen_sa.png" /></p>
 </li> 
 
 <li>View the analysis results in the <strong>Potential Bugs</strong> view on the right side. 
-<p style="text-align:center;"><img alt="Potential Bugs view" src="../images/tizen_sa_result.png"></p>
+<p align="center"><img alt="Potential Bugs view" src="../images/tizen_sa_result.png" /></p>
 </li> 
   </ol>
   
-<p>You can also enable the LLVM Static Analyzer to be run during the build process by changing the setting in the Project Properties: <strong>Tizen SDK &gt; Static Analysis</strong>.</p> 
+<p>You can also enable the LLVM Static Analyzer to be run during the build process by changing the setting in the project properties: <strong>Tizen SDK &gt; Static Analysis</strong>.</p>  
  <p class="figure">Figure: Static analysis properties</p> 
- <p style="text-align:center;"><img alt="Static analysis properties" src="../images/sa_property_page.png"></p>
+ <p align="center"><img alt="Static analysis properties" src="../images/sa_property_page.png"/></p>
+ 
  
- <h2 name="bugs" id="bugs">Checkers Selection</h2>
-	<p>A list of checkers can be selected for Static Analysis. For a new project all the checkers are selected by default.</p>
+<h2 name="bugs" id="bugs">Selecting Checkers</h2>
+
+<p>A list of checkers can be selected for static analysis. For a new project, all the checkers are selected by default.</p>
 <p>To select checkers for your application:</p>
 <ol>
-<li>
-In the <strong>Project Properties</strong> view, select <strong>Static Analysis</strong>.
-<p style="text-align:center;"><img alt="Running the Static Analyzer" src="../images/sa_property_page.png"></p>
+<li>In the <strong>Project Properties</strong> view, select <strong>Static Analysis</strong>.
+<p align="center"><img alt="Running the Static Analyzer" src="../images/sa_property_page.png" /></p>
 </li>
-<li>
-You can selectively set checkers for your project from the list. Selecting/de-selecting a checker will select/de-selct all the sub-checkers.
-<p style="text-align:center;"><img alt="Running the Static Analyzer" src="../images/sa_checkers_page.png"></p>
+<li>You can selectively set checkers for your project from the list. Selecting or clearing a checker selects or clears all the sub-checkers.
+<p align="center"><img alt="Selecting the checkers" src="../images/sa_checkers_page.png" /></p>
 </li>
-<li>
-More info about a checker can be obtained by hovering on it
-<p style="text-align:center;"><img alt="Running the Static Analyzer" src="../images/sa_checker_info.png"></p>
+<li>To obtain more information on a checker, hover over it.
+<p align="center"><img alt="Obtaining checker info" src="../images/sa_checker_info.png" /></p>
 </li>
 </ol>
 
+  
+ 
+ 
  <h2 name="view" id="view">Viewing Static Analyzer Results</h2> 
   <p>The Tizen Static Analyzer results are displayed in the <strong>Potential Bug</strong> view after the analysis is completed.</p> 
   <p>The <strong>Potential Bug</strong> view opens automatically, when you make a build or check potential bugs. To open the Potential Bugs explicitly:</p>
@@ -103,24 +101,40 @@ Type <strong>Potential Bugs</strong>.
 Select <strong>Potential Bugs</strong> and click <strong>OK</strong>.
 </li> 
 </ol>
-<p class="figure"" >Figure: Opening the Potential Bug view</p> 
-<figure style="text-align: center;">
-  <p style="display:inline-block; text-align:center;" ><img alt="Opening the Potential Bug view" src="../images/other_view.png"></p> 
-  <p style="display:inline-block ; text-align:center;" ><img alt="Opening the Potential Bug view" src="../images/potential_bug_select.png"></p> 
-</figure>
+<p class="figure">Figure: Opening the Potential Bug view</p> 
+  <p align="center"><img alt="Opening the Potential Bug view" src="../images/other_view.png"/></p> 
+  <p align="center"><img alt="Opening the Potential Bug view" src="../images/potential_bug_select.png"/></p> 
+
   <p>In the <strong>Potential Bug</strong> view, you can group the warnings based on type or file. You can also select any particular bug and expand it to see the complete flow, which resulted in the issue.</p> 
   
-  <p class="figure">Figure: Static Analyzer Results</p> 
-  <p style="text-align:center;"><img alt="Static Analyzer Results" src="../images/potential_bug_result.png"></p>
+  <p class="figure">Figure: Static Analyzer results</p> 
+  <p align="center"><img alt="Static Analyzer results" src="../images/potential_bug_result.png"/></p>
+
 
+
+  
+    
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
 
-<a class="top sms" href="#" style="display: block; bottom: 46px; left: 1350.5px;"><img src="../images/btn_top.gif" alt="Go to top"></a>
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
 
 <div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+<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>
 
-</body></html>
+<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>
+
diff --git a/org.tizen.devtools/html/native_tools/storyboard_n.htm b/org.tizen.devtools/html/native_tools/storyboard_n.htm
new file mode 100644
index 0000000..3a2bdc8
--- /dev/null
+++ b/org.tizen.devtools/html/native_tools/storyboard_n.htm
@@ -0,0 +1,104 @@
+<!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>Storyboard</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/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+	</div>
+	
+
+<h1>Storyboard</h1>
+
+<p>The purpose of the Tizen Storyboard is to provide an interactive view to help in the design of page transition. Using the Storyboard, you can visualize page transition in the application.</p>
+
+<p>The StoryBoard is an additional tab in the WYSIWYG Editor. The <strong>StoryBoard</strong> view consists of multiple pages of the native UI Builder and a connection which depicts the transition between the pages.</p>
+
+<p class="figure">Figure: Component diagram</p>
+<p align="center"><img alt="Component diagram" src="../images/storyboard_diagram.png" /></p>
+
+<p>To use the Storyboard:</p>
+<ol>
+<li>Create a Storyboard application.
+<p>To use the Storyboard, you must create a Tizen native project using the template available under the UI Builder Application.</p>
+
+<p align="center"><img alt="Creating a Storyboard application" src="../images/storyboard_wizard.png" /></p>
+</li>
+
+<li>Add views. 
+<p>When you select the <strong>Storyboard</strong> tab in the WYSIWYG Editor, the Storyboard graphical viewer opens. If the Naviframe application template is used, the viewer contains 4 views of the application with some default connections between them. Otherwise, the viewer contains no views.</p>
+
+<p>A new view can be added by right-clicking the editor or adding a new view in the <strong>Navigation</strong> view and dragging and dropping the view from the <strong>Navigation</strong> view to the <strong>Storyboard</strong> view.</p>
+
+<p align="center"><img alt="Adding a new view in the Storyboard viewer" src="../images/storyboard_add_new.png" /></p>
+
+<p>You can move the views in the viewer by selecting the black label containing the view name and dragging it to a new position.</p>
+</li>
+
+<li>Create connections. 
+<p>You can create connections between 2 views by pressing <strong>Ctrl</strong> and clicking on the component from which the page transition is to happen and dragging it to the intended page. When the dragging is finished, a context menu opens listing the corresponding events of the object. Select an appropriate event from the menu.</p>
+
+<p align="center"><img alt="Create a connection by dragging" src="../images/storyboard_drag.png" /></p>
+<p align="center"><img alt="Select the event in the context menu" src="../images/storyboard_contextmenu.png" /></p>
+
+<p>After you select the event, the new connection is displayed and code is generated in the <span style="font-family: Courier New,Courier,monospace">layout.tuml</span> file. The event handler code is also generated.</p>
+
+<p>The following figure shows the code generated for the connection from <span style="font-family: Courier New,Courier,monospace">view4</span> to <span style="font-family: Courier New,Courier,monospace">view5</span> for the <span style="font-family: Courier New,Courier,monospace">onclicked</span> event.</p>
+
+<p align="center"><img alt="Code generation" src="../images/storyboard_codegen.png" /></p>
+
+<p>When you select a connection, the origin component of that connection is highlighted. If you select a component, the connections originating from it are highlighted with a darker line.</p>
+</li>
+
+<li>Change the connection properties.
+<p>When you select a component (left in the figure) or connection (right in the figure) in the Storyboard, the editable properties related to it are displayed in the <strong>Properties</strong> view. You can view the transition properties and change the connection target view and title.</p>
+
+<p align="center"><img alt="Component properties" src="../images/storyboard_properties.png" /> <img alt="Connection properties" src="../images/storyboard_conn_properties.png" /></p>
+
+</li>
+</ol>
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (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.devtools/html/native_tools/t_trace_n.htm b/org.tizen.devtools/html/native_tools/t_trace_n.htm
index 16e489b..0056268 100644
--- a/org.tizen.devtools/html/native_tools/t_trace_n.htm
+++ b/org.tizen.devtools/html/native_tools/t_trace_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -36,17 +36,7 @@
 
 <p>The T-trace is a profiling tool that allows you to optimize application performance by measuring and visualizing instrumented function calls in the Tizen platform. It helps you to understand what the system is doing while your application is running.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To operate the T-trace, you must first install Python (2.7.x) and Google Chrome&trade; on your computer.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
+ 
 <h2 id="dialog" name="dialog">T-trace Dialog</h2> 
 
 <p>The following figure illustrates the T-trace dialog elements.</p>
@@ -82,6 +72,17 @@
 
 <p>When you run the T-trace, the tracing process gathers traces during a specified time period. After tracing is finished, the T-trace processes the traces and creates a trace report in the HTML format.</p> 
 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">To operate the T-trace, you must first install Python (2.7.x) and Google Chrome&trade; on your computer.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
 <p>To run the T-trace in the Tizen IDE:</p>
 <ol>
 <li>Set up the target device for the debugging mode and connect it to your computer with a USB cable.</li>
diff --git a/org.tizen.devtools/html/native_tools/tools_n.htm b/org.tizen.devtools/html/native_tools/tools_n.htm
index eab5d41..4fd57bc 100644
--- a/org.tizen.devtools/html/native_tools/tools_n.htm
+++ b/org.tizen.devtools/html/native_tools/tools_n.htm
@@ -22,24 +22,13 @@
 
 <div id="container"><div id="contents"><div class="content">
     <div id="profile">
-        <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
     </div>
 	
  <h1>Native Tools</h1>
 
  <p>The Tizen SDK provides the following set of tools for native application development:</p>
 
- <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Some of the IDE tools and views are visible only in specific IDE perspectives. To switch to the applicable perspective, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you want.</td>
-    </tr>
-   </tbody>
-  </table>
-
 <ul>
     <li><strong>Application generation management tools</strong>
     <ul>
@@ -70,7 +59,8 @@
 	</ul></li>	
 	<li><strong>Application running and testing tools</strong>
     <ul>			
-		<li><a href="command_line_interface_n.htm">Command Line Interface</a>  <p>This tool set allows you to develop Tizen native applications without the Tizen IDE.</p></li>
+		<li><a href="command_line_interface_n.htm">Command Line Interface</a>  <p>This tool set allows you to develop Tizen native applications without the Tizen IDE.</p>
+		<p>You can also <a href="project_conversion_n.htm">convert an IDE-created project into a CLI project</a>.</p></li>
 	</ul></li>	
 	
 	<li><strong>Analysis and debugging tools</strong>
@@ -83,12 +73,24 @@
 		
 		<li><a href="valgrind_n.htm">Valgrind</a> <p>This memory profiling tool can be used to detect memory errors or memory leaks in an application.</p></li>
 		
-		<li><a href="t_trace_n.htm">T-trace</a>  <p>This tools allows you to detect and analyze performance issues.</p></li>		
+		<li><a href="t_trace_n.htm">T-trace</a>  <p>This tools allows you to detect and analyze performance issues.</p></li>	
+	</ul></li>
+	<li><strong>Resource Fallback</strong>
+	<ul>
+		<li><a href="resource_explorer_n.htm">Resource Explorer</a>  <p>This tool helps you to place resource easier to support specific device configurations such as different screen densities and languages.</p></li>
 	</ul></li></ul>
-    <li><strong>Resource Fallback</strong>
-    <ul>
-        <li><a href="resource_explorer_n.htm">Resource Explorer</a>  <p>Resource explorer helps you to place resource easier to support specific device configurations such as different screen densities and languages.</p></li>
-    </ul></li></ul>
+
+ 
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Some of the IDE tools and views are visible only in specific IDE perspectives. To switch to the applicable perspective, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you want.</td>
+    </tr>
+   </tbody>
+  </table> 
 
 <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.devtools/html/native_tools/uibuilder_n.htm b/org.tizen.devtools/html/native_tools/uibuilder_n.htm
index a117727..0ff1e96 100644
--- a/org.tizen.devtools/html/native_tools/uibuilder_n.htm
+++ b/org.tizen.devtools/html/native_tools/uibuilder_n.htm
@@ -22,22 +22,32 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 	
 
 <h1>UI Builder</h1>
 
-<p>The Tizen native UI Builder is a graphical user interface builder tool that simplifies the creation of Tizen native UIs by allowing you to arrange UI Components using a drag-and-drop WYSIWYG (What You See Is What You Get) editor.</p>
+<p>The Tizen native UI Builder is a graphical user interface builder tool that simplifies the creation of Tizen native UIs by allowing you to arrange UI components using a drag-and-drop WYSIWYG (What You See Is What You Get) editor.</p>
 
-<p>The UI Builder supports a variety of UI Components and <a href="#views">views and editors</a>.</p>
+<p>The UI Builder supports a variety of UI components and <a href="#views">views and editors</a>.</p>
 
 <p>The UI Builder is not only a UI layout code generating tool, it also supports an easy-to-use programming model though the UI Builder project.</p>
 
 <p class="figure">Figure: UI Builder</p>
 <p align="center"><img alt="UI Builder" src="../images/nuib_ui_builder.png" /></p>
 
-
+<table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The UI Builder is supported only in mobile Ubuntu.</td>
+    </tr>
+   </tbody>
+  </table>
+  
 <h2 id="views" name="views">Supported Views and Editors</h2>
 
 <p>The UI Builder supports the following views and editors:</p>
@@ -96,37 +106,37 @@
 <p align="center"><img alt="Outline view" src="../images/nuib_outline_001.png" /></p>
 <p>The <strong>Outline</strong> view provides the following features:</p>
 <ul>
-<li>UI Component navigation
+<li>UI component navigation
 <ul>
-       <li>You can see the UI Component hierarchy.</li>
+       <li>You can see the UI component hierarchy.</li>
 </ul>
 </li>
-<li>UI Component management
+<li>UI component management
 <ul>
- <li>You can copy, cut, paste, delete, and rename UI Components.</li>
+ <li>You can copy, cut, paste, delete, and rename UI components.</li>
 </ul>
 </li>
 </ul>
 
                 <h3 id="properties" name="properties">Properties View</h3>
 
-<p>The <strong>Properties</strong> view displays the properties of the UI Component selected in the <strong>WYSIWYG Editor </strong>view. If the <strong>Properties</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; General &gt; Properties</strong>.</p>
+<p>The <strong>Properties</strong> view displays the properties of the UI component selected in the <strong>WYSIWYG Editor </strong>view. If the <strong>Properties</strong> view is not visible, open it from <strong>Window &gt; Show View &gt; Other &gt; General &gt; Properties</strong>.</p>
 
-<p>The <strong>Properties</strong> helps you to edit UI Component and events.</p>
+<p>The <strong>Properties</strong> helps you to edit UI components and events.</p>
 
 <p class="figure">Figure: Properties view</p>
-<p align="center"><img alt="Properties view" src="../images/properties_1.png" width="420" height="349" /></p>
+<p align="center"><img alt="Properties view" src="../images/properties_1.png" /></p>
 
 <p>The <strong>Properties </strong>view consists of <strong>Attributes</strong>, and <strong>Event</strong> tabs:</p>
 <ul>
 <li><strong>Attributes</strong>
-<p>In the <strong>Attributes</strong> tab, you can edit UI Component attributes. Attributes are categorized into common (common UI Component properties) and UI Component specification (UI Component-specific properties) attributes. The UI Component specification attributes are divided into categories according to the UI Component attributes.</p>
+<p>In the <strong>Attributes</strong> tab, you can edit UI component attributes. Attributes are categorized into common (common UI component properties) and UI component specification (UI component-specific properties) attributes. The UI component specification attributes are divided into categories according to the UI component attributes.</p>
 <ul>
 <li><strong>Common</strong>
-<p>The <strong>Common</strong> category only includes the ID attribute, which is the default UI Component identifier in the code.</p>
+<p>The <strong>Common</strong> category only includes the ID attribute, which is the default UI component identifier in the code.</p>
 </li>
-<li><strong>UI Component specification</strong>
-<p>The <strong>UI Component specification</strong> category includes all UI Component-specific attributes.</p>
+<li><strong>UI component specification</strong>
+<p>The <strong>UI component specification</strong> category includes all UI component-specific attributes.</p>
 </li>
 </ul>
 <p align="center"><img alt="Properties specification" src="../images/properties_specification_1.png" /></p>
@@ -157,7 +167,7 @@
 <p>You can import files or folders.</p>
 </li>
 <li>Easy editing
-<p>You can edit the resource property of the UI Components using drag and drop.</p>
+<p>You can edit the resource property of the UI components using drag and drop.</p>
 </li>
 </ul>
          
@@ -171,12 +181,10 @@
 <ul>
 <li>
 <p>Palette</p>
-<p>The palette contains EFL UI Components, which you can select and add to the design area.</p>
+<p>The palette contains EFL UI components, which you can select and add to the design area.</p>
 <ul>
-<li>Supported UI Components for mobile applications:
+<li>Supported UI components:
 <p>Scroller, Grid, Table, Box, Panes, Panel, Button, Check, Radio, Colorselector, Entry, Spinner, Slider, Naviframe, List, Genlist, Toolbar, Multibuttonentry, Gengrid, Index, Background, Datetime, Icon, Image, Label, Progressbar, and Layout</p></li>
-<li>Supported UI Components for wearable applications:
-<p>Scroller, Grid, Table, Box, Panel, Button, Check, Radio, Entry, Spinner, Slider, Naviframe, List, Genlist, Index, Background, Datetime, Icon, Image, Label, Progressbar, and Layout</p></li>
 </ul>
 </li>
 <li>
@@ -232,7 +240,7 @@
 </li>
 <li>
 <p>Design area</p>
-<p>You can work with UI Components visually so that you can see what your application looks like as you build it.</p>
+<p>You can work with UI components visually so that you can see what your application looks like as you build it.</p>
 </li>
 </ul>			
 			
@@ -263,4 +271,4 @@
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/native_tools/valgrind_n.htm b/org.tizen.devtools/html/native_tools/valgrind_n.htm
index 9accbc6..d13e4be 100644
--- a/org.tizen.devtools/html/native_tools/valgrind_n.htm
+++ b/org.tizen.devtools/html/native_tools/valgrind_n.htm
@@ -19,7 +19,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
    <h1>Valgrind</h1> 
diff --git a/org.tizen.devtools/html/web_tools/code_beautifier_w.htm b/org.tizen.devtools/html/web_tools/code_beautifier_w.htm
index 9df8349..ff2c953 100644
--- a/org.tizen.devtools/html/web_tools/code_beautifier_w.htm
+++ b/org.tizen.devtools/html/web_tools/code_beautifier_w.htm
@@ -18,7 +18,7 @@
 </div>
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
   <h1>Code Beautifier</h1> 
diff --git a/org.tizen.devtools/html/web_tools/code_minifier_w.htm b/org.tizen.devtools/html/web_tools/code_minifier_w.htm
index 9742316..1e37050 100644
--- a/org.tizen.devtools/html/web_tools/code_minifier_w.htm
+++ b/org.tizen.devtools/html/web_tools/code_minifier_w.htm
@@ -18,7 +18,7 @@
 </div>
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
   <h1>Code Minifier</h1> 
diff --git a/org.tizen.devtools/html/web_tools/command_line_interface_w.htm b/org.tizen.devtools/html/web_tools/command_line_interface_w.htm
index 24abfa6..255c3a0 100644
--- a/org.tizen.devtools/html/web_tools/command_line_interface_w.htm
+++ b/org.tizen.devtools/html/web_tools/command_line_interface_w.htm
@@ -23,7 +23,7 @@
 <div id="container"><div id="contents"><div class="content">
 
 <div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
  <h1>Command Line Interface</h1>
 
@@ -102,9 +102,9 @@ Sets the default connection timeout value. The default is 60000 milliseconds.</p
 <pre class="prettyprint">
 $ tizen cli-config -g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat cli-config –g "default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml"
+&gt; tizen.bat cli-config –g &quot;default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml&quot;
 </pre></li>
 <li><p>List all options for which values are set:</p>
 <pre class="prettyprint">
@@ -176,9 +176,9 @@ tizen create web-project [-p|--profile &lt;profile name&gt;] [-t|--template &lt;
 <pre class="prettyprint">
 $ tizen create web-project -p mobile-2.3 -t BasicBasicApplication -n basic -- /home/workspace
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat create web-project -p mobile-2.3 -t BasicBasicApplication -n basic -- C:\Users\workspace
+&gt; tizen.bat create web-project -p mobile-2.3 -t BasicBasicApplication -n basic -- C:\Users\workspace
 </pre></li></ul>
 </td>
 	 </tr>	 
@@ -213,38 +213,37 @@ tizen build-web [-opt | --optimize] [-euf | --exclude-uifw] [-e | --exclude] [-o
 $ tizen build-web -- /home/workspace/basic
 $ cd /home/workspace/basic/.buildResult
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat build-web -- C:\Users\workspace\basic
-> dir C:\Users\workspace\basic\.buildResult
-</pre>
-</li>
+&gt; tizen.bat build-web -- C:\Users\workspace\basic
+&gt; dir C:\Users\workspace\basic\.buildResult
+</pre></li>
 </ul>
 </td>
-	 </tr>	 
-    <tr id="mw_clean">
+	 </tr>	
+   <tr id="mw_clean">
      <td><span style="font-family: Courier New,Courier,monospace">tizen clean</span> </td>
      <td>
 <pre class="prettyprint">
 tizen clean [--]
 </pre>
 </td>
-	 <td>Clean the Tizen web project.
-	 </td>
+        <td>Clean the Tizen Web project.
+        </td>
      <td>
 <ul>
 <li><p>Clean the project:</p>
 <pre class="prettyprint">
 $ tizen clean -- /home/workspace/basic
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat clean -- C:\Users\workspace\basic
+&gt; tizen.bat clean -- C:\Users\workspace\basic
 </pre>
 </li>
 </ul>
 </td>
-	 </tr>
+        </tr>	 
     <tr id="mw_package"> 
      <td><span style="font-family: Courier New,Courier,monospace">tizen package</span> </td> 
      <td> 
@@ -271,17 +270,17 @@ tizen package [-t | --type &lt;package type&gt;] [-s | --sign &lt;security profi
 <pre class="prettyprint">
 $ tizen cli-config –g default.profiles.path=/home/tizen-sdk/tools/ide/conf/profiles.xml
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat cli-config –g "default.profiles.path=C:\tizen-sdk\tools\ide\conf\profiles.xml"
+&gt; tizen.bat cli-config –g &quot;default.profiles.path=C:\tizen-sdk\tools\ide\conf\profiles.xml&quot;
 </pre></li>
 <li><p>Set up the path of the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file that is created from the IDE:</p>
 <pre class="prettyprint">
 $ tizen cli-config –g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat cli-config –g "default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml"
+&gt; tizen.bat cli-config –g &quot;default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml&quot;
 </pre></li>
 <li><p>Package the profile:</p>
 <pre class="prettyprint">
@@ -291,25 +290,25 @@ $ ls /home/workspace/basic/.buildResult
 
 basic.wgt
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat package --type wgt --sign myprofile -- C:\Users\workspace\basic\.buildResult
+&gt; tizen.bat package --type wgt --sign myprofile -- C:\Users\workspace\basic\.buildResult
 </pre></li>
 <li><p>Re-sign the package:</p>
 <pre class="prettyprint">
 $ tizen package --type wgt --sign myprofile2 -- /home/workspace/basic/.buildResult/basic.wgt
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat package --type wgt --sign myprofile2 -- C:\Users\workspace\basic\.buildResult\basic.wgt
+&gt; tizen.bat package --type wgt --sign myprofile2 -- C:\Users\workspace\basic\.buildResult\basic.wgt
 </pre></li>
 <li><p>Re-sign a hybrid application package:</p>
 <pre class="prettyprint">
 $ tizen package --type wgt --sign myprofile2 --reference /home/workspace/a.tpk --reference /home/workspace/b.tpk -- /home/workspace/basic/.buildResult/basic.wgt
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat package --type wgt --sign myprofile2 --reference C:\Users\workspace\a.tpk --reference C:\Users\workspace\b.tpk -- C:\Users\workspace\basic\.buildResult\basic.wgt
+&gt; tizen.bat package --type wgt --sign myprofile2 --reference C:\Users\workspace\a.tpk --reference C:\Users\workspace\b.tpk -- C:\Users\workspace\basic\.buildResult\basic.wgt
 </pre></li>
 </ul>
 </td>
@@ -336,9 +335,9 @@ tizen install &lt;-t | -target &lt;target name&gt;&gt; &lt;-n | --name &lt;packa
 <pre class="prettyprint">
 $ tizen install --target emulator-26101 --name basic.wgt -- /home/workspace/basic/.buildResult
 </pre>
-<p>or for Windows,</p>
+<p>Or for Windows:</p>
 <pre class="prettyprint">
-> tizen.bat install -–target emulator-26101 –-name basic.wgt -- C:\Users\workspace\basic\.buildResult
+&gt; tizen.bat install -–target emulator-26101 –-name basic.wgt -- C:\Users\workspace\basic\.buildResult
 </pre></li></ul>
 </td>
 	 </tr>
diff --git a/org.tizen.devtools/html/web_tools/config_editor_w.htm b/org.tizen.devtools/html/web_tools/config_editor_w.htm
index e22c169..cb321e1 100644
--- a/org.tizen.devtools/html/web_tools/config_editor_w.htm
+++ b/org.tizen.devtools/html/web_tools/config_editor_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -58,203 +58,203 @@
         <td colspan="4" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#widget">&lt;widget&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#name">&lt;name&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#description">&lt;description&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#author">&lt;author&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#content_element">&lt;content&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span> (in <a href="#mw_feature">mobile</a> or <a href="#ww_feature">wearable</a>)</td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#param">&lt;param&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#icon">&lt;icon&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#license">&lt;license&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#preference">&lt;preference&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#access">&lt;access&gt;</a></span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#mw_account">&lt;tizen:account&gt;</a></span> (in mobile only)</td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:icon&gt;</span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:display-name&gt;</span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:capability&gt;</span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span> (in <a href="#mw_appcontrol">mobile</a> or <a href="#appcontrol">wearable</a>)</td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:src&gt;</span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:operation&gt;</span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:uri&gt;</span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:mime&gt;</span></td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application&gt;</span> (in <a href="#mw_application">mobile</a> or <a href="#ww_application">wearable</a>)</td>
     </tr>
 	
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content&gt;</span> (in <a href="#mw_webapp">mobile</a> or <a href="#ww_tizencontent">wearable</a>)</td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege&gt;</span> (in <a href="#mw_privilege">mobile</a> or <a href="#ww_privilege">wearable</a>)</td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting&gt;</span> (in <a href="#mw_setting">mobile</a> or <a href="#ww_setting">wearable</a>)</td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy&gt;</span> (in <a href="#mw_sec">mobile</a> or <a href="#ww_contentsecpolicy">wearable</a>)</td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only&gt;</span> (in <a href="#mw_secreport">mobile</a> or <a href="#ww_contentsecpolicyreport">wearable</a>)</td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation&gt;</span> (in <a href="#mw_navigation">mobile</a> or <a href="#ww_allownavigation">wearable</a>)</td>
     </tr>
     <tr>
-        <td style="border:none;"></td>
+        <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata&gt;</span> (in <a href="#mw_metadata">mobile</a> or <a href="#ww_metadata">wearable</a>)</td>
     </tr>
 	<tr>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile&gt;</span> (in <a href="#mw_profile">mobile</a> or <a href="#ww_profile">wearable</a>)</td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_ime">&lt;tizen:ime&gt;</a></span> (in wearable only)</td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:uuid&gt;</span></td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:languages&gt;</span></td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
-		<td style="border:none;"></td>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
+		<td style="border:none;">&nbsp;</td>
+		<td style="border:none;">&nbsp;</td>
 		<td style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_language">&lt;tizen:language&gt;</a></span></td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_category">&lt;tizen:category&gt;</a></span> (in wearable only)</td>
 	</tr>
 
 	<tr>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service">&lt;tizen:service&gt;</a></span> (in wearable only)</td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-name">&lt;tizen:name&gt;</a></span></td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-icon">&lt;tizen:icon&gt;</a></span></td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-content">&lt;tizen:content&gt;</a></span></td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-description">&lt;tizen:description&gt;</a></span></td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-metadata">&lt;tizen:metadata&gt;</a></span></td>
 	</tr>
 	<tr>
-		<td style="border:none;"></td>
-		<td style="border:none;"></td>
+		<td style="border:none;">&nbsp;</td>
+		<td style="border:none;">&nbsp;</td>
 		<td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-category">&lt;tizen:category&gt;</a></span></td>
 	</tr>	
    </tbody>
@@ -491,27 +491,29 @@
     </ul>
      <p><strong>Expected children:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span></p>
-       <p> Attributes:</p>
-       <ul>
-       	<li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; page handling the requests </p></li>
-       	<li><span style="font-family: Courier New,Courier,monospace;">reload</span> <p>Optional; sets whether the page is reloaded or not when the page already loaded (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p><p><strong>Since: 2.4</strong></p> </li>
-        <table class="note">
-          <tbody> 
-            <tr> 
-              <th class="note">Note</th> 
-            </tr> 
-            <tr> 
-              <td class="note">The <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of an application is set to a version before Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is used, the application will fail to install.</td> 
-            </tr> 
-          </tbody>
-       </table> 
-       </ul>
-       </li>
+		<li><span style="font-family: Courier New,Courier,monospace;">src</span>
+			<p> Attributes:</p>
+			<ul>
+				<li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; page handling the requests </p></li>
+				<li><span style="font-family: Courier New,Courier,monospace;">reload</span> <p>Optional; sets whether the page is reloaded when it is already loaded (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p><p><strong>Since: 2.4</strong></p> 
+			<table class="note">
+			<tbody>
+			<tr>
+				<th class="note">Note</th>
+			</tr> 
+			<tr>
+				<td class="note">The <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of an application is set to a version before Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is used, the application installation fails.</td>
+			</tr>
+			</tbody>
+			</table>
+			</li>
+			</ul>
+		</li>
+
        <li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>
        <li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><p>Optional; additional parameters used for resolving application control requests</p></li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot; reload=&quot;disable&quot/&gt;
+&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot; reload=&quot;disable&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:uri name=&quot;http&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:mime name=&quot;image/jpeg&quot;/&gt;
@@ -537,21 +539,27 @@
        <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen application ID, which is a combination of the Tizen package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
        <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory; Tizen package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Tizen Store.</p></li>
        <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">launch_mode</span> <p>Optional; Sets what launch mode can be supported (available values: <span style="font-family: Courier New,Courier,monospace;">single</span>(default), group, caller)</p><p>o	single: launched as a main application</p><p>o	group: launched as a sub application</p><p>o	caller: caller application defines the launch mode with the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function</p><p><strong>Since: 2.4</strong></p></li>
-        <table class="note">
-          <tbody> 
-            <tr> 
-              <th class="note">Note</th> 
-            </tr> 
-            <tr> 
-              <td class="note">The <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of an application is set to a version before Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is used, the application will fail to install.</td> 
-            </tr> 
-          </tbody>
-       </table>        
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;
+		<li><span style="font-family: Courier New,Courier,monospace;">launch_mode</span> <p>Optional; sets which launch mode is supported (available values: <span style="font-family: Courier New,Courier,monospace;">single</span> (default), <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">caller</span>)</p>
+		<ul><li><span style="font-family: Courier New,Courier,monospace;">single</span>: launched as a main application</li>
+		<li><span style="font-family: Courier New,Courier,monospace;">group</span>: launched as a sub application</li>
+		<li><span style="font-family: Courier New,Courier,monospace;">caller</span>: caller application defines the launch mode with the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function</li></ul>
+		<p><strong>Since: 2.4</strong></p>
+		<table class="note">
+			<tbody>
+				<tr>
+					<th class="note">Note</th>
+				</tr>
+				<tr>
+					<td class="note">The <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of an application is set to a version before Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is used, the application installation fails.</td>
+				</tr>
+			</tbody>
+		</table>
+		</li>
+      </ul><p><strong>Example:</strong></p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;1234abcDEF&quot;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.4&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;launch_mode=&quot;caller&quot; /&gt;</pre><p></p></td>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;launch_mode=&quot;caller&quot; /&gt;</pre></td>
+
     </tr>
    </tbody>
   </table>
@@ -812,37 +820,41 @@
         <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory;  Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>        	  
        <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory;  Tizen wearable package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.</p></li>
        <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">launch_mode</span> <p>Optional; Sets what launch mode can be supported (available values: <span style="font-family: Courier New,Courier,monospace;">single</span>(default), group, caller)</p><p>o	single: launched as a main application</p><p>o	group: launched as a sub application</p><p>o	caller: caller application defines the launch mode with the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function</p><strong>Since: 2.4</strong></li>
-        <table class="note">
-          <tbody> 
-            <tr> 
-              <th class="note">Note</th> 
-            </tr> 
-            <tr> 
-              <td class="note">The <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of an application is set to a version before Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is used, the application will fail to install.</td> 
-            </tr> 
-          </tbody>
-       </table>     
-       <li><span style="font-family: Courier New,Courier,monospace;">ambient_support</span> <p>Optional; Sets whether the Web application supports the ambient mode (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p><p>If this option is enabled, the application can be shown in the ambient mode.</p><strong>Since: 2.3.1</strong></li>
+		<li><span style="font-family: Courier New,Courier,monospace;">launch_mode</span> <p>Optional; sets which launch mode is supported (available values: <span style="font-family: Courier New,Courier,monospace;">single</span> (default), <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">caller</span>)</p>
+		<ul><li><span style="font-family: Courier New,Courier,monospace;">single</span>: launched as a main application</li>
+		<li><span style="font-family: Courier New,Courier,monospace;">group</span>: launched as a sub application</li>
+		<li><span style="font-family: Courier New,Courier,monospace;">caller</span>: caller application defines the launch mode with the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function</li></ul>
+		<p><strong>Since: 2.4</strong></p>
+		<table class="note">
+		<tbody>
+			<tr>
+				<th class="note">Note</th>
+			</tr>
+			<tr>
+				<td class="note">The <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of an application is set to a version before Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> attribute is used, the application installation fails.</td>
+			</tr>
+		</tbody>
+		</table>
+	</li>
+	<li><span style="font-family: Courier New,Courier,monospace;">ambient_support</span> <p>Optional; sets whether the Web application supports the ambient mode (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p><p>If this option is enabled, the application can be shown in the ambient mode.</p><strong>Since: 2.3.1</strong>
+
    <table class="note">
     <tbody> 
     <tr> 
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> option is only used for watch applications, and ignored in all non-watch applications.</td> 
-    </tr> 
-    <tr>
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> attribute is supported from Tizen 2.3.1 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of an application is set to a version before Tizen 2.3.1, and the <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> attribute is used, the application will fail to install.</td> 
-    </tr>
-    </tbody>
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> option is only used for watch applications, and ignored in all non-watch applications.
+	 <p>The <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> attribute is supported from Tizen 2.3.1 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of an application is set to a version before Tizen 2.3.1, and the <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> attribute is used, the application installation fails.</p></td>
+	</tr>
+	</tbody>
     </table> 
-
+</li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;  
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;1234abcDEF&quot;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.4&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;launch_mode=&quot;caller&quot;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ambient_support=&quot;enable&quot; /&gt;</pre><p></p></td> 
+
     </tr> 
    </tbody> 
   </table> 
@@ -881,27 +893,29 @@
     </ul>
      <p><strong>Expected children:</strong> </p>
       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span></p>
-       <p> Attributes:</p>
-       <ul>
-       	<li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; page handling the requests </p></li>
-       	<li><span style="font-family: Courier New,Courier,monospace;">reload</span> <p>Optional; sets whether the page is reloaded or not when the page already loaded (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p><p><strong>Since: 2.4</strong></p> </li>
-        <table class="note">
-          <tbody> 
-            <tr> 
-              <th class="note">Note</th> 
-            </tr> 
-            <tr> 
-              <td class="note">The <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of an application is set to a version before Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is used, the application will fail to install.</td> 
-            </tr> 
-          </tbody>
-       </table>        	
-       </ul>
-       </li>
+		<li><span style="font-family: Courier New,Courier,monospace;">src</span>
+		<p>Attributes:</p>
+		<ul>
+			<li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; page handling the requests </p></li>
+			<li><span style="font-family: Courier New,Courier,monospace;">reload</span> <p>Optional; sets whether the page is reloaded when it is already loaded (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p><p><strong>Since: 2.4</strong></p> 
+			<table class="note">
+			<tbody>
+			<tr>
+				<th class="note">Note</th>
+			</tr>
+			<tr>
+				<td class="note">The <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is supported from Tizen 2.4 onwards. If the <span style="font-family: Courier New,Courier,monospace;">required_version</span> in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of an application is set to a version before Tizen 2.4, and the <span style="font-family: Courier New,Courier,monospace;">reload</span> attribute is used, the application installation fails.</td>
+			</tr>
+			</tbody>
+			</table>
+		</li>
+		</ul>
+		</li>
+
        <li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>
        <li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><p>Optional; additional parameters used for resolving application control requests</p></li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot; reload=&quot;disable&quot/&gt;
+&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot; reload=&quot;disable&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:uri name=&quot;http&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:mime name=&quot;image/jpeg&quot;/&gt;
@@ -925,12 +939,12 @@
 	 <p><strong>Attributes:</strong> </p> 
       <ul> 
      
-      <li><span style="font-family: Courier New,Courier,monospace;">background-support</span> <p>Optional; Sets whether Web Application is suspended when it goes to the background (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> , <span style="font-family: Courier New,Courier,monospace;">  disable</span> (default))</p><p>If this option is enabled, Web Application is not suspended when it goes to the background.</p></li> 
-      <li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; Sets whether the context menu is shown (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the context menu is visible to the user.</p></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">background-support</span> <p>Optional; Sets whether Web Application is suspended when it goes to the background (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p><p>If this option is enabled, Web Application is not suspended when it goes to the background.</p></li> 
+      <li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; Sets whether the context menu is shown (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p><p>If this option is enabled, the context menu is visible to the user.</p></li>
       <li><span style="font-family: Courier New,Courier,monospace;">encryption</span> <p>Optional; Sets whether Web Application resources are encrypted (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> , <span style="font-family: Courier New,Courier,monospace;">  disable</span> (default))</p><p>If this option is enabled, the application resources(HTML, JS and CSS files) are encrypted.</p></li>
-      <li><span style="font-family: Courier New,Courier,monospace;">screen-orientation</span> <p>Optional; Sets whether it locks orientation of Web Application (available values: <span style="font-family: Courier New,Courier,monospace;">portrait</span> (default), <span style="font-family: Courier New,Courier,monospace;">  landscape</span>, <span style="font-family: Courier New,Courier,monospace;">  auto-rotation</span>)</p><p>If this option is portrait or landscape, the orientation is locked to portrait or landscape respectively.</p><p>If the option is auto-rotation, it follows device orientation setting.</p></li>
-      <li><span style="font-family: Courier New,Courier,monospace;">install-location</span> <p>Optional; Sets where Web Application is installed (available values: <span style="font-family: Courier New,Courier,monospace;">auto</span> (default), <span style="font-family: Courier New,Courier,monospace;">  internal-only</span>, <span style="font-family: Courier New,Courier,monospace;">  prefer-external</span>)</p><p>o	auto: the system defined install location.</p><p>o	internal-only: the device internal storage.</p><p>o	prefer-external: the external storage (if exists).</p></li>
-      <li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available value: <span style="font-family: Courier New,Courier,monospace;">back</span>).</p></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">screen-orientation</span> <p>Optional; Sets whether it locks orientation of Web Application (available values: <span style="font-family: Courier New,Courier,monospace;">portrait</span> (default), <span style="font-family: Courier New,Courier,monospace;">landscape</span>, <span style="font-family: Courier New,Courier,monospace;">  auto-rotation</span>)</p><p>If this option is portrait or landscape, the orientation is locked to portrait or landscape respectively.</p><p>If the option is auto-rotation, it follows device orientation setting.</p></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">install-location</span> <p>Optional; Sets where Web Application is installed (available values: <span style="font-family: Courier New,Courier,monospace;">auto</span> (default), <span style="font-family: Courier New,Courier,monospace;">  internal-only</span>, <span style="font-family: Courier New,Courier,monospace;">prefer-external</span>)</p><p>o auto: the system defined install location.</p><p>o	internal-only: the device internal storage.</p><p>o	prefer-external: the external storage (if exists).</p></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available value: <span style="font-family: Courier New,Courier,monospace;">back</span>).</p></li>
 	  
 	  </ul><p><strong>Example:</strong> </p><pre class="prettyprint">
 &lt;tizen:setting background-support=&quot;enable&quot; /&gt;
@@ -1380,4 +1394,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.devtools/html/web_tools/content_assist_w.htm b/org.tizen.devtools/html/web_tools/content_assist_w.htm
index 9068b5e..bf8edf1 100644
--- a/org.tizen.devtools/html/web_tools/content_assist_w.htm
+++ b/org.tizen.devtools/html/web_tools/content_assist_w.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
  <h1>Content Assist</h1>
diff --git a/org.tizen.devtools/html/web_tools/css_editor_w.htm b/org.tizen.devtools/html/web_tools/css_editor_w.htm
index 9048e6d..9a4ec5f 100644
--- a/org.tizen.devtools/html/web_tools/css_editor_w.htm
+++ b/org.tizen.devtools/html/web_tools/css_editor_w.htm
@@ -18,7 +18,7 @@
 </div>
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 <h1>CSS Editor</h1>
diff --git a/org.tizen.devtools/html/web_tools/css_preview_w.htm b/org.tizen.devtools/html/web_tools/css_preview_w.htm
index a604250..e712ffa 100644
--- a/org.tizen.devtools/html/web_tools/css_preview_w.htm
+++ b/org.tizen.devtools/html/web_tools/css_preview_w.htm
@@ -18,7 +18,7 @@
 </div>
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
   <h1>CSS Preview</h1>  
diff --git a/org.tizen.devtools/html/web_tools/html_editor_w.htm b/org.tizen.devtools/html/web_tools/html_editor_w.htm
index fde9161..2ed5a9a 100644
--- a/org.tizen.devtools/html/web_tools/html_editor_w.htm
+++ b/org.tizen.devtools/html/web_tools/html_editor_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
diff --git a/org.tizen.devtools/html/web_tools/html_preview_w.htm b/org.tizen.devtools/html/web_tools/html_preview_w.htm
index 0617c1d..6d1ba54 100644
--- a/org.tizen.devtools/html/web_tools/html_preview_w.htm
+++ b/org.tizen.devtools/html/web_tools/html_preview_w.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/>	<img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/>	<img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 
   <h1>HTML Preview</h1> 
diff --git a/org.tizen.devtools/html/web_tools/js_analyzer_w.htm b/org.tizen.devtools/html/web_tools/js_analyzer_w.htm
index fcc5f56..695a917 100644
--- a/org.tizen.devtools/html/web_tools/js_analyzer_w.htm
+++ b/org.tizen.devtools/html/web_tools/js_analyzer_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png" /></p>
+        <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png" /></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
diff --git a/org.tizen.devtools/html/web_tools/js_editor_w.htm b/org.tizen.devtools/html/web_tools/js_editor_w.htm
index faf2b15..e426143 100644
--- a/org.tizen.devtools/html/web_tools/js_editor_w.htm
+++ b/org.tizen.devtools/html/web_tools/js_editor_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.devtools/html/web_tools/js_log_console_w.htm b/org.tizen.devtools/html/web_tools/js_log_console_w.htm
index e3c903b..f708d12 100644
--- a/org.tizen.devtools/html/web_tools/js_log_console_w.htm
+++ b/org.tizen.devtools/html/web_tools/js_log_console_w.htm
@@ -19,22 +19,13 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>  
  
   <h1>JavaScript Log Console View</h1> 
-  <p>The <strong>JavaScript Log Console</strong> view provides a functionality to view Web application JavaScript logs. The <strong>JavaScript Log Console</strong> view is automatically opened when a Web application is launched.</p> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">If no target is connected, a notification dialog appears at the right-bottom section of the IDE and the <strong>JavaScript Log Console</strong> view is not launched.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  <p>The following table shows the methods supported for logging to the JavaScript log.</p> 
+  <p>The <strong>JavaScript Log Console</strong> view provides a functionality to view Web application JavaScript logs.</p>
+
+ <p>The following table shows the methods supported for logging to the JavaScript log.</p> 
   <table border="1"> 
    <caption>
      Table: Supported JavaScript log methods 
@@ -69,10 +60,24 @@
   
   <p>The JavaScript log methods are shown in the IDE with colors.</p>
   <p class="figure">Figure: JavaScript log method colors</p>
-
+  
 <p align="center"><img alt="JavaScript log method colors"
 src="../images/js_colors.png"/></p>
 
+    <p>The <strong>JavaScript Log Console</strong> view is automatically opened when a Web application is launched.</p> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">If no target is connected, a notification dialog appears at the right-bottom section of the IDE and the <strong>JavaScript Log Console</strong> view is not launched.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.devtools/html/web_tools/live_editing_w.htm b/org.tizen.devtools/html/web_tools/live_editing_w.htm
index c5d7fd2..f9f471f 100644
--- a/org.tizen.devtools/html/web_tools/live_editing_w.htm
+++ b/org.tizen.devtools/html/web_tools/live_editing_w.htm
@@ -19,13 +19,19 @@
 
 <div id="container"><div id="contents"><div class="content">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
     </div>
 	
   <h1>Live Editing</h1>
   <p>Live editing is a special feature, which applies source changes to the running application immediately without building, packaging, and relaunching the application. All changes made in the HTML, CSS, and JavaScript files are automatically and immediately reflected in the running application.</p>
   <p>This feature can be used in the <a href="html_preview_w.htm">HTML Preview</a> view and when running the application in the Emulator or the Web Simulator.</p>
 
+
+
+<p>To enable live editing in the Tizen IDE, go to <strong>Run &gt; Run Configuration &gt; Tizen Web Application &gt; &lt;PROJECT NAME&gt;</strong> (or in the project's context menu, select <strong>Run As &gt; Run Configuration &gt; Tizen Web Application &gt; &lt;PROJECT NAME&gt;)</strong> and check <strong>Enable live editing</strong> at the run configuration. If you are running your application for the first time, you must first create a new configuration.</p>
+
+<p>You can <a href="set_ide_preference_w.htm#live">set live editing preferences</a> in the IDE.</p>
+
   <table class="note">
    <tbody>
     <tr>
@@ -33,7 +39,7 @@
     </tr>
     <tr>
      <td class="note">
-          This feature has the following limitations:
+          The live editing feature has the following limitations:
           <ul>
                <li>The Tizen Device API does not work on the Emulator.</li>
                <li>Only specific device APIs are supported by the Web Simulator.</li>
@@ -44,10 +50,6 @@
    </tbody>
   </table>
 
-<p>To enable live editing in the Tizen IDE, go to <strong>Run &gt; Run Configuration &gt; Tizen Web Application &gt; &lt;PROJECT NAME&gt;</strong> (or in the project's context menu, select <strong>Run As &gt; Run Configuration &gt; Tizen Web Application &gt; &lt;PROJECT NAME&gt;)</strong> and check <strong>Enable live editing</strong> at the run configuration. If you are running your application for the first time, you must first create a new configuration.</p>
-
-<p>You can <a href="set_ide_preference_w.htm#live">set live editing preferences</a> in the IDE.</p>
-
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.devtools/html/web_tools/privilege_checker_w.htm b/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
index af341b5..e0419bd 100644
--- a/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
+++ b/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
@@ -19,7 +19,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
   <h1>Privilege Checker</h1> 
diff --git a/org.tizen.devtools/html/web_tools/project_wizard_w.htm b/org.tizen.devtools/html/web_tools/project_wizard_w.htm
index 2aabc51..c11022e 100644
--- a/org.tizen.devtools/html/web_tools/project_wizard_w.htm
+++ b/org.tizen.devtools/html/web_tools/project_wizard_w.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile web" src="../images/mw_icon.png"/> <img alt="Wearable web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile web" src="../images/mobile_s_w.png"/> <img alt="Wearable web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 
diff --git a/org.tizen.devtools/html/web_tools/rest_viewer_w.htm b/org.tizen.devtools/html/web_tools/rest_viewer_w.htm
index 2658585..9a88ce1 100644
--- a/org.tizen.devtools/html/web_tools/rest_viewer_w.htm
+++ b/org.tizen.devtools/html/web_tools/rest_viewer_w.htm
@@ -16,7 +16,7 @@
 <body onload="prettyPrint()" style="overflow: auto;">
     <div id="toc-navigation">
         <div id="profile">
-            <p><img alt="Mobile Web" src="../images/mw_icon.png" /> <img alt="Wearable Web" src="../images/ww_icon.png" /></p>
+            <p><img alt="Mobile Web" src="../images/mobile_s_w.png" /> <img alt="Wearable Web" src="../images/wearable_s_w.png" /></p>
         </div>
         <div id="toc_border">
             <div id="toc">
diff --git a/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm b/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
index 2778e1d..52092fa 100644
--- a/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
+++ b/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
@@ -18,7 +18,7 @@
  <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>
+		<img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.devtools/html/web_tools/tools_w.htm b/org.tizen.devtools/html/web_tools/tools_w.htm
index caa7261..5c1ab6b 100644
--- a/org.tizen.devtools/html/web_tools/tools_w.htm
+++ b/org.tizen.devtools/html/web_tools/tools_w.htm
@@ -21,23 +21,13 @@
 
 <div id="container"><div id="contents"><div class="content">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
     </div>
 	
  <h1>Web Tools</h1>
 
 <p>The Tizen SDK provides the following set of features and tools for Web application development:</p>
 
- <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Some of the IDE tools and views are visible only in specific IDE perspectives. To switch to the applicable perspective, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you want.</td>
-    </tr>
-   </tbody>
-  </table>
 
 <ul>
     <li><strong>Application generation management tools</strong>
@@ -95,6 +85,17 @@
 	</ul></li>
 </ul>			
 
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Some of the IDE tools and views are visible only in specific IDE perspectives. To switch to the applicable perspective, go to <strong>Window &gt; Open Perspective &gt; Other</strong> and select the perspective you want.</td>
+    </tr>
+   </tbody>
+  </table>
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.devtools/html/web_tools/web_inspector_w.htm b/org.tizen.devtools/html/web_tools/web_inspector_w.htm
index d8ef9e4..1edfa8b 100644
--- a/org.tizen.devtools/html/web_tools/web_inspector_w.htm
+++ b/org.tizen.devtools/html/web_tools/web_inspector_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm b/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm
index d690f20..ecf868d 100644
--- a/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm
+++ b/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.devtools/html/web_tools/web_simulator_w.htm b/org.tizen.devtools/html/web_tools/web_simulator_w.htm
index 797b723..0943b86 100644
--- a/org.tizen.devtools/html/web_tools/web_simulator_w.htm
+++ b/org.tizen.devtools/html/web_tools/web_simulator_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -32,8 +32,7 @@
 <div id="container"><div id="contents"><div class="content">
   <h1>Web Simulator</h1> 
   <p>The Tizen Web Simulator is a light-weight tool that provides many <a href="#setting">settings</a> and <a href="web_simulator_features_w.htm">features</a> to develop Web applications. You can use the simulator features to debug your applications.</p> 
-  <p class="figure">Figure: Tizen Web Simulator</p> 
-  <p align="center"><img alt="Tizen Web Simulator" src="../images/tizen_web_simulator.png" /></p> 
+
   <p>The Tizen Web Simulator:</p> 
   <ul> 
    <li>Supports running and debugging modern HTML5 Web applications.</li> 
@@ -54,7 +53,8 @@
     </tr>
    </tbody>
   </table>
-  
+  <p class="figure">Figure: Tizen Web Simulator</p> 
+  <p align="center"><img alt="Tizen Web Simulator" src="../images/tizen_web_simulator.png" /></p>   
   
   <h2 id="setting" name="setting">Web Simulator Settings</h2> 
   <p>The Web Simulator has several settings for developing Web applications.</p> 
diff --git a/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm b/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm
index fe4556d..42d76b2 100644
--- a/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm
+++ b/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/>  <img alt="Wearable Web" src="../images/ww_icon.png" /></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/>  <img alt="Wearable Web" src="../images/wearable_s_w.png" /></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.devtools/index.xml b/org.tizen.devtools/index.xml
index 8faf1ed..c247998 100644
--- a/org.tizen.devtools/index.xml
+++ b/org.tizen.devtools/index.xml
@@ -50,9 +50,13 @@
 			<topic href="html/native_tools/manifest_elements_n.htm" label="Additional Manifest Text Editor Elements"></topic>
 		</topic>
 		<topic href="html/native_tools/po_file_editor_n.htm" label="PO File Editor"></topic>
-		<topic href="html/native_tools/uibuilder_n.htm" label="UI Builder"></topic>
+		<topic href="html/native_tools/uibuilder_n.htm" label="UI Builder">
+			<topic href="html/native_tools/storyboard_n.htm" label="Storyboard"></topic>
+		</topic>
 		<topic href="html/native_tools/enventor_n.htm" label="Enventor"></topic>
-		<topic href="html/native_tools/command_line_interface_n.htm" label="Command Line Interface"></topic>
+		<topic href="html/native_tools/command_line_interface_n.htm" label="Command Line Interface">
+			<topic href="html/native_tools/project_conversion_n.htm" label="Project Conversion"></topic>
+		</topic>
 		<topic href="html/native_tools/call_stack_view_n.htm" label="Call Stack View"></topic>
 		<topic href="html/native_tools/da_overview_n.htm" label="Dynamic Analyzer">
 			<topic href="html/native_tools/da_timeline_n.htm" label="Timeline"></topic>
@@ -67,7 +71,8 @@
 		</topic>
 		<topic href="html/native_tools/static_analyzer_n.htm" label="Static Analyzer"></topic>
 		<topic href="html/native_tools/valgrind_n.htm" label="Valgrind"></topic>
-		<topic href="html/native_tools/t_trace_n.htm" label="T-trace"></topic>		
+		<topic href="html/native_tools/t_trace_n.htm" label="T-trace"></topic>	
+		<topic href="html/native_tools/resource_explorer_n.htm" label="Resource Explorer"></topic>		
 	</topic>    
 </toc>
 
diff --git a/org.tizen.gettingstarted/META-INF/MANIFEST.MF b/org.tizen.gettingstarted/META-INF/MANIFEST.MF
index 765732d..f8d8b1a 100644
--- a/org.tizen.gettingstarted/META-INF/MANIFEST.MF
+++ b/org.tizen.gettingstarted/META-INF/MANIFEST.MF
@@ -1,6 +1,6 @@
 Manifest-Version: 1.0
 Bundle-ManifestVersion: 1
-Bundle-Name: Getting Started with Tizen
+Bundle-Name: Getting Started
 Bundle-SymbolicName: org.tizen.gettingstarted;singleton=true
 Bundle-Version: 2.4.0
 Bundle-Vendor: The Linux Foundation
diff --git a/org.tizen.gettingstarted/html/cover_page.htm b/org.tizen.gettingstarted/html/cover_page.htm
index b3a9939..6539271 100644
--- a/org.tizen.gettingstarted/html/cover_page.htm
+++ b/org.tizen.gettingstarted/html/cover_page.htm
@@ -11,7 +11,7 @@
 	<script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
 	<script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
 
-	<title>Getting Started with Tizen</title>  
+	<title>Getting Started</title>  
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
@@ -21,14 +21,14 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/> <img alt="Wearable native" src="images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="images/mobile_s_wn.png"/> <img alt="Wearable" src="images/wearable_s_wn.png"/></p>
 	</div>
 	
 <h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
 <font size="11">Getting Started</font></h1>
 
 
-<p>The getting started with Tizen documentation provides overall information you need to become familiar with Tizen programming and application model:</p>
+<p>The getting started documentation provides overall information you need to become familiar with Tizen programming and application model:</p>
 
 <ul>
 <li><a href="preface.htm">Preface</a>
@@ -47,7 +47,7 @@
 
 <p>For more information about developing Tizen applications, see:</p>
 <ul>
-<li><a href="../../org.tizen.ui.guides/html/cover_page.htm">Tizen UI Guides</a></li>
+<li><a href="../../org.tizen.ui.practices/html/cover_page.htm">Tizen UI Practices</a></li>
 <li><a href="../../org.tizen.tutorials/html/cover_page.htm">Tizen Tutorials</a></li>
 <li><a href="../../org.tizen.guides/html/cover_page.htm">Tizen Guides</a></li>
 <li><a href="../../org.tizen.web.apireference/html/cover_page.htm">Tizen API References</a></li>
diff --git a/org.tizen.gettingstarted/html/images/mn_division.png b/org.tizen.gettingstarted/html/images/mn_division.png
index 1f7e337..faecb28 100644
Binary files a/org.tizen.gettingstarted/html/images/mn_division.png and b/org.tizen.gettingstarted/html/images/mn_division.png differ
diff --git a/org.tizen.gettingstarted/html/images/mobile_s_n.png b/org.tizen.gettingstarted/html/images/mobile_s_n.png
new file mode 100644
index 0000000..ad8c779
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mobile_s_n.png differ
diff --git a/org.tizen.gettingstarted/html/images/mobile_s_w.png b/org.tizen.gettingstarted/html/images/mobile_s_w.png
new file mode 100644
index 0000000..f86df29
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mobile_s_w.png differ
diff --git a/org.tizen.gettingstarted/html/images/mobile_s_w_optional.png b/org.tizen.gettingstarted/html/images/mobile_s_w_optional.png
new file mode 100644
index 0000000..0434b73
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mobile_s_w_optional.png differ
diff --git a/org.tizen.gettingstarted/html/images/mobile_s_wn.png b/org.tizen.gettingstarted/html/images/mobile_s_wn.png
new file mode 100644
index 0000000..ec30fd2
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/mobile_s_wn.png differ
diff --git a/org.tizen.gettingstarted/html/images/mw_division.png b/org.tizen.gettingstarted/html/images/mw_division.png
index 8fc3efa..c4a8655 100644
Binary files a/org.tizen.gettingstarted/html/images/mw_division.png and b/org.tizen.gettingstarted/html/images/mw_division.png differ
diff --git a/org.tizen.gettingstarted/html/images/n_division.png b/org.tizen.gettingstarted/html/images/n_division.png
index d687bc5..5a0b8f6 100644
Binary files a/org.tizen.gettingstarted/html/images/n_division.png and b/org.tizen.gettingstarted/html/images/n_division.png differ
diff --git a/org.tizen.gettingstarted/html/images/nuib_cadvl_wysiwyg_editor.png b/org.tizen.gettingstarted/html/images/nuib_cadvl_wysiwyg_editor.png
index 54fedaa..d5f02cb 100644
Binary files a/org.tizen.gettingstarted/html/images/nuib_cadvl_wysiwyg_editor.png and b/org.tizen.gettingstarted/html/images/nuib_cadvl_wysiwyg_editor.png differ
diff --git a/org.tizen.gettingstarted/html/images/w_division.png b/org.tizen.gettingstarted/html/images/w_division.png
index 88d9959..443a1ea 100644
Binary files a/org.tizen.gettingstarted/html/images/w_division.png and b/org.tizen.gettingstarted/html/images/w_division.png differ
diff --git a/org.tizen.gettingstarted/html/images/wearable_s_n.png b/org.tizen.gettingstarted/html/images/wearable_s_n.png
new file mode 100644
index 0000000..02e3791
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/wearable_s_n.png differ
diff --git a/org.tizen.gettingstarted/html/images/wearable_s_w.png b/org.tizen.gettingstarted/html/images/wearable_s_w.png
new file mode 100644
index 0000000..379a9c5
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/wearable_s_w.png differ
diff --git a/org.tizen.gettingstarted/html/images/wearable_s_w_optional.png b/org.tizen.gettingstarted/html/images/wearable_s_w_optional.png
new file mode 100644
index 0000000..cef460c
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/wearable_s_w_optional.png differ
diff --git a/org.tizen.gettingstarted/html/images/wearable_s_wn.png b/org.tizen.gettingstarted/html/images/wearable_s_wn.png
new file mode 100644
index 0000000..280245d
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/wearable_s_wn.png differ
diff --git a/org.tizen.gettingstarted/html/images/wn_division.png b/org.tizen.gettingstarted/html/images/wn_division.png
index 11a7876..dca667f 100644
Binary files a/org.tizen.gettingstarted/html/images/wn_division.png and b/org.tizen.gettingstarted/html/images/wn_division.png differ
diff --git a/org.tizen.gettingstarted/html/images/ww_division.png b/org.tizen.gettingstarted/html/images/ww_division.png
index 65e7ab7..5f5160c 100644
Binary files a/org.tizen.gettingstarted/html/images/ww_division.png and b/org.tizen.gettingstarted/html/images/ww_division.png differ
diff --git a/org.tizen.gettingstarted/html/index.htm b/org.tizen.gettingstarted/html/index.htm
index 4f754bf..27918ce 100644
--- a/org.tizen.gettingstarted/html/index.htm
+++ b/org.tizen.gettingstarted/html/index.htm
@@ -11,7 +11,7 @@
 	<script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
 	<script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
 
-	<title>Getting Started with Tizen</title>  
+	<title>Getting Started</title>  
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 
-<h1><a href="cover_page.htm">Getting Started with Tizen</a></h1>
+<h1><a href="cover_page.htm">Getting Started</a></h1>
 
 	<h2><a href="preface.htm">Preface</a></h2>
 	<h2><a href="web/cover_page_w.htm">Web Application</a></h2>
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 d9e1b65..f0ba706 100644
--- a/org.tizen.gettingstarted/html/native/app_model/application_model_n.htm
+++ b/org.tizen.gettingstarted/html/native/app_model/application_model_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -91,7 +91,7 @@ These devices have constraints, such as relatively small screen sizes and lack o
 
 <h2 id="start" name="start">Starting the Tizen Native Application</h2>
 
-<p>An application can be launched by the user from the Launcher or by another application. Either way, the Application Framework starts the application by creating a new process and calling the application entry point. Like in a conventional Linux application, the application main function is the entry point. For more information about launching native applications, see <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#app_controls">Launching Applications</a>.</p>
+<p>An application can be launched by the user from the Launcher or by another application. Either way, the Application Framework starts the application by creating a new process and calling the application entry point. Like in a conventional Linux application, the application main function is the entry point. For more information about launching native applications, see <a href="../../../../org.tizen.guides/html/native/app/appcontrol_n.htm">App Control</a>.</p>
 
 
 <h2 id="packageID" name="packageID">Package ID and Application ID</h2>
diff --git a/org.tizen.gettingstarted/html/native/cover_page_n.htm b/org.tizen.gettingstarted/html/native/cover_page_n.htm
index d7e0a1c..7cde62a 100644
--- a/org.tizen.gettingstarted/html/native/cover_page_n.htm
+++ b/org.tizen.gettingstarted/html/native/cover_page_n.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
 <h1>Introduction to Native Applications</h1>
diff --git a/org.tizen.gettingstarted/html/native/details/app_filtering_n.htm b/org.tizen.gettingstarted/html/native/details/app_filtering_n.htm
index 9e77836..fb60348 100644
--- a/org.tizen.gettingstarted/html/native/details/app_filtering_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/app_filtering_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -61,64 +61,76 @@
 	<tr>
 			<th>Feature key</th>
 			<th>Description</th>
+			<th>Platform version</th>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
 			<td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
 			<p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
 			</td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
 			<td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
 			</td>
+			<td>2.2.1</td>
 		</tr>	
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
 			<td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
 			</td>
+			<td>2.3</td>
 		</tr>		
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
 			<td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
 			<td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.3</td>
 		</tr>		
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
 			<td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
 			<td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
 			<td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
 			<td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
 			<td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
 			<td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
 			<p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 	</tbody>
  </table>
@@ -151,418 +163,595 @@
 <tr>
 <th>Feature key</th> 
      <th>Description</th> 
+	 <th>Platform version</th>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td> 
      <td>Specify this key, if the application requires any kind of a camera.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span></td> 
      <td>Specify this key, if the application requires a back-facing camera.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back.flash</span></td> 
      <td>Specify this key, if the application requires a back-facing camera with a flash.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span></td> 
      <td>Specify this key, if the application requires a front-facing camera.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front.flash</span></td> 
      <td>Specify this key, if the application requires a front-facing camera with a flash.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td> 
      <td>Specify this key, if the application requires an FM radio.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/graphics.acceleration</span></td> 
      <td>Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td> 
      <td>Specify this key, if the application requires a built-in physical keyboard.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td> 
      <td>Specify this key with a specific keyboard layout (<span style="font-family: Courier New,Courier,monospace">string</span> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td> 
      <td>Specify this key, if the application requires a LED.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></td> 
      <td>Specify this key, if the application requires any location positioning features.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.geofence</span></td> 
+     <td>Specify this key, if the application requires the geofence feature.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td> 
      <td>Specify this key, if the application requires the Global Positioning System (GPS) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td> 
      <td>Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td> 
      <td>Specify this key, if the application requires a microphone.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multimedia.transcoder</span></td> 
      <td>Specify this key, if the application requires the multimedia transcoder feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td> 
      <td>Specify this key, if the application requires a pinch-zoom gesture feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 	<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td> 
      <td>Specify this key with a specific number (<span style="font-family: Courier New,Courier,monospace">int</span> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td> 
      <td>Specify this key, if the application requires the Bluetooth feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td> 
      <td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td> 
      <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td> 
      <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td> 
      <td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td> 
      <td>Specify this key, if the application requires the Bluetooth LE feature.</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td> 
      <td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td> 
      <td>Specify this key, if the application requires the NFC card emulation feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
      <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
+	 <td>2.3.1</td>
     </tr>		
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td> 
+     <td>Specify this key, if the application requires the NFC p2p feature.</td> 
+	 <td>2.3.1</td>
+    </tr>
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push</span></td> 
-     <td>Specify this key, if the application requires the NFC reserved push feature.</td> 
+     <td>Specify this key, if the application requires the NFC reserved push feature.</td><td>2.2.1</td>	 
+    </tr>	
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td> 
+     <td>Specify this key, if the application requires the NFC tag feature.</td> 
+	 <td>2.3.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td> 
-     <td>Specify this key, if the application requires the network-based push service.</td> 
+     <td>Specify this key, if the application requires the network-based push service.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td> 
      <td>Specify this key, if the application requires the secure element feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.ese</span></td> 
      <td>Specify this key, if the application requires the ESE secure element feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.uicc</span></td> 
      <td>Specify this key, if the application requires the UICC secure element feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td> 
      <td>Specify this key, if the application requires the MMS feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms</span></td> 
+     <td>Specify this key, if the application requires the SMS feature.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span></td>
      <td>Specify this key, if the application requires any kind of tethering feature.</td>
+	 <td>2.3</td>
 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.bluetooth</span></td>
      <td>Specify this key, if the application requires the tethering over Bluetooth feature.</td>
+	 <td>2.3</td>
 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.usb</span></td>
      <td>Specify this key, if the application requires the tethering over USB connection feature.</td>
+	 <td>2.3</td>
 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.wifi</span></td>
      <td>Specify this key, if the application requires the tethering over Wi-Fi feature.</td>
+	 <td>2.3</td>
 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></td> 
      <td>Specify this key, if the application requires the Wi-Fi Direct&trade; feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.display</span></td> 
      <td>Specify this key, if the application requires the Wi-Fi Direct&trade; display feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.service_discovery</span></td> 
      <td>Specify this key, if the application requires the Wi-Fi Direct&trade; service discovery feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.3dc</span></td> 
      <td>Specify this key, if the application requires the 3DC texture format for OpenGL&reg; ES.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.atc</span></td> 
      <td>Specify this key, if the application requires the ATC texture format for OpenGL&reg; ES.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.etc</span></td> 
      <td>Specify this key, if the application requires the ETC texture format for OpenGL&reg; ES.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.ptc</span></td> 
      <td>Specify this key, if the application requires the PTC texture format for OpenGL&reg; ES.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.pvrtc</span></td> 
-     <td>Specify this key, if the application requires the PVRTC texture format for OpenGL&reg; ES.</td> 
+     <td>Specify this key, if the application requires the PVRTC texture format for OpenGL&reg; ES.</td>
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.utc</span></td> 
      <td>Specify this key, if the application requires the UTC texture format for OpenGL&reg; ES.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.1_1</span></td> 
      <td>Specify this key, if the application requires OpenGL&reg; ES version 1.1 at minimum.
 	 <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
-</td> 
+	</td> 
+	<td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.2_0</span></td> 
      <td>Specify this key, if the application requires OpenGL&reg; ES version 2.0.
 	 <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
-</td> 
+	</td> 
+	<td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv7</span></td> 
      <td>Specify this key, if the application requires the ARMv7 CPU architecture.</td> 
+	 <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td> 
+     <td>Specify this key, if the application requires the x86 CPU architecture.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse2</span></td> 
      <td>Specify this key, if the application requires the SSE2 Floating Point Unit (FPU) architecture.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse3</span></td> 
      <td>Specify this key, if the application requires the SSE3 FPU architecture.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.ssse3</span></td> 
      <td>Specify this key, if the application requires the SSSE3 FPU architecture.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv3</span></td> 
      <td>Specify this key, if the application requires the VFPv3 FPU architecture.</td> 
-    </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td> 
-     <td>Specify this key, if the application requires the x86 CPU architecture.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td> 
      <td>Specify this key, if the application requires the automatic screen rotation feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td> 
      <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td> 
+	 <td>2.2.1</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td> 
      <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
      <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td> 
      <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td> 
      <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td> 
      <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td> 
      <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td> 
      <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td> 
      <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td> 
      <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td> 
      <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td> 
      <td>Specify this key, if the application requires an acceleration sensor.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer.wakeup</span></td> 
      <td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td> 
-     <td>Specify this key, if the application requires an activity recognition sensor.</td> 
+     <td>Specify this key, if the application requires an activity recognition sensor.</td>
+	<td>2.3</td>	 
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td> 
-     <td>Specify this key, if the application requires a barometer sensor.</td> 
+     <td>Specify this key, if the application requires a barometer sensor.</td>
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer.wakeup</span></td> 
      <td>Specify this key, if the application requires the barometer sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.geomagnetic_rotation_vector</span></td> 
+     <td>Specify this key, if the application requires a geomagnetic-based rotation vector sensor.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td> 
-     <td>Specify this key, if the application requires a gesture recognition sensor.</td> 
+     <td>Specify this key, if the application requires a gesture recognition sensor.</td>
+	<td>2.3</td>	 
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravity</span></td> 
      <td>Specify this key, if the application requires a gravity sensor.</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td> 
      <td>Specify this key, if the application requires a gyro sensor.</td> 
+	 <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope_rotation_vector</span></td> 
+     <td>Specify this key, if the application requires a gyroscope-based rotation vector sensor.</td> 
+	 <td>2.4</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.uncalibrated</span></td> 
+     <td>Specify this key, if the application requires an uncalibrated gyroscope sensor.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td> 
      <td>Specify this key, if the application requires the gyro sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td> 
      <td>Specify this key, if the application requires a heart rate monitor sensor.</td> 
+	 <td>2.3</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>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
+	 <td>2.3.1</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>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
+	 <td>2.3.1</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>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
+	 <td>2.3.1</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td> 
      <td>Specify this key, if the application requires a humidity sensor.</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td> 
-     <td>Specify this key, if the application requires a linear acceleration sensor.</td> 
+     <td>Specify this key, if the application requires a linear acceleration sensor.</td>
+	<td>2.3</td>	 
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td> 
      <td>Specify this key, if the application requires a magnetic sensor.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.uncalibrated</span></td> 
+     <td>Specify this key, if the application requires an uncalibrated geomagnetic sensor.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td> 
      <td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td> 
      <td>Specify this key, if the application requires a pedometer sensor.</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td> 
-     <td>Specify this key, if the application requires a photometer sensor.</td> 
+     <td>Specify this key, if the application requires a photometer sensor.</td>
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer.wakeup</span></td> 
      <td>Specify this key, if the application requires the photometer sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td> 
      <td>Specify this key, if the application requires a proximity sensor.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity.wakeup</span></td> 
      <td>Specify this key, if the application requires the proximity sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td> 
      <td>Specify this key, if the application requires a rotation vector sensor.</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td> 
-     <td>Specify this key, if the application requires a temperature sensor.</td> 
+     <td>Specify this key, if the application requires a temperature sensor.</td>
+	<td>2.3</td>	 
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td> 
-     <td>Specify this key, if the application requires a tilt sensor.</td> 
+     <td>Specify this key, if the application requires a tilt sensor.</td>
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter.wakeup</span></td> 
      <td>Specify this key, if the application requires the tilt sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td> 
      <td>Specify this key, if the application requires a ultraviolet sensor.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td> 
-     <td>Specify this key, if the application requires a wrist up sensor.</td> 
+     <td>Specify this key, if the application requires a wrist up sensor.</td>
+	 <td>2.3</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td> 
+     <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td> 
      <td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td> 
+	 <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.control</span></td> 
+     <td>Specify this key, if the application requires the voice control feature.</td>
+	<td>2.4</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition</span></td> 
      <td>Specify this key, if the application requires the speech recognition (STT) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td> 
      <td>Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.accessory</span></td> 
      <td>Specify this key, if the application requires the USB client (or accessory) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.host</span></td> 
      <td>Specify this key, if the application requires the USB host feature.</td> 
+	 <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_detection</span></td> 
+     <td>Specify this key, if the application requires the barcode detection feature.</td> 
+	 <td>2.4</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_generation</span></td> 
+     <td>Specify this key, if the application requires the barcode generation feature.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</span></td> 
-     <td>Specify this key, if the application requires the face recognition feature.</td> 
+     <td>Specify this key, if the application requires the face recognition feature.</td>
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.image_recognition</span></td> 
-     <td>Specify this key, if the application requires the image recognition feature.</td> 
+     <td>Specify this key, if the application requires the image recognition feature.</td>
+	<td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_generation</span></td> 
      <td>Specify this key, if the application requires the QR code generation feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_recognition</span></td> 
      <td>Specify this key, if the application requires the QR code recognition feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 </tbody>
 </table>
@@ -575,434 +764,610 @@
 <tr>
 <th>Feature key</th> 
      <th>Description</th> 
+	 <th>Platform version</th>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td> 
      <td>Specify this key, if the application requires any kind of a camera.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span></td> 
      <td>Specify this key, if the application requires a back-facing camera.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back.flash</span></td> 
-     <td>Specify this key, if the application requires a back-facing camera with a flash.</td> 
+     <td>Specify this key, if the application requires a back-facing camera with a flash.</td>
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span></td> 
      <td>Specify this key, if the application requires a front-facing camera.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front.flash</span></td> 
      <td>Specify this key, if the application requires a front-facing camera with a flash.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td> 
      <td>Specify this key, if the application requires an FM radio.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/graphics.acceleration</span></td> 
      <td>Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td> 
      <td>Specify this key, if the application requires a built-in physical keyboard.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td> 
      <td>Specify this key with a specific keyboard layout (<span style="font-family: Courier New,Courier,monospace">string</span> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.rotating_bezel</span></td>
      <td>Specify this key, if the application requires rotating bezel input.</td>
+	 <td>2.3.1</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td> 
      <td>Specify this key, if the application requires a LED.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></td> 
      <td>Specify this key, if the application requires any location positioning features.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td> 
-     <td>Specify this key, if the application requires the Global Positioning System (GPS) feature.</td> 
+     <td>Specify this key, if the application requires the Global Positioning System (GPS) feature.</td>
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td> 
      <td>Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td> 
      <td>Specify this key, if the application requires a microphone.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multimedia.transcoder</span></td> 
      <td>Specify this key, if the application requires the multimedia transcoder feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td> 
      <td>Specify this key, if the application requires a pinch-zoom gesture feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 	<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td> 
      <td>Specify this key with a specific number (<span style="font-family: Courier New,Courier,monospace">int</span> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td> 
      <td>Specify this key, if the application requires the Bluetooth feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td> 
      <td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td> 
      <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td> 
      <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td> 
      <td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td> 
      <td>Specify this key, if the application requires the Bluetooth LE feature.</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td> 
      <td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></td>
      <td>Specify this key, if the application requires Internet access.</td>
+	 <td>2.3.1</td>
     </tr>		
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td> 
      <td>Specify this key, if the application requires the NFC card emulation feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
      <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
+	 <td>2.3.1</td>
     </tr>		
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td> 
+     <td>Specify this key, if the application requires the NFC p2p feature.</td> 
+	 <td>2.3.1</td>
+    </tr>
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push</span></td> 
-     <td>Specify this key, if the application requires the NFC reserved push feature.</td> 
+     <td>Specify this key, if the application requires the NFC reserved push feature.</td><td>2.2.1</td>	 
+    </tr>	
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td> 
+     <td>Specify this key, if the application requires the NFC tag feature.</td> 
+	 <td>2.3.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td> 
      <td>Specify this key, if the application requires the network-based push service.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td> 
      <td>Specify this key, if the application requires the secure element feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.ese</span></td> 
      <td>Specify this key, if the application requires the ESE secure element feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.uicc</span></td> 
      <td>Specify this key, if the application requires the UICC secure element feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td> 
      <td>Specify this key, if the application requires the MMS feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms</span></td> 
+     <td>Specify this key, if the application requires the SMS feature.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span></td>
      <td>Specify this key, if the application requires any kind of tethering feature.</td>
+	 <td>2.3</td>
 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.bluetooth</span></td>
      <td>Specify this key, if the application requires the tethering over Bluetooth feature.</td>
+	 <td>2.3</td>
 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.usb</span></td>
      <td>Specify this key, if the application requires the tethering over USB connection feature.</td>
+	 <td>2.3</td>
 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.wifi</span></td>
      <td>Specify this key, if the application requires the tethering over Wi-Fi feature.</td>
+	 <td>2.3</td>
 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td> 
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></td> 
      <td>Specify this key, if the application requires the Wi-Fi Direct&trade; feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.display</span></td> 
      <td>Specify this key, if the application requires the Wi-Fi Direct&trade; display feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.service_discovery</span></td> 
      <td>Specify this key, if the application requires the Wi-Fi Direct&trade; service discovery feature.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.3dc</span></td> 
      <td>Specify this key, if the application requires the 3DC texture format for OpenGL&reg; ES.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.atc</span></td> 
      <td>Specify this key, if the application requires the ATC texture format for OpenGL&reg; ES.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.etc</span></td> 
      <td>Specify this key, if the application requires the ETC texture format for OpenGL&reg; ES.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.ptc</span></td> 
      <td>Specify this key, if the application requires the PTC texture format for OpenGL&reg; ES.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.pvrtc</span></td> 
      <td>Specify this key, if the application requires the PVRTC texture format for OpenGL&reg; ES.</td> 
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.utc</span></td> 
      <td>Specify this key, if the application requires the UTC texture format for OpenGL&reg; ES.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.1_1</span></td> 
      <td>Specify this key, if the application requires OpenGL&reg; ES version 1.1 at minimum.
 	 <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
 </td> 
+	<td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.2_0</span></td> 
      <td>Specify this key, if the application requires OpenGL&reg; ES version 2.0.
 	 <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
 </td> 
+	<td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv7</span></td> 
      <td>Specify this key, if the application requires the ARMv7 CPU architecture.</td> 
+	 <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td> 
+     <td>Specify this key, if the application requires the x86 CPU architecture.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse2</span></td> 
      <td>Specify this key, if the application requires the SSE2 Floating Point Unit (FPU) architecture.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse3</span></td> 
      <td>Specify this key, if the application requires the SSE3 FPU architecture.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.ssse3</span></td> 
      <td>Specify this key, if the application requires the SSSE3 FPU architecture.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv3</span></td> 
      <td>Specify this key, if the application requires the VFPv3 FPU architecture.</td> 
-    </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td> 
-     <td>Specify this key, if the application requires the x86 CPU architecture.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td> 
      <td>Specify this key, if the application requires the automatic screen rotation feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>	
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.circle</span></td>
      <td>Specify this key, if the application requires a circle-shaped screen.</td>
+	 <td>2.3.1</td>
     </tr>
 <tr>	
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.rectangle</span></td>
      <td>Specify this key, if the application requires a rectangle-shaped screen.</td>
+	 <td>2.3.1</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td> 
      <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td> 
+	 <td>2.2.1</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td> 
      <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
      <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td> 
      <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td> 
      <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td> 
      <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td> 
      <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.</td> 
+	<td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td> 
      <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td> 
      <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td> 
      <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td> 
      <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td> 
      <td>Specify this key, if the application requires an acceleration sensor.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer.wakeup</span></td> 
      <td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td> 
      <td>Specify this key, if the application requires an activity recognition sensor.</td> 
+	<td>2.3</td>	 
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td> 
      <td>Specify this key, if the application requires a barometer sensor.</td> 
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer.wakeup</span></td> 
      <td>Specify this key, if the application requires the barometer sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.geomagnetic_rotation_vector</span></td> 
+     <td>Specify this key, if the application requires a geomagnetic-based rotation vector sensor.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td> 
      <td>Specify this key, if the application requires a gesture recognition sensor.</td> 
+	<td>2.3</td>	 
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravity</span></td> 
      <td>Specify this key, if the application requires a gravity sensor.</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td> 
      <td>Specify this key, if the application requires a gyro sensor.</td> 
+	 <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope_rotation_vector</span></td> 
+     <td>Specify this key, if the application requires a gyroscope-based rotation vector sensor.</td> 
+	 <td>2.4</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.uncalibrated</span></td> 
+     <td>Specify this key, if the application requires an uncalibrated gyroscope sensor.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td> 
      <td>Specify this key, if the application requires the gyro sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td> 
      <td>Specify this key, if the application requires a heart rate monitor sensor.</td> 
+	 <td>2.3</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>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
+	 <td>2.3.1</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>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
+	 <td>2.3.1</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>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
+	 <td>2.3.1</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td> 
      <td>Specify this key, if the application requires a humidity sensor.</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td> 
      <td>Specify this key, if the application requires a linear acceleration sensor.</td> 
+	<td>2.3</td>	 
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td> 
      <td>Specify this key, if the application requires a magnetic sensor.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.uncalibrated</span></td> 
+     <td>Specify this key, if the application requires an uncalibrated geomagnetic sensor.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td> 
      <td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td> 
      <td>Specify this key, if the application requires a pedometer sensor.</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td> 
      <td>Specify this key, if the application requires a photometer sensor.</td> 
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer.wakeup</span></td> 
      <td>Specify this key, if the application requires the photometer sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td> 
      <td>Specify this key, if the application requires a proximity sensor.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity.wakeup</span></td> 
      <td>Specify this key, if the application requires the proximity sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td> 
      <td>Specify this key, if the application requires a rotation vector sensor.</td> 
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td> 
      <td>Specify this key, if the application requires a temperature sensor.</td> 
+	<td>2.3</td>	 
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td> 
      <td>Specify this key, if the application requires a tilt sensor.</td> 
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter.wakeup</span></td> 
      <td>Specify this key, if the application requires the tilt sensor wake-up feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td> 
      <td>Specify this key, if the application requires a ultraviolet sensor.</td> 
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td> 
      <td>Specify this key, if the application requires a wrist up sensor.</td> 
+	 <td>2.3</td> 
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td> 
+     <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td> 
      <td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.control</span></td> 
+     <td>Specify this key, if the application requires the voice control feature.</td> 
+	<td>2.4</td>	 
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition</span></td> 
      <td>Specify this key, if the application requires the speech recognition (STT) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td> 
      <td>Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.accessory</span></td> 
      <td>Specify this key, if the application requires the USB client (or accessory) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.host</span></td> 
      <td>Specify this key, if the application requires the USB host feature.</td> 
+	 <td>2.2.1</td>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_detection</span></td> 
+     <td>Specify this key, if the application requires the barcode detection feature.</td> 
+	 <td>2.4</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_generation</span></td> 
+     <td>Specify this key, if the application requires the barcode generation feature.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</span></td> 
      <td>Specify this key, if the application requires the face recognition feature.</td> 
+	<td>2.2.1</td>	 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.image_recognition</span></td> 
      <td>Specify this key, if the application requires the image recognition feature.</td> 
+	<td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_generation</span></td> 
      <td>Specify this key, if the application requires the QR code generation feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_recognition</span></td> 
      <td>Specify this key, if the application requires the QR code recognition feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 </tbody>
 </table>
diff --git a/org.tizen.gettingstarted/html/native/details/details_n.htm b/org.tizen.gettingstarted/html/native/details/details_n.htm
index b41321b..a6d8746 100644
--- a/org.tizen.gettingstarted/html/native/details/details_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/details_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.gettingstarted/html/native/details/error_handling_n.htm b/org.tizen.gettingstarted/html/native/details/error_handling_n.htm
index fa3cc9b..8de7fe3 100644
--- a/org.tizen.gettingstarted/html/native/details/error_handling_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/error_handling_n.htm
@@ -19,7 +19,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
   <h1>Error Handling</h1>
diff --git a/org.tizen.gettingstarted/html/native/details/event_handling_n.htm b/org.tizen.gettingstarted/html/native/details/event_handling_n.htm
index 251dcf8..df2b60b 100644
--- a/org.tizen.gettingstarted/html/native/details/event_handling_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/event_handling_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -26,7 +26,8 @@
 			<li><a href="#menu">Menu Key Events</a></li>
 			<li><a href="#back">Back Key Events</a></li>
 			<li><a href="#rotary">Rotary Events</a></li>
-			<li><a href="#media">Media Key Events</a></li>		
+			<li><a href="#media">Media Key Events</a></li>
+			<li><a href="#ambient">Ambient Events</a></li>			
 		</ul>
 	</div></div>
 </div>	
@@ -44,7 +45,7 @@
       <th class="note">Note</th>
     </tr>
     <tr>
-      <td class="note">For more information on using Efl Extension for <strong>Menu</strong> key, <strong>Back</strong> key, and rotary events, see the <a href="../../../../org.tizen.ui.guides/html/native/efl/hw_input_n.htm">Hardware Input Handling</a> UI guide.</td>
+      <td class="note">For more information on using Efl Extension for <strong>Menu</strong> key, <strong>Back</strong> key, and rotary events, see <a href="../../../../org.tizen.ui.practices/html/native/efl/hw_input_n.htm">Hardware Input Handling</a>.</td>
     </tr>
   </tbody>
 </table>
@@ -83,6 +84,10 @@
 <p>Tizen supports handling <strong>Media</strong> key events, such as play, stop, and pause events, from media devices (such as Bluetooth remote controller and earjack).</p>
 <p>To handle the <strong>Media</strong> key events, use the Media key API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">wearable</a> applications).</p>
 
+<h2 id="ambient" name="ambient">Ambient Events</h2>
+
+<p>An ambient mode is available in a low-powered wearable device. For more information about ambient events in the mobile native profile, see the <a href="../../../../org.tizen.guides/html/native/app/watch_n.htm">Watch Application</a> guide.</p>
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.gettingstarted/html/native/details/io_overview_n.htm b/org.tizen.gettingstarted/html/native/details/io_overview_n.htm
index 709cb92..e3a851c 100644
--- a/org.tizen.gettingstarted/html/native/details/io_overview_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/io_overview_n.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 <h1>File System Directory Hierarchy</h1>
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 b353a86..07dbe96 100644
--- a/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm
@@ -25,7 +25,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 <h1>Security and API Privileges</h1>
@@ -213,8 +213,8 @@ 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/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>
+<td rowspan="1" colspan="1"><p>Providing input methods</p></td>
+<td rowspan="1" colspan="1"><p>The application can provide users with a way to enter characters and symbols into an associated text field.</p></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>
@@ -232,7 +232,7 @@ 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/keygrab</span></p></td>
 <td rowspan="1" colspan="1"><p>platform</p></td>
 <td rowspan="1" colspan="1"><p>Capturing special key events</p></td>
-<td rowspan="1" colspan="1"><p>The application can read actions involving special keys, such as the volume keys on this or other devices (e.g. TV remote controls), even when it is running in the background.</p></td>
+<td rowspan="1" colspan="1"><p>The application can read actions involving special keys, such as the volume keys on this or other devices (such as TV remote controls), even when it is 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/keymanager</span></p></td>
@@ -270,7 +270,7 @@ 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/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>
+<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>
@@ -607,8 +607,8 @@ 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/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>
+<td rowspan="1" colspan="1"><p>Providing input methods</p></td>
+<td rowspan="1" colspan="1"><p>The application can provide users with a way to enter characters and symbols into an associated text field.</p></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>
@@ -626,7 +626,7 @@ 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/keygrab</span></p></td>
 <td rowspan="1" colspan="1"><p>platform</p></td>
 <td rowspan="1" colspan="1"><p>Capturing special key events</p></td>
-<td rowspan="1" colspan="1"><p>The application can read actions involving special keys, such as the volume keys on this or other devices (e.g. TV remote controls), even when it is running in the background.</p></td>
+<td rowspan="1" colspan="1"><p>The application can read actions involving special keys, such as the volume keys on this or other devices (such as TV remote controls), even when it is 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/keymanager</span></p></td>
@@ -663,7 +663,7 @@ 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/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>
+<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>
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 5a35519..b611537 100755
--- a/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 <h1>Tizen APIs</h1>
@@ -34,7 +34,7 @@
 
 <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 table define the Tizen native API mobile layout. The table describes the API modules and the functionality of all their submodule APIs within that module. The table also acts 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>The following table defines the Tizen 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 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>
 
   <table class="note">
    <tbody>
@@ -58,27 +58,30 @@
 			<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.
+               <td rowspan="4"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account</a></td>
+                <td rowspan="4">The Account API module features include managing various account information, such as receiving sync operation notifications and obtaining an access token by using the OAuth 2.0 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>
+                       <td>Provides 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>
+               <td>Provides an easy way to gain an access token between a 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>
+               <td>Helps applications in scheduling their data sync operations.</td>
+        </tr>
+		<tr>
+         <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
+         <td>Provides a library for using an open standard for secure authorization. This library enables users to securely log into an account on an application by using their logon credentials from another secondary account that they may have with another account provider or application. </td>
         </tr>
-
 		<tr>
 			<td 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.
@@ -105,7 +108,7 @@
         </tr>
         <tr>
 			<td><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a></td>
-			<td>A bundle is a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.</td>
+			<td>Provides a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.</td>
         </tr>    
         <tr>
 			<td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control</a></td>
@@ -125,7 +128,7 @@
         </tr>  
         <tr>
 			<td><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a></td>
-			<td>Adds application shortcuts to the device home screen, which is the main landing screen of the device.
+			<td>Adds application shortcuts to the device home screen, the main landing screen of the device.
 			</td>
         </tr> 
         <tr>
@@ -141,16 +144,16 @@
 			<li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/base/base_tutorials_n.htm">Base</a></li>
 			</ul></td>
 			<td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C++ Standard Library</a></td>
-			<td>Standard C++ library.</td>
+			<td>Provides a 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>
+         <td>Used for in-memory compression and decompression.</td>
        </tr>
 
 		<tr>
        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__GLIBC__FRAMEWORK.html">Glibc</a></td>
-			<td>Standard C library.</td>
+			<td>Provides a standard C library.</td>
         </tr>     
 		<tr>
 			<td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__GLIB__FRAMEWORK.html">Glib</a></td>
@@ -162,7 +165,7 @@
 		</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>
+			<td>Used to parse XML documents such as the <a href="../app_model/application_model_n.htm#appmanifest">Application Manifest</a>.</td>
         </tr> 
 		<tr>
 			<td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
@@ -177,8 +180,8 @@
 			<td>Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.</td>
         </tr> 
 		<tr>
-			<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.
+			<td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
+			<td rowspan="3">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
 			<p>Documentation:</p>
 			<ul>
 			<li>Guides: <a href="../../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content</a></li>
@@ -195,10 +198,6 @@
 			<td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
         </tr>     
 		<tr>
-            <td><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>
@@ -218,7 +217,7 @@
 		</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>
+			<td>Provides a way to define rules, each of which can trigger a specified action when the rule is satisfied.</td>
 		</tr>
 		<tr>
 			<td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
@@ -232,11 +231,11 @@
         </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>
+			<td>Provides a 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>
+			<td>Provides a set of functions, helping to create map-aware applications.</td>
 		</tr>
 
 		<tr>
@@ -279,7 +278,7 @@
         </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>
+			<td>Supports an image file format that extends existing formats, such as JPEG and TIFF. Many Tizen devices have a camera and use the EXIF format, and libEXIF can be used to read and write EXIF metainformation to and from image files.</td>
         </tr> 
 		<tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a></td>
@@ -287,7 +286,7 @@
         </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>
+			<td>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>
@@ -299,15 +298,15 @@
         </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>
+			<td>Provides functions for editing the metadata of several popular audio formats.</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>
+			<td>Provides functionality for barcode 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>
+         <td>Renders multichannel 3D audio.</td>
         </tr> 
 		<tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a></td>
@@ -323,7 +322,7 @@
         </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>
+			<td>Provides functions for screen mirroring as a sink.</td>
 		</tr>
 		<tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a></td>
@@ -331,7 +330,7 @@
         </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>
+			<td>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>
@@ -363,7 +362,7 @@
         </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>
+         <td>Provides a client-side URL data transfer library supporting http, https, ftp, file URIs, and many other protocols. Allows applications to perform URL-related activities without a Web browser.</td>
         </tr> 
 		<tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a></td>
@@ -394,7 +393,7 @@
         </tr>
 		<tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENSSL__FRAMEWORK.html">OpenSSL</a></td>
-         <td>An open source library that provides basic cryptographic functions and various utility functions.</td>
+         <td>Provides an open source library that provides basic cryptographic functions and various utility functions.</td>
         </tr>
 		<tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info</a></td>
@@ -407,10 +406,6 @@
 			<ul>
 			<li>Guides: <a href="../../../../org.tizen.guides/html/native/social/social_guide_n.htm">Social</a></li>
 			<li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/social/social_tutorials_n.htm">Social</a></li>	</ul></td>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
-         <td>An account is a collection of information representing the user of a specific account provider. This API submodule creates and manages accounts, retrieves account information, and receives account change notifications.</td>
-        </tr>
-        <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a></td>
          <td>Manages calendars, including events and tasks. It also stores and queries calendar information.</td>
         </tr>
@@ -418,6 +413,10 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a></td>
          <td>Manages phone contact information, such as address books, persons, and phone logs.</td>
         </tr>
+		<tr>
+            <td><a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor</a><p><strong>(since 2.4)</strong></p></td>
+			<td>Provides common interfaces, such as using a local service for various service infra.</td>
+        </tr>		
 				<tr>
          <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.
@@ -431,7 +430,7 @@
         </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>
+			<td>Provides functions to play sound or vibration associated with properties.</td>
 		</tr>
 
 		<tr>
@@ -460,7 +459,7 @@
         </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>
+			<td>Provides functions for writing trace messages to the system trace buffer.</td>
 		</tr>
 		
         <tr>
@@ -479,24 +478,28 @@
          <td>Obtains call, network, and SIM information.</td>
         </tr>   
 		<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>
+			<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>Provides functions 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.
+         <td rowspan="9"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
+		 <td rowspan="9">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>UI Practices: <a href="../../../../org.tizen.ui.practices/html/native/efl/guides_efl_n.htm">EFL</a> and <a href="../../../../org.tizen.ui.practices/html/native/dali/guides_dali_n.htm">DALi</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. Cairo EvasGL APIs have been newly added since 2.3.1.</td>
+         <td>Provides 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__dali.html">DALi</a></td>
+         <td>Provides a cross-platform 3D UI Toolkit for embedded systems.</td>
+		</tr>		
+		<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>
+         <td>Provides a collection of libraries that are independent and can be built on top of each other to provide useful features that complement the existing environment.</td>
 		</tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a></td>
@@ -508,19 +511,19 @@
         </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>
+			<td>Provides functions 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>
+         <td>Provides 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__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>
+			<td>Provides functions for creating and displaying an 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>
+         <td>Provides functions for the graphics buffer.</td>
         </tr>
         <tr>
          <td rowspan="4"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
@@ -530,33 +533,29 @@
 			<li>Guides: <a href="../../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX</a></li>
 			<li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX</a></li></ul></td>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a></td>
-         <td>This API submodule provides functions to recognize speech.</td>
+         <td>Provides functions to recognize speech.</td>
         </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a></td>
-         <td>This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.</td>
+         <td>Provides functions for synthesizing voice from text and playing synthesized sound data.</td>
         </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>
+			<td>Provides functions for starting the IME application life-cycle, for interacting with the current UI state of the IME, and getting attributes and 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>
+			<td>Provides functions for registering commands and getting notifications when a 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.
+         <td rowspan="2"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
+		 <td rowspan="2">The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents.
 		 <p>Documentation:</p>
 			<ul>
 			<li>Guides: <a href="../../../../org.tizen.guides/html/native/web/web_guide_n.htm">Web</a></li>
 			<li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web</a></li></ul></td>
         <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__JSONGLIB__FRAMEWORK.html">Json-Glib</a></td>
-         <td>This library allows reading and parsing of JavaScript Object Notation (JSON) documents.</td>
-        </tr>
-		<tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
-         <td>Library for using an open standard for secure authorization. This library enables users to securely log into an account on an application by using their logon credentials from another secondary account that they may have with another account provider or application. </td>
+         <td>Allows reading and parsing of JavaScript Object Notation (JSON) documents.</td>
         </tr>
 		<tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">WebView</a></td>
@@ -565,7 +564,7 @@
 		    </tbody> 
 		  </table>
 
-<p>The following table describes the API modules in the wearable profile and the functionality of all their submodule APIs.</p>
+<p>The following table describes the API modules in the wearable profile and the functionality of all their submodule APIs within that module. The table also acts 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>
 
   <table class="note">
    <tbody>
@@ -573,11 +572,11 @@
      <th class="note">Note</th>
     </tr>
     <tr>
-     <td class="note">Except as noted, the wearable native APIs are available since Tizen 2.3.1</td>
+     <td class="note">Except as noted, the wearable native APIs are available since Tizen 2.3.1.</td>
     </tr>
    </tbody>
   </table>
-
+	  
 <table border="1" style="width: 100%"> 
 	  <caption>Table: Wearable native API modules</caption>
 	<tbody> 
@@ -588,23 +587,28 @@
 			<th>Functionality</th> 
 		</tr>	
 		<tr>
-			<td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account</a></td>
-			<td rowspan="2">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.
+			<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 OAuth 2.0 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>
+			<td>Provides 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>
+			<td>Provides easy way to gain access token between server and client.</td>
+		</tr> 
+		 <tr>
+         <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
+         <td>Provides a 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 can have with another account provider or application. </td>
+        </tr>		
 		<tr>
 			<td rowspan="12"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></td>
 			<td rowspan="12">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>
 			<ul>
 			<li>Guides: <a href="../../../../org.tizen.guides/html/native/app/app_guide_n.htm">Application Framework</a></li>
@@ -628,7 +632,7 @@
         </tr>
         <tr>
 			<td><a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a></td>
-			<td>A bundle is a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.</td>
+			<td>Provides a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.</td>
         </tr>    
         <tr>
 			<td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control</a></td>
@@ -646,12 +650,11 @@
 			<td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a></td>
 			<td>Stores and receives information related to packages installed on the device. This is information can be, for example, the package name, path to the icon image, or the application version. It can also be used to check whether 2 package certificates match. If they match, they have been created by the same developer and can share resources securely. </td>
         </tr> 
-      <tr>
-			<td><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a></td>
-			<td>Adds application shortcuts to the device home screen, which is the main landing screen of the device.
-			</td>
-      </tr> 
-         <tr>
+		<tr>
+			<td><a href="../../../../org.tizen.native.wearable.apireference/group__SHORTCUT__MODULE.html">Shortcut</a></td>
+			<td>Adds application shortcuts to the device home screen, the main landing screen of the device.</td>
+		</tr> 
+		<tr>
           <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a></td>
           <td>Handles Tizen watch application state changes and system events. It is also used to start and exit the main event loop of watch applications.
 		</td>
@@ -669,15 +672,15 @@
 			<li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/base/base_tutorials_n.htm">Base</a></li>
 			</ul></td>
 			<td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C++ Standard Library</a></td>
-			<td>Standard C++ library.</td>
+			<td>Provides a standard C++ library.</td>
         </tr>
 		<tr>
 			<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>
+			<td>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>
+			<td>Provides a standard C library.</td>
         </tr>     
 		<tr>
 			<td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__GLIB__FRAMEWORK.html">Glib</a></td>
@@ -689,7 +692,7 @@
 		</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>
+			<td>Used to parse XML documents such as the <a href="../app_model/application_model_n.htm#appmanifest">Application Manifest</a>.</td>
         </tr> 
 		<tr>
 			<td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
@@ -716,6 +719,7 @@
         <tr>
 			<td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
 			<td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
+        </tr>      
 		<tr>
 			<td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
 			<td rowspan="2">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted. 
@@ -742,7 +746,7 @@
         </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>
+			<td>Provides a set of functions, helping to create map-aware applications.</td>
 		</tr>        
 		<tr>
          <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging</a></td>
@@ -780,15 +784,15 @@
         </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>
+			<td>Supports an image file format that extends existing formats, such as JPEG and TIFF. Many Tizen devices have a camera and use the EXIF format, and libEXIF can be used to read and write EXIF metainformation to and from image files.</td>
         </tr> 
 		<tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a></td>
          <td>Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.</td>
         </tr>
 		<tr>
-			<td><a href="../../../../org.tizen.native.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>
+			<td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTROLLER__MODULE.html">Media Controller</a><p><strong>(since 2.4)</strong></p></td>
+			<td>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>
@@ -800,15 +804,15 @@
         </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>
+			<td>Provides functions for editing the metadata of several popular audio formats.</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>
+			<td>Provides functionality for barcode 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>
+         <td>Renders efficiently multichannel 3D audio.</td>
         </tr> 
 		<tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a></td>
@@ -828,7 +832,7 @@
         </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>
+			<td>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>
@@ -856,7 +860,7 @@
         </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>
+         <td>Provides a client-side URL data transfer library supporting http, https, ftp, file URIs, and many other protocols. Allows applications to perform URL-related activities without a Web browser.</td>
         </tr> 
 		<tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a></td>
@@ -882,7 +886,7 @@
         </tr>
 		<tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENSSL__FRAMEWORK.html">OpenSSL</a></td>
-         <td>An open source library that provides basic cryptographic functions and various utility functions.</td>
+         <td>Provides an open source library that provides basic cryptographic functions and various utility functions.</td>
         </tr>
 		<tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info</a></td>
@@ -893,8 +897,8 @@
                 <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>
+                       <li>Guides: <a href="../../../../org.tizen.guides/html/native/social/social_guide_n.htm">Social</a></li>
+                       <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/social/social_tutorials_n.htm">Social</a></li></ul></td>
          <td><a href="../../../../org.tizen.native.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>        
@@ -911,7 +915,7 @@
         </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>
+			<td>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>
@@ -939,7 +943,7 @@
         </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>
+			<td>Provides functions for writing trace messages to the system trace buffer.</td>
 		</tr>                               
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a></td>
@@ -957,24 +961,28 @@
          <td>Obtains call, network, and SIM information.</td>
         </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>
+			<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>Provides functions 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.
+         <td rowspan="9"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
+		 <td rowspan="9">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>UI Practices: <a href="../../../../org.tizen.ui.practices/html/native/efl/guides_efl_n.htm">EFL</a> and <a href="../../../../org.tizen.ui.practices/html/native/dali/guides_dali_n.htm">DALi</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. This module also includes Cairo EvasGL APIs which have been designed to support hardware-accelerated rendering.</td>
+         <td>Provides 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__dali.html">DALi</a></td>
+         <td>Provides a cross-platform 3D UI Toolkit for embedded systems.</td>
+		</tr>			
+		<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>
+         <td>Provides a collection of libraries that are independent and can be built on top of each other to provide useful features that complement the existing environment.</td>
 		</tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a></td>
@@ -986,19 +994,19 @@
         </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>
+			<td>Provides functions 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>
+         <td>Provides 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__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>
+			<td>Provides functions for creating and displaying an 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>
+         <td>Provides functions for the graphics buffer.</td>
         </tr>
 
         <tr>
@@ -1009,34 +1017,30 @@
 			<li>Guides: <a href="../../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX</a></li>
 			<li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX</a></li></ul></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a></td>
-         <td>This API submodule provides functions to recognize speech.</td>
+         <td>Provides functions to recognize speech.</td>
         </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a></td>
-         <td>This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.</td>
+         <td>Provides functions for synthesizing voice from text and playing synthesized sound data.</td>
         </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>
+			<td>Provides functions for starting the IME application life-cycle, for interacting with the current UI state of the IME, and getting attributes and 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>
+			<td>Provides functions for registering commands and getting notifications when a 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.
+         <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
+		 <td rowspan="2">The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents.
 		 <p>Documentation:</p>
 			<ul>
 			<li>Guides: <a href="../../../../org.tizen.guides/html/native/web/web_guide_n.htm">Web</a></li>
 			<li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web</a></li></ul></td>
         <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__JSONGLIB__FRAMEWORK.html">Json-Glib</a></td>
-         <td>This library allows reading and parsing of JavaScript Object Notation (JSON) documents.</td>
-        </tr>
-				 <tr>
-         <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
-         <td>Library for using an open standard for secure authorization. This library enables users to securely log into an account on an application by using their logon credentials from another secondary account that they may have with another account provider or application. </td>
+         <td>Allows reading and parsing of JavaScript Object Notation (JSON) documents.</td>
         </tr>
 		<tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__WEBVIEW.html">WebView</a></td>
diff --git a/org.tizen.gettingstarted/html/native/first_app/first_app_n.htm b/org.tizen.gettingstarted/html/native/first_app/first_app_n.htm
index e57ad86..378d521 100644
--- a/org.tizen.gettingstarted/html/native/first_app/first_app_n.htm
+++ b/org.tizen.gettingstarted/html/native/first_app/first_app_n.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 <h1>Creating Your First Tizen Application</h1>
@@ -103,7 +103,7 @@ messages_add_address (sms_msg,&quot;01020157919&quot;, MESSAGE_RECIPIENT_TO);
 </li>
 
 <li>Creating the Application UI with EFL
-<p> The <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a> is the native graphical toolkit for Tizen.</p>
+<p> The <a href="../../../../org.tizen.ui.practices/html/native/efl/guides_efl_n.htm">EFL</a> is the native graphical toolkit for Tizen.</p>
 
 <p>To create the application UI:</p>
 <ol type="a">
@@ -321,7 +321,7 @@ create_gui(appdata_s *ad)
 <li>Exit the GUI
 
 <p>The <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function exits the Elementary; the prototype of the function is common to all callbacks given to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>. Put the <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function above the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. </p>
-<p>For more details on the callbacks, see the <a href="../../../../org.tizen.ui.guides/html/native/efl/event_types_n.htm#evas_smart_object">Evas Smart Object Events</a> guide.</p>
+<p>For more details on the callbacks, see the <a href="../../../../org.tizen.ui.practices/html/native/efl/event_types_n.htm#evas_smart_object">Evas Smart Object Events</a> guide.</p>
 <pre class="prettyprint">static void
 clicked_cb(void *user_data, Evas_Object *obj, void *event_info)
 {
diff --git a/org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm b/org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm
index f3d90d7..7e26c30 100644
--- a/org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -38,9 +38,8 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Native Application Development Process</h1>
 
-  <p>The following figure illustrates the process of developing a Tizen native application. Tizen provides the tools required to manage your application&#39;s life-cycle from product conception, through development and release, to end-of-life application retirement.</p> 
-  <p class="figure">Figure: Native application development process</p> 
-<p align="center"><img alt="Native application development process" src="../../images/app_dev_process_mn.png" /></p> 
+  <p>Tizen provides the tools required to manage your application&#39;s life-cycle from product conception, through development and release, to end-of-life application retirement.</p> 
+
   <p>To develop an application with Tizen:</p>
 
 <h2 id="planning" name="planning">Planning and Designing the Application</h2>
@@ -157,102 +156,98 @@
    </li> 
    <li><a href="building_app_n.htm">Build</a> and <a href="running_app_n.htm">run</a> the UI application. <p>The service application or shared library is built and run automatically while the UI application is built and run.</p> </li> 
   </ol> 
-<table class="note"> 
-    <tbody> 
-     <tr> 
-      <th class="note">Note</th> 
-     </tr> 
-     <tr> 
-      <td class="note">Tizen has limited combination policy of multi-project application for device usability. If you do not follow the policy, the submission of your applications to the Tizen Store might be rejected.
-	 </td> 
-     </tr> 
-	 <td class="note">For developer's convenience, some policies can be allowed in the SDK, for example, the STANDALONE service-application or STANDALOE widget-application can be made in the IDE, but these applications might be rejected in the Tizen Store.
-	 </td> 
-    </tbody> 
-   </table>
 
-<p>The following table shows the possible combination for native mulit-project:</p>
-<ul> 
-        <li>STANDALONE : If it is marked O, it means that it can be packaged alone or as the main application. If it is marked X, it means that it should not be packaged alone or as the main application.</li> 
-		<li>1 : Only one application can be packaged as the sub application.</li> 
-		<li>N : Multiple applications can be packaged as the sub applications.</li> 
-      </ul> 
+<table class="note">
+    <tbody>
+     <tr>
+      <th class="note">Note</th>
+     </tr>
+     <tr>
+      <td class="note">Tizen has limited a multi-project application combination policy for device usability. If you do not follow the policy, the submission of your application to the Tizen Store can be rejected.
+	  <p>For your convenience, some policies can be allowed in the SDK only. For example, you can make a STANDALONE service application or STANDALONE widget application in the IDE, but these applications can be rejected in the Tizen Store.</p>
+      </td>
+     </tr>
+    </tbody>
+   </table>  
+  
+<p>The following table shows the possible combinations for a native multi-project. <strong>1</strong> means that only one application can be packaged as a sub application, while <strong>M</strong> means that multiple applications can be packaged as sub applications. The <strong>STANDALONE</strong> column defines whether the application can be packaged alone as the main application.</p> 
 <table>
-<caption>Table: The possible combination</caption>
+<caption>Table: Combinations</caption>
 <tbody>
 <tr>
-<th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main Project</th> 
-       <th colspan="6" style="text-align:center;margin-left:auto;margin-right:auto;">Sub Project</th> 
-      </tr>
+		<th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main project</th> 
+		<th colspan="6" style="text-align:center;margin-left:auto;margin-right:auto;">Sub project</th> 
+</tr>
 <tr>
-<th style="text-align:center;margin-left:auto;margin-right:auto;">STANDALONE</th> 
+	<th style="text-align:center;margin-left:auto;margin-right:auto;">STANDALONE</th> 
        <th style="text-align:center;margin-left:auto;margin-right:auto;">UI</th> 
        <th style="text-align:center;margin-left:auto;margin-right:auto;">SERVICE</th> 
        <th style="text-align:center;margin-left:auto;margin-right:auto;">WATCH</th> 
        <th style="text-align:center;margin-left:auto;margin-right:auto;">WIDGET</th> 
-       <th style="text-align:center;margin-left:auto;margin-right:auto;">IME</th> 
+	   <th style="text-align:center;margin-left:auto;margin-right:auto;">IME</th>
       </tr>
 <tr>
 <td>UI</td> 
-       <td>O</td> 
-       <td>X</td> 
-       <td>N</td> 
-       <td>X</td> 
+       <td>Yes</td> 
+       <td>No</td> 
+       <td>M</td> 
+       <td>No</td> 
        <td>1</td> 
-       <td>X</td> 
+	   <td>No</td>
       </tr>
 <tr>
 <td>SERVICE</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
+       <td>No</td> 
+       <td>No</td> 
+       <td>No</td> 
+       <td>No</td> 
+       <td>No</td> 
+	   <td>No</td>
       </tr>
 <tr>
 <td>WATCH</td> 
-       <td>O</td> 
-       <td>X</td> 
-       <td>N</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
+       <td>Yes</td> 
+       <td>No</td> 
+       <td>M</td> 
+       <td>No</td> 
+       <td>No</td> 
+	   <td>No</td>
       </tr>
 <tr>
 <td>WIDGET</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
+       <td>No</td> 
+       <td>No</td> 
+       <td>No</td> 
+       <td>No</td> 
+       <td>No</td> 
+	   <td>No</td>
       </tr>
 <tr>
 <td>IME</td> 
-       <td>O</td> 
-       <td>N</td> 
-       <td>N</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
-      </tr>
-<tr>
+       <td>Yes</td> 
+       <td>M</td> 
+       <td>M</td> 
+       <td>No</td> 
+       <td>No</td> 
+	   <td>No</td>
+      </tr>	  
 </tbody>
+</table>  
+  
+<p>The following examples illustrate how to read the above table:</p>
+<ul>
+ <li>Main UI project alone: Allowed</li>
+ <li>Main UI project + 3 service projects packaged together: Allowed</li>
+ <li>Main UI project + 1 widget project packaged together: Allowed</li>
+ <li>Main UI project + 2 widget projects packaged together: Not allowed</li>
+ <li>Main service project alone: Not allowed</li>
+</ul>
 
-</table>
-
-<li>Example combination
-	<ul>
-	<li>Main UI Project : Allowed</li>
-	<li>Main UI Project + 3 Service Project : Allowed</li>
-	<li>Main UI Project + 1 Widget Project : Allowed</li>
-	<li>Main UI Project + 2 Widget Project : Not Allowed</li>
-	<li>Main SERVICE Project : Not Allowed</li>
-	</ul>
-</li>
-
-
+  
+  <p>The following figure illustrates the process of developing a Tizen native application.</p> 
+  <p class="figure">Figure: Native application development process</p> 
+<p align="center"><img alt="Native application development process" src="../../images/app_dev_process_mn.png" /></p>   
+  
 <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.gettingstarted/html/native/process/building_app_n.htm b/org.tizen.gettingstarted/html/native/process/building_app_n.htm
index e8f7ea7..2030a00 100644
--- a/org.tizen.gettingstarted/html/native/process/building_app_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/building_app_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
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 1a7971e..62a7686 100644
--- a/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm b/org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm
index 5e44037..69e8255 100644
--- a/org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -75,7 +75,7 @@
 
 <p>The following figure illustrates the default project folder structure for Tizen UI Builder applications.</p>
 <p class="figure">Figure: Default project folder structure</p>
-<p align="center"><img alt="Default project folder structure" src="../../images/nuib_soubp_project_explorer.png" width="372" height="629" /></p>
+<p align="center"><img alt="Default project folder structure" src="../../images/nuib_soubp_project_explorer.png" /></p>
 <p>The following table describes the content of the default project folders.</p>
 <table border="1">
  <caption>
@@ -152,40 +152,40 @@
 <h3 id="design" name="design">Using the WYSIWYG Editor View</h3>
 
 <p>You can configure the design area of the <strong>WYSIWYG Editor</strong> view by managing the display resolution, changing the orientation, zooming in and out, and scaling the design area to the available screen space.</p>
-<p>You can add a UI Component in the <strong>WYSIWYG Editor</strong> view and set its properties:</p>
+<p>You can add a UI component in the <strong>WYSIWYG Editor</strong> view and set its properties:</p>
 <ol>
-<li>In the <strong>Project Explorer</strong> view, double-click the <strong>layout.tuml</strong> file to which you want to add UI Components.
+<li>In the <strong>Project Explorer</strong> view, double-click the <strong>layout.tuml</strong> file to which you want to add UI components.
 <p>A design area is displayed in the <strong>WYSIWYG Editor </strong>view.</p>
 </li>
-<li>Drag the UI Component from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view.
-<p align="center"><img alt="Designing page layout" src="../../images/nuib_cadvl_wysiwyg_editor.png" width="696" height="688" /></p>
+<li>Drag the UI component from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view.
+<p align="center"><img alt="Designing page layout" src="../../images/nuib_cadvl_wysiwyg_editor.png" /></p>
 </li>
-<li>Select the UI Component in the <strong>WYSIWYG Editor</strong> or <strong>Outline</strong> view.</li>
-<li>In the <strong>Properties</strong> view, set the UI Component properties.</li>
+<li>Select the UI component in the <strong>WYSIWYG Editor</strong> or <strong>Outline</strong> view.</li>
+<li>In the <strong>Properties</strong> view, set the UI component properties.</li>
 </ol>
-<p>You can move the UI Components around in the <strong>WYSIWYG Editor</strong>.</p>
+<p>You can move the UI components around in the <strong>WYSIWYG Editor</strong>.</p>
 
-<h3 id="widget" name="widget">Placing UI Components</h3>
-<p>You can place a variety of UI Components in the <strong>WYSIWYG Editor </strong>view.</p>
-<p>To place a UI Component, drag the UI Component from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view. The next empty position in the <strong>WYSIWYG Editor</strong> view is marked with a dotted rectangle.</p>
-<p>You can add child UI Components in a container, such as a Table. For example, you can add a set of Image UI Components in a Table container UI Component. When adding the Image UI Component, some areas in the Table container change to the blue color, which implies that the UI Component can be placed.</p>
+<h3 id="component" name="component">Placing UI Components</h3>
+<p>You can place a variety of UI components in the <strong>WYSIWYG Editor </strong>view.</p>
+<p>To place a UI component, drag the UI component from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view. The next empty position in the <strong>WYSIWYG Editor</strong> view is marked with a dotted rectangle.</p>
+<p>You can add child UI components in a container, such as a Table. For example, you can add a set of Image components in a Table container component. When adding the Image component, some areas in the Table container change to the blue color, which implies that the UI component can be placed.</p>
 
   
   
 <h2 name="event" id="event">Handling Events and Testing</h2> 
- <p>You can select a UI Component from the design area of the <strong>WYSIWYG Editor</strong> view and add event handlers to it.</p>
-<p>To add an event handler to a selected UI Component:</p>
+ <p>You can select a UI component from the design area of the <strong>WYSIWYG Editor</strong> view and add event handlers to it.</p>
+<p>To add an event handler to a selected UI component:</p>
 <ol>
 <li>In the <strong>Properties</strong> view, select the <strong>Event</strong> sub-tab.</li>
 <li>In the list, select the event to which you want to add an event handler.</li>
 <li>If you want to add a <strong>click event</strong>, click the <strong>+</strong> button on the right side of the <strong>clicked</strong> label.</li>
-<li>Click the right arrow on the right side of Combo.<br />
-	The UI Builder generates a skeleton code for the event handler, and the event handler for the selected event is displayed.</li>
+<li>Click the right arrow on the right side of Combo.
+	<p>The UI Builder generates a skeleton code for the event handler, and the event handler for the selected event is displayed.</p></li>
 <li>Enter the application-specific event handler-related code.</li>
-<li>Press <strong>Ctrl+s</strong>.<br />
-	The Tizen native application is rendered as it is on the Emulator (target).</li>
+<li>Press <strong>Ctrl+s</strong>.
+	<p>The Tizen native application is rendered as it is on the Emulator (target).</p></li>
 </ol>
-<p>All UI Components have their own unique ID in a specific view, and you can access the UI Components in the event handler code using the ID. You can view and edit the UI Component ID in the <strong>Outline</strong> view.</p>
+<p>All UI components have their own unique ID in a specific view, and you can access the UI components in the event handler code using the ID. You can view and edit the UI component ID in the <strong>Outline</strong> view.</p>
 <p>For example, if your view (with the <span style="font-family: Courier New,Courier,monospace">view1</span> ID) has a button (with the <span style="font-family: Courier New,Courier,monospace">button1</span> ID), you can create an event handler for the button tap that changes the heading text:</p>
 <pre class="prettyprint">
 void view1_button1_onclicked(uib_view1_view_context *vc, Evas_object *obj, void *event_info) 
@@ -224,4 +224,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script> 
   <!--end-->  
  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/native/process/performance_n.htm b/org.tizen.gettingstarted/html/native/process/performance_n.htm
index d2fd954..a269cef 100644
--- a/org.tizen.gettingstarted/html/native/process/performance_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/performance_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.gettingstarted/html/native/process/running_app_n.htm b/org.tizen.gettingstarted/html/native/process/running_app_n.htm
index 609424f..ff16549 100644
--- a/org.tizen.gettingstarted/html/native/process/running_app_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/running_app_n.htm
@@ -22,7 +22,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 <h1>Running Applications</h1> 
   <p>You can run Tizen native applications on the <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm">Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p> 
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 d97b517..2d25616 100644
--- a/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -200,13 +200,13 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <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. Hence, the auto-restart or on-boot attributes used on the lower than 2.4 API version package shall ignored on the devices with Tizen platform version 2.4 or higher.</td>
-    </tr> 
+	<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. Because of this, if they are used in a lower API version package than 2.4, they are ignored in the devices with the Tizen platform version 2.4 or higher.</td>
+     </tr>
    </tbody> 
   </table>  	
 </li> 
 <li>Define application control.
-<p>You can <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#export_appcontrol">export the application control functionality</a> of your application. To define an application control used to access the functionality of your application, click <strong>Add</strong> in the <strong>Application Control</strong> section of the <strong>Advanced</strong> tab of the manifest editor.</p> 
+<p>You can <a href="../../../../org.tizen.guides/html/native/app/appcontrol_n.htm#export_appcontrol">export the application control functionality</a> of your application. To define an application control used to access the functionality of your application, click <strong>Add</strong> in the <strong>Application Control</strong> section of the <strong>Advanced</strong> tab of the manifest editor.</p> 
 <p>Each application control can have multiple operation, mime type, and uri attributes.</p> </li>  
   <li>Add an account (in mobile applications only).
    <p>Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides the user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.</p>
diff --git a/org.tizen.gettingstarted/html/preface.htm b/org.tizen.gettingstarted/html/preface.htm
index 3335898..43ecd5c 100644
--- a/org.tizen.gettingstarted/html/preface.htm
+++ b/org.tizen.gettingstarted/html/preface.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/>  <img alt="Wearable native" src="images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="images/mobile_s_wn.png"/> <img alt="Wearable" src="images/wearable_s_wn.png"/></p>
 	</div>
 	
 <h1>Preface</h1>
@@ -34,7 +34,7 @@
 
 <p>The Tizen platform provides various profiles for application development: the mobile and wearable Web profiles can be used to develop Web applications for mobile and wearable devices, while the mobile and wearable native profile can be used to develop native applications for mobile and wearable devices.</p>
 
-<p>When using the Tizen documentation, look for the profile icons on the upper right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. &quot;N&quot; in the icon stands for the native application profiles and &quot;W&quot; stands for the Web application profiles.</p>
+<p>When using the Tizen documentation, look for the profile icons on the upper right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. &quot;W&quot; stands for the Web application profiles and &quot;N&quot; in the icon stands for the native application profiles.</p>
 
 <table border="1"> 
    <caption>
@@ -51,20 +51,28 @@
      <th>Icon</th> 
     </tr>
 	<tr> 
+     <td>Mobile Web and native</td> 
+     <td><img alt="Mobile" src="images/mobile_s_wn.png"/></td> 
+    </tr>	
+	<tr> 
+     <td>Wearable Web and native</td> 
+     <td><img alt="Wearable" src="images/wearable_s_wn.png"/></td> 
+    </tr>	
+	<tr> 
      <td>Mobile Web</td> 
-     <td><img alt="Mobile Web" src="images/mw_icon.png"/> or <img alt="Optional Mobile Web" src="images/mw_icon_optional.png"/></td> 
+     <td><img alt="Mobile Web" src="images/mobile_s_w.png"/> or <img alt="Optional Mobile Web" src="images/mobile_s_w_optional.png"/></td> 
     </tr>
 	<tr> 
      <td>Wearable Web</td> 
-     <td><img alt="Wearable Web" src="images/ww_icon.png"/> or <img alt="Optional Wearable Web" src="images/ww_icon_optional.png"/></td> 
+     <td><img alt="Wearable Web" src="images/wearable_s_w.png"/> or <img alt="Optional Wearable Web" src="images/wearable_s_w_optional.png"/></td> 
     </tr>
 	<tr> 
-     <td>Mobile Native</td> 
-     <td><img alt="Mobile Native" src="images/mn_icon.png"/></td> 
+     <td>Mobile native</td> 
+     <td><img alt="Mobile Native" src="images/mobile_s_n.png"/></td> 
     </tr>
 	<tr> 
-     <td>Wearable Native</td> 
-     <td><img alt="Wearable Native" src="images/wn_icon.png"/></td> 
+     <td>Wearable native</td> 
+     <td><img alt="Wearable Native" src="images/wearable_s_n.png"/></td> 
     </tr>	
    </tbody> 
   </table>
@@ -75,7 +83,7 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. The gray profile icon (as shown in the table above) refers to an optional API.
+     <td class="note">In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. The fully gray profile icon (as shown in the table above) refers to an optional API.
 <p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices.</p></td> 
     </tr> 
    </tbody> 
@@ -90,10 +98,10 @@
 
 <ul>
 	<li><a href="cover_page.htm">Getting Started</a>
-	<p>The getting started with Tizen documentation provides overall information you need to become familiar with Tizen programming and application model. The documentation also walks you through creating your first Tizen application.</p>
+	<p>The getting started documentation provides overall information you need to become familiar with Tizen programming and application model. The documentation also walks you through creating your first Tizen application.</p>
 	</li>
-	<li><a href="../../org.tizen.ui.guides/html/cover_page.htm">UI Guides</a>
-	<p>The Tizen UI guides instruct you in planning and developing a user interface for your application. The guides introduce all the available UI toolkit frameworks.</p>
+	<li><a href="../../org.tizen.ui.practices/html/cover_page.htm">UI Practices</a>
+	<p>The Tizen UI practices instruct you in planning and developing a user interface for your application. The guides introduce all the available UI toolkit frameworks.</p>
 	</li>
 	<li><a href="../../org.tizen.tutorials/html/cover_page.htm">Tutorials</a>
 	<p>The Tizen tutorials teach you how to incorporate Tizen features into your application. The tutorials contain detailed code examples to help you write the required code in practice.</p>
diff --git a/org.tizen.gettingstarted/html/tizen_websites.htm b/org.tizen.gettingstarted/html/tizen_websites.htm
index bc5f83a..f6b517b 100644
--- a/org.tizen.gettingstarted/html/tizen_websites.htm
+++ b/org.tizen.gettingstarted/html/tizen_websites.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/> <img alt="Wearable native" src="images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="images/mobile_s_wn.png"/> <img alt="Wearable" src="images/wearable_s_wn.png"/></p>
 	</div>
 
 <h1>Tizen Web Sites</h1>
diff --git a/org.tizen.gettingstarted/html/web/app_model/application_model_w.htm b/org.tizen.gettingstarted/html/web/app_model/application_model_w.htm
index af2c0d9..d94864e 100644
--- a/org.tizen.gettingstarted/html/web/app_model/application_model_w.htm
+++ b/org.tizen.gettingstarted/html/web/app_model/application_model_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.gettingstarted/html/web/cover_page_w.htm b/org.tizen.gettingstarted/html/web/cover_page_w.htm
index 5d20f15..4153506 100644
--- a/org.tizen.gettingstarted/html/web/cover_page_w.htm
+++ b/org.tizen.gettingstarted/html/web/cover_page_w.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 <h1>Introduction to Web Applications</h1>
diff --git a/org.tizen.gettingstarted/html/web/details/app_filtering_w.htm b/org.tizen.gettingstarted/html/web/details/app_filtering_w.htm
index 716f0fd..f977bf8 100644
--- a/org.tizen.gettingstarted/html/web/details/app_filtering_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/app_filtering_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -62,64 +62,76 @@
 	<tr>
 			<th>Feature key</th>
 			<th>Description</th>
+			<th>Platform version</th>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
 			<td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
 			<p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
 			</td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td> 
 			<td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
 			</td>
+			<td>2.2.1</td>
 		</tr>	
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
 			<td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
 			</td>
+			<td>2.3</td>
 		</tr>		
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
 			<td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
 			<td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.3</td>
 		</tr>		
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
 			<td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
 			<td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
 			<td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
 			<td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
 			<td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
 			<td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
 			<p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 	</tbody>
  </table>
@@ -130,18 +142,21 @@
 	<tr>
 			<th>Feature key</th>
 			<th>Description</th>
+			<th>Platform version</th>
 		</tr>
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
 			<td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
 			<p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
 			</td>
+			<td>2.2.1</td>
 		</tr>
 
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
 			<td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+			<td>2.3</td>
 			</td>
 		</tr>		
 
@@ -149,12 +164,14 @@
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
 			<td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
 			<p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.3</td>
 		</tr>		
 	
 		<tr>
 			<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
 			<td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
 			<p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored.  For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no  screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+			<td>2.2.1</td>
 		</tr>
 	</tbody>
  </table>
@@ -192,111 +209,158 @@
 <tr>
      <th>Feature key</th>
      <th>Description</th>
+	 <th>Platform version</th>
     </tr>
 
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/datasync</span></td>
      <td>Specify this key, if the application requires the DataSync feature.</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td>
      <td>Specify this key, if the application requires an FM radio.</td>
+	 <td>2.2.1</td>
 	</tr>
  <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
     <td>Specify this key, if the application requires any of the Human Activity Monitor features.</td>
+	<td>2.3</td>
     </tr>
 <tr>	
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
      <td>Specify this key, if the application requires the location tracking with a position batch information feature for using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">Human Activity Monitor</a> (GPS Type) API.</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
      <td>Specify this key, if the application requires the Bluetooth feature.</td>
+	 <td>2.2.1</td>
 	</tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
      <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td>
+	 <td>2.3</td>
 	 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
      <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
      <td>Specify this key, if the application requires the Bluetooth Low Energy feature (BLE).</td>
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
      <td>Specify this key, if the application requires the NFC card emulation feature.</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
      <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
+	 <td>2.3.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td>
      <td>Specify this key, if the application requires the NFC P2P feature.</td>
+	 <td>2.3.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td>
      <td>Specify this key, if the application requires the NFC tag feature.</td>
+	 <td>2.3.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
      <td>Specify this key, if the application requires the network-based push service.</td>
+	 <td>2.2.1</td>
 	</tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
      <td>Specify this key, if the application requires the secure element feature.</td>
+	 <td>2.2.1</td>
 	 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
      <td>Specify this key, if the application requires the MMS feature.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms</span></td> 
+     <td>Specify this key, if the application requires the SMS feature.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
      <td>Specify this key, if the application requires a barometer sensor for using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor</a> (Pressure Type) API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
      <td>Specify this key, if the application requires a heart rate monitor sensor for using the Human Activity Monitor (HRM Type) API.</td>
+	 <td>2.3</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>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
+	 <td>2.3.1</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>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
+	 <td>2.3.1</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>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
+	 <td>2.3.1</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
      <td>Specify this key, if the application requires a magnetic sensor for using the Sensor (MAGNETIC Type) API.</td>
+	<td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
      <td>Specify this key, if the application requires a pedometer sensor for using the Human Activity Monitor (PEDOMETER Type) API.</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
      <td>Specify this key, if the application requires a photometer sensor for using the Sensor (LIGHT Type) API.</td>
+	 <td>2.2.1</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
      <td>Specify this key, if the application requires a proximity sensor for using the Sensor (PROXIMITY Type) API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
      <td>Specify this key, if the application requires a ultraviolet sensor for using the Sensor (ULTRAVIOLET Type) API.</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
      <td>Specify this key, if the application requires a wrist up sensor for using the Human Activity Monitor (WRIST_UP Type) API.</td>
+	 <td>2.3</td>
     </tr>
 </tbody>
 </table>
@@ -307,35 +371,59 @@
 <tr>
      <th>Feature key</th>
      <th>Description</th>
+	 <th>Platform version</th>
     </tr>
 
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
      <td>Specify this key, if the application requires any kind of a camera for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture</a> API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
      <td>Specify this key, if the application requires the Global Positioning System (GPS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">GeoLocation</a> API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
      <td>Specify this key, if the application requires a microphone for using the getUserMedia or HTML Media Capture API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>	
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
      <td>Specify this key, if the application requires an acceleration sensor for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification</a> API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
      <td>Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
      <td>Specify this key, if the application requires a magnetic sensor for using the DeviceOrientation Event Specification or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation</a> API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
      <td>Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webspeech">Web Speech</a> API.</td>
+	 <td>2.2.1</td>
+    </tr>
+</tbody>
+</table>
+
+<table border="1" id="features">
+<caption>Table: Available requirements for mobile Web Runtime</caption>
+   <tbody>
+<tr>
+     <th>Feature key</th>
+     <th>Description</th>
+	 <th>Platform version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td> 
+     <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 </tbody>
 </table>
@@ -347,10 +435,12 @@
 <tr>
      <th>Feature key</th>
      <th>Description</th>
+	 <th>Platform version</th>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/download</span></td>
      <td>Specify this key, if the application requires the network connection to access the Internet for using the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">Download</a> API.</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
@@ -363,94 +453,137 @@
         <li>GPS: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></li>
 		</ul>
      </td>
+	 <td>2.3</td>
    </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
      <td>Specify this key, if the application requires the location tracking with a position batch information feature.</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
      <td>Specify this key, if the application requires the Bluetooth feature.</td>
+	 <td>2.2.1</td>
 	</tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
      <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP) feature for using the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key</a> API.</td>
+	 <td>2.3</td>
 	 </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
      <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
      <td>Specify this key, if the application requires the Bluetooth Low Energy feature (BLE).</td>
+	 <td>2.3</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
      <td>Specify this key, if the application requires the NFC card emulation feature.</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
      <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
+	 <td>2.3.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td>
      <td>Specify this key, if the application requires the NFC P2P feature.</td>
+	 <td>2.3.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td>
      <td>Specify this key, if the application requires the NFC tag feature.</td>
+	 <td>2.3.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
      <td>Specify this key, if the application requires the network-based push service.</td>
+	 <td>2.2.1</td>
 	</tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
      <td>Specify this key, if the application requires the secure element feature.</td>
+	 <td>2.2.1</td>
 	 </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms</span></td> 
+     <td>Specify this key, if the application requires the SMS feature.</td> 
+	 <td>2.4</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature (for example, the Download API).</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
      <td>Specify this key, if the application requires a barometer sensor.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
      <td>Specify this key, if the application requires a heart rate monitor sensor.</td>
+	 <td>2.3</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>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
+	 <td>2.3.1</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>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
+	 <td>2.3.1</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>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
+	 <td>2.3.1</td>
+    </tr>	
+<tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
      <td>Specify this key, if the application requires a magnetic sensor.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
      <td>Specify this key, if the application requires a pedometer sensor.</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
      <td>Specify this key, if the application requires a photometer sensor.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
      <td>Specify this key, if the application requires a proximity sensor.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
      <td>Specify this key, if the application requires an ultraviolet sensor.</td>
+	 <td>2.3</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
      <td>Specify this key, if the application requires a wrist up sensor.</td>
+	 <td>2.3</td>
     </tr>
 </tbody>
 </table>
@@ -461,47 +594,58 @@
 <tr>
      <th>Feature key</th>
      <th>Description</th>
+	 <th>Platform version</th>
     </tr>
 
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
      <td>Specify this key, if the application requires any kind of a camera for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia</a> API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.rotating_bezel</span></td>
      <td>Specify this key, if the application requires rotating bezel input.</td>
+	 <td>2.3.1</td>
     </tr>	
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
      <td>Specify this key, if the application requires the Global Positioning System (GPS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">GeoLocation</a> API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
      <td>Specify this key, if the application requires a microphone for using the getUserMedia API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></td>
      <td>Specify this key, if the application requires Internet access for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket API</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1</a>, or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> API.</td>
+	 <td>2.3.1</td>
     </tr>	
 <tr>	
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.circle</span></td>
      <td>Specify this key, if the application requires a circle-shaped screen.</td>
+	 <td>2.3.1</td>
     </tr>
 <tr>	
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.rectangle</span></td>
      <td>Specify this key, if the application requires a rectangle-shaped screen.</td>
+	 <td>2.3.1</td>
     </tr>	
 <tr>	
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
      <td>Specify this key, if the application requires an acceleration sensor for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#orientation">DeviceOrientation Event Specification</a> API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
      <td>Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.</td>
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
      <td>Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webspeech">Web Speech</a> API.</td>
+	 <td>2.2.1</td>
     </tr>
 </tbody>
 </table>
@@ -512,18 +656,22 @@
 <tr>
      <th>Feature key</th>
      <th>Description</th>
+	 <th>Platform version</th>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.audio_recording</span></td>
      <td>Specify this key, if the application requires the audio recording functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Audio Recording) API.</td>
+	 <td>2.3</td>
    </tr>  
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.image_capture</span></td>
      <td>Specify this key, if the application requires the image capture functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Image Recording) API.</td>
+	 <td>2.3</td>
    </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.video_recording</span></td>
      <td>Specify this key, if the application requires the video recording functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Video Recording) API.</td>
+	 <td>2.3</td>
    </tr>
 </tbody>
 </table>
@@ -534,10 +682,17 @@
 <tr>
      <th>Feature key</th>
      <th>Description</th>
+	 <th>Platform version</th>
+    </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td> 
+     <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td> 
+	 <td>2.2.1</td>
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/web.service</span></td>
      <td>Specify this key, if the application requires the Web service application feature.</td>
+	 <td>2.3</td>
    </tr>
 </tbody>
 </table>
diff --git a/org.tizen.gettingstarted/html/web/details/details_w.htm b/org.tizen.gettingstarted/html/web/details/details_w.htm
index de7b12f..9e3b280 100644
--- a/org.tizen.gettingstarted/html/web/details/details_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/details_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.gettingstarted/html/web/details/event_handling_w.htm b/org.tizen.gettingstarted/html/web/details/event_handling_w.htm
index 6d3e54b..aef5a8e 100644
--- a/org.tizen.gettingstarted/html/web/details/event_handling_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/event_handling_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+        <p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -35,16 +35,7 @@
 
 <p>The Tizen platform supports event handling for user interactions. To provide a full user experience for your application users, you must handle various events in your application.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in wearable applications only.</p>
 
 <h2 id="rotary" name="rotary">Rotary Events</h2>
   
@@ -75,18 +66,18 @@
 <pre class="prettyprint">
 document.addEventListener(&quot;rotarydetent&quot;, function(ev) 
 {
-&nbsp;&nbsp;&nbsp;/* Get direction value from event */
+&nbsp;&nbsp;&nbsp;/* Get the direction value from the event */
 &nbsp;&nbsp;&nbsp;var direction = ev.detail.direction;
 &nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;if (direction == "CW")
+&nbsp;&nbsp;&nbsp;if (direction == &quot;CW&quot;)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add behavior for clockwise rotation */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("clockwise");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;clockwise&quot;);
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (direction == "CCW")
+&nbsp;&nbsp;&nbsp;else if (direction == &quot;CCW&quot;)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add behavior for counter-clockwise rotation */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("counter-clockwise");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;counter-clockwise&quot;);
 &nbsp;&nbsp;&nbsp;}
 });
 </pre>
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 4eaf884..7366d1c 100644
--- a/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm
@@ -25,7 +25,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 <h1>Security and API Privileges</h1>
@@ -91,34 +91,38 @@ 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</td>
-    <td>public</td>
-    <td>Using unrestricted Bluetooth services</td>
-    <td>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</td>
+	<td class="key">http://tizen.org/privilege/bluetooth</td>
+	<td>public</td>
+	<td>Using unrestricted Bluetooth services</td>
+	<td>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</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. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+	<td>The application can change Bluetooth settings, such as turning Bluetooth on or off and setting the device name. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+	</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. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+	<td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+	</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. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+	<td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+	</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. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+	<td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+	</td>
 </tr>
 <tr class="platform-level">
 	<td class="key">http://tizen.org/privilege/bluetoothmanager</td>
@@ -413,7 +417,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <tr>
 	<td class="key">http://tizen.org/privilege/notification</td>
 	<td>public</td>
-	<td>The application can  display simple notifications using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webnoti">Web Notifications</a> API.
+	<td>The application can display simple notifications using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webnoti">Web Notifications</a> API.
 	<p><strong>Privilege behavior:</strong></p>
 	<ul><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used.</li>
 <li>In the remote domain, pop-up user prompt is used.</li></ul></td>
@@ -496,25 +500,29 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 	<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. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+	<td>The application can change Bluetooth settings, such as turning Bluetooth on or off and setting the device name. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+	</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. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+	<td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+	</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. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+	<td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+	 </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. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.</td>
+	<td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data. <strong>Deprecated since 2.4</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/bluetooth</span> instead.
+	</td>
 </tr>
 <tr class="platform-level">
 	<td class="key">http://tizen.org/privilege/bluetoothmanager</td>
diff --git a/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm b/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm
index 1baf132..38aaa19 100644
--- a/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 <h1>Tizen APIs</h1>
@@ -153,7 +153,7 @@
 	 <p>You can create and manage various kinds of UI components.</p></td> 
      <td> 
       <ul> 
-       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU</a></li> 
+       <li>UI Practices: <a href="../../../../org.tizen.ui.practices/html/web/tau/guides_tau_w.htm">TAU</a></li> 
        <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Advanced UI Framework</a></li>	   
       </ul></td> 
     </tr>	
@@ -270,7 +270,7 @@
 	 <p>You can create and manage various kinds of UI components.</p></td> 
      <td> 
       <ul> 
-       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU</a></li> 
+       <li>UI Practices: <a href="../../../../org.tizen.ui.practices/html/web/tau/guides_tau_w.htm">TAU</a></li> 
 	   <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Advanced UI Framework</a></li> 	   
       </ul></td> 
     </tr>	
@@ -298,7 +298,7 @@
      <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible and multi-column layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td> 
      <td> 
       <ul> 
-       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm">W3C</a></li>  
+       <li>UI Practices: <a href="../../../../org.tizen.ui.practices/html/web/w3c/guides_w3c_w.htm">W3C</a></li>  
        <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles</a></li> 
       </ul></td> 
     </tr>
@@ -367,7 +367,7 @@
      <td>These APIs enable you to copy content and paste it in an editable area, create and manage draggable elements, and implement drag events.</td> 
      <td> 
       <ul> 
-       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm">W3C</a></li>  
+       <li>UI Practices: <a href="../../../../org.tizen.ui.practices/html/web/w3c/guides_w3c_w.htm">W3C</a></li>  
        <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI</a></li> 
       </ul></td> 
     </tr>
@@ -426,7 +426,7 @@
      <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td> 
      <td> 
       <ul> 
-       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm">W3C</a></li>  
+       <li>UI Practices: <a href="../../../../org.tizen.ui.practices/html/web/w3c/guides_w3c_w.htm">W3C</a></li>  
        <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles</a></li> 
       </ul></td> 
     </tr>
diff --git a/org.tizen.gettingstarted/html/web/details/web_runtime_w.htm b/org.tizen.gettingstarted/html/web/details/web_runtime_w.htm
index 7d814f0..b723dd7 100644
--- a/org.tizen.gettingstarted/html/web/details/web_runtime_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/web_runtime_w.htm
@@ -19,7 +19,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm b/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm
index 439bab2..ea37f77 100644
--- a/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm
+++ b/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm b/org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm
index 89e18da..ec3f644 100644
--- a/org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -43,9 +43,8 @@
 
 <h1>Web Application Development Process</h1>
 
-  <p>The following figure illustrates the process of developing a Tizen Web application. Tizen provides the tools required to manage your application&#39;s life-cycle from product conception, through development and release, to end-of-life application retirement.</p> 
-  <p class="figure">Figure: Web application development process</p> 
-  <p align="center"><img alt="Web application development process" src="../../images/app_dev_process_mw.png" /></p> 
+  <p>Tizen provides the tools required to manage your application&#39;s life-cycle from product conception, through development and release, to end-of-life application retirement.</p> 
+
   <p>To develop an application with Tizen:</p> 
   
 <h2 id="plan" name="plan">Planning and Designing the Application</h2>
@@ -196,31 +195,26 @@
    <p>To modify the build configuration of the service application, see <a href="../../native/process/app_dev_process_n.htm#build">Building the Application</a>.</p></li>
    </ol>
 
-<table class="note"> 
-    <tbody> 
-     <tr> 
-      <th class="note">Note</th> 
-     </tr> 
-     <tr> 
-      <td class="note">Tizen has limited combination policy of multi-project application for device usability. If you do not follow the policy, the submission of your applications to the Tizen Store might be rejected.
-	 </td> 
-     </tr> 
-    </tbody> 
-   </table>
-
-
-<p>The following table shows the possible combination for hybrid mulit-project:</p>
-<ul> 
-        <li>1 : Only one application can be packaged as the sub application.</li> 
-        <li>N : Multiple applications can be packaged as the sub applications.</li> 
-      </ul> 
+<table class="note">
+    <tbody>
+     <tr>
+      <th class="note">Note</th>
+     </tr>
+     <tr>
+      <td class="note">Tizen has limited a multi-project application combination policy for device usability. If you do not follow the policy, the submission of your application to the Tizen Store can be rejected.
+      </td>
+     </tr>
+    </tbody>
+   </table>   
+   
+<p>The following table shows the possible combinations for a hybrid multi-project. <strong>M</strong> means that multiple applications can be packaged as sub applications.</p>
 
 <table>
-<caption>Table: The possible combination</caption>
+<caption>Table: Combinations</caption>
 <tbody>
 <tr>
-<th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main Project</th> 
-       <th colspan="4" style="text-align:center;margin-left:auto;margin-right:auto;">Sub Project</th> 
+<th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main project</th> 
+       <th colspan="4" style="text-align:center;margin-left:auto;margin-right:auto;">Sub project</th> 
       </tr>
 <tr>
 <th style="text-align:center;margin-left:auto;margin-right:auto;">UI</th> 
@@ -230,21 +224,19 @@
       </tr>
 <tr>
 <td>WEB UI</td> 
-       <td>X</td> 
-       <td>N</td> 
-       <td>X</td> 
-       <td>X</td> 
+       <td>No</td> 
+       <td>M</td> 
+       <td>No</td> 
+       <td>No</td> 
       </tr>
 <tr>
 <td>WEB SERVICE</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
+       <td>No</td> 
+       <td>No</td> 
+       <td>No</td> 
+       <td>No</td> 
       </tr>
-<tr>
 </tbody>
-
 </table>
 
    <p>With a hybrid application package, you can register the included applications in the Tizen Store and install, upgrade, and uninstall them using the single hybrid package. When a hybrid application package is installed, the Web application is installed by the Web installer, followed by the native installer installing native service applications.</p>
@@ -253,32 +245,25 @@
   <p>The Web application and native service applications within a hybrid application package share the same package ID and data folder. Sharing application data between them is easy. Many useful inter-application APIs, such as <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">AppControl</a>, can be used in a hybrid application package.</p>
    <p>For more information on hybrid applications and their package structure, see <a href="https://developer.tizen.org/downloads/sample-applications/sample-mobile-applications" target="blank">HybridWebApp and HybridServiceApp</a>, and <a href="../app_model/application_model_w.htm#hap">Hybrid Application Package</a>.</p> 
 
+   	<h3 id="hybrid_web">Packaging Web Applications</h3> 
 
-  <h3 id="hybrid">Packaging Web Applications</h3> 
-  
-  <p>A web application package combines a Web application and 1 or more web service applications.</p>
-
-<table class="note"> 
-    <tbody> 
-     <tr> 
-      <th class="note">Note</th> 
-     </tr> 
-     <tr> 
-      <td class="note">Tizen has limited combination policy of multi-project application for device usability. If you do not follow the policy, the submission of your applications to the Tizen Store might be rejected.
-	 </td> 
-     </tr> 
-    </tbody> 
-   </table>
-
+	<p>A Web application package combines a Web application and 1 or more Web service applications.</p>
 
-<p>The following table shows the possible combination for web mulit-project:</p>
-<ul> 
-        <li>STANDALONE : If it is marked O, it means that it can be packaged alone or as the main application. If it is marked X, it means that it should not be packaged alone or as the main application.</li> 
-        <li>1 : Only one application can be packaged as the sub application.</li> 
-        <li>N : Multiple applications can be packaged as the sub applications.</li> 
-      </ul> 
+<table class="note">
+    <tbody>
+     <tr>
+      <th class="note">Note</th>
+     </tr>
+     <tr>
+      <td class="note">Tizen has limited a multi-project application combination policy for device usability. If you do not follow the policy, the submission of your application to the Tizen Store can be rejected.
+      </td>
+     </tr>
+    </tbody>
+   </table>
+	
+<p>The following table shows the possible combinations for a Web multi-project. <strong>M</strong> means that multiple applications can be packaged as sub applications. The <strong>STANDALONE</strong> column defines whether the application can be packaged alone as the main application.</p>
 <table>
-<caption>Table: The possible combination</caption>
+<caption>Table: Combinations</caption>
 <tbody>
 <tr>
 <th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main Project</th> 
@@ -291,21 +276,20 @@
       </tr>
 <tr>
 <td>WEB UI</td> 
-       <td>O</td> 
-       <td>X</td> 
-       <td>N</td> 
+       <td>Yes</td> 
+       <td>No</td> 
+       <td>M</td> 
       </tr>
 <tr>
 <td>WEB SERVICE</td> 
-       <td>X</td> 
-       <td>X</td> 
-       <td>X</td> 
+       <td>No</td> 
+       <td>No</td> 
+       <td>No</td> 
       </tr>
-<tr>
 </tbody>
-
 </table>
-
+   
+   
 <h2 id="cert" name="cert" >Certifying and Publishing the Application</h2>
 
 <p>After you have packaged your application, you are ready to certify and publish your application.</p> 
@@ -336,6 +320,9 @@
   
   <p>Once your application has reached the end of its life-cycle, you can remove it from the Tizen Store or Samsung Galaxy Apps Store.</p> 
 
+  <p>The following figure illustrates the process of developing a Tizen Web application.</p> 
+  <p class="figure">Figure: Web application development process</p> 
+  <p align="center"><img alt="Web application development process" src="../../images/app_dev_process_mw.png" /></p> 
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
@@ -360,4 +347,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script> 
   <!--end-->  
  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/web/process/coding_app_w.htm b/org.tizen.gettingstarted/html/web/process/coding_app_w.htm
index 882a048..4e11c12 100644
--- a/org.tizen.gettingstarted/html/web/process/coding_app_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/coding_app_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
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 619a90a..25bcd25 100644
--- a/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
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 fc77dd6..8d9b8a4 100644
--- a/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -43,16 +43,7 @@
 
    <h2 name="emulator" id="emulator">Running Web Applications on the Emulator</h2> 
   <p>You can debug Tizen Web applications on the <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm">Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Running an Emulator image requires a minimum free disk space of 20 MB. The image can occupy up to 10 GB of disk space.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+ 
   <p>To launch the Emulator, do one of the following:</p> 
   <ul> 
    <li>Use the <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm#manager">Emulator Manager</a>: 
@@ -71,6 +62,17 @@
   </ul> 
   <p>To stop the Emulator, right-click the Emulator and click <strong>Close</strong>.</p>
   
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Running an Emulator image requires a minimum free disk space of 20 MB. The image can occupy up to 10 GB of disk space.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
    <h2 name="target" id="target">Running Web Applications on a Target Device</h2> 
   <p>You can run Tizen Web applications on a target device using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p> 
   <p>To run your application on the target device:</p> 
diff --git a/org.tizen.gettingstarted/html/web/process/setting_properties_w.htm b/org.tizen.gettingstarted/html/web/process/setting_properties_w.htm
index ebfd9cc..e311469 100644
--- a/org.tizen.gettingstarted/html/web/process/setting_properties_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/setting_properties_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.gettingstarted/index.xml b/org.tizen.gettingstarted/index.xml
index a86d27c..5548346 100644
--- a/org.tizen.gettingstarted/index.xml
+++ b/org.tizen.gettingstarted/index.xml
@@ -2,7 +2,7 @@
 <?NLS TYPE="org.eclipse.help.toc"?>
 
 
-<toc label="Getting Started with Tizen" topic="html/cover_page.htm">
+<toc label="Getting Started" topic="html/cover_page.htm">
 	
 	<topic href="html/preface.htm" label="Preface"></topic>
 	<topic href="html/web/cover_page_w.htm" label="Web Application">
diff --git a/org.tizen.guides/html/images/common_appcontrol_browser.png b/org.tizen.guides/html/images/common_appcontrol_browser.png
new file mode 100644
index 0000000..dbe9f6a
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_browser.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_browser2.png b/org.tizen.guides/html/images/common_appcontrol_browser2.png
new file mode 100644
index 0000000..d789943
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_browser2.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_calendar.png b/org.tizen.guides/html/images/common_appcontrol_calendar.png
new file mode 100644
index 0000000..26dc7dc
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_calendar.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_calendar2.png b/org.tizen.guides/html/images/common_appcontrol_calendar2.png
new file mode 100644
index 0000000..bbab557
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_calendar2.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_calendar3.png b/org.tizen.guides/html/images/common_appcontrol_calendar3.png
new file mode 100644
index 0000000..8a63743
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_calendar3.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_calendar4.png b/org.tizen.guides/html/images/common_appcontrol_calendar4.png
new file mode 100644
index 0000000..fa989b0
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_calendar4.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_call1.png b/org.tizen.guides/html/images/common_appcontrol_call1.png
new file mode 100644
index 0000000..08d869d
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_call1.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_call2.png b/org.tizen.guides/html/images/common_appcontrol_call2.png
new file mode 100644
index 0000000..757f259
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_call2.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_contact_add.png b/org.tizen.guides/html/images/common_appcontrol_contact_add.png
new file mode 100644
index 0000000..f9218bf
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_contact_add.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_contact_edit.png b/org.tizen.guides/html/images/common_appcontrol_contact_edit.png
new file mode 100644
index 0000000..0ac5425
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_contact_edit.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_contact_select.png b/org.tizen.guides/html/images/common_appcontrol_contact_select.png
new file mode 100644
index 0000000..1a39211
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_contact_select.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_contact_view1.png b/org.tizen.guides/html/images/common_appcontrol_contact_view1.png
new file mode 100644
index 0000000..091c11e
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_contact_view1.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_contact_view2.png b/org.tizen.guides/html/images/common_appcontrol_contact_view2.png
new file mode 100644
index 0000000..3d1ead5
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_contact_view2.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_email.png b/org.tizen.guides/html/images/common_appcontrol_email.png
new file mode 100644
index 0000000..797383b
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_email.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_email2.png b/org.tizen.guides/html/images/common_appcontrol_email2.png
new file mode 100644
index 0000000..7dd7e88
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_email2.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_email3.png b/org.tizen.guides/html/images/common_appcontrol_email3.png
new file mode 100644
index 0000000..013b0ad
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_email3.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_email4.png b/org.tizen.guides/html/images/common_appcontrol_email4.png
new file mode 100644
index 0000000..bb07756
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_email4.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_message.png b/org.tizen.guides/html/images/common_appcontrol_message.png
new file mode 100644
index 0000000..237526e
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_message.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_message2.png b/org.tizen.guides/html/images/common_appcontrol_message2.png
new file mode 100644
index 0000000..86c7982
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_message2.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_message3.png b/org.tizen.guides/html/images/common_appcontrol_message3.png
new file mode 100644
index 0000000..064b2f1
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_message3.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_message4.png b/org.tizen.guides/html/images/common_appcontrol_message4.png
new file mode 100644
index 0000000..56cf873
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_message4.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_system_bluetooth.png b/org.tizen.guides/html/images/common_appcontrol_system_bluetooth.png
new file mode 100644
index 0000000..b364b20
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_system_bluetooth.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_system_bluetooth2.png b/org.tizen.guides/html/images/common_appcontrol_system_bluetooth2.png
new file mode 100644
index 0000000..2b09367
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_system_bluetooth2.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_system_location.png b/org.tizen.guides/html/images/common_appcontrol_system_location.png
new file mode 100644
index 0000000..bdd4f8c
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_system_location.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_system_nfc.png b/org.tizen.guides/html/images/common_appcontrol_system_nfc.png
new file mode 100644
index 0000000..1214be3
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_system_nfc.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_system_setting.png b/org.tizen.guides/html/images/common_appcontrol_system_setting.png
new file mode 100644
index 0000000..d24ad84
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_system_setting.png differ
diff --git a/org.tizen.guides/html/images/common_appcontrol_system_wifi.png b/org.tizen.guides/html/images/common_appcontrol_system_wifi.png
new file mode 100644
index 0000000..2b3adc1
Binary files /dev/null and b/org.tizen.guides/html/images/common_appcontrol_system_wifi.png differ
diff --git a/org.tizen.guides/html/images/hw_acceleration.png b/org.tizen.guides/html/images/hw_acceleration.png
new file mode 100644
index 0000000..8da8c28
Binary files /dev/null and b/org.tizen.guides/html/images/hw_acceleration.png differ
diff --git a/org.tizen.guides/html/images/key_manager.png b/org.tizen.guides/html/images/key_manager.png
index 0a37663..40c1f92 100644
Binary files a/org.tizen.guides/html/images/key_manager.png and b/org.tizen.guides/html/images/key_manager.png differ
diff --git a/org.tizen.guides/html/images/mn_division.png b/org.tizen.guides/html/images/mn_division.png
index 1f7e337..faecb28 100644
Binary files a/org.tizen.guides/html/images/mn_division.png and b/org.tizen.guides/html/images/mn_division.png differ
diff --git a/org.tizen.guides/html/images/mobile_s_n.png b/org.tizen.guides/html/images/mobile_s_n.png
new file mode 100644
index 0000000..ad8c779
Binary files /dev/null and b/org.tizen.guides/html/images/mobile_s_n.png differ
diff --git a/org.tizen.guides/html/images/mobile_s_w.png b/org.tizen.guides/html/images/mobile_s_w.png
new file mode 100644
index 0000000..f86df29
Binary files /dev/null and b/org.tizen.guides/html/images/mobile_s_w.png differ
diff --git a/org.tizen.guides/html/images/mobile_s_w_optional.png b/org.tizen.guides/html/images/mobile_s_w_optional.png
new file mode 100644
index 0000000..0434b73
Binary files /dev/null and b/org.tizen.guides/html/images/mobile_s_w_optional.png differ
diff --git a/org.tizen.guides/html/images/mw_division.png b/org.tizen.guides/html/images/mw_division.png
index 8fc3efa..c4a8655 100644
Binary files a/org.tizen.guides/html/images/mw_division.png and b/org.tizen.guides/html/images/mw_division.png differ
diff --git a/org.tizen.guides/html/images/n_division.png b/org.tizen.guides/html/images/n_division.png
index d687bc5..5a0b8f6 100644
Binary files a/org.tizen.guides/html/images/n_division.png and b/org.tizen.guides/html/images/n_division.png differ
diff --git a/org.tizen.guides/html/images/shortcut.png b/org.tizen.guides/html/images/shortcut.png
new file mode 100644
index 0000000..576fd83
Binary files /dev/null and b/org.tizen.guides/html/images/shortcut.png differ
diff --git a/org.tizen.guides/html/images/w_division.png b/org.tizen.guides/html/images/w_division.png
index 88d9959..443a1ea 100644
Binary files a/org.tizen.guides/html/images/w_division.png and b/org.tizen.guides/html/images/w_division.png differ
diff --git a/org.tizen.guides/html/images/wearable_s_n.png b/org.tizen.guides/html/images/wearable_s_n.png
new file mode 100644
index 0000000..02e3791
Binary files /dev/null and b/org.tizen.guides/html/images/wearable_s_n.png differ
diff --git a/org.tizen.guides/html/images/wearable_s_w.png b/org.tizen.guides/html/images/wearable_s_w.png
new file mode 100644
index 0000000..379a9c5
Binary files /dev/null and b/org.tizen.guides/html/images/wearable_s_w.png differ
diff --git a/org.tizen.guides/html/images/wearable_s_w_optional.png b/org.tizen.guides/html/images/wearable_s_w_optional.png
new file mode 100644
index 0000000..cef460c
Binary files /dev/null and b/org.tizen.guides/html/images/wearable_s_w_optional.png differ
diff --git a/org.tizen.guides/html/images/wn_division.png b/org.tizen.guides/html/images/wn_division.png
index 11a7876..dca667f 100644
Binary files a/org.tizen.guides/html/images/wn_division.png and b/org.tizen.guides/html/images/wn_division.png differ
diff --git a/org.tizen.guides/html/images/ww_division.png b/org.tizen.guides/html/images/ww_division.png
index 65e7ab7..5f5160c 100644
Binary files a/org.tizen.guides/html/images/ww_division.png and b/org.tizen.guides/html/images/ww_division.png differ
diff --git a/org.tizen.guides/html/index.htm b/org.tizen.guides/html/index.htm
index 42ea7d8..37f0966 100644
--- a/org.tizen.guides/html/index.htm
+++ b/org.tizen.guides/html/index.htm
@@ -32,6 +32,7 @@
 					<ul>
 						<li><a href="web/tizen/application/alarm_w.htm">Alarm</a></li>
 						<li><a href="web/tizen/application/application_w.htm">Application</a></li>
+						<li><a href="web/tizen/application/appgroup_w.htm">Application Group</a></li>
 						<li><a href="web/tizen/application/package_w.htm">Package</a></li>
 						<li><a href="web/tizen/application/data_w.htm">Data Control</a></li>
 					</ul>
@@ -129,7 +130,7 @@
 					<ul>
 						<li><a href="web/w3c/communication/web_messaging_w.htm">HTML5 Web Messaging</a></li>
 						<li><a href="web/w3c/communication/websocket_w.htm">WebSocket</a></li>
-						<li><a href="web/w3c/communication/xmlhttprequest_w.htm">XMLHttpRequest Level 1 and 2</a></li>
+						<li><a href="web/w3c/communication/xmlhttprequest_w.htm">XMLHttpRequest (Level 1 and 2)</a></li>
 						<li><a href="web/w3c/communication/server_sent_w.htm">Server-Sent Events</a></li>
 					</ul>
 				</li>
@@ -144,8 +145,8 @@
 				</li>
 				<li><a href="web/w3c/security/security_guide_w.htm">Security</a>
 					<ul>
-						<li><a href="web/w3c/security/iframe_w.htm">HTML5 iframe element</a></li>
 						<li><a href="web/w3c/security/cors_w.htm">Cross-Origin Resource Sharing</a></li>
+						<li><a href="web/w3c/security/iframe_w.htm">HTML5 iframe element</a></li>
 					</ul>
 				</li>
 				<li><a href="web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a>
@@ -186,16 +187,28 @@
 
 <h2><a href="native/guides_n.htm">Native Application</a></h2>
 	<ul>
+		<li><a href="native/migration_guide_n.htm">Migration Guide</a></li>
 		<li><a href="native/account/account_guide_n.htm">Account</a>
 			<ul>
-				<li><a href="native/account/oauth2_n.htm">oauth2</a></li>
+				<li><a href="native/account/account_manager_n.htm">Account Manager</a></li>	
+				<li><a href="native/account/oauth2_n.htm">OAuth 2.0</a></li>
 				<li><a href="native/account/sync_manager_n.htm">Sync Manager</a></li>	
             </ul>
 		</li>
 		<li><a href="native/app/app_guide_n.htm">Application Framework</a>
 			<ul>
-				<li><a href="native/app/application_n.htm">Application</a></li>
-				<li><a href="native/app/appgroup_n.htm">Application Group</a></li>
+				<li><a href="native/app/application_n.htm">Application</a>
+					<ul>
+						<li><a href="native/app/alarm_n.htm">Alarm</a></li>
+						<li><a href="native/app/appcontrol_n.htm">App Control</a>
+							<ul>
+								<li><a href="native/app/common_appcontrol_n.htm">Common Application Controls</a></li>
+							</ul>
+						</li>
+						<li><a href="native/app/event_n.htm">Event</a></li>
+						<li><a href="native/app/internationalization_n.htm">Internationalization</a></li>
+					</ul>				
+				</li>
 				<li><a href="native/app/app_manager_n.htm">Application Manager</a></li>
 				<li><a href="native/app/badge_n.htm">Badge</a></li>
 				<li><a href="native/app/bundle_n.htm">Bundle</a></li>
@@ -204,8 +217,8 @@
 				<li><a href="native/app/notification_n.htm">Notification</a></li>
 				<li><a href="native/app/package_n.htm">Package Manager</a></li>
 				<li><a href="native/app/service_app_n.htm">Service Application</a></li>
-				<li><a href="native/app/widget_n.htm">Widget Application</a></li>				
 				<li><a href="native/app/shortcut_n.htm">Shortcut</a></li>
+				<li><a href="native/app/widget_n.htm">Widget Application</a></li>				
 				<li><a href="native/app/watch_n.htm">Watch Application</a></li>
 			</ul>
 		</li>
@@ -234,13 +247,14 @@
 				<li><a href="native/graphics/opengles_n.htm">OpenGL ES</a></li>
 				<li><a href="native/graphics/tbm_n.htm">TBM Surface</a></li>
 				<li><a href="native/graphics/cairo_n.htm">Cairo</a></li>
+				<li><a href="native/graphics/hw_acceleration_n.htm">Hardware Acceleration</a></li>
 			</ul>
 		</li>
 		<li><a href="native/location/location_guide_n.htm">Location</a>
 			<ul>
 				<li><a href="native/location/location_n.htm">Location</a></li>
+				<li><a href="native/location/maps_n.htm">Maps Service</a></li>		
 				<li><a href="native/location/geofence_n.htm">Geofence</a></li>	
-				<li><a href="native/location/maps_n.htm">Maps Service</a></li>				
 			</ul>
 		<li><a href="native/messaging/messaging_guide_n.htm">Messaging</a>
 			<ul>
@@ -267,7 +281,7 @@
 				<li><a href="native/multimedia/tone_player_n.htm">Tone Player</a></li>
 				<li><a href="native/multimedia/wav_player_n.htm">WAV Player</a></li>
 				<li><a href="native/multimedia/sound_manager_n.htm">Sound Manager</a></li>
-				<li><a href="native/multimedia/screen_mirroring_n.htm">Screen Mirroring Sink</a></li>				
+				<li><a href="native/multimedia/screen_mirroring_n.htm">Screen Mirroring</a></li>				
 				<li><a href="native/multimedia/video_util_n.htm">Video Util</a></li>
 			</ul>
 		</li>
@@ -276,7 +290,7 @@
 				<li><a href="native/network/connection_n.htm">Connection</a></li>
 				<li><a href="native/network/bluetooth_n.htm">Bluetooth</a></li>
 				<li><a href="native/network/nfc_n.htm">NFC</a></li>
-				<li><a href="native/network/smartcard_n.htm">SmartCard</a></li>
+				<li><a href="native/network/smartcard_n.htm">Smartcard</a></li>
 				<li><a href="native/network/wifi_n.htm">Wi-Fi</a></li>
 				<li><a href="native/network/wifi_direct_n.htm">Wi-Fi Direct</a></li>
 			</ul>
@@ -289,10 +303,9 @@
 		</li>
 		<li><a href="native/social/social_guide_n.htm">Social</a>
 			<ul>
-				<li><a href="native/social/service_adaptor_n.htm">Service Adaptor</a></li>
-				<li><a href="native/social/account_manager_n.htm">Account Manager</a></li>
-				<li><a href="native/social/calendar_n.htm">Calendar</a></li>
 				<li><a href="native/social/contact_n.htm">Contacts</a></li>
+				<li><a href="native/social/calendar_n.htm">Calendar</a></li>
+				<li><a href="native/social/service_adaptor_n.htm">Service Adaptor</a></li>
 			</ul>
 		</li>			
 		<li><a href="native/system/system_guide_n.htm">System</a>
@@ -317,6 +330,7 @@
 		<li><a href="native/ui/ui_guide_n.htm">UI Framework</a>
 			<ul>
 				<li><a href="native/ui/eom_n.htm">External Output Manager</a></li>
+				<li><a href="native/ui/minicontrol_n.htm">Minicontrol</a></li>
 			</ul>
 		</li>
 		<li><a href="native/uix/uix_guide_n.htm">UIX</a>
@@ -333,11 +347,6 @@
 			</ul>
 		</li>
 		<li><a href="native/web/web_guide_n.htm">Web</a></li>
-		<li><a href="native/porting/porting_n.htm">Porting</a>
-			<ul>
-				<li><a href="native/porting/api_comparison_n.htm">API Comparison</a></li>
-			</ul>
-		</li>
 	</ul>
 
 
diff --git a/org.tizen.guides/html/native/account/account_guide_n.htm b/org.tizen.guides/html/native/account/account_guide_n.htm
index ac60e65..676d4d7 100644
--- a/org.tizen.guides/html/native/account/account_guide_n.htm
+++ b/org.tizen.guides/html/native/account/account_guide_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -33,18 +33,17 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Account</h1> 
-	<p>Account features include managing various account information, such as receiving sync operation notifications, and obtaining an access token by using the oauth2 authorization.</p>
+	<p>Account features include managing various account information, such as receiving sync operation notifications, and obtaining an access token by using the OAuth 2.0 authorization.</p>
 
 <p>The main account features are:</p>
 <ul>
-<li><p><a href="oauth2_n.htm">oauth2</a></p>
-<p>Enables you to obtain an access token by using the oauth2 authorization.</p></li>
+<li><a href="account_manager_n.htm">Account Manager</a> 
+<p>Allows you to work with accounts in your application by creating, managing and removing individual accounts.</p></li> 
+<li><p><a href="oauth2_n.htm">OAuth 2.0</a></p>
+<p>Enables you to obtain an access token by using the OAuth 2.0 authorization.</p></li>
 </ul>
-
-		
- 
+	 
  <p>The following guides apply in <strong>mobile applications only</strong>:</p> 
- 
  <ul>
 	<li><p><a href="sync_manager_n.htm">Sync Manager</a></p>
 	<p>Enables you to receive notifications in your application about syncing operations between a server and the device.</p></li>
diff --git a/org.tizen.guides/html/native/account/account_manager_n.htm b/org.tizen.guides/html/native/account/account_manager_n.htm
new file mode 100644
index 0000000..6c611de
--- /dev/null
+++ b/org.tizen.guides/html/native/account/account_manager_n.htm
@@ -0,0 +1,356 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Account Manager</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+				<li><a href="#provider">Account Providers</a></li>
+				<li><a href="#appcontrol">Account Application Control</a></li>		
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.tutorials/html/native/account/account_tutorial_n.htm">Account Manager Tutorial</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API for Wearable Native</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>Account Manager</h1>
+	
+ <p>An account is a collection of information representing the user of a specific provider.</p> 
+ 
+  <p>The main features of the Account Manager API include:
+</p> 
+  <ul> 
+   <li>Creating and managing accounts</li> 
+   <li>Retrieving account information</li>
+   <li>Receiving account change notifications</li> 
+  </ul> 
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">To add, update, or remove an account, you must <a href="#provider">register your account provider</a> for all your applications belonging to the same package.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The <span style="font-family: Courier New,Courier,monospace">account.h</span> header file handles account-related information. The following table lists the account properties that can be modified.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Account properties 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Account property</th> 
+     <th>Data type</th> 
+	 <th>Mandatory</th>
+	 <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td>User name</td> 
+	 <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+	 <td>Yes</td>
+     <td>Identity of an account.
+         <p>If the display name and email address are not set for an account, the user name is shown for the account on the Accounts screen in the Setting application.</p>
+        </td>
+    </tr>
+    <tr>
+     <td>Display name</td>
+	 <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+	 <td>No</td>
+     <td>Display name of an account.
+	 <p>Display name is shown for the account on the Accounts screen in the Setting application.</p>
+        </td>
+    </tr>
+    <tr>
+     <td>Email address</td>
+	 <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+     <td>No</td>
+	 <td>Email address of an account.
+         <p>If the display name is not set for an account, the email address is shown for the account on the Accounts screen in the Setting application.</p>
+        </td>
+    </tr>
+       <tr>
+     <td>Package name</td>
+	 <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+     <td>No</td>
+	 <td>One of an account package IDs, like the app ID.
+         <p>If the package name is not set for an account, the app ID is used as a package name.</p>
+        </td>
+   </tr>
+       <tr>
+     <td>Icon path</td>
+	 <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+	  <td>No</td>
+     <td>Icon path of an account.
+         <p>The icon is shown through the registered icon path as an account icon on the Accounts screen in the Setting application.</p>
+        </td>
+    </tr>
+       <tr>
+     <td>Domain name</td>
+	 <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+	  <td>No</td>
+     <td>Domain name of an account.
+        </td>
+    </tr>  
+       <tr>
+     <td>Access token</td> 
+	 <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+	  <td>No</td>
+     <td>Access token of an account.
+        </td>
+    </tr>  
+       <tr>
+     <td>Auth type</td> 
+	 <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+	  <td>No</td>
+     <td>Authentication type, such as oauth or xauth.
+        </td>
+    </tr>  
+       <tr>
+     <td>Capability</td> 
+	 <td>Key-value <span style="font-family: Courier New,Courier,monospace">string</span>-<span style="font-family: Courier New,Courier,monospace">integer</span> pairs</td>
+	  <td>No</td>
+     <td>Capability of an account.
+       </td> 
+    </tr>  
+       <tr>
+     <td>Secret</td> 
+	 <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+	  <td>No</td>
+     <td>The secret value is used to decide whether the account is shown on the Accounts screen in the Setting application.
+        </td>
+    </tr>  
+       <tr>
+     <td>Sync support</td> 
+	 <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+	  <td>No</td>
+     <td>Current synchronization status.</td>
+    </tr>
+       <tr>
+     <td>Source</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+	  <td>No</td>
+       <td>Source of an account.
+        </td>
+    </tr>
+       <tr>
+     <td>User text</td> 
+	 <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+	  <td>No</td>
+     <td>String array which you can use freely.
+        </td>
+    </tr>  
+       <tr>
+     <td>User int</td> 
+	 <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+	  <td>No</td>
+     <td>Integer array which you can use freely.
+        </td> 
+    </tr>
+       <tr>
+     <td>Custom</td> 
+	 <td>Key-value <span style="font-family: Courier New,Courier,monospace">string</span> pairs</td>
+	  <td>No</td>
+     <td>Key-value pairs which you can use freely.
+        </td>
+    </tr>
+   </tbody> 
+  </table> 
+    
+<h2 id="provider" name="provider">Account Providers</h2> 
+  <p>Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides the user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.</p> 
+  <p>To register an account provider, define the account provider information in the <strong>Account</strong> tab of the manifest editor, as described in the following table, and implement the <a href="#appcontrol">account application control</a>.</p> 
+  <table border="1"> 
+   <caption>
+     Table: Account provider properties 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Account property</th> 
+     <th>Data type</th> 
+	 <th>Mandatory</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td>Multiple accounts support</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span> </td> 
+	 <td>Yes</td>
+     <td>Indicates whether multiple accounts are supported.</td> 
+    </tr> 
+    <tr> 
+     <td>Icon</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+	 <td>Yes</td>
+     <td>File path of the account provider icon.
+	 <p>The icon size is:</p>
+	 <ul>
+		<li>72 x 72 for Xhigh (HD)</li>
+		<li>48 x 48 for High (WVGA)</li>
+	 </ul>
+	 <p>Since the icon is used in <strong>Settings &gt; Accounts</strong>, place the icon in a shared directory.</p></td> 
+    </tr> 
+    <tr> 
+     <td>Small icon</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+	 <td>Yes</td>
+     <td>File path of the account provider icon.
+	 <p>The icon size is:</p>
+	 <ul>
+		<li>45 x 45 for Xhigh (HD)</li>
+		<li>30 x 30 for High (WVGA)</li>
+	 </ul>
+	 <p>Since the small icon is used in other applications, place the icon in a shared directory.</p></td> 
+    </tr> 
+    <tr> 
+     <td>Display name</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+	 <td>Yes</td>
+     <td>Display name of the account provider.</td> 
+    </tr> 
+    <tr> 
+     <td>Capabilities</td> 
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
+	 <td>No</td>
+     <td>Capability of the account provider.
+         <p>Capability can be a liaison between an account application and another application. If an account application registers a capability in the manifest file, other applications know that the account application has the capability. And if an account application gives an account a capability, other applications know that the account has the capability.</p>
+         <p>Several service-specific capabilities are defined for the Account Manager in Tizen:</p>
+
+      <ul>
+       <li>Contact capability:
+	   <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CONTACT or &quot;http://tizen.org/account/capability/contact&quot;</span></p>
+           <p>If you register this capability in the manifest file, the user using the contact application can see a list of accounts with the account of your service in the contact application.</p>
+          </li> 
+       <li>Calendar capability:
+	   <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CALENDAR or &quot;http://tizen.org/account/capability/calendar&quot;</span></p>
+           <p>If you register this capability in the manifest file, the user using the calendar application can see a list of accounts with the account of your service in the calendar application.</p>
+          </li>
+       <li>Email capability:
+	   <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_EMAIL or &quot;http://tizen.org/account/capability/email&quot;</span></p>
+          </li>
+       <li>Photo capability:
+	   <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_PHOTO or &quot;http://tizen.org/account/capability/photo&quot;</span></p>
+          </li>
+       <li>Video capability:
+	   <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_VIDEO or &quot;http://tizen.org/account/capability/video&quot;</span></p>
+          </li>
+       <li>Music capability:
+	   <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MUSIC or &quot;http://tizen.org/account/capability/music&quot;</span></p>
+          </li>
+       <li>Document capability:
+	   <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_DOCUMENT or &quot;http://tizen.org/account/capability/document&quot;</span></p>
+          </li>
+       <li>Message capability:
+	   <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MESSAGE or &quot;http://tizen.org/account/capability/message&quot;</span></p>
+          </li>
+       <li>Game capability:
+	   <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_GAME or &quot;http://tizen.org/account/capability/game&quot;</span></p>
+          </li>
+</ul>	  
+       </td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+  <p>If the application has defined the account provider information and implements the appcontrol for the account provider, the account provider is automatically registered when the application is installed.</p>   
+  
+<h2 id="appcontrol" name="appcontrol">Account Application Control</h2> 
+  <p>The account application control, which allows the user to add and configure accounts, must be implemented in all applications that define an account provider. You are not required to define the application control information in the <strong>Application Control</strong> tab of the manifest editor.</p> 
+  
+  <p>This application control supports the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> operations.</p> 
+ 
+  <h3 id="ADD" name="ADD">ACCOUNT_OPERATION_SIGNIN Operation</h3>
+  <p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> operation enables the user to add a new account for a specific account provider. With the operation, the login page for the specific account provider can be displayed. In <strong>Settings &gt; Accounts</strong>, if the account provider is clicked for adding a new account, this operation is launched.</p>
+
+  <p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
+  
+  <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p> 
+  <p>The following table shows the ACCOUNT_OPERATION_SIGNIN (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span>) operation.</p> 
+  <table border="1"> 
+   <caption>
+     Table: ACCOUNT_OPERATION_SIGNIN operation 
+   </caption> 
+ 
+    <tbody>
+    <tr>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span></td>
+     <td>Account ID of the added account.</td>
+    </tr>
+   </tbody>
+
+  </table> 
+  <h3 id="CONFIG" name="CONFIG">ACCOUNT_OPERATION_VIEW Operation</h3>
+  <p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> operation enables the user to set account information, such as synchronization settings. The delete button must be included for removing accounts.</p> 
+  <p>In <strong>Settings &gt; Accounts</strong>, if the specific account is clicked for setting the account information, this operation is launched.</p>
+  <p> You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>. </p>
+  <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p>
+  <p>The following table shows the ACCOUNT_OPERATION_VIEW (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span>) operation.</p>
+  
+  <table border="1"> 
+   <caption>
+     Table: ACCOUNT_OPERATION_VIEW operation 
+   </caption> 
+    <tbody>
+    <tr>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_VIEW</span></td>
+     <td>Account ID for setting account information.</td>
+    </tr>
+   </tbody>
+
+  </table> 	  
+  
+  <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/account/oauth2_n.htm b/org.tizen.guides/html/native/account/oauth2_n.htm
index 244ba74..013acab 100644
--- a/org.tizen.guides/html/native/account/oauth2_n.htm
+++ b/org.tizen.guides/html/native/account/oauth2_n.htm
@@ -10,28 +10,28 @@
     <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>oauth2</title>
+    <title>OAuth 2.0</title>
 </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
         <ul class="toc">
-		<li><a href="../../../../org.tizen.tutorials/html/native/account/oauth2_tutorial_n.htm">oauth2 Tutorial</a></li>
-		<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">oauth2 API for Mobile Native</a></li>
-		<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">oauth2 API for Wearable Native</a></li>
+		<li><a href="../../../../org.tizen.tutorials/html/native/account/oauth2_tutorial_n.htm">OAuth 2.0 Tutorial</a></li>
+		<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">OAuth 2.0 API for Mobile Native</a></li>
+		<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">OAuth 2.0 API for Wearable Native</a></li>
             </ul>
     </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
     
-<h1>oauth2</h1> 
+<h1>OAuth 2.0</h1> 
   <p>The OAuth 2.0 authorization framework enables a 3<sup>rd</sup> party application to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowing the 3<sup>rd</sup> party application to obtain access on its own behalf.</p> 
   
 <p class="figure">Figure: Protocol flow</p> 
diff --git a/org.tizen.guides/html/native/account/sync_manager_n.htm b/org.tizen.guides/html/native/account/sync_manager_n.htm
index 7a07b9e..0355893 100644
--- a/org.tizen.guides/html/native/account/sync_manager_n.htm
+++ b/org.tizen.guides/html/native/account/sync_manager_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
 	</div>
 
 	<div id="toc_border"><div id="toc">
@@ -35,28 +35,20 @@
 <h1>Sync Manager</h1>
 <p>Tizen provides notifications for a service application to maintain data consistency between a server and the device. You can manage the synchronization schedule for applications.</p>
 
- <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The Sync Manager API domain is supported in mobile applications only.<br>Service and UI applications should have package name as same.</td>
-    </tr>
-   </tbody>
- </table>
+<p>This feature is supported in mobile applications only.</p>
+<p>The service and UI applications must have the same package name.</p>
 
 <p>The main Sync Manager API features are:</p>
 <ul>
-<li>Add on-demand sync job schedules.</li>
-<li>Add periodic sync job schedules.</li>
-<li>Add data change sync job schedules.</li>
-<li>Remove registered sync job schedules.</li>
-<li>Iterate registered sync job schedules.</li>
+<li>Adding on-demand sync job schedules</li>
+<li>Adding periodic sync job schedules</li>
+<li>Adding data change sync job schedules</li>
+<li>Removing registered sync job schedules</li>
+<li>Iterating registered sync job schedules</li>
 </ul>
-<p><br>The sync manager operates sync jobs based on the rules defined in the following table.</p>
+<p>The sync manager operates the sync jobs based on the rules defined in the following table.</p>
   <table>
-  <caption>Table: Sync job scheduling rules<p>
+  <caption>Table: Sync job scheduling rules
   </caption>
    <tbody>
     <tr>
@@ -64,12 +56,14 @@
      <th>Description</th>
     </tr>
     <tr>
-     <td>Data changes on server</td>
-     <td>A server sends a push message to the account provider service and service applications. When the data is changed on a server, a push message is sent from the server. Then, the device which is received the push message can trigger on-demand sync job.</td>
+     <td>Data changes on the server</td>
+     <td>A server sends a push message to the account provider service and service applications. When the data is changed on the server, a push message is sent from the server. Then, the device which receives the push message can trigger an on-demand sync job.</td>
     </tr>
     <tr>
-     <td>Data changes on device</td>
-     <td>A subscribed callback function is invoked whenever DB change occurs for the registered capability. The data change listener notices the changes by using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a>, <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a>, and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a> API. If there are any changes in corresponding data, the sync manager notices the changes and schedules a sync job. <br><br>Changing data in the Calendar database includes adding, updating, and deleting books, events, and todos. Changing data in the Contacts database includes adding, removing, and modifying contacts.<br>Media content provides notification for the types of changed data such as image, music, sound, and video.</td>
+     <td>Data changes on the device</td>
+     <td>A subscribed callback function is invoked whenever a database change occurs for a registered capability. The data change listener notices the changes by using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a>, <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a>, and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a> APIs. If there are any changes in the corresponding data, the sync manager notices the changes and schedules a sync job.
+	 <p>Changing data in the Calendar database includes adding, updating, and deleting books, events, and todos. Changing data in the Contacts database includes adding, removing, and modifying contacts.</p>
+	 <p>The media content provides notifications for changes in media types, such as image, music, sound, and video.</p></td>
     </tr>
     <tr>
      <td>Network availability</td>
@@ -77,78 +71,99 @@
     </tr>
     <tr>
      <td>On demand sync</td>
-     <td>The on-demand sync means that you can schedule a sync job for once. You can use this feature with the <span style="font-family: Courier New,Courier,monospace">sync_manager_on_demand_sync_job()</span> API.</td>
+     <td>The on-demand sync means that you can schedule a sync job once. You can use this feature with the <span style="font-family: Courier New,Courier,monospace">sync_manager_on_demand_sync_job()</span> function.</td>
     </tr>
     <tr>
      <td>Periodic sync</td>
-     <td>The periodic sync means that you can schedule a sync job to be performed regularly. You can use this feature with the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> API. You can also use the sync intervals as various enumerators which is provided through the Sync Manager API. To use this API, <span style="font-family: Courier New,Courier,monospace">"http://tizen.org/privilege/alarm.set"</span> is required. Because user who use this API can use setting an alarm indirectly.</td>
+     <td>The periodic sync means that you can schedule a sync job to be performed regularly. You can use this feature with the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> function. You can also use the sync intervals through various enumerators provided through the Sync Manager API. 
+	 <p>When using the Sync Manager API, you can set an alarm indirectly. Consequently, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span> privilege is required.</p></td>
     </tr>
    </tbody>
   </table>
 
-
-<p><br>The following table lists the variables and theirs description for using Sync Manager.</p>
+<p>The following table lists the variables used with the sync manager.</p>
 <table border="1">
-	<caption>Table: Sync Manager variables<p></caption>
-	<tbody>
+       <caption>Table: Sync manager variables</caption>
+       <tbody>
     <tr>
-		<th>Sync Manager variable</th>
-		<th>Data type</th>
-		<th>Mandatory</th>
-		<th>Description</th>
-	</tr>
-	<tr>
-		<td>Account Handle</td>
-		<td><span style="font-family: Courier New,Courier,monospace">account_s*</span></td>
-		<td>No</td>
-		<td>Handle of account module.<p>An account handle for managing account related data.</p></td>
-	</tr>
-	<tr>
-		<td>Sync Job Name</td>
-		<td><span style="font-family: Courier New,Courier,monospace">const char*</span></td>
-		<td>Yes</td>
-		<td>Name for managing sync jobs.<p>On-demand and periodic sync jobs can be managed by using Sync Job Name. It is user defined value. If <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> API is called again with same Sync Job Name, not adding a new sync job but renewing all the data except Sync Job Name and Sync Job ID. That is for mainly resetting of periodic interval.</p></td>
-	</tr>
-	<tr>
-		<td>Sync Capability</td>
-		<td><span style="font-family: Courier New,Courier,monospace">const char*</span></td>
-		<td>Yes</td>
-		<td>Capability for a data change sync jobs.<p>Data change sync job can provide notification whenever corresponding data change occurs. If <span style="font-family: Courier New,Courier,monospace">sync_manager_add_data_change_sync_job()</span> API is used with a capability, it is operated only for the related capability. In the case of using calendar and contact capability, <span style="font-family: Courier New,Courier,monospace">"http://tizen.org/privilege/calendar.read"</span> and <span style="font-family: Courier New,Courier,monospace">"http://tizen.org/privilege/contact.read"</span> are required for each.</p><p>Available capabilities are below:<br>#define&nbsp;&nbsp;&nbsp;&nbsp;SYNC_SUPPORTS_CAPABILITY_CALENDAR&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family: Courier New,Courier,monospace">"http://tizen.org/sync/capability/calendar"</span><br>#define&nbsp;&nbsp;&nbsp;&nbsp;SYNC_SUPPORTS_CAPABILITY_CONTACT&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family: Courier New,Courier,monospace">"http://tizen.org/sync/capability/contact"</span><br>#define&nbsp;&nbsp;&nbsp;&nbsp;SYNC_SUPPORTS_CAPABILITY_IMAGE&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family: Courier New,Courier,monospace">"http://tizen.org/sync/capability/image"</span><br>#define&nbsp;&nbsp;&nbsp;&nbsp;SYNC_SUPPORTS_CAPABILITY_MUSIC&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family: Courier New,Courier,monospace">"http://tizen.org/sync/capability/music"</span><br>#define&nbsp;&nbsp;&nbsp;&nbsp;SYNC_SUPPORTS_CAPABILITY_SOUND&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family: Courier New,Courier,monospace">"http://tizen.org/sync/capability/sound"</span><br>#define&nbsp;&nbsp;&nbsp;&nbsp;SYNC_SUPPORTS_CAPABILITY_VIDEO&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family: Courier New,Courier,monospace">"http://tizen.org/sync/capability/video"</span></p></td>
-	</tr>
-	<tr>
-		<td>Sync Period</td>
-		<td><span style="font-family: Courier New,Courier,monospace">sync_period_e</span></td>
-		<td>Yes</td>
-	<td>Interval for a periodic sync jobs.<p>With it, sync job is provided periodically. In the case of setting periodic interval as 30 minutes, a time interval is set as power of 2 less than 30. Then, the time interval which is 16 minutes will operate the sync job every 16 minutes with skipping the first notification. So, the first will be 32 minutes. That is same for the other cases.<br>In other words, it provides periodical sync job with an inexact time. By doing so, coupling various periodic sync jobs with interval as power of 2 is for preventing waking up service application too many times from a device.</p><p>Available period intervals are below:<br>SYNC_PERIOD_INTERVAL_30MIN&nbsp;&nbsp;&nbsp;&nbsp;Sync within 30 minutes<br>SYNC_PERIOD_INTERVAL_1H&nbsp;&nbsp;&nbsp;&nbsp;Sync within 1 hour<br>SYNC_PERIOD_INTERVAL_2H&nbsp;&nbsp;&nbsp;&nbsp;Sync within 2 hours<br>SYNC_PERIOD_INTERVAL_3H&nbsp;&nbsp;&nbsp;&nbsp;Sync within 3 hours<br>SYNC_PERIOD_INTERVAL_6H&nbsp;&nbsp;&nbsp;&nbsp;Sync within 6 hours<br>SYNC_PERIOD_INTERVAL_12H&nbsp;&nbsp;&nbsp;&nbsp;Sync within 12 hours<br>SYNC_PERIOD_INTERVAL_1DAY&nbsp;&nbsp;&nbsp;&nbsp;Sync within 1 day</p></td>
-	</tr>
-	<tr>
-		<td>Sync Option</td>
-		<td><span style="font-family: Courier New,Courier,monospace">sync_option_e</span></td>
-		<td>Yes</td>
-		<td>Option for deciding the behavior of sync jobs.<p>The behavior of sync job is decided with corresponding sync option. These options can be used as OR value. For example, the expression of "(SYNC_OPTION_EXPEDITED | SYNC_OPTION_NO_RETRY)" is available. That means "Sync job will be operated just once with priority".</p><p>Available options are below:<br>SYNC_OPTION_NONE&nbsp;&nbsp;&nbsp;&nbsp;Sync job will be operated normally<br>SYNC_OPTION_EXPEDITED&nbsp;&nbsp;&nbsp;&nbsp;Sync job will be operated as soon as possible<br>SYNC_OPTION_NO_RETRY&nbsp;&nbsp;&nbsp;&nbsp;Sync job will not be performed again when it fails</p></td>
-	</tr>
-	<tr>
-		<td>Sync Job ID</td>
-		<td><span style="font-family: Courier New,Courier,monospace">int*</span></td>
-		<td>Yes</td>
-		<td>Unique ID for managing sync jobs.<p>It is generated when a sync job is added. It is required to remove the sync job. The number of Sync Job ID which can be generated is restricted as a hundred per a package.</p></td>
-	</tr>
-	<tr>
-		<td>Sync Job User Data</td>
-		<td><span style="font-family: Courier New,Courier,monospace">bundle*</span></td>
-		<td>No</td>
-		<td>User data for sync jobs.<p>User data which contains additional information related registered sync jobs.</p></td>
-	</tr>
-	<tr>
-		<td>User Data</td>
-		<td><span style="font-family: Courier New,Courier,monospace">void*</span></td>
-		<td>No</td>
-		<td>User data for <span style="font-family: Courier New,Courier,monospace">sync_manager_for_each_sync_job()</span>.<p>User data which contains additional information related foreach jobs.</p></td>
-	</tr>
-	</tbody>
+               <th>Variable</th>
+               <th>Data type</th>
+               <th>Mandatory</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td>Account handle</td>
+               <td><span style="font-family: Courier New,Courier,monospace">account_s*</span></td>
+               <td>No</td>
+               <td>Handle of the account module for managing account-related data.</td>
+       </tr>
+       <tr>
+               <td>Sync job name</td>
+               <td><span style="font-family: Courier New,Courier,monospace">const char*</span></td>
+               <td>Yes</td>
+               <td>Sync job name for managing the jobs.
+			   <p>The on-demand and periodic sync jobs can be managed by a user-defined name. If the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> function is called again with same sync job name (where all details except the name and sync job ID are changed), the function does not add a new sync job but updates the existing job. This is mainly used to reset the periodic interval.</p></td>
+       </tr>
+       <tr>
+               <td>Sync capability</td>
+               <td><span style="font-family: Courier New,Courier,monospace">const char*</span></td>
+               <td>Yes</td>
+               <td>Capability for a data change sync job.
+			   <p>A data change sync job can provide a notification whenever a corresponding data change occurs. If the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_data_change_sync_job()</span> function is used with a capability, it is operated for the related capability only. In the case of using the calendar or contact capability, the respective <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/calendar.read</span> or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/contact.read</span> privilege is required.</p>
+			   <p>The following capabilities are available:</p>
+			   <pre class="prettyprint">
+#define SYNC_SUPPORTS_CAPABILITY_CALENDAR &quot;http://tizen.org/sync/capability/calendar&quot; 
+#define SYNC_SUPPORTS_CAPABILITY_CONTACT &quot;http://tizen.org/sync/capability/contact&quot;
+#define SYNC_SUPPORTS_CAPABILITY_IMAGE &quot;http://tizen.org/sync/capability/image&quot;
+#define SYNC_SUPPORTS_CAPABILITY_MUSIC &quot;http://tizen.org/sync/capability/music&quot;
+#define SYNC_SUPPORTS_CAPABILITY_SOUND &quot;http://tizen.org/sync/capability/sound&quot;
+#define SYNC_SUPPORTS_CAPABILITY_VIDEO &quot;http://tizen.org/sync/capability/video&quot;</pre></td>
+       </tr>
+       <tr>
+               <td>Sync period</td>
+               <td><span style="font-family: Courier New,Courier,monospace">sync_period_e</span></td>
+               <td>Yes</td>
+       <td>Interval for a periodic sync job.
+	   <p>If the interval is provided, the sync job is performed periodically. If you set the periodic interval to 30 minutes, a time interval is set as a power of 2 less than 30. This means that a time interval set to 16 minutes operates the sync job every 16 minutes while skipping the first notification (so the first is in 32 minutes). The same logic applies to other cases.</p>
+	   <p>This variable provides a periodic sync job with an inexact time. Coupling various periodic sync jobs with an interval as a power of 2  prevents the device from waking up the service application too many times.</p>
+	   <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html#gad6f301bc84c4e758aee1636b0122dd7e">sync_period_e</a> enumerator defines the available period intervals.</p></td>
+       </tr>
+       <tr>
+               <td>Sync option</td>
+               <td><span style="font-family: Courier New,Courier,monospace">sync_option_e</span></td>
+               <td>Yes</td>
+               <td>Option for deciding the sync job behavior.
+			   <p>The behavior options can be used as an OR value. For example, the <span style="font-family: Courier New,Courier,monospace">(SYNC_OPTION_EXPEDITED | SYNC_OPTION_NO_RETRY)</span> expression is available, and means that the &quot;Sync job is operated just once with priority&quot;.</p>
+			   <p>The following options are available:</p>
+			   <ul><li><span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NONE</span>: Sync job is operated normally</li>
+			   <li><span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span>: Sync job is operated as soon as possible</li>
+			   <li><span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span>: Sync job is not performed again when it fails</li></ul></td>
+       </tr>
+       <tr>
+               <td>Sync job ID</td>
+               <td><span style="font-family: Courier New,Courier,monospace">int*</span></td>
+               <td>Yes</td>
+               <td>Unique ID for managing sync jobs.
+			   <p>The ID is generated when a sync job is added. It is required to remove the sync job. The number of ID that can be generated is restricted to a hundred per a package.</p></td>
+       </tr>
+       <tr>
+               <td>Sync job user data</td>
+               <td><span style="font-family: Courier New,Courier,monospace">bundle*</span></td>
+               <td>No</td>
+               <td>User data for a sync job.
+			   <p>The data can contain additional information related to the registered sync jobs.</p></td>
+       </tr>
+       <tr>
+               <td>User data</td>
+               <td><span style="font-family: Courier New,Courier,monospace">void*</span></td>
+               <td>No</td>
+               <td>User data for the <span style="font-family: Courier New,Courier,monospace">sync_manager_for_each_sync_job()</span> function.
+			   <p>The data can contain additional information related to the foreach jobs.</p></td>
+       </tr>
+       </tbody>
 </table>
-
-
+ 
+  
 <h2>Sync Adapter</h2>
 
  <table class="note">
@@ -157,19 +172,22 @@
      <th class="note">Note</th>
     </tr>
     <tr>
-     <td class="note">The Sync Adapter API should be carried out by a service application which will operate data synchronization before using the Sync Manager API.<br>The number of service application which can set callbacks is restricted as only one per a package.</td>
+     <td class="note">The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">Sync Adapter</a> API operations must be carried out by a service application (which operates data synchronization) before using the Sync Manager API.
+<p>The number of service applications that can set callbacks is restricted to only one per a package.</p></td>
     </tr>
    </tbody>
  </table>
 
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">Sync Adapter</a> API allows you to:</p>
+ <p>The Sync Adapter API allows you to:</p>
 <ul>
 <li>Register callbacks for notifications about the sync job start and cancellation.</li>
-<li>App control is used to start the sync operation, so that the application's daemon does not need to stay awake. <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">Sync Adapter</a> API allows you to use this mechanism without using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control</a> API separately. <p>In other words, in the case of using <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">Sync Adapter</a> API, you can use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control</a> API indirectly.</p>
-</li>
-</ul>
-
+<li>Start a sync operation with an app control, so that the application&#39;s daemon needs not to stay awake.
+<p>The Sync Adapter API allows you to use this mechanism without using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control</a> API separately. In other words, when using  the Sync Adapter API, you can use the App Control API indirectly.</p>
+ </li>
 
+</ul>
+  
+  
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
@@ -193,3 +211,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 </body>
 </html>
+
diff --git a/org.tizen.guides/html/native/app/alarm_n.htm b/org.tizen.guides/html/native/app/alarm_n.htm
new file mode 100644
index 0000000..8079fc9
--- /dev/null
+++ b/org.tizen.guides/html/native/app/alarm_n.htm
@@ -0,0 +1,61 @@
+<!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>Alarm</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/alarm_tutorial_n.htm">Alarm Tutorial</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">Alarm API for Mobile Native</a></li>   
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">Alarm API for Wearable Native</a></li> 
+			</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Alarm</h1> 
+
+<p>You can launch an application at a specific time using alarms. The mechanism involved in launching the application is the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications).</p>
+<p>The AppControl API allows <a href="appcontrol_n.htm">launching an application</a> explicitly, giving its package name, or providing certain criteria that the application must meet. For example, the criteria can include the type of data on which the application must be able to operate. The structure containing the criteria is called an appcontrol.</p>
+  
+
+<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.guides/html/native/app/app_guide_n.htm b/org.tizen.guides/html/native/app/app_guide_n.htm
index 7ee0561..1f1e5bd 100644
--- a/org.tizen.guides/html/native/app/app_guide_n.htm
+++ b/org.tizen.guides/html/native/app/app_guide_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -34,22 +34,19 @@
  <p>Application framework features include managing various types of applications and packages, and handling events.</p>
   <p>The main application framework features are:</p>
   <ul> 
-	<li><a href="application_n.htm">Application</a> <p>Enables you to manage application state change or system events and control mechanisms that launch other applications.</p></li>
-	<li><a href="appgroup_n.htm">Application Group</a> <p>Enables you to manage application launch mode and grouping.</p></li>
+	<li><a href="application_n.htm">Application</a> <p>Enables you to manage application state change or system events and control mechanisms that launch other applications. You can also manage application launch mode and grouping, alarms, events, and localization.</p></li>
 	<li><a href="app_manager_n.htm">Application Manager</a>	 <p>Allows you to retrieve information about an application.</p></li> 
 	<li><a href="badge_n.htm">Badge</a> <p>Allows you to create badges.</p> </li>
 	<li><a href="bundle_n.htm">Bundle</a> <p>Enables you to manage bundles and their content.</p></li>
-    <li><a href="data_control_n.htm">Data Control</a> <p>Allows your applications to exchange data.</p></li>    
+    <li><a href="data_control_n.htm">Data Control</a> <p>Allows your applications to exchange data.</p></li> 
 	<li><a href="message_port_n.htm">Message Port</a><p>Enables your applications to communicate with each other using message port communication.</p></li>
 	<li><a href="notification_n.htm">Notification</a> <p>Allows you to create and manage notifications.</p> </li>
    <li><a href="package_n.htm">Package Manager</a> <p>Allows you to install, uninstall, and update packages, and store their information.</p></li> 
    <li><a href="service_app_n.htm">Service Application</a> <p>Allows you to create and manage native service applications.</p></li>
+   <li><a href="shortcut_n.htm">Shortcut</a> <p>Allows you to add a shortcut for the Home application.</p></li>     
    <li><a href="widget_n.htm">Widget Application</a> <p>Allows you to create and manage widget applications.</p></li>
    </ul>
-<p>The following guides apply in <strong>mobile applications only</strong>:</p>
-	<ul>
-   <li><a href="shortcut_n.htm">Shortcut</a> <p>Allows you to add a shortcut for the Home application.</p></li>  
-  </ul> 
+
   <p>The following guides apply in <strong>wearable applications only</strong>:</p>
 	<ul>
    <li><a href="watch_n.htm">Watch Application</a> <p>Allows you to manage a watch application and display the current date and time accurately.</p></li>  
diff --git a/org.tizen.guides/html/native/app/app_manager_n.htm b/org.tizen.guides/html/native/app/app_manager_n.htm
index 694532e..8edfeee 100644
--- a/org.tizen.guides/html/native/app/app_manager_n.htm
+++ b/org.tizen.guides/html/native/app/app_manager_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/app/appcontrol_n.htm b/org.tizen.guides/html/native/app/appcontrol_n.htm
new file mode 100644
index 0000000..5849b42
--- /dev/null
+++ b/org.tizen.guides/html/native/app/appcontrol_n.htm
@@ -0,0 +1,448 @@
+<!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>App Control</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+        <ul class="toc">
+			<li><a href="#options">Handling the Launch Options</a></li>
+			<li><a href="#controls">Managing Application Controls</a></li>
+			<li><a href="#export_appcontrol">Exporting AppControl Functionality</a></li>
+			<li><a href="#group">Managing Application Groups</a></li>
+        </ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/appcontrol_tutorial_n.htm">App Control Tutorial</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Mobile Native</a></li>   
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Wearable Native</a></li> 
+			</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>App Control</h1> 
+
+<p>An application control (app control) is a way of sharing an application&#39;s functionality. To use another application&#39;s features through application controls reduces your efforts and time to develop your application.</p>
+
+<p>An application can be launched by the user from the Launcher or by another application. The application control can be used to describe either an action to be performed by other applications, or the results of the operation performed by a launched application. The application can receive results from the launched application.</p>
+<p>Regardless of how an application is launched, the application framework starts the application by creating a new process and calling the entry point of the application. Like a conventional Linux application, the main function of the application is its entry point. In the Tizen application, the main task is to hand over control to the application framework by calling the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function:</p>
+  
+<pre class="prettyprint">
+bool app_create(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Take necessary actions before the main event loop starts
+&nbsp;&nbsp;&nbsp;// Initialize UI resources and application data
+&nbsp;&nbsp;&nbsp;// If this function returns true, the application main loop starts
+&nbsp;&nbsp;&nbsp;// If this function returns false, the application terminates
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+void app_control(app_control_h app_control, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Handle the launch request
+}
+
+void app_pause(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes invisible
+}
+
+void app_resume(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes visible
+}
+
+void app_terminate(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Release all resources
+}
+
+int main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;struct appdata ad;
+ 
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback;
+     
+&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;memset(&amp;ad, 0x0, sizeof(struct appdata));
+
+&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function initializes the application and starts the main loop. It takes 4 parameters and uses them to initialize the application. The <span style="font-family: Courier New,Courier,monospace">argc</span> and <span style="font-family: Courier New,Courier,monospace">argv</span> parameters contain the values from the application framework, and you must never change their values. The third parameter is a state transition handler that is responsible for managing the state transitions the application goes through while it is running. The fourth parameter is application data to be passed to each state handler.</p>
+<p>When the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> is first invoked, the application moves from the ready state to the created state. The application has to initialize itself. During this transition, the application framework calls the application&#39;s <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> state transition callback just before the application enters the main loop. Within the registered callback, you must initialize the application resources and create the main window.</p>
+<p>If the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>, the application moves to the terminated state. If it returns <span style="font-family: Courier New,Courier,monospace">true</span>, the application enters the main loop.</p>
+
+ <h2 id="options" name="options">Handling the Launch Options</h2>
+<p>The application framework calls the application&#39;s <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback just after the application enters the main loop. This callback is passed to the <span style="font-family: Courier New,Courier,monospace">app_control</span> containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by other application. In all of these cases, the application is responsible for checking the content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> and responding appropriately. The content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> can be empty, if the application is launched by the user from the Launcher.</p>
+
+<pre class="prettyprint">static void app_control(app_control_h app_control, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;
+&nbsp;&nbsp;&nbsp;char *operation;
+&nbsp;&nbsp;&nbsp;char *uri;
+&nbsp;&nbsp;&nbsp;char *mime_type;
+ 
+&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, operation);
+ 
+&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_uri(app_control, &amp;uri);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime_type);
+ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (uri &amp;&amp; !strcmp(mime_type, &quot;image/jpg&quot;))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display_image_file(ad, uri); // Display a specific image file
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;if (ad-&gt;win)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_activate(ad-&gt;win);
+}
+</pre>
+<h2 id="controls" name="controls">Managing Application Controls</h2>
+<p>The App Control API provides functions for launching other applications with a specific operation, URI, and MIME type. The requesting application can get a result back from the launched application.</p>
+<p>To launch an application with the App Control API, create an <span style="font-family: Courier New,Courier,monospace">app_control</span> handle and add information to that handle. You can set the following information:</p>
+<ul>
+   <li>Operation: Action to be performed by the app control.</li>
+   <li>URI: Data itself to be performed.</li>
+   <li>MIME type: Specific type of the URI.</li>
+   <li>Application ID: ID of the application to be launched.</li>
+   <li>Extra data: Key-value pairs to provide additional information for the launch request and the result of the request.</li>
+</ul>
+<p>The operation is mandatory information for sending the launch request. The App Control API provides several functions to get and set the above information to the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle.</p>
+<p>To launch an application with the App Control API, use one of the following methods:</p>
+<ul>	
+   <li><a href="#explicit">Explicit launch</a>: Launch the application with the application ID.</li>
+   <li><a href="#implicit">Implicit launch</a>: Launch the application with an operation, URI, or MIME type.</li>
+</ul>
+<p>The application launched by the app control can return the result to the caller application.</p>
+
+<p>You can take advantage of the Tizen <a href="#common">base application functionalities</a> through the app control feature. You can also <a href="#export_appcontrol">export your application functionality</a> to allow other applications to launch your application.</p>
+
+<table class="note">
+<tbody>
+    <tr>
+        <th class="note">Note</th>
+    </tr>
+    <tr>
+        <td class="note">Since Tizen 2.4, application controls used to launch service applications outside the current package are not supported. Because of this, the service application is only allowed to be launched explicitly by the application in the same package.</td>
+    </tr>
+</tbody>
+</table>
+
+
+<h3 id="explicit" name="explicit">Explicit Launch</h3>
+
+<p>When you request an explicit launch:</p>
+
+<ul>
+   <li>If the underlying application launcher framework finds an application matched with the given application ID in the installed application list, it launches the application in a new process. If the matched application is not found, the framework returns the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_APP_NOT_FOUND</span> result. Additional information (such as operation, URI, or MIME type) is not used to select an application for an explicit launch.</li>
+   <li>If the operation setting in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle is set to <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span>, the application ID must be set. Otherwise the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_INVALID_PARAMETER</span> result is returned.</li>
+</ul>
+<p>The following code example launches a calculator application explicitly with the application ID:</p>
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;dlog.h&gt;
+ 
+#define TAG &quot;MY_TAG&quot;
+
+app_control_h app_control;
+ 
+app_control_create(&amp;app_control);
+app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
+app_control_set_app_id(app_control, &quot;org.tizen.calculator&quot;);
+ 
+if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a calculator app.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a calculator app.&quot;);
+}
+ 
+app_control_destroy(app_control);
+</pre>
+
+<h3 id="implicit" name="implicit">Implicit Launch</h3>
+
+<p>When you request an implicit launch:</p>
+
+<ul>
+<li>Only 3 data categories are used to determine which application can be launched: Operation, URI scheme, and MIME type.</li>
+<li>The application launcher framework iterates the desktop files of installed applications on the device to find applications where the 3 categories are exactly matched.</li>
+<li>If only one application is matched for the given categories, that application is launched. If multiple matching  applications are found, the application selector is shown and the user can select the proper application.</li>
+<li>Each app control requires a different combination of the 3 categories. For some, only one category is necessary (for example, URI), for others, all 3 can be needed. Check the app control list and required data in the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> to determine the needed categories.</li>
+<li>If no match is found, an error is returned.</li>
+</ul>
+<p>To allow the application launcher framework to find and select matching applications, each application must describe its operation, URI, or MIME type correctly.</p>
+
+<p>The following code example launches a camera application with the operation and MIME type:</p>
+
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;dlog.h&gt;
+
+#define TAG &quot;MY_TAG&quot;
+
+app_control_h app_control;
+ 
+app_control_create(&amp;app_control);
+app_control_set_operation(app_control, APP_CONTROL_OPERATION_CREATE_CONTENT);
+app_control_set_mime(app_control, &quot;image/jpg&quot;);
+if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
+}
+ 
+app_control_destroy(app_control);
+</pre>
+
+<p>The following code example launches a gallery application with the operation, URI, and MIME type:</p>
+
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;dlog.h&gt;
+
+#define TAG &quot;MY_TAG&quot;
+ 
+app_control_h app_control;
+ 
+app_control_create(&amp;app_control);
+app_control_set_operation(app_control, APP_CONTROL_OPERATION_VIEW);
+app_control_set_uri(app_control, &quot;file:///home/myhome/Photos/1_photo.jpg&quot;);
+app_control_set_mime(app_control, &quot;image/*&quot;);
+ 
+if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
+}
+ 
+app_control_destroy(app_control);
+</pre>
+
+<table class="note">
+<tbody>
+    <tr>
+        <th class="note">Note</th>
+    </tr>
+    <tr>
+        <td class="note">Since Tizen 2.4, service applications are only allowed to be launched explicitly. All service applications are excluded from matches of implicit launch requests.</td>
+    </tr>
+</tbody>
+</table>
+
+<h3 id="results" name="results">Getting the App Control Results</h3>
+<p>The app control result from the requested application is delivered to the caller application in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle with extra data. For some cases, the App Control API provides pre-defined extra data keys.</p>
+<p>If you cannot find a proper key, you can define your own key. However, the customized key must be shared between the caller and callee applications.</p>
+
+<p>The following code example gets the result of an app control request by implementing an <span style="font-family: Courier New,Courier,monospace">app_control</span> result callback:</p>
+
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;dlog.h&gt;
+ 
+#define TAG &quot;MY_TAG&quot;
+ 
+// Callback function to get result
+static void app_control_result(app_control_h request, app_control_h reply, app_control_result_e result, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;char *value;
+ 
+&nbsp;&nbsp;&nbsp;if (result == APP_CONTROL_RESULT_SUCCEEDED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &amp;value) == APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;[app_control_result_cb] Succeeded: value(%s)&quot;, value);
+&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;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] Failed&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] APP_CONTROL_RESULT_FAILED.&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The following code example requests the launch of another application:</p>
+
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;dlog.h&gt;
+
+#define TAG &quot;MY_TAG&quot;
+
+app_control_h app_control;
+ 
+app_control_create(&amp;app_control);
+ 
+app_control_set_operation(app_control, APP_CONTROL_OPERATION_CREATE_CONTENT);
+app_control_set_mime(app_control, &quot;text/plain&quot;);
+ 
+if (app_control_send_launch_request(app_control, app_control_result, NULL) == APP_CONTROL_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded: the application is launched.&quot;);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch an application.&quot;);
+}
+ 
+app_control_destroy(app_control);
+</pre>
+
+<p>The following code example implements an <span style="font-family: Courier New,Courier,monospace">app_control</span> callback in the callee application:</p>
+
+<pre class="prettyprint">
+static void app_control(app_control_h app_control, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;
+&nbsp;&nbsp;&nbsp;char *operation;
+&nbsp;&nbsp;&nbsp;char *mime;
+&nbsp;&nbsp;&nbsp;app_control_h reply;
+&nbsp;&nbsp;&nbsp;char *app_id;
+ 
+&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, &amp;operation);
+ 
+&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_CREATE_CONTENT)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime);
+ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(mime, &quot;text/plain&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;reply);
+ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_get_app_id(&amp;app_id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(reply, APP_CONTROL_DATA_SELECTED, app_id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_reply_to_launch_request(reply, app_control, APP_CONTROL_RESULT_SUCCEEDED);
+ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(reply);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+
+<h3 id="common" name="common">Common Application Controls</h3>
+
+<p>Tizen provides common application controls that allow you to take advantage of the Tizen base application functionalities. You can use the common application controls to perform some basic tasks, such as selecting a file or taking a picture.</p>
+
+<p>The following common application controls are available:</p>
+<ul>
+			<li><a href="common_appcontrol_n.htm#browser">Browser</a></li>
+			<li><a href="common_appcontrol_n.htm#calendar">Calendar</a></li>
+			<li><a href="common_appcontrol_n.htm#call">Call</a></li>
+			<li><a href="common_appcontrol_n.htm#contact">Contact</a></li>
+			<li><a href="common_appcontrol_n.htm#email">Email</a></li>
+			<li><a href="common_appcontrol_n.htm#map">Map</a></li>
+			<li><a href="common_appcontrol_n.htm#message">Message</a></li>
+			<li><a href="common_appcontrol_n.htm#settings_bluetooth">Settings for Bluetooth</a></li>
+			<li><a href="common_appcontrol_n.htm#settings_location">Settings for Location</a></li>
+			<li><a href="common_appcontrol_n.htm#settings_nfc">Settings for NFC</a></li>
+			<li><a href="common_appcontrol_n.htm#settings_wifi">Settings for Wi-Fi</a></li>
+			<li><a href="common_appcontrol_n.htm#settings_main">System Settings</a></li>
+</ul>
+
+
+<h2 id="export_appcontrol" name="export_appcontrol">Exporting AppControl Functionality</h2>
+<p>You can advertise your application features to other applications by exporting your application control functionalities. To allow other applications to find and use your application features implicitly without the application ID, declare your application control information in the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file:</p>
+	<pre class="prettyprint">
+&lt;app-control&gt;
+&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/xhtml+xml&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;http://test.com&quot;/&gt;
+&lt;/app-control&gt;
+&lt;app-control&gt;
+&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/call&quot;/&gt;
+&lt;/app-control&gt;
+</pre>
+	<p>
+		The resolution filter is used when resolving the application control. Each entry of the resolution filter has the <span style="font-family: Courier New, Courier, monospace">&lt;app-control&gt;</span>
+		element and forms an application resolution unit. The additional URI or MIME type information must contain the associated operation ID, and the retrieved application control must have the specified
+		application ID and operation ID when resolving the application control.
+	</p>
+	<p>
+		You can specify the application control information of your application in the <a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE; an
+		operation ID must be specified for the application control.
+	</p>  
+
+<h2 id="group" name="group">Managing Application Groups</h2>
+<p>You can define the application launch mode and group your applications into entities that can be managed together.</p>
+
+  <p>The main application group features include:</p>
+  <ul>
+	<li>Defining the application launch mode
+	<p>When an application is launched through an app control, its launch mode defines its behavior:</p>
+		<ul><li>The single launch mode means that the application is launched as a main application (in a new group).</li>
+		<li>The caller launch mode means that the application is launched as a sub application belonging to the same group as the caller application who is causing the application to be launched.</li></ul>
+	<p>You can set the application launch mode <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#launch_mode">in the manifest file</a> using the <span style="font-family: Courier New,Courier,monospace">launch_mode</span> attribute of the <span style="font-family: Courier New,Courier,monospace">&lt;ui-application&gt;</span> element. If the launch mode is set to <span style="font-family: Courier New,Courier,monospace">caller</span>, the application that calls the app control can define the launch mode for the called application using the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function. However, if the called application has set its launch mode in its manifest file to <span style="font-family: Courier New,Courier,monospace">single</span>, that setting overrides the caller application&#39;s launch mode request.</p>
+	</li>
+	<li>Managing the application group
+	<p>Applications in a same group act as if they are in 1 stack. For example, if an application A wants to send an email using an email application B, the application A can launch the email application B, making the email application B a sub application in the same group as the application A. When both applications are running, and the user presses the home button, both applications are hidden. When the user later resumes the caller application (application A), the email application B is shown on top of the caller application.</p>
+	<p>If an application is launched in a group, it can be terminated by the main (first) application in the group. If the main application is terminated or killed, the sub applications in the group are terminated automatically (they can be terminated by the framework even if they are hidden).</p>
+
+	<p class="figure">Figure: Group behavior</p> 
+<p align="center"><img alt="Group behavior" src="../../images/app_group_behavior.png" /></p> 
+	
+	</li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>	
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/application_n.htm b/org.tizen.guides/html/native/app/application_n.htm
index e4bce8d..2222f6f 100644
--- a/org.tizen.guides/html/native/app/application_n.htm
+++ b/org.tizen.guides/html/native/app/application_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -24,11 +24,8 @@
         <ul class="toc">
 			<li><a href="#loop">Managing the Event Loop</a></li>
 			<li><a href="#callback">Registering Callbacks for Events</a></li>
-			<li><a href="#app_controls">Launching Applications</a></li>
-			<li><a href="#alarms">Handling Alarms</a></li>
 			<li><a href="#state_trans">Managing Application States and Transitions</a></li>
 			<li><a href="#allow_bg">Allowing Applications to Run on the Background</a></li>
-			<li><a href="#app_strings">Localizing Application Strings</a></li>
         </ul>
 		<p class="toc-title">Related Info</p>
 		<ul class="toc">
@@ -48,18 +45,23 @@
   <li><a href="#loop">Starting or exiting the main event loop</a> (mandatory for every Tizen native application)</li>
   <li><a href="#callback">Registering callbacks for application state change events</a></li>
   <li><a href="#callback">Registering callbacks for basic system events</a></li>
-  <li><a href="#app_controls">Launching applications</a></li>
-  <li><a href="#alarms">Handling alarms</a></li>
   <li><a href="#state_trans">Managing application states and transitions</a></li>
   <li><a href="#allow_bg">Allowing applications to run on the background</a></li>
-  <li><a href="#app_strings">Localizing application strings</a></li>
+</ul>
+
+<p>In addition, you can use sub-category APIs to:</p>
+<ul>
+  <li><a href="alarm_n.htm">Handle alarms with the Alarm API</a></li>
+  <li><a href="appcontrol_n.htm">Launch applications with the App Control API</a></li>  
+  <li><a href="event_n.htm">Broadcast and subscribe to events with the Event API</a></li>  
+  <li><a href="internationalization_n.htm">Localize application strings with the Internationalization API</a></li>  
 </ul>
   
   <h2 id="loop" name="loop">Managing the Event Loop</h2>
 <p>In order for an application to operate successfully, it must receive events from the platform. For this, it must start the main event loop - this is mandatory for all Tizen native applications.</p>
 <p>The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function is used to start the event loop. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s structure</span> variable, which is passed to the function.</p>
 
-<p>For more information about launching applications, see <a href="#app_controls">Launching Applications</a>.</p>
+<p>For more information about launching applications, see <a href="appcontrol_n.htm">App Control</a>.</p>
 
 <h2 id="callback" name="callback">Registering Callbacks for Events</h2>
 <p>The following table lists the application state change events.</p>
@@ -125,466 +127,13 @@
      <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_REGION_FORMAT_CHANGED</span></td> 
      <td>Event type for the callback function that is responsible for refreshing the display into the new time zone.</td> 
     </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_SUSPENDED_STATE_CHANGED</span></td> 
-     <td>Event type for the callback function that is responsible for taking necessary actions before enter to the suspended state or after exit from the state. (Since Tizen 2.4)</td> 
-    </tr> 
+	<tr>
+	<td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_SUSPENDED_STATE_CHANGED</span></td> 
+	<td>Event type for the callback function that is responsible for taking necessary actions before entering the suspended state or after exiting from the state. (Supported since Tizen 2.4.)</td> 
+	</tr>
    </tbody> 
   </table>  
-  
-  <h2 id="app_controls" name="app_controls">Launching Applications</h2> 
-<p>An application can be launched by the user from the Launcher or by another application.</p>
-<p>The App Control can be used to describe either an action to be performed by other applications, or the results of the operation performed by a launched application. The application can receive results from the launched application.</p>
-<p>Regardless of how an application is launched, the application framework starts the application by creating a new process and calling the entry point of the application. Like a conventional Linux application, the main function of the application is its entry point. In the Tizen application, the main task is to hand over control to the application framework by calling the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function:</p>
-  
-<pre class="prettyprint">
-bool app_create(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Take necessary actions before the main event loop starts
-&nbsp;&nbsp;&nbsp;// Initialize UI resources and application data
-&nbsp;&nbsp;&nbsp;// If this function returns true, the application main loop starts
-&nbsp;&nbsp;&nbsp;// If this function returns false, the application terminates
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-void app_control(app_control_h app_control, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Handle the launch request
-}
-
-void app_pause(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes invisible
-}
-
-void app_resume(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes visible
-}
-
-void app_terminate(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Release all resources
-}
-
-int main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;struct appdata ad;
- 
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback;
-     
-&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;memset(&amp;ad, 0x0, sizeof(struct appdata));
-
-&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function initializes the application and starts the main loop. It takes 4 parameters and uses them to initialize the application. The <span style="font-family: Courier New,Courier,monospace">argc</span> and <span style="font-family: Courier New,Courier,monospace">argv</span> parameters contain the values from the application framework, and you must never change their values. The third parameter is a state transition handler that is responsible for managing the state transitions the application goes through while it is running. The fourth parameter is application data to be passed to each state handler.</p>
-<p>When the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> is first invoked, the application moves from the ready state to the created state. The application has to initialize itself. During this transition, the application framework calls the application&#39;s <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> state transition callback just before the application enters the main loop. Within the registered callback, you must initialize the application resources and create the main window.</p>
-<p>If the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>, the application moves to the terminated state. If it returns <span style="font-family: Courier New,Courier,monospace">true</span>, the application enters the main loop.</p>
-
- <h3 id="options" name="options">Handling the Launch Options</h3>
-<p>The application framework calls the application&#39;s <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback just after the application enters the main loop. This callback is passed to the <span style="font-family: Courier New,Courier,monospace">app_control</span> containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by other application. In all of these cases, the application is responsible for checking the content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> and responding appropriately. The content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> can be empty, if the application is launched by the user from the Launcher.</p>
-
-<pre class="prettyprint">static void app_control(app_control_h app_control, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;
-&nbsp;&nbsp;&nbsp;char *operation;
-&nbsp;&nbsp;&nbsp;char *uri;
-&nbsp;&nbsp;&nbsp;char *mime_type;
- 
-&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, operation);
- 
-&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_uri(app_control, &amp;uri);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime_type);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (uri &amp;&amp; !strcmp(mime_type, &quot;image/jpg&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display_image_file(ad, uri); // Display a specific image file
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
- 
-&nbsp;&nbsp;&nbsp;if (ad-&gt;win)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_activate(ad-&gt;win);
-}
-</pre>
-<h3 id="controls" name="controls">Application Controls</h3>
-<p>The App control API provides functions for launching other applications with a specific operation, URI, and MIME type. The requesting application can get a result back from the launched application.</p>
-<p>To launch an application with the App control API, create an <span style="font-family: Courier New,Courier,monospace">app_control</span> handle and add information to that handle. You can set the following information:</p>
-<ul>
-   <li>Operation: Action to be performed by the app control.</li>
-   <li>URI: Data itself to be performed.</li>
-   <li>MIME type: Specific type of the URI.</li>
-   <li>Application ID: ID of the application to be launched.</li>
-   <li>Extra data: Key-value pairs to provide additional information for the launch request and the result of the request.</li>
-</ul>
-<p>The operation is mandatory information for sending the launch request. The app control API provides several functions to get and set the above information to the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle.</p>
-<p>To launch an application with the app control API, use one of the following methods:</p>
-<ul>	
-   <li><a href="#explicit">Explicit launch</a>: Launch the application with the application ID.</li>
-   <li><a href="#implicit">Implicit launch</a>: Launch the application with an operation, URI, or MIME type.</li>
-</ul>
-<p>The application launched by the app control can return the result to the caller application.</p>
-
-<p>You can take advantage of the Tizen <a href="#platform_appcontrol">base application functionalities</a> through the app control feature. You can also <a href="#export_appcontrol">export your application functionality</a> to allow other applications to launch your application.</p>
-
-<table class="note"> 
-<tbody> 
-    <tr> 
-        <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-        <td class="note">Since Tizen 2.4, application controls of service applications over out of packages are not supported; hence the service application is only allowed to be launched explicitly by the application in the same package.</td> 
-    </tr> 
-</tbody> 
-</table>
-
-
-<h4 id="explicit" name="explicit">Explicit Launch</h4>
-
-<p>When you request an explicit launch:</p>
-
-<ul>
-   <li>If the underlying application launcher framework finds an application matched with the given application ID in the installed application list, it launches the application in a new process. If the matched application is not found, the framework returns the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_APP_NOT_FOUND</span> result. Additional information (such as operation, URI, or MIME type) is not be used to select an application for an explicit launch.</li>
-   <li>If the operation setting in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle is set to <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span>, the application ID must be set. Otherwise the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_INVALID_PARAMETER</span> result is returned.</li>
-</ul>
-<p>The following code example launches a calculator application explicitly with the application ID:</p>
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;dlog.h&gt;
- 
-#define TAG "MY_TAG"
-
-app_control_h app_control;
- 
-app_control_create(&amp;app_control);
-app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
-app_control_set_app_id(app_control, &quot;org.tizen.calculator&quot;);
- 
-if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a calculator app.&quot;);
-} 
-else 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a calculator app.&quot;);
-}
- 
-app_control_destroy(app_control);
-</pre>
-
-<h4 id="implicit" name="explicit">Implicit Launch</h4>
-
-<p>When you request an implicit launch:</p>
-
-<ul>
-<li>Only 3 data categories are used to determine which application can be launched: Operation, URI scheme, and MIME type.</li>
-<li>The application launcher framework iterates the desktop files of installed applications on the device to find applications where the 3 categories are exactly matched.</li>
-<li>If only one application is matched for the given categories, that application is launched. If multiple matching  applications are found, the application selector is shown and the user can select the proper application.</li>
-<li>Each app control requires a different combination of the 3 categories. For some, only one category is necessary (for example, URI), for others, all 3 can be needed. Check the app control list and required data in the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> to determine the needed categories.</li>
-</ul>
-<p>To allow the application launcher framework to find and select matching applications, each application must describe its operation, URI, or MIME type correctly.</p>
-
-<p>The following code example launches a camera application with the operation and MIME type:</p>
-
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;dlog.h&gt;
-
-#define TAG "MY_TAG"
-
-app_control_h app_control;
- 
-app_control_create(&amp;app_control);
-app_control_set_operation(app_control, APP_CONTROL_OPERATION_CREATE_CONTENT);
-app_control_set_mime(app_control, &quot;image/jpg&quot;);
-if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
-} 
-else 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
-}
- 
-app_control_destroy(app_control);
-</pre>
-
-<p>The following code example launches a gallery application with the operation, URI, and MIME type:</p>
-
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;dlog.h&gt;
-
-#define TAG "MY_TAG"
- 
-app_control_h app_control;
- 
-app_control_create(&amp;app_control);
-app_control_set_operation(app_control, APP_CONTROL_OPERATION_VIEW);
-app_control_set_uri(app_control, &quot;file:///home/myhome/Photos/1_photo.jpg&quot;);
-app_control_set_mime(app_control, &quot;image/*&quot;);
- 
-if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
-} 
-else 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
-}
- 
-app_control_destroy(app_control);
-</pre>
-
-<table class="note"> 
-<tbody> 
-    <tr> 
-        <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-        <td class="note">Since Tizen 2.4, service applications are only allowed to be launched explicitly. Any service applications are excluded from matches of implicit launch requests.</td>
-    </tr> 
-</tbody> 
-</table>
-
-<h4 id="results" name="results">Getting the App Control Results</h4>
-<p>The app control result from the requested application is delivered to the caller application in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle with extra data. For some cases, the App control API provides pre-defined extra data keys.</p>
-<p>If you cannot find a proper key, you can define your own key. However, the customized key must be shared between the caller and callee applications.</p>
-
-<p>The following code example gets the result of an app control request by implementing an <span style="font-family: Courier New,Courier,monospace">app_control</span> result callback:</p>
-
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;dlog.h&gt;
- 
-#define TAG &quot;MY_TAG&quot;
- 
-// Callback function to get result
-static void app_control_result(app_control_h request, app_control_h reply, app_control_result_e result, void *user_data) 
-{
-&nbsp;&nbsp;&nbsp;char *value;
- 
-&nbsp;&nbsp;&nbsp;if (result == APP_CONTROL_RESULT_SUCCEEDED) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &amp;value) == APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;[app_control_result_cb] Succeeded: value(%s)&quot;, value);
-&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;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] Failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
- 
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] APP_CONTROL_RESULT_FAILED.&quot;);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The following code example requests the launch of another application:</p>
-
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;dlog.h&gt;
-
-#define TAG &quot;MY_TAG&quot;
-
-app_control_h app_control;
- 
-app_control_create(&amp;app_control);
- 
-app_control_set_operation(app_control, APP_CONTROL_OPERATION_CREATE_CONTENT);
-app_control_set_mime(app_control, &quot;text/plain&quot;);
- 
-if (app_control_send_launch_request(app_control, app_control_result, NULL) == APP_CONTROL_ERROR_NONE) 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded: the application is launched.&quot;);
-} 
-else 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch an application.&quot;);
-}
- 
-app_control_destroy(app_control);
-</pre>
-
-<p>The following code example implements an <span style="font-family: Courier New,Courier,monospace">app_control</span> callback in the callee application:</p>
-
-<pre class="prettyprint">
-static void app_control(app_control_h app_control, void *user_data) 
-{
-&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;
-&nbsp;&nbsp;&nbsp;char *operation;
-&nbsp;&nbsp;&nbsp;char *mime;
-&nbsp;&nbsp;&nbsp;app_control_h reply;
-&nbsp;&nbsp;&nbsp;char *app_id;
- 
-&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, &amp;operation);
- 
-&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_CREATE_CONTENT)) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(mime, &quot;text/plain&quot;)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;reply);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_get_app_id(&amp;app_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(reply, APP_CONTROL_DATA_SELECTED, app_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_reply_to_launch_request(reply, app_control, APP_CONTROL_RESULT_SUCCEEDED);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(reply);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h3 id="export_appcontrol" name="export_appcontrol">Exporting AppControl Functionality</h3>
-<p>You can export functionalities of your application to be used in another application. However, if the other application uses the application control functionality implicitly without the
-		application ID, it must declare the application control information in its manifest file:</p>
-	<pre class="prettyprint">
-&lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/xhtml+xml&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;http://test.com&quot;/&gt;
-&lt;/app-control&gt;
-&lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/call&quot;/&gt;
-&lt;/app-control&gt;
-</pre>
-	<p>
-		The resolution filter is used when resolving the application control. Each entry of the resolution filter has the <span style="font-family: Courier New, Courier, monospace">&lt;app-control&gt;</span>
-		element and forms an application resolution unit. The additional URI or MIME type information must contain the associated operation ID, and the retrieved application control must have the specified
-		application ID and operation ID when resolving the application control.
-	</p>
-	<p>
-		You can specify the application control information of your application in the <a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE; an
-		operation ID must be specified for the application control.
-	</p>  
-
-<h3 id="platform_appcontrol" name="platform_appcontrol">Using Platform Application Controls</h3>
-
-<p>Tizen provides base applications, such as Web browser, image viewer, music player, and video player. Using the App Control module (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications), you can take advantage of the Tizen base application functionalities.</p> 
-
-<p>The Tizen platform provides the platform application controls for the following base applications:</p>
-<ul>
-<li>FileManager</li>
-<li>ImageViewer</li>
-<li>Internet</li>
-<li>MusicPlayer</li>
-<li>VideoPlayer</li>
-</ul>
-<p>The following table defines the details of each platform application control.</p>
-  <table> 
-   <caption>
-     Table: Tizen base application services 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Service</th> 
-     <th>Operation</th> 
-     <th>Scheme</th> 
-     <th>MIME</th> 
-    </tr> 
-    <tr> 
-     <td>Browsing a Web page</td> 
-     <td rowspan="4"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td> 
-     <td>
-		<ul>
-		<li><span style="font-family: Courier New,Courier,monospace">http</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">https</span></li> 
-		</ul>
-	 </td>
-	 <td>-</td> 
-    </tr> 
-    <tr> 
-     <td>Displaying an image</td> 
-     
-     <td>		
-	 <ul>
-		<li><span style="font-family: Courier New,Courier,monospace">file</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">http</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">https</span></li> 
-	</ul>
-	</td> 
-     <td>	 
-	 <ul>
-		<li><span style="font-family: Courier New,Courier,monospace">image/bmp</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">image/gif</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">image/jpeg</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">image/png</span></li>
-	 </ul>
-	 </td> 
-    </tr> 
-	<tr> 
-     <td>Playing a sound file</td> 
-	 <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">file</span></td> 
-     <td>
-	 <ul>
-		<li><span style="font-family: Courier New,Courier,monospace">audio/aac</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">audio/amr</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">audio/mp3</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">audio/wav</span></li>
-	 </ul>
-	 </td> 
-    </tr> 
-    <tr> 
-     <td>Playing a video file</td> 
-     
-	<td>
-	 <ul>
-		<li><span style="font-family: Courier New,Courier,monospace">video/mp4</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">video/3gpp</span></li>
-	 </ul>
-	 </td> 
-    </tr> 
-    <tr> 
-     <td>Selecting a file</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></td> 
-     <td>
-	 <ul>
-		<li><span style="font-family: Courier New,Courier,monospace">*/*</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
-		<li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
-	 </ul>
-	 </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-
-    <table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Tizen provides support for the defined MIME types of the base application services depending on the platform implementation.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-
-
-  
-  
-  <h2 id="alarms" name="alarms">Handling Alarms</h2>
-
-<p>The Alarm API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">wearable</a> applications) provides functions to launch an application at a specific time. The mechanism involved in launching the application is the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications).</p>
-<p>The AppControl API allows launching an application explicitly, giving its package name, or providing certain criteria that the application must meet. For example, the criteria can include the type of data on which the application must be able to operate. The structure containing the criteria is called an appcontrol.</p>
-<p>For more information, see the <a href="#app_controls">Launching Applications</a> guide.</p>
-  
+   
 <h2 id="state_trans" name="state_trans">Managing Application States and Transitions</h2> 
 
 <p>The Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. As the application is starting, the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback is executed and the main event loop starts. The application now normally becomes the frontmost window, with focus. When the application loses the frontmost or focus status, the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback is invoked and your application goes into a pause state. The pause state means that the application is not terminated but is running in the background. The application can go into a pause state because:</p>
@@ -603,7 +152,7 @@ static void app_control(app_control_h app_control, void *user_data)
 
 <p>When your application starts exiting, the <span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span> callback is invoked. Your application terminates because:</p>
 <ul>
-  <li>Your application itself requests to exit by calling <span style="font-family: Courier New,Courier,monospace">ui_app_exit()</span> function to terminate the event loop.</li>
+  <li>Your application itself requests to exit by calling the <span style="font-family: Courier New,Courier,monospace">ui_app_exit()</span> function to terminate the event loop.</li>
   <li>The Low Memory Killer is killing your application in a low memory situation.</li>
 </ul>
 <p>The application state changes are managed by the underlying framework. The following figure and table illustrate the application states.</p>
@@ -653,7 +202,7 @@ static void app_control(app_control_h app_control, void *user_data)
 <p>Since Tizen 2.4, the application is not allowed to run on the background except when it is explicitly declared to do so. The following table lists the background categories that allow the application to run on the background.</p>
 
 <table>
-   <caption>Table: Allowed Background Application Policy</caption> 
+   <caption>Table: Allowed background application policy</caption> 
    <tbody> 
     <tr> 
      <th>Background category</th> 
@@ -670,7 +219,7 @@ static void app_control(app_control_h app_control, void *user_data)
      <tr> 
      <td>Download</td> 
      <td>Downloading data with the Tizen Download-manager API</td>
-<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>
+<td>Download API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">mobile</a> applications)</td>
 <td><span style="font-family: Courier New,Courier,monospace">download</span></td> 
     </tr> 
     <tr> 
@@ -709,7 +258,7 @@ static void app_control(app_control_h app_control, void *user_data)
 &nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.test&quot; exec=&quot;text&quot; type=&quot;capp&quot; multiple=&quot;false&quot; taskmanage=&quot;true&quot; nodisplay=&quot;false&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;rest.png&lt;/icon&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;rest&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- for API version 2.4 or higher --&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--For API version 2.4 or higher--&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;media&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;download&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;background-network&quot;/&gt;
@@ -726,264 +275,35 @@ static void app_control(app_control_h app_control, void *user_data)
       <th class="note">Note</th>
     </tr>
     <tr>
-      <td class="note"><p>The <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element is supported for the API version equal or higher than 2.4. An application with <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> declared may failed to be installed on the devices with Tizen lower than version 2.4. In this case, for those who work on the API version lower than 2.4 should declare the background category in <span style="font-family: Courier New,Courier,monospace">&lt;metadata key=&quot;http://tizen.org/metadata/background-category/value&quot;/&gt;</span> if the application should run on the background in the devices of Tizen 2.4 or higher version.</p></td>
-    </tr>
-    <tr>
-      <td class="note"><pre class="prettyprint">
+	<td class="note">The <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element is supported since the API version 2.4. An application with a <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element declared can fail to be installed on devices with a Tizen version lower than 2.4. In this case, declare the background category as <span style="font-family: Courier New,Courier,monospace">&lt;metadata key=&quot;http://tizen.org/metadata/background-category/&lt;value&gt;&quot;/&gt;</span>.</td>
+     </tr>
+	<tr>
+<td class="note">
+<pre class="prettyprint">
 &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
 &lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.3&quot; package=&quot;org.tizen.test&quot; version=&quot;1.0.0&quot;&gt;
 &nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.test&quot; exec=&quot;text&quot; type=&quot;capp&quot; multiple=&quot;false&quot; taskmanage=&quot;true&quot; nodisplay=&quot;false&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;rest.png&lt;/icon&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;rest&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- for API version lower than 2.4 --&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key="http://tizen.org/metadata/background-category/media&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key="http://tizen.org/metadata/background-category/download&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key="http://tizen.org/metadata/background-category/background-network&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--For API version lower than 2.4--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/background-category/media&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/background-category/download&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/background-category/background-network&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;
 &nbsp;&nbsp;&nbsp;&lt;service-application appid=&quot;org.tizen.test-service&quot; exec=&quot;test-service&quot; multiple=&quot;false&quot; type=&quot;capp&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key="http://tizen.org/metadata/background-category/background-network&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key="http://tizen.org/metadata/background-category/location&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/background-category/background-network&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/background-category/location&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;/service-application&gt;
 &lt;/manifest&gt;
-</pre></td>
-    </tr>
-    <tr>
-      <td class="note"><p><span style="font-family: Courier New,Coruier,monospace">&lt;metadata key=&quot;http://tizen.org/metadata/bacgkround-category/value&quot;/&gt;</span> has no effect on Tizen 2.3 devices, but has same effects with <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> declared on Tizen 2.4 or higher devices.</p>
-  </tbody>
-</table>
-<p>The background category of your application can be specified in the
-<a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE.</p>
-
-  <h2 id="app_strings" name="app_strings">Localizing Application Strings</h2> 
-	<p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">wearable</a> applications), which makes strings translatable and places them  in .po (portable object) files.</p> 
-
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-    <tr>
-      <td class="note"><p>The .po files must be placed in the <span style="font-family: Courier New,Courier,monospace">res/po</span> directory of the application. The files can be edited using the <a href="../../../../org.tizen.devtools/html/native_tools/po_file_editor_n.htm">PO File Editor</a> provided by the Tizen SDK.</p></td> 
-    </tr>
-  </tbody>
-</table>
-
-<p>Depending on the device&#39;s locale information, your application must load the proper resource set. If no matching resource set is found for the device&#39;s current locale, the default resource set is used.</p>		  
-
-<p>To get the localized value of a string, use the <span style="font-family: Courier New,Courier,monospace">MsgID</span> shown in the PO File Editor, prefaced with an underscore <span style="font-family: Courier New,Courier,monospace">_</span> (for example, <span style="font-family: Courier New,Courier,monospace">_(&lt;MsgID&gt;)</span>). The underlying implementation calls the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function to retrieve the localized value:</p>
-
-<pre class="prettyprint">
-char *hello_text = i18n_get_text(&quot;Hello&quot;);
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">hello_text</span> variable is set to the localized text for &quot;Hello&quot; for the current locale of the device.</p>
-<p>When you change the language setting on the device, the text changes in the application according to the current language.</p>
-
-<h3 id="marking" name="marking">Marking Text Parts as Translatable</h3>
-<p>The most common way to use a translation involves the following APIs: </p>
-
-<pre class="prettyprint">
-elm_object_translatable_text_set(Evas_Object *obj, const char *text)
-elm_object_item_translatable_text_set(Elm_Object_Item *it, const char *text)
-</pre>
-
-<p>They set the untranslated string for the &quot;default&quot; part of the given <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> or <span style="font-family: Courier New,Courier,monospace;">Elm_Object_Item</span> and mark the string as translatable.</p>
-
-<p>Similar functions are available if you wish to set the text for a part that is not &quot;default&quot;: </p>
-
-<pre class="prettyprint">
-elm_object_translatable_part_text_set(Evas_Object *obj, const char *part, const char *text)
-elm_object_item_translatable_part_text_set(Elm_Object_Item *it, const char *part, const char *text)
-</pre>
-
-<p>It is important to provide the untranslated string to these functions, because the EFLs trigger the translation themselves and re-translate the strings automatically, if the system language changes.</p>
-
-
-<h3 id="translating" name="translating">Translating Texts Directly</h3>
-
-<p>The approach described in the previous section is not applicable all of the time. For instance, it does not work if you are populating a genlist, if you need plurals in the translation or if you want to do something else than put the translation in elementary UI components.</p>
-
-<p>It is possible to retrieve the translation for a given text through the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> function from <span style="font-family: Courier New,Courier,monospace;">app_i18n.h</span>.</p>
-
-<pre class="prettyprint">
-char *i18n_get_text(const char *msgid);
-</pre>
-
-<p>This function takes as input a string (that is copied to an <span style="font-family: Courier New,Courier,monospace;">msgid</span> field in the .po files) and returns the translation (the corresponding <span style="font-family: Courier New,Courier,monospace;">msgstr</span> field).</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Do not modify or free the return value of these functions. They are statically allocated.</td>
-</tr>
-</tbody>
-</table> 
-
-<p>When giving the text for a genlist item, you can use it in a similar manner as in the example below.</p>
-
-<pre class="prettyprint">
-#include &quot;app_i18n.h&quot;
-static char *_genlist_text_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;return strdup(i18n_get_text(&quot;Some Text&quot;));
-}
-</pre>
-
-<h4>Plurals</h4>
-<p>Plurals are handled through the <span style="font-family: Courier New,Courier,monospace;">ngettext()</span> function. Its prototype is shown below.</p>
-
-<pre class="prettyprint">
-char *ngettext(const char *msgid, const char *msgid_plural, unsigned long int n);
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">msgid</span> is the same as before, that is, the untranslated string</li>
-<li><span style="font-family: Courier New,Courier,monospace;">msgid_plural</span> is the plural form of <span style="font-family: Courier New,Courier,monospace;">msgid</span></li>
-<li>the quantity (in English, 1 is singular and anything else is plural)</li>
-</ul>
-
-<p>A matching fr.po file contains the following lines.</p>
-
-<pre class="prettyprint">
-msgid &quot;%d Comment&quot;
-msgid_plural &quot;%d Comments&quot;
-msgstr[0] &quot;%d commentaire&quot;
-msgstr[1] &quot;%d commentaires&quot;
-</pre>
-
-<h4>Several Plurals</h4>
-<p>It is possible to have several plural forms. For instance, the .po file for Polish could contain the following lines.</p>
-
-<pre class="prettyprint">
-msgid &quot;%d Comment&quot;
-msgid_plural &quot;%d Comments&quot;
-msgstr[0] &quot;%d Komentarz&quot;
-msgstr[1] &quot;%d Komentarze&quot;
-msgstr[2] &quot;%d Komentarzy&quot;
-</pre>
-
-<p>The index values after <span style="font-family: Courier New,Courier,monospace;">msgstr</span> are defined in system-wide settings. The ones for Polish are given below:</p>
-
-<pre class="prettyprint">
-&quot;Plural-Forms: nplurals = 3; plural = n = = 1 ? 0 : n%10&gt; = 2 &amp;&amp; n%10&lt; = 4 &amp;&amp; (n%100&lt;10 | | n%100&gt; = 20) ? 1 : 2;\n&quot;
-</pre>
-
-<p>There are three forms (including singular). The index is 0 (singular), if the given integer n is 1. Then, if <span style="font-family: Courier New,Courier,monospace;">(n % 10 &gt;= 2 &amp;&amp; % 10 &lt;= 4 &amp;&amp; (n % 100 &lt; 10 | | n % 100 &gt;= 20)</span>, the index is 1, otherwise it is 2.</p>
-
-<h4>Handling Language Changes at Runtime</h4>
-
-<p>The user can change the system language settings at any time. When that is done, the framework notifies the application, which changes the language used in the Elementary. The UI components receive a &quot;language,changed&quot; signal and reset their text.</p>
-
-<p>This is how to handle the framework event:</p>
-
-<pre class="prettyprint">
-static void
-_app_language_changed(void *data)
-{
-&nbsp;&nbsp;&nbsp;char *language;
-&nbsp;&nbsp;&nbsp;// Retrieve the current system language
-&nbsp;&nbsp;&nbsp;system_settings_get_value_string(SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE, &amp;language);
-&nbsp;&nbsp;&nbsp;// Set the language in elementary
-&nbsp;&nbsp;&nbsp;elm_language_set(language);
-&nbsp;&nbsp;&nbsp;free(language);
-}
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, _app_language_changed, &amp;ad);
-}
-</pre>
-
-<p>The call to <span style="font-family: Courier New,Courier,monospace;">elm_language_set()</span> above triggers the emission of the &quot;language,changed&quot; signal, which is handled the same way as the typical smart event signals.</p>
-
-<h3 id="extracting" name="extracting">Extracting Messages for Translation</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">xgettext</span> tool extracts strings to translate to a .pot file (po template), while <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> maintains the existing .po files. The typical workflow is as follows:</p>
-<ul>
-<li>run <span style="font-family: Courier New,Courier,monospace;">xgettext</span> once; it generates a .pot file</li>
-<li>when adding a new translation, copy the .pot file to &lt;locale&gt;.po and translate that file</li>
-<li>new runs of <span style="font-family: Courier New,Courier,monospace;">xgettext</span> update the existing .pot file and <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> updates the .po files</li>
-</ul>
-
-<p>The following example is a typical call to <span style="font-family: Courier New,Courier,monospace;">xgettext</span>.</p>
-
-<pre class="prettyprint">
-xgettext --directory = src --output-dir = res/po --keyword = _ --keyword = N_ --keyword = elm_object_translatable_text_set:2 --keyword = elm_object_item_translatable_text_set:2 --add-comments = --from-code = utf-8 --foreign-use
-</pre>
-
-<p>This extracts all strings that are used inside the <span style="font-family: Courier New,Courier,monospace;">_()</span> function (as an optional short-hand for <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span>), use UTF-8 as the encoding and add the comments right before the strings to the output files).</p>
-
-<p>The following example is a typical call to <span style="font-family: Courier New,Courier,monospace;">msgmerge</span>.</p>
-
-<pre class="prettyprint">
-msgmerge --width=120 --update res/po/fr.po res/po/ref.pot
 </pre>
+<p>The <span style="font-family: Courier New,Coruier,monospace">&lt;metadata key=&quot;http://tizen.org/metadata/bacgkround-category/&lt;value&gt;&quot;/&gt;</span> element has no effect on Tizen 2.3 devices, but, in Tizen 2.4 or higher devices, it has the same effect as the <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element.</p>
+	</td>
+	</tr>
+   </tbody>
+ </table>
 
-<h3 id="tips" name="tips">Internationalization Tips</h3>
-
-<h4 id="assumptions" name="assumptions">Do Not Make Assumptions about Languages</h4>
-
-<p>Languages vary greatly and even if you knew several of them, do not assume there is any common logic to them.</p>
-
-<p>For example, with English typography, no character must appear before colons and semicolons (&#39;:&#39; and &#39;;&#39;). However, with French typography, there must be &quot;espace fine insécable&quot;, that is, a non-breakable space (HTML&#39;s &amp;nbsp;) that is narrower that regular spaces.</p>
-
-<p>This prevents proper translation in the following construct:</p>
-
-<pre class="prettyprint">
-snprintf(buf, some_size, &quot;%s: %s&quot;, i18n_get_text(error), i18n_get_text(reason));
-</pre>
-
-<p>The correct way to translate it is to use a single string and let the translators manage the punctuation. This means translating the format string instead:</p>
-
-<pre class="prettyprint">
-snprintf(buf, some_size, i18n_get_text(&quot;%s: %s&quot;), i18n_get_text(error), i18n_get_text(reason));
-</pre>
-
-<p>It is not always possible, but aim for this unless a specific issue arises.</p>
-
-<h4 id="length" name="length">Translations Are of Different Lengths</h4>
-<p>Depending on the language, the translation has a different length on screen. In some cases, a language has a shorter construct than another, while the situation is reversed in another case; a language may have a word for a specific concept, while another does not and requires a circumlocution (designating something by using several words).</p>
-
-<h4 id="source" name="source">For Source Control, Do Not Commit .po If Only Line Indicators Have Changed</h4>
-
-<p>From the example above, a translation block looks like:</p>
-
-<pre class="prettyprint">
-#: some_file.c:43 another_file.c:41
-msgid &quot;Click Here&quot;
-msgstr &quot;Cliquez ici&quot;
-</pre>
-
-<p>In case you insert a new line at the top of &quot;some_file.c&quot;, the line indicator changes to look like this:</p>
-
-<pre class="prettyprint">
-#: some_file.c:44 another_file.c:41
-</pre>
-
-<p>Obviously, on non-trivial projects, such changes often happen. If you use source control and commit such changes even though no actual translation change has happened, each commit probably contains a change to .po files. This hampers readability of the change history, and in case several people are working in parallel and need to merge their changes, this creates huge merge conflicts each time.</p>
-
-<p>Only commit changes to .po files when there are actual translation changes, not because line comments have changed.</p>
-
-<h4 id="shorthand" name="shorthand">Using <span style="font-family: Courier New,Courier,monospace;">_()</span> as Shorthand to the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> Function</h4>
-
-<p>Since calling <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> may often happen, it is abbreviated to <span style="font-family: Courier New,Courier,monospace;">_()</span>. The Tizen SDK provides this abbreviation by default.</p>
-
-<h4 id="sorting" name="sorting">Proper Sorting: <span style="font-family: Courier New,Courier,monospace;">strcoll()</span></h4>
-<p>There is a string comparison tailored for sorting data for display: <span style="font-family: Courier New,Courier,monospace;">strcoll()</span>. It works the same way as <span style="font-family: Courier New,Courier,monospace;">strcmp()</span> but sorts the data according to the current locale settings.</p>
-
-<pre class="prettyprint">
-int strcmp(const char *s1, const char *s2);
-int strcoll(const char *s1, const char *s2);
-</pre>
-
-<p>The function prototype is a standard one and indicates how to order strings. A detailed explanation is out of scope for this guide, but use the <span style="font-family: Courier New,Courier,monospace;">strcoll()</span> function as the comparison function for sorting the data set you are using.</p>
-
-<h4 id="translators" name="translators">Working with Translators</h4>
-<p>The system described above is a common one and is likely to be known to translators, meaning that giving its name (<span style="font-family: Courier New,Courier,monospace;">gettext</span>) may be enough to explain how it works. In addition to this documentation, there is extensive additional documentation as well as questions and answers on the topic in the Internet.</p>
-
-<p>Do not hesitate to put comments in your code above the strings to be translated, since they can be extracted along with the strings and saved in the .po files for the translator to see them.</p>
+<p>The background category of your application can be specified in the
+<a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE.</p>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
@@ -1007,4 +327,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.guides/html/native/app/badge_n.htm b/org.tizen.guides/html/native/app/badge_n.htm
index 2fd179d..29438c0 100644
--- a/org.tizen.guides/html/native/app/badge_n.htm
+++ b/org.tizen.guides/html/native/app/badge_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -34,13 +34,12 @@
 <h1>Badge</h1>
 <p>A badge is an image displayed on the application icon, which informs the user about notifications and events.</p>
 
-   <p class="figure">Figure: Badge</p> 
-   <p align="center"><img alt="Badge" src="../../images/badge.png" /></p> 
-
 
 <p>To create a badge, use the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> method. The application that creates the badge can also update and remove it. When applications are signed with the same certificate, they can control each other&#39;s badges.</p>
 <p>If an application not signed with the same certificate must be allowed manage a badge, use the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> method with a writable application ID. The writable application ID enables another application to control your application to manage the badge. You can also configure your application to handle the badge itself.</p>
 
+   <p class="figure">Figure: Badge</p> 
+   <p align="center"><img alt="Badge" src="../../images/badge.png" /></p> 
 
 <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.guides/html/native/app/bundle_n.htm b/org.tizen.guides/html/native/app/bundle_n.htm
index 513de53..59db5c8 100644
--- a/org.tizen.guides/html/native/app/bundle_n.htm
+++ b/org.tizen.guides/html/native/app/bundle_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/app/common_appcontrol_n.htm b/org.tizen.guides/html/native/app/common_appcontrol_n.htm
new file mode 100644
index 0000000..9542403
--- /dev/null
+++ b/org.tizen.guides/html/native/app/common_appcontrol_n.htm
@@ -0,0 +1,1701 @@
+<!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>Common Application Controls</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+        <ul class="toc">
+			<li><a href="#browser">Browser</a></li>
+			<li><a href="#calendar">Calendar</a></li>
+			<li><a href="#call">Call</a></li>
+			<li><a href="#contact">Contact</a></li>
+			<li><a href="#email">Email</a></li>
+			<li><a href="#map">Map</a></li>
+			<li><a href="#message">Message</a></li>
+			<li><a href="#settings_bluetooth">Settings for Bluetooth</a></li>
+			<li><a href="#settings_location">Settings for Location</a></li>
+			<li><a href="#settings_nfc">Settings for NFC</a></li>
+			<li><a href="#settings_wifi">Settings for Wi-Fi</a></li>
+			<li><a href="#settings_main">System Settings</a></li>
+        </ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/appcontrol_tutorial_n.htm">App Control Tutorial</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Mobile Native</a></li>   
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Wearable Native</a></li> 
+			</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Common Application Controls</h1> 
+
+<p>The following sections introduce the common application controls provided by the Tizen base applications.</p>
+
+<h2 id="browser" name="browser">Browser</h2>
+
+<h3>Performing a Web Search</h3>
+
+<p>To find what you are looking for on the Web, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SEARCH</span> operation.</p>
+<p class="figure">Figure: Performing a Web search</p>
+<p align="center"><img src="../../images/common_appcontrol_browser.png" alt="Performing a Web search" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SEARCH</span></p>
+
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+				<td>The text to search. This key must be passed as a string.</td>
+				<td>This key is mandatory.</td>
+			</tr>
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+app_control_h app_control;
+app_control_create(&amp;app_control);
+app_control_set_operation(app_control, APP_CONTROL_OPERATION_SEARCH);
+app_control_add_extra_data(app_control, APP_CONTROL_DATA_TEXT, &quot;tizen&quot;);
+
+app_control_send_launch_request(app_control, NULL, NULL);
+app_control_destroy(app_control);
+</pre>
+
+<h3>Loading a Web Page</h3>
+
+<p>To open a web page, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation and specify the Web URL in the URI.</p>
+<p class="figure">Figure: Loading a Web page</p>
+<p align="center"><img src="../../images/common_appcontrol_browser2.png" alt="Loading a Web page" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span></p>
+<h4>URI (Mandatory)</h4>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">http:&lt;path&gt;</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">https:&lt;path&gt;</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">file:&lt;path&gt;</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">javascript:&lt;path&gt;</span></li>
+</ul>
+<h4>MIME Type (Optional)</h4>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">image/svg+xml</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">text/html</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">application/xml</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">application/xhtml+xml</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">text/plain</span></li>
+</ul>
+
+<h4>Example Code</h4>
+<pre class="prettyprint">
+app_control_h app_control;
+app_control_create(&amp;app_control);
+app_control_set_operation(app_control, APP_CONTROL_OPERATION_VIEW);
+app_control_set_uri(app_control, &quot;https://www.tizen.org&quot;);
+
+app_control_send_launch_request(app_control, NULL, NULL);
+app_control_destroy(app_control);
+</pre>
+
+<h2 id="calendar" name="calendar">Calendar</h2>
+
+<h3>Adding a Calendar Event</h3>
+
+<p>To add a new event to the user&#39;s calendar, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_ADD</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type. To specify various event details, refer to the extras defined below.</p>
+
+<p class="figure">Figure: Adding a calendar event</p>
+<p align="center"><img src="../../images/common_appcontrol_calendar.png" alt="Adding a calendar event" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_ADD</span></p>
+<h4>MIME Type (Mandatory)</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span></p>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_ALLDAY</span></td>
+				<td>The string to indicate if an event applies to all day. Available values are <span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>. This key must be passed as a string.</td>
+				<td rowspan="5">This key is optional.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_START_TIME</span></td>
+				<td>The start time of the event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_END_TIME</span></td>
+				<td>The end time of the event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TITLE</span></td>
+				<td>The title of the event. This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+				<td>The description of the event. This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+<h4>Extra Output</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
+				<td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string. </td>
+			</tr>
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+
+app_control_h service;
+app_control_create(&amp;service);
+
+app_control_set_operation(service, APP_CONTROL_OPERATION_ADD);
+app_control_add_extra_data(service, APP_CONTROL_DATA_TITLE, &quot;Meeting with Jason&quot;);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+app_control_send_launch_request(service, NULL, NULL);
+</pre>
+
+<h3>Editing a Calendar Event</h3>
+
+<p>To edit an existing event in the user&#39;s calendar, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_EDIT</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type. To specify various event details, refer to the extras defined below.</p>
+
+<p class="figure">Figure: Editing a calendar event</p>
+<p align="center"><img src="../../images/common_appcontrol_calendar4.png" alt="Editing a calendar event" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_EDIT</span></p>
+<h4>MIME Type (Mandatory)</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span></p>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
+				<td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string.</td>
+				<td>This key is mandatory.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_ALLDAY</span></td>
+				<td>The string to indicate if an event applies to all day. Available values are <span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>. This key must be passed as a string.</td>
+				<td rowspan="5">This key is optional.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_START_TIME</span></td>
+				<td>The start time of event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CALENDAR_END_TIME</span></td>
+				<td>The end time of event (format: YYYY-MM-DD HH:MM:SS). This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TITLE</span></td>
+				<td>The title of event. This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+				<td>The description of event. This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+<h4>Extra Output</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
+				<td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+
+app_control_h service;
+app_control_create(&amp;service);
+
+app_control_set_operation(service, APP_CONTROL_OPERATION_EDIT);
+app_control_add_extra_data(service, APP_CONTROL_DATA_ID, &quot;42&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_TITLE, &quot;Meeting with Jason&quot;);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+app_control_send_launch_request(service, NULL, NULL);
+</pre>
+
+<h3>Viewing a Calendar Event</h3>
+
+<p>To display a specified event in the user&#39;s calendar, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>In case of viewing an event from a VCalendar file, the file path URI and <span style="font-family: Courier New,Courier,monospace">text/x-vcalendar</span> MIME type must be specified. In case of viewing an event by an event ID, the event ID (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view) extra data and <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type must be specified.</p>
+
+<p class="figure">Figure: Viewing a calendar event</p>
+<p align="center"><img src="../../images/common_appcontrol_calendar2.png" alt="Viewing a calendar event" /></p>
+
+<h4>Operation</h4>
+<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span></p>
+<h4>URI</h4>
+<p><span style="font-family: Courier New,Courier,monospace">file:&lt;path&gt;</span></p>
+<p>For example: <span style="font-family: Courier New,Courier,monospace">file://&lt;media storage path&gt;/file.vcs</span></p>
+<h4>MIME Type</h4>
+	<ul>
+		<li><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span></li>
+		<li><span style="font-family: Courier New,Courier,monospace">text/x-vcalendar</span></li>
+	</ul>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
+				<td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view). This key must be passed as a string.</td>
+				<td>This key is mandatory when the MIME type is set to <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span>.</td>
+			</tr>
+		</tbody>
+	</table>
+<h4>Example Code</h4>
+<pre class="prettyprint">
+// To view a calendar event from a vcs file
+app_control_h service;
+app_control_create(&amp;service);
+app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
+app_control_set_uri(service, &quot;file://&lt;app&#39;s shared path&gt;/Calendar3.vcs&quot;);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+app_control_send_launch_request(service, NULL, NULL);
+app_control_destroy(service);
+
+// To view a calendar event from a calendar event ID
+app_control_h service;
+app_control_create(&amp;service);
+app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
+app_control_set_mime(service, &quot;application/vnd.tizen.calendar&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_ID, &quot;42&quot;);
+
+app_control_send_launch_request(service, NULL, NULL);
+app_control_destroy(service);
+</pre>
+
+<h3>Selecting a Calendar Event</h3>
+
+<p>To select a specified event in the user&#39;s calendar, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p class="figure">Figure: Selecting a calendar event</p>
+<p align="center"><img src="../../images/common_appcontrol_calendar3.png" alt="Selecting a calendar event" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span></p>
+<h4>MIME Type (Mandatory)</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.calendar</span></p>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
+				<td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span> and <span style="font-family: Courier New,Courier,monospace">vcs</span> (<span style="font-family: Courier New,Courier,monospace">id</span> is the default, if not presented). This key must be passed as a string.</td>
+				<td rowspan="3">This key is optional.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTION_MODE</span></td>
+				<td>The selection mode of the PICK operation. The available values are <span style="font-family: Courier New,Courier,monospace">single</span> and <span style="font-family: Courier New,Courier,monospace">multiple</span> (<span style="font-family: Courier New,Courier,monospace">single</span> is the default, if not presented). This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TOTAL_COUNT</span></td>
+				<td>The total number of events to be returned. This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+<h4>Extra Output</h4> 
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
+				<td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span> and <span style="font-family: Courier New,Courier,monospace">vcs</span>. This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+				<td>The database record ID of the event (ID in the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view) or the paths of the vcs files. This key must be passed as an array.</td>
+			</tr>
+		</tbody>
+	</table>
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+
+app_control_h service;
+app_control_create(&amp;service);
+
+app_control_set_operation(service, APP_CONTROL_OPERATION_PICK);
+app_control_add_extra_data(service, APP_CONTROL_DATA_TYPE, &quot;id&quot;);
+app_control_add_extra_data(service, APP_CONTROL_ SELECTION_MODE, &quot;single&quot;);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+app_control_send_launch_request(service, NULL, NULL);
+</pre>
+
+<h2 id="call" name="call">Call</h2>
+
+<h3>Making a Phone Call</h3>
+<p>To directly initiate a phone call, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_CALL</span> operation with a phone number URI scheme.</p>
+<p class="figure">Figure: Making a phone call</p>
+<p align="center"><img src="../../images/common_appcontrol_call1.png" alt="Making a phone call" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_CALL</span></p>
+	<p>To request this operation, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/call</span> privilege is needed.</p>
+<h4>URI (Mandatory)</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">tel:&lt;number&gt;</span></p>
+	<p>For example: <span style="font-family: Courier New,Courier,monospace">tel:+821234567890</span></p>
+<h4>Code Example</h4>
+<pre class="prettyprint">
+void 
+launchCall()
+{
+&nbsp;&nbsp;&nbsp;app_control_h request = NULL;
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_CALL);
+&nbsp;&nbsp;&nbsp;app_control_set_uri(request, &quot;tel:+380665554433&quot;);
+
+&nbsp;&nbsp;&nbsp;app_control_send_launch_request(request, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+}
+</pre>
+
+
+<h3>Launching a Call Application with a Phone Number</h3>
+
+<p>To open a call application and display a predefined a phone number, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DIAL</span> action with a phone number URI scheme. When the call application opens, it displays the phone number, but the user must press the <strong>Call</strong> button to initiate the phone call.</p>
+<p class="figure">Figure: Launching a Call application</p>
+<p align="center"><img src="../../images/common_appcontrol_call2.png" alt="Launching a Call application" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DIAL</span></p>
+<h4>URI (Optional)</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">tel:&lt;number&gt;</span></p>
+	<p>For example: <span style="font-family: Courier New,Courier,monospace">tel:+821234567890</span></p>
+<h4>Example Code</h4>
+<pre class="prettyprint">
+void 
+launchCall()
+{
+&nbsp;&nbsp;&nbsp;app_control_h request = NULL;
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_DIAL);
+&nbsp;&nbsp;&nbsp;app_control_set_uri(request &quot;tel:+380665554433&quot;);
+
+&nbsp;&nbsp;&nbsp;app_control_send_launch_request(request, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+}
+</pre>
+
+
+<h2 id="contact" name="contact">Contact</h2>
+
+<h3>Adding a Contact</h3>
+
+<p>To add a new contact, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_ADD</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p class="figure">Figure: Adding a contact</p>
+<p align="center"><img src="../../images/common_appcontrol_contact_add.png" alt="Adding a contact" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_ADD</span></p>
+<h4>MIME Type (Mandatory)</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PHONE</span></td>
+				<td>The phone number. This key must be passed as a string.</td>
+				<td rowspan="4">This key is optional.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_EMAIL</span></td>
+				<td>The email address. This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_URL</span></td>
+				<td>The homepage URL. This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_NAME</span></td>
+				<td>The contact&#39;s name. This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+<h4>Extra Output</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
+				<td>The database record ID of the added person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+<h4>Example Code</h4>
+<pre class="prettyprint">
+int 
+launchContactCreate(const char *number)
+{
+&nbsp;&nbsp;&nbsp;app_control_h request;
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_ADD);
+&nbsp;&nbsp;&nbsp;app_control_set_mime(request, &quot;application/vnd.tizen.contact&quot;);
+
+&nbsp;&nbsp;&nbsp;if (number) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(request, APP_CONTROL_DATA_PHONE, number);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+&nbsp;&nbsp;&nbsp;int result = app_control_send_launch_request(request, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+
+&nbsp;&nbsp;&nbsp;return result;
+}
+</pre>
+
+
+<h3>Editing a Contact</h3>
+
+<p>To edit a known contact, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_EDIT</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+
+<p class="figure">Figure: Editing a contact</p>
+<p align="center"><img src="../../images/common_appcontrol_contact_edit.png" alt="Editing a contact" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_EDIT</span></p>
+<h4>MIME Type (Mandatory)</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
+				<td>The database record ID of the person to be edited (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
+				<td>This key is mandatory.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PHONE</span></td>
+				<td>The phone number that is added to the contact. This key must be passed as a string.</td>
+				<td rowspan="3">This key is optional.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_EMAIL</span></td>
+				<td>The email address that is added to the contact. This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_URL</span></td>
+				<td>The homepage URL that is added to the contact. This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+
+<h4>Extra Output</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
+				<td>The database record ID of the person to be edited (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+<h4>Example Code</h4>
+<pre class="prettyprint">
+int 
+launchContactEdit(const char* personId, const char *number)
+{
+&nbsp;&nbsp;&nbsp;app_control_h request;
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_EDIT);
+&nbsp;&nbsp;&nbsp;app_control_set_mime(request, &quot;application/vnd.tizen.contact&quot;);
+
+&nbsp;&nbsp;&nbsp;app_control_add_extra_data(request, APP_CONTROL_DATA_ID, personId);
+	
+&nbsp;&nbsp;&nbsp;if (number) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(request, APP_CONTROL_DATA_PHONE, number);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+&nbsp;&nbsp;&nbsp;int result = app_control_send_launch_request(request, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+
+&nbsp;&nbsp;&nbsp;return result;
+}
+</pre>
+
+<h3>Viewing a Contact</h3>
+
+<p>To display a specified contact in the contact database, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>In case of viewing a contact from a vcard file, the file path URI and <span style="font-family: Courier New,Courier,monospace">text/vcard</span> or <span style="font-family: Courier New,Courier,monospace">text/x-vcard</span> MIME type must be specified. In case of viewing a contact by a person ID, the person ID (ID in the <span style="font-family: Courier New,Courier,monospace">_contact_person</span> view) extra data and <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type must be specified.</p>
+
+<p class="figure">Figure: Viewing a contact</p>
+<p align="center"><img src="../../images/common_appcontrol_contact_view1.png" alt="Viewing a contact" /> <img src="../../images/common_appcontrol_contact_view2.png" alt="Viewing a contact" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span></p>
+<h4>URI</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">file:&lt;path&gt;</span></p>
+<h4>MIME Type</h4>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">text/vcard</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">text/x-vcard</span></li>
+</ul>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_ID</span></td>
+				<td>The database record ID of the edited person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view). This key must be passed as a string.</td>
+				<td>This key is mandatory when the MIME type is set to <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span>.</td>
+			</tr>
+		</tbody>
+	</table>
+
+<h4>Example Code</h4>
+<pre class="prettyprint">
+int 
+launchContactDetails(const char* personId)
+{
+&nbsp;&nbsp;&nbsp;app_control_h request;
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_VIEW);
+&nbsp;&nbsp;&nbsp;app_control_set_mime(request, &quot;application/vnd.tizen.contact&quot;);
+&nbsp;&nbsp;&nbsp;app_control_add_extra_data(request, APP_CONTROL_DATA_ID, personId);
+
+&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+&nbsp;&nbsp;&nbsp;int result = app_control_send_launch_request(request, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+
+&nbsp;&nbsp;&nbsp;return result;
+}
+
+int launchViewVcard(const char *uri)
+{
+&nbsp;&nbsp;&nbsp;app_control_h request;
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_VIEW);
+&nbsp;&nbsp;&nbsp;app_control_set_mime(request, &quot;text/vcard&quot;);
+&nbsp;&nbsp;&nbsp;app_control_set_uri(request, uri);
+
+&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+&nbsp;&nbsp;&nbsp;int result = app_control_send_launch_request(request, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+
+&nbsp;&nbsp;&nbsp;return result;
+}
+</pre>
+
+<h3>Selecting a Contact</h3>
+
+<p>To select a specified contact in the user&#39;s contacts, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> operation with the <span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span> MIME type. To specify various contact details, refer to the extras defined below.</p>
+
+<p class="figure">Figure: Selecting a contact</p>
+<p align="center"><img src="../../images/common_appcontrol_contact_select.png" alt="Selecting a contact" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span></p>
+<h4>MIME Type (Mandatory)</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">application/vnd.tizen.contact</span></p>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTION_MODE</span></td>
+				<td>The selection mode of the PICK operation. The available values are <span style="font-family: Courier New,Courier,monospace">single</span> and <span style="font-family: Courier New,Courier,monospace">multiple</span> (<span style="font-family: Courier New,Courier,monospace">single</span> is the default, if not presented). This key must be passed as a string.</td>
+				<td rowspan="3">This key is optional.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
+				<td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span>, <span style="font-family: Courier New,Courier,monospace">phone</span>, <span style="font-family: Courier New,Courier,monospace">email</span>, and <span style="font-family: Courier New,Courier,monospace">vcf</span> (<span style="font-family: Courier New,Courier,monospace">id</span> is the default, if not presented). This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace"></span>APP_CONTROL_DATA_TOTAL_COUNT</td>
+				<td>The total number of events to be returned. This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+<h4>Extra Output</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
+				<td>The type of items to be delivered. The available values are <span style="font-family: Courier New,Courier,monospace">id</span>, <span style="font-family: Courier New,Courier,monospace">phone</span>, <span style="font-family: Courier New,Courier,monospace">email</span>, and <span style="font-family: Courier New,Courier,monospace">vcf</span>. This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+				<td>The extra field to get the return information. The content of this key depends on its type: 
+				<ul>
+				<li><span style="font-family: Courier New,Courier,monospace">id</span> – The database record ID of the selected person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_person</span> view).</li>
+				<li><span style="font-family: Courier New,Courier,monospace">phone</span> – The database record ID of the number of the selected person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_number</span> view).</li>
+				<li><span style="font-family: Courier New,Courier,monospace">email</span> – The database record ID of the email of the selected person (ID in the <span style="font-family: Courier New,Courier,monospace">_contacts_email</span> view).</li>
+				<li><span style="font-family: Courier New,Courier,monospace">vcf</span> – The path to the vCard file.</li>
+			</ul>
+			<p>This key must be passed as an array.</p>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+
+<h4>Example Code</h4>
+<pre class="prettyprint">
+int 
+launchContactPick(const char *selectionMode, const char *resultType,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_reply_cb replyCallback, void *userData)
+{
+&nbsp;&nbsp;&nbsp;app_control_h request;
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_PICK);
+&nbsp;&nbsp;&nbsp;app_control_set_mime(request, &quot;application/vnd.tizen.contact&quot;);
+
+&nbsp;&nbsp;&nbsp;app_control_add_extra_data(request, APP_CONTROL_DATA_SELECTION_MODE, selectionMode);
+&nbsp;&nbsp;&nbsp;app_control_add_extra_data(request, APP_CONTROL_DATA_TYPE, resultType);
+
+&nbsp;&nbsp;&nbsp;int result = app_control_send_launch_request(request, replyCallback, userData);
+&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+
+&nbsp;&nbsp;&nbsp;return result;
+}
+</pre>
+
+<h2 id="email" name="email">Email</h2>
+
+<h3>Composing an Email</h3>
+
+<p>To launch an email composer with optional recipients, subject, and body text, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_COMPOSE</span> operation.</p>
+
+<p class="figure">Figure: Composing an email</p>
+<p align="center"><img src="../../images/common_appcontrol_email.png" alt="Composing an email" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_COMPOSE</span></p>
+<h4>URI (Optional)</h4>
+<p><span style="font-family: Courier New,Courier,monospace">mailto:&lt;email address&gt;</span></p>
+<p>If the <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is empty, it filters out all but email applications in the system, and you can use the extra data only to pass optional parameters.</p>
+
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TO</span></td>
+				<td>The email address list of main recipients, separated by &quot;;&quot;.</td>
+				<td rowspan="5">This key is optional.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CC</span></td>
+				<td>The email address list of secondary (copy) recipients, separated by &quot;;&quot;.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_BCC</span></td>
+				<td>The email address list of hidden (blind copy) recipients, separated by &quot;;&quot;.</td>
+			</tr>			
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SUBJECT</span></td>
+				<td>The subject of an email message. This key must be passed as a string.</td>
+			</tr>			
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+				<td>The body of the email to be sent. This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+app_control_h service;
+app_control_create(&amp;service);
+
+app_control_set_operation(service, APP_CONTROL_OPERATION_COMPOSE);
+app_control_add_extra_data(service, APP_CONTROL_DATA_TO, &quot;to@test.com&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_CC, &quot;cc@test.com&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_BCC, &quot;bcc@test.com&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, &quot;test subject&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, &quot;line1\nline2&quot;);
+
+app_control_send_launch_request(service, NULL, NULL);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+app_control_destroy(service);
+</pre>
+
+<h3>Sharing a Single File in an Email</h3>
+
+<p>To share a single file of nay MIME type in an email message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span> operation.</p>
+
+<p class="figure">Figure: Sharing a single file</p>
+<p align="center"><img src="../../images/common_appcontrol_email2.png" alt="Sharing a single file" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span></p>
+<h4>URI (Mandatory)</h4>
+	<ul><li><span style="font-family: Courier New,Courier,monospace">file:&lt;full path to file&gt;</span> or <span style="font-family: Courier New,Courier,monospace">&lt;full path to file&gt;</span> (no scheme)
+	<p>Using a URI with the <span style="font-family: Courier New,Courier,monospace">file:</span> scheme or without any scheme is the default input for this operation. If there is such a URI, all extra data is ignored.</p></li>
+	<li><span style="font-family: Courier New,Courier,monospace">mailto:</span>
+<p>Only an empty <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is allowed. It filters out all but email applications in the system.</p></li>
+	</ul>
+
+<h4>MIME Type (Optional)</h4>
+	<p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
+	
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+				<td>When the URI is set to <span style="font-family: Courier New,Courier,monospace">mailto</span>, a path to a single file to be shared must be provided using this key. Otherwise, the key is ignored. This key must be passed as a string.</td>
+				<td>This key is mandatory when the URI is set to <span style="font-family: Courier New,Courier,monospace">mailto</span>.</td>
+			</tr>
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#define PATH_MAX 128
+
+char *shared_res_path = app_get_shared_resource_path();
+char img_path[PATH_MAX] = {0,};
+snprintf(img_path, PATH_MAX, &quot;%s/image.jpg&quot;, shared_res_path);
+free(shared_res_path);
+
+app_control_h service;
+app_control_create(&amp;service);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+app_control_set_operation(service, APP_CONTROL_OPERATION_SHARE);
+app_control_set_uri(service, &quot;mailto:&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_PATH, img_path);
+
+app_control_send_launch_request(service, NULL, NULL);
+app_control_destroy(service);
+</pre>
+
+<h3>Sharing Multiple Items in an Email</h3>
+
+<p>To share multiple files of any MIME type in an email message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span> operation.</p>
+
+<p class="figure">Figure: Sharing multiple items</p>
+<p align="center"><img src="../../images/common_appcontrol_email3.png" alt="Sharing multiple items" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span></p>
+<h4>URI (Optional)</h4>
+<p><span style="font-family: Courier New,Courier,monospace">mailto:</span></p>
+<p>Only an empty <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is allowed. It filters out all but email applications in the system.</p>
+
+<h4>MIME Type (Optional)</h4>
+	<p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
+	
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+				<td>The list of multiple file paths to be shared in an email message. This key must be passed as an array.</td>
+				<td>This key is mandatory.</td>
+			</tr>
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#define PATH_MAX 128
+
+char *shared_res_path = app_get_shared_resource_path();
+char img1_path[PATH_MAX] = {0,};
+char img2_path[PATH_MAX] = {0,};
+const char *path_array[2] = {img1_path, img2_path};
+snprintf(img1_path, PATH_MAX, &quot;%s/image.jpg&quot;, shared_res_path);
+snprintf(img2_path, PATH_MAX, &quot;%s/image2.jpg&quot;, shared_res_path);
+free(shared_res_path);
+
+app_control_h service;
+app_control_create(&amp;service);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+app_control_set_operation(service, APP_CONTROL_OPERATION_MULTI_SHARE);
+app_control_set_uri(service, &quot;mailto:&quot;);
+app_control_add_extra_data_array(service, APP_CONTROL_DATA_PATH, path_array, 2);
+
+app_control_send_launch_request(service, NULL, NULL);
+app_control_destroy(service);
+</pre>
+
+<h3>Sharing Text in an Email</h3>
+
+<p>To share any text with an email message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE_TEXT</span> operation. You can also define the message subject and a list of file attachments.</p>
+
+<p class="figure">Figure: Sharing text</p>
+<p align="center"><img src="../../images/common_appcontrol_email4.png" alt="Sharing text" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE_TEXT</span></p>
+<h4>URI (Optional)</h4>
+<p><span style="font-family: Courier New,Courier,monospace">mailto:</span></p>
+<p>Only an empty <span style="font-family: Courier New,Courier,monospace">mailto:</span> field is allowed. It filters out all but email applications in the system.</p>
+
+	
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+				<td>The body of the message to be sent. This key must be passed as a string.</td>
+				<td>This key is mandatory.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SUBJECT</span></td>
+				<td>The subject of an email message. This key must be passed as a string.</td>
+				<td rowspan="2">This key is optional.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+				<td>The list of multiple file paths to be shared in an email message. This key must be passed as an array.</td>
+			</tr>			
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#define PATH_MAX 128
+
+char *shared_res_path = app_get_shared_resource_path();
+char img1_path[PATH_MAX] = {0,};
+char img2_path[PATH_MAX] = {0,};
+const char *path_array[2] = {img1_path, img2_path};
+snprintf(img1_path, PATH_MAX, &quot;%s/image.jpg&quot;, shared_res_path);
+snprintf(img2_path, PATH_MAX, &quot;%s/image2.jpg&quot;, shared_res_path);
+free(shared_res_path);
+
+app_control_h service;
+app_control_create(&amp;service);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+app_control_set_operation(service, APP_CONTROL_OPERATION_SHARE_TEXT);
+app_control_set_uri(service, &quot;mailto:&quot;);
+app_control_add_extra_data_array(service, APP_CONTROL_DATA_PATH, path_array, 2);
+app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, &quot;test subject&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, &quot;line1\nline2&quot;);
+
+app_control_send_launch_request(service, NULL, NULL);
+app_control_destroy(service);
+</pre>
+
+<h2 id="map" name="map">Map</h2>
+
+<h3>Showing a Location on a Map</h3>
+
+<p>To open a map to show a location, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation with an URI. To specify various map details, refer to the extras defined below.</p>
+
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span></p>
+<h4>URI (Mandatory)</h4>
+	<ul><li><span style="font-family: Courier New,Courier,monospace">geo:latitude,longitude</span>
+	<p>Show the map with 2 values that represent the latitude and longitude. For example: <span style="font-family: Courier New,Courier,monospace">geo:50.1,-50.1</span></p></li>
+	<li><span style="font-family: Courier New,Courier,monospace">geo:0,0?q=keyword</span>
+	<p>Show the map at the location of a given keyword (address or POI). For example: <span style="font-family: Courier New,Courier,monospace">geo:0,0?q=&quot;Eiffel Tower&quot;</span></p></li>
+	</ul>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
+				<td>The type of the keyword, in case the URI contains a keyword. The available values are <span style="font-family: Courier New,Courier,monospace">address</span> and <span style="font-family: Courier New,Courier,monospace">poi</span> (<span style="font-family: Courier New,Courier,monospace">poi</span> is the default, if not presented).</td>
+				<td>This key is mandatory only when the location URI is given as a keyword.</td>
+			</tr>
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+#include &lt;dlog.h&gt;
+
+int 
+show_maps_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;if (service == NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+   
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
+&nbsp;&nbsp;&nbsp;app_control_set_uri(service, &quot;geo:50.1,-50.1&quot;); 
+  
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+   
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to request!\n&quot;);
+	  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to request!\n&quot;);
+	  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h3>Picking a Location from the Map</h3>
+
+<p>To pick  a location from the map, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span> operation. To specify various map details, refer to the extras defined below.</p>
+
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span></p>
+<h4>URI (Optional)</h4>
+<p><span style="font-family: Courier New,Courier,monospace">geo:0,0?q=keyword</span></p>
+	<p>Show the map at the location of a given keyword (address or POI). For example: <span style="font-family: Courier New,Courier,monospace">geo:0,0?q=&quot;Eiffel Tower&quot;</span></p>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TYPE</span></td>
+				<td>The type of the keyword. The available values are <span style="font-family: Courier New,Courier,monospace">address</span> and <span style="font-family: Courier New,Courier,monospace">poi</span> (<span style="font-family: Courier New,Courier,monospace">poi</span> is the default, if not presented).</td>
+				<td>This key is optional.</td>
+			</tr>
+		</tbody>
+	</table>
+
+<h4>Extra Output</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
+				<td>The address of the selected location. This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+				<td>The file path of the image showing the selected location. This key must be passed as a string.</td>
+			</tr>			
+		</tbody>
+	</table>	
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+#include &lt;dlog.h&gt;
+
+int 
+pick_location_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;if (service == NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+   
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_PICK);
+&nbsp;&nbsp;&nbsp;app_control_set_uri(service, &quot;geo:0,0?q=”Eiffel Tower&quot;);
+&nbsp;&nbsp;&nbsp;app_control_set_extra_data(service, APP_CONTROL_DATA_TYPE, &quot;poi&quot;);
+
+&nbsp;&nbsp;&nbsp;app_control_send_launch_request(service, pick_reply_cb, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+
+void 
+pick_reply_cb(app_control_h request, app_control_h reply, app_control_result_e result, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char *address = NULL;
+&nbsp;&nbsp;&nbsp;char *path = NULL;
+
+&nbsp;&nbsp;&nbsp;if (result == APP_CONTROL_RESULT_SUCCEEDED)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &amp;address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(reply, APP_CONTROL_DATA_PATH, &amp;path);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Selected address: %s&quot;, address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Map image path: %s&quot;, path);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h2 id="message" name="message">Message</h2>
+
+<h3>Composing a Message</h3>
+
+<p>To compose a new message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_COMPOSE</span> operation. To specify various message details, refer to the extras defined below.</p>
+
+<p class="figure">Figure: Composing a message</p>
+<p align="center"><img src="../../images/common_appcontrol_message.png" alt="Composing a message" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_COMPOSE</span></p>
+<h4>URI (Optional)</h4>
+	<ul><li><span style="font-family: Courier New,Courier,monospace">sms:&lt;phone-number&gt;</span>
+	<p>For example: <span style="font-family: Courier New,Courier,monospace">sms:+17913331234</span></p></li>
+	<li><span style="font-family: Courier New,Courier,monospace">mmsto:&lt;phone-number&gt;</span>
+	<p>For example: <span style="font-family: Courier New,Courier,monospace">mmsto:+17913331234</span></p></li>
+	</ul>
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TO</span></td>
+				<td>The phone numbers of recipients. This key must be passed as an array.</td>
+				<td rowspan="3">This key is optional.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+				<td>The body of the message to be sent. This key must be passed as a string.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SUBJECT</span></td>
+				<td>The subject of an MMS message. If this value is set for an SMS message, the message is automatically converted to MMS. This key must be passed as a string.</td>
+			</tr>
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+
+app_control_h service;
+app_control_create(&amp;service);
+
+app_control_set_operation(service, APP_CONTROL_OPERATION_COMPOSE);
+app_control_set_uri(service, &quot;sms:123456789&quot;);         
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+app_control_send_launch_request(service, NULL, NULL);
+</pre>
+
+<h3>Sharing a Single Item in a Message</h3>
+
+<p>To share a single file in an MMS message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span> operation.</p>
+
+<p class="figure">Figure: Sharing a single item</p>
+<p align="center"><img src="../../images/common_appcontrol_message2.png" alt="Sharing a single item" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE</span></p>
+<h4>URI (Mandatory)</h4>
+	<ul><li><span style="font-family: Courier New,Courier,monospace">mmsto:&lt;phone-number&gt;</span>
+	<p>For example: <span style="font-family: Courier New,Courier,monospace">mmsto:+17913331234</span></p></li>
+	<li><span style="font-family: Courier New,Courier,monospace">file:&lt;path&gt;</span>
+	<p>For example: <span style="font-family: Courier New,Courier,monospace">file://&lt;media storage path&gt;/item.jpg</span></p></li>
+	</ul>
+
+<h4>MIME Type (Optional)</h4>
+	<p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
+	
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+				<td>When the URI is set to <span style="font-family: Courier New,Courier,monospace">mmsto</span>, a path to a single file to be shared must be provided using this key. Otherwise, the key is ignored. This key must be passed as a string.</td>
+				<td>This key is mandatory when the URI is set to <span style="font-family: Courier New,Courier,monospace">mmsto</span>.</td>
+			</tr>
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+
+app_control_h service;
+app_control_create(&amp;service);
+
+app_control_set_operation(service, APP_CONTROL_OPERATION_SHARE);
+app_control_add_extra_data(service, APP_CONTROL_DATA_PATH, IMAGE_PATH);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+app_control_send_launch_request(service, NULL, NULL);
+</pre>
+
+<h3>Sharing Multiple Items in a Message</h3>
+
+<p>To share multiple files in an MMS message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span> operation.</p>
+
+<p class="figure">Figure: Sharing multiple items</p>
+<p align="center"><img src="../../images/common_appcontrol_message3.png" alt="Sharing multiple items" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_MULTI_SHARE</span></p>
+<h4>URI (Optional)</h4>
+<p><span style="font-family: Courier New,Courier,monospace">mmsto:&lt;phone-number&gt;</span></p>
+	<p>For example: <span style="font-family: Courier New,Courier,monospace">mmsto:+17913331234</span></p>
+
+<h4>MIME Type (Optional)</h4>
+	<p>Any MIME type that your application needs, such as <span style="font-family: Courier New,Courier,monospace">image/jpg</span>, <span style="font-family: Courier New,Courier,monospace">video/*</span>, or <span style="font-family: Courier New,Courier,monospace">*/*</span></p>
+	
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+				<td>The list of multiple file paths to be shared in a multimedia message. This key must be passed as an array.</td>
+				<td>This key is mandatory.</td>
+			</tr>
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+
+app_control_h service;
+app_control_create(&amp;service);
+
+const char* paths[] = {IMAGE_PATH1,IMAGE_PATH2};
+
+app_control_set_operation(service, APP_CONTROL_OPERATION_MULTI_SHARE);
+app_control_add_extra_data_array(service, APP_CONTROL_DATA_PATH, paths, 2);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+app_control_send_launch_request(service, NULL, NULL);
+</pre>
+
+<h3>Sharing Text in a Message</h3>
+
+<p>To share any text with an SMS or MSM message, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE_TEXT</span> operation.</p>
+
+<p class="figure">Figure: Sharing text</p>
+<p align="center"><img src="../../images/common_appcontrol_message4.png" alt="Sharing text" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SHARE_TEXT</span></p>
+<h4>URI (Optional)</h4>
+	<ul><li><span style="font-family: Courier New,Courier,monospace">sms:&lt;phone-number&gt;</span>
+	<p>For example: <span style="font-family: Courier New,Courier,monospace">sms:+17913331234</span></p></li>
+	<li><span style="font-family: Courier New,Courier,monospace">mmsto:&lt;phone-number&gt;</span>
+	<p>For example: <span style="font-family: Courier New,Courier,monospace">mmsto:+17913331234</span></p></li>
+	</ul>
+
+	
+<h4>Extra Input</h4>
+	<table>
+		<tbody>
+			<tr>
+				<th>Key</th>
+				<th>Description</th>
+				<th>Note</th>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
+				<td>The body of the message to be sent. This key must be passed as a string.</td>
+				<td>This key is mandatory.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SUBJECT</span></td>
+				<td>The subject of an MMS message. If it is set for an SMS message, the message is automatically converted to MMS. This key must be passed as a string.</td>
+				<td rowspan="2">This key is optional.</td>
+			</tr>
+			<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_PATH</span></td>
+				<td>The list of multiple file paths to be shared in a multimedia message. This key must be passed as an array.</td>
+			</tr>			
+		</tbody>
+	</table>
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+
+app_control_h service;
+app_control_create(&amp;service);
+
+app_control_set_operation(service, APP_CONTROL_OPERATION_SHARE_TEXT);
+app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, &quot;How are you?&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, &quot;Hi&quot;);
+app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+
+app_control_send_launch_request(service, NULL, NULL);
+</pre>
+
+<h2 id="settings_bluetooth" name="settings_bluetooth">Settings for Bluetooth</h2>
+
+<h3>Showing Bluetooth Settings to Activate Bluetooth</h3>
+
+<p>To launch the Bluetooth setting application to allow the user to activate or deactivate Bluetooth, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_BT_ENABLE</span> operation.</p>
+
+<p class="figure">Figure: Showing Bluetooth activation settings</p>
+<p align="center"><img src="../../images/common_appcontrol_system_bluetooth.png" alt="Showing Bluetooth activation settings" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_BT_ENABLE</span></p>
+
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+ 
+int 
+bt_enable_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;if (service == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_BT_ENABLE);
+
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+ 
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to launch!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h3>Showing Bluetooth Settings to Configure Visibility</h3>
+
+<p>To launch the Bluetooth setting application to allow the user to configure the visibility of the device, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY</span> operation.</p>
+
+<p align="center"><img src="../../images/common_appcontrol_system_bluetooth2.png" alt="Showing location settings" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY</span></p>
+
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+ 
+int 
+bt_visibility_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;if (service == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY);
+
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+ 
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to launch!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h2 id="settings_location" name="settings_location">Settings for Location</h2>
+
+<h3>Showing Location Settings</h3>
+
+<p>To launch the location setting application to allow the user to configure the source of the location information, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_LOCATION</span> operation.</p>
+<p>If the location service is not active when an application tries to use the Location Manager (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">mobile</a> or <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">wearable</a> applications) or Geolocation APIs, an error occurs. To solve the problem, the application can try to launch the location setting application to let the user enable the location service. The user can activate the GPS, network positioning using the Wi-Fi Positioning System (WPS) and cellular network, or both.</p>
+<p class="figure">Figure: Showing location settings</p>
+<p align="center"><img src="../../images/common_appcontrol_system_location.png" alt="Showing location settings" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_LOCATION</span></p>
+
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+int 
+location_setting(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;if (service == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_LOCATION);
+
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+ 
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to launch location settings!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch location settings!\\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h2 id="settings_nfc" name="settings_nfc">Settings for NFC</h2>
+
+<h3>Showing NFC Settings</h3>
+
+<p>To launch the NFC setting application to allow the user to activate or deactivate NFC, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_NFC</span> operation.</p>
+<p class="figure">Figure: Showing NFC settings</p>
+<p align="center"><img src="../../images/common_appcontrol_system_nfc.png" alt="Showing NFC settings" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_NFC</span></p>
+
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+#include &lt;app_control.h&gt;
+#include &lt;dlog.h&gt;
+
+int 
+nfc_setting(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;if (service == NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+	  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+   
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_NFC);
+
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+   
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to launch NFC settings app!\n&quot;);
+	  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch NFC settings app!\n&quot;);
+	  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h2 id="settings_wifi" name="settings_wifi">Settings for Wi-Fi</h2>
+
+<h3>Showing Wi-Fi Settings</h3>
+
+<p>To launch the Wi-Fi setting application to allow the user to activate and configure (or deactivate) Wi-Fi connections, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_WIFI</span> operation.</p>
+<p class="figure">Figure: Showing Wi-Fi settings</p>
+<p align="center"><img src="../../images/common_appcontrol_system_wifi.png" alt="Showing Wi-Fi settings" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING_WIFI</span></p>
+
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+int 
+wifi_launch_operation(void)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+	
+&nbsp;&nbsp;&nbsp;ret = app_control_create(&amp;service);
+	 
+&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE || service == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+	
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service,  APP_CONTROL_OPERATION_SETTING_WIFI);
+
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+	   
+&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch Wi-Fi setting application&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h2 id="settings_main" name="settings_main">System Settings</h2>
+
+<h3>Showing System Settings</h3>
+
+<p>To display various setting menus for, for example, Connections, Devices, and System Information, use the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING</span> operation.</p>
+<p class="figure">Figure: Showing system settings</p>
+<p align="center"><img src="../../images/common_appcontrol_system_setting.png" alt="Showing system settings" /></p>
+
+<h4>Operation</h4>
+	<p><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_SETTING</span></p>
+
+	
+<h4>Example Code</h4>
+<pre class="prettyprint">
+int 
+launch_setting(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;if (service == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+ 
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING);
+
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+ 
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to launch settings!\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch settings!\\n&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+
+
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>	
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/data_control_n.htm b/org.tizen.guides/html/native/app/data_control_n.htm
index 8adbb73..e61b8a1 100644
--- a/org.tizen.guides/html/native/app/data_control_n.htm
+++ b/org.tizen.guides/html/native/app/data_control_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -40,9 +40,6 @@
 <h1 id="data_controls" name="data_controls">Data Control</h1>
 <p>Data control is a standard mechanism for exchanging specific data between applications.</p>
  
-  <p class="figure">Figure: Data control mechanism</p> 
-  <p align="center"><img alt="Data control mechanism" src="../../images/datacontrol.png" /></p>
- 
 <p>All applications can request data shared by other applications using a data control. However, only service applications can provide their own data.</p>
 <p>There are 2 types of data controls:</p>
 <ul><li>DATA_CONTROL_SQL
@@ -62,6 +59,9 @@
 <p>Format:</p>
 <ul><li>Data ID consists of one or more components, separated by a slash (&quot;/&quot;) character.</li></ul></li></ul>
 
+ 
+  <p class="figure">Figure: Data control mechanism</p> 
+  <p align="center"><img alt="Data control mechanism" src="../../images/datacontrol.png" /></p>
 
 <h2 id="use" name="use">Using Data Controls</h2>
 <p>You can get a <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance from the <span style="font-family: Courier New,Courier,monospace">datacontrol_map_create()</span> or <span style="font-family: Courier New,Courier,monospace">datacontrol_sql_create()</span> function.</p>
diff --git a/org.tizen.guides/html/native/app/event_n.htm b/org.tizen.guides/html/native/app/event_n.htm
new file mode 100644
index 0000000..e39ddd7
--- /dev/null
+++ b/org.tizen.guides/html/native/app/event_n.htm
@@ -0,0 +1,384 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Event</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/event_tutorial_n.htm">Event Tutorial</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">Event API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EVENT__MODULE.html">Event API for Wearable Native</a></li>
+
+			</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Event</h1>
+
+<p>The application can broadcast its own events to all listeners, and subscribe to events. The events can be either predefined system events from the platform (only platform modules can broadcast system events) or user-defined events (broadcast by UI and service applications).</p>
+
+<p>The main features of the Event API are:</p>
+<ul>
+<li>Event publication
+<p>To publish an event, use the <span style="font-family: Courier New,Courier,monospace">event_publish_app_event()</span> and <span style="font-family: Courier New,Courier,monospace">event_publish_trusted_app_event()</span> functions. The <span style="font-family: Courier New,Courier,monospace">event_publish_trusted_app_event()</span> function publishes a trusted event which can only be received by the application that has the same signature as the publishing application.</p>
+</li>
+
+<li>Event subscription
+<p>To subscribe to an event, use the <span style="font-family: Courier New,Courier,monospace">event_add_event_handler()</span> function. When no longer needed, unsubscribe the event with the <span style="font-family: Courier New,Courier,monospace">event_remove_event_handler()</span> function.</p>
+</li>
+
+<li>Launch-On-Events
+<p>Service applications can be launched when a desired target event occurs.</p>
+<p>To register an interest in a Launch-On-Event, define the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/launch_on_event</span> operation in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>
+
+<p>The following table shows the system events that support Launch-On-Event.</p>
+
+<table>
+	   <caption>
+			   Table: System events supporting Launch-On-Event
+	   </caption>
+	   <tbody>
+	  <tr>
+			<th>Name</th>
+			<th>Condition</th>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.battery_charger_status</span></td>
+			<td>When the charger state is <span style="font-family: Courier New,Courier,monospace">&quot;connected&quot;</span>.</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.usb_status</span></td>
+			<td>When the USB state is <span style="font-family: Courier New,Courier,monospace">&quot;connected&quot;</span>.</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.earjack_status</span></td>
+			<td>When the earjack status is <span style="font-family: Courier New,Courier,monospace">&quot;connected&quot;</span>.</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.incoming_msg</span></td>
+			<td>When the <span style="font-family: Courier New,Courier,monospace">msg_type</span> and <span style="font-family: Courier New,Courier,monospace">msg_id</span> exist.</td>
+		</tr>
+	</tbody>
+</table>
+</li>
+</ul>
+
+<p>The following table lists the platform event types.</p>
+<table>
+	   <caption>
+			   Table: Platform event types
+	   </caption>
+	   <tbody>
+	  <tr>
+			   <th rowspan="2">Module</th>
+			   <th rowspan="2">Category</th>
+			   <th rowspan="2">Event name</th>
+			   <th colspan="2">Event data</th>
+			   <th rowspan="2">Notes</th>
+	   </tr>
+	   <tr>
+			   <th>Key</th>
+			   <th>Value</th>
+	   </tr>
+	   <tr>
+			   <td rowspan="2">capi-system-device</td>
+			   <td rowspan="2">battery</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.battery_charger_status</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">battery_charger_status</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;disconnected&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;connected&quot;</span></p>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;charging&quot;</span></p>
+				</td>
+			   <td></td>
+	   </tr>
+	   <tr>
+				<td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.battery_level_status</span></td>
+				<td><span style="font-family: Courier New,Courier,monospace">battery_level_status</span></td>
+				<td><span style="font-family: Courier New,Courier,monospace">&quot;empty&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;critical&quot;</span></p>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;low&quot;</span></p>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;high&quot;</span></p>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;full&quot;</span></p>
+				</td>
+			   <td>empty (0~1%)
+				<p>critical (2~5%)</p>
+				<p>low (6~15%)</p>
+				<p>high (16~95%)</p>
+				<p>full (96~100%)</p>
+				</td>
+	   </tr>
+	   <tr>
+			   <td rowspan="3">deviced</td>
+			   <td>usb</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.usb_status</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">usb_status</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;disconnected&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;connected&quot;</span></p>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;available&quot;</span></p>
+				</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;connected&quot;</span> means that the cable is connected but USB communication is not available.</td>
+	   </tr>
+	   <tr>
+				<td>earjack</td>
+				<td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.earjack_status</span></td>
+				<td><span style="font-family: Courier New,Courier,monospace">earjack_status</span></td>
+				<td><span style="font-family: Courier New,Courier,monospace">&quot;disconnected&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;connected&quot;</span></p>
+				</td>
+				<td></td>
+		</tr>
+		<tr>
+				<td>display</td>
+				<td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.display_state</span></td>
+				<td><span style="font-family: Courier New,Courier,monospace">display_state</span></td>
+				<td><span style="font-family: Courier New,Courier,monospace">&quot;normal&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;dim&quot;</span></p>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;off&quot;</span></p>
+				</td>
+				<td></td>
+		</tr>
+		<tr>
+			   <td rowspan="2">systemd</td>
+			   <td rowspan="2">system</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.boot_completed</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">boot_completed</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;true&quot;</span>
+				<p>=&gt; send <span style="font-family: Courier New,Courier,monospace">&quot;true&quot;</span> only</p>
+				</td>
+			   <td></td>
+	   </tr>
+	   <tr>
+				<td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.system_shutdown</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">system_shutdown</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;true&quot;</span>
+				<p>=&gt; send <span style="font-family: Courier New,Courier,monospace">&quot;true&quot;</span> only</p>
+				</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;true&quot;</span>: go to shutdown</td>
+		</tr>
+		<tr>
+			   <td>resourced</td>
+			   <td>ram memory</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.low_memory</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">low_memory</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;normal&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;soft_warning&quot;</span></p>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;hard_warning&quot;</span></p>
+				</td>
+			   <td></td>
+	   </tr>
+	   <tr>
+			   <td rowspan="4">network</td>
+			   <td rowspan="4">connectivity</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.wifi_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">wifi_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;deactivated&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;disconnected&quot;</span></p>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;connected&quot;</span></p>
+				</td>
+			   <td></td>
+	   </tr>
+	   <tr>
+				<td rowspan="3"><span style="font-family: Courier New,Courier,monospace">tizen.system.event.bt_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">bt_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;on&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;off&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace">bt_le_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;on&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;off&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace">bt_transfering_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;non_transfering&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;transfering&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+				<td rowspan="3">libslp-location</td>
+			   <td rowspan="3">location</td>
+			   <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">tizen.system.event.location_enable_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">location_enable_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;disabled&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;enabled&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">gps_enable_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;disabled&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;enabled&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">nps_enable_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;disabled&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;enabled&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+				<td rowspan="2">msg-service</td>
+			   <td rowspan="2">message</td>
+			   <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">tizen.system.event.incoming_msg</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">msg_type</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;sms&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;push&quot;</span></p>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;cb&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">msg_id</span></td>
+			   <td>String of the unsigned <span style="font-family: Courier New,Courier,monospace">int</span> type value.
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+				<td>alarm-manager</td>
+			   <td>time</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.time_changed</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">time_changed</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;true&quot;</span>
+				<p>=&gt; send <span style="font-family: Courier New,Courier,monospace">&quot;true&quot;</span> only</p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+				<td rowspan="10">setting</td>
+			   <td>time</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.time_zone</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">time_zone</span></td>
+			   <td>The value of this key is the time zone value of the time zone database, for example, &quot;Asia/Seoul&quot;, &quot;America/New_York&quot;. For more information, see the IANA Time Zone Database.
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+			   <td rowspan="3">locale</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.hour_format</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">hour_format</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;12&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;24&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.language_set</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">language_set</span></td>
+			   <td>The value of this key is full name of locale, for example, <span style="font-family: Courier New,Courier,monospace">ko_KR.UTF8</span> in case of Korean and <span style="font-family: Courier New,Courier,monospace">en_US.UTF8</span> in case of American English. For more information, see the Linux locale information.
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+				<td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.region_format</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">region_format</span></td>
+			   <td>The value of this key is the full name of the locale, for example, <span style="font-family: Courier New,Courier,monospace">ko_KR.UTF8</span> in case of the Korean region format and <span style="font-family: Courier New,Courier,monospace">en_US.UTF8</span> in case of the USA region format. For more information, see the Linux locale information.
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+			   <td>sound</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.silent_mode</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">silent_mode</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;on&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;off&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+			   <td>vibration</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.vibration_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">vibration_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;on&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;off&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+			   <td>screen</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.screen_autorotate_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">screen_autorotate_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;on&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;off&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+			   <td rowspan="2">mobile</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.mobile_data_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">mobile_data_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;on&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;off&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.data_roaming_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">data_roaming_state</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">&quot;on&quot;</span>
+				<p><span style="font-family: Courier New,Courier,monospace">&quot;off&quot;</span></p>
+				</td>
+			   <td></td>
+		</tr>
+		<tr>
+			   <td>font</td>
+			   <td><span style="font-family: Courier New,Courier,monospace">tizen.system.event.font_set</span></td>
+			   <td><span style="font-family: Courier New,Courier,monospace">font_set</span></td>
+			   <td>The value of this key is the font name of the string type by font-config.
+				</td>
+			   <td></td>
+		</tr>
+	   </tbody>
+</table>
+
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>	
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/internationalization_n.htm b/org.tizen.guides/html/native/app/internationalization_n.htm
new file mode 100644
index 0000000..4b0e451
--- /dev/null
+++ b/org.tizen.guides/html/native/app/internationalization_n.htm
@@ -0,0 +1,293 @@
+<!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>Internationalization</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+        <ul class="toc">
+			<li><a href="#marking">Marking Text Parts as Translatable</a></li>
+			<li><a href="#translating">Translating Texts Directly</a></li>
+			<li><a href="#extracting">Extracting Messages for Translation</a></li>
+			<li><a href="#tips">Internationalization Tips</a></li>
+        </ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">Internationalization API for Mobile Native</a></li>   
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">Internationalization API for Wearable Native</a></li> 
+			</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Internationalization</h1> 
+
+<p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">wearable</a> applications), which makes strings translatable and places them  in <span style="font-family: Courier New,Courier,monospace">.po</span> (portable object) files.</p> 
+
+<table class="note">
+  <tbody>
+    <tr>
+      <th class="note">Note</th>
+    </tr>
+    <tr>
+      <td class="note"><p>The <span style="font-family: Courier New,Courier,monospace">.po</span> files must be placed in the <span style="font-family: Courier New,Courier,monospace">res/po</span> directory of the application. The files can be edited using the <a href="../../../../org.tizen.devtools/html/native_tools/po_file_editor_n.htm">PO File Editor</a> provided by the Tizen SDK.</p></td> 
+    </tr>
+  </tbody>
+</table>
+
+<p>Depending on the device&#39;s locale information, your application must load the proper resource set. If no matching resource set is found for the device&#39;s current locale, the default resource set is used.</p>		  
+
+<p>To get the localized value of a string, use the <span style="font-family: Courier New,Courier,monospace">MsgID</span> shown in the PO File Editor, prefaced with an underscore <span style="font-family: Courier New,Courier,monospace">_</span> (for example, <span style="font-family: Courier New,Courier,monospace">_(&lt;MsgID&gt;)</span>). The underlying implementation calls the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function to retrieve the localized value:</p>
+
+<pre class="prettyprint">
+char *hello_text = i18n_get_text(&quot;Hello&quot;);
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">hello_text</span> variable is set to the localized text for &quot;Hello&quot; for the current locale of the device.</p>
+<p>When you change the language setting on the device, the text changes in the application according to the current language.</p>
+
+<h2 id="marking" name="marking">Marking Text Parts as Translatable</h2>
+<p>The most common way to use a translation involves the following APIs: </p>
+
+<pre class="prettyprint">
+elm_object_translatable_text_set(Evas_Object *obj, const char *text)
+elm_object_item_translatable_text_set(Elm_Object_Item *it, const char *text)
+</pre>
+
+<p>They set the untranslated string for the &quot;default&quot; part of the given <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> or <span style="font-family: Courier New,Courier,monospace;">Elm_Object_Item</span> and mark the string as translatable.</p>
+
+<p>Similar functions are available if you wish to set the text for a part that is not &quot;default&quot;: </p>
+
+<pre class="prettyprint">
+elm_object_translatable_part_text_set(Evas_Object *obj, const char *part, const char *text)
+elm_object_item_translatable_part_text_set(Elm_Object_Item *it, const char *part, const char *text)
+</pre>
+
+<p>It is important to provide the untranslated string to these functions, because the EFLs trigger the translation themselves and re-translate the strings automatically, if the system language changes.</p>
+
+
+<h2 id="translating" name="translating">Translating Texts Directly</h2>
+
+<p>The approach described in the previous section is not applicable all of the time. For instance, it does not work if you are populating a genlist, if you need plurals in the translation or if you want to do something else than put the translation in elementary UI components.</p>
+
+<p>It is possible to retrieve the translation for a given text through the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> function from <span style="font-family: Courier New,Courier,monospace;">app_i18n.h</span>.</p>
+
+<pre class="prettyprint">
+char *i18n_get_text(const char *msgid);
+</pre>
+
+<p>This function takes as input a string (that is copied to an <span style="font-family: Courier New,Courier,monospace;">msgid</span> field in the .po files) and returns the translation (the corresponding <span style="font-family: Courier New,Courier,monospace;">msgstr</span> field).</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">Do not modify or free the return value of these functions. They are statically allocated.</td>
+</tr>
+</tbody>
+</table> 
+
+<p>When giving the text for a genlist item, you can use it in a similar manner as in the example below.</p>
+
+<pre class="prettyprint">
+#include &quot;app_i18n.h&quot;
+static char *_genlist_text_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;return strdup(i18n_get_text(&quot;Some Text&quot;));
+}
+</pre>
+
+<h3>Plurals</h3>
+<p>Plurals are handled through the <span style="font-family: Courier New,Courier,monospace;">ngettext()</span> function. Its prototype is shown below.</p>
+
+<pre class="prettyprint">
+char *ngettext(const char *msgid, const char *msgid_plural, unsigned long int n);
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">msgid</span> is the same as before, that is, the untranslated string</li>
+<li><span style="font-family: Courier New,Courier,monospace;">msgid_plural</span> is the plural form of <span style="font-family: Courier New,Courier,monospace;">msgid</span></li>
+<li>the quantity (in English, 1 is singular and anything else is plural)</li>
+</ul>
+
+<p>A matching fr.po file contains the following lines.</p>
+
+<pre class="prettyprint">
+msgid &quot;%d Comment&quot;
+msgid_plural &quot;%d Comments&quot;
+msgstr[0] &quot;%d commentaire&quot;
+msgstr[1] &quot;%d commentaires&quot;
+</pre>
+
+<h3>Several Plurals</h3>
+<p>It is possible to have several plural forms. For instance, the .po file for Polish could contain the following lines.</p>
+
+<pre class="prettyprint">
+msgid &quot;%d Comment&quot;
+msgid_plural &quot;%d Comments&quot;
+msgstr[0] &quot;%d Komentarz&quot;
+msgstr[1] &quot;%d Komentarze&quot;
+msgstr[2] &quot;%d Komentarzy&quot;
+</pre>
+
+<p>The index values after <span style="font-family: Courier New,Courier,monospace;">msgstr</span> are defined in system-wide settings. The ones for Polish are given below:</p>
+
+<pre class="prettyprint">
+&quot;Plural-Forms: nplurals = 3; plural = n = = 1 ? 0 : n%10&gt; = 2 &amp;&amp; n%10&lt; = 4 &amp;&amp; (n%100&lt;10 | | n%100&gt; = 20) ? 1 : 2;\n&quot;
+</pre>
+
+<p>There are three forms (including singular). The index is 0 (singular), if the given integer n is 1. Then, if <span style="font-family: Courier New,Courier,monospace;">(n % 10 &gt;= 2 &amp;&amp; % 10 &lt;= 4 &amp;&amp; (n % 100 &lt; 10 | | n % 100 &gt;= 20)</span>, the index is 1, otherwise it is 2.</p>
+
+<h3>Handling Language Changes at Runtime</h3>
+
+<p>The user can change the system language settings at any time. When that is done, the framework notifies the application, which changes the language used in the Elementary. The UI components receive a &quot;language,changed&quot; signal and reset their text.</p>
+
+<p>This is how to handle the framework event:</p>
+
+<pre class="prettyprint">
+static void
+_app_language_changed(void *data)
+{
+&nbsp;&nbsp;&nbsp;char *language;
+&nbsp;&nbsp;&nbsp;// Retrieve the current system language
+&nbsp;&nbsp;&nbsp;system_settings_get_value_string(SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE, &amp;language);
+&nbsp;&nbsp;&nbsp;// Set the language in elementary
+&nbsp;&nbsp;&nbsp;elm_language_set(language);
+&nbsp;&nbsp;&nbsp;free(language);
+}
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, _app_language_changed, &amp;ad);
+}
+</pre>
+
+<p>The call to <span style="font-family: Courier New,Courier,monospace;">elm_language_set()</span> above triggers the emission of the &quot;language,changed&quot; signal, which is handled the same way as the typical smart event signals.</p>
+
+<h2 id="extracting" name="extracting">Extracting Messages for Translation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">xgettext</span> tool extracts strings to translate to a .pot file (po template), while <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> maintains the existing .po files. The typical workflow is as follows:</p>
+<ul>
+<li>run <span style="font-family: Courier New,Courier,monospace;">xgettext</span> once; it generates a .pot file</li>
+<li>when adding a new translation, copy the .pot file to &lt;locale&gt;.po and translate that file</li>
+<li>new runs of <span style="font-family: Courier New,Courier,monospace;">xgettext</span> update the existing .pot file and <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> updates the .po files</li>
+</ul>
+
+<p>The following example is a typical call to <span style="font-family: Courier New,Courier,monospace;">xgettext</span>.</p>
+
+<pre class="prettyprint">
+xgettext --directory = src --output-dir = res/po --keyword = _ --keyword = N_ --keyword = elm_object_translatable_text_set:2 --keyword = elm_object_item_translatable_text_set:2 --add-comments = --from-code = utf-8 --foreign-use
+</pre>
+
+<p>This extracts all strings that are used inside the <span style="font-family: Courier New,Courier,monospace;">_()</span> function (as an optional short-hand for <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span>), use UTF-8 as the encoding and add the comments right before the strings to the output files).</p>
+
+<p>The following example is a typical call to <span style="font-family: Courier New,Courier,monospace;">msgmerge</span>.</p>
+
+<pre class="prettyprint">
+msgmerge --width=120 --update res/po/fr.po res/po/ref.pot
+</pre>
+
+<h2 id="tips" name="tips">Internationalization Tips</h2>
+
+<h3 id="assumptions" name="assumptions">Do Not Make Assumptions about Languages</h3>
+
+<p>Languages vary greatly and even if you knew several of them, do not assume there is any common logic to them.</p>
+
+<p>For example, with English typography, no character must appear before colons and semicolons (&#39;:&#39; and &#39;;&#39;). However, with French typography, there must be &quot;espace fine insécable&quot;, that is, a non-breakable space (HTML&#39;s &amp;nbsp;) that is narrower that regular spaces.</p>
+
+<p>This prevents proper translation in the following construct:</p>
+
+<pre class="prettyprint">
+snprintf(buf, some_size, &quot;%s: %s&quot;, i18n_get_text(error), i18n_get_text(reason));
+</pre>
+
+<p>The correct way to translate it is to use a single string and let the translators manage the punctuation. This means translating the format string instead:</p>
+
+<pre class="prettyprint">
+snprintf(buf, some_size, i18n_get_text(&quot;%s: %s&quot;), i18n_get_text(error), i18n_get_text(reason));
+</pre>
+
+<p>It is not always possible, but aim for this unless a specific issue arises.</p>
+
+<h3 id="length" name="length">Translations Are of Different Lengths</h3>
+<p>Depending on the language, the translation has a different length on screen. In some cases, a language has a shorter construct than another, while the situation is reversed in another case; a language may have a word for a specific concept, while another does not and requires a circumlocution (designating something by using several words).</p>
+
+<h3 id="source" name="source">For Source Control, Do Not Commit .po If Only Line Indicators Have Changed</h3>
+
+<p>From the example above, a translation block looks like:</p>
+
+<pre class="prettyprint">
+#: some_file.c:43 another_file.c:41
+msgid &quot;Click Here&quot;
+msgstr &quot;Cliquez ici&quot;
+</pre>
+
+<p>In case you insert a new line at the top of &quot;some_file.c&quot;, the line indicator changes to look like this:</p>
+
+<pre class="prettyprint">
+#: some_file.c:44 another_file.c:41
+</pre>
+
+<p>Obviously, on non-trivial projects, such changes often happen. If you use source control and commit such changes even though no actual translation change has happened, each commit probably contains a change to .po files. This hampers readability of the change history, and in case several people are working in parallel and need to merge their changes, this creates huge merge conflicts each time.</p>
+
+<p>Only commit changes to .po files when there are actual translation changes, not because line comments have changed.</p>
+
+<h3 id="shorthand" name="shorthand">Using <span style="font-family: Courier New,Courier,monospace;">_()</span> as Shorthand to the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> Function</h3>
+
+<p>Since calling <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> may often happen, it is abbreviated to <span style="font-family: Courier New,Courier,monospace;">_()</span>. The Tizen SDK provides this abbreviation by default.</p>
+
+<h3 id="sorting" name="sorting">Proper Sorting: <span style="font-family: Courier New,Courier,monospace;">strcoll()</span></h3>
+<p>There is a string comparison tailored for sorting data for display: <span style="font-family: Courier New,Courier,monospace;">strcoll()</span>. It works the same way as <span style="font-family: Courier New,Courier,monospace;">strcmp()</span> but sorts the data according to the current locale settings.</p>
+
+<pre class="prettyprint">
+int strcmp(const char *s1, const char *s2);
+int strcoll(const char *s1, const char *s2);
+</pre>
+
+<p>The function prototype is a standard one and indicates how to order strings. A detailed explanation is out of scope for this guide, but use the <span style="font-family: Courier New,Courier,monospace;">strcoll()</span> function as the comparison function for sorting the data set you are using.</p>
+
+<h3 id="translators" name="translators">Working with Translators</h3>
+<p>The system described above is a common one and is likely to be known to translators, meaning that giving its name (<span style="font-family: Courier New,Courier,monospace;">gettext</span>) may be enough to explain how it works. In addition to this documentation, there is extensive additional documentation as well as questions and answers on the topic in the Internet.</p>
+
+<p>Do not hesitate to put comments in your code above the strings to be translated, since they can be extracted along with the strings and saved in the .po files for the translator to see them.</p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>	
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/message_port_n.htm b/org.tizen.guides/html/native/app/message_port_n.htm
index 4197041..5ae8669 100644
--- a/org.tizen.guides/html/native/app/message_port_n.htm
+++ b/org.tizen.guides/html/native/app/message_port_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/app/notification_n.htm b/org.tizen.guides/html/native/app/notification_n.htm
index 223c61d..2e1f9c0 100644
--- a/org.tizen.guides/html/native/app/notification_n.htm
+++ b/org.tizen.guides/html/native/app/notification_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -48,14 +48,15 @@
 <h2 id="type" name="type">Notification Types</h2>
 <p>Tizen provides notifications by using a combination of any of the following notification types:</p>
 
-<ul>
-<li>Quick panel </li>
-<li>Active notification </li>
+<ul><li>Quick panel</li>
+<li>Active notification</li>
 <li>Indicator</li> 
 </ul>
 
-<p>You can specify the message for the indicator or quick panel, active notification.</p> 
-<h3 id="quick_panel" name="quick_panel">Notifications on quick panel</h3>
+<p>You can specify the message for the quick panel, active notification, or indicator.</p>
+
+<h3 id="quick_panel" name="quick_panel">Notifications on the Quick Panel</h3>
+
 <p>The display area for quick panel notifications can be one of the following:</p>
 <ul><li>Notification area 
 <p>The notification area is the reserved space for displaying all notifications, except the on-going notifications.</p></li>
@@ -65,13 +66,13 @@
    <p class="figure">Figure: Notification and on-going areas</p> 
    <p align="center"><img alt="Notification and on-going areas" src="../../images/notification.png" /></p>
 
-<h3 id="active_notification" name="active_notification">Active Notification</h3>
-<p>Active notification can be used to show a notification on upper side of screen.</p>
-<p>You can add several buttons for getting user interaction.</p>
+<h3 id="active_notification" name="active_notification">Active Notifications</h3>
+<p>Active notifications can be used to show a notification on the upper side of the screen.</p>
+<p>You can add several buttons for user interaction.</p>
 
    <p class="figure">Figure: Active notification</p> 
    <p align="center"><img alt="Active notification" src="../../images/active_notification.png" /></p>
-
+   
 <h2 id="layout" name="layout">Notification Layouts</h2>
 <p>The following notification layouts are provided:</p>
 <ul><li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_NOTI_EVENT_SINGLE</span> 
@@ -87,7 +88,7 @@
 
    <p class="figure">Figure: Notification layouts</p> 
    <p align="center"><img alt="Notification layouts" src="../../images/notification_layout_desc.png" /></p>
-
+ 
 
 <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.guides/html/native/app/package_n.htm b/org.tizen.guides/html/native/app/package_n.htm
index a4192be..2671335 100644
--- a/org.tizen.guides/html/native/app/package_n.htm
+++ b/org.tizen.guides/html/native/app/package_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
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 d7aad3e..e3a1323 100644
--- a/org.tizen.guides/html/native/app/service_app_n.htm
+++ b/org.tizen.guides/html/native/app/service_app_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -159,8 +159,8 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <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. Hence, the auto-restart attribute used on the lower than 2.4 API version package shall ignored on the devices with Tizen platform version 2.4 or higher.</td> 
-    </tr> 
+     <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. Because of this, the <span style="font-family: Courier New,Courier,monospace">auto-restart</span> attribute used in a lower API version package than 2.4 is ignored in the devices with the Tizen platform version 2.4 or higher.</td>
+     </tr> 
    </tbody> 
   </table>  </li>
 <li><span style="font-family: Courier New,Courier,monospace">on-boot</span>
@@ -171,8 +171,8 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <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. Hence, the on-boot attribute used on the lower than 2.4 API version package shall ignored on the devices with Tizen platform version 2.4 or higher.</td> 
-    </tr> 
+     <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. Because of this, the <span style="font-family: Courier New,Courier,monospace">on-boot</span> attribute used in a lower API version package than 2.4 is ignored in the devices with the Tizen platform version 2.4 or higher.</td>
+     </tr>
    </tbody> 
   </table>  </li></ul>
 
@@ -254,4 +254,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.guides/html/native/app/shortcut_n.htm b/org.tizen.guides/html/native/app/shortcut_n.htm
index c0fdfb2..e9d8d43 100644
--- a/org.tizen.guides/html/native/app/shortcut_n.htm
+++ b/org.tizen.guides/html/native/app/shortcut_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -24,6 +24,7 @@
 		<ul class="toc">
 			<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm">Shortcut Tutorial</a></li>   
 			<li><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__SHORTCUT__MODULE.html">Shortcut API for Wearable Native</a></li>
 			</ul>
 	</div></div>
 </div>
@@ -33,19 +34,13 @@
   
 <p>You can add your shortcut for the Home application. The Tizen Shortcut API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/shortcut</span> privilege.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>To use the shortcut feature:</p>
-<ul><li>To add a shortcut, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function, which requests the Home application to add a new shortcut.</li>
+<p>To add a shortcut, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function, which requests the Home application to add a new shortcut.</p>
+<p class="figure">Figure: Shortcuts</p> 
+<p align="center"><img alt="Shortcuts" src="../../images/shortcut.png" /></p>
+<p>There are 2 types of shortcuts:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">LAUNCH_BY_APP</span>: Creates a shortcut to launch an application by a given application ID. </li>
+<li><span style="font-family: Courier New,Courier,monospace">LAUNCH_BY_URI</span>: Creates a shortcut to launch an application by a given URI. The URI is passed to the <span style="font-family: Courier New,Courier,monospace">app_control_set_uri()</span> function. For example, if you want to create a shortcut to open an image file, set the uri with <span style="font-family: Courier New,Courier,monospace">file:///home/myhome/Photos/1_photo.jpg</span>.</li>
 </ul>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/app/watch_n.htm b/org.tizen.guides/html/native/app/watch_n.htm
index 2f0e86c..b443d73 100644
--- a/org.tizen.guides/html/native/app/watch_n.htm
+++ b/org.tizen.guides/html/native/app/watch_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -38,16 +38,7 @@
 <h1>Watch Application</h1>
 <p>Tizen allows you to create a watch application and manage its life-cycle to display the current date and time accurately on the screen.</p>
 
-       <table class="note">
-               <tbody>
-               <tr>
-                       <th class="note">Note</th>
-               </tr>
-               <tr>
-			   <td class="note">This feature is supported in wearable applications only.</td>
-               </tr>
-               </tbody>
-       </table>
+<p>This feature is supported in wearable applications only.</p>
 	   
 <p>The main features of the Watch Application API include:</p>
 <ul>
diff --git a/org.tizen.guides/html/native/app/widget_n.htm b/org.tizen.guides/html/native/app/widget_n.htm
index 4417f4e..58cb66b 100644
--- a/org.tizen.guides/html/native/app/widget_n.htm
+++ b/org.tizen.guides/html/native/app/widget_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/base/base_guide_n.htm b/org.tizen.guides/html/native/base/base_guide_n.htm
index fd4f83a..dbf8cda 100644
--- a/org.tizen.guides/html/native/base/base_guide_n.htm
+++ b/org.tizen.guides/html/native/base/base_guide_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/base/i18n_n.htm b/org.tizen.guides/html/native/base/i18n_n.htm
index 2446296..046360b 100644
--- a/org.tizen.guides/html/native/base/i18n_n.htm
+++ b/org.tizen.guides/html/native/base/i18n_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -74,7 +74,7 @@
 
 <p>When computing a Udate from the time fields, 2 special circumstances can arise. The information can be insufficient to compute the Udate (you have only the year and the month, but not the day of the month), or the information can be inconsistent (such as &quot;Tuesday, July 15, 1996&quot; even though July 15, 1996 is actually a Monday).</p>
 <ul>
-<li><strong>Insufficient information</strong> <p>The calendar uses the default information to specify the missing fields. This can vary by calendar: for the Gregorian calendar, the default for a field is the same as that of the start of the epoch, such as <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR = 1970</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_ MONTH = JANUARY</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_ DATE = 1</span>.</p></li>
+<li><strong>Insufficient information</strong> <p>The calendar uses the default information to specify the missing fields. This can vary by calendar: for the Gregorian calendar, the default for a field is the same as that of the start of the epoch, such as <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR = 1970</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_MONTH = JANUARY</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_DATE = 1</span>.</p></li>
 <li><strong>Inconsistent information</strong> <p>If the fields conflict, the calendar prefers the most recently set fields. For example, when determining the day, the calendar looks for one of the following field combinations listed in the following table. The most recent combination, as determined by the most recently set single field, is used.</p></li>
 </ul>
 <table> 
@@ -129,6 +129,100 @@
 <p>For more information, see <a href="http://www.unicode.org/ucd/" target="_blank">About the Unicode Character Database</a> and <a href="http://icu-project.org/userguide/properties.html" target="_blank">ICU User Guide chapter on Properties</a>.
 </p>
 
+<p>The following table describes the details of script codes that you can get using the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_get_int_property_value()</span> function.
+</p>
+<table border="1">
+   <caption>
+     Table: Script codes
+   </caption>  
+   <tbody>
+<tr>
+<th>Value</th><th>Code</th><th>English name</th><th>Value</th><th>Code</th><th>English name</th>
+</tr>
+<tr>   <td>    0       </td><td>       Zyyy    </td><td>       Code for undetermined script    </td><td>       80      </td><td>       Latf    </td><td>       Latin (Fraktur variant)  </td>   </tr>
+<tr>   <td>    1       </td><td>       Zinh    </td><td>       Code for inherited script       </td><td>       81      </td><td>       Latg    </td><td>       Latin (Gaelic variant)   </td>   </tr>
+<tr>   <td>    2       </td><td>       Arab    </td><td>       Arabic  </td><td>       82      </td><td>       Lepc    </td><td>       Lepcha (Rong)    </td>   </tr>
+<tr>   <td>    3       </td><td>       Armn    </td><td>       Armenian        </td><td>       83      </td><td>       Lina    </td><td>       LinearA </td>   </tr>
+<tr>   <td>    4       </td><td>       Beng    </td><td>       Bengali </td><td>       84      </td><td>       Mand    </td><td>       Mandaic, Mandaean       </td>   </tr>
+<tr>   <td>    5       </td><td>       Bopo    </td><td>       Bopomofo        </td><td>       85      </td><td>       Maya    </td><td>       Mayan hieroglyphs       </td>   </tr>
+<tr>   <td>    6       </td><td>       Cher    </td><td>       Cherokee        </td><td>       86      </td><td>       Mero    </td><td>       Meroitic hieroglyphs    </td>   </tr>
+<tr>   <td>    7       </td><td>       Copt    </td><td>       Coptic  </td><td>       87      </td><td>       Nkoo    </td><td>       N’Ko  </td>   </tr>
+<tr>   <td>    8       </td><td>       Cyrl    </td><td>       Cyrillic        </td><td>       88      </td><td>       Orkh    </td><td>       Old Turkic, Orkhon Runic  </td>   </tr>
+<tr>   <td>    9       </td><td>       Dsrt    </td><td>       Deseret (Mormon) </td><td>       89      </td><td>       Perm    </td><td>       Old Permic      </td>   </tr>
+<tr>   <td>    10      </td><td>       Deva    </td><td>       Devanagari (Nagari)      </td><td>       90      </td><td>       Phag    </td><td>       Phags-pa        </td>   </tr>
+<tr>   <td>    11      </td><td>       Ethi    </td><td>       Ethiopic (Geʻez)        </td><td>       91      </td><td>       Phnx    </td><td>       Phoenician      </td>   </tr>
+<tr>   <td>    12      </td><td>       Geor    </td><td>       Georgian (Mkhedruli)     </td><td>       92      </td><td>       Plrd    </td><td>       Miao (Pollard)   </td>   </tr>
+<tr>   <td>    13      </td><td>       Goth    </td><td>       Gothic  </td><td>       93      </td><td>       Roro    </td><td>       Rongorongo      </td>   </tr>
+<tr>   <td>    14      </td><td>       Grek    </td><td>       Greek   </td><td>       94      </td><td>       Sara    </td><td>       Sarati  </td>   </tr>
+<tr>   <td>    15      </td><td>       Gujr    </td><td>       Gujarati        </td><td>       95      </td><td>       Syre    </td><td>       Syriac (Estrangelo variant)       </td>   </tr>
+<tr>   <td>    16      </td><td>       Guru    </td><td>       Gurmukhi        </td><td>       96      </td><td>       Syrj    </td><td>       Syriac (Western variant)  </td>   </tr>
+<tr>   <td>    17      </td><td>       Hani    </td><td>       Han (Hanzi, Kanji, Hanja)        </td><td>       97      </td><td>       Syrn    </td><td>       Syriac (Eastern variant) </td>   </tr>
+<tr>   <td>    18      </td><td>       Hang    </td><td>       Hangul (HangÅ­l, Hangeul)        </td><td>       98      </td><td>       Teng    </td><td>       Tengwar </td>   </tr>
+<tr>   <td>    19      </td><td>       Hebr    </td><td>       Hebrew  </td><td>       99      </td><td>       Vaii    </td><td>       Vai     </td>   </tr>
+<tr>   <td>    20      </td><td>       Hira    </td><td>       Hiragana        </td><td>       100     </td><td>       Visp    </td><td>       Visible Speech  </td>   </tr>
+<tr>   <td>    21      </td><td>       Knda    </td><td>       Kannada </td><td>       101     </td><td>       Xsux    </td><td>       Cuneiform, Sumero-Akkadian      </td>   </tr>
+<tr>   <td>    22      </td><td>       Kana    </td><td>       Katakana        </td><td>       102     </td><td>       Zxxx    </td><td>       Code for unwritten documents    </td>   </tr>
+<tr>   <td>    23      </td><td>       Khmr    </td><td>       Khmer   </td><td>       103     </td><td>       Zzzz    </td><td>       Code for uncoded script </td>   </tr>
+<tr>   <td>    24      </td><td>       Laoo    </td><td>       Lao     </td><td>       104     </td><td>       Cari    </td><td>       Carian  </td>   </tr>
+<tr>   <td>    25      </td><td>       Latn    </td><td>       Latin   </td><td>       105     </td><td>       Jpan    </td><td>       Japanese (alias for Han+Hiragana+Katakana) </td>   </tr>
+<tr>   <td>    26      </td><td>       Mlym    </td><td>       Malayalam       </td><td>       106     </td><td>       Lana    </td><td>       TaiTham (Lanna)  </td>   </tr>
+<tr>   <td>    27      </td><td>       Mong    </td><td>       Mongolian       </td><td>       107     </td><td>       Lyci    </td><td>       Lycian  </td>   </tr>
+<tr>   <td>    28      </td><td>       Mymr    </td><td>       Myanmar (Burmese)        </td><td>       108     </td><td>       Lydi    </td><td>       Lydian  </td>   </tr>
+<tr>   <td>    29      </td><td>       Ogam    </td><td>       Ogham   </td><td>       109     </td><td>       Olck    </td><td>       Ol Chiki (Ol Cemet’, Ol Santali)      </td>   </tr>
+<tr>   <td>    30      </td><td>       Ital    </td><td>       Old Italic (Etruscan, Oscan)       </td><td>       110     </td><td>       Rjng    </td><td>       Rejang (Redjang, Kaganga)        </td>   </tr>
+<tr>   <td>    31      </td><td>       Orya    </td><td>       Oriya   </td><td>       111     </td><td>       Saur    </td><td>       Saurashtra      </td>   </tr>
+<tr>   <td>    32      </td><td>       Runr    </td><td>       Runic   </td><td>       112     </td><td>       Sgnw    </td><td>       SignWriting     </td>   </tr>
+<tr>   <td>    33      </td><td>       Sinh    </td><td>       Sinhala </td><td>       113     </td><td>       Sund    </td><td>       Sundanese       </td>   </tr>
+<tr>   <td>    34      </td><td>       Syrc    </td><td>       Syriac  </td><td>       114     </td><td>       Moon    </td><td>       Moon (Mooncode, Moonscript, Moontype)    </td>   </tr>
+<tr>   <td>    35      </td><td>       Taml    </td><td>       Tamil   </td><td>       115     </td><td>       Mtei    </td><td>       Meitei Mayek (Meithei, Meetei)   </td>   </tr>
+<tr>   <td>    36      </td><td>       Telu    </td><td>       Telugu  </td><td>       116     </td><td>       Armi    </td><td>       Imperial Aramaic        </td>   </tr>
+<tr>   <td>    37      </td><td>       Thaa    </td><td>       Thaana  </td><td>       117     </td><td>       Avst    </td><td>       Avestan </td>   </tr>
+<tr>   <td>    38      </td><td>       Thai    </td><td>       Thai    </td><td>       118     </td><td>       Cakm    </td><td>       Chakma  </td>   </tr>
+<tr>   <td>    39      </td><td>       Tibt    </td><td>       Tibetan </td><td>       119     </td><td>       Kore    </td><td>       Korean (alias for Hangul+Han)    </td>   </tr>
+<tr>   <td>    40      </td><td>       Cans    </td><td>       Unified Canadian Aboriginal Syllabics   </td><td>       120     </td><td>       Kthi    </td><td>       Kaithi  </td>   </tr>
+<tr>   <td>    41      </td><td>       Yiii    </td><td>       Yi      </td><td>       121     </td><td>       Mani    </td><td>       Manichaean      </td>   </tr>
+<tr>   <td>    42      </td><td>       Tglg    </td><td>       Tagalog (Baybayin, Alibata)      </td><td>       122     </td><td>       Phli    </td><td>       Inscriptional Pahlavi   </td>   </tr>
+<tr>   <td>    43      </td><td>       Hano    </td><td>       Hanunoo (Hanunoo)        </td><td>       123     </td><td>       Phlp    </td><td>       Psalter Pahlavi </td>   </tr>
+<tr>   <td>    44      </td><td>       Buhd    </td><td>       Buhid   </td><td>       124     </td><td>       Phlv    </td><td>       Book Pahlavi    </td>   </tr>
+<tr>   <td>    45      </td><td>       Tagb    </td><td>       Tagbanwa        </td><td>       125     </td><td>       Prti    </td><td>       Inscriptional Parthian  </td>   </tr>
+<tr>   <td>    46      </td><td>       Brai    </td><td>       Braille </td><td>       126     </td><td>       Samr    </td><td>       Samaritan       </td>   </tr>
+<tr>   <td>    47      </td><td>       Cprt    </td><td>       Cypriot </td><td>       127     </td><td>       Tavt    </td><td>       TaiViet </td>   </tr>
+<tr>   <td>    48      </td><td>       Limb    </td><td>       Limbu   </td><td>       128     </td><td>       Zmth    </td><td>       Mathematical notation    </td>   </tr>
+<tr>   <td>    49      </td><td>       Linb    </td><td>       LinearB </td><td>       129     </td><td>       Zsym    </td><td>       Symbols </td>   </tr>
+<tr>   <td>    50      </td><td>       Osma    </td><td>       Osmanya </td><td>       130     </td><td>       Bamu    </td><td>       Bamum   </td>   </tr>
+<tr>   <td>    51      </td><td>       Shaw    </td><td>       Shavian (Shaw)   </td><td>       131     </td><td>       Lisu    </td><td>       Lisu (Fraser)    </td>   </tr>
+<tr>   <td>    52      </td><td>       Tale    </td><td>       TaiLe   </td><td>       132     </td><td>       Nkgb    </td><td>       Nakhi Geba ('Na-'Khi ²Ggŏ-¹baw, Naxi Geba)    </td>   </tr>
+<tr>   <td>    53      </td><td>       Ugar    </td><td>       Ugaritic        </td><td>       133     </td><td>       Sarb    </td><td>       Old South Arabian       </td>   </tr>
+<tr>   <td>    54      </td><td>       Hrkt    </td><td>       Japanese syllabaries (alias for Hiragana+Katakana)       </td><td>       134     </td><td>       Bass    </td><td>       BassaVah        </td>   </tr>
+<tr>   <td>    55      </td><td>       Bugi    </td><td>       Buginese        </td><td>       135     </td><td>       Dupl    </td><td>       Duployan shorthand, Duployan stenography        </td>   </tr>
+<tr>   <td>    56      </td><td>       Glag    </td><td>       Glagolitic      </td><td>       136     </td><td>       Elba    </td><td>       Elbasan </td>   </tr>
+<tr>   <td>    57      </td><td>       Khar    </td><td>       Kharoshthi      </td><td>       137     </td><td>       Gran    </td><td>       Grantha </td>   </tr>
+<tr>   <td>    58      </td><td>       Sylo    </td><td>       Syloti Nagri    </td><td>       138     </td><td>       Kpel    </td><td>       Kpelle  </td>   </tr>
+<tr>   <td>    59      </td><td>       Talu    </td><td>       New Tai Lue     </td><td>       139     </td><td>       Loma    </td><td>       Loma    </td>   </tr>
+<tr>   <td>    60      </td><td>       Tfng    </td><td>       Tifinagh (Berber)        </td><td>       140     </td><td>       Mend    </td><td>       Mende Kikakui   </td>   </tr>
+<tr>   <td>    61      </td><td>       Xpeo    </td><td>       Old Persian     </td><td>       141     </td><td>       Merc    </td><td>       Meroitic Cursive        </td>   </tr>
+<tr>   <td>    62      </td><td>       Bali    </td><td>       Balinese        </td><td>       142     </td><td>       Narb    </td><td>       Old North Arabian (Ancient North Arabian)        </td>   </tr>
+<tr>   <td>    63      </td><td>       Batk    </td><td>       Batak   </td><td>       143     </td><td>       Nbat    </td><td>       Nabataean       </td>   </tr>
+<tr>   <td>    64      </td><td>       Blis    </td><td>       Blissymbols     </td><td>       144     </td><td>       Palm    </td><td>       Palmyrene       </td>   </tr>
+<tr>   <td>    65      </td><td>       Brah    </td><td>       Brahmi  </td><td>       145     </td><td>       Sind    </td><td>       Khudawadi, Sindhi       </td>   </tr>
+<tr>   <td>    66      </td><td>       Cham    </td><td>       Cham    </td><td>       146     </td><td>       Wara    </td><td>       Warang Citi (Varang Kshiti)      </td>   </tr>
+<tr>   <td>    67      </td><td>       Cirt    </td><td>       Cirth   </td><td>       147     </td><td>       Afak    </td><td>       Afaka   </td>   </tr>
+<tr>   <td>    68      </td><td>       Cyrs    </td><td>       Cyrillic (Old Church Slavonic variant)   </td><td>       148     </td><td>       Jurc    </td><td>       Jurchen </td>   </tr>
+<tr>   <td>    69      </td><td>       Egyd    </td><td>       Egyptian demotic        </td><td>       149     </td><td>       Mroo    </td><td>       Mro, Mru        </td>   </tr>
+<tr>   <td>    70      </td><td>       Egyh    </td><td>       Egyptian hieratic       </td><td>       150     </td><td>       Nshu    </td><td>       Nushu   </td>   </tr>
+<tr>   <td>    71      </td><td>       Egyp    </td><td>       Egyptian hieroglyphs     </td><td>       151     </td><td>       Shrd    </td><td>       Sharada, Śāradā      </td>   </tr>
+<tr>   <td>    72      </td><td>       Geok    </td><td>       Khutsuri (Asomtavruli and Nuskhuri)      </td><td>       152     </td><td>       Sora    </td><td>       Sora Sompeng    </td>   </tr>
+<tr>   <td>    73      </td><td>       Hans    </td><td>       Han (Simplified variant) </td><td>       153     </td><td>       Takr    </td><td>       Takri, Ṭākrī, Ṭāṅkrī </td>    </tr>
+<tr>   <td>    74      </td><td>       Hant    </td><td>       Han (Traditional variant)        </td><td>       154     </td><td>       Tang    </td><td>       Tangut  </td>   </tr>
+<tr>   <td>    75      </td><td>       Hmng    </td><td>       Pahawh Hmong    </td><td>       155     </td><td>       Wole    </td><td>       Woleai  </td>   </tr>
+<tr>   <td>    76      </td><td>       Hung    </td><td>       Old Hungarian (Hungarian Runic)  </td><td>       156     </td><td>       Hluw    </td><td>       Anatolian hieroglyphs (Luwian hieroglyphs, Hittite hieroglyphs) </td>    </tr>
+<tr>   <td>    77      </td><td>       Inds    </td><td>       Indus (Harappan) </td><td>       157     </td><td>       Khoj    </td><td>       Khojki  </td>   </tr>
+<tr>   <td>    78      </td><td>       Java    </td><td>       Javanese        </td><td>       158     </td><td>       Tirh    </td><td>       Tirhuta </td>   </tr>
+<tr>   <td>    79      </td><td>       Kali    </td><td>       KayahLi </td><td>       -1      </td><td>               </td><td>       Invalid code     </td>   </tr>
+</tbody>
+</table>
+
+
 <h2 id="ucoll" name="ucoll">Ucollator</h2>
 <p>The Ucollator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">wearable</a> applications) performs locale-sensitive string comparison. It builds searching and sorting routines for natural language text and provides correct sorting orders for most supported locales. If specific data for a locale is not available, the order eventually falls back to the <a href="http://www.unicode.org/reports/tr35/tr35-collation.html#Root_Collation" target="_blank">CLDR root sort order</a>. The sorting order can be customized by providing your own set of rules. For more information, see the <a href="http://userguide.icu-project.org/collation/customization" target="_blank">ICU Collation Customization</a> section of the User Guide.</p>
 
@@ -210,7 +304,7 @@
 <p>The Unumber API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">wearable</a> applications) helps you to format and parse numbers for any locale. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. There are different number format styles like decimal, currency, percent and spellout.</p>
 
 <h2 id="usearch" name="usearch">Usearch</h2>
-<p>The Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications) provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct.</p>
+<p>The Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications) provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct. This ensures that language eccentricity can be handled. For example, for the German collator, characters ß and SS are matched if case is chosen to be ignored. That is why it can be important to pass a locale when creating the usearch with the <span style="font-family: Courier New,Courier,monospace">i18n_usearch_create_new()</span> function.</p>
 
 <h2 id="uset" name="uset">Uset</h2>
 <p>Uset is a mutable set of Unicode characters and multicharacter strings. The sets represent character classes used in regular expressions. A character specifies a subset of the Unicode code points. The legal code points are U+0000 to U+10FFFF, inclusive.</p>
diff --git a/org.tizen.guides/html/native/content/content_guide_n.htm b/org.tizen.guides/html/native/content/content_guide_n.htm
index 68b8e75..559c4b2 100644
--- a/org.tizen.guides/html/native/content/content_guide_n.htm
+++ b/org.tizen.guides/html/native/content/content_guide_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/content/download_n.htm b/org.tizen.guides/html/native/content/download_n.htm
index e85e247..0e853e8 100644
--- a/org.tizen.guides/html/native/content/download_n.htm
+++ b/org.tizen.guides/html/native/content/download_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -38,16 +38,7 @@
    <h1>Download</h1>
  <p>You can create and manage one or more download requests. Tizen allows you to create a new download process, configure the download URL or destination, and launch the process.</p>
  
-   <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
  
  <h2 id="state" name="state">Download States</h2>
  
diff --git a/org.tizen.guides/html/native/content/media_content_n.htm b/org.tizen.guides/html/native/content/media_content_n.htm
index f739372..4e016bb 100644
--- a/org.tizen.guides/html/native/content/media_content_n.htm
+++ b/org.tizen.guides/html/native/content/media_content_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/content/mime_type_n.htm b/org.tizen.guides/html/native/content/mime_type_n.htm
index 5c37a57..0f62f66 100644
--- a/org.tizen.guides/html/native/content/mime_type_n.htm
+++ b/org.tizen.guides/html/native/content/mime_type_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/context/activity_recognition_n.htm b/org.tizen.guides/html/native/context/activity_recognition_n.htm
index 0c24403..2bd3d82 100644
--- a/org.tizen.guides/html/native/context/activity_recognition_n.htm
+++ b/org.tizen.guides/html/native/context/activity_recognition_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/context/context_guide_n.htm b/org.tizen.guides/html/native/context/context_guide_n.htm
index e51fe3f..be7ba1d 100644
--- a/org.tizen.guides/html/native/context/context_guide_n.htm
+++ b/org.tizen.guides/html/native/context/context_guide_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/context/gesture_recognition_n.htm b/org.tizen.guides/html/native/context/gesture_recognition_n.htm
index 1b38559..1c4fd54 100644
--- a/org.tizen.guides/html/native/context/gesture_recognition_n.htm
+++ b/org.tizen.guides/html/native/context/gesture_recognition_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -36,17 +36,6 @@
 
 <p>With gesture recognition, you can receive notifications about different device movement patterns, identify device states, and trigger events when the sensor data meets predefined conditions. In some cases, you can also listen to different states (started, in-progress, and ended).</p>
 
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">You can test the gesture recognition functionality only on a target device. The Emulator does not support this feature.</td>
-    </tr>
-   </tbody>
-  </table>
-
 <p>The following gesture events are supported in Tizen devices:</p>
   
 <ul>
@@ -99,6 +88,17 @@
 <p align="center"><img alt="Wrist-up event" src="../../images/wrist_up.png" /></p></li>
   </ul>   
  
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">You can test the gesture recognition functionality only on a target device. The Emulator does not support this feature.</td>
+    </tr>
+   </tbody>
+  </table> 
+ 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/context/history_n.htm b/org.tizen.guides/html/native/context/history_n.htm
index 4c17180..5932043 100644
--- a/org.tizen.guides/html/native/context/history_n.htm
+++ b/org.tizen.guides/html/native/context/history_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
 	</div>
 
 	<div id="toc_border"><div id="toc">
@@ -39,16 +39,7 @@
 
 <p>The Tizen platform collects data on the device usage. Based on this data, the applications can take advantage of the user&#39;s application usage patterns through statistical analysis.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</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">
diff --git a/org.tizen.guides/html/native/context/trigger_n.htm b/org.tizen.guides/html/native/context/trigger_n.htm
index 00c6560..8b4916d 100644
--- a/org.tizen.guides/html/native/context/trigger_n.htm
+++ b/org.tizen.guides/html/native/context/trigger_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
 	</div>
 
 	<div id="toc_border"><div id="toc">
@@ -39,18 +39,9 @@
 
 <p>Tizen enables you to define rules as a combination of a contextual event, conditions, and an action. When the rule is enabled, the system starts to monitor the device status or user activities corresponding to the event defined in the rule. When the event is detected, the conditions are evaluated, and if the conditions are met, the action is triggered.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
-<p>The action can be an application launching request using an <a href="../app/application_n.htm#app_controls">App Control</a>, or a <a href="../app/notification_n.htm">notification posting</a>. For example, every day at 10:00 PM, if the battery level is low, the application can post a notification to remind the user to charge the battery.</p>
+<p>The action can be an application launching request using an <a href="../app/appcontrol_n.htm">App Control</a>, or a <a href="../app/notification_n.htm">notification posting</a>. For example, every day at 10:00 PM, if the battery level is low, the application can post a notification to remind the user to charge the battery.</p>
 
 <p>The main features of the Contextual Trigger API include:</p>
 
@@ -85,7 +76,7 @@
 <li>Condition
 <p>A condition denotes a contextual state or fact that can be recognized by the device. For example, the current device status or the historical pattern of the device usage can be used as conditions. In a rule, the application can define 1 condition, multiple conditions, or even no condition. If you define multiple conditions in a rule, the application can choose the way of combining the conditions using logical conjunctions or disjunctions. In case of the logical conjunction, the rule is true only if all the conditions are met. Otherwise, the rule can be true if at least 1 condition is met. If no condition is given, the rule is satisfied instantly when the corresponding event occurs.</p></li>
 <li>Action
-<p>An action is triggered when the rule is satisfied. Each rule must basically contain 1 action only. However, because the action itself can be defined as an <a href="../app/application_n.htm#app_controls">App Control</a>, if necessary, you can implement an application that executes a series of tasks to create a complex context-aware service.</p></li></ul>
+<p>An action is triggered when the rule is satisfied. Each rule must basically contain 1 action only. However, because the action itself can be defined as an <a href="../app/appcontrol_n.htm">App Control</a>, if necessary, you can implement an application that executes a series of tasks to create a complex context-aware service.</p></li></ul>
 
 <p>The following figure illustrates the rule components and their relations.
 </p>
@@ -565,7 +556,7 @@ context_trigger_rule_entry_add_comparison_int(time_condition, CONTEXT_TRIGGER_TI
 
 <ul>
 	<li>Application launch request:
-		<p>The contextual trigger allows you to set an <a href="../app/application_n.htm#app_controls">App Control</a> as an action. You can utilize the app control functionalities by developing an application with the corresponding app controls to execute a series of tasks when a rule is satisfied.</p></li>
+		<p>The contextual trigger allows you to set an <a href="../app/appcontrol_n.htm">App Control</a> as an action. You can utilize the app control functionalities by developing an application with the corresponding app controls to execute a series of tasks when a rule is satisfied.</p></li>
 	<li>Notification posting:
 		<p>A basic form of notification can be set as an action. A notification can contain a title, content body text, an icon, and an app control to be executed. For more information, see the <a href="../app/notification_n.htm">Notification</a> guide.</p></li>
 </ul>
diff --git a/org.tizen.guides/html/native/graphics/cairo_n.htm b/org.tizen.guides/html/native/graphics/cairo_n.htm
index a49f437..9cd2a42 100644
--- a/org.tizen.guides/html/native/graphics/cairo_n.htm
+++ b/org.tizen.guides/html/native/graphics/cairo_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/graphics/graphics_guide_n.htm b/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
index d84feb9..50e1a42 100644
--- a/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
+++ b/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -38,6 +38,7 @@
    <li><a href="opengles_n.htm">OpenGL ES</a> <p>Enables you to create OpenGL ES applications in Tizen with the EGL layer.</p></li>
    <li><a href="tbm_n.htm">TBM Surface</a> <p>Provides Tizen Buffer Manager (TBM) surface functions for the graphic buffer in Tizen.</p></li>
    <li><a href="cairo_n.htm">Cairo</a> <p>Allows you to use Cairo to draw on the image surface and Evas objects to get the image data.</p></li>
+   <li><a href="hw_acceleration_n.htm">Hardware Acceleration</a> <p>Allows you to enable hardware acceleration to increase rendering performance and use OpenGL ES.</p></li>
    
   </ul>
 
diff --git a/org.tizen.guides/html/native/graphics/hw_acceleration_n.htm b/org.tizen.guides/html/native/graphics/hw_acceleration_n.htm
new file mode 100644
index 0000000..960390e
--- /dev/null
+++ b/org.tizen.guides/html/native/graphics/hw_acceleration_n.htm
@@ -0,0 +1,92 @@
+<!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>Hardware Acceleration</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/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+    </div>
+
+<h1>Hardware Acceleration</h1>
+ 
+<p>Tizen supports hardware acceleration since Tizen 2.3.1. If hardware acceleration is enabled, it increases rendering performance and allows you to use OpenGL ES.</p>
+
+<p>You can enable hardware acceleration in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest</span> file, using the manifest editor&#39;s <strong>Advanced</strong> tab.</p>
+
+<p class="figure">Figure: Hardware acceleration option</p> 
+<p align="center"><img alt="Hardware acceleration option" src="../../images/hw_acceleration.png" /></p> 
+ 
+<p>In the <span style="font-family: Courier New,Courier,monospace">tizen-manifest</span> file, the option is shows as follows:</p>
+<pre class="prettyprint">
+&lt;ui-application appid=&quot;example&quot; hw-acceleration=&quot;on&quot;&gt;
+</pre>
+
+<p>The possible values are <span style="font-family: Courier New,Courier,monospace">on</span> (enabled) and <span style="font-family: Courier New,Courier,monospace">off</span> (disabled). If the value is not defined, the default system policy determines whether the hardware acceleration is enabled.</p>
+
+<p>Normally, it is enough to modify the manifest file to enable hardware acceleration. In the following special cases, however, additional actions are required:</p>
+
+<ul><li>OpenGL ES application
+<p>In addition to enabling hardware acceleration in the manifest file, you must also call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating an elm window.</p>
+
+<p>In an indirect rendering mode:</p>
+<pre class="prettyprint">
+elm_config_accel_preference_set(&quot;opengl&quot;);
+win = elm_win_util_standard_add(name, &quot;OpenGL example&quot;);
+</pre>
+<p>This function and option are supported since Tizen 2.3.</p>
+
+<p>In a direct rendering mode, if you want to use depth and stencil buffers or multisample, you have to specify them in the  <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function:</p>
+<pre class="prettyprint">
+elm_config_accel_preference_set(&quot;opengl:depth24:stencil8:msaa_high&quot;);
+win = elm_win_util_standard_add(name, &quot;OpenGL example&quot;);
+</pre>
+<p>In the above example, the depth buffer size is 24 bit, stencil buffer size is 8 bit and MSAA is on with a high bit.</p>
+<p>These special options are supported since Tizen 2.3.1. For more information, see <a href="../../../../org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm">OpenGL ES Tutorial</a>.</p>
+</li>
+<li>EFL WebKit (EWK) application
+<p>In addition to enabling hardware acceleration in the manifest file, you must also call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating an elm window. Because EWK uses a 24-bit depth buffer and a 8-bit stencil buffer, you must also specify them in the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function:</p>
+<pre class="prettyprint">
+elm_config_accel_preference_set(&quot;opengl:depth24:stencil8&quot;);
+win = elm_win_util_standard_add(name, &quot;EWK example&quot;);
+</pre>
+<p>These special options are supported since Tizen 2.3.1. For more information, see <a href="../../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web Tutorial</a>.</p>
+</li></ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/graphics/opengles_n.htm b/org.tizen.guides/html/native/graphics/opengles_n.htm
index 2c62eea..84c2860 100644
--- a/org.tizen.guides/html/native/graphics/opengles_n.htm
+++ b/org.tizen.guides/html/native/graphics/opengles_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -48,7 +48,7 @@
 
 <h2 id="tizen" name="tizen">OpenGL ES in Tizen</h2>
 
-<p>Building an OpenGL ES application in Tizen requires knowledge about <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">designing UI applications with EFL</a>.</p>
+<p>Building an OpenGL ES application in Tizen requires knowledge about <a href="../../../../org.tizen.ui.practices/html/native/efl/guides_efl_n.htm">designing UI applications with EFL</a>.</p>
 
 <p>Tizen native applications do not depend on the Window system, because the Window system is an internal Tizen module, which can be enhanced or replaced. EFL provides a method that draws the OpenGL ES content and encapsulates the EGL and the native Window system.</p>
 
@@ -73,28 +73,26 @@
 
 <p>GLView is a simple Elementary UI component that sets up an OpenGL ES target surface and a context, and allows you to embed it in any Tizen application. GLView is basically a wrapper around EvasGL, the OpenGL ES/EGL abstraction layer of EFL.</p>
 
-<h3>To create a basic application:</h3>
+<h3>Creating a Basic Application</h3>
 
-<p>First, you can declare the global variable using ELEMENTARY_GLVIEW_GLOBAL_DEFINE(), then create a GLView object and use ELEMENTARY_GLVIEW_GLOBAL_USE(glview). These macro help that you can call GL functions directly. Now, you can call GL functions. If you want to know that detail, refer Elementary_GL_Helpers.h, please.</p>
+<p>Declare the global variable using the <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span> function. Create a GLView object and use the <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE(glview)</span> function. These macros help you to call the GL functions directly.</p>
+<p>Now, you can call the GL functions. For more detailed information, see the <span style="font-family: Courier New,Courier,monospace">Elementary_GL_Helpers.h</span> file.</p>
 
 <pre class="prettyprint">
 #include &lt;app.h&gt;
 #include &lt;Elementary_GL_Helpers.h&gt;
 
-/*
- * This code to place at the beginning of any function using GLES 2.0 APIs.
- * When using this macro, developers can then call all glFunctions without changing their code.
- * If you want to know that detail, refer Elementary_GL_Helpers.h.
- */
+// This code is to be placed at the beginning of any function using GLES 2.0 APIs
+// When using this macro, you can call all glFunctions without changing their code
+// For details, see Elementary_GL_Helpers.h
 
 ELEMENTARY_GLVIEW_GLOBAL_DEFINE()
 </pre>
 
 <ol>
-    <li>HW acceleration</li>
-    <p>To develop a GL application, you have to call <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set</span> before creating a window. It makes an application to use GPU. This function is supported since Tizen 2.3.</p>
-    <p>To use the Direct Rendering mode of EvasGL or EFL WebKit(EWK), you have to set the same option values (depth, stencil and MSAA) to a rendering engine and a GLView object. EWK's options are depth24 and stencil8. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function and to a GLView object using the <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function. If the GLView object option values are bigger or higher than the rendering engine&#39;s, the Direct Rendering mode is disabled or abnormal rendering occurs. These special options will be supported since Tizen 2.3.1.</p>
-
+<li>Manage HW acceleration.
+<p>To develop a GL application, call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating a window. This makes an application to use GPU. The function is supported since Tizen 2.3.</p>
+<p>To use the Direct Rendering mode of EvasGL or EFL WebKit (EWK), set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. The EWK options are depth24 and stencil8. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function and to a GLView object using the <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function. If the GLView object option values are bigger or higher than the rendering engine&#39;s, the Direct Rendering mode is disabled or abnormal rendering occurs. These special options are supported since Tizen 2.3.1.</p>
 
 <pre class="prettyprint">
 static bool app_create(void *data) 
@@ -104,19 +102,17 @@ static bool app_create(void *data)
 &nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;GLView example&quot;, &quot;GLView example&quot;);
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
 &nbsp;&nbsp;&nbsp;ad-&gt;glview = ad-&gt;glview_create(ad-&gt;win);
-/*
- * This macro will set the global variable holding the GL API,
- * so that it's available to the application.
- * It should be used right after setting up the GL context object.
- * If you want to know that detail, refer Elementary_GL_Helpers.h
- */
+
+&nbsp;&nbsp;&nbsp;// This macro sets the global variable holding the GL API,
+&nbsp;&nbsp;&nbsp;// so that it is available to the application
+&nbsp;&nbsp;&nbsp;// Use it right after setting up the GL context object
+&nbsp;&nbsp;&nbsp;// For details, see Elementary_GL_Helpers.h
 &nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(ad-&gt;glview);
 &nbsp;&nbsp;&nbsp;glview_start(ad-&gt;glview);
 
 &nbsp;&nbsp;&nbsp;return true;
-}</pre>
-
-<li>Add the OpenGL ES view to the application</li>
+}</pre></li>
+<li>Add the OpenGL ES view to the application:
 
 <pre class="prettyprint">
 // This is the GL initialization function
@@ -147,7 +143,7 @@ static Evas_Object *glview_create(Evas_Object *win)
 
 &nbsp;&nbsp;&nbsp;return glview;
 }</pre>
-</ol>
+</li></ol>
 
 <h3>Setting up the Callbacks</h3>
 
@@ -170,8 +166,7 @@ static void init_gl(Evas_Object *glview)
 }</pre>
 	</li>
 	<li>Callback for resizing
-	<p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport. Because GLView size can be changed by a parent container, you should set a resize callback and should reset viewport size with new GLView size.
-</p>
+	<p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport. Because the GLView size can be changed by a parent container, you must set a resize callback and reset the viewport size with the new GLView size.</p>
 
 	<pre class="prettyprint">
 // GLView resize function
@@ -215,7 +210,7 @@ static void del_gl(Evas_Object *glview)
 }</pre>
 	</li>
 	<li>Add an animator.
-	<p>The application above is technically working but the scene does not get updated unless the frame is marked as such. Games might want to use an animator to have a regular update of the scene. Here is an example for a default update refresh rate:</p>
+	<p>The application above is technically working but the scene does not get updated unless the frame is marked as such. Games sometimes want to use an animator to have a regular update of the scene. Here is an example for a default update refresh rate:</p>
 
 	<pre class="prettyprint">
 static Eina_Bool anim_cb(void *data)
@@ -260,7 +255,8 @@ static void glview_start(Evas_Object *glview)
 
 <pre class="prettyprint">
 Evas_GL *evgl = elm_glview_evas_gl_get(glview);
-// Then it is possible to call any evas_gl function with it, for example:</pre>
+// Then it is possible to call any evas_gl function with it
+</pre>
 
 
   <table class="note"> 
@@ -278,17 +274,17 @@ Evas_GL *evgl = elm_glview_evas_gl_get(glview);
 
 <p>This guide assumes that the application uses EvasGL directly instead of using the GLView. (If the application uses a GLView, EvasGL is created internally.)</p>
 
-<p>First, you can declare the global variable using EVAS_GL_GLOBAL_GLES2_DEFINE(), then create a EvasGL and use EVAS_GL_GLOBAL_GLES2_USE(evasgl, evasgl’s context). It is similar to the GLView’s macro. These macro help that you can call GL functions directly. Now, you can call GL functions. If you want to know that detail, refer Evas_GL_GLES2_Helpers.h.</p>
+<p>First, you can declare the global variable using the <span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLOBAL_GLES2_DEFINE()</span> macro. Then, create an EvasGL and use <span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLOBAL_GLES2_USE(evasgl, evasgl context)</span>. This is similar to the GLView macro. Both macros help you to call GL functions directly.</p>
+
+<p>Now, you can call GL functions. For more detailed information, see the <span style="font-family: Courier New,Courier,monospace">Evas_GL_GLES2_Helpers.h</span> file.</p>
 
 <pre class="prettyprint">
 #include &lt;app.h&gt;
 #include &lt;Evas_GL_GLES2_Helpers.h&gt;
-...
-/*
- * This code to place at the beginning of any function using GLES 2.0 APIs.
- * When using this macro, developers can then call all glFunctions without changing their code
- * If you want to know that detail, refer Evas_GL_GLES2_Helpers.h.
- */
+
+// This code is to be placed at the beginning of any function using GLES 2.0 APIs
+// When using this macro, you can call all glFunctions without changing their code
+// For details, see Evas_GL_GLES2_Helpers.h
 EVAS_GL_GLOBAL_GLES2_DEFINE();
 </pre>
 
@@ -307,6 +303,8 @@ typedef struct appdata
 &nbsp;&nbsp;&nbsp;Evas_GL_Context *ctx;
 &nbsp;&nbsp;&nbsp;Evas_GL_Surface *sfc;
 &nbsp;&nbsp;&nbsp;Evas_GL_Config *cfg;
+&nbsp;&nbsp;&nbsp;Evas_Coord sfc_w;
+&nbsp;&nbsp;&nbsp;Evas_Coord sfc_h;
 
 &nbsp;&nbsp;&nbsp;unsigned int program;
 &nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
@@ -315,46 +313,43 @@ typedef struct appdata
 } appdata_s;</pre>
 
 <ul>
-	<li><span style="font-family: Courier New,Courier,monospace">Evas_Object *win</span>: Application window.</li>
-	<li><span style="font-family: Courier New,Courier,monospace">Evas_Object *img</span>: OpenGL ES canvas.</li>
-	<li><span style="font-family: Courier New,Courier,monospace">Evas_GL *evasgl</span>: EvasGL Object for rendering gl in Evas.</li>
-	<li><span style="font-family: Courier New,Courier,monospace">Evas_GL_API *glapi</span>: EvasGL API object that contains the GL APIs to be used in Evas GL.</li>
-	<li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Context *ctx</span>: EvasGL Context object, a GL rendering context in Evas GL.</li>
-	<li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface *sfc</span>: EvasGL Surface object, a GL rendering target in Evas GL.</li>
-	<li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Config *cfg</span>: EvasGL Surface configuration object for surface creation.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *win</span>: Application window.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *img</span>: OpenGL ES canvas.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_GL *evasgl</span>: EvasGL Object for rendering gl in Evas.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_API *glapi</span>: EvasGL API object that contains the GL APIs to be used in Evas GL.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Context *ctx</span>: EvasGL Context object, a GL rendering context in Evas GL.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface *sfc</span>: EvasGL Surface object, a GL rendering target in Evas GL.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Config *cfg</span>: EvasGL Surface configuration object for surface creation.</li>
 </ul>
 
-<h3>Creating Elm window and EvasGL</h3>
+<h3>Creating the Elm Window and EvasGL</h3>
 
+<p>To create the Elm window and EvasGL:</p>
 <ol>
-    <li>
-        HW acceleration
-        <p>To develop a GL application, you have to call elm_config_accel_preference_set() before creating a window. It makes an application to use GPU. This function is supported since Tizen 2.3.</p>
-        <p>To use the Direct Rendering mode of EvasGL or EFL WebKit (EWK), you have to set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. EWK’s options are depth24 and stencil8. You can set the option values to a rendering engine using the elm_config_accel_preference_set() function and to a GLView object using the elm_glview_mode_set() function. If the GLView object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled or abnormal rendering occurs. These Special options will be supported since Tizen 2.3.1.</p>
+    <li>Manage HW acceleration.
+        <p>To develop a GL application, call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating a window. THis makes an application to use GPU. The function is supported since Tizen 2.3.</p>
+        <p>To use the Direct Rendering mode of EvasGL, set the same option values (depth, stencil, and MSAA) to a rendering engine and a <span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface</span> object. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function and to a <span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface</span> object using the <span style="font-family: Courier New,Courier,monospace">Evas_GL_Config</span> object. If the <span style="font-family: Courier New,Courier,monospace">Evas_GL_Config</span> object option values are bigger or higher than the rendering engine&#39;s, the Direct Rendering mode is disabled or abnormal rendering occurs. These special options are supported since Tizen 2.3.1.</p>
 
 <pre class="prettyprint">
 Evas_Object *win;
-/*
- * To use OpenGL ES, the application should turn on hardware acceleration
- * To enable that, elm_config_accel_preference_set() with &quot;opengl&quat;
- * should be called before createing Elm window
- * This function is supported since 2.3.
- */
+
+// To use OpenGL ES, the application must switch on hardware acceleration
+// To enable that, call elm_config_accel_preference_set() with &quot;opengl&quat;
+// before creating the Elm window
+// This function is supported since 2.3.
 elm_config_accel_preference_set(&quot;opengl&quot;);
-/* Creating Elm Window */
+// Creating Elm window
 ad-&gt;win = elm_win_util_standard_add(&quot;Evas_GL Example&quot;, &quot;Evas_GL Example&quot;);
 </pre>
 
-        <p>We can create our EvasGL handler using <span style="font-family: Courier New,Courier,monospace">evas_gl_new(Evas * e)</span>. This initializer takes the Evas canvas that OpenGL ES is to be used on as a parameter. When developing an application with Elementary, we can use the canvas of our window:</p>
-
-        <pre class="prettyprint">ad-&gt;evasgl = evas_gl_new(evas_object_evas_get(ad-&gt;win));</pre>
-
-        <p>To free the memory allocated to this handler, use <span style="font-family: Courier New,Courier,monospace">evas_gl_free(Evas_GL *evas_gl)</span>.</p>
-    </li>
+<p>You can create your EvasGL handler using the <span style="font-family: Courier New,Courier,monospace">evas_gl_new(Evas * e)</span> function. This initializer takes as a parameter the Evas canvas on which OpenGL ES is to be used. When developing an application with Elementary, use the canvas of your window:</p>
+<pre class="prettyprint">ad-&gt;evasgl = evas_gl_new(evas_object_evas_get(ad-&gt;win));</pre>
 
-    <li>Creating a Surface
+<p>To free the memory allocated to this handler, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_free(Evas_GL *evas_gl)</span> function.</p>
+</li>
+<li>Create a surface.
 
-        <p>We must allocate a new config object to fill it out using <span style="font-family: Courier New,Courier,monospace">evas_gl_config_new()</span>. As long as Evas creates a config object for the user, it takes care of the backward compatibility issue. Once we have our config object, we can specify the surface settings:</p>
+<p>You must allocate a new config object to fill the surface out using the <span style="font-family: Courier New,Courier,monospace">evas_gl_config_new()</span> function. As long as Evas creates a config object for the user, it takes care of the backward compatibility issue. Once you have your config object, you can specify the surface settings:</p>
 
 <pre class="prettyprint">
 appdata_s *ad;
@@ -365,7 +360,7 @@ ad-&gt;cfg-&gt;stencil_bits = EVAS_GL_STENCIL_NONE; // Surface Stencil Format
 ad-&gt;cfg-&gt;options_bits = EVAS_GL_OPTIONS_NONE; // Configuration options (here, no extra options)
 </pre>
 
-        <p>Once we have configured the surface behavior, we must initialize the surface using <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_create(Evas_GL* evas_gl, Evas_GL_Config * cfg, int w, int h)</span>. This function takes the given Evas_GL object as the first parameter and the pixel format, and configuration of the rendering surface as the second parameter. The last two parameters are the width and height of the surface, which we recover directly from the window.</p>
+<p>Once we have configured the surface behavior, we must initialize the surface using <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_create(Evas_GL* evas_gl, Evas_GL_Config * cfg, int w, int h)</span>. This function takes the given Evas_GL object as the first parameter and the pixel format, and configuration of the rendering surface as the second parameter. The last two parameters are the width and height of the surface, which we recover directly from the window.</p>
 
 <pre class="prettyprint">
 Evas_Coord w, h;
@@ -373,37 +368,36 @@ evas_object_geometry_get(ad-&gt;win, NULL, NULL, &amp;w, &amp;h);
 ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, w, h);
 </pre>
 
-        <p>To manually delete a GL surface, use <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_destroy(Evas_GL *evas_gl, Evas_GL_Surface *surf)</span>.</p>
-    </li>
+<p>To manually delete a GL surface, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_destroy(Evas_GL *evas_gl, Evas_GL_Surface *surf)</span> function.</p></li>
 
-    <li>Creating a Context
+<li>Create a context.
 
-        <p>Here, we create a context for Evas_GL using <span style="font-family: Courier New,Courier,monospace">evas_gl_context_create(Evas_GL * evas_gl, Evas_GL_Context * share_ctx)</span>. You can merge the context with a higher context definition you must pass as a second parameter.</p>
+<p>Create a context for Evas_GL using the <span style="font-family: Courier New,Courier,monospace">evas_gl_context_create(Evas_GL * evas_gl, Evas_GL_Context * share_ctx)</span> function. You can merge the context with a higher context definition you must pass as a second parameter.</p>
 
 <pre class="prettyprint">
 ad-&gt;ctx = evas_gl_context_create(ad-&gt;evasgl, NULL);
-/*
- * This macro will set the global variable holding the GL API,
- * so that it's available to the application.
- * It should be used right after setting up the GL context object.
- * If you want to know that detail, refer Evas_GL_GLES2_Helpers.h.
- */
-EVAS_GL_GLOBAL_GLES2_USE(ad->evasgl, ad->ctx);
+
+// This macro sets the global variable holding the GL API,
+// so that it is available to the application
+// Use it right after setting up the GL context object
+// For details, see Evas_GL_GLES2_Helpers.h
+EVAS_GL_GLOBAL_GLES2_USE(ad-&gt;evasgl, ad-&gt;ctx);
 </pre>
 
-        <p>To delete the context later, use <span style="font-family: Courier New,Courier,monospace">evas_gl_context_destroy(Evas_GL *evas_gl, Evas_GL_Context *ctx)</span>. To delete the entire configuration object, use <span style="font-family: Courier New,Courier,monospace">evas_gl_config_free(Evas_GL_Config *cfg)</span> instead.</p>
-    </li>
+<p>To delete the context later, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_context_destroy(Evas_GL *evas_gl, Evas_GL_Context *ctx)</span> function. To delete the entire configuration object, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_config_free(Evas_GL_Config *cfg)</span> function instead.</p>
+   </li>
 </ol>
 
 <h3>Getting OpenGL ES APIs</h3>
 
-<p>If you want to get the API of OpenGL ES, You can get the API for rendering OpenGL ES with <span style="font-family: Courier New,Courier,monospace">evas_gl_api_get(Evas_GL *evas_gl_)</span>. This function returns a structure that contains all the OpenGL ES functions you can use to render in Evas. These functions consist of all the standard OpenGL ES 2.0 functions and any extra ones Evas has decided to provide in addition. If you have your code ported to OpenGL ES 2.0, it is easy to render to Evas. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>
+<p>If you want to get the API of OpenGL ES, you can get the API for rendering OpenGL ES with the <span style="font-family: Courier New,Courier,monospace">evas_gl_api_get(Evas_GL *evas_gl_)</span>function. This function returns a structure that contains all the OpenGL ES functions you can use to render in Evas. These functions consist of all the standard OpenGL ES 2.0 functions and any extra ones Evas has decided to provide in addition. If you have your code ported to OpenGL ES 2.0, it is easy to render to Evas. (OpenGL ES 3.0 is supported in the next Tizen version.)</p>
 
-<p>If you already use global macro as a EVAS_GL_GLOBAL_GLES2_XXX, you need not get the APIs.</p>
+<p>If you already use a global macro, such as <span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLOBAL_GLES2_XXX</span>, you need not get the APIs.</p>
 
 <pre class="prettyprint">
 ad-&gt;glapi = evas_gl_api_get(ad-&gt;evasgl);</pre>
 
+
 <h3>Callbacks</h3>
 
 <p>Now that we have configured the EvasGL environment, we declare a UI component in which all the OpenGL ES transformation takes place. In the example below, we selected the image component because it provides callbacks that allow us to play with the mouse events and coordinates, and we set up an image object that inherits the size of the parent window.</p>
@@ -427,6 +421,8 @@ img_pixels_get_cb(void *data, Evas_Object *obj)
 
 &nbsp;&nbsp;&nbsp;// Rendering process
 &nbsp;&nbsp;&nbsp;evas_gl_make_current(ad-&gt;evasgl, ad-&gt;sfc, ad-&gt;ctx);
+&nbsp;&nbsp;&nbsp;// Because the surface size can be changed, set the viewport in this callback
+&nbsp;&nbsp;&nbsp;gl-&gt;glViewport(0, 0, ad-&gt;sfc_w, ad-&gt;sfc_h);
 &nbsp;&nbsp;&nbsp;// Paint it blue
 &nbsp;&nbsp;&nbsp;gl-&gt;glClearColor(0.2, 0.2, 0.6, 1.0);
 &nbsp;&nbsp;&nbsp;gl-&gt;glClear(GL_COLOR_BUFFER_BIT);
@@ -450,7 +446,7 @@ animate_cb(void *data)
 
 ecore_animator_add(animate_cb, ad-&gt;img);</pre>
 
-<p>You can define several other callbacks that have an impact on the drawing depending on the mouse, resize, and deletion events. Because window size can be changed, you should set a resize callback of a window. You should recreate a Evas_GL_Surface in the resize callback and should reset viewport size with new window size.</p>
+<p>You can define several other callbacks that have an impact on the drawing depending on the mouse, resize, and deletion events.</p>
 
 <pre class="prettyprint">
 evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_DEL, img_del_cb, ad);
@@ -459,6 +455,37 @@ evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb,
 evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
 evas_object_event_callback_add(ad-&gt;win, EVAS_CALLBACK_RESIZE, win_resize_cb, ad);</pre>
 
+<p>Because the window size can be changed, you must set a resize callback for the window. In addition, you must recreate an <span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface</span> in the resize callback and reset the viewport size with the new window size:</p>
+
+<pre class="prettyprint">
+static void
+win_resize_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;if (ad-&gt;sfc)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_surface_destroy(ad-&gt;evasgl, ad-&gt;sfc);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, NULL, NULL, &amp;ad-&gt;sfc_w, &amp;ad-&gt;sfc_h);
+&nbsp;&nbsp;&nbsp;evas_object_image_size_set(ad-&gt;img, ad-&gt;sfc_w, ad-&gt;sfc_h);
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;img, ad-&gt;sfc_w, ad-&gt;sfc_h);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;img);
+
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;sfc)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Native_Surface ns;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, ad-&gt;sfc_w, ad-&gt;sfc_h);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(ad-&gt;img, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
 <h3>Setting a Surface into the Image Object</h3>
 
 <p>We can also fill in the native Surface information from the given EvasGL surface. For example, to adapt the surface to the target image when the size of the canvas changes, use the following code.</p>
@@ -467,6 +494,7 @@ evas_object_event_callback_add(ad-&gt;win, EVAS_CALLBACK_RESIZE, win_resize_cb,
 Evas_Native_Surface ns;
 evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
 evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);</pre>
+
 	  
 <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.guides/html/native/graphics/tbm_n.htm b/org.tizen.guides/html/native/graphics/tbm_n.htm
index f3cb78d..4a0706e 100644
--- a/org.tizen.guides/html/native/graphics/tbm_n.htm
+++ b/org.tizen.guides/html/native/graphics/tbm_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/guides_n.htm b/org.tizen.guides/html/native/guides_n.htm
index 08e1cdf..2accf72 100644
--- a/org.tizen.guides/html/native/guides_n.htm
+++ b/org.tizen.guides/html/native/guides_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 		<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
@@ -38,8 +38,10 @@
 <p>Select the API domain you are interested in and see what Tizen offers for your application:</p>
 
 <ul>
+	<li><a href="migration_guide_n.htm">Migration Guide</a>
+	<p>Enables you to make your application conform to Tizen 2.4 regarding to the application Framework APIs.</p></li>
 	<li><a href="account/account_guide_n.htm">Account</a>
-	<p>Enables you to manage account information, such as receive sync operation notifications, and obtain an access token by using the oauth2 authorization.</p></li>
+	<p>Enables you to manage account information, such as receive sync operation notifications, and obtain an access token by using the OAuth 2.0 authorization.</p></li>
 	<li><a href="app/app_guide_n.htm">Application Framework</a>
 	<p>Enables you to configure application properties, and manage application data, and runtime environment and behavior.</p></li>
 	<li><a href="base/base_guide_n.htm">Base</a>
@@ -73,12 +75,6 @@
 	<li><a href="web/web_guide_n.htm">Web</a>
 	<p>Enables you to access Web content.</p></li>
 </ul>
-
-<p>For information about features not implemented by a specific API:</p>
-<ul>	
-	<li><a href="porting/porting_n.htm">Porting</a> <strong>in mobile applications only</strong>
-	<p>Enables you to port your current 2.2.1 native API-based applications to the new 2.3 native API.</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.guides/html/native/location/geofence_n.htm b/org.tizen.guides/html/native/location/geofence_n.htm
index 53c48ae..3c72e31 100644
--- a/org.tizen.guides/html/native/location/geofence_n.htm
+++ b/org.tizen.guides/html/native/location/geofence_n.htm
@@ -15,7 +15,7 @@
 <body onload="prettyPrint()" style="overflow: auto;">
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -37,16 +37,7 @@
 <h1>Geofence</h1>
 <p>A geofence is a virtual perimeter for a real-world geographic area. A geofence is defined by either a geopoint with a radius in case of geopoint geofences, or a MAC address in case of Wi-Fi and Bluetooth geofences. The geofence feature alerts the user when the geofence state changes (the user crosses the perimeter).</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
 <p>The main geofence features are:</p>
 <ul>
diff --git a/org.tizen.guides/html/native/location/location_guide_n.htm b/org.tizen.guides/html/native/location/location_guide_n.htm
index 59cd731..d060813 100644
--- a/org.tizen.guides/html/native/location/location_guide_n.htm
+++ b/org.tizen.guides/html/native/location/location_guide_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -39,6 +39,8 @@
 <ul>
 <li><a href="location_n.htm">Location</a> 
 	<p>Provides the geographical location of the device.</p></li>
+<li><a href="maps_n.htm">Maps Service</a>
+    <p>Allows you to create and use the maps services, such as geocoder, place searching, and routing.</p></li>	
 </ul>
 
 
@@ -46,8 +48,6 @@
 <ul>
 <li><a href="geofence_n.htm">Geofence</a>
 	<p>Allows you to create and use geofences.</p></li>
-<li><a href="maps_n.htm">Maps Service</a>
-    <p>Allows you to create and use the maps services, such as geocoder, place searching, and routing.</p></li>
 </ul>
 
  
diff --git a/org.tizen.guides/html/native/location/location_n.htm b/org.tizen.guides/html/native/location/location_n.htm
index dd614cb..42b9f4a 100644
--- a/org.tizen.guides/html/native/location/location_n.htm
+++ b/org.tizen.guides/html/native/location/location_n.htm
@@ -16,15 +16,15 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
         <ul class="toc">
-				<li><a href="#manager">Location Manager</a></li>
-				<li><a href="#method">Location Method</a></li>
-				<li><a href="#settings">Location Settings</a></li>
+			<li><a href="#manager">Location Manager</a></li>
+			<li><a href="#method">Location Methods</a></li>
+			<li><a href="#settings">Location Settings</a></li>
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -40,15 +40,15 @@
 
   <h1>Location</h1>
   
-  <p>Location information has a geographical point on the Earth, and optionally location-related information can also contain information about altitude, accuracy about the geographical point and altitude, and speed and course of direction of the user. Location data features include managing location information on the device.</p>
+  <p>Location information has a geographical point on the Earth, and optionally location-related information can also contain information about altitude, accuracy about the geographical point and altitude, and the user speed and course of direction. Location data features include managing location information on the device.</p>
 
   <p> </p> 
   <p>The main location features are:</p> 
-  <ul>
-    <li><a href="#manager">Enabling the Location Manager</a></li>
-    <li><a href="#method">Defining the location method</a></li>
-    <li><a href="#settings">Defining the location settings</a></li>
-  </ul> 
+	<ul> 
+	<li><a href="#manager">Enabling the Location Manager</a></li>
+	<li><a href="#method">Defining the location method</a></li>
+	<li><a href="#settings">Defining the location settings</a></li>
+	</ul>  
  
   <table class="note"> 
    <tbody> 
@@ -63,41 +63,43 @@
   </table> 
   
   <h2 id="manager" name="manager">Location Manager</h2> 
-  <p>The Location Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">wearable</a> applications) provides the current location using the location sources specified in the <a href="#method">location method</a>.</p> 
-  <p>Using the <span style="font-family: Courier New,Courier,monospace">Location Manager</span> allows your application to: </p> 
+  <p>The Location Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">wearable</a> applications) provides the current location using the location sources specified in the <a href="#method">location method</a>.</p>   
+<p>With the Location Manager, you can:</p> 
   <ul> 
    <li>Get the current location</li> 
    <li>Get the last known location</li> 
    <li>Get location updates</li>  
   </ul> 
   <p>Asynchronous location-related updates and region monitoring notifications are implemented with callback interfaces (functions whose names end with &quot;cb&quot;).</p> 
-  <p>You can use the location state and updates as follows:</p>
+	<p>You can use the location state and updates as follows:</p> 
   <ul> 
    <li><p>If the Location Manager is working correctly, the location state is set to <span style="font-family: Courier New,Courier,monospace">LOCATIONS_SERVICE_ENABLED</span>. The device can receive notifications about location updates and accuracy changes only in this update state.</p></li> 
-   <li><p>If the Location Manager is unable to run on the requested device due to weak radio reception, the location update state is set to <span style="font-family: Courier New,Courier,monospace">LOCATIONS_SERVICE_DISABLED (LOCATIONS_ERROR_SERVICE_NOT_AVAILABLE)</span>. If this situation persists for a longer period, it is recommended to stop the service and try again to conserve the device battery.</p></li> 
+	<li><p>If the Location Manager is unable to run on the requested device due to weak radio reception, the location update state is set to <span style="font-family: Courier New,Courier,monospace">LOCATIONS_SERVICE_DISABLED (LOCATIONS_ERROR_SERVICE_NOT_AVAILABLE)</span>. If this situation persists for a longer period, it is recommended to stop the service and try again to conserve the device battery.</p></li> 
    <li><p>If the user revokes a permission for the application to use location information, the location update state is set to <span style="font-family: Courier New,Courier,monospace">LOCATIONS_ACCESS_STATE_DENIED</span>, and the Location Manager stops all on-going services with the application. The application can request the device user for a permission to continue the stopped service.</p></li> 
   </ul> 
   
-  <h2 id="method" name="method">Location Method</h2>
-  <p>The location Method is used for specifying the desired quality of service of the Location Manager. For example, a location-based weather forecast application can require location-related information just to distinguish a city or a neighborhood while a GPS navigation application can require the highest quality level to pinpoint a map location. Selecting the appropriate quality level not only helps the Location Manager to run the system efficiently but also leads to a good user experience.</p> 
-  <p>Using the <span style="font-family: Courier New,Courier,monospace">location_method_e</span> structure allows your application to specify the following methods of location positioning system:</p>
-  
-    <ul> 
+	<h2 id="method" name="method">Location Methods</h2>
+
+<p>The location method is used to specify the desired quality of service of the Location Manager. For example, a location-based weather forecast application can require location-related information just to distinguish a city or a neighborhood, while a GPS navigation application can require the highest quality level to pinpoint a map location. Selecting the appropriate quality level not only helps the Location Manager to run the system efficiently, but also leads to a good user experience.</p> 
+<p>Using the <span style="font-family: Courier New,Courier,monospace">location_method_e</span> structure (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">wearable</a> applications) allows your application to specify the following methods of location positioning system:</p>
+  <ul> 
    <li>GPS, which uses the global positioning system</li> 
    <li>WPS, which uses the Wi-Fi positioning system</li>
    <li>Hybrid, which selects the best method available at the moment</li> 
   </ul> 
   
-  <p>Based on the desired method, the Location Manager provides best-effort location-based services, such as an asynchronous location update or region monitoring notification.</p> 
-     
-  <h2 id="settings" name="settings">Location Settings</h2> 
-  <p>Tizen provides the user a robust way of controlling the usage of their location data through the device location settings. The following figure shows the various options for enabling or disabling specific positioning technologies.</p> 
-  <p class="figure">Figure: Location setting and indicator</p> 
-  <p align="center"><img alt="Location settings" src="../../images/location_setting_and_indicator.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-  <p>The location-related functions work differently based on whether the location settings are used.</p>
-  <p> The <strong>GPS</strong> setting controls the Global Positioning System usage. It takes GPS satellite signals and provides accurate positioning services generally outdoors. The <strong>Wireless networks</strong> setting enables the usage of network-based positioning technology, which includes Wi-Fi and cell tower-based positioning, and improves the coverage of positioning services to indoors.</p> 
-  <p> </p>
-  <p>All location settings are initially enabled, if the model is support GPS. To disable them, the user must manually toggle the buttons. The manual task required from the user is understood as an implicit user consent.</p> 
+<p>Based on the desired method, the Location Manager provides best-effort location-based services, such as an asynchronous location update or region monitoring notification.</p> 
+
+	<h2 id="settings" name="settings">Location Settings</h2> 
+
+<p>Tizen provides a robust way of controlling the usage of the location data through the device location settings. The following figure shows the various options for enabling or disabling specific positioning technologies.</p> 
+    <p class="figure">Figure: Location settings and indicator</p> 
+<p align="center"><img alt="Location settings and indicator" src="../../images/location_setting_and_indicator.png" /></p> 
+
+<p>The location-related functions work differently based on whether the location settings are used.</p>
+
+<p>The <strong>GPS</strong> setting controls the Global Positioning System usage. It uses GPS satellite signals and provides accurate positioning services, generally outdoors. The <strong>Wireless networks</strong> setting enables the usage of network-based positioning technology, which includes Wi-Fi and cell tower-based positioning, and improves the coverage of positioning services to indoors.</p> 
+<p>All location settings are initially enabled, if the device supports GPS. To disable them, the user must manually toggle the buttons. The manual task required from the user is understood as an implicit user consent.</p> 
 
   <table class="note"> 
    <tbody> 
@@ -134,4 +136,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/org.tizen.guides/html/native/location/maps_n.htm b/org.tizen.guides/html/native/location/maps_n.htm
index 7427969..0d06578 100644
--- a/org.tizen.guides/html/native/location/maps_n.htm
+++ b/org.tizen.guides/html/native/location/maps_n.htm
@@ -16,7 +16,7 @@
 <body onload="prettyPrint()" style="overflow: auto;">
 	<div id="toc-navigation">
 		<div id="profile">
-			<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+			<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 		</div>
 		<div id="toc_border">
 			<div id="toc">
@@ -24,6 +24,7 @@
 				<ul class="toc">
 					<li><a href="../../../../org.tizen.tutorials/html/native/location/maps_tutorial_n.htm">Maps Service Tutorial</a></li>
 					<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service API for Mobile Native</a></li>
+					<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service API for Wearable Native</a></li>
 				</ul>
 			</div>
 		</div>
@@ -34,17 +35,6 @@
 <h1>Maps Service</h1>
 <p>Map service features include geocoding, reverse geocoding, place searching, and route calculation.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
 <p>The main Maps Service API features are:</p>
 <ul>
 	<li>Discovering and selecting a map provider
diff --git a/org.tizen.guides/html/native/messaging/email_n.htm b/org.tizen.guides/html/native/messaging/email_n.htm
index 1ae9a57..1459cad 100644
--- a/org.tizen.guides/html/native/messaging/email_n.htm
+++ b/org.tizen.guides/html/native/messaging/email_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -33,16 +33,7 @@
 	<h1>Email</h1>
 <p>Email is a method of exchanging digital messages. Email systems are based on a store-and-forward model, in which email server computer systems accept, forward, deliver, and store messages on behalf of users, who only need to connect to the email infrastructure, typically an email server, with a network-enabled device for the duration of a message submission or retrieval.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
 <p>Email provides features for composing, saving, and sending email messages using an SMTP (SMTP used for sending emails through the Internet is described in the RFC5321/5322 standards). It provides services to applications that make use of the email service.</p>
 
diff --git a/org.tizen.guides/html/native/messaging/messages_n.htm b/org.tizen.guides/html/native/messaging/messages_n.htm
index 321ab8d..ad9cc17 100644
--- a/org.tizen.guides/html/native/messaging/messages_n.htm
+++ b/org.tizen.guides/html/native/messaging/messages_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/messaging/messaging_guide_n.htm b/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
index a4c4311..3662533 100644
--- a/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
+++ b/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/messaging/push_n.htm b/org.tizen.guides/html/native/messaging/push_n.htm
index 0b9a195..4ca35d4 100644
--- a/org.tizen.guides/html/native/messaging/push_n.htm
+++ b/org.tizen.guides/html/native/messaging/push_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,10 +34,9 @@
 <h1>Push</h1>
 
 <p>Push enables you to push events from an application server to your application on a Tizen device.</p> 
-  <p class="figure">Figure: Push messaging service</p> 
-  <p align="center"><img alt="Push messaging service" src="../../images/ui_push_message.png" /></p> 
+
   <p>Once your application is successfully registered in the push server through the push daemon on the device, your application server can send push messages to the application in that particular device.</p> 
-  <p>When a push message arrives when the application is running, it is automatically delivered to the application. If not, the daemon makes a sound or vibrates and adds a ticker or a badge notification to notify the user. By touching this notification, the user can check the message. The application server may send a message with a <span style="font-family: Courier New,Courier,monospace">LAUNCH</span> option. In this case, the daemon forcibly launches the application and hands over the message to the application as an <a href="../app/application_n.htm#app_controls">app control</a>.</p>
+  <p>When a push message arrives when the application is running, it is automatically delivered to the application. If not, the daemon makes a sound or vibrates and adds a ticker or a badge notification to notify the user. By touching this notification, the user can check the message. The application server may send a message with a <span style="font-family: Courier New,Courier,monospace">LAUNCH</span> option. In this case, the daemon forcibly launches the application and hands over the message to the application as an <a href="../app/appcontrol_n.htm">app control</a>.</p>
 
 <p>To use the push messaging service, the application needs the permission to access Tizen push server. Request the permission from the Tizen push service team by email (<a href="mailto:push.tizen@samsung.com">push.tizen@samsung.com</a>), including the information listed in the following table. When the team approves your request, you receive a push app ID corresponding to your package ID.</p>
 
@@ -105,6 +104,9 @@
 </tbody>
 </table>
 
+  <p class="figure">Figure: Push messaging service</p> 
+  <p align="center"><img alt="Push messaging service" src="../../images/ui_push_message.png" /></p> 
+
   <h2 id="service" name="service">Service Architecture</h2> 
   <p>The following figure illustrates the service architecture of the Tizen push messaging service.</p> 
   <p class="figure">Figure: Service architecture</p> 
diff --git a/org.tizen.guides/html/native/migration_guide_n.htm b/org.tizen.guides/html/native/migration_guide_n.htm
new file mode 100644
index 0000000..6408176
--- /dev/null
+++ b/org.tizen.guides/html/native/migration_guide_n.htm
@@ -0,0 +1,145 @@
+<!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>Migration Guide</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#bg_app">New Background Application Policy</a></li>
+			<li><a href="#alarm">Changes in the Alarm API for Reducing Power Consumption</a></li>
+			<li><a href="#event">Tizen Application Event System</a></li>
+			<li><a href="#group_launch">Application Group Launching Management</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API for Mobile Native</a></li>
+			<li><a href="../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API for Wearable Native</a></li>
+			</ul>
+</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Migration Guide</h1> 
+  
+<p>Tizen 2.4 introduces new APIs for applications and modifies the behavior of some APIs to improve the quality of the platform. The following sections define the issues you must consider to make your application conform to Tizen 2.4 Application Framework APIs.</p>
+
+<h2 id="bg_app" name="bg_app">New Background Application Policy</h2>
+<p>Since Tizen 2.4, the application on the background goes into a suspended state.</p>
+<p>In the suspended state, the application process is executed with limited CPU resources. In other words, the platform does not allow the running of the background applications, except for some exceptional applications (such as Media and Download) that necessarily work on the background. In this case, the application can designate their background category as an allowed category to avoid going into the suspended state.</p>
+<p>The following table lists the background categories that <a href="app/application_n.htm#allow_bg">allow the application to run on the background</a>.</p> 
+
+<table>
+	<caption>
+		Table: Allowed background application policy
+	</caption>
+	 <tbody>
+        <tr>
+            <th>Background category</th>
+            <th>Description</th>
+			<th>Related APIs</th>
+            <th>Manifest file <span style="font-family: Courier New,Courier,monospace;">&lt;background-category&gt;</span> element value</th>
+        </tr>
+		<tr>
+			<td>Media</td>
+			<td>Playing audio, recording, and outputting streaming video on the background</td>
+			<td>Multimedia API (in <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">mobile</a> and <a href="../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">wearable</a> applications)</td>
+			<td><span style="font-family: Courier New,Courier,monospace;">media</span></td>
+		</tr>
+		<tr>
+			<td>Download</td>
+			<td>Downloading data with the Tizen Download API</td>
+			<td>Download API (in <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">mobile</a> applications)</td>
+			<td><span style="font-family: Courier New,Courier,monospace;">download</span></td>
+		</tr>
+		<tr>
+			<td>Background network</td>
+			<td>Processing general network operations on the background (such as Sync Manager, IM, and VOIP)</td>
+			<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>
+			<td><span style="font-family: Courier New,Courier,monospace;">background-network</span></td>
+		</tr>
+		<tr>
+			<td>Location</td>
+			<td>Processing location data on the background</td>
+			<td>Location API (in <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">mobile</a> and <a href="../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">wearable</a> applications)</td>
+			<td><span style="font-family: Courier New,Courier,monospace;">location</span></td>
+		</tr>
+		<tr>
+			<td>Sensor (context)</td>
+			<td>Processing context data from the sensors, such as gesture</td>
+			<td>Sensor API (in <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">mobile</a> and <a href="../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">wearable</a> applications)</td>
+			<td><span style="font-family: Courier New,Courier,monospace;">sensor</span></td>
+		</tr>
+		<tr>
+			<td>IoT Communication/Connectivity</td>
+			<td>Communicating between external devices on the background (such as Wi-Fi and Bluetooth)</td>
+			<td>Wi-Fi (in <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">mobile</a> and <a href="../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">wearable</a> applications) and Bluetooth API (in <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications)</td>
+			<td><span style="font-family: Courier New,Courier,monospace;">iot-communication</span></td>
+		</tr>
+	</tbody>
+</table>
+			
+<p>You can receive an event when the background application goes to the suspended state. Pass <span style="font-family: Courier New,Courier,monospace;">APP_EVENT_SUSPENDED_STATE_CHANGED</span> as <span style="font-family: Courier New,Courier,monospace;">event_type</span> to the <span style="font-family: Courier New,Courier,monospace;">ui_app_add_event_handler()</span> or <span style="font-family: Courier New,Courier,monospace;">service_app_add_event_handler()</span> function to handle the suspended event. You must release the resources properly when your application goes to the suspended state.</p>
+ 
+ 
+<h2 id="alarm" name="alarm">Changes in the Alarm API for Reducing Power Consumption</h2>
+<p>Since Tizen 2.4, the Alarm API is changed to reduce the power consumption of the device:</p>
+
+<ul>
+<li>Alarm APIs that support exact alarms are changed to be able to launch UI applications only. While launching UI applications when the alarm expires, the framework turns the LCD display on. Because of this you must not use those Alarm APIs for background processing. You can use the <span style="font-family: Courier New,Courier,monospace;">alarm_schedule_after_delay()</span> function that supports an inexact alarm for background processing.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">alarm_schedule_after_delay()</span> function is changed to support an inexact alarm. You can pass a period for alarm expiration, but the platform decides when the alarm expires according to the status of the device.
+<p>The <span style="font-family: Courier New,Courier,monospace;">alarm_schedule_after_delay()</span> function can launch service applications when it is expired. However, the target service application must specify a background category to be registered as the target application of the function.</p></li>
+<li>Regarding the <span style="font-family: Courier New,Courier,monospace;">app_control</span> parameter of the Alarm APIs, only explicit launch is allowed. You cannot pass <span style="font-family: Courier New,Courier,monospace;">app_control</span> for an implicit launch because the implicit launch cannot specify the target application when it is registered.</li>
+</ul>
+<p>When you migrate your application from Tizen 2.3 to Tizen 2.4, check the changes and modify your application to conform with the Tizen 2.4 Alarm APIs.</p>
+
+<h2 id="event" name="event">Tizen Application Event System</h2>
+<p>Tizen 2.4 introduces new Tizen Application Event APIs for subscribing system events and publishing and subscribing application events to other applications.</p>
+<p>Using the Tizen Application Event APIs, you can register your service application to be launched when a specified event is published. You can specify the event name through the <span style="font-family: Courier New,Courier,monospace;">&lt;app-control&gt;</span> element in the application manifest file. This launch-on-event allows your service application to only run after receiving an event from the platform or other application. Note that UI applications cannot be launched using the launch-on-event mechanism. For more information, see the Event API (in <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">mobile</a> and <a href="../../../org.tizen.native.wearable.apireference/group__CAPI__EVENT__MODULE.html">wearable</a> applications).</p>
+
+<h2 id="group_launch" name="group_launch">Application Group Launching Management</h2>
+<p>When you launch an application using the <span style="font-family: Courier New,Courier,monospace;">app_control_send_launch_request()</span> function, you can treat the launched application as a sub-view of your application. For example, when your application launches the message composer application to send a message, you can treat the message composer as a member of your application group. Tizen 2.4 introduces the application group feature to supports this requirement.</p>
+<p>The application can specify a launch mode when it launches a new application with the <span style="font-family: Courier New,Courier,monospace;">app_control_set_launch_mode()</span> function. The <span style="font-family: Courier New,Courier,monospace;"> APP_CONTROL_LAUNCH_MODE_SINGLE</span> mode means the launched application is launched in a separate group and the <span style="font-family: Courier New,Courier,monospace;">APP_CONTROL_LAUNCH_MODE_GROUP</span> mode means that the launched application is included in the group of the caller application.</p>
+<p>You can also specify whether your application supports the group mode launching. You can specify the supported launch mode of your application in the application manifest file. If you specify the <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> as <span style="font-family: Courier New,Courier,monospace;">single</span>, your application is always launched in a separate group,  even if the caller application requests the <span style="font-family: Courier New,Courier,monospace;">APP_CONTROL_LAUNCH_MODE_GROUP</span> mode. If you specify the <span style="font-family: Courier New,Courier,monospace;">launch_mode</span> as <span style="font-family: Courier New,Courier,monospace;">caller</span>, your application is launched according to the caller application request. If you specify the mode as <span style="font-family: Courier New,Courier,monospace;">group</span>, the application is included in the group of caller application.</p>
+<p>For more information, see the <a href="app/appcontrol_n.htm#group">Managing Application Groups</a> guide.</p>
+
+ 
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/audio_io_n.htm b/org.tizen.guides/html/native/multimedia/audio_io_n.htm
index c01d19b..5b19ce7 100644
--- a/org.tizen.guides/html/native/multimedia/audio_io_n.htm
+++ b/org.tizen.guides/html/native/multimedia/audio_io_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/camera_n.htm b/org.tizen.guides/html/native/multimedia/camera_n.htm
index d1eff57..23d8ca0 100644
--- a/org.tizen.guides/html/native/multimedia/camera_n.htm
+++ b/org.tizen.guides/html/native/multimedia/camera_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/image_util_n.htm b/org.tizen.guides/html/native/multimedia/image_util_n.htm
index 519f941..57a7865 100644
--- a/org.tizen.guides/html/native/multimedia/image_util_n.htm
+++ b/org.tizen.guides/html/native/multimedia/image_util_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/media_codecs_n.htm b/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
index d600b8a..5150d4c 100644
--- a/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
+++ b/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/media_controller_n.htm b/org.tizen.guides/html/native/multimedia/media_controller_n.htm
index 8f7f645..a103043 100644
--- a/org.tizen.guides/html/native/multimedia/media_controller_n.htm
+++ b/org.tizen.guides/html/native/multimedia/media_controller_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/media_tools_n.htm b/org.tizen.guides/html/native/multimedia/media_tools_n.htm
index 46fae74..12c7cb4 100644
--- a/org.tizen.guides/html/native/multimedia/media_tools_n.htm
+++ b/org.tizen.guides/html/native/multimedia/media_tools_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/media_vision_n.htm b/org.tizen.guides/html/native/multimedia/media_vision_n.htm
index 0d8c846..7548996 100644
--- a/org.tizen.guides/html/native/multimedia/media_vision_n.htm
+++ b/org.tizen.guides/html/native/multimedia/media_vision_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -33,7 +33,7 @@
 
 <h1>Media Vision</h1>
 
-<p>You can perceive and understand an image or to extract information from images in ypur application.</p>
+<p>You can perceive and understand an image or to extract information from images in your application.</p>
 <p>The main features of Media Vision API include:</p>
 
 <ul>
@@ -42,30 +42,21 @@
 </li>
 <li>Detecting barcodes
 <p>You can detect barcodes in an image or from camera preview streams, and then decrypt them to display messages to the user.</p> 
-<p>Before detecting a barcode, you must define the following detection attribute:</p>
-		<ul>
-			<li>Barcode detection target:
+<p>Before detecting a barcode, you must define the barcode detection target attribute value:</p>
 				<ul>
 					<li>Detect both 1D and 2D barcodes</li>
 					<li>Detect 1D barcodes only</li>
 					<li>Detect 2D barcodes only</li>
 				</ul>
-			</li>
-		</ul>
 </li>
 <li>Generating barcodes
 <p>You can encrypt a given message, generate a barcode from it, and save it in a memory or as a file.</p>
-<p>Define the barcode type:</p>
-<p>Before generating a barcode, you must define the following generation attribute:</p>
-		<ul>
-			<li>Barcode generation text:
-				<ul>
-					<li>Generate barcode without input message</li>
-					<li>Generate barcode with input message (Support only 1D barcodes)</li>
-				</ul>
-			</li>
-		</ul>
-<p>and specifications:</p>
+<p>Before generating a barcode, you must define the barcode text generation attribute value:</p>
+			   <ul>
+					   <li>Generate barcode without an input message</li>
+					   <li>Generate barcode with an input message (supports only 1D barcodes)</li>
+			   </ul>
+<p>You must also define the following specifications:</p>
 		<ul>
 			<li><a href="#barcode">Barcode type</a></li>
 			<li><a href="#qrcode">QR code specification</a> (if the QA code barcode type is used)</li>
@@ -207,4 +198,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.guides/html/native/multimedia/metadata_editor_n.htm b/org.tizen.guides/html/native/multimedia/metadata_editor_n.htm
index 64d45a5..edb2b0e 100644
--- a/org.tizen.guides/html/native/multimedia/metadata_editor_n.htm
+++ b/org.tizen.guides/html/native/multimedia/metadata_editor_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm b/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
index ad6e406..3ce3d7e 100644
--- a/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
+++ b/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm b/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
index c7d342a..b11f498 100644
--- a/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
+++ b/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -67,7 +67,7 @@
  
 <p>The following guides apply in <strong>mobile applications only</strong>:</p>
 	<ul>
-	<li><a href="screen_mirroring_n.htm">Screen Mirroring Sink</a> 
+	<li><a href="screen_mirroring_n.htm">Screen Mirroring</a> 
 	<p>Enables you to mirror the device screen and sound to another device wirelessly.</p></li>	
 	<li><a href="video_util_n.htm">Video Util</a> 
 	<p>Enables you to use video transcoding features, such as multi-format codec and output format.</p></li>
diff --git a/org.tizen.guides/html/native/multimedia/player_n.htm b/org.tizen.guides/html/native/multimedia/player_n.htm
index b1dbac0..033df71 100644
--- a/org.tizen.guides/html/native/multimedia/player_n.htm
+++ b/org.tizen.guides/html/native/multimedia/player_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/radio_n.htm b/org.tizen.guides/html/native/multimedia/radio_n.htm
index 7319310..b4224aa 100644
--- a/org.tizen.guides/html/native/multimedia/radio_n.htm
+++ b/org.tizen.guides/html/native/multimedia/radio_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/recorder_n.htm b/org.tizen.guides/html/native/multimedia/recorder_n.htm
index b3e54b7..509b036 100644
--- a/org.tizen.guides/html/native/multimedia/recorder_n.htm
+++ b/org.tizen.guides/html/native/multimedia/recorder_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm b/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm
index efe4cb9..3aeb448 100644
--- a/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm
+++ b/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm
@@ -10,41 +10,32 @@
     <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Screen Mirroring Sink</title>
+  <title>Screen Mirroring</title>
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
         <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm">Screen Mirroring Sink Tutorial</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink API for Mobile Native</a></li>
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm">Screen Mirroring Tutorial</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__MODULE.html">Screen Mirroring API for Mobile Native</a></li>
         </ul>
     </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Screen Mirroring Sink</h1>
+<h1>Screen Mirroring</h1>
 
  <p>You can mirror the device screen and sound to another device wirelessly using the screen mirroring feature. It follows the Wi-Fi Display Technical Specification and supports the feature as a sink, which receives shared data from a source device that supports the Wi-Fi Display, and displays it.</p>
 
-  <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>This feature is supported in mobile applications only.</p>
  
-  <p>The main features of the Screen Mirroring Sink API include:</p>
+  <p>The main features of the Screen Mirroring API include:</p>
   <ul>
    <li>Managing the connection to the screen mirroring source
    <p>You can connect to and disconnect from a screen mirroring source, and start, pause, and resume the screen mirroring sink.</p>
diff --git a/org.tizen.guides/html/native/multimedia/sound_manager_n.htm b/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
index 3bee14b..a19fc91 100644
--- a/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
+++ b/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/thumbnail_util_n.htm b/org.tizen.guides/html/native/multimedia/thumbnail_util_n.htm
index d3785bd..1d3c294 100644
--- a/org.tizen.guides/html/native/multimedia/thumbnail_util_n.htm
+++ b/org.tizen.guides/html/native/multimedia/thumbnail_util_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/tone_player_n.htm b/org.tizen.guides/html/native/multimedia/tone_player_n.htm
index 86089ab..dcd6e16 100644
--- a/org.tizen.guides/html/native/multimedia/tone_player_n.htm
+++ b/org.tizen.guides/html/native/multimedia/tone_player_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/multimedia/video_util_n.htm b/org.tizen.guides/html/native/multimedia/video_util_n.htm
index 51f91dd..dcc35d2 100644
--- a/org.tizen.guides/html/native/multimedia/video_util_n.htm
+++ b/org.tizen.guides/html/native/multimedia/video_util_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -40,16 +40,7 @@
 <li>Trim
 <p>A trim chapter is available in the video editor.</p></li></ul> 
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
 <p>The following figure shows the result of the video file size change (due to scaling and container and codec format change).</p>
 
diff --git a/org.tizen.guides/html/native/multimedia/wav_player_n.htm b/org.tizen.guides/html/native/multimedia/wav_player_n.htm
index bff16d6..7e2a128 100644
--- a/org.tizen.guides/html/native/multimedia/wav_player_n.htm
+++ b/org.tizen.guides/html/native/multimedia/wav_player_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/network/bluetooth_n.htm b/org.tizen.guides/html/native/network/bluetooth_n.htm
index 104bc2e..335688a 100644
--- a/org.tizen.guides/html/native/network/bluetooth_n.htm
+++ b/org.tizen.guides/html/native/network/bluetooth_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -55,9 +55,9 @@
 	<li>Connecting to audio devices with Bluetooth
 	<p>Connect to Bluetooth audio devices, such as headset, hand-free, and headphone.</p></li>
 	<li>Handling attributes with Bluetooth GATT
-	<p>The Bluetooth GATT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__GATT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__GATT__MODULE.html">wearable</a> applications) provides functions for creating/destroying GATT Client handle, discovering, reading, modifying attributes and setting/unsetting the callbackes to get notified when characeteristic value is changed at remote device. </p>
-	<p>As a client, you can connect to and use a specific service on the server device. Once the connection is established, the client can manage the service attributes.</p>
-	<p>When no longer GATT Client operations are required, unregister the callbacks and destroy GATT Client handle.</p></li>
+    <p>The Bluetooth GATT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__GATT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__GATT__MODULE.html">wearable</a> applications) provides functions for creating and destroying the GATT client handle, discovering, reading, and modifying attributes, and setting and releasing callbacks to be notified when characteristic values are changed at the remote device.</p>
+	<p>As a client, you can connect to and use a specific service on the server device. Once the connection is established, the client can manage the service attributes. When the GATT client operations are no longer required, unregister the callbacks and destroy GATT client handle.</p>
+	</li>
 	<li>Connecting to health devices with Bluetooth HDP
 	<p>Manage connections to health devices and exchange data.</p></li>
 	<li>Connecting to devices with Bluetooth HID
diff --git a/org.tizen.guides/html/native/network/connection_n.htm b/org.tizen.guides/html/native/network/connection_n.htm
index 5a8141f..4b77061 100644
--- a/org.tizen.guides/html/native/network/connection_n.htm
+++ b/org.tizen.guides/html/native/network/connection_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -40,17 +40,6 @@
 
 <p>The connection features enable you to create a network connection and perform various operations over the connection. The application can access connection details, such as the IP address, proxy information, gateway information, and connection statistics.</p>
 
-<table class="note">
-     <tbody>
-      <tr>
-       <th class="note">Note</th>
-      </tr>
-      <tr>
-       <td class="note">Within the Network Programming Guide, the term &quot;network&quot; refers to IP network connections. For information on telephony connections, see the <a href="../telephony/telephony_guide_n.htm">Telephony</a> guide.</td>
-      </tr>
-     </tbody>
-    </table>
-
 <h2 id="manager" name="manager">Connection Manager</h2>
 <p>The Connection Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">wearable</a> applications) provides functions for managing data connections. It allows you to get a state of the connection interface such as Bluetooth, cellular, and Wi-Fi. It also contains functions for getting the IP address, proxy information, and gateway information.</p>
 
diff --git a/org.tizen.guides/html/native/network/network_guide_n.htm b/org.tizen.guides/html/native/network/network_guide_n.htm
index 3094b7d..28168c5 100644
--- a/org.tizen.guides/html/native/network/network_guide_n.htm
+++ b/org.tizen.guides/html/native/network/network_guide_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -38,7 +38,7 @@
 	<li><a href="connection_n.htm">Connection</a> <p>Enables you to get information about the connected network, set up and configure network connections, and track information, such as sent and received size.</p></li>
 	<li><a href="bluetooth_n.htm">Bluetooth</a><p>Enables you to use Bluetooth functionalities, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices.</p></li>
 	<li><a href="nfc_n.htm">NFC</a><p>Enables you to use Near Field Communication (NFC) functionalities, such as reading and writing tags, and emulating a smart card.</p></li>
-	<li><a href="smartcard_n.htm">SmartCard</a><p>Enables you to access secure elements (SE) through smart card features.</p></li>
+	<li><a href="smartcard_n.htm">Smartcard</a><p>Enables you to access secure elements (SE) through smart card features.</p></li>
 	<li><a href="wifi_n.htm">Wi-Fi</a><p>Enables you to connect to a Wireless Local Area Network (WLAN) and transfer data over the network.</p></li>
 	</ul>
 <p>The following guides apply in <strong>mobile applications only</strong>:</p>
@@ -46,6 +46,17 @@
 	<li><a href="wifi_direct_n.htm">Wi-Fi Direct</a><p>Enables you to connect to Wi-Fi Direct&trade; devices and manage Wi-Fi Direct&trade; connections.</p></li>
   </ul>
 
+  <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">Within the Network guides, the term &quot;network&quot; refers to IP network connections. For information on telephony connections, see the <a href="../telephony/telephony_guide_n.htm">Telephony</a> guide.</td>
+      </tr>
+     </tbody>
+    </table>
+  
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/network/nfc_n.htm b/org.tizen.guides/html/native/network/nfc_n.htm
index 041ea86..61c6d9d 100644
--- a/org.tizen.guides/html/native/network/nfc_n.htm
+++ b/org.tizen.guides/html/native/network/nfc_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -132,6 +132,8 @@
 	</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>
diff --git a/org.tizen.guides/html/native/network/smartcard_n.htm b/org.tizen.guides/html/native/network/smartcard_n.htm
index 6acc7fc..bd4ee82 100644
--- a/org.tizen.guides/html/native/network/smartcard_n.htm
+++ b/org.tizen.guides/html/native/network/smartcard_n.htm
@@ -10,31 +10,31 @@
     <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>SmartCard</title>
+  <title>Smartcard</title>
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
         <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm">SmartCard Tutorial</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Wearable Native</a></li>
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm">Smartcard Tutorial</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard API for Wearable Native</a></li>
             </ul>
     </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>SmartCard</h1>
+<h1>Smartcard</h1>
 
-<p>Tizen enables you to use smart card functionalities, such as accessing a secure element (SE). Before using the SmartCard API, make sure you have a secure element on the device. The smart card service allow you to open a session on an SE, open a channel to the applet in the SE, send a command to the channel, and finally receive a response to the command.</p>
+<p>Tizen enables you to use smart card functionalities, such as accessing a secure element (SE). Before using the Smartcard API, make sure you have a secure element on the device. The smart card service allow you to open a session on an SE, open a channel to the applet in the SE, send a command to the channel, and finally receive a response to the command.</p>
 
-<p>The main components of the SmartCard API include:</p>
+<p>The main components of the Smartcard API include:</p>
 
 <ul>
     <li>SE service
@@ -55,12 +55,12 @@
 <p class="figure">Figure: Smart card service architecture</p> 
 <p align="center"> <img alt="Smart card service architecture" src="../../images/smartcard_architecture.png" /> </p>  
 
-<p>The SmartCard API is a reference implementation of the SIMalliance Open Mobile 3.0 API specification that enables Tizen applications to communicate with secure elements. For more information, see the <a href="http://simalliance.org/" target="_blank">SimAlliance</a>. The Tizen implementation differs from the original as follows:</p>
+<p>The Smartcard API is a reference implementation of the SIMalliance Open Mobile 3.0 API specification that enables Tizen applications to communicate with secure elements. For more information, see the <a href="http://simalliance.org/" target="_blank">SimAlliance</a>. The Tizen implementation differs from the original as follows:</p>
 
 <ul><li>Only the transport layer is provided. There is no service layer support in Tizen.</li>
 <li>The &quot;get version&quot; function does not exist. In Tizen, version management is not performed through a function.</li>
 <li>Allocation style differs dramatically. 
-The Open Mobile API can facilitate the memory management by calling the API twice (for an example, see section 6.3.1, Usage pattern, in the SIMalliance Open Mobile 3.0 API specification). However, Tizen SmartCard API does not follow this allocation style.</li>
+The Open Mobile API can facilitate the memory management by calling the API twice (for an example, see section 6.3.1, Usage pattern, in the SIMalliance Open Mobile 3.0 API specification). However, Tizen Smartcard API does not follow this allocation style.</li>
 <li>For the <span style="font-family: Courier New,Courier,monospace;">SE Service</span> object management, Tizen provides functions for initialization and deinitialization.</li></ul>
 
 
diff --git a/org.tizen.guides/html/native/network/wifi_direct_n.htm b/org.tizen.guides/html/native/network/wifi_direct_n.htm
index d51697b..76a989d 100644
--- a/org.tizen.guides/html/native/network/wifi_direct_n.htm
+++ b/org.tizen.guides/html/native/network/wifi_direct_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -33,16 +33,7 @@
 
 <p>Wi-Fi Direct&trade; (synonym for Wi-Fi P2P (Peer-to-Peer)) is a technology that allows you to find nearby Wi-Fi Direct&trade; devices and form a Wi-Fi Direct&trade; group to communicate over a peer-to-peer link without wireless access points (base stations) in the infrastructure mode.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
 <p>In a Wi-Fi Direct&trade; group, the group owner works as an access point in the Wi-Fi infrastructure mode and the other devices join the group as clients. A group can be created either by negotiation between 2 devices or in an autonomous mode by a single group owner device. In a negotiation-based group creation, 2 devices compete based on the group owner intent value and the higher intent device becomes a group owner, while the other device becomes a group client. In an autonomous group creation, a device becomes a group owner by itself without any group client.</p>
 
diff --git a/org.tizen.guides/html/native/network/wifi_n.htm b/org.tizen.guides/html/native/network/wifi_n.htm
index 8c4ab8b..43fa985 100644
--- a/org.tizen.guides/html/native/network/wifi_n.htm
+++ b/org.tizen.guides/html/native/network/wifi_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/security/key_manager_n.htm b/org.tizen.guides/html/native/security/key_manager_n.htm
index 020f0a2..b6b581a 100644
--- a/org.tizen.guides/html/native/security/key_manager_n.htm
+++ b/org.tizen.guides/html/native/security/key_manager_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,8 +34,6 @@
 
 <p>The key manager provides functions to securely store keys, certificates, and sensitive data related to users and their password-protected APPs. Additionally, it provides secure cryptographic operations for non-exportable keys without revealing the key values to clients.</p>
 
-   <p class="figure">Figure: Key manager process</p> 
-   <p align="center"><img alt="Key manager process" src="../../images/key_manager.png" /></p> 
 
 <p> A key manager stores keys, certificates, and sensitive user data in a central secure repository. The central secure repository is protected by a password.</p>
 
@@ -75,6 +73,8 @@
 </li>
 </ul>
 
+   <p class="figure">Figure: Key manager process</p> 
+   <p align="center"><img alt="Key manager process" src="../../images/key_manager.png" /></p> 
 
 <p>The key manager provides 2 types of APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications):</p>
 <ul>
diff --git a/org.tizen.guides/html/native/security/privilege_n.htm b/org.tizen.guides/html/native/security/privilege_n.htm
index 17e2b55..910a7d3 100644
--- a/org.tizen.guides/html/native/security/privilege_n.htm
+++ b/org.tizen.guides/html/native/security/privilege_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/security/security_guide_n.htm b/org.tizen.guides/html/native/security/security_guide_n.htm
index ea26b3c..10acf39 100644
--- a/org.tizen.guides/html/native/security/security_guide_n.htm
+++ b/org.tizen.guides/html/native/security/security_guide_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/social/calendar_n.htm b/org.tizen.guides/html/native/social/calendar_n.htm
index 256a2ff..c2f53ce 100644
--- a/org.tizen.guides/html/native/social/calendar_n.htm
+++ b/org.tizen.guides/html/native/social/calendar_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -26,11 +26,11 @@
 				<li><a href="#change">Database Change Notifications</a></li>
 				<li><a href="#event">Events and Instances</a></li>
 				<li><a href="#filter2">Filters and Queries</a></li>
-				<li><a href="#record2">Records</a></li>
+				<li><a href="#record2">Records</a></li> 
 				<li><a href="#remind">Reminders</a></li>
 				<li><a href="#time">Time Structure</a></li>
-				<li><a href="#view2">Views and Properties</a></li>
-				<li><a href="#vcal">vCalendar</a></li>
+				<li><a href="#view2">Views and Properties</a></li> 
+				<li><a href="#vcal">vCalendar</a></li>	
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -44,23 +44,14 @@
 
 
   <h1>Calendar</h1>
-
+	
 <p>A calendar is a system of organizing days for social purposes. It is composed of <a href="#record2">records</a>, such as events and todos. The records consist of subrecords, such as alarms, attendees, or extensions. For example, if an event has a recurrence rule (meaning that it happens multiple times), separate instances are generated for each time the event occurs.</p>
 
-  <table class="note">
-<tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">This feature is supported in mobile applications only.</td>
-    </tr>
-   </tbody>
-  </table>
-
-  <p class="figure">Figure: Calendar model</p>
+<p>This feature is supported in mobile applications only.</p>
+ 
+  <p class="figure">Figure: Calendar model</p> 
   <p align="center"><img alt="Calendar model" src="../../images/calendar_model.png" /></p>
-
+  
   <p>The Calendar Service supports <a href="#vcal">vCalendars</a>.</p>
 
 <p>The main features of the Calendar API include:</p>
@@ -87,10 +78,10 @@
 		</li>
 	</ul>
 
-<p>The following figure illustrates the different Calendar entities and their relationships.</p>
+<p>The following figure illustrates the different Calendar entities and their relationships.</p> 
 
-  <p class="figure">Figure: Calendar entities</p>
-  <p align="center"><img alt="Calendar entities" src="../../images/calendar_entity.png" /></p>
+  <p class="figure">Figure: Calendar entities</p> 
+  <p align="center"><img alt="Calendar entities" src="../../images/calendar_entity.png" /></p>  
 
 <p>vCalendar supports ver1.0 (vcs) and 2.0 (ics). For more information about vCalendar, see <a href="http://www.ietf.org/rfc/rfc2445.txt" target="blank">rfc2445</a>.</p>
 
@@ -107,30 +98,30 @@ calendar_disconnect();
 
 <p>A calendar book is a placeholder for other records in the Calendar API. Every event and todo has to belong to a calendar book. There are 3 built-in calendar books, as shown in the following table.</p>
 
-<table>
+<table> 
    <caption>
      Table: Calendar books
-   </caption>
-   <tbody>
-    <tr>
-     <th>Book</th>
-     <th>Description</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_EVENT_CALENDAR_BOOK_ID</span></td>
-     <td>Event book</td>
-    </tr>
-     <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_TODO_CALENDAR_BOOK_ID</span></td>
-     <td>Todo book</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_BIRTHDAY_CALENDAR_BOOK_ID</span></td>
-     <td>Birthday book</td>
-    </tr>
-   </tbody>
-  </table>
-
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Book</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_EVENT_CALENDAR_BOOK_ID</span></td> 
+     <td>Event book</td> 
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_TODO_CALENDAR_BOOK_ID</span></td> 
+     <td>Todo book</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_BIRTHDAY_CALENDAR_BOOK_ID</span></td> 
+     <td>Birthday book</td> 
+    </tr>  
+   </tbody> 
+  </table> 
+  
 The following code example sets a calendar book ID.
 <pre class="prettyprint">
 calendar_record_h event = NULL;
@@ -149,7 +140,7 @@ calendar_db_insert_record(event &amp;event_id);
 calendar_record_destroy(event, true);
 </pre>
 
-
+	
 <p>To receive a list of existing calendar books, use the following code:</p>
 <pre class="prettyprint">calendar_list_h calendar_book_list = NULL;
 calendar_db_get_all_records(_calendar_calendar_book._uri, 0, 0, &amp;calendar_book_list);</pre>
@@ -168,115 +159,115 @@ calendar_db_add_changed_cb(_calendar_event._uri, __event_changed_cb, NULL);</pre
 <h2 id="event" name="event">Events and Instances</h2>
 <p>An event record describes various properties, such as description, categories, and priority. It also contains information on when the event takes place. In a recurring event, there are more than one instance of the event. Each instance has its corresponding instance record.</p>
 <p>If an event is inserted with rrule (recurrence rule), alarm, and attendee, its data is saved to each database. Generated instances based on the rrule are also stored in the instance database.</p>
-
-  <p class="figure">Figure: Views and databases</p>
-  <p align="center"><img alt="Views and databases" src="../../images/calendar_db.png" /></p>
+ 
+  <p class="figure">Figure: Views and databases</p> 
+  <p align="center"><img alt="Views and databases" src="../../images/calendar_db.png" /></p>  
 
 <p>The following table illustrates and example of a recurring event and its instances.</p>
 
-<table>
+<table> 
    <caption>
-     Table: Event and instance example
-   </caption>
-   <tbody>
-    <tr>
-     <th>Event</th>
-     <th>Instances</th>
-    </tr>
-    <tr>
+     Table: Event and instance example 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Event</th> 
+     <th>Instances</th> 
+    </tr> 
+    <tr> 
      <td>Recurrence rules:
 	 <ul><li>Start date on 2012-10-09 (Tuesday)</li>
 	 <li>Frequency set to WEEKLY</li>
 <li>Interval set to 1</li>
-<li>Count set to 3</li></ul></td>
+<li>Count set to 3</li></ul></td> 
      <td>2012-10-09 Tuesday
 <p>2012-10-16 Tuesday</p>
-<p>2012-10-22 Tuesday</p></td>
-    </tr>
-   </tbody>
-  </table>
+<p>2012-10-22 Tuesday</p></td> 
+    </tr> 
+   </tbody> 
+  </table> 
 <p>The recurrence model in the Calendar API is compliant with the <a href="http://www.ietf.org/rfc/rfc2445.txt" target="blank">iCalendar specification</a>. The following event properties have the same functionality as their corresponding values in iCalendar:</p>
 
-<table>
+<table> 
    <caption>
-     Table: Recurrence rules
-   </caption>
-   <tbody>
-    <tr>
-     <th>Recurrence rule property</th>
-     <th>Description</th>
-    </tr>
-    <tr>
-     <td>freq</td>
-     <td>Yearly, monthly, weekly, or daily</td>
-    </tr>
-     <tr>
-     <td>count</td>
-     <td>Until count. If the count is 3, 3 instances are generated.</td>
-    </tr>
-     <tr>
-     <td>interval</td>
-     <td>Interval is a positive integer representing how often the recurrence rule repeats</td>
-    </tr>
-     <tr>
-     <td>byday</td>
-     <td>MO, TU, WE, TH, FR, SA, or SU</td>
-    </tr>
-     <tr>
-     <td>bymonthday</td>
-     <td>Days of the month</td>
-    </tr>
-     <tr>
-     <td>byyearday</td>
-     <td>Days of the year</td>
-    </tr>
-     <tr>
-     <td>byweekno</td>
-     <td>Ordinals specifying weeks of the year</td>
-    </tr>
-     <tr>
-     <td>bymonth</td>
-     <td>Months of the year</td>
-    </tr>
-     <tr>
-     <td>bysetpos</td>
-     <td>Values which correspond to the n<sup>th</sup> occurrence within the set of events</td>
-    </tr>
-     <tr>
-     <td>wkst</td>
-     <td>Day on which the workweek starts</td>
-    </tr>
-   </tbody>
-  </table>
+     Table: Recurrence rules 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Recurrence rule property</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td>freq</td> 
+     <td>Yearly, monthly, weekly, or daily</td> 
+    </tr> 
+     <tr> 
+     <td>count</td> 
+     <td>Until count. If the count is 3, 3 instances are generated.</td> 
+    </tr> 
+     <tr> 
+     <td>interval</td> 
+     <td>Interval is a positive integer representing how often the recurrence rule repeats</td> 
+    </tr> 
+     <tr> 
+     <td>byday</td> 
+     <td>MO, TU, WE, TH, FR, SA, or SU</td> 
+    </tr> 
+     <tr> 
+     <td>bymonthday</td> 
+     <td>Days of the month</td> 
+    </tr> 
+     <tr> 
+     <td>byyearday</td> 
+     <td>Days of the year</td> 
+    </tr> 
+     <tr> 
+     <td>byweekno</td> 
+     <td>Ordinals specifying weeks of the year</td> 
+    </tr> 
+     <tr> 
+     <td>bymonth</td> 
+     <td>Months of the year</td> 
+    </tr>
+     <tr> 
+     <td>bysetpos</td> 
+     <td>Values which correspond to the n<sup>th</sup> occurrence within the set of events</td> 
+    </tr> 	
+     <tr> 
+     <td>wkst</td> 
+     <td>Day on which the workweek starts</td> 
+    </tr> 	
+   </tbody> 
+  </table> 
 
 <h3 name="exception_rule" id="exception_rule">Exceptions</h3>
 <p>If one of the instances of a recurring event is modified (such as its summary or date) or deleted, it is called an exception. For example, if 2<sup>nd</sup> instance date is modified from 16<sup>th</sup> to 17<sup>th</sup>, 17<sup>th</sup> is the exception.</p>
 
 
-<table>
+<table> 
    <caption>
      Table: Exception example
-   </caption>
-   <tbody>
-    <tr>
-     <th>Event</th>
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Event</th> 
      <th>Instances</th>
-	 <th>Exceptions</th>
-    </tr>
-    <tr>
+	 <th>Exceptions</th> 	 
+    </tr> 
+    <tr> 
      <td>Recurrence rules:
 	 <ul><li>Start date on 2012-10-09 (Tuesday)</li>
 	 <li>Frequency set to WEEKLY</li>
 <li>Interval set to 1</li>
 <li>Count set to 3</li></ul>
-</td>
+</td>  
      <td>2012-10-09 Tuesday
 <p>2012-10-16 Tuesday &gt; modified</p>
-<p>2012-10-22 Tuesday</p></td>
+<p>2012-10-22 Tuesday</p></td> 
 <td>2012-10-17 Tuesday</td>
-    </tr>
-   </tbody>
-  </table>
+    </tr> 
+   </tbody> 
+  </table> 
 
 <p>To get the changes in an exception, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_exception_by_version()</span> function. The instances and exceptions are deleted together when the original event is deleted.</p>
 
@@ -285,24 +276,24 @@ calendar_db_add_changed_cb(_calendar_event._uri, __event_changed_cb, NULL);</pre
 <p>When a filter is ready, it can be set as a property of a query. Other query properties allow configuring how the returned results are grouped and sorted.</p>
 <p>The operator precedence in filters is determined by the order in which the conditions and filters are added. The following table shows an example of how the operator precedence works.</p>
 
-<table>
+<table> 
    <caption>
      Table: Filter conditions
-   </caption>
-   <tbody>
-    <tr>
-     <th>Condition</th>
-     <th>Result</th>
-    </tr>
-    <tr>
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Condition</th> 
+     <th>Result</th> 
+    </tr> 
+    <tr> 
      <td>Condition C1<br/>
 OR<br/>
 Condition C2<br/>
 AND<br/>
-Condition C3</td>
-     <td>(C1 OR C2) AND C3</td>
-    </tr>
-     <tr>
+Condition C3</td> 
+     <td>(C1 OR C2) AND C3</td> 
+    </tr> 
+     <tr> 
      <td><strong>Filter F1</strong>:<br/>
  Condition C1<br/>
  OR<br/>
@@ -318,47 +309,47 @@ Condition C3</td>
  AND<br/>
  F1<br/>
  AND<br/>
- F2</td>
+ F2</td> 
      <td>(C5 AND F1) AND F2<br/>
-Meaning (C5 AND (C1 OR C2)) AND (C3 OR C4)</td>
-    </tr>
-   </tbody>
-  </table>
+Meaning (C5 AND (C1 OR C2)) AND (C3 OR C4)</td> 
+    </tr> 
+   </tbody> 
+  </table> 
 
 <p>The following code creates a filter, accepting events with high priority or those that include the word &quot;meeting&quot; in their description.</p>
 <pre class="prettyprint">calendar_filter_h filter = NULL;
-
+ 
 // Create a filter returning event type records
 calendar_filter_create(_calendar_event._uri, &amp;filter);
-
+ 
 // Add a &#39;priority equals high&#39; condition
 calendar_filter_add_int(filter, _calendar_event.priority, CALENDAR_MATCH_EQUAL, CALENDAR_EVENT_PRIORITY_HIGH);
-
+ 
 // Add OR operator
 calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_OR);
-
+ 
 // Add a &#39;description contains &quot;meeting&quot;&#39; condition
 calendar_filter_add_str(filter, _calendar_event.description, CALENDAR_MATCH_CONTAINS, &quot;meeting&quot;);</pre>
-
+		 
 <p>Insert the filter into the query and execute the query:</p>
 
 <pre class="prettyprint">calendar_query_h query = NULL;
 calendar_list_h list = NULL;
-
+ 
 // Create a query returning event type records
 calendar_query_create(_calendar_event._uri, &amp;query);
-
+ 
 // Add the filter
 calendar_query_set_filter(query, filter);
-
+ 
 // Execute the query, results are returned in a list
 calendar_db_get_records_with_query(query, 0, 0, &amp;list);
-
+ 
 calendar_filter_destroy(filter);
 calendar_query_destroy(query);
-
+ 
 // Use the list
-
+ 
 calendar_list_destroy(list, true);</pre>
 
 <h3 id="proj" name="proj">Projections</h3>
@@ -415,48 +406,48 @@ calendar_record_h event2 = NULL;
 calendar_db_get_record(_calendar_event._uri, event_id, &amp;event2);</pre>
 
 <h3 id="types" name="types">Basic Types</h3>
-<p>Records contain properties of basic types: <span style="font-family: Courier New,Courier,monospace">integer</span>, <span style="font-family: Courier New,Courier,monospace">lli</span> (long integer, long long int), <span style="font-family: Courier New,Courier,monospace">double</span>, <span style="font-family: Courier New,Courier,monospace">string</span>, <span style="font-family: Courier New,Courier,monospace">bool</span>, and <span style="font-family: Courier New,Courier,monospace">time</span>. The <span style="font-family: Courier New,Courier,monospace">time</span> type holds either a long long int, or 3 integers (year, month, day).</p>
+<p>Records contain properties of basic types: <span style="font-family: Courier New,Courier,monospace">integer</span>, <span style="font-family: Courier New,Courier,monospace">lli</span> (long integer, long long int), <span style="font-family: Courier New,Courier,monospace">double</span>, <span style="font-family: Courier New,Courier,monospace">string</span>, <span style="font-family: Courier New,Courier,monospace">bool</span>, and <span style="font-family: Courier New,Courier,monospace">time</span>. The <span style="font-family: Courier New,Courier,monospace">time</span> type holds either a long long int, or 3 integers (year, month, day).</p> 
 
 <p>The following table lists the setter and getter functions for each type.</p>
-<table>
+<table> 
    <caption>
-     Table: Setter and getter functions
-   </caption>
-   <tbody>
-    <tr>
-     <th>Property</th>
-     <th>Setter</th>
+     Table: Setter and getter functions 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Property</th> 
+     <th>Setter</th> 
 	 <th>Getter</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">integer</span></td>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">integer</span></td> 
      <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_int</span></td>
 	 <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_int</span></td>
-    </tr>
-     <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">long long integer</span></td>
+    </tr> 
+     <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">long long integer</span></td> 
      <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_lli</span></td>
 	 <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_lli</span></td>
     </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">double</span></td>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">double</span></td> 
      <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_double</span></td>
 	 <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_double</span></td>
     </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">string</span></td> 
      <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_str</span></td>
 	 <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_str</span></td>
     </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">calendar_time_s</span></td>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_time_s</span></td> 
      <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime</span></td>
 	 <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_caltime</span></td>
-    </tr>
-   </tbody>
-  </table>
+    </tr>	
+   </tbody> 
+  </table> 
 
-<h3 id="children" name="children">Children</h3>
+<h3 id="children" name="children">Children</h3> 
 <p>Certain type of records hold &quot;child list&quot; properties. If a record has a property of this type, it can be a parent of other records, called child records. For example, the attendee records can hold an event identifier in their <span style="font-family: Courier New,Courier,monospace">event_id</span> property. The event is the parent record of the child attendee records.</p>
 
 <p>The following code example creates an event and inserts it into the default event book.</p>
@@ -464,13 +455,13 @@ calendar_db_get_record(_calendar_event._uri, event_id, &amp;event2);</pre>
 <pre class="prettyprint">// Create an event
 calendar_record_h event = NULL;
 calendar_record_create(_calendar_event._uri, &amp;event);
-
+ 
 // Set event summary
 calendar_record_set_str(event, _calendar_event.summary, &quot;Meeting&quot;);
-
+ 
 // Put the event into the default calendar book for events
 calendar_record_set_int(event, _calendar_event.calendar_book_id, book_id);
-
+ 
 // Insert calendar book into the database
 int event_id = 0;
 calendar_db_insert_record(event, &amp;event_id);
@@ -481,12 +472,11 @@ calendar_record_destroy(event, true);</pre>
 <h2 id="remind" name="remind">Reminders</h2>
 
 <p>The following figure illustrates how the alarm process works.</p>
-
-  <p class="figure">Figure: Alarm process</p>
+ 
+  <p class="figure">Figure: Alarm process</p> 
   <p align="center"><img alt="Alarm process" src="../../images/calendar_alarm.png" /></p>
 
-<p>To get reminder when alarm is triggered, reminder mime name should be set by App.
-<p>After reminder mime name is set, insert an alarm as a child of an event record:</p>
+<p>To get a reminder when an alarm is triggered, the application must set the reminder mime name. After the reminder mime name is set, insert an alarm as a child of an event record:</p>
 <pre class="prettyprint">// Set alarm
 calendar_record_h alarm = NULL;
 calendar_record_create(_calendar_alarm._uri, &amp;alarm);
@@ -496,18 +486,17 @@ calendar_record_set_lli(alarm, _calendar_alarm.time, (1404036000 - 60)); // Befo
 // Add alarm as child
 calendar_record_add_child_record(event, _calendar_event.calendar_alarm, alarm);</pre>
 
-<p>When the registered alarm is triggered and alarm manager notifies, calendar service calls packages which have the reminder mime name.</p>
-
+<p>When the registered alarm is triggered and the alarm manager notices it, the calendar service calls those packages that have the reminder mime name.</p>
 
 <h2 id="time" name="time">Time Structure</h2>
 <p>The calendar time structure, <span style="font-family: Courier New,Courier,monospace">calendar_caltime_s</span>, is defined as follows:</p>
 <pre class="prettyprint">typedef struct
 {
 &nbsp;&nbsp;&nbsp;calendar_time_type_e type;
-&nbsp;&nbsp;&nbsp;union
+&nbsp;&nbsp;&nbsp;union 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long long int utime;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int year;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int month;
@@ -518,31 +507,31 @@ calendar_record_add_child_record(event, _calendar_event.calendar_alarm, alarm);<
 <p>Use this structure when setting the calendar time (<span style="font-family: Courier New,Courier,monospace">_CALENDAR_PROPERTY_CALTIME</span>) properties of the records.</p>
 <p>The time structure can hold 2 types of data: UTC time (long long int) and date, given as year, month, and day of the month (3 integers). These types are identified by the values of the <span style="font-family: Courier New,Courier,monospace">calendar_time_type_e</span> variable, and they determine the usage of the structure.</p>
 
-<table>
+<table> 
    <caption>
      Table: Data types
-   </caption>
-   <tbody>
-    <tr>
-     <th>Identifier</th>
-     <th>Type</th>
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Identifier</th> 
+     <th>Type</th> 
      <th>Name</th>
      <th>Purpose</th>
-	 </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_UTIME</span></td>
-     <td>long long int</td>
-	 <td>utime</td>
-	 <td>UTC time, used to describe non-all-day events</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span></td>
-     <td>struct</td>
-	 <td>date</td>
-	 <td>Date only (year, month, and day of the month), used to describe all day events.</td>
-    </tr>
-   </tbody>
-  </table>
+	 </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_UTIME</span></td> 
+     <td>long long int</td> 
+	 <td>utime</td> 
+	 <td>UTC time, used to describe non-all-day events</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span></td> 
+     <td>struct</td> 
+	 <td>date</td> 
+	 <td>Date only (year, month, and day of the month), used to describe all day events.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
 
 <h3 id="utc" name="utc">UTC Time Usage</h3>
 <p>Structures with UTC time are used for non-all-day events. In such cases, you must convert local time to UTC time. The local time zone identifier must be stored in the record, in the corresponding property.</p>
@@ -550,7 +539,7 @@ calendar_record_add_child_record(event, _calendar_event.calendar_alarm, alarm);<
 <p>When converting local time to UTC time, use the function illustrated in the following example. It converts the given date and time to the corresponding UTC time, considering the given time zone (first argument). The function uses the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a> API.</p>
 
 <pre class="prettyprint">#define ms2sec(ms) (long long int)(ms / 1000.0)
-
+ 
 long long int _time_convert_itol(char *tzid, int y, int mon, int d, int h, int min, int s)
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
@@ -562,7 +551,7 @@ long long int _time_convert_itol(char *tzid, int y, int mon, int d, int h, int m
 
 &nbsp;&nbsp;&nbsp;i18n_ulocale_get_default((const char **)&amp;loc_default);
 &nbsp;&nbsp;&nbsp;ret = i18n_ucalendar_create(utf16_timezone, -1, loc_default, I18N_UCALENDAR_GREGORIAN, &amp;ucal);
-&nbsp;&nbsp;&nbsp;if (I18N_ERROR_NONE != ret)
+&nbsp;&nbsp;&nbsp;if (I18N_ERROR_NONE != ret) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;i18n_ucalendar_create() is failed (%d)\n&quot;, ret);
 
@@ -573,7 +562,7 @@ long long int _time_convert_itol(char *tzid, int y, int mon, int d, int h, int m
 
 &nbsp;&nbsp;&nbsp;i18n_udate date;
 &nbsp;&nbsp;&nbsp;ret = i18n_ucalendar_get_milliseconds(ucal, &amp;date);
-&nbsp;&nbsp;&nbsp;if (I18N_ERROR_NONE != ret)
+&nbsp;&nbsp;&nbsp;if (I18N_ERROR_NONE != ret) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;i18n_ucalendar_create() is failed (%d)\n&quot;, ret);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i18n_ucalendar_destroy(ucal);
@@ -589,24 +578,24 @@ long long int _time_convert_itol(char *tzid, int y, int mon, int d, int h, int m
 <pre class="prettyprint">// Fill calendar time structures (start and end time)
 calendar_time_s st = {0};
 calendar_time_s et = {0};
-
+ 
 st.type = CALENDAR_TIME_UTIME;
 st.time.utime = _time_convert_itol(&quot;Asia/Seoul&quot;, 2012, 9, 15, 11, 0, 0);
-
+ 
 et.type = CALENDAR_TIME_UTIME;
 et.time.utime = _time_convert_itol(&quot;Asia/Seoul&quot;, 2012, 9, 15, 12, 0, 0);
-
+ 
 // Create an event record
-
+ 
 // Set local time zone of start time
 calendar_record_set_str(event, _calendar_event.start_tzid, &quot;Asia/Seoul&quot;);
-
+ 
 // Set start time
 calendar_record_set_caltime(event, _calendar_event.start_time, st);
-
+ 
 // Set local time zone of end time
 calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);
-
+ 
 // Set end time
 calendar_record_set_caltime(event, _calendar_event.end_time, et);</pre>
 
@@ -619,23 +608,23 @@ calendar_record_set_caltime(event, _calendar_event.end_time, et);</pre>
 <p>Generic access functions can be used (according to data-view declarations) to access calendar views. A data-view is almost the same as a database &quot;VIEW&quot;, which limits access and guarantees performance. A &quot;record&quot; represents a single row of the data-views.</p>
 <p>The <span style="font-family: Courier New,Courier,monospace">_calendar_instance_utime</span> and <span style="font-family: Courier New,Courier,monospace">_calendar_instance_localtime</span> views are not offered, but combinations with another views are provided.</p>
 
-<table>
+<table> 
    <caption>
-     Table: Calendar views
-   </caption>
-   <tbody>
-    <tr>
-     <th>Editable view</th>
-     <th>Read-only view</th>
-    </tr>
-    <tr>
+     Table: Calendar views 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Editable view</th> 
+     <th>Read-only view</th> 
+    </tr> 
+    <tr> 
      <td><span style="font-family: Courier New,Courier,monospace">_calendar_book</span><br/>
 <span style="font-family: Courier New,Courier,monospace">_calendar_event</span><br/>
 <span style="font-family: Courier New,Courier,monospace">_calendar_todo</span><br/>
 <span style="font-family: Courier New,Courier,monospace">_calendar_timezone</span><br/>
 <span style="font-family: Courier New,Courier,monospace">_calendar_attendee</span><br/>
 <span style="font-family: Courier New,Courier,monospace">_calendar_alarm</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_extended_property</span></td>
+<span style="font-family: Courier New,Courier,monospace">_calendar_extended_property</span></td> 
      <td><span style="font-family: Courier New,Courier,monospace">_calendar_updated_info</span><br/>
 <span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book</span><br/>
 <span style="font-family: Courier New,Courier,monospace">_calendar_todo_calendar_book</span><br/>
@@ -644,9 +633,9 @@ calendar_record_set_caltime(event, _calendar_event.end_time, et);</pre>
 <span style="font-family: Courier New,Courier,monospace">_calendar_instance_localtime_calendar_book</span><br/>
 <span style="font-family: Courier New,Courier,monospace">_calendar_instance_utime_calendar_book_extended</span><br/>
 <span style="font-family: Courier New,Courier,monospace">_calendar_instance_localtime_calendar_book_extended</span></td>
-    </tr>
-   </tbody>
-  </table>
+    </tr> 
+   </tbody> 
+  </table> 
 
 <p>The <span style="font-family: Courier New,Courier,monospace">_calendar_updated_info</span> view is used when identifying record changes depending on the version. The other read-only views are a combination of editable views for UI convenience:</p>
 <ul><li><span style="font-family: Courier New,Courier,monospace">_calendar_event</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book</span></li>
@@ -656,14 +645,14 @@ calendar_record_set_caltime(event, _calendar_event.end_time, et);</pre>
 <h3 id="property" name="property">Properties</h3>
 <p>The record types that have <span style="font-family: Courier New,Courier,monospace">*_id</span> as their property hold identifiers of other records. For example, the attendee and alarm views hold the ID of their corresponding events or todos in the <span style="font-family: Courier New,Courier,monospace">event_id</span> or <span style="font-family: Courier New,Courier,monospace">todo_id</span> property (as children of the corresponding event or todo records).</p>
 <p>The <span style="font-family: Courier New,Courier,monospace">record</span> type properties are other records. For example, an event record has <span style="font-family: Courier New,Courier,monospace">attendee</span> and <span style="font-family: Courier New,Courier,monospace">alarm</span> properties, which means that records of those types can be children of the event type records. The following figure illustrates macros in a <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> header file.</p>
-
-  <p class="figure">Figure: Properties</p>
-  <p align="center"><img alt="Properties" src="../../images/calendar_property.png" /></p>
+ 
+  <p class="figure">Figure: Properties</p> 
+  <p align="center"><img alt="Properties" src="../../images/calendar_property.png" /></p>  
 
 <pre class="prettyprint">// Create an event with _calendar_event view
 calendar_record_h event = NULL;
 calendar_record_create(_calendar_event._uri, &amp;event);
-
+ 
 // Set event summary to _calendar_event view
 calendar_record_set_str(event, _calendar_event.summary, &quot;Meeting&quot;);
 </pre>
@@ -716,7 +705,7 @@ calendar_vcalendar_parse_to_calendar(stream, &amp;list);
 // Jobs for list
 calendar_list_destroy(list, true);
 </pre>
-
+  
   <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
@@ -738,4 +727,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.guides/html/native/social/contact_n.htm b/org.tizen.guides/html/native/social/contact_n.htm
index 3d63bff..3d6a6a1 100644
--- a/org.tizen.guides/html/native/social/contact_n.htm
+++ b/org.tizen.guides/html/native/social/contact_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -35,6 +35,7 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.tutorials/html/native/social/contact_tutorial_n.htm">Contacts Tutorial</a></li>
 			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Wearable Native</a></li>
             </ul>
     </div></div>
 </div>
@@ -46,17 +47,6 @@
 
 <p>Contact features provide functions for managing contact information, such as address books, groups, persons, and phone logs.</p>
 
-  <table class="note">
-<tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">This feature is supported in mobile applications only.</td>
-    </tr>
-   </tbody>
-  </table>
-
 <p>A contact object is always associated with a specific address book. A person object is an aggregation of one or more contacts associated with the same person.</p>
 
 <p>The following figure illustrates the contact structure. There are 3 instances of the same contact in different address books. Person1 is an aggregation of those instances (Contact1, Contact2, and Contact3).</p>
@@ -73,7 +63,7 @@
 	<li>Insert contacts to and remove them from the <a href="#db">contacts database</a>.</li>
 	<li>Use <a href="#filter">filters and queries</a> to search and organize contacts.</li></ul></li>
 <li>Accounts
-	<ul><li>Handle accounts using an account ID created with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a> API.</li>
+	<ul><li>Handle accounts using an account ID created with the Account Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">wearable</a> applications).</li>
 	<li>Have the related account ID of 0 because local device address book has no account.</li>
 	<li>Create only one address book each.</li></ul></li>
 <li>Address books
@@ -144,7 +134,7 @@ free(ids);</pre>
 
   <h2 id="db" name="db">Database Change Notifications</h2>
 
-<p>To detect the contact database changes, use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__DATABASE__MODULE.html">Database</a> API functions. Register a callback with the <span style="font-family: Courier New,Courier,monospace">contacts_db_add_changed_cb()</span> function. To unregister the callback and ignore database changes, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_remove_changed_cb()</span> function.</p>
+<p>To detect the contact database changes, use the Database API functions (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__DATABASE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__DATABASE__MODULE.html">wearable</a> applications). Register a callback with the <span style="font-family: Courier New,Courier,monospace">contacts_db_add_changed_cb()</span> function. To unregister the callback and ignore database changes, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_remove_changed_cb()</span> function.</p>
 <p>Clients wait contacts change notifications on the client side. If the contact is changed by another module, the server publishes a notification. The notification module broadcasts to the subscribed modules and a user callback function is called with the user data. The following example registers person changes notification callback:</p>
 
 <pre class="prettyprint">
@@ -672,7 +662,7 @@ contacts_record_destroy(contact, true);</pre>
   <p class="figure">Figure: Properties</p>
   <p align="center"><img alt="Properties" src="../../images/contact_property.png" /></p>
 
-<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a> API.</p>
+<p>For more information, see the View/Property API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">wearable</a> applications).</p>
 
 <h2 id="vcard" name="vcard">vCards</h2>
 <p>The Contact Service provides functions for parsing and making vCards. The vCard APIs are based on the <a href="http://www.ietf.org/rfc/rfc2426.txt" target="blank">vCard v3.0 specification</a>.</p>
@@ -721,10 +711,10 @@ contacts_vcard_make_from_contact(contact, &amp;vcard_stream);
 
 free(vcard_stream);
 contacts_record_destroy(contact, true);</pre>
+	  
 
-
-
-
+   
+ 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
@@ -746,4 +736,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.guides/html/native/social/service_adaptor_n.htm b/org.tizen.guides/html/native/social/service_adaptor_n.htm
index 450521d..c95d918 100644
--- a/org.tizen.guides/html/native/social/service_adaptor_n.htm
+++ b/org.tizen.guides/html/native/social/service_adaptor_n.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -30,7 +30,6 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.tutorials/html/native/social/service_adaptor_tutorial_n.htm">Service Adaptor Tutorial</a></li>
             <li><a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor API for Mobile Native</a></li>
-            <li><a href="../../../../org.tizen.native.wearable.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor API for Wearable Native</a></li>
         </ul>
     </div></div>
 </div>
@@ -40,6 +39,8 @@
 
 <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>This feature is supported in mobile applications only.</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/social/social_guide_n.htm b/org.tizen.guides/html/native/social/social_guide_n.htm
index 569140d..a51d6b6 100644
--- a/org.tizen.guides/html/native/social/social_guide_n.htm
+++ b/org.tizen.guides/html/native/social/social_guide_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,21 +34,19 @@
 
   <h1>Social</h1>
 
-  <p>Social features include managing personal data, such as contacts, schedules, and accounts on the device.</p>
+  <p>Social features include managing personal data, such as contacts and schedules, on the device.</p>
+  
 
   <p>The main social features are:</p>
   <ul>
-	<li><a href="service_adaptor_n.htm">Service Adaptor</a> 
-	<p>Allows you to work with cloud storages and services by managing authentication, contact information and file transfers to and from the cloud.</p></li>	
+   <li><a href="contact_n.htm">Contacts</a> <p>Allows you to work with contact information in your application by retrieving and managing individual contact information, searching for contacts, and receiving address book change notifications. </p></li>
   </ul>
   
- <p>The following guides apply in <strong>mobile applications only</strong>:</p> 
-  
+  <p>The following guides apply in <strong>mobile applications only</strong>:</p>
   <ul>
-   <li><a href="account_manager_n.htm">Account Manager</a> 
-   <p>Allows you to work with accounts in your application by creating, managing and removing individual accounts.</p></li>
    <li><a href="calendar_n.htm">Calendar</a> <p>Allows you to work with personal scheduling data by managing calendars, events, and todos, and setting reminders and recurrence properties. You can also search for calendar book entries and receive calendar book change notifications.</p></li>
-   <li><a href="contact_n.htm">Contacts</a> <p>Allows you to work with contact information in your application by retrieving and managing individual contact information, searching for contacts, and receiving address book change notifications. </p></li>
+   <li><a href="service_adaptor_n.htm">Service Adaptor</a> 
+	<p>Allows you to work with cloud storages and services by managing authentication, contact information and file transfers to and from the cloud.</p></li>	
   </ul>
  
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/system/device_n.htm b/org.tizen.guides/html/native/system/device_n.htm
index 56080fd..5bbb1a3 100644
--- a/org.tizen.guides/html/native/system/device_n.htm
+++ b/org.tizen.guides/html/native/system/device_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/system/dlog_n.htm b/org.tizen.guides/html/native/system/dlog_n.htm
index 32a3b33..4e0609b 100644
--- a/org.tizen.guides/html/native/system/dlog_n.htm
+++ b/org.tizen.guides/html/native/system/dlog_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -29,6 +29,7 @@
 				<li><a href="#error">Error Type</a></li>
 				<li><a href="#handling">Error Handling with dlog</a></li>
 				<li><a href="#dlogutil">dlogutil</a></li>
+				<li><a href="#architecture">Architecture</a></li>
         </ul>
 		<p class="toc-title">Related Info</p>
 		<ul class="toc">
@@ -44,10 +45,6 @@
 
 <p>The dlog logging service consists of the dlogutil dlog library, and it supports sending log messages to a circular log device. The log device is a circular buffer used to collect log messages from various applications and the system.</p>
 
-<p class="figure">Figure: Architecture</p>
-
-<p align="center"><img alt="Architecture" src="../../images/dlog_architecture.png" /></p> 
-
 <p>The dlog service sends a log message to the circular buffer with APIs, including <strong>Priority</strong> and <strong>Tag</strong> information. With this information, it is easy to filter and check the messages with dlogutil.</p>
 
 <p>Before using dlog, you should know which priorities and tags to use and where to write (format, buffer).</p>
@@ -298,6 +295,14 @@ dlogutil [&lt;option&gt;] ... [&lt;filter-spec&gt;] ...
    </tbody> 
   </table>
   
+<h2 id="architecture" name="architecture">Architecture</h2>  
+ 
+<p>The following figure illustrates the general architecture of the dlog logging service.</p> 
+<p class="figure">Figure: Architecture</p>
+
+<p align="center"><img alt="Architecture" src="../../images/dlog_architecture.png" /></p> 
+
+ 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/system/media_keys_n.htm b/org.tizen.guides/html/native/system/media_keys_n.htm
index 3e25776..5118179 100644
--- a/org.tizen.guides/html/native/system/media_keys_n.htm
+++ b/org.tizen.guides/html/native/system/media_keys_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/system/runtime_info_n.htm b/org.tizen.guides/html/native/system/runtime_info_n.htm
index 361e892..b788805 100644
--- a/org.tizen.guides/html/native/system/runtime_info_n.htm
+++ b/org.tizen.guides/html/native/system/runtime_info_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/system/sensors_n.htm b/org.tizen.guides/html/native/system/sensors_n.htm
index 1204f8d..0b81743 100644
--- a/org.tizen.guides/html/native/system/sensors_n.htm
+++ b/org.tizen.guides/html/native/system/sensors_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/system/settings_n.htm b/org.tizen.guides/html/native/system/settings_n.htm
index 6e88570..3deec9e 100644
--- a/org.tizen.guides/html/native/system/settings_n.htm
+++ b/org.tizen.guides/html/native/system/settings_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -175,13 +175,6 @@
 	</tr>
 
 	<tr>
-	<td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SCREEN_BACKLIGHT_TIME</span></td>
-	<td><span style="font-family: Courier New,Courier,monospace">int</span></td>
-	<td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-	<td>Backlight time (in seconds).</td>
-	</tr>
-	<tr>
-	
 	<td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_LOCK</span></td>					
 	<td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
 	<td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
diff --git a/org.tizen.guides/html/native/system/storage_n.htm b/org.tizen.guides/html/native/system/storage_n.htm
index a17d8ea..aed0d65 100644
--- a/org.tizen.guides/html/native/system/storage_n.htm
+++ b/org.tizen.guides/html/native/system/storage_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/system/sysinfo_n.htm b/org.tizen.guides/html/native/system/sysinfo_n.htm
index 0672fd7..c2109b9 100644
--- a/org.tizen.guides/html/native/system/sysinfo_n.htm
+++ b/org.tizen.guides/html/native/system/sysinfo_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -247,12 +247,22 @@
      <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 location positioning.</td>
     </tr>
+    <tr>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.geofence</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+	 <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports the geofence feature.</td>
+    </tr>	
 	<tr>
 	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
      <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
 	 <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports the Global Positioning System (GPS).</td>
     </tr>
 		<tr>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps.satellite</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+	 <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> key, if the device has a GPS chip that supports satellite information.</td>
+    </tr>
+		<tr>
 	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td>
      <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
 	 <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> key, if the device supports  the Wi-Fi-based Positioning System (WPS).</td>
@@ -365,11 +375,16 @@
      <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 Bluetooth Object Push Profile (OPP).</td>
     </tr>
-	<tr>
-	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</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 internet access.</td>
-    </tr>
+    <tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.ethernet</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 Ethernet.</td>
+    </tr>	
+    <tr>
+    <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</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 Internet access.</td>
+    </tr>	
 	<tr>
 	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
      <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
@@ -430,6 +445,11 @@ the Tizen reference implementation.</td>
 	 <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span> key, if the device supports MMS.</td>
     </tr>
 	<tr>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.sms</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
+	 <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span> key, if the device supports SMS.</td>
+    </tr>	
+	<tr>
 	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</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 any kind of tethering.</td>
@@ -787,6 +807,11 @@ the Tizen reference implementation.</td>
 	 <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span> key, if the device supports the wake-up operation by the barometer sensor.</td>
     </tr>
 	<tr>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.geomagnetic_rotation_vector</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  geomagnetic-based rotation vector sensor.</td>
+    </tr>	
+	<tr>
 	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td>
      <td><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 gesture recognition.</td>
@@ -802,6 +827,16 @@ 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 gyro sensor.</td>
     </tr>
 	<tr>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope_rotation_vector</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 gyroscope-based rotation vector sensor.</td>
+    </tr>
+	<tr>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.uncalibrated</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 uncalibrated gyroscope sensor.</td>
+    </tr>	
+	<tr>
 	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td>
      <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
 	 <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span> key, if the device supports the wake-up operation by the gyro sensor.</td>
@@ -814,17 +849,17 @@ the Tizen reference implementation.</td>
 	<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>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the LED green 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>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the LED infrared 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>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the LED red 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>
@@ -837,11 +872,16 @@ 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 linear acceleration sensor.</td>
     </tr>
 	<tr>
-	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer </span></td>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</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 magnetic sensor.</td>
     </tr>
 	<tr>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.uncalibrated</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 uncalibrated geomagnetic sensor.</td>
+    </tr>	
+	<tr>
 	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td>
      <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
 	 <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span> key, if the device supports the wake-up operation by the magnetic sensor.</td>
@@ -951,8 +991,13 @@ the Tizen reference implementation.</td>
 	 <th>Type</th>
 	 <th>Description</th> 
     </tr> 
+	<tr>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.control</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 voice control.</td>
+    </tr>
     <tr>
-	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition </span></td>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition</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 speech recognition (STT).</td>
     </tr>
@@ -998,6 +1043,16 @@ the Tizen reference implementation.</td>
 	 <th>Description</th> 
     </tr> 
     <tr>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_detection</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 barcode detection feature.</td>
+    </tr>
+    <tr>
+	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.barcode_generation</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 barcode generation feature.</td>
+    </tr>	
+    <tr>
 	<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</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 face recognition.</td>
diff --git a/org.tizen.guides/html/native/system/system_guide_n.htm b/org.tizen.guides/html/native/system/system_guide_n.htm
index d738ce1..d0209c8 100644
--- a/org.tizen.guides/html/native/system/system_guide_n.htm
+++ b/org.tizen.guides/html/native/system/system_guide_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/system/t-trace_n.htm b/org.tizen.guides/html/native/system/t-trace_n.htm
index ead4889..cc12363 100644
--- a/org.tizen.guides/html/native/system/t-trace_n.htm
+++ b/org.tizen.guides/html/native/system/t-trace_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/telephony/phonenumber_util_n.htm b/org.tizen.guides/html/native/telephony/phonenumber_util_n.htm
index 663cf79..073261d 100644
--- a/org.tizen.guides/html/native/telephony/phonenumber_util_n.htm
+++ b/org.tizen.guides/html/native/telephony/phonenumber_util_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/telephony/telephony_guide_n.htm b/org.tizen.guides/html/native/telephony/telephony_guide_n.htm
index 46cb284..04b783c 100644
--- a/org.tizen.guides/html/native/telephony/telephony_guide_n.htm
+++ b/org.tizen.guides/html/native/telephony/telephony_guide_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/telephony/telephony_info_n.htm b/org.tizen.guides/html/native/telephony/telephony_info_n.htm
index a0496c7..4e29c74 100644
--- a/org.tizen.guides/html/native/telephony/telephony_info_n.htm
+++ b/org.tizen.guides/html/native/telephony/telephony_info_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/ui/eom_n.htm b/org.tizen.guides/html/native/ui/eom_n.htm
index facae06..464001b 100644
--- a/org.tizen.guides/html/native/ui/eom_n.htm
+++ b/org.tizen.guides/html/native/ui/eom_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/ui/minicontrol_n.htm b/org.tizen.guides/html/native/ui/minicontrol_n.htm
new file mode 100644
index 0000000..dc6d58f
--- /dev/null
+++ b/org.tizen.guides/html/native/ui/minicontrol_n.htm
@@ -0,0 +1,76 @@
+<!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>Minicontrol</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.tutorials/html/native/ui/minicontrol_tutorial_n.htm">Minicontrol Tutorial</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol API for Wearable Native</a></li>
+			</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Minicontrol</h1>
+<p>Minicontrol is small application view that can be shown on the quick panel or lock screen.</p>
+
+<p>The main features of the Minicontrol API include:</p>
+<ul>
+	<li>Creating a minicontrol
+<p>You can create minicontrols using the Minicontrol provider API, which requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/minicontrol.provider</span> privilege:</p>
+<ul><li>To create a minicontrol, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_create_window()</span> function, which returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> of the minicontrol window.</li>
+<li>To send a request, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_send_event()</span> function to get a minicontrol handle and set the details.</li></ul>
+	</li>
+	<li>Hosting minicontrols
+<p>You can host minicontrols, such as lock screens, on your application using the Minicontrol viewer API, which requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/minicontrol.viewer</span> privilege:</p>
+<ul><li>To host minicontrols, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_viewer_set_event_cb()</span> function for listening to the request from minicontrol providers. </li>
+<li>When you get the creation request from a minicontrol provider, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_viewer_add()</span> function to add the minicontrol on your application.</li></ul>
+	</li>
+</ul>
+
+   <p class="figure">Figure: Minicontrol on a quick panel (left) and lock screen (right)</p> 
+   <p align="center"><img alt="Minicontrol on a quick panel (left) and lock screen (right)" src="../../images/minicontrol-on-quickpanel.png" /> <img alt="Minicontrol on a quick panel (left) and lock screen (right)" src="../../images/minicontrol-on-lockscreen.png" /></p>   
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>	
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/ui_guide_n.htm b/org.tizen.guides/html/native/ui/ui_guide_n.htm
index 9fe4c3c..fcf9a1b 100644
--- a/org.tizen.guides/html/native/ui/ui_guide_n.htm
+++ b/org.tizen.guides/html/native/ui/ui_guide_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -36,9 +36,10 @@
   <p>The main UI features are:</p>
      <ul>	 
 	<li><a href="eom_n.htm">External Output Manager</a> <p>Enables you to handle external output devices.</p></li>
+	<li><a href="minicontrol_n.htm">Minicontrol</a> <p>Enables you to create minicontrols on the quick panel or the lock screen, and hide a minicontrol viewer.</p></li>	
      </ul>
 
-<p>For more information about implementing the UI for your application using the EFL features, see <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a>.</p>	 
+<p>For more information about implementing the UI for your application using the EFL features, see <a href="../../../../org.tizen.ui.practices/html/native/efl/guides_efl_n.htm">EFL</a>.</p>	 
 	 
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/uix/ime_n.htm b/org.tizen.guides/html/native/uix/ime_n.htm
index e947a7b..b926ebe 100644
--- a/org.tizen.guides/html/native/uix/ime_n.htm
+++ b/org.tizen.guides/html/native/uix/ime_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/uix/stt_n.htm b/org.tizen.guides/html/native/uix/stt_n.htm
index c95e4c4..26544ff 100644
--- a/org.tizen.guides/html/native/uix/stt_n.htm
+++ b/org.tizen.guides/html/native/uix/stt_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/uix/tts_n.htm b/org.tizen.guides/html/native/uix/tts_n.htm
index 91d69c7..2461a26 100644
--- a/org.tizen.guides/html/native/uix/tts_n.htm
+++ b/org.tizen.guides/html/native/uix/tts_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/uix/uix_guide_n.htm b/org.tizen.guides/html/native/uix/uix_guide_n.htm
index 0903492..36315f7 100644
--- a/org.tizen.guides/html/native/uix/uix_guide_n.htm
+++ b/org.tizen.guides/html/native/uix/uix_guide_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/uix/voicecontrol_elm_n.htm b/org.tizen.guides/html/native/uix/voicecontrol_elm_n.htm
index 5689bbd..b17aca9 100644
--- a/org.tizen.guides/html/native/uix/voicecontrol_elm_n.htm
+++ b/org.tizen.guides/html/native/uix/voicecontrol_elm_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
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 d63d03f..f4a36df 100644
--- a/org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm
+++ b/org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/uix/voicecontrol_n.htm b/org.tizen.guides/html/native/uix/voicecontrol_n.htm
index 9845ecd..bb1da68 100644
--- a/org.tizen.guides/html/native/uix/voicecontrol_n.htm
+++ b/org.tizen.guides/html/native/uix/voicecontrol_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/native/web/web_guide_n.htm b/org.tizen.guides/html/native/web/web_guide_n.htm
index 07d3eee..e59ddd7 100644
--- a/org.tizen.guides/html/native/web/web_guide_n.htm
+++ b/org.tizen.guides/html/native/web/web_guide_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -40,7 +40,7 @@
 <ul>
 <li>WebView 
 <p>Enables you to access the Web pages and Web content.</p>
- <p>The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. EFL APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">evas_*</span>, <span style="font-family: Courier New,Courier,monospace;">elm_*</span>, and <span style="font-family: Courier New,Courier,monospace;">eina_*</span>, are used to build up a complete application supporting Web browsing.</p>
+ <p>The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. The EFL APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">evas_*</span>, <span style="font-family: Courier New,Courier,monospace;">elm_*</span>, and <span style="font-family: Courier New,Courier,monospace;">eina_*</span>, are used to build up a complete application supporting Web browsing.</p>
 </li>
 </ul>
 
diff --git a/org.tizen.guides/html/web/guides_w.htm b/org.tizen.guides/html/web/guides_w.htm
index 4f23775..19d6db4 100644
--- a/org.tizen.guides/html/web/guides_w.htm
+++ b/org.tizen.guides/html/web/guides_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 		<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
@@ -35,6 +35,15 @@
 
 <p>Tizen Web guides introduce the various features that you can use in creating Tizen Web applications.</p>
 
+<p>Select the feature you are interested in and see what Tizen offers for your application:</p>
+
+<ul>
+	<li><a href="tizen/guides_tizen_w.htm">Guide to Tizen Features</a>
+	<p>Enables you to use Tizen features, such as alarms, calendars, and multimedia content, provided by the <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></li>
+	<li><a href="w3c/guides_w3c_w.htm">Guide to W3C/HTML5 and Some Supplementary Features</a>
+	<p>Enables you to use the W3C, HTML5, and some supplementary features provided by the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>.</p></li>
+</ul>
+
   <table class="note"> 
    <tbody> 
     <tr> 
@@ -45,17 +54,6 @@
     </tr> 
    </tbody> 
   </table> 
-
-<p>Select the feature you are interested in and see what Tizen offers for your application:</p>
-
-<ul>
-	<li><a href="tizen/guides_tizen_w.htm">Guide to Tizen Features</a>
-	<p>Enables you to use Tizen features, such as alarms, calendars, and multimedia content, provided by the <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></li>
-	<li><a href="w3c/guides_w3c_w.htm">Guide to W3C/HTML5 and Some Supplementary Features</a>
-	<p>Enables you to use the W3C, HTML5, and some supplementary features provided by the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>.</p></li>
-</ul>
-
-
     
 <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.guides/html/web/tizen/application/alarm_w.htm b/org.tizen.guides/html/web/tizen/application/alarm_w.htm
index a3d2d58..f2e8fca 100644
--- a/org.tizen.guides/html/web/tizen/application/alarm_w.htm
+++ b/org.tizen.guides/html/web/tizen/application/alarm_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -34,17 +34,7 @@
 
   <p>Tizen enables you to schedule an application to be run at a specific time. When an alarm is triggered, the application is launched (unless it is already running).</p>
   
-      <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Alarm API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Alarm API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p>The main features of the Alarm API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/application/app_guide_w.htm b/org.tizen.guides/html/web/tizen/application/app_guide_w.htm
index 0cb9f49..a10fc76 100644
--- a/org.tizen.guides/html/web/tizen/application/app_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/application/app_guide_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -37,7 +37,9 @@
   <ul> 
     <li><a href="alarm_w.htm">Alarm</a> <p>Allows you to schedule an application to be run at a specific time</p></li> 
     <li><a href="application_w.htm">Application</a> <p>Allows you to retrieve information about the applications installed or running on the device.</p></li> 
+	<li><a href="appgroup_w.htm">Application Group</a> <p>Allows you to define the application launch mode and group your applications into entities that can be managed together.</p></li>
 	<li><a href="package_w.htm">Package</a> <p>Allows you to retrieve information about packages and manage package installation.</p></li>
+	
   </ul> 
   
 <p>The following guides apply in <strong>mobile applications only</strong>:</p>  
diff --git a/org.tizen.guides/html/web/tizen/application/appgroup_w.htm b/org.tizen.guides/html/web/tizen/application/appgroup_w.htm
index 4e4c2e5..4d5b046 100644
--- a/org.tizen.guides/html/web/tizen/application/appgroup_w.htm
+++ b/org.tizen.guides/html/web/tizen/application/appgroup_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -34,23 +34,16 @@
 <h1>Application Group</h1>
 <p>You can define the application launch mode and group your applications into entities that can be managed together.</p>
 
-  <p>The main features of the Application Group API include:</p>
+  <p>The main application group features include:</p>
   <ul>
 	<li>Defining the application launch mode
-	<p>You can set the application launch mode in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file with one of the following values:
+	<p>You can set the application launch mode in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file (in <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_application">mobile</a> and <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#ww_application">wearable</a> applications) with one of the following values:</p>
 		<ul>
       <li>The <span style="font-family: Courier New,Courier,monospace">SINGLE</span> launch mode means that the application is launched as a main application (in a new group).</li>
 		  <li>The <span style="font-family: Courier New,Courier,monospace">GROUP</span> launch mode means that the application can be launched as a sub application
       belonging to the same group as the caller application which is causing the application to be launched.</li>
     </ul>
-	<p>Additionally, if the launch mode is not set to the value <span style="font-family: Courier New,Courier,monospace">SINGLE</span>
-  in <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and when the application is launched by the
-  <a href ="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager::launchAppControl">launchAppControl()</a> function
-  with the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> object,
-  the <span style="font-family: Courier New,Courier,monospace">launchMode</span> property of this object overrides the launch mode of the called application.
-  If the launch mode in config.xml is set to <span style="font-family: Courier New,Courier,monospace">SINGLE</span>,
-  the value of that property <span style="font-family: Courier New,Courier,monospace">ApplicationControl.launchMode</span>
-  is ignored and the sub application is always called in <span style="font-family: Courier New,Courier,monospace">SINGLE</span> mode.</p>
+	<p>Additionally, if the launch mode is not set to <span style="font-family: Courier New,Courier,monospace">SINGLE</span> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and the application is launched by the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> function (in <a href ="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager::launchAppControl">mobile</a> and <a href ="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager::launchAppControl">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications), the <span style="font-family: Courier New,Courier,monospace">launchMode</span> property of this object <a href="../../../../../org.tizen.tutorials/html/web/tizen/application/appgroup_tutorial_w.htm">overrides the launch mode of the called application</a>. If the launch mode in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file is set to <span style="font-family: Courier New,Courier,monospace">SINGLE</span>, the value of the <span style="font-family: Courier New,Courier,monospace">ApplicationControl.launchMode</span> property is ignored and the sub application is always called in the <span style="font-family: Courier New,Courier,monospace">SINGLE</span> mode.</p>
 	</li>
 	<li>Managing the application group
 	<p>Applications in a same group act as if they are in 1 stack. For example, if an application A wants to send an email using an email application B, the application A can launch the email application B, making the email application B a sub application in the same group as the application A. When both applications are running, and the user presses the home button, both applications are hidden. When the user later resumes the caller application (application A), the email application B is shown on top of the caller application.</p>
diff --git a/org.tizen.guides/html/web/tizen/application/application_w.htm b/org.tizen.guides/html/web/tizen/application/application_w.htm
index 25e4fd5..9fcb63c 100644
--- a/org.tizen.guides/html/web/tizen/application/application_w.htm
+++ b/org.tizen.guides/html/web/tizen/application/application_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -40,18 +40,7 @@
  
   <p>Application management and launch features include retrieving information about the applications installed or currently running on the device, such as application name, icon path, version details, and application ID. You can also receive notifications if applications are updated or removed, or new applications are installed. You can also perform application management tasks, such as launching, closing, or exiting a running application.</p>
 
-      <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p>
-		</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p>The Tizen Application API provides means to interact with other applications using the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a> applications) interfaces. The application uses the <a href="#controls">application control</a> to request a specific operation to be performed. The operation can be, for example, making a phone call, browsing local files so the user can pick an image of their choosing, or starting a video player with a specific movie. The Web application can also register itself as able to perform such operations. It can then be launched by another application and respond by using the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface.</p>
   <p>The main application management and launch features are:</p> 
@@ -81,7 +70,17 @@
   <p>The application control uses the following primary information:</p>
 <ul><li>Application ID 
 <p>Used to identify the provider application of the requested application control. Besides the application ID, a <a href="#platform_appcontrol">platform-defined application control</a> has a special alias name for the application ID with the prefix <span style="font-family: Courier New,Courier,monospace">tizen</span>. For example, the platform phone application has the alias application ID of <span style="font-family: Courier New,Courier,monospace">tizen.phone</span>.</p>
-<p><font color="red">Tizen Alias ID is deprecated since Tizen 2.3.1.</font></p></li>
+   <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The Tizen alias ID is deprecated since Tizen 2.3.1.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
 
 <li>Operation 
 <p>Describes an action to be performed by the provider application. The operation ID of the platform-provided operation is in the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/&lt;verb&gt;</span> format. For example, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span>. 
@@ -184,8 +183,17 @@
 	 	<h4 id="browse" name="browse">Browsing a Web Page </h4> 
   <p>The browsing a Web page application control service allows you to display Web pages in your own application using the device&#39;s Web browser.</p> 
   <h5 id="appid_browse" name="appid_browse">Application ID</h5> 
-  <p>This application control can be accessed using aliased application ID of &quot;<span style="font-family: Courier New,Courier,monospace">tizen.internet</span>&quot;.</p> 
-  <p><font color="red">Tizen Alias ID is deprecated since Tizen 2.3.1.</font></p>
+  <p>This application control can be accessed using the aliased application ID of &quot;<span style="font-family: Courier New,Courier,monospace">tizen.internet</span>&quot;.</p>
+   <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The Tizen alias ID is deprecated since Tizen 2.3.1.</td> 
+      </tr> 
+     </tbody> 
+    </table>
   <h5 id="operation_browse" name="operation_browse">VIEW Operation</h5> 
   <p>This application control supports the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span> operation only.</p> 
   <p>This operation launches a Web browser and displays a specific Web page. The device user can access other Web pages, manage bookmarks, search for text on the Web page, and modify brightness and Internet settings. If the Internet connection is not available or if the specified Web page does not exist, an error message is displayed.</p> 
@@ -194,15 +202,24 @@
 var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
 &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;&quot;http://www.tizen.org&quot;, null, null);
 
-tizen.application.launchAppControl(appControl, &quot;tizen.internet&quot;, 
+tizen.application.launchAppControl(appControl, &quot;tizen.internet&quot;,
 &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;function() {console.log(&quot;launch application control succeed&quot;);},
 &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;function(e) {/* Error handling*/}, null);
-}</pre> 
+</pre> 
   <h4 id="file" name="file">Selecting a File </h4> 
   <p>The selecting a file application control service allows you to handle media files (image, audio, or video) in your own application.</p> 
   <h5 id="appid_file" name="appid_file">Application ID</h5> 
-  <p>This application control can be accessed using aliased application ID of &quot;<span style="font-family: Courier New,Courier,monospace">tizen.filemanager</span>&quot;.</p> 
-  <p><font color="red">Tizen Alias ID is deprecated since Tizen 2.3.1.</font></p>
+  <p>This application control can be accessed using the aliased application ID of &quot;<span style="font-family: Courier New,Courier,monospace">tizen.filemanager</span>&quot;.</p>
+     <table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The Tizen alias ID is deprecated since Tizen 2.3.1.</td> 
+      </tr> 
+     </tbody> 
+    </table>
   <h5 id="operation_file" name="operation_file">PICK Operation</h5> 
   <p>This application control supports the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span> operation only.</p> 
   <p>This operation displays a list of specific type of media files found in the <span style="font-family: Courier New,Courier,monospace">Media</span> folder on the device or memory card, and returns the selected files back to your own application. The device user can browse all the subfolders and select items from one of the subfolders. The operation only displays files that are of the specified type. You can also display all types of media files by defining <span style="font-family: Courier New,Courier,monospace">all</span> as the type in the operation input data.</p>
@@ -233,10 +250,10 @@ var appControlReplyCallback =
 &nbsp;&nbsp;&nbsp;}
 }
 
-tizen.application.launchAppControl(appControl, &quot;tizen.filemanager&quot;, 
+tizen.application.launchAppControl(appControl, &quot;tizen.filemanager&quot;,
 &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;function() {console.log(&quot;launch application control succeed&quot;);},
 &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;function(e) {/* Error handling */}, appControlReplyCallback);
-</pre>
+</pre> 
   
 <h2 id="launch" name="launch">Launching an Application with Application Controls</h2> 
 
@@ -336,16 +353,15 @@ tizen.application.launchAppControl(appControl, null, successCb, errCb, null);
 </pre> 
 
 <h3 name="platform" id="platform">Launching Platform Applications</h3>
-<p>The Tizen platform provides <a href="#platform_appcontrol">predefined application controls</a>, such as phone, file manager, image viewer, and Internet. You can run Tizen base applications explicitly with the aliased application IDs.</p>
-<p><font color="red">Tizen Alias ID is deprecated since Tizen 2.3.1.</font></p>
+<p>The Tizen platform provides <a href="#platform_appcontrol">predefined application controls</a>, such as phone, file manager, image viewer, and Internet. You can run Tizen base applications explicitly with the aliased application IDs.</p> 
 <p>The following code example demonstrates an <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> interface instance for explicitly launching the image viewer for cropping an image:</p>
 <pre class="prettyprint">
 /* Assuming that the filesystem virtual root &quot;images&quot; has been resolved and saved in variable images */
 var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/image/crop&quot;,
 &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;images.resolve(&quot;image12.jpg&quot;).toURI(),
 &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;&quot;image/*&quot;, null , null);
-tizen.application.launchAppControl(appControl, &quot;tizen.imageviewer&quot;, successCb, errCb, null); </pre>
- 
+tizen.application.launchAppControl(appControl, &quot;tizen.imageviewer&quot;, successCb, errCb, null);</pre>
+
 <p>The aliased application ID (<span style="font-family: Courier New,Courier,monospace">tizen.imageviewer</span>) is used, and a crop operation on the <span style="font-family: Courier New,Courier,monospace">image12.jpg</span> file is launched.</p>
 
 <table class="note"> 
@@ -354,9 +370,12 @@ tizen.application.launchAppControl(appControl, &quot;tizen.imageviewer&quot;, su
        <th class="note">Note</th> 
       </tr> 
       <tr> 
-       <td class="note">If you are unsure about whether a user&#39;s device has a specific application, use one of the standard Tizen platform applications, such as the phone, image viewer, or file manager, because some version of these applications is available on all Tizen devices. The platform applications use predefined platform application controls and aliased application IDs, which also simplifies the task of launching them.
-       <p><font color="red">Tizen Alias ID is deprecated since Tizen 2.3.1.</font></p>
-       </td> 
+       <td class="note">
+	   <ul>
+	   <li>The Tizen alias ID is deprecated since Tizen 2.3.1.</li>
+	   <li>If you are unsure about whether a user&#39;s device has a specific application, use one of the standard Tizen platform applications, such as the phone, image viewer, or file manager, because some version of these applications is available on all Tizen devices. The platform applications use predefined platform application controls and aliased application IDs, which also simplifies the task of launching them.</li>
+		</ul>
+		</td>
       </tr> 
      </tbody> 
     </table>
@@ -376,14 +395,9 @@ tizen.application.findAppControl(appControl, function(appInfos, appCtrl)
 }, function(e) {/* Error handling */});</pre>	
 
 
-  <h3 id="app_group" name="app_group">Application Group</h3>
-  <p>
-  An application can be launched in a separate instance or in the same group as a calling application.  The way how the application is called is determined by the launch mode.
-  There are two launch modes <span style="font-family: Courier New,Courier,monospace">SINGLE</span>
-  and <span style="font-family: Courier New,Courier,monospace">GROUP</span>.
-  For more information see <a href="./appgroup_w.htm">Application Group</a>
-  </p>
+<h3 id="app_group" name="app_group">Application Group</h3>
 
+<p>An application can be launched in a separate instance or in the same group as a calling application.  The way the application is called is determined by the launch mode. There are 2 launch modes: <span style="font-family: Courier New,Courier,monospace">SINGLE</span> and <span style="font-family: Courier New,Courier,monospace">GROUP</span>. For more information, see <a href="appgroup_w.htm">Application Group</a>.</p>
 
 
 	<h2 id="exporting" name="exporting">Exporting Application Control Functionality</h2> 
@@ -437,31 +451,33 @@ var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/
 &nbsp;&nbsp;&nbsp;&lt;mime name=&quot;audio/*&quot;/&gt;
 &lt;/tizen:app-control&gt;</pre>
 
-<h3 id="appcontrol_event" name="appcontrol_event">Using &quot;appcontrol&quot; event instead of page reloading</h3>
+<h3 id="appcontrol_event" name="appcontrol_event">Using the appcontrol Event Instead of Page Reloading</h3>
 
-<p>When a web application receives an application control request from another application, the receiving application finds the proper page for that request and loads that page. If the found page is already loaded and displayed, the page is reloaded (refreshed) to process the incoming application control request. However, in some case, a web application may handle an application control request without reloading the page in order to keep the previous context.</p>
-<p>From Tizen 2.4 onwards, the web runtime provides a way to handle application control requests without page reloading by extending the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and sending a new <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event to the receiving application.</p>
-<p>The following code example demonstrates a service description in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file which can handle an image editing application control request and does not reload the web page.</p>
+<p>When a Web application receives an application control request from another application, the receiving application finds the proper page for that request and loads that page. If the found page is already loaded and displayed, the page is reloaded (refreshed) to process the incoming application control request. However, in some cases, a Web application is able to handle the application control request without reloading the page in order to keep the previous context.</p>
+<p>From Tizen 2.4 onwards, the Web runtime provides a way to handle application control requests without page reloading by extending the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and sending a new <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event to the receiving application.</p>
+<p>The following code example demonstrates a service description in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, which can handle an image editing application control request and does not reload the Web page:</p>
 <pre class="prettyprint">
 &lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;src name=&quot;edit.html&quot; reload=&quot;disable&quot/&gt;
+&nbsp;&nbsp;&nbsp;&lt;src name=&quot;edit.html&quot; reload=&quot;disable&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/edit&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;mime name=&quot;image/*&quot;/&gt;
 &lt;/tizen:app-control&gt;</pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">reload</span> attribute is newly added to the <span style="font-family: Courier New,Courier,monospace">src</span> element. The <span style="font-family: Courier New,Courier,monospace">reload</span> attribute is used to set whether the page should or should not be reloaded when an application control request is received. The <span style="font-family: Courier New,Courier,monospace">reload</span> attribute is optional and the default value is <span style="font-family: Courier New,Courier,monospace">enable</span>. If the <span style="font-family: Courier New,Courier,monospace">reload</span> attribute is not set in the <span style="font-family: Courier New,Courier,monospace">src</span> element, the default value is set to <span style="font-family: Courier New,Courier,monospace">enable</span> and the page will reload.</p>
-<p>If the currently loaded page is selected by an incoming application control request, and the <span style="font-family: Courier New,Courier,monospace">reload</span> attribute of the service description is set to <span style="font-family: Courier New,Courier,monospace">disable</span>, then an <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event is dispatched to that page instead of reloading that page. By using an <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event listener, the web application can get the requested information by calling the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface. An <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event is only dispatched if the <span style="font-family: Courier New,Courier,monospace">reload</span> attribute of the service description is set to <span style="font-family: Courier New,Courier,monospace">disable</span>.</p>
-<p>The following code example demonstrates adding an <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event listener and handling an event:</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">reload</span> attribute is added to the <span style="font-family: Courier New,Courier,monospace">src</span> element (in <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_appcontrol">mobile</a> and <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#appcontrol">wearable</a> applications), and used to set whether the page must be reloaded when an application control request is received. The <span style="font-family: Courier New,Courier,monospace">reload</span> attribute is optional and the default value is <span style="font-family: Courier New,Courier,monospace">enable</span>. If the <span style="font-family: Courier New,Courier,monospace">reload</span> attribute is not set in the <span style="font-family: Courier New,Courier,monospace">src</span> element, the default value is set to <span style="font-family: Courier New,Courier,monospace">enable</span> and the page reloads.</p>
+<p>If the currently loaded page is selected by an incoming application control request, and the <span style="font-family: Courier New,Courier,monospace">reload</span> attribute of the service description is set to <span style="font-family: Courier New,Courier,monospace">disable</span>, an <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event is dispatched to that page instead of reloading it. By using an <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event listener, the Web application can get the requested information by calling the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface. An <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event is only dispatched, if the <span style="font-family: Courier New,Courier,monospace">reload</span> attribute of the service description is set to <span style="font-family: Courier New,Courier,monospace">disable</span>.</p>
+<p>The following example demonstrates adding an <span style="font-family: Courier New,Courier,monospace">appcontrol</span> event listener and handling an event:</p>
 <pre class="prettyprint">
-Window.addEventListener(&quot;appcontrol&quot;, function onAppControl()
+window.addEventListener(&quot;appcontrol&quot;, function onAppControl()
 {
 &nbsp;&nbsp;&nbsp;var reqAppControl = tizen.application.getCurrentApplication.getRequestedAppControl();
 &nbsp;&nbsp;&nbsp;if (reqAppControl)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// handle application control request
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the application control request
 &nbsp;&nbsp;&nbsp;}
 });</pre>
 
+
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
@@ -484,4 +500,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.guides/html/web/tizen/application/data_w.htm b/org.tizen.guides/html/web/tizen/application/data_w.htm
index 632f5cc..0c41a22 100644
--- a/org.tizen.guides/html/web/tizen/application/data_w.htm
+++ b/org.tizen.guides/html/web/tizen/application/data_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -34,16 +34,7 @@
  
   <p>Data control allows you to read and modify data stored and provided by another application. The application storing and controlling the data is called a DataControl provider application. The application using the data is called a DataControl consumer application. A single DataControl provider can serve multiple DataControl consumers.</p>
   
-      <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
   <p>The main data control features are:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/application/package_w.htm b/org.tizen.guides/html/web/tizen/application/package_w.htm
index e74a0aa..7802870 100644
--- a/org.tizen.guides/html/web/tizen/application/package_w.htm
+++ b/org.tizen.guides/html/web/tizen/application/package_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -33,17 +33,7 @@
   <h1>Package</h1> 
     <p>Package management and installation features include retrieving detailed information about packages, such as package name, icon path, version details, and package ID. You can receive notifications if packages are updated or removed, or new packages are installed. You can also perform package management tasks, such as installing or uninstalling packages.</p>
 	
-	    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Package API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Package API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p>The main package features are:</p> 
   <ul> 
diff --git a/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm b/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm
index c1f6512..1ecbc39 100644
--- a/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm
+++ b/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,17 +34,7 @@
  
   <p>You can use Bluetooth functionalities in your application, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices. The Bluetooth standard provides a peer-to-peer (P2P) data exchange functionality over short distance between compliant devices.</p>
   
-          <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Bluetooth API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
-	 <p>The Bluetooth API is not supported on any Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Bluetooth API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Bluetooth API is not supported on any Tizen Emulators.</p> 
   
   <p>The main features of the Bluetooth API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm b/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm
index ad6ad5c..2d1eeb6 100644
--- a/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/tizen/communication/messaging_w.htm b/org.tizen.guides/html/web/tizen/communication/messaging_w.htm
index 9842022..13f569b 100644
--- a/org.tizen.guides/html/web/tizen/communication/messaging_w.htm
+++ b/org.tizen.guides/html/web/tizen/communication/messaging_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -33,16 +33,7 @@
  
   <p>Tizen enables you to create applications with messaging functionalities for SMS, MMS, and email.</p>
 
-            <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
   <p>The messaging process used in HTML5 involves Uniform Resource Identifiers (URIs), which form values of attributes, such as <span style="font-family: Courier New,Courier,monospace">tel</span>, <span style="font-family: Courier New,Courier,monospace">mailto</span>, and <span style="font-family: Courier New,Courier,monospace">sms</span>. These attributes invoke external services which then perform the messaging tasks. The Messaging API minimizes your coding efforts by providing one-step capabilities to perform all high-level messaging-related operations.</p>
   
diff --git a/org.tizen.guides/html/web/tizen/communication/nfc_w.htm b/org.tizen.guides/html/web/tizen/communication/nfc_w.htm
index 8cdbfa1..d2873d3 100644
--- a/org.tizen.guides/html/web/tizen/communication/nfc_w.htm
+++ b/org.tizen.guides/html/web/tizen/communication/nfc_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -35,18 +35,7 @@
  
   <p>Near Field Communication (NFC) service enables information exchange between NFC-enabled devices (called &quot;peers&quot;) or tags. The NFC-enabled devices can share contacts, photos, and videos, and can also act as smart cards. You can use an NFC-enabled device to communicate with NFC tags for a variety of activities, such as paying the grocery bill or downloading a coupon.</p>
   
-      <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The NFC API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. 
-<p>The NFC API is not supported on any Tizen Emulators.</p>
-</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The NFC API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The NFC API is not supported on any Tizen Emulators.</p> 
   
   <p>NFC provides the following advantages over short-range communication technologies, such as Bluetooth:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/communication/push_w.htm b/org.tizen.guides/html/web/tizen/communication/push_w.htm
index f8f273a..ad613cc 100644
--- a/org.tizen.guides/html/web/tizen/communication/push_w.htm
+++ b/org.tizen.guides/html/web/tizen/communication/push_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,19 +34,7 @@
  
   <p>Tizen enables you to receive push notifications from a push server. The push service is a client daemon that maintains a permanent connection between the device and the push server to process the registration and deregistration requests, and deliver push notifications to the application. If the application is connected, the push service passes the notification data over the connection. Otherwise, the push service sends UI notifications with the data. The notifications are delivered when the user launches the application and selects the posting mode. The architecture of the Tizen Push service is described in the mobile native <a href="../../../../../org.tizen.guides/html/native/messaging/push_n.htm">Push</a> guide.</p>
   
- 
-     <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Push API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
-	 <p>The Push API is supported on all Tizen Emulators.</p>
-	</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Push API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Push API is supported on all Tizen Emulators.</p> 
   
   <p>To receive push notifications for your application:</p>
   <ol>
diff --git a/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm b/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm
index f635ce0..703bb59 100644
--- a/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm
+++ b/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,18 +34,7 @@
  
   <p>Tizen enables you to access secure elements in a device. You can access various secure elements, such as UICC and SIM cards, embedded secure elements, and secure SD cards.</p>
   
-        <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Secure Element API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. 
-<p>The Secure Element API is not supported on any Tizen Emulators.</p>
-</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Secure Element API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Secure Element API is not supported on any Tizen Emulators.</p> 
 
   <p>The main features of the Secure Element API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/content/content_guide_w.htm b/org.tizen.guides/html/web/tizen/content/content_guide_w.htm
index 9af045e..93315eb 100644
--- a/org.tizen.guides/html/web/tizen/content/content_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/content/content_guide_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/tizen/content/content_w.htm b/org.tizen.guides/html/web/tizen/content/content_w.htm
index 5650178..542bc37 100644
--- a/org.tizen.guides/html/web/tizen/content/content_w.htm
+++ b/org.tizen.guides/html/web/tizen/content/content_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -36,17 +36,7 @@
 
   <p>Tizen enables you to search for content (images, videos, music or other) located on the local device storage. You can also perform content management tasks, such as viewing and updating content attributes.</p>
   
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Content API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Content API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. ll mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p>The main features of Content API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/content/download_w.htm b/org.tizen.guides/html/web/tizen/content/download_w.htm
index 17bfe46..4f864fe 100644
--- a/org.tizen.guides/html/web/tizen/content/download_w.htm
+++ b/org.tizen.guides/html/web/tizen/content/download_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -35,17 +35,7 @@
 
   <p>Tizen enables you to download files from the Internet. You can also monitor the download progress and status.</p>
   
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Download API is mandatory for the Tizen mobile profile, but optional for the wearable profile. This means that it is supported in all mobile devices, but may not be supported in all wearable devices. 
-		<p>The Download API is supported on all Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Download API is mandatory for the Tizen mobile profile, but optional for the wearable profile. This means that it is supported in all mobile devices, but may not be supported in all wearable devices. The Download API is supported on all Tizen Emulators.</p> 
   
   <p>The main features of the Download API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/content/exif_w.htm b/org.tizen.guides/html/web/tizen/content/exif_w.htm
index 215da4d..55ab1c9 100644
--- a/org.tizen.guides/html/web/tizen/content/exif_w.htm
+++ b/org.tizen.guides/html/web/tizen/content/exif_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -35,18 +35,7 @@
 
 <p>Tizen enables you to access and modify EXIF information in a JPEG file (with the common <span style="font-family: Courier New,Courier,monospace">.jpg</span> extension).</p>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
-<p>The Exif API is supported on all Tizen Emulators.</p>
-</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. The Exif API is supported on all Tizen Emulators.</p> 
   
 <p>The main features of the Exif API include:</p>
 <ul>
diff --git a/org.tizen.guides/html/web/tizen/guides_tizen_w.htm b/org.tizen.guides/html/web/tizen/guides_tizen_w.htm
index 076dcce..dbcc2d7 100644
--- a/org.tizen.guides/html/web/tizen/guides_tizen_w.htm
+++ b/org.tizen.guides/html/web/tizen/guides_tizen_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 		<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
@@ -34,19 +34,6 @@
 
 <p>Tizen Web guides introduce the various features that you can use in creating Tizen Web applications.</p>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note"> In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. 
-<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.</p>
-<p>To determine the availability of optional APIs, use the <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications).</p>
-<p>Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see <a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html"> Tizen Web Device API Reference</a>.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
 
 <p>Select the feature you are interested in and see what Tizen offers for your application.</p>
 <p>The following guides describe features provided by the Tizen Web Device API: </p>
@@ -54,7 +41,7 @@
 	<li><a href="tizen/tizen_guide_w.htm">Tizen</a>
 	<p>Enables you to handle generic events and sort and filter data.</p></li>
 	<li><a href="application/app_guide_w.htm">Application</a>
-	<p>Enables you to configure application properties, manage application data, packages, alarms and launch applications</p></li>
+	<p>Enables you to configure application properties, and manage application data, packages, and alarms, and launch applications.</p></li>
 	<li><a href="communication/comm_guide_w.htm">Communication</a>
 	<p>Enables you to send data to networks and other applications, and receive data back from them.</p></li>
 	<li><a href="content/content_guide_w.htm">Content</a>
@@ -71,7 +58,22 @@
 	<p>Enables you to manage the user&#39;s personal data, such as contacts, calendars, and call and browsing history, on the device.</p></li>	
 </ul>
 
-<p>For more information about implementing the UI for your application using the Advanced UI Framework (TAU) features, see <a href="../../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU</a>.</p>
+
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note"> In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. 
+<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.</p>
+<p>To determine the availability of optional APIs, use the <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications).</p>
+<p>Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see <a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html"> Tizen Web Device API Reference</a>.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>For more information about implementing the UI for your application using the Advanced UI Framework (TAU) features, see <a href="../../../../org.tizen.ui.practices/html/web/tau/guides_tau_w.htm">TAU</a>.</p>
 
 <p>In addition to the Tizen Web Device API guides above, you can study the following features:</p>
 <ul>
diff --git a/org.tizen.guides/html/web/tizen/ime/ime_w.htm b/org.tizen.guides/html/web/tizen/ime/ime_w.htm
index 3ecabd5..1d313a5 100644
--- a/org.tizen.guides/html/web/tizen/ime/ime_w.htm
+++ b/org.tizen.guides/html/web/tizen/ime/ime_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -37,16 +37,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>IME Application</h1>
 
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td>
-    </tr> 
-   </tbody> 
-  </table> 
+<p>This feature is supported in wearable applications only.</p>
 
  <p>Tizen Web IME (Input Method Editor) applications are written in HTML5 for Tizen, combining HTML, JavaScript, and CSS into a package that can be installed on a Tizen device, such as Samsung Gear, or the Tizen Emulator. Both the Tizen device and the Emulator must run Tizen version 2.3 or later to run Web IME applications.</p> 
  
diff --git a/org.tizen.guides/html/web/tizen/input_output/archive_w.htm b/org.tizen.guides/html/web/tizen/input_output/archive_w.htm
index 754f2b5..501b9e1 100644
--- a/org.tizen.guides/html/web/tizen/input_output/archive_w.htm
+++ b/org.tizen.guides/html/web/tizen/input_output/archive_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,17 +34,7 @@
   
   <p>Tizen enables you to operate on the zip archive files.</p>
   
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-<p>The Archive API is supported on all Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. The Archive API is supported on all Tizen Emulators.</p> 
 
    <p>To use the Archive API, your application must have the following privileges:</p>
     <ul><li><a href="http://tizen.org/privilege/filesystem.read" target="blank">http://tizen.org/privilege/filesystem.read</a></li>
diff --git a/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm b/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm
index b98e0f5..802292a 100644
--- a/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm
+++ b/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,17 +34,7 @@
  
   <p>Tizen enables you to manage the files and directories in the device file system.</p>
   
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Filesystem API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Filesystem API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
 
   <p>The Filesystem API provides access to accessible parts of the file system, which are represented as virtual root locations. The virtual roots form a collection of locations that function as a single virtual device file system. The following table lists the supported virtual roots.</p>
   <table border="1" style="width: 100%">
diff --git a/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm b/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm
index ad75438..647a3f1 100644
--- a/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm b/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm
index 222e284..5202274 100644
--- a/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm
+++ b/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,18 +34,7 @@
  
   <p>Tizen Web applications can communicate with other Web or native applications. The message data type for the communication is map data, which consists of a string key and value pair.</p>
   
-    
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Message Port API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Message Port API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p>You can send and receive messages through 2 types of message ports:</p>
 <ul><li>The <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html#LocalMessagePort">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html#LocalMessagePort">wearable</a> applications) is used to register your message port and prepare to receive messages from other applications.
diff --git a/org.tizen.guides/html/web/tizen/localization/localization_w.htm b/org.tizen.guides/html/web/tizen/localization/localization_w.htm
index c62cedf..ddb1f34 100644
--- a/org.tizen.guides/html/web/tizen/localization/localization_w.htm
+++ b/org.tizen.guides/html/web/tizen/localization/localization_w.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 <h1>Localization</h1>
@@ -31,7 +31,7 @@
 <p>Create a directory for each locale that has localized content under the <span style="font-family: Courier New,Courier,monospace">locales</span> directory in package root. The locale names are defined in the W3C IANA <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">language subtag registry</a>.</p>
 
 <p>The Web Runtime loads the proper resource for the current locale according to the W3C widget using the following mark-up:</p>
-<pre>
+<pre class="prettyprint">
 ┬index.html
 └locales
 &nbsp;&nbsp;└en
diff --git a/org.tizen.guides/html/web/tizen/multimedia/media_controller_w.htm b/org.tizen.guides/html/web/tizen/multimedia/media_controller_w.htm
index 8aee622..d616882 100644
--- a/org.tizen.guides/html/web/tizen/multimedia/media_controller_w.htm
+++ b/org.tizen.guides/html/web/tizen/multimedia/media_controller_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,17 +34,7 @@
 
    <p>Tizen provides a functionality for you to communicate between the media controller server and client.</p>
 
-     <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The Media Controller API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
-     <p>All mandatory APIs are supported on the Tizen Emulators.</p></td>
-    </tr>
-   </tbody>
-  </table>
+<p>The Media Controller API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   
 <p>To manage the media using the Media Controller API, you have to develop 2 applications:</p>
diff --git a/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm b/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm
index 40873b7..988c343 100644
--- a/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm
+++ b/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,17 +34,7 @@
  
   <p>Tizen enables you to handle media keys in your application.</p>
 
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Media Key API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. 
-		<p>The Media Key API is not supported on any Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Media Key API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Media Key API is not supported on any Tizen Emulators.</p> 
 
     <p>The media keys are used to <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm#state">control multimedia playback</a>. The user can click keys, such as <strong>PLAY</strong> and <strong>FAST FORWARD</strong>, and you can detect the key clicks in your application and change the playback accordingly.</p>
   
diff --git a/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm b/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm
index f14f6c1..5ec5d93 100644
--- a/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm b/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm
index 497bf6d..2dcfecc 100644
--- a/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm
+++ b/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,17 +34,7 @@
  
    <p>Tizen enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices. The available sound types include, for example, system, notifications, alarms, and media.</p>
    
-     <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Sound API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Sound API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
 
    <p>The main features of the Sound API include:</p>
    <ul>
diff --git a/org.tizen.guides/html/web/tizen/service/service_w.htm b/org.tizen.guides/html/web/tizen/service/service_w.htm
index 36b3926..5604b80 100644
--- a/org.tizen.guides/html/web/tizen/service/service_w.htm
+++ b/org.tizen.guides/html/web/tizen/service/service_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -38,16 +38,7 @@
 <div id="container"><div id="contents"><div class="content">
   <h1>Service Application</h1> 
   
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.<p>The web service application is OPTIONAL feature, which means that it may not be supported in all wearable devices.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p>This feature is supported in wearable applications only. The Web service application is an optional feature, which means that it may not be supported in all wearable devices.</p> 
   
   <p>A service application is a type of Tizen Web application that provides an environment for running JavaScript in the background without a graphical user interface (the application follows the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMA-262 specification</a>). The service application is used to perform tasks which need to run periodically or continuously but do not require user interaction. For example, a service application can be used for getting data or listening to platform events in the background. As service applications do not have UI components, they run on top of a more light-weight runtime than UI applications. Therefore, you can expect them to perform better and consume less memory.</p>
 
diff --git a/org.tizen.guides/html/web/tizen/social/account_w.htm b/org.tizen.guides/html/web/tizen/social/account_w.htm
index fc70e6d..4c8c8a0 100644
--- a/org.tizen.guides/html/web/tizen/social/account_w.htm
+++ b/org.tizen.guides/html/web/tizen/social/account_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -35,16 +35,7 @@
 
    <p>You can use existing configured on-line accounts and providers, and create new accounts of known types.</p>
    
-     <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
     <p>The basic account management concepts are:</p>
 <ul><li>Provider
diff --git a/org.tizen.guides/html/web/tizen/social/bookmark_w.htm b/org.tizen.guides/html/web/tizen/social/bookmark_w.htm
index 94c8145..5c6da32 100644
--- a/org.tizen.guides/html/web/tizen/social/bookmark_w.htm
+++ b/org.tizen.guides/html/web/tizen/social/bookmark_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -36,16 +36,7 @@
  
   <p>You can manage the Tizen Web browser bookmarks by retrieving the current bookmark list. You can create or delete both bookmark folders and items.</p>
   
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
   <p>The main features of the Bookmark API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/social/calendar_w.htm b/org.tizen.guides/html/web/tizen/social/calendar_w.htm
index 707db60..012d196 100644
--- a/org.tizen.guides/html/web/tizen/social/calendar_w.htm
+++ b/org.tizen.guides/html/web/tizen/social/calendar_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -37,16 +37,7 @@
   <p>Tizen enables you to manage your schedule and tasks.</p>
   <p>A calendar is a collection of events or tasks, depending upon the calendar type. Each event or task has a series of attributes, such as purpose, starting time, and duration.</p>
   
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
   <table class="note">
    <tbody>
diff --git a/org.tizen.guides/html/web/tizen/social/call_history_w.htm b/org.tizen.guides/html/web/tizen/social/call_history_w.htm
index 363167b..a597cc3 100644
--- a/org.tizen.guides/html/web/tizen/social/call_history_w.htm
+++ b/org.tizen.guides/html/web/tizen/social/call_history_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -36,16 +36,7 @@
  
   <p>You can access information about various telephony services for circuit-switched telephony and voice over IP (VoIP). You can browse the call history of a device, remove call history entries, and monitor changes.</p>
   
-      <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
   <p>The main features of the Call History API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/social/contact_w.htm b/org.tizen.guides/html/web/tizen/social/contact_w.htm
index 7676c47..14b6e04 100644
--- a/org.tizen.guides/html/web/tizen/social/contact_w.htm
+++ b/org.tizen.guides/html/web/tizen/social/contact_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -36,16 +36,7 @@
 
   <p>Tizen enables you to manage the contacts and persons listed in your address books. A <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object is always associated with a specific address book. A <span style="font-family: Courier New,Courier,monospace">Person</span> object is an aggregation of one or more contacts associated with the same person.</p>
   
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
   <p>The main features of the Contact API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/social/data_sync_w.htm b/org.tizen.guides/html/web/tizen/social/data_sync_w.htm
index e48427a..21470c4 100644
--- a/org.tizen.guides/html/web/tizen/social/data_sync_w.htm
+++ b/org.tizen.guides/html/web/tizen/social/data_sync_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -35,18 +35,17 @@
 
   <p>You can synchronize device data, such as contacts and calendar events, with the OMA DS server using the <a href="http://openmobilealliance.org/" target="_blank">OMA</a> DS (Data Synchronization) 1.2 protocol.</p>
   
-      <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
-  <table class="note">
+
+  <p>The main features of the Data Synchronization API include:</p>
+  <ul>
+   <li>Checking for free profile slot <p>Tizen sets a limitation on the number of supported OMA DS profiles on the device, so you must first check whether there is a profile slot available.</p> <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm#Creating_Sync_Profile">check whether sync profile slots are available</a> using the <span style="font-family: Courier New,Courier,monospace">getProfilesNum()</span> and <span style="font-family: Courier New,Courier,monospace">getMaxProfilesNum()</span> methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#DataSynchronizationManager">DataSynchronizationManager</a> interface.</p> </li>
+   <li>Creating a sync profile <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm#Creating_Sync_Profile">create a profile</a> using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProfileInfo">SyncProfileInfo</a> interface. You can define the profile name and provide various information defined using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncInfo">SyncInfo</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncServiceInfo">SyncServiceInfo</a> interfaces.</p> </li>
+   <li>Retrieving synchronization process information <p>After starting the synchronization process using the <span style="font-family: Courier New,Courier,monospace">startSync()</span> method of the <span style="font-family: Courier New,Courier,monospace">DataSynchronizationManager</span> interface, you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm#Starting_Sync">monitor the progress</a> of the operation. Use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProgressCallback">SyncProgressCallback</a> interface to define listeners for receiving notifications. After the synchronization is completed, you can retrieve statistics using the <span style="font-family: Courier New,Courier,monospace">getLastSyncStatistics()</span> method.</p> </li>
+  </ul>
+  
+   <table class="note">
    <tbody>
     <tr>
      <th class="note">Note</th>
@@ -56,12 +55,6 @@
     </tr>
    </tbody>
   </table>
-  <p>The main features of the Data Synchronization API include:</p>
-  <ul>
-   <li>Checking for free profile slot <p>Tizen sets a limitation on the number of supported OMA DS profiles on the device, so you must first check whether there is a profile slot available.</p> <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm#Creating_Sync_Profile">check whether sync profile slots are available</a> using the <span style="font-family: Courier New,Courier,monospace">getProfilesNum()</span> and <span style="font-family: Courier New,Courier,monospace">getMaxProfilesNum()</span> methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#DataSynchronizationManager">DataSynchronizationManager</a> interface.</p> </li>
-   <li>Creating a sync profile <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm#Creating_Sync_Profile">create a profile</a> using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProfileInfo">SyncProfileInfo</a> interface. You can define the profile name and provide various information defined using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncInfo">SyncInfo</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncServiceInfo">SyncServiceInfo</a> interfaces.</p> </li>
-   <li>Retrieving synchronization process information <p>After starting the synchronization process using the <span style="font-family: Courier New,Courier,monospace">startSync()</span> method of the <span style="font-family: Courier New,Courier,monospace">DataSynchronizationManager</span> interface, you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm#Starting_Sync">monitor the progress</a> of the operation. Use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProgressCallback">SyncProgressCallback</a> interface to define listeners for receiving notifications. After the synchronization is completed, you can retrieve statistics using the <span style="font-family: Courier New,Courier,monospace">getLastSyncStatistics()</span> method.</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.guides/html/web/tizen/social/social_guide_w.htm b/org.tizen.guides/html/web/tizen/social/social_guide_w.htm
index e1fc8e7..4f853dc 100644
--- a/org.tizen.guides/html/web/tizen/social/social_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/social/social_guide_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -35,16 +35,7 @@
 
   <p>Social features include managing call and browsing history, bookmarks, and calendars, and synchronizing device data.</p>
   
-      <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Social API domain is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
+<p>The Social API domain is supported in mobile applications only.</p>
 
   <p>The main social features are:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm b/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm
index 9de359b..f1c212d 100644
--- a/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -33,16 +33,7 @@
 
 <p>Tizen enables you to access and control the FM radio on the device.</p>
 
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
 <p>The main features of the FM Radio API include:</p>
 <ul>
diff --git a/org.tizen.guides/html/web/tizen/system/ham_w.htm b/org.tizen.guides/html/web/tizen/system/ham_w.htm
index 9c960ea..92fda64 100644
--- a/org.tizen.guides/html/web/tizen/system/ham_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/ham_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,17 +34,7 @@
 
 <p>Tizen enables you to access the human activity data from various sensors on the device.</p>
 
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Human Activity Monitor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. 
-		<p>The Human Activity Monitor API is partly supported on the Tizen Emulators (only heart-rate monitoring).</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Human Activity Monitor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Human Activity Monitor API is partly supported on the Tizen Emulators (only heart-rate monitoring).</p> 
   
 <p>The main features of the Human Activity Monitor API include:</p>
 <ul>
diff --git a/org.tizen.guides/html/web/tizen/system/power_w.htm b/org.tizen.guides/html/web/tizen/system/power_w.htm
index b12219e..69c8f1e 100644
--- a/org.tizen.guides/html/web/tizen/system/power_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/power_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -36,17 +36,7 @@
   <p>Tizen enables you to access a device&#39;s power resource. Currently, the screen and CPU power resources are supported, allowing you to request a specific power state and control the brightness of the screen.</p>
   
       
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Power API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Power API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p>The Power API allows you to <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm#manage">request and release a minimum power state</a> for the screen and CPU. The request locks the screen to a minimum state and keeps the device bright and awake. For example, if you set the minimum power state to <span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span>, the device display always remains in the <span style="font-family: Courier New,Courier,monospace">SCREEN_NORMAL</span> level and never goes down to the <span style="font-family: Courier New,Courier,monospace">SCREEN_DIM</span> level.</p>
   <p>The levels you can request are described in the following table.</p>
diff --git a/org.tizen.guides/html/web/tizen/system/sensor_w.htm b/org.tizen.guides/html/web/tizen/system/sensor_w.htm
index d012138..1c4e33c 100644
--- a/org.tizen.guides/html/web/tizen/system/sensor_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/sensor_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -35,17 +35,7 @@
 
 <p>Tizen provides interfaces and methods to manage sensor data from various sensors on the device. The main purpose of a sensor is to provide a value for the relevant environment parameter.</p>
 
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Sensor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. 
-		<p>The Sensor API is supported on all Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Sensor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Sensor API is supported on all Tizen Emulators.</p> 
   
 <p>The main features of the Sensor API include:</p>
 <ul>
diff --git a/org.tizen.guides/html/web/tizen/system/system_guide_w.htm b/org.tizen.guides/html/web/tizen/system/system_guide_w.htm
index 2805215..ba0ca72 100644
--- a/org.tizen.guides/html/web/tizen/system/system_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/system_guide_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/tizen/system/system_info_w.htm b/org.tizen.guides/html/web/tizen/system/system_info_w.htm
index 9bfe828..12a41b7 100644
--- a/org.tizen.guides/html/web/tizen/system/system_info_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/system_info_w.htm
@@ -57,7 +57,7 @@ tr.images td {
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -76,17 +76,7 @@ tr.images td {
   <p>Tizen enables you to access the device&#39;s system properties (both hardware and capability). You can obtain various device and system details, such as the current battery level, amount of available storage, and state of the cellular network connection.</p>
   
       
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The System Information API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The System Information API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p>The main features of the System Information API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/system/system_setting_w.htm b/org.tizen.guides/html/web/tizen/system/system_setting_w.htm
index a8ccb2e..4e4dbe2 100644
--- a/org.tizen.guides/html/web/tizen/system/system_setting_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/system_setting_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -35,17 +35,7 @@
 
   <p>Tizen enables you to access the device&#39;s settings for the home and lock screen wallpaper, the incoming call ringtone, and email notification tone.</p>
   
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The System Setting API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
-		<p>The System Setting API is supported on the Tizen mobile Emulator and partly supported on the Tizen wearable Emulator (only the home screen and incoming call features).</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The System Setting API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. The System Setting API is supported on the Tizen mobile Emulator and partly supported on the Tizen wearable Emulator (only the home screen and incoming call features).</p> 
   
   <p>The following table lists the supported system setting properties.</p>
   <table border="1" style="width: 100%" id="property2">
diff --git a/org.tizen.guides/html/web/tizen/system/time_w.htm b/org.tizen.guides/html/web/tizen/system/time_w.htm
index a044b0c..7276f63 100644
--- a/org.tizen.guides/html/web/tizen/system/time_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/time_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -36,18 +36,7 @@
   <p>Tizen enables you to use locale-specific calendar features by retrieving date and time information. You can also change the date, time, and time zone, and make some date- and time-related calculations. The Time API overcomes several limitations of the JavaScript <span style="font-family: Courier New,Courier,monospace">Date</span> object.</p> 
   <p>Locale refers to the set of information that is specific to a language and a country. It affects the numeric formats (decimal and list separators), date formats, and the character sorting order. It determines how a locale-specific functionality behaves; for example, how numbers are displayed or strings converted to dates. </p>
   
-      
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Time API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Time API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p>The main features of the Time API include:</p> 
   <ul> 
diff --git a/org.tizen.guides/html/web/tizen/system/web_setting_w.htm b/org.tizen.guides/html/web/tizen/system/web_setting_w.htm
index 82a8d6e..6d60fab 100644
--- a/org.tizen.guides/html/web/tizen/system/web_setting_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/web_setting_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -34,16 +34,7 @@
 
   <p>Tizen enables you to set Web view properties.</p>
   
-     <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
   <p>The main features of the Web Setting API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm b/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm
index 11fa506..006bffe 100644
--- a/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -40,17 +40,7 @@
   <h1>Tizen</h1> 
   <p>Tizen features include handling events and organizing data.</p>
   
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p>The main Tizen features are:</p> 
   <ul> 
@@ -78,13 +68,16 @@
     
   <h2 id="coordinates" name="coordinates">Managing Location Coordinates</h2>
 
-  <p>You can use the <span style="font-family: Courier New,Courier,monospace">SimpleCoordinates</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SimpleCoordinates">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SimpleCoordinates">wearable</a> applications) to incorporate location information into your application. For example, you can simply use it to define coordinates:</p> <pre class="prettyprint">var coordinates = new tizen.SimpleCoordinates(37.5665, 126.9779);</pre> <p>You can also define a latitude and longitude for a <a href="../social/calendar_w.htm">calendar event</a>:</p> <pre class="prettyprint">var event = new tizen.CalendarEvent(
+  <p>You can use the <span style="font-family: Courier New,Courier,monospace">SimpleCoordinates</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SimpleCoordinates">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SimpleCoordinates">wearable</a> applications) to incorporate location information into your application. For example, you can simply use it to define coordinates:</p> <pre class="prettyprint">var coordinates = new tizen.SimpleCoordinates(37.5665, 126.9779);</pre> <p>You can also define a latitude and longitude for a <a href="../social/calendar_w.htm">calendar event</a>:</p>
+<pre class="prettyprint">
+var event = new tizen.CalendarEvent(
 {
 &nbsp;&nbsp;&nbsp;description:&quot;hospital&quot;, 
 &nbsp;&nbsp;&nbsp;geolocation: new tizen.SimpleCoordinates(37.4889, 127.0876),
 &nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 11, 1, 14, 0), 
 &nbsp;&nbsp;&nbsp;duration: new tizen.TimeDuration(2, &quot;HOURS&quot;)
-});</pre>
+});
+</pre>
   
   <h2 id="sorting" name="sorting">Sorting and Filtering Data</h2> 
   <p>The Tizen API provides a set of basic definitions and interfaces that are used in the Tizen Device API. The Tizen API contains filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p> 
diff --git a/org.tizen.guides/html/web/tizen/ui/badge_w.htm b/org.tizen.guides/html/web/tizen/ui/badge_w.htm
index a59141a..7ca8f3a 100644
--- a/org.tizen.guides/html/web/tizen/ui/badge_w.htm
+++ b/org.tizen.guides/html/web/tizen/ui/badge_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -36,17 +36,7 @@
   <p>When an application has new information requiring user attention, such as missed calls or new messages, it has a number in the upper right hand corner of the application icon. This number is called a badge. For example, when a new message is received, the badge appears on the application icon. The badge remains until the user reads the message.</p>
   
       
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Badge API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Badge API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p class="figure">Figure: Badge</p>
   <p align="center"><img alt="Badge" src="../../../images/badge.png" /></p>
diff --git a/org.tizen.guides/html/web/tizen/ui/noti_w.htm b/org.tizen.guides/html/web/tizen/ui/noti_w.htm
index 863726f..5f7194e 100644
--- a/org.tizen.guides/html/web/tizen/ui/noti_w.htm
+++ b/org.tizen.guides/html/web/tizen/ui/noti_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -35,18 +35,7 @@
 
   <p>Tizen enables you to provide notifications about application events.</p>
   
-       <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Notification API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
-<p>All mandatory APIs are supported on the Tizen Emulators.</p>
-</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Notification API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <p>The main features of the Notification API include:</p>
   <ul>
diff --git a/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm b/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm
index 24bbe84..9fdf63d 100644
--- a/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm b/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm
index 97ee093..5dbc0a2 100644
--- a/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -36,7 +36,7 @@
   <ul>
 	<li><a href="web_messaging_w.htm">HTML5 Web Messaging</a> <p>Enables you to send and receive data between Web sites and through a message channel.</p></li>
 	<li><a href="websocket_w.htm">WebSocket</a> <p>Enables you to connect to the socket server, and send and receive data.</p></li>
-	<li><a href="xmlhttprequest_w.htm">XMLHttpRequest Level 1 and 2</a> <p>Enables you to use cross-origin resource sharing (CORS) to request and send data of various content types, and to monitor the operation progress.</p></li>
+	<li><a href="xmlhttprequest_w.htm">XMLHttpRequest (Level 1 and 2)</a> <p>Enables you to use cross-origin resource sharing (CORS) to request and send data of various content types, and to monitor the operation progress.</p></li>
   </ul>
 
 <p>The following guides apply in <strong>mobile applications only</strong>:</p>
diff --git a/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm b/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm
index 9f35229..cbb8754 100644
--- a/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -31,16 +31,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Server-Sent 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>This feature is supported in mobile applications only.</p> 
  
 <p>Server-Sent Events feature is used to realize server push in a Web environment. The server push feature has evolved over time from a hidden IFrame through Ajax polling and Comet to the current implementation of server-sent events.</p>
 <p>The Server-Sent Events API defines a simple data structure and interface, and a communication mechanism to realize the server push. In addition, it can handle the received data in the general DOM event format. However, the API repeatedly requests the data from the client to the server, so it is not a complete server push.</p>
diff --git a/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm b/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm
index 3f0a72e..a945e16 100644
--- a/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/communication/websocket_w.htm b/org.tizen.guides/html/web/w3c/communication/websocket_w.htm
index 0d2aece..223274c 100644
--- a/org.tizen.guides/html/web/w3c/communication/websocket_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/websocket_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm b/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm
index 52450ad..c942dc1 100644
--- a/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm
@@ -10,13 +10,13 @@
     <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>XMLHttpRequest Level 1 and 2</title>
+  <title>XMLHttpRequest (Level 1 and 2)</title>
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -27,7 +27,7 @@
 		</ul>
 		<p class="toc-title">Related Info</p>
         <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm">XMLHttpRequest Level 1 and 2 Tutorial</a></li>
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm">XMLHttpRequest (Level 1 and 2) Tutorial</a></li>
 			<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2 API for Mobile Web</a></li>
 			<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1 API for Wearable Web</a></li>
             </ul>
@@ -35,7 +35,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>XMLHttpRequest Level 1 and 2</h1>
+<h1>XMLHttpRequest (Level 1 and 2)</h1>
 
 <p>You can send requests to and receive them from a Web server using JavaScript.</p>
 
diff --git a/org.tizen.guides/html/web/w3c/device/battery_w.htm b/org.tizen.guides/html/web/w3c/device/battery_w.htm
index fc31fef..ca86400 100644
--- a/org.tizen.guides/html/web/w3c/device/battery_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/battery_w.htm
@@ -17,7 +17,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/device/browser_state_w.htm b/org.tizen.guides/html/web/w3c/device/browser_state_w.htm
index e3269ec..7aee3e6 100644
--- a/org.tizen.guides/html/web/w3c/device/browser_state_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/browser_state_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -31,16 +31,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>HTML5 Browser state</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>This feature is supported in mobile applications only.</p> 
  
 <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm#Retrieving_Browser_State">access information about the network connection state of the browser</a>. </p>
 <p>The <span style="font-family: Courier New,Courier,monospace">navigator.onLine</span> attribute returns <span style="font-family: Courier New,Courier,monospace">false</span>, if the browser cannot establish a connection to the network when a remote page is requested. To track the changes in the connection state, you must subscribe to the applicable events: <span style="font-family: Courier New,Courier,monospace">online</span> and <span style="font-family: Courier New,Courier,monospace">offline</span>. The events can be executed in the <span style="font-family: Courier New,Courier,monospace">Window</span> or <span style="font-family: Courier New,Courier,monospace">WorkerGlobalScope</span> object.</p>
diff --git a/org.tizen.guides/html/web/w3c/device/device_guide_w.htm b/org.tizen.guides/html/web/w3c/device/device_guide_w.htm
index 7bcf749..2a19862 100644
--- a/org.tizen.guides/html/web/w3c/device/device_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/device_guide_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm b/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm
index c9558d6..aa4e439 100644
--- a/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm
@@ -17,7 +17,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm b/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm
index a3e1c1d..8dd99ee 100644
--- a/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -31,16 +31,7 @@
 <div id="container"><div id="contents"><div class="content">
  <h1>Screen Orientation</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>This feature is supported in mobile applications only.</p> 
  
 <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm#manage">manage the screen orientation state</a> through the <span style="font-family: Courier New,Courier,monospace">Screen</span> interface.</p>
 
diff --git a/org.tizen.guides/html/web/w3c/device/touch_w.htm b/org.tizen.guides/html/web/w3c/device/touch_w.htm
index 092d3bc..1d162e4 100644
--- a/org.tizen.guides/html/web/w3c/device/touch_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/touch_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/device/vibration_w.htm b/org.tizen.guides/html/web/w3c/device/vibration_w.htm
index cbc09f4..d9252e9 100644
--- a/org.tizen.guides/html/web/w3c/device/vibration_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/vibration_w.htm
@@ -17,7 +17,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm b/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
index dcf5049..6723ff5 100644
--- a/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
+++ b/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -35,7 +35,7 @@
  
 <p>The HTML5 canvas allows you to use graphics on the screen, and draw and manage various shapes. The HTML Canvas 2D Context API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#canvas2d">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">wearable</a> applications) defines a special canvas element that expresses images or shapes with JavaScript. To use the canvas, you must <a href="../../../../../org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm#canvas">insert a &lt;canvas&gt; element</a> in the HTML page.</p> 
  
-<p>In the mobile applications only, in HTML5, the HTML5 SVG API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#svg">wearable</a> applications) provides similar features as the canvas. Their difference is that SVG expresses graphics using vectors, while the canvas is based on pixels. To express complex graphics, use the canvas, and to express graphics with a liberal expansion or reduction, use <a href="svg_w.htm">SVG</a>.  
+<p>In mobile applications only, in HTML5, the HTML5 SVG API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#svg">wearable</a> applications) provides similar features as the canvas. Their difference is that SVG expresses graphics using vectors, while the canvas is based on pixels. To express complex graphics, use the canvas, and to express graphics with a liberal expansion or reduction, use <a href="svg_w.htm">SVG</a>.  
 </p>
 <table class="note"> 
      <tbody> 
@@ -84,7 +84,7 @@ indicated, and then creates the image in the canvas. The created image is pixel-
 <li>Create the applications with the following logic:
 <ol type="a"><li>Load an image.</li> 
 <li>Render the loaded image in the random location of the canvas.</li>  
-<li>Use the	<span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method of the Timing control for script-based animations API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">wearable</a> applications) to change the color of the loaded image, based on different times.</li>  
+<li>Use the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method of the Timing control for script-based animations API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">wearable</a> applications) to change the color of the loaded image, based on different times.</li>  
 <li>Create a logic that measures FPS (frames per second) in order to check the performance.</li></ol></li>  
 <li>Execute the applications and measure the FPS.</li>  
 <li>Increase only the number of objects so that the same 1~N images, under the same conditions, are shown repeatedly based on 1~N.</li>  
diff --git a/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm b/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm
index d9ee89b..c66031b 100644
--- a/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/graphics/svg_w.htm b/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
index 9b11bfe..1631aad 100644
--- a/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
+++ b/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/guides_w3c_w.htm b/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
index 49f5e21..3fdd9be 100644
--- a/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
+++ b/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 		<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
@@ -59,7 +59,7 @@
 	<p>Enables you to take advantage of supplementary features, such as full screen views, typed arrays, and the WebGL graphics library.</p></li>		
 </ul>
 
-<p>For more information about implementing the UI for your application using the W3C features, see <a href="../../../../org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm">W3C</a>.</p>    
+<p>For more information about implementing the UI for your application using the W3C features, see <a href="../../../../org.tizen.ui.practices/html/web/w3c/guides_w3c_w.htm">W3C</a>.</p>    
 	
 <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.guides/html/web/w3c/location/geolocation_w.htm b/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
index 135e744..5d9be45 100644
--- a/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
+++ b/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -37,16 +37,6 @@
 <p>Geolocation defines a location information interface. Common sources of location information are GPS, location inferred from the network (such as IP address), RFID, Wi-Fi, Bluetooth MAC address, and GSM/CDMA cell IDs. The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#geolocation_interface" target="_blank">Geolocation</a> interface is implemented by the <span style="font-family: Courier New,Courier,monospace">Navigator</span> object instances. The location information is represented by the latitude and longitude coordinates.</p>
 
 
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">In almost all cases, the location information reveals the location of the device user. To provide privacy for the user, a confirmation mechanism is provided for the geolocation features.</td> 
-      </tr> 
-     </tbody>
-</table>
 
 <p>The <span style="font-family: Courier New,Courier,monospace">Geolocation</span> interface allows you to <a href="../../../../../org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm#Retrieving_Location_Info">retrieve position information</a> with &quot;one-shot&quot; position requests (with the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method) or repeated position updates (with the <span style="font-family: Courier New,Courier,monospace">watchPosition()</span> method). Both methods take the following parameters:</p>
 <ul>
@@ -61,6 +51,18 @@
 </li>
 </ul>
 
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In almost all cases, the location information reveals the location of the device user. To provide privacy for the user, a confirmation mechanism is provided for the geolocation features.</td> 
+      </tr> 
+     </tbody>
+</table>
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/location/location_guide_w.htm b/org.tizen.guides/html/web/w3c/location/location_guide_w.htm
index a4fbee2..4fd18c2 100644
--- a/org.tizen.guides/html/web/w3c/location/location_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/location/location_guide_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm b/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
index 159d639..fe92ee9 100644
--- a/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/media/media_capture_w.htm b/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
index b71229b..b5d8b13 100644
--- a/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -31,16 +31,7 @@
 <div id="container"><div id="contents"><div class="content">
   <h1>HTML Media Capture</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>This feature is supported in mobile applications only.</p> 
  
 <p>Media capture uses the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute of the <a href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/#dfn-htmlinputelement" target="_blank">HTMLInputElement</a> interface to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm#activate">activate features</a>, such as camera or microphone, to enable direct media capture when the user is uploading a file.</p>
 
diff --git a/org.tizen.guides/html/web/w3c/media/media_guide_w.htm b/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
index cbb2777..972f059 100644
--- a/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/media/video_audio_w.htm b/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
index bb8e430..d456229 100644
--- a/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/media/webaudio_w.htm b/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
index 24f44a7..db9950c 100644
--- a/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -31,16 +31,7 @@
 <div id="container"><div id="contents"><div class="content">
   <h1>Web Audio</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>This feature is supported in mobile applications only.</p>  
  
 <p>Tizen provides a high quality sound by setting space and direction through audio data, and synthesizing them. It is used in the audio engines of the sophisticated games to mix, process, and filter effects.</p>
 
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
index b0b32b0..d49e996 100644
--- a/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm
index e772d67..1c9983b 100644
--- a/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm
index 1b5ee75..c085ede 100644
--- a/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm
index 9caf8ee..3f72d7c 100644
--- a/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm
index 05261fb..683784f 100644
--- a/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm
index 834776a..3054325 100644
--- a/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm
index 14e2432..f126d3f 100644
--- a/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -40,16 +40,7 @@
 <p>Web workers run JavaScript in an independent thread instead of the main UI thread, improving the <a href="#js_performance">JavaScript performance</a> without affecting the UI.</p>
 <p>Web workers are not DOM-dependent. They handle pure data, which makes them especially suitable for JavaScript code that takes a long time to execute.</p>
 
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Workers use a same-origin policy and therefore using some of the browser resources, such as <span style="font-family: Courier New,Courier,monospace">DOM</span>, <span style="font-family: Courier New,Courier,monospace">document</span>, <span style="font-family: Courier New,Courier,monospace">window</span>, and <span style="font-family: Courier New,Courier,monospace">parent</span>, is not possible, and they must be activated by creating separate JavaScript files. However, ECMA JavaScript and the methods included in the Web Workers API, such as <span style="font-family: Courier New,Courier,monospace">postMessage()</span>, <span style="font-family: Courier New,Courier,monospace">location</span>, <span style="font-family: Courier New,Courier,monospace">navigator</span>, and <span style="font-family: Courier New,Courier,monospace">importScripts()</span> can be used. The <span style="font-family: Courier New,Courier,monospace">self</span> and <span style="font-family: Courier New,Courier,monospace">location</span> attributes are also supported.</td> 
-      </tr> 
-     </tbody>
-</table>
+
 <p>The main features of the Web Workers API include:</p>
 <ul>
 <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm#Creating_Web_Worker">Creating workers</a>
@@ -68,6 +59,17 @@ If a worker triggers a message event, the <span style="font-family: Courier New,
 </li>
 </ul>
 
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Workers use a same-origin policy and therefore using some of the browser resources, such as <span style="font-family: Courier New,Courier,monospace">DOM</span>, <span style="font-family: Courier New,Courier,monospace">document</span>, <span style="font-family: Courier New,Courier,monospace">window</span>, and <span style="font-family: Courier New,Courier,monospace">parent</span>, is not possible, and they must be activated by creating separate JavaScript files. However, ECMA JavaScript and the methods included in the Web Workers API, such as <span style="font-family: Courier New,Courier,monospace">postMessage()</span>, <span style="font-family: Courier New,Courier,monospace">location</span>, <span style="font-family: Courier New,Courier,monospace">navigator</span>, and <span style="font-family: Courier New,Courier,monospace">importScripts()</span> can be used. The <span style="font-family: Courier New,Courier,monospace">self</span> and <span style="font-family: Courier New,Courier,monospace">location</span> attributes are also supported.</td> 
+      </tr> 
+     </tbody>
+</table>
+
  <h2 id="js_performance" name="js_performance">JavaScript Performance</h2>
 <p> JavaScript was originally used for simple inspections and request handling. Therefore, the execution time was not an issue. However, with more advanced UI usage, the use of JavaScript code has been increased and become more complicated, significantly influencing the application performance.</p>
 
diff --git a/org.tizen.guides/html/web/w3c/security/cors_w.htm b/org.tizen.guides/html/web/w3c/security/cors_w.htm
index e8d1f4d..97a8510 100644
--- a/org.tizen.guides/html/web/w3c/security/cors_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/cors_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/security/iframe_w.htm b/org.tizen.guides/html/web/w3c/security/iframe_w.htm
index a75e536..0a79ccd 100644
--- a/org.tizen.guides/html/web/w3c/security/iframe_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/iframe_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/security/security_guide_w.htm b/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
index 344c9de..8248eec 100644
--- a/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -36,8 +36,9 @@
 
   <p>The main security features are:</p>
   <ul> 
-  <li><a href="iframe_w.htm">HTML5 iframe element</a> <p>Enables you to allow or block specific HTML elements on a Web page.</p></li>
   <li><a href="cors_w.htm">Cross-Origin Resource Sharing</a> <p>Enables you to make cross-origin requests to resources, allowing a client-side Web application to obtain data retrieved from another origin.</p></li>
+  <li><a href="iframe_w.htm">HTML5 iframe element</a> <p>Enables you to allow or block specific HTML elements on a Web page.</p></li>
+  
   </ul> 
  
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/storage/appcache_w.htm b/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
index b106dee..5313533 100644
--- a/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -32,16 +32,7 @@
 
   <h1>HTML5 Application caches</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>This feature is supported in mobile applications only.</p>    
   
  <p>HTML5 application caches can be used to store and utilize resources needed in Web applications, such as HTML, CSS, and JavaScript files, and images.</p>
  <p>You can cache certain files in the browser to use them in an offline state, or define them to be always updated from the server.</p>
diff --git a/org.tizen.guides/html/web/w3c/storage/file_w.htm b/org.tizen.guides/html/web/w3c/storage/file_w.htm
index d953b98..27d37a6 100644
--- a/org.tizen.guides/html/web/w3c/storage/file_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/file_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm b/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
index 88476d5..a58e1c8 100644
--- a/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm b/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
index 12f9a0a..1724925 100644
--- a/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm b/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm
index dd1f8b2..44e9345 100644
--- a/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/storage/websql_w.htm b/org.tizen.guides/html/web/w3c/storage/websql_w.htm
index 6eedeaf..fa918f5 100644
--- a/org.tizen.guides/html/web/w3c/storage/websql_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/websql_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -31,17 +31,8 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Web SQL Database</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>This feature is supported in mobile applications only.</p> 
+  
  <p>The Web SQL database provides a way to store databases that can be queried using various SQL statements.
  </p>
  <p>
diff --git a/org.tizen.guides/html/web/w3c/supplement/camera_w.htm b/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
index b39c258..5ed9b7d 100644
--- a/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -33,16 +33,7 @@
 
   <h1>Camera API (Tizen Extension)</h1>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>   
+  <p>This feature is supported in wearable applications only.</p> 
   
 <p>You can use the camera features in the Tizen wearable Web applications.</p>
 <p>The main features of the Camera API (Tizen Extension) API include:</p>
diff --git a/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm b/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
index 417a135..80e6492 100644
--- a/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -31,16 +31,7 @@
 <div id="container"><div id="contents"><div class="content">
  <h1>FullScreen API - Mozilla</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>This feature is supported in mobile applications only.</p> 
   
    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm#use">display an element in the fullscreen mode</a>:</p>
 <ul><li>With the <span style="font-family: Courier New,Courier,monospace">webkitRequestFullScreen()</span> method, you can convert a specific element to fullscreen.</li>
diff --git a/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm b/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
index 9bc0e44..35708b2 100644
--- a/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm b/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
index badb380..2b407a7 100644
--- a/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm b/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
index 691071e..541f51f 100644
--- a/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.guides/html/web/w3c/useful/performance_w.htm b/org.tizen.guides/html/web/w3c/useful/performance_w.htm
index 970648a..59e9407 100644
--- a/org.tizen.guides/html/web/w3c/useful/performance_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/performance_w.htm
@@ -16,7 +16,7 @@
  
  <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -35,16 +35,7 @@
    
   <h1>Performance Improvement</h1>
 	
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p>This feature is supported in wearable applications only.</p> 
 	
 <p>With the following instructions, you can improve the performance of your wearable Web applications. The instructions summarize some representative tips that are frequently used in the Web community.</p>
 <ul>
diff --git a/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm b/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm
index b94dd25..6071a2f 100644
--- a/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm
@@ -22,11 +22,13 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
 	</div>
 
 <h1>Tizen WebKit Tap Sound Policy</h1>
 				
+<p>This feature is supported in mobile applications only.</p> 				
+				
   <p>To provide responsiveness on user interaction, Tizen WebKit plays sounds when a user taps an element and specific conditions are fulfilled.</p>
   <p>Sound is not played in case of a tap event for:</p>
 	<ul>
diff --git a/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm b/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
index cf0b44e..621b852 100644
--- a/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
@@ -19,7 +19,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 <h1>Useful Guides for W3C/HTML5 Features</h1> 
diff --git a/org.tizen.guides/index.xml b/org.tizen.guides/index.xml
index ed4afe5..ad1df44 100644
--- a/org.tizen.guides/index.xml
+++ b/org.tizen.guides/index.xml
@@ -10,6 +10,7 @@
 		<topic href="html/web/tizen/application/app_guide_w.htm" label="Application">				
 			<topic href="html/web/tizen/application/alarm_w.htm" label="Alarm"></topic>
 			<topic href="html/web/tizen/application/application_w.htm" label="Application"></topic>
+			<topic href="html/web/tizen/application/appgroup_w.htm" label="Application Group"></topic>
 			<topic href="html/web/tizen/application/package_w.htm" label="Package"></topic>
 			<topic href="html/web/tizen/application/data_w.htm" label="Data Control"></topic>
 		</topic>
@@ -83,7 +84,7 @@
 		<topic href="html/web/w3c/communication/comm_guide_w.htm" label="Communication">					
 			<topic href="html/web/w3c/communication/web_messaging_w.htm" label="HTML5 Web Messaging"></topic>
 			<topic href="html/web/w3c/communication/websocket_w.htm" label="WebSocket"></topic>
-			<topic href="html/web/w3c/communication/xmlhttprequest_w.htm" label="XMLHttpRequest Level 1 and 2"></topic>
+			<topic href="html/web/w3c/communication/xmlhttprequest_w.htm" label="XMLHttpRequest (Level 1 and 2)"></topic>
 			<topic href="html/web/w3c/communication/server_sent_w.htm" label="Server-Sent Events"></topic>					
 		</topic>
 		<topic href="html/web/w3c/storage/storage_guide_w.htm" label="Storage">					
@@ -94,8 +95,8 @@
 			<topic href="html/web/w3c/storage/websql_w.htm" label="Web SQL Database"></topic>					
 		</topic>
 		<topic href="html/web/w3c/security/security_guide_w.htm" label="Security">					
+			<topic href="html/web/w3c/security/cors_w.htm" label="Cross-Origin Resource Sharing"></topic>
 			<topic href="html/web/w3c/security/iframe_w.htm" label="HTML5 iframe element"></topic>
-			<topic href="html/web/w3c/security/cors_w.htm" label="Cross-Origin Resource Sharing"></topic>					
 		</topic>
 		<topic href="html/web/w3c/perf_opt/performance_guide_w.htm" label="Performance and Optimization">					
 			<topic href="html/web/w3c/perf_opt/page_w.htm" label="Page Visibility"></topic>
@@ -121,14 +122,22 @@
 		</topic>				           		
 	</topic>
 </topic>
-<topic href="html/native/guides_n.htm" label="Native Application">		
+<topic href="html/native/guides_n.htm" label="Native Application">	
+	<topic href="html/native/migration_guide_n.htm" label="Migration Guide"></topic>	
 	<topic href="html/native/account/account_guide_n.htm" label="Account">	
-		<topic href="html/native/account/oauth2_n.htm" label="oauth2"></topic>	
+		<topic href="html/native/account/account_manager_n.htm" label="Account Manager"></topic>	
+		<topic href="html/native/account/oauth2_n.htm" label="OAuth 2.0"></topic>
 		<topic href="html/native/account/sync_manager_n.htm" label="Sync Manager"></topic>		      
 	</topic>
 	<topic href="html/native/app/app_guide_n.htm" label="Application Framework">			
-		<topic href="html/native/app/application_n.htm" label="Application"></topic>
-		<topic href="html/native/app/appgroup_n.htm" label="Application Group"></topic>
+		<topic href="html/native/app/application_n.htm" label="Application">
+			<topic href="html/native/app/alarm_n.htm" label="Alarm"></topic>
+			<topic href="html/native/app/appcontrol_n.htm" label="App Control">
+				<topic href="html/native/app/common_appcontrol_n.htm" label="Common Application Controls"></topic>			
+			</topic>
+			<topic href="html/native/app/event_n.htm" label="Event"></topic>
+			<topic href="html/native/app/internationalization_n.htm" label="Internationalization"></topic>		
+		</topic>
 		<topic href="html/native/app/app_manager_n.htm" label="Application Manager"></topic>
 		<topic href="html/native/app/badge_n.htm" label="Badge"></topic>
 		<topic href="html/native/app/bundle_n.htm" label="Bundle"></topic>
@@ -137,8 +146,8 @@
 		<topic href="html/native/app/notification_n.htm" label="Notification"></topic>
 		<topic href="html/native/app/package_n.htm" label="Package Manager"></topic>
 		<topic href="html/native/app/service_app_n.htm" label="Service Application"></topic>
-		<topic href="html/native/app/widget_n.htm" label="Widget Application"></topic>		
 		<topic href="html/native/app/shortcut_n.htm" label="Shortcut"></topic>	
+		<topic href="html/native/app/widget_n.htm" label="Widget Application"></topic>		
 		<topic href="html/native/app/watch_n.htm" label="Watch Application"></topic>
 	</topic>
 	<topic href="html/native/base/base_guide_n.htm" label="Base">			
@@ -159,11 +168,12 @@
 		<topic href="html/native/graphics/opengles_n.htm" label="OpenGL ES"></topic>
 		<topic href="html/native/graphics/tbm_n.htm" label="TBM Surface"></topic>
 		<topic href="html/native/graphics/cairo_n.htm" label="Cairo"></topic>
+		<topic href="html/native/graphics/hw_acceleration_n.htm" label="Hardware Acceleration"></topic>
 	</topic>
 	<topic href="html/native/location/location_guide_n.htm" label="Location">
 		<topic href="html/native/location/location_n.htm" label="Location"></topic>
-		<topic href="html/native/location/geofence_n.htm" label="Geofence"></topic>
 		<topic href="html/native/location/maps_n.htm" label="Maps Service"></topic>
+		<topic href="html/native/location/geofence_n.htm" label="Geofence"></topic>
 	</topic>
 	<topic href="html/native/messaging/messaging_guide_n.htm" label="Messaging">			
 		<topic href="html/native/messaging/messages_n.htm" label="Messages"></topic>
@@ -187,14 +197,14 @@
 		<topic href="html/native/multimedia/tone_player_n.htm" label="Tone Player"></topic>
 		<topic href="html/native/multimedia/wav_player_n.htm" label="WAV Player"></topic>		
 		<topic href="html/native/multimedia/sound_manager_n.htm" label="Sound Manager"></topic>
-		<topic href="html/native/multimedia/screen_mirroring_n.htm" label="Screen Mirroring Sink"></topic>		
+		<topic href="html/native/multimedia/screen_mirroring_n.htm" label="Screen Mirroring"></topic>		
 		<topic href="html/native/multimedia/video_util_n.htm" label="Video Util"></topic>
 	</topic>
 	<topic href="html/native/network/network_guide_n.htm" label="Network">			
 		<topic href="html/native/network/connection_n.htm" label="Connection"></topic>
 		<topic href="html/native/network/bluetooth_n.htm" label="Bluetooth"></topic>
 		<topic href="html/native/network/nfc_n.htm" label="NFC"></topic>
-		<topic href="html/native/network/smartcard_n.htm" label="SmartCard"></topic>
+		<topic href="html/native/network/smartcard_n.htm" label="Smartcard"></topic>
 		<topic href="html/native/network/wifi_n.htm" label="Wi-Fi"></topic>
 		<topic href="html/native/network/wifi_direct_n.htm" label="Wi-Fi Direct"></topic>		
 	</topic>
@@ -203,10 +213,9 @@
 		<topic href="html/native/security/privilege_n.htm" label="Privilege Info"></topic>			
 	</topic>
 	<topic href="html/native/social/social_guide_n.htm" label="Social">	
-		<topic href="html/native/social/service_adaptor_n.htm" label="Service Adaptor"></topic>
-		<topic href="html/native/social/account_manager_n.htm" label="Account Manager"></topic>
+		<topic href="html/native/social/contact_n.htm" label="Contacts"></topic>
 		<topic href="html/native/social/calendar_n.htm" label="Calendar"></topic>
-		<topic href="html/native/social/contact_n.htm" label="Contacts"></topic>			
+		<topic href="html/native/social/service_adaptor_n.htm" label="Service Adaptor"></topic>		
 	</topic>	
 	<topic href="html/native/system/system_guide_n.htm" label="System">			
 		<topic href="html/native/system/device_n.htm" label="Device"></topic>
@@ -225,6 +234,7 @@
 	</topic>
 	<topic href="html/native/ui/ui_guide_n.htm" label="UI Framework">	
 		<topic href="html/native/ui/eom_n.htm" label="External Output Manager"></topic>
+		<topic href="html/native/ui/minicontrol_n.htm" label="Minicontrol"></topic>
 	</topic>
 	<topic href="html/native/uix/uix_guide_n.htm" label="UIX">			
 		<topic href="html/native/uix/tts_n.htm" label="TTS"></topic>
@@ -236,8 +246,5 @@
 		<topic href="html/native/uix/ime_n.htm" label="Input Method"></topic>
 	</topic>
 	<topic href="html/native/web/web_guide_n.htm" label="Web"></topic>	
-	<topic href="html/native/porting/porting_n.htm" label="Porting">			
-		<topic href="html/native/porting/api_comparison_n.htm" label="API Comparison"></topic>
-	</topic>	
 </topic>	
 </toc>
diff --git a/org.tizen.sampledescriptions/META-INF/MANIFEST.MF b/org.tizen.sampledescriptions/META-INF/MANIFEST.MF
index 88f81e0..5938022 100644
--- a/org.tizen.sampledescriptions/META-INF/MANIFEST.MF
+++ b/org.tizen.sampledescriptions/META-INF/MANIFEST.MF
@@ -1,6 +1,6 @@
 Manifest-Version: 1.0
 Bundle-ManifestVersion: 1
-Bundle-Name: Tizen Sample Applications
+Bundle-Name: Tizen Sample Descriptions
 Bundle-SymbolicName: org.tizen.sampledescriptions;singleton=true
 Bundle-Version: 2.4.0
 Bundle-Vendor: The Linux Foundation
diff --git a/org.tizen.sampledescriptions/html/cover_page.htm b/org.tizen.sampledescriptions/html/cover_page.htm
index 8a97391..08bbf80 100644
--- a/org.tizen.sampledescriptions/html/cover_page.htm
+++ b/org.tizen.sampledescriptions/html/cover_page.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/> <img alt="Wearable native" src="images/wn_icon.png"/></p>
+		<p><img alt="Mobile" src="images/mobile_s_wn.png"/> <img alt="Wearable" src="images/wearable_s_wn.png"/></p>
 	</div>
 	
  <h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
diff --git a/org.tizen.sampledescriptions/html/images/bundle_data_sink_view_sd.png b/org.tizen.sampledescriptions/html/images/bundle_data_sink_view_sd.png
index 73a67bd..8820c18 100644
Binary files a/org.tizen.sampledescriptions/html/images/bundle_data_sink_view_sd.png and b/org.tizen.sampledescriptions/html/images/bundle_data_sink_view_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/bundle_data_source_basic_view_sd.png b/org.tizen.sampledescriptions/html/images/bundle_data_source_basic_view_sd.png
index 534ce17..5e1c110 100644
Binary files a/org.tizen.sampledescriptions/html/images/bundle_data_source_basic_view_sd.png and b/org.tizen.sampledescriptions/html/images/bundle_data_source_basic_view_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/bundle_data_source_filled_view_sd.png b/org.tizen.sampledescriptions/html/images/bundle_data_source_filled_view_sd.png
index 76350b0..54d4a62 100644
Binary files a/org.tizen.sampledescriptions/html/images/bundle_data_source_filled_view_sd.png and b/org.tizen.sampledescriptions/html/images/bundle_data_source_filled_view_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/mediacontrol_client_sd.png b/org.tizen.sampledescriptions/html/images/mediacontrol_client_sd.png
new file mode 100644
index 0000000..c8de205
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/mediacontrol_client_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/mediacontrol_server_sd.png b/org.tizen.sampledescriptions/html/images/mediacontrol_server_sd.png
new file mode 100644
index 0000000..db89559
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/mediacontrol_server_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_data_sink_view_sd.png b/org.tizen.sampledescriptions/html/images/messageport_data_sink_view_sd.png
new file mode 100644
index 0000000..ab209d3
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_data_sink_view_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_data_source_view_sd.png b/org.tizen.sampledescriptions/html/images/messageport_data_source_view_sd.png
new file mode 100644
index 0000000..40fc25d
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_data_source_view_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_edje_layout_data_sink_sd.png b/org.tizen.sampledescriptions/html/images/messageport_edje_layout_data_sink_sd.png
new file mode 100644
index 0000000..36a1a85
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_edje_layout_data_sink_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_edje_layout_data_source_sd.png b/org.tizen.sampledescriptions/html/images/messageport_edje_layout_data_source_sd.png
new file mode 100644
index 0000000..a450169
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_edje_layout_data_source_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_edje_layout_main_sd.png b/org.tizen.sampledescriptions/html/images/messageport_edje_layout_main_sd.png
new file mode 100644
index 0000000..92564f9
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_edje_layout_main_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_edje_structure_data_sink_sd.png b/org.tizen.sampledescriptions/html/images/messageport_edje_structure_data_sink_sd.png
new file mode 100644
index 0000000..4c01779
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_edje_structure_data_sink_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_edje_structure_data_source_sd.png b/org.tizen.sampledescriptions/html/images/messageport_edje_structure_data_source_sd.png
new file mode 100644
index 0000000..e76c406
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_edje_structure_data_source_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_ui_layout_data_sink_sd.png b/org.tizen.sampledescriptions/html/images/messageport_ui_layout_data_sink_sd.png
new file mode 100644
index 0000000..1bcd184
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_ui_layout_data_sink_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_ui_layout_data_source_sd.png b/org.tizen.sampledescriptions/html/images/messageport_ui_layout_data_source_sd.png
new file mode 100644
index 0000000..2ae87d6
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_ui_layout_data_source_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_ui_layout_main_sd.png b/org.tizen.sampledescriptions/html/images/messageport_ui_layout_main_sd.png
new file mode 100644
index 0000000..243aa6d
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_ui_layout_main_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_ui_structure_data_sink_sd.png b/org.tizen.sampledescriptions/html/images/messageport_ui_structure_data_sink_sd.png
new file mode 100644
index 0000000..454c392
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_ui_structure_data_sink_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_ui_structure_data_source_sd.png b/org.tizen.sampledescriptions/html/images/messageport_ui_structure_data_source_sd.png
new file mode 100644
index 0000000..09e7b42
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_ui_structure_data_source_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_workflow_message_structure_sd.png b/org.tizen.sampledescriptions/html/images/messageport_workflow_message_structure_sd.png
new file mode 100644
index 0000000..5596970
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_workflow_message_structure_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_workflow_startup_sd.png b/org.tizen.sampledescriptions/html/images/messageport_workflow_startup_sd.png
new file mode 100644
index 0000000..bf17348
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_workflow_startup_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_workflow_text_receive_sd.png b/org.tizen.sampledescriptions/html/images/messageport_workflow_text_receive_sd.png
new file mode 100644
index 0000000..4b5ad2a
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_workflow_text_receive_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/messageport_workflow_text_send_sd.png b/org.tizen.sampledescriptions/html/images/messageport_workflow_text_send_sd.png
new file mode 100644
index 0000000..2cdbab9
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/messageport_workflow_text_send_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/mn_division.png b/org.tizen.sampledescriptions/html/images/mn_division.png
index 1f7e337..faecb28 100644
Binary files a/org.tizen.sampledescriptions/html/images/mn_division.png and b/org.tizen.sampledescriptions/html/images/mn_division.png differ
diff --git a/org.tizen.sampledescriptions/html/images/mobile_s_n.png b/org.tizen.sampledescriptions/html/images/mobile_s_n.png
new file mode 100644
index 0000000..ad8c779
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/mobile_s_n.png differ
diff --git a/org.tizen.sampledescriptions/html/images/mobile_s_w.png b/org.tizen.sampledescriptions/html/images/mobile_s_w.png
new file mode 100644
index 0000000..f86df29
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/mobile_s_w.png differ
diff --git a/org.tizen.sampledescriptions/html/images/mobile_s_wn.png b/org.tizen.sampledescriptions/html/images/mobile_s_wn.png
new file mode 100644
index 0000000..ec30fd2
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/mobile_s_wn.png differ
diff --git a/org.tizen.sampledescriptions/html/images/mw_division.png b/org.tizen.sampledescriptions/html/images/mw_division.png
index 8fc3efa..c4a8655 100644
Binary files a/org.tizen.sampledescriptions/html/images/mw_division.png and b/org.tizen.sampledescriptions/html/images/mw_division.png differ
diff --git a/org.tizen.sampledescriptions/html/images/n_division.png b/org.tizen.sampledescriptions/html/images/n_division.png
index d687bc5..5a0b8f6 100644
Binary files a/org.tizen.sampledescriptions/html/images/n_division.png and b/org.tizen.sampledescriptions/html/images/n_division.png differ
diff --git a/org.tizen.sampledescriptions/html/images/uicomponent_mobile.png b/org.tizen.sampledescriptions/html/images/uicomponent_mobile.png
index 156068e..0968c1a 100644
Binary files a/org.tizen.sampledescriptions/html/images/uicomponent_mobile.png and b/org.tizen.sampledescriptions/html/images/uicomponent_mobile.png differ
diff --git a/org.tizen.sampledescriptions/html/images/w_division.png b/org.tizen.sampledescriptions/html/images/w_division.png
index 88d9959..443a1ea 100644
Binary files a/org.tizen.sampledescriptions/html/images/w_division.png and b/org.tizen.sampledescriptions/html/images/w_division.png differ
diff --git a/org.tizen.sampledescriptions/html/images/wearable_s_n.png b/org.tizen.sampledescriptions/html/images/wearable_s_n.png
new file mode 100644
index 0000000..02e3791
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/wearable_s_n.png differ
diff --git a/org.tizen.sampledescriptions/html/images/wearable_s_w.png b/org.tizen.sampledescriptions/html/images/wearable_s_w.png
new file mode 100644
index 0000000..379a9c5
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/wearable_s_w.png differ
diff --git a/org.tizen.sampledescriptions/html/images/wearable_s_wn.png b/org.tizen.sampledescriptions/html/images/wearable_s_wn.png
new file mode 100644
index 0000000..280245d
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/wearable_s_wn.png differ
diff --git a/org.tizen.sampledescriptions/html/images/wn_division.png b/org.tizen.sampledescriptions/html/images/wn_division.png
index 11a7876..dca667f 100644
Binary files a/org.tizen.sampledescriptions/html/images/wn_division.png and b/org.tizen.sampledescriptions/html/images/wn_division.png differ
diff --git a/org.tizen.sampledescriptions/html/images/ww_division.png b/org.tizen.sampledescriptions/html/images/ww_division.png
index 65e7ab7..5f5160c 100644
Binary files a/org.tizen.sampledescriptions/html/images/ww_division.png and b/org.tizen.sampledescriptions/html/images/ww_division.png differ
diff --git a/org.tizen.sampledescriptions/html/index.htm b/org.tizen.sampledescriptions/html/index.htm
index f191479..90a32ba 100644
--- a/org.tizen.sampledescriptions/html/index.htm
+++ b/org.tizen.sampledescriptions/html/index.htm
@@ -54,6 +54,7 @@
 			<li><a href="mobile_w/systeminfo_mw.htm">Systeminfo</a></li>
 			<li><a href="mobile_w/touchpaint_mw.htm">TouchPaint</a></li>
 			<li><a href="mobile_w/uicomponent_mw.htm">UIComponent</a></li>
+		
 		</ul>
 		</li>
 		<li><a href="wearable_w/sd_ww.htm">Wearable Web</a>
@@ -104,13 +105,15 @@
 			<li><a href="mobile_n/hybridservice_sd_mn.htm">HybridServiceApp</a></li>
 			<li><a href="mobile_n/lockscreen_sd_mn.htm">Lockscreen</a></li>
 			<li><a href="mobile_n/mediaapp_sd_mn.htm">Media App</a></li>
+			<li><a href="mobile_n/mediacontroller_client_sd_mn.htm">Media-controller-client</a></li>
+			<li><a href="mobile_n/mediacontroller_server_sd_mn.htm">Media-controller-server</a></li>
+			<li><a href="mobile_n/messageport_sd_mn.htm">Message Port</a></li>
 			<li><a href="mobile_n/notificationmanager_sd_mn.htm">Notification Manager</a></li>
 			<li><a href="mobile_n/paint_sd_mn.htm">Paint</a></li>
 			<li><a href="mobile_n/pedometer_sd_mn.htm">Pedometer</a></li>			
 			<li><a href="mobile_n/piano_sd_mn.htm">Piano</a></li>
 			<li><a href="mobile_n/preference_sd_mn.htm">Preference</a></li>
 			<li><a href="mobile_n/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>
@@ -180,7 +183,7 @@
 			<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>
 			<li><a href="wearable_n/digital_watch_sd_wn.htm">Digital-Watch</a></li>
-			<li><a href="wearable_n/evas_gl_sd_wn.htm">EvasGLCube</a></li>
+			<li><a href="wearable_n/evas_gl_sd_wn.htm">EvasGLCube</a></li>	
 			<li><a href="wearable_n/glview11_cube_sd_wn.htm">GLView11Cube</a></li>
 			<li><a href="wearable_n/glview_cube_sd_wn.htm">GLViewCube</a></li>
 			<li><a href="wearable_n/glview_shader_sd_wn.htm">GLViewShader</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
index 55c5e32..88328ba 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/application_control_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/application_control_sd_mn.htm
@@ -20,21 +20,21 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.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>
+<p>The Application Control sample application uses the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control</a> 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>The following figure 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>
+<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>
@@ -48,10 +48,11 @@
 <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>
+<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)
+void 
+controller_search_app(int selected_operation_id)
 {
 &nbsp;&nbsp;&nbsp;app_control_h app_control = NULL;
 
@@ -76,7 +77,8 @@ void controller_search_app(int selected_operation_id)
 
 <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)
+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;
 
@@ -96,9 +98,10 @@ static bool app_control_application_matched_cb(app_control_h app_control, const
 </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>
+<p>The <span style="font-family: Courier New,Courier,monospace">controller_execute()</span> function launches the selected application using the <span style="font-family: Courier New,Courier,monospace">app_control_send_launch_request()</span> 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 behavior 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)
+void 
+controller_execute(void)
 {
 &nbsp;&nbsp;&nbsp;// Declare the variables
 
@@ -135,10 +138,11 @@ void controller_execute(void)
 
 <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>
+<p>This sample application 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)
+void 
+controller_send_message(const char *email_address, const char *email_body)
 {
 &nbsp;&nbsp;&nbsp;app_control_h app_control = NULL;
 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm
index 1598d1c..506563f 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm
@@ -20,29 +20,30 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.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 Bluetooth Chat sample application demonstrates how you can send and receive data between 2 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> 
+<p>The main screen has 2 buttons for finding devices (<strong>Search friends</strong>) and creating a server (<strong>Wait a friend</strong>). 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>After a button click, the application calls the <span style="font-family: Courier New,Courier,monospace">bt_mgr_initialize()</span> function, and checks whether Bluetooth is on or off. If Bluetooth is off, the application calls the Bluetooth ON/OFF application to switch Bluetooth on.</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>
+<p>If the <span style="font-family: Courier New,Courier,monospace">bt_mgr_initialize()</span> function is called and Bluetooth is on, the application draws proper layouts according to its current role (client or server):</p>
 <pre class="prettyprint">
-void bt_mgr_initialize(void *data, bt_mgr_type type)
+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;
@@ -90,7 +91,8 @@ void bt_mgr_initialize(void *data, bt_mgr_type type)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
 }
-static void _onoff_operation(void)
+static void 
+_onoff_operation(void)
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
 &nbsp;&nbsp;&nbsp;app_control_h service = NULL;
@@ -112,9 +114,10 @@ static void _onoff_operation(void)
 
 <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>
+<p>To start the client application, click <strong>Search Friends</strong>. The client 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)
+static void 
+_search_layout_create(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
 
@@ -139,9 +142,10 @@ static void _search_layout_create(appdata_s *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>
+<p>While drawing the list, the application starts finding devices with 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 a new device is found.</p>
 <pre class="prettyprint">
-static void _discovery_start(appdata_s *ad)
+static void 
+_discovery_start(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;bt_error_e ret = BT_ERROR_NONE;
 
@@ -157,8 +161,9 @@ static void _discovery_start(appdata_s *ad)
 &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)
+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;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;
@@ -206,10 +211,11 @@ static void _adapter_discovery_state_changed_cb(int result, bt_adapter_device_di
 }
 </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>
+<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)
+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;bt_socket_connection_s *connection, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)user_data;
 &nbsp;&nbsp;&nbsp;ret_if(!ad);
@@ -243,7 +249,8 @@ static void _socket_conn_state_changed_cb(int result, bt_socket_connection_state
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void _device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data)
+static void 
+_device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
 
@@ -271,25 +278,26 @@ static void _device_bond_created_cb(int result, bt_device_info_s *device_info, v
 
 &nbsp;&nbsp;&nbsp;return;
 
-DEL_NOTI:
+&nbsp;&nbsp;&nbsp;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;&nbsp;&nbsp;&nbsp;if (s_info.noti) 
+&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;s_info.noti = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;return;
+&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>
+<p>When the application is 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>
+<p>To start the server application, click <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 by using 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)
+static void 
+_visibility_operation_set(void)
 {
 &nbsp;&nbsp;&nbsp;app_control_h service = NULL;
 &nbsp;&nbsp;&nbsp;int ret = 0;
@@ -309,9 +317,10 @@ static void _visibility_operation_set(void)
 }
 </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>
+<p>A server application also registers the callback for detecting the state of the socket connection. The callback function is same as that of the 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)
+static void 
+_server_layout_create(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *layout = NULL;
 &nbsp;&nbsp;&nbsp;Evas_Object *progress = NULL;
@@ -341,20 +350,20 @@ static void _server_layout_create(appdata_s *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;ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (layout) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layout = NULL;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;if (progress) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(progress);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progress = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 }
 </pre>
 
@@ -365,7 +374,8 @@ ERROR:
 
 <li>Draw the layout:
 <pre class="prettyprint">
-static Evas_Object *_main_view_create(appdata_s *ad)
+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;
@@ -410,23 +420,24 @@ static Evas_Object *_main_view_create(appdata_s *ad)
 
 &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;ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (main_scroller) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(main_scroller);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_scroller = NULL;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;if (input_field_table) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(input_field_table);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input_field_table = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;return 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)
+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;{
@@ -456,8 +467,9 @@ static void _on_main_scroller_del_cb(void *data, Evas *e, Evas_Object *obj, void
 </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)
+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;bt_socket_connection_s *connection, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *noti = NULL;
 &nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
@@ -478,7 +490,8 @@ static void _socket_conn_state_changed_cb(int result, bt_socket_connection_state
 </li>
 <li>Receive the data:
 <pre class="prettyprint">
-static void _socket_data_received_cb(bt_socket_received_data_s *data, void *user_data)
+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;
@@ -500,26 +513,27 @@ static void _socket_data_received_cb(bt_socket_received_data_s *data, void *user
 
 &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;ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bubble_table) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(bubble_table);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bubble_table = NULL;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;if (message) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(message);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;return;
+&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>
+<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 connection state change callback 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)
+void 
+bt_chat_room_layout_create(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *main_scroller = NULL;
 &nbsp;&nbsp;&nbsp;int ret = -1;
@@ -543,7 +557,8 @@ void bt_chat_room_layout_create(appdata_s *ad)
 
 <li>Send a message:
 <pre class="prettyprint">
-static void _message_send(appdata_s *ad)
+static void 
+_message_send(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *bubble_table = NULL;
 &nbsp;&nbsp;&nbsp;Evas_Object *noti = NULL;
diff --git a/org.tizen.sampledescriptions/html/mobile_n/bundle_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/bundle_sd_mn.htm
index a1706d1..062a517 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/bundle_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/bundle_sd_mn.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
   <h1>Bundle Sample Overview</h1>
 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/cairo_basic_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/cairo_basic_sd_mn.htm
index 8b13090..861e3ed 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/cairo_basic_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/cairo_basic_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>Cairo Basic Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/cairo_evasgl_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/cairo_evasgl_sd_mn.htm
index 0c140a6..a5f2204 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/cairo_evasgl_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/cairo_evasgl_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>Cairo EvasGL Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/calculator_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/calculator_sd_mn.htm
index 1e4eea6..8b735cf 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/calculator_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/calculator_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>Calculator Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/contacts_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/contacts_sd_mn.htm
index 05535a8..df058f3 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/contacts_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/contacts_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>Contacts Sample Overview</h1> 
@@ -52,10 +52,14 @@
 
 <p>The application uses the <span style="font-family: Courier New,Courier,monospace">contacts-svc</span> module to work with the contacts database and the <span style="font-family: Courier New,Courier,monospace">elementary</span> module to support the UI requirements.</p>
 
-<p>You must declare the following privileges in the application manifest file to be able to execute the application:</p>
-<pre class="prettyprint">&lt;privilege&gt;http://tizen.org/privilege/contact.write&lt;/privilege&gt;
-&lt;privilege&gt;http://tizen.org/privilege/contact.read&lt;/privilege&gt;</pre>
+<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/contact.write</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/contact.read</span></li>
+ </ul>
 
+<h2>Source Files</h2>
 
 <p>You can create and view the sample application project including the source files in the IDE.</p>
 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/evas_gl_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/evas_gl_sd_mn.htm
index ecbb738..f1281b9 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/evas_gl_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/evas_gl_sd_mn.htm
@@ -11,7 +11,7 @@
 	<script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
 	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-	<title>EvasGLCube Sample Overview</title>
+	<title>EvasGLCube Sample Overview</title>  
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
@@ -21,10 +21,10 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
-  <h1>EvasGLCube Sample Overview</h1>
+  <h1>EvasGLCube Sample Overview</h1> 
   <p>The EvasGLCube sample application demonstrates how to implement a rotatable cube on the screen using EvasGL with the Tizen SDK. The sample shows how to handle polygon geometry, and how to write a simple vertex and fragment shader for the cube. EvasGL is similar to the EGL&#8482; layer and is related to GLView.</p>
   
   
@@ -34,16 +34,16 @@
 		 <th class="note">Note</th> 
 		</tr> 
 		<tr> 
-		 <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.<p>A 3D application using the OpenGL ES must use the GLView. EvasGL can be used in special cases, such as a multi-thread.</p></td>
+		 <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.<p>A 3D application using the OpenGL ES must use the GLView. EvasGL can be used in special cases, such as a multi-thread.</p></td> 
 		</tr> 
 	   </tbody> 
 	  </table> 
   
   <p>The following figure illustrates the main screen of the EvasGLCube.</p>
-
-    <p class="figure">Figure: EvasGLCube screen</p>
-  <p align="center"><img alt="EvasGLCube screen" src="../images/evas_gl_sd.png" /></p>
-
+  
+    <p class="figure">Figure: EvasGLCube screen</p> 
+  <p align="center"><img alt="EvasGLCube screen" src="../images/evas_gl_sd.png" /></p>   
+ 
 <h2>Setting up the OpenGL ES Surface</h2>
 <p>The EvasGL interface is similar to the EGL interface. It can be connected to Evas so that OpenGL ES code works with Evas 2D objects.</p>
 <p>This sample shows how to implement with EvasGL to use OpenGL ES:</p>
@@ -58,7 +58,7 @@
 
 <pre class="prettyprint">EVAS_GL_GLOBAL_GLES2_DEFINE();</pre>
 
-<p>The EvasGL or GLView program uses the wrapper functions by the supported Evas GL. The wrapper function&#39;s interface is the same as OpenGL ES&#39;s. This macro can provide a set of convenience wrapper function tables.</p>
+<p>The EvasGL or GLView program uses the wrapper function by the supported Evas GL. The wrapper function&#39;s interface is the same as OpenGL ES&#39;s. This macro can provide a set of convenience wrapper function tables.</p>
 <pre class="prettyprint">
 Evas_Object *add_win(const char *name)
 {
@@ -74,7 +74,7 @@ Evas_Object *add_win(const char *name)
 &nbsp;&nbsp;&nbsp;return win;
 }
 </pre>
-<p>Before creating the Elm Window, we set the GL Rendering Engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set(&quot;opengl&quot;)</span> because EvasGL runs with EvasGL Render Engine.</p>
+<p>Before creating the Elm Window, set the GL Rendering Engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set(&quot;opengl&quot;)</span> function because EvasGL runs with EvasGL Render Engine.</p>
  
 <h2>Setting up Callbacks</h2>
 
@@ -123,11 +123,11 @@ static void init_evasgl(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
 
 &nbsp;&nbsp;&nbsp;ani = ecore_animator_add(animate_cb, ad-&gt;img);
-&nbsp;&nbsp;&nbsp;evas_object_data_set(ad->img, &quot;ani&quot;, ani);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad->conform,ad->img);
+&nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;img, &quot;ani&quot;, ani);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;img);
 }
 </pre>
-<p>To use EvasGL, we first create it, then set its configuration, and create the Evas GL surface and context. For rendering, we connect EvasGL with the Evas Object Image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_native_surface_set()</span>.</p>
+<p>To use EvasGL, create it, set its configuration, and create the Evas GL surface and context. For rendering, connect EvasGL with the Evas Object Image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_native_surface_set()</span> function.</p>
 </li>
 
 <li>Resize callbacks.
@@ -144,16 +144,16 @@ static void win_resize_cb(void *data, Evas *e , Evas_Object *obj , void *event_i
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = NULL;
 &nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, NULL, NULL, &amp;ad->surface_w, &amp;ad->surface_h);
-&nbsp;&nbsp;&nbsp;evas_object_image_size_set(ad-&gt;img, ad->surface_w, ad->surface_h);
-&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;img, ad->surface_w, ad->surface_h);
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, NULL, NULL, &amp;ad-&gt;surface_w, &amp;ad-&gt;surface_h);
+&nbsp;&nbsp;&nbsp;evas_object_image_size_set(ad-&gt;img, ad-&gt;surface_w, ad-&gt;surface_h);
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;img, ad-&gt;surface_w, ad-&gt;surface_h);
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;img);
 
 &nbsp;&nbsp;&nbsp;if (!ad-&gt;sfc) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Native_Surface ns;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, ad->surface_w, ad->surface_h);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, ad-&gt;surface_w, ad-&gt;surface_h);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(ad-&gt;img, EINA_TRUE);
@@ -165,7 +165,7 @@ static void win_resize_cb(void *data, Evas *e , Evas_Object *obj , void *event_i
 <li>Draw callbacks.
 <p>The Evas GL draw callback function is registered by the following Evas Object Image function:</p>
 <pre class="prettyprint">
- evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixel_cb, ad);
+evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixel_cb, ad);
 </pre>
 <p>This callback function is provided for on-demand mode. Especially, if Evas GL uses <span style="font-family: Courier New,Courier,monospace">EVAS_GL_OPTIONS_DIRECT</span>, all OpenGL ES options are called in this callback function.</p>
 <pre class="prettyprint">
@@ -191,19 +191,20 @@ static void img_pixel_cb(void *data, Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, 3 * 72 * 4, cube_vertices,GL_STATIC_DRAW);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_matrix(view);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad->surface_w &gt; ad->surface_h)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;surface_w &gt; ad-&gt;surface_h) 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float)ad->surface_w / ad->surface_h;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float)ad-&gt;surface_w / ad-&gt;surface_h;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view_set_ortho(view, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0, -1.0, 1.0);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float)ad->surface_h / ad->surface_w;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float)ad-&gt;surface_h / ad-&gt;surface_w;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view_set_ortho(view, -1.0, 1.0, -1.0 * aspect,  1.0 *aspect, -1.0, 1.0);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
 &nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;glViewport(0, 0, ad->surface_w, ad->surface_h);
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, ad-&gt;surface_w, ad-&gt;surface_h);
 &nbsp;&nbsp;&nbsp;glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
 &nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
@@ -243,7 +244,7 @@ static Eina_Bool animate_cb(void *data)
 }
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function sets dirty bit of the Evas Object image which is connected Evas GL. After that, the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_get_callback_set()</span> callback function is called whenever Evas renders.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function sets the dirty bit of the Evas Object image which is connected Evas GL. After that, the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_get_callback_set()</span> callback function is called whenever Evas renders.</p>
 </li>
 
 <li>Delete callbacks.
@@ -252,7 +253,7 @@ static Eina_Bool animate_cb(void *data)
 static void img_del_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Ecore_Animator *ani = evas_object_data_get(ad->img, &quot;ani&quot;);
+&nbsp;&nbsp;&nbsp;Ecore_Animator *ani = evas_object_data_get(ad-&gt;img, &quot;ani&quot;);
 &nbsp;&nbsp;&nbsp;ecore_animator_del(ani);
 
 &nbsp;&nbsp;&nbsp;// Free the GL resources when image object is deleted
@@ -294,4 +295,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.sampledescriptions/html/mobile_n/file_manager_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/file_manager_sd_mn.htm
index 08ddce3..f138cd4 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/file_manager_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/file_manager_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>File Manager Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/glview11_cube_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/glview11_cube_sd_mn.htm
index e4a5e6b..9ac1c51 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/glview11_cube_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/glview11_cube_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>GLView11Cube Sample Overview</h1> 
@@ -46,7 +46,7 @@
 
  
 <h2>Initializing the Application</h2>
-<p>The easiest tool to use OpenGL ES within an EFL application is to rely on the Elementary GLView widget.</p>
+<p>The easiest tool to use OpenGL ES within an EFL application is to rely on the Elementary GLView component.</p>
 <p>Current GLView can support both GLES 2.0 and 1.1. GLView with the GLES 1.1 basic application has a similar format as the other GLView application.</p>
 <p>Create a basic application:</p>
 <pre class="prettyprint">
@@ -56,7 +56,7 @@
 #include &lt;dlog.h&gt;
 </pre>
 
-<p>The GLView application should include the header files as the <span style="font-family: Courier New,Courier,monospace">&lt;Evas_GL.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;Elementary.h&gt;</span>. The <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file is for key events and the <span style="font-family: Courier New,Courier,monospace">&lt;dlog.h&gt;</span> header file is for logs view.</p>
+<p>The GLView application should include the header files as the <span style="font-family: Courier New,Courier,monospace">&lt;Evas_GL.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;Elementary.h&gt;</span>. The <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file is for key events and the <span style="font-family: Courier New,Courier,monospace">&lt;dlog.h&gt;</span> header file is for the logs view.</p>
 <pre class="prettyprint">
 #define S(a) evas_object_show(a)
 
@@ -164,7 +164,7 @@ _glview_create(appdata_s *ad)
 <p>To set up callbacks:</p>
 <ol>
 <li>Set the initialization callback.
-<p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface created. This is called from the main loop, as are the 3 other callbacks.</p>
+<p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface have been created. This is called from the main loop, as are the 3 other callbacks.</p>
 <pre class="prettyprint">
 #include &lt;Elementary_GL_Helpers.h&gt;</pre>
 
@@ -231,14 +231,14 @@ void resize_gl(Evas_Object *obj)
 <li>Set the draw callback.
 <p>The draw callback is called whenever a new frame has to be drawn. The exact moment when this function is called depends on the policy set when calling.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
 
 <p>Another policy is <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_POLICY_ALWAYS</span>.</p>
 <p>The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created. The following example covers the whole window:</p>
 <pre class="prettyprint">
 void draw_gl(Evas_Object *obj)
 {
-ELEMENTARY_GLVIEW_USE(obj);
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_USE(obj);
 
 &nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 &nbsp;&nbsp;&nbsp;glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
@@ -298,7 +298,7 @@ _anim_cb(void *data)
 		 <th class="note">Note</th> 
 		</tr> 
 		<tr> 
-		 <td class="note">OpenGL ES 1.1 application can be implemented in Tizen. However, if OpenGL ES 1.1 and OpenGL ES 2.0 are used together, they cannot be used in the same file.</td>
+		 <td class="note">OpenGL ES 1.1 application can be implemented in Tizen. However, if OpenGL ES 1.1 and OpenGL ES 2.0 are used together, they cannot be used in the same file.</td> 
 		</tr> 
 	   </tbody> 
 	  </table>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/glview_cube_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/glview_cube_sd_mn.htm
index f6c86bc..6eb8eea 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/glview_cube_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/glview_cube_sd_mn.htm
@@ -21,12 +21,12 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>GLViewCube Sample Overview</h1> 
   
-<p>This sample demonstrates how to render with OpenGL ES 2.0 using an Elementary GLView Widget. It goes through the creation of a simple UI and how to draw a rotating cube using simple vertex and fragment shaders.</p>
+<p>This sample demonstrates how to render with OpenGL ES 2.0 using an Elementary GLView component. It goes through the creation of a simple UI and how to draw a rotating cube using simple vertex and fragment shaders.</p>
 
 	  <table class="note"> 
 	   <tbody> 
@@ -54,14 +54,12 @@
 #include &quot;glviewcube_utils.h&quot;
 
 ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
-...
+
 static bool app_create(void *data) 
 {
-...
 &nbsp;&nbsp;&nbsp;// Create and initialize GLView
 &nbsp;&nbsp;&nbsp;gl = elm_glview_add(ad-&gt;conform);
 &nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(gl);
-...
 }
 </pre>
 
@@ -69,7 +67,7 @@ static bool app_create(void *data)
 <ol>
 <li>Set the initialization callback.
 <p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface have been created.</p>
-<p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span>.</p>
+<p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span> function.</p>
 
 <pre class="prettyprint">
 static void init_gl(Evas_Object *obj) 
@@ -82,7 +80,6 @@ static void init_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 }
 </pre>
 </li>
@@ -90,7 +87,7 @@ static void init_gl(Evas_Object *obj)
 <li>Initialize the shaders.
 <ol type="a">
 <li>The shader instances for the fragment and vertex shader are compiled and created by passing the shader type as a parameter to the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.
-	<p>We should Load the shader objects, and use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
+	<p>Load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
 	<pre class="prettyprint">
 static void init_shaders(Evas_Object *obj) 
 {
@@ -106,7 +103,7 @@ static void init_shaders(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
 &nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
 </pre></li>
-	<li>Once the shader objects loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
+	<li>Once the shader objects have been loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
 	<pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
 &nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
@@ -139,7 +136,7 @@ static void init_shaders(Evas_Object *obj)
 static void resize_gl(Evas_Object *obj) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
-&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &ad->glview_w, &ad->glview_h);
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;ad-&gt;glview_w, &amp;ad-&gt;glview_h);
 }
 </pre>
 </li>
@@ -153,7 +150,6 @@ static void resize_gl(Evas_Object *obj)
 	<pre class="prettyprint">
 static void draw_gl(Evas_Object *obj) 
 {
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;glViewport(0, 0, ad-&gt;glview_w, ad-&gt;glview_h);
 </pre>
 	</li>
@@ -167,7 +163,7 @@ static void draw_gl(Evas_Object *obj)
 
 &nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_position);
 &nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_color);
-	</pre>
+</pre>
 	</li>
 
 	<li>The <span style="font-family: Courier New,Courier,monospace">glUniformMatrix4fv()</span> function modifies the values of the 4x4 MVP (Model View/Projection) uniform matrix according to the vertices information of the cube. An MVP matrix is created with data after each vertex of the cube has passed through 2 transformation stages: The first transformation state is the model view transformation, which includes translation, rotation, and scaling of objects. The second state is projection, which includes changes in the  perspective or orthography.
@@ -179,7 +175,8 @@ static void draw_gl(Evas_Object *obj)
 	<pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;glDrawElements(GL_TRIANGLES, cube_indices_count, 				
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_UNSIGNED_SHORT, cube_indices);
-	</pre>
+}
+</pre>
 	</li>
 	</ol>
 	</li>
@@ -190,14 +187,13 @@ static void draw_gl(Evas_Object *obj)
 static Eina_Bool anim(void *data) 
 {
 &nbsp;&nbsp;&nbsp;elm_glview_changed_set(data);
+
 &nbsp;&nbsp;&nbsp;return EINA_TRUE;
 }
 
 static bool app_create(void *data) 
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;ani = ecore_animator_add(anim, gl);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 }
 </pre>
 </li>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/glview_shader_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/glview_shader_sd_mn.htm
index be72b75..69f6b07 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/glview_shader_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/glview_shader_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>GLViewShader Sample Overview</h1> 
@@ -53,14 +53,12 @@
 #include &quot;glviewcube_utils.h&quot;
 
 ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
-...
+
 static bool app_create(void *data) 
 {
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;// Create and initialize GLView
 &nbsp;&nbsp;&nbsp;gl = elm_glview_add(ad-&gt;conform);
 &nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(gl);
-&nbsp;&nbsp;&nbsp;...
 }
 </pre>
 
@@ -71,7 +69,7 @@ static bool app_create(void *data)
 <li>Set the initialization callback.
 <p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface have been created.</p>
 <p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span> function.</p>
-<p>A Vertex Buffer Object (VBO) allows vertex array data to be stored in a high-performance graphics memory on the server, to maximize data transfer efficiency.</p>
+<p>A Vertex Buffer Object (VBO) allows vertex array data to be stored in a high-performance graphics memory on the server to maximize data transfer efficiency.</p>
 <p>A VBO is created in the application for the teapot vertices. Additionally, an Index Buffer Object (IBO) is created for the indices. The <span style="font-family: Courier New,Courier,monospace">glGenBuffers()</span> function specifies an array in which the buffer object name is stored.</p>
 <p>The <span style="font-family: Courier New,Courier,monospace">glBindBuffer()</span> function binds the buffer object to a specified target. In this case, the target is <span style="font-family: Courier New,Courier,monospace">GL_ARRAY_BUFFER</span>.</p>
 <p>The <span style="font-family: Courier New,Courier,monospace">glBufferData()</span> function is used to create a new data storage for the current buffer object. The parameters of the function are the buffer object target, the data store size, the array of teapot vertices, and the usage function of the data store (in this case, <span style="font-family: Courier New,Courier,monospace">GL_STATIC_DRAW</span>).</p>
@@ -79,11 +77,11 @@ static bool app_create(void *data)
 static void init_gl(Evas_Object *obj) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+
 &nbsp;&nbsp;&nbsp;if (!ad-&gt;initialized) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_shaders(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;idx_vbo);
@@ -105,10 +103,9 @@ static void init_gl(Evas_Object *obj)
 
 <li>Initialize the shaders:
 <ol type="a">
-	<li>Vertex and fragment shaders are created and compiled by passing shader parameters to the<span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.
-	<p>We should load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
+	<li>Vertex and fragment shaders are created and compiled by passing the shader parameters to the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.
+	<p>Load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
 	<pre class="prettyprint">
-	
 static void init_shaders(Evas_Object *obj) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
@@ -123,7 +120,7 @@ static void init_shaders(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
 &nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
 </pre></li>
-	<li>Once the shader objects are loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
+	<li>Once the shader objects have been loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
 	<pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
 &nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
@@ -133,7 +130,7 @@ static void init_shaders(Evas_Object *obj)
 </li>
 
 <li>Get the location for each attribute in the shader program using the <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> and <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> functions. If the shader program attributes, such as <span style="font-family: Courier New,Courier,monospace">u_mvpMatrix</span> and <span style="font-family: Courier New,Courier,monospace">a_position</span> are valid, these functions return an integer value that represents the index location of the attributes. For invalid attributes, the return value is -1.
-<p>The <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> retrieves the location of the uniform related to groups of vertices or pixels, such as model view matrix, projection matrix, or light position. The <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> retrieves the location of the attributes trelated to a vertex or pixel, such as position vector, normal vector, or vertex color.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> function retrieves the location of the uniform related to groups of vertices or pixels, such as the model view matrix, projection matrix, or light position. The <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> function retrieves the location of the attributes related to a vertex or pixel, such as position vector, normal vector, or vertex color.</p>
 <pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;ad-&gt;idx_light_dir = glGetUniformLocation(ad-&gt;program, &quot;u_light_dir&quot;);
 &nbsp;&nbsp;&nbsp;ad-&gt;idx_mvp = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMatrix&quot;);
@@ -170,12 +167,10 @@ static void resize_gl(Evas_Object *obj)
 <ol type="a">
 	<li>The <span style="font-family: Courier New,Courier,monospace">glViewport()</span> function specifies the affine transformation of the x and y values from normalized device coordinates to window coordinates as specified by the <span style="font-family: Courier New,Courier,monospace">elm_glview_size_get()</span> function.
 	<pre class="prettyprint">
-
 static void draw_gl(Evas_Object *obj) 
 {
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;ad-&gt;glview_w, &amp;ad-&gt;glview_h);
-&nbsp;&nbsp;&nbsp;...
+
 &nbsp;&nbsp;&nbsp;glViewport(0, 0, ad-&gt;glview_w, ad-&gt;glview_h);
 </pre>
 	</li>
@@ -186,7 +181,7 @@ static void draw_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;glUniform4fv(ad-&gt;idx_light_dir, 1, ad-&gt;light_dir);
 &nbsp;&nbsp;&nbsp;glUniformMatrix4fv(ad-&gt;idx_mvp, 1, GL_FALSE, ad-&gt;mvp);
 &nbsp;&nbsp;&nbsp;glUniform1f(ad-&gt;idx_time_stamp, ad-&gt;time_stamp);
-	</pre>
+</pre>
 	</li>
 	
 	<li>The <span style="font-family: Courier New,Courier,monospace">glVertexAttribPointer()</span> function is used to define an array of generic vertex attribute data. These attributes are parameters associated with each vertex of the teapot. In this case, they are position and normal.
@@ -201,14 +196,14 @@ static void draw_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(float) * 6, (void*) (sizeof(float) * 3));
 &nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_vnormal);
 &nbsp;&nbsp;&nbsp;glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ad-&gt;idx_ibo);
-	</pre>
+</pre>
 	</li>
 	
 	<li>Once the vertex arrays have been enabled, the actual process of rendering graphics primitives from the array data occurs using the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function.
 	<pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;glDrawElements(GL_TRIANGLES, MAX_F_COUNT * 3,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_UNSIGNED_SHORT, 0);
-	</pre>
+</pre>
 	</li>
 	
 	<li>The <span style="font-family: Courier New,Courier,monospace">glFlush()</span> function empties all buffers causing all issued commands to be executed as quickly as they are accepted by the rendering engine.
@@ -221,23 +216,22 @@ static void draw_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, 0);
 &nbsp;&nbsp;&nbsp;glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
 }
-	</pre>
+</pre>
 	</li></ol></li>
 
 <li>Add an animator.
-<p>The application regularly triggers the update of the GLView using the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</p>
+<p>The application regularly triggers an update of the GLView using the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</p>
 <pre class="prettyprint">
 static Eina_Bool anim(void *data) 
 {
 &nbsp;&nbsp;&nbsp;elm_glview_changed_set(data);
+
 &nbsp;&nbsp;&nbsp;return EINA_TRUE;
 }
 
 static bool app_create(void *data) 
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;ani = ecore_animator_add(anim, gl);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 }
 </pre>
 </li>	
diff --git a/org.tizen.sampledescriptions/html/mobile_n/gps_consumer_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/gps_consumer_sd_mn.htm
index 5e88fe1..8f1870b 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/gps_consumer_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/gps_consumer_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>GPS Consumer Sample Overview</h1> 
@@ -79,7 +79,7 @@ _msg_port_cb(int local_port_id, const char *remote_app_id, const char *remote_po
 &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;dlog_print(DLOG_INFO, LOG_TAG, (&quot;Received message from %s: satellites_count %s&quot;, remote_app_id, satellites_count_str);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Received message from %s: satellites_count %s&quot;, remote_app_id, satellites_count_str);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_satellites_update(satellites_count_str);
 &nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;else if (!strncmp(msg_type, MESSAGE_TYPE_POSITION_UPDATE, strlen(msg_type)))
@@ -89,7 +89,7 @@ _msg_port_cb(int local_port_id, const char *remote_app_id, const char *remote_po
 &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;dlog_print(DLOG_INFO, LOG_TAG, (&quot;Received message from %s: position data: %s %s&quot;, remote_app_id, latitude_str, longitude_str);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Received message from %s: position data: %s %s&quot;, remote_app_id, latitude_str, longitude_str);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_position_update(latitude_str, longitude_str);
 &nbsp;&nbsp;&nbsp;}
 }
@@ -193,7 +193,7 @@ _map_create(Evas_Object *parent)
 	  <p>The minimum zoom level with which the overlay is displayed is set with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_displayed_zoom_min_set()</span> function.</p>
       <pre class="prettyprint">
 // Create circle boundary
-dlog_print(DLOG_INFO, LOG_TAG, (&quot;Circle boundary overlay at %lf, %lf&quot;, circle_longitude, circle_latitude);
+dlog_print(DLOG_INFO, LOG_TAG, &quot;Circle boundary overlay at %lf, %lf&quot;, circle_longitude, circle_latitude);
 
 s_view_data.boundary_overlay = elm_map_overlay_circle_add(s_view_data.map, circle_longitude, circle_latitude, BOUNDARY_CIRCLE_RADIUS_REL);
 if (!s_view_data.boundary_overlay)
@@ -210,9 +210,9 @@ elm_map_overlay_displayed_zoom_min_set(s_view_data.boundary_overlay, ZOOM_LEVEL)
       <pre class="prettyprint">
 // Create location bounds - BOUNDARY_CIRCLE_RADIUS [m] circle with center defined by initial coordinates
 circle_coords.longitude = circle_longitude;
- circle_coords.latitude = circle_latitude;
+circle_coords.latitude = circle_latitude;
 
-dlog_print(DLOG_INFO, LOG_TAG, (&quot;center: %lf %lf, radius %lf&quot;, circle_coords.longitude, circle_coords.latitude, BOUNDARY_CIRCLE_RADIUS_M);
+dlog_print(DLOG_INFO, LOG_TAG, &quot;center: %lf %lf, radius %lf&quot;, circle_coords.longitude, circle_coords.latitude, BOUNDARY_CIRCLE_RADIUS_M);
 int ret = location_bounds_create_circle(circle_coords, BOUNDARY_CIRCLE_RADIUS_M, &amp;s_view_data.bounds);
 if (ret != LOCATIONS_ERROR_NONE)
 {
@@ -220,7 +220,7 @@ if (ret != LOCATIONS_ERROR_NONE)
 
 &nbsp;&nbsp;&nbsp;return;
 }
-dlog_print(DLOG_INFO, LOG_TAG, (&quot;Circle bounds created - %.1fm radius, center at %f, %f&quot;, BOUNDARY_CIRCLE_RADIUS_M, circle_coords.longitude, circle_coords.latitude);
+dlog_print(DLOG_INFO, LOG_TAG, &quot;Circle bounds created - %.1fm radius, center at %f, %f&quot;, BOUNDARY_CIRCLE_RADIUS_M, circle_coords.longitude, circle_coords.latitude);
       </pre></li>
     </ul>
 
@@ -295,4 +295,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.sampledescriptions/html/mobile_n/gps_service_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/gps_service_sd_mn.htm
index c568c71..cbcaef9 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/gps_service_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/gps_service_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>GPS Service Sample Overview</h1> 
@@ -274,7 +274,7 @@ _send_message(bundle *b)
 {
 &nbsp;&nbsp;&nbsp;if (!b) 
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Can not send message, the bundle is NULL&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Cannot send message, the bundle is NULL&quot;);
 		
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
 &nbsp;&nbsp;&nbsp;}
@@ -315,4 +315,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.sampledescriptions/html/mobile_n/hybridservice_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/hybridservice_sd_mn.htm
index 2d65388..9431fd0 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/hybridservice_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/hybridservice_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>HybridServiceApp Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/lockscreen_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/lockscreen_sd_mn.htm
index 5e699d3..01b0e1b 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/lockscreen_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/lockscreen_sd_mn.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
   <h1>Lockscreen Sample Overview</h1>
 
@@ -42,6 +42,21 @@
  
 <p>To make this application work, the user must select it as a default lockscreen through the Settings menu.</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/keymanager</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/display</span></li>
+</ul>
+<p>This application also has a special <span style="font-family: Courier New,Courier,monospace">category</span> attribute set in the <span style="font-family: Courier New,Courier,monospace">tizen-mainfest.xml</span> file:</p>
+<pre class="prettyprint">
+&lt;ui-application appid=&quot;packageName&quot; auto-restart=&quot;true&quot; exec=&quot;appName&quot; multiple=&quot;false&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodisplay=&quot;true&quot; on-boot=&quot;true&quot; taskmanage=&quot;false&quot; type=&quot;capp&quot;>
+&nbsp;&nbsp;&nbsp;&lt;!--Common application attributes--&gt;
+&nbsp;&nbsp;&nbsp;&lt;category name=&quot;http://tizen.org/category/lockapp&quot;/>
+&lt;/ui-application>
+</pre>
+
  <h2>Implementation</h2>
 <p>The application follows the MVC pattern. Aside from the standard native application module with the <span style="font-family: Courier New,Courier,monospace">main()</span> function, it consists of the following components:</p>
 <ul>
@@ -50,7 +65,7 @@
 <li><span style="font-family: Courier New,Courier,monospace">main_window.c</span>, <span style="font-family: Courier New,Courier,monospace">lock.c</span>, and <span style="font-family: Courier New,Courier,monospace">swipe_lock.c</span> modules serving as views</li>
 </ul>
 
-<p>The application initialization takes place with the <span style="font-family: Courier New,Courier,monospace">controller_application_start()</span> function. This function creates the main window and sets the current lock type based on user preferences. It also sets the current lockscreen background. But most of all, it registers callbacks for the following events:</p>
+<p>The application initialization takes place with the <span style="font-family: Courier New,Courier,monospace">start_application()</span> function. This function creates the main window and sets the current lock type based on user preferences. It also sets the current lockscreen background. But most of all, it registers callbacks for the following events:</p>
 <ul>
 <li>Successful unlock using swipe gesture</li>
 <li>Lockscreen background change (using the Settings application)</li>
@@ -59,22 +74,22 @@
 
 <pre class="prettyprint">
 bool
-controller_application_start(void)
+start_application(void)
 {
-&nbsp;&nbsp;&nbsp;if (!main_window_create())
+&nbsp;&nbsp;&nbsp;if (!create_main_window())
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
 &nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;current_lock_set();
+&nbsp;&nbsp;&nbsp;__set_current_lock();
 &nbsp;&nbsp;&nbsp;// Add a controller swipe callback to the main window
-&nbsp;&nbsp;&nbsp;main_window_callbacks_add(swipe_unlocked_cb);
+&nbsp;&nbsp;&nbsp;add_main_window_callbacks(__swipe_unlocked_cb);
 &nbsp;&nbsp;&nbsp;// Add a lockscreen background image change callback, the image is selected in Settings application
-&nbsp;&nbsp;&nbsp;wallpaper_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, NULL)
+&nbsp;&nbsp;&nbsp;__wallpaper_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, NULL)
 &nbsp;&nbsp;&nbsp;// Add a callback for the background change (also changed using the Settings application)
-&nbsp;&nbsp;&nbsp;system_settings_set_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, wallpaper_changed_cb, NULL);
+&nbsp;&nbsp;&nbsp;system_settings_set_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, __wallpaper_changed_cb, NULL);
 &nbsp;&nbsp;&nbsp;// Add a callback to listen to LCD on/off events
-&nbsp;&nbsp;&nbsp;device_add_callback(DEVICE_CALLBACK_DISPLAY_STATE, device_cb, NULL);
+&nbsp;&nbsp;&nbsp;device_add_callback(DEVICE_CALLBACK_DISPLAY_STATE, __device_cb, NULL);
 
 &nbsp;&nbsp;&nbsp;return true;
 }
@@ -84,51 +99,51 @@ controller_application_start(void)
 
 <p>To activate the lockscreen:</p>
 
-<ol><li>Each time the LCD display is switched on, the currently selected lock type is activated through the <span style="font-family: Courier New,Courier,monospace">device_cb()</span> callback function:
+<ol><li>Each time the LCD display is switched on, the currently selected lock type is activated through the <span style="font-family: Courier New,Courier,monospace">__device_cb()</span> callback function:
 
 <pre class="prettyprint">
 static void
-device_cb(device_callback_e type, void *value, void *user_data)
+__device_cb(device_callback_e type, void *value, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;switch ((display_state_e)value)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case DISPLAY_STATE_NORMAL:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current_lock_set();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__set_current_lock();
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case DISPLAY_STATE_SCREEN_DIM:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case DISPLAY_STATE_SCREEN_OFF:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current_lock_set();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__set_current_lock();
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;}
 }
 </pre></li>
 
-<li>The <span style="font-family: Courier New,Courier,monospace">settings_get_lock_type()</span> model function is used to obtain the current lock type. 
+<li>The <span style="font-family: Courier New,Courier,monospace">get_lock_type()</span> model function is used to obtain the current lock type. 
 <p>With this sample application, you can add other types of lock implementations of your own. To do that, modify the <span style="font-family: Courier New,Courier,monospace">lockscreen_type_t</span> enumeration type.</p>
 <pre class="prettyprint">
 static void
-current_lock_set(void)
+__set_current_lock(void)
 {
 &nbsp;&nbsp;&nbsp;switch(settings_get_lock_type())
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case LOCKSCREEN_NONE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_window_swipe_lock_deactivate();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deactivate_main_window_swipe_lock();
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case LOCKSCREEN_SWIPE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_window_swipe_lock_activate();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;activate_main_window_swipe_lock();
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;}
 }
 </pre></li>
-<li>The user interface is created with the <span style="font-family: Courier New,Courier,monospace">main_window_create()</span> function. It consists of a background and a swipe lock view.
+<li>The user interface is created with the <span style="font-family: Courier New,Courier,monospace">create_main_window()</span> function. It consists of a background and a swipe lock view.
 <pre class="prettyprint">
 bool
-main_window_create(void)
+create_main_window(void)
 {
 &nbsp;&nbsp;&nbsp;s_main_window_data.win = elm_win_add(NULL, PACKAGE, ELM_WIN_DOCK);
 
@@ -139,11 +154,11 @@ main_window_create(void)
 &nbsp;&nbsp;&nbsp;// Default alpha is 0
 &nbsp;&nbsp;&nbsp;elm_win_alpha_set(s_main_window_data.win, EINA_TRUE);
 
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(s_main_window_data.win, &quot;delete,request&quot;, delete_cb, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(s_main_window_data.win, &quot;delete,request&quot;, __delete_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;if (!background_create(s_main_window_data.screen_width, s_main_window_data.screen_height) ||
+&nbsp;&nbsp;&nbsp;if (!__create_background(s_main_window_data.screen_width, s_main_window_data.screen_height) ||
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create the swipe lock to cover the entire window
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!swipe_create(s_main_window_data.screen_width, s_main_window_data.screen_height))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!__create_swipe(s_main_window_data.screen_width, s_main_window_data.screen_height)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
 &nbsp;&nbsp;&nbsp;}
@@ -159,30 +174,30 @@ main_window_create(void)
 
 <p>To unlock the device:</p>
 
-<ol><li>The controller module uses the <span style="font-family: Courier New,Courier,monospace">main_window_callbacks_add()</span> function to register its callbacks for the user interface. Consequently, the module is notified whenever the user successfully unlocks the device with a swipe gesture, and the <span style="font-family: Courier New,Courier,monospace">swipe_unlocked_cb()</span> function is invoked.
+<ol><li>The controller module uses the <span style="font-family: Courier New,Courier,monospace">add_main_window_callbacks()</span> function to register its callbacks for the user interface. Consequently, the module is notified whenever the user successfully unlocks the device with a swipe gesture, and the <span style="font-family: Courier New,Courier,monospace">__swipe_unlocked_cb()</span> function is invoked.
 
 <pre class="prettyprint">
 void
-main_window_callbacks_add(swipe_unlock_cb unlock_cb)
+add_main_window_callbacks(swipe_unlock_cb unlock_cb)
 {
 &nbsp;&nbsp;&nbsp;if (!s_main_window_data.swipe_unlock_cb || unlock_cb)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipe_lock_callbacks_add(s_main_window_data.swipe_lock, swipe_drag_cb, swipe_drag_end_cb);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_add_swipe_lock_callbacks(s_main_window_data.swipe_lock, __swipe_drag_cb, __swipe_drag_end_cb);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_main_window_data.swipe_unlock_cb = unlock_cb;
 &nbsp;&nbsp;&nbsp;}
 }
 
 static void
-swipe_unlocked_cb(void)
+__swipe_unlocked_cb(void)
 {
-&nbsp;&nbsp;&nbsp;main_window_lock_deactivate();
+&nbsp;&nbsp;&nbsp;deactivate_main_window_swipe_lock();
 }
 </pre></li>
 
-<li>After a successful swipe, the swipe lock is deactivated using the <span style="font-family: Courier New,Courier,monospace">main_window_swipe_lock_deactivate()</span> function:
+<li>After a successful swipe, the swipe lock is deactivated using the <span style="font-family: Courier New,Courier,monospace">deactivate_main_window_swipe_lock()</span> function:
 <pre class="prettyprint">
 void
-main_window_swipe_lock_deactivate(void)
+deactivate_main_window_swipe_lock(void)
 {
 &nbsp;&nbsp;&nbsp;// Hide the swipe lock UI object
 &nbsp;&nbsp;&nbsp;evas_object_hide(s_main_window_data.swipe_lock);
@@ -193,17 +208,19 @@ main_window_swipe_lock_deactivate(void)
 
  <h3>Creating the Lockscreen View</h3>
 
-<p>The swipe lock view is created as the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> in the <span style="font-family: Courier New,Courier,monospace">lock_create()</span> function (called from the <span style="font-family: Courier New,Courier,monospace">swipe_lock_create()</span> function). One of its parameters is the layout <span style="font-family: Courier New,Courier,monospace">edj</span> file name.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">lock_create()</span> function
+<p>The swipe lock view is created as the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> in the <span style="font-family: Courier New,Courier,monospace">_create_lock()</span> function (called from the <span style="font-family: Courier New,Courier,monospace">_create_swipe_lock()</span> function). One of its parameters is the layout <span style="font-family: Courier New,Courier,monospace">edj</span> file name.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">_create_lock()</span> function
 associates the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> with the EDJE.</p>
 <pre class="prettyprint">
-Evas_Object * lock_create(Evas_Object * parent, const char *edje_file_name)
+Evas_Object *_create_lock(Evas_Object *parent, const char *edje_file_name)
 {
 &nbsp;&nbsp;&nbsp;char layout_file_full_path[PATH_MAX] = {0,};
 
 &nbsp;&nbsp;&nbsp;Evas_Object *lock = elm_layout_add(parent);
 
-&nbsp;&nbsp;&nbsp;// Error handling and layout file path obtaining
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;compile_resource_path(edje_file_name, layout_file_full_path);
 
 &nbsp;&nbsp;&nbsp;if (!elm_layout_file_set(lock, layout_file_full_path, LOCK_MAIN_GROUP))
 &nbsp;&nbsp;&nbsp;{
@@ -214,9 +231,9 @@ Evas_Object * lock_create(Evas_Object * parent, const char *edje_file_name)
 }
 
 Evas_Object *
-swipe_lock_create(Evas_Object * parent)
+_create_swipe_lock(Evas_Object *parent)
 {
-&nbsp;&nbsp;&nbsp;return lock_create(parent, SWIPE_LOCK_EDJ_FILE_NAME);
+&nbsp;&nbsp;&nbsp;return _create_lock(parent, SWIPE_LOCK_EDJ_FILE_NAME);
 }
 </pre>
 
@@ -314,7 +331,7 @@ collections
 
 <pre class="prettyprint">
 void
-swipe_lock_drag_reset(Evas_Object *swipe_lock)
+_reset_swipe_lock_drag(Evas_Object *swipe_lock)
 {
 &nbsp;&nbsp;&nbsp;elm_layout_signal_emit(swipe_lock, SWIPE_RESET_SIGNAL, SWIPE_RESET_SIGNAL_SOURCE);
 }
diff --git a/org.tizen.sampledescriptions/html/mobile_n/mediaapp_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/mediaapp_sd_mn.htm
index 3581368..7ffd6ac 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/mediaapp_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/mediaapp_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>Media App Sample Overview</h1> 
@@ -95,7 +95,8 @@
 <p>This view allows the user to decode, change the scale, and convert the pixel format of images and fit them to the display. Internally, when the resize slider is changed and released, the <span style="font-family: Courier New,Courier,monospace;">_slider_drag_stop_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">update_scale</span> method is executed:</p>
 
 <pre class="prettyprint">
-static void _update_scale(image_viewer_view *view)
+static void 
+_update_scale(image_viewer_view *view)
 {
 &nbsp;&nbsp;&nbsp;RETM_IF(NULL == view, &quot;view is NULL&quot;);
 &nbsp;&nbsp;&nbsp;Evas_Object *evas_image = elm_image_object_get(view-&gt;image);
@@ -120,7 +121,9 @@ static void _update_scale(image_viewer_view *view)
 <p>This view allows the user to transform a source image into a new image with a different pixel format and size. Internally, when the <strong>Change pixel format</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_change_format</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">_process</span> method executed:</p>
 
 <pre class="prettyprint">
-int image_sample_util_resize(const int src_w, const int src_h, const uchar *src, const int dest_w, const int dest_h,  uchar *dest)
+int 
+image_sample_util_resize(const int src_w, const int src_h, const uchar *src, 
+&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 int dest_w, const int dest_h,  uchar *dest)
 {
 &nbsp;&nbsp;&nbsp;if (src_w &lt;= 0 || src_h &lt;= 0 || !src || dest_w &lt;= 0 || dest_h &lt;= 0 || !dest)
 &nbsp;&nbsp;&nbsp;{
@@ -203,10 +206,12 @@ int image_sample_util_resize(const int src_w, const int src_h, const uchar *src,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| ((u_int32_t) green &lt;&lt; 8) | (blue);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
+
 &nbsp;&nbsp;&nbsp;return IMAGE_UTIL_ERROR_NONE;
 }
 
-static bool _process(image_converter_view *view, double scale)
+static bool 
+_process(image_converter_view *view, double scale)
 {
 &nbsp;&nbsp;&nbsp;RETVM_IF(NULL == view, false, &quot;view is NULL&quot;);
 &nbsp;&nbsp;&nbsp;RETVM_IF(NULL == view-&gt;image_source, false, &quot;view is NULL&quot;);
@@ -228,13 +233,13 @@ static bool _process(image_converter_view *view, double scale)
 &nbsp;&nbsp;&nbsp;void* src_buff = evas_object_image_data_get(source_eo, EINA_FALSE);
 &nbsp;&nbsp;&nbsp;RETVM_IF(NULL == src_buff, false, &quot;image_util_calculate_buffer_size error&quot;);
 
-&nbsp;&nbsp;&nbsp;error = image_util_calculate_buffer_size(dest_width , dest_height, IMAGE_UTIL_COLORSPACE_BGRA8888, &amp;dest_size);
+&nbsp;&nbsp;&nbsp;error = image_util_calculate_buffer_size(dest_width, dest_height, IMAGE_UTIL_COLORSPACE_BGRA8888, &amp;dest_size);
 &nbsp;&nbsp;&nbsp;RETVM_IF(IMAGE_UTIL_ERROR_NONE != error, false, &quot;image_util_calculate_buffer_size error&quot;);
 
 &nbsp;&nbsp;&nbsp;dest_buff = malloc(dest_size);
 &nbsp;&nbsp;&nbsp;RETVM_IF(NULL == dest_buff, false, &quot;malloc destination buffer error %d&quot;, dest_size);
 
-&nbsp;&nbsp;&nbsp;error = image_sample_util_resize(w, h, src_buff, dest_width , dest_height, dest_buff);
+&nbsp;&nbsp;&nbsp;error = image_sample_util_resize(w, h, src_buff, dest_width, dest_height, dest_buff);
 &nbsp;&nbsp;&nbsp;if (IMAGE_UTIL_ERROR_NONE == error)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object* im = evas_object_image_filled_add(evas_object_evas_get(view-&gt;layout));
@@ -246,7 +251,8 @@ static bool _process(image_converter_view *view, double scale)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_data_copy_set(im, dest_buff);
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char output_buf[PATH_MAX] = {&#39;\0&#39;};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(output_buf, PATH_MAX, &quot;%s%s%s.%s&quot;, get_resource_path(&quot;&quot;), IMAGE_OUTPUT_DIR, image_names[view-&gt;image_id], image_file_format_to_str(converted_formats[view-&gt;convert_format_ind]));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(output_buf, PATH_MAX, &quot;%s%s%s.%s&quot;, get_resource_path(&quot;&quot;), IMAGE_OUTPUT_DIR, image_names[view-&gt;image_id], 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_file_format_to_str(converted_formats[view-&gt;convert_format_ind]));
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (EINA_FALSE == evas_object_image_save(im, output_buf, NULL, NULL))
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ERR(&quot;evas_object_image_save error&quot;);
@@ -279,7 +285,8 @@ static bool _process(image_converter_view *view, double scale)
 <p>This view displays GIF images, and allows the user to change the pixel format. Internally, when the <strong>Next</strong> or <strong>Prev</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_toolbar_button_clicked_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">_change_image</span> method is executed:</p>
 
 <pre class="prettyprint">
-static void _change_image(gif_viewer_view *this, bool to_next)
+static void 
+_change_image(gif_viewer_view *this, bool to_next)
 {
 &nbsp;&nbsp;&nbsp;RETM_IF(NULL == this, &quot;this is NULL&quot;);
 &nbsp;&nbsp;&nbsp;unsigned int image_id = this-&gt;image_id;
@@ -313,7 +320,8 @@ static void _change_image(gif_viewer_view *this, bool to_next)
 <p>This view allows the user to flip and rotate images. Internally, when the <strong>Flip</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_on_button_flip_clicked_cb</span> callback is called:</p>
 
 <pre class="prettyprint">
-static void _on_button_rotate_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+static void 
+_on_button_rotate_clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;RETM_IF(NULL == data, &quot;data is NULL&quot;);
 &nbsp;&nbsp;&nbsp;image_flip_rotate_view *view = data;
@@ -339,7 +347,8 @@ static void _on_button_rotate_clicked_cb(void *data, Evas_Object *obj, void *eve
 <p>This view allows the user to change the image size. Internally, when the resize slider is changed, the <span style="font-family: Courier New,Courier,monospace;">_slider_drag_stop_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">_update_scale</span> method is executed:</p>
 
 <pre class="prettyprint">
-static void _update_scale(image_resize_view *view)
+static void 
+_update_scale(image_resize_view *view)
 {
 &nbsp;&nbsp;&nbsp;RETM_IF(NULL == view, &quot;view is NULL&quot;);
 &nbsp;&nbsp;&nbsp;Evas_Object *evas_image = elm_image_object_get(view-&gt;image);
@@ -363,7 +372,8 @@ static void _update_scale(image_resize_view *view)
 <p>This view allows the user to change the image pixel format (RGB32, RGB16, YUV420, or YUV422). Internally, when the <strong>Change pixel format</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_toolbar_button_clicked_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">_process_colorspace_convert</span> method is executed:</p>
 
 <pre class="prettyprint">
-static bool _process_colorspace_convert(color_converter_view *view)
+static bool 
+_process_colorspace_convert(color_converter_view *view)
 {
 &nbsp;&nbsp;&nbsp;long long time_begin = get_ticks();
 &nbsp;&nbsp;&nbsp;RETVM_IF(NULL == view, false, &quot;view is NULL&quot;);
@@ -385,7 +395,7 @@ static bool _process_colorspace_convert(color_converter_view *view)
 &nbsp;&nbsp;&nbsp;image_util_colorspace_e dest_colorspace = colorspaces[view-&gt;color_id_to];
 &nbsp;&nbsp;&nbsp;int error = IMAGE_UTIL_ERROR_NONE;
 &nbsp;&nbsp;&nbsp;unsigned int dest_size = 0;
-&nbsp;&nbsp;&nbsp;error = image_util_calculate_buffer_size(w , h, dest_colorspace, &amp;dest_size);
+&nbsp;&nbsp;&nbsp;error = image_util_calculate_buffer_size(w, h, dest_colorspace, &amp;dest_size);
 &nbsp;&nbsp;&nbsp;RETVM_IF(IMAGE_UTIL_ERROR_NONE != error, false, &quot;image_util_calculate_buffer_size error&quot;);
 
 &nbsp;&nbsp;&nbsp;view-&gt;decoded_buffer = malloc(dest_size);
@@ -405,26 +415,31 @@ static bool _process_colorspace_convert(color_converter_view *view)
 <p>This view allows the user to extract frames from the input video stream. Internally, when the frame slider is changed, the <span style="font-family: Courier New,Courier,monospace;">_sliderbar_changed_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">frame_extractor_frame_get</span> method is executed:</p>
 
 <pre class="prettyprint">
-static inline rgb16 bgra_to_rgb(const bgra32 src)
+static inline rgb16
+bgra_to_rgb(const bgra32 src)
 {
 &nbsp;&nbsp;&nbsp;rgb16 result = (rgb16)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;( ((src.r &gt;&gt; (RGB32_CHANEL_BIT_SIZE - RGB16_R_SIZE)) &lt;&lt; RGB16_R_SHIFT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(((src.r &gt;&gt; (RGB32_CHANEL_BIT_SIZE - RGB16_R_SIZE)) &lt;&lt; RGB16_R_SHIFT)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| ((src.g &gt;&gt; (RGB32_CHANEL_BIT_SIZE - RGB16_G_SIZE)) &lt;&lt; RGB16_G_SHIFT)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| ((src.b &gt;&gt; (RGB32_CHANEL_BIT_SIZE - RGB16_B_SIZE)) &lt;&lt; RGB16_B_SHIFT));
+
 &nbsp;&nbsp;&nbsp;return result;
 }
 
-static inline bgra32 rgb_to_bgra(const rgb16 src)
+static inline bgra32
+rgb_to_bgra(const rgb16 src)
 {
 &nbsp;&nbsp;&nbsp;bgra32 result = {};
-&nbsp;&nbsp;&nbsp;result.r = (uchar)( src &gt;&gt; RGB16_R_SHIFT) &lt;&lt; (RGB32_CHANEL_BIT_SIZE - RGB16_R_SIZE);
-&nbsp;&nbsp;&nbsp;result.g = (uchar)( src &gt;&gt; RGB16_G_SHIFT) &lt;&lt; (RGB32_CHANEL_BIT_SIZE - RGB16_G_SIZE);
-&nbsp;&nbsp;&nbsp;result.b = (uchar)( src &gt;&gt; RGB16_B_SHIFT) &lt;&lt; (RGB32_CHANEL_BIT_SIZE - RGB16_B_SIZE);
+&nbsp;&nbsp;&nbsp;result.r = (uchar)(src &gt;&gt; RGB16_R_SHIFT) &lt;&lt; (RGB32_CHANEL_BIT_SIZE - RGB16_R_SIZE);
+&nbsp;&nbsp;&nbsp;result.g = (uchar)(src &gt;&gt; RGB16_G_SHIFT) &lt;&lt; (RGB32_CHANEL_BIT_SIZE - RGB16_G_SIZE);
+&nbsp;&nbsp;&nbsp;result.b = (uchar)(src &gt;&gt; RGB16_B_SHIFT) &lt;&lt; (RGB32_CHANEL_BIT_SIZE - RGB16_B_SIZE);
 &nbsp;&nbsp;&nbsp;result.a = RGB32_DEFAULT_ALPHA;
+
 &nbsp;&nbsp;&nbsp;return result;
 }
 
-static uchar clamp(int x)
+static uchar 
+clamp(int x)
 {
 &nbsp;&nbsp;&nbsp;if (x &gt; 255)
 &nbsp;&nbsp;&nbsp;{
@@ -434,42 +449,50 @@ static uchar clamp(int x)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x = 0;
 &nbsp;&nbsp;&nbsp;}
+
 &nbsp;&nbsp;&nbsp;return x;
 }
 
-static inline uchar bgra_to_yuv_y(const bgra32 src)
+static inline uchar
+bgra_to_yuv_y(const bgra32 src)
 {
 &nbsp;&nbsp;&nbsp;return ((66*src.r + 129*src.g + 25*src.b) &gt;&gt; 8) + 16;
 }
 
-static inline uchar bgra_to_yuv_u(const bgra32 src)
+static inline uchar
+bgra_to_yuv_u(const bgra32 src)
 {
 &nbsp;&nbsp;&nbsp;return ((-38*src.r + -74*src.g + 112*src.b) &gt;&gt; 8) + 128;
 }
 
-static inline uchar bgra_to_yuv_v(const bgra32 src)
+static inline uchar 
+bgra_to_yuv_v(const bgra32 src)
 {
 &nbsp;&nbsp;&nbsp;return ((112*src.r + -94*src.g + -18*src.b) &gt;&gt; 8) + 128;
 }
 
-static inline uchar yuv_to_r(const uchar yuv_y, const uchar yuv_u, const uchar yuv_v)
+static inline uchar 
+yuv_to_r(const uchar yuv_y, const uchar yuv_u, const uchar yuv_v)
 {
 &nbsp;&nbsp;&nbsp;return clamp(yuv_y + 1.402 * (yuv_v - 128));
 }
 
-static inline uchar yuv_to_g(const uchar yuv_y, const uchar yuv_u, const uchar yuv_v)
+static inline uchar 
+yuv_to_g(const uchar yuv_y, const uchar yuv_u, const uchar yuv_v)
 {
 &nbsp;&nbsp;&nbsp;return clamp(yuv_y - 0.344 * (yuv_u - 128) - 0.714 * (yuv_v - 128));
 }
 
-static inline uchar yuv_to_b(const uchar yuv_y, const uchar yuv_u, const uchar yuv_v)
+static inline uchar 
+yuv_to_b(const uchar yuv_y, const uchar yuv_u, const uchar yuv_v)
 {
 &nbsp;&nbsp;&nbsp;return clamp(yuv_y + 1.772 * (yuv_u - 128));
 }
 
-static void _convert_bgra8888_to_yuv420( uchar *dest, const uchar *src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int width, const int height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int d_size, const int s_size)
+static void 
+_convert_bgra8888_to_yuv420(uchar *dest, const uchar *src,
+&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 int width, const int height,
+&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 int d_size, const int s_size)
 {
 &nbsp;&nbsp;&nbsp;unsigned int src_stride = (s_size / height);
 &nbsp;&nbsp;&nbsp;unsigned int pix_count = width * height;
@@ -477,15 +500,15 @@ static void _convert_bgra8888_to_yuv420( uchar *dest, const uchar *src,
 &nbsp;&nbsp;&nbsp;unsigned int vpos = upos + upos / 4;
 
 &nbsp;&nbsp;&nbsp;unsigned int y;
-&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; height; ++y )
+&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; height; ++y)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const bgra32* src_pixel = (const bgra32*)&nbsp;&amp;(src[y * src_stride]);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int dest_line_pos = width * y;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if( !(y % 2) )
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!(y % 2))
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; width; x += 2 )
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; width; x += 2)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bgra32 pixel = src_pixel[x];
 
@@ -502,15 +525,16 @@ static void _convert_bgra8888_to_yuv420( uchar *dest, const uchar *src,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int x;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; width; ++x)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[dest_line_pos + x] = bgra_to_yuv_y( src_pixel[x] );
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[dest_line_pos + x] = bgra_to_yuv_y(src_pixel[x]);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void _convert_bgra8888_to_rgb565( uchar *dest, const uchar *src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int width, const int height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int d_size, const int s_size)
+static void 
+_convert_bgra8888_to_rgb565(uchar *dest, const uchar *src,
+&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 int width, const int height,
+&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 int d_size, const int s_size)
 {
 &nbsp;&nbsp;&nbsp;unsigned int src_stride = (s_size / height);
 &nbsp;&nbsp;&nbsp;unsigned int dest_stride = (d_size / height);
@@ -523,14 +547,15 @@ static void _convert_bgra8888_to_rgb565( uchar *dest, const uchar *src,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int x;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x&nbsp;&lt; width; ++x)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest_pixel[x] = bgra_to_rgb( src_pixel[x]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest_pixel[x] = bgra_to_rgb(src_pixel[x]);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void _convert_rgb565_to_yuv420( uchar *dest, const uchar *src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int width, const int height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int d_size, const int s_size)
+static void 
+_convert_rgb565_to_yuv420(uchar *dest, const uchar *src,
+&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 int width, const int height,
+&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 int d_size, const int s_size)
 {
 &nbsp;&nbsp;&nbsp;unsigned int src_stride = (s_size / height);
 &nbsp;&nbsp;&nbsp;unsigned int pix_count = width * height;
@@ -538,41 +563,42 @@ static void _convert_rgb565_to_yuv420( uchar *dest, const uchar *src,
 &nbsp;&nbsp;&nbsp;unsigned int vpos = upos + upos / 4;
 
 &nbsp;&nbsp;&nbsp;unsigned int y;
-&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; height; ++y )
+&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; height; ++y)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const rgb16* src_pixel = (const rgb16*)&nbsp;&amp;(src[y * src_stride]);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int dest_line_pos = width * y;
 
-&nbsp;&nbsp;&nbsp;if ( !(y % 2) )
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; width; x += 2 )
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!(y % 2))
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bgra32 pixel = rgb_to_bgra(src_pixel[x]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; width; x += 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bgra32 pixel = rgb_to_bgra(src_pixel[x]);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[dest_line_pos + x] = bgra_to_yuv_y(pixel);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[upos++] = bgra_to_yuv_u(pixel);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[vpos++] = bgra_to_yuv_v(pixel);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[dest_line_pos + x] = bgra_to_yuv_y(pixel);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[upos++] = bgra_to_yuv_u(pixel);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[vpos++] = bgra_to_yuv_v(pixel);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pixel = rgb_to_bgra(src_pixel[x + 1]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[dest_line_pos + x + 1] = bgra_to_yuv_y(pixel);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pixel = rgb_to_bgra(src_pixel[x + 1]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[dest_line_pos + x + 1] = bgra_to_yuv_y(pixel);
+&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;unsigned int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; width; ++x)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bgra32 pixel = rgb_to_bgra(src_pixel[x]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[dest_line_pos + x] = bgra_to_yuv_y(pixel);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; width; ++x)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bgra32 pixel = rgb_to_bgra(src_pixel[x]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest[dest_line_pos + x] = bgra_to_yuv_y(pixel);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
 }
 
-static void _convert_rgb565_to_bgra8888( uchar *dest, const uchar *src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int width, const int height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int d_size, const int s_size)
+static void 
+_convert_rgb565_to_bgra8888(uchar *dest, const uchar *src,
+&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 int width, const int height,
+&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 int d_size, const int s_size)
 {
 &nbsp;&nbsp;&nbsp;unsigned int src_stride = (s_size / height);
 &nbsp;&nbsp;&nbsp;unsigned int dest_stride = (d_size / height);
@@ -585,14 +611,15 @@ static void _convert_rgb565_to_bgra8888( uchar *dest, const uchar *src,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int x;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; width; ++x)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest_pixel[x] = rgb_to_bgra( src_pixel[x]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest_pixel[x] = rgb_to_bgra(src_pixel[x]);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void _convert_yuv420_to_rgb565( uchar *dest, const uchar *src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int width, const int height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int d_size, const int s_size)
+static void 
+_convert_yuv420_to_rgb565(uchar *dest, const uchar *src,
+&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 int width, const int height,
+&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 int d_size, const int s_size)
 {
 &nbsp;&nbsp;&nbsp;unsigned int pix_count = width * height;
 &nbsp;&nbsp;&nbsp;unsigned int dest_stride = (d_size / height);
@@ -609,16 +636,17 @@ static void _convert_yuv420_to_rgb565( uchar *dest, const uchar *src,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uchar yuv_v = src[ (int)(pix_count*1.25 + (y/2)*(width/2) + x/2)];
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dest_pixel[x] =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;( ( yuv_to_r(yuv_y, yuv_u, yuv_v) &gt;&gt; (RGB32_CHANEL_BIT_SIZE - RGB16_R_SIZE)) &lt;&lt; RGB16_R_SHIFT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;((yuv_to_r(yuv_y, yuv_u, yuv_v) &gt;&gt; (RGB32_CHANEL_BIT_SIZE - RGB16_R_SIZE)) &lt;&lt; RGB16_R_SHIFT)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| ((yuv_to_g(yuv_y, yuv_u, yuv_v) &gt;&gt; (RGB32_CHANEL_BIT_SIZE - RGB16_G_SIZE)) &lt;&lt; RGB16_G_SHIFT)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| ((yuv_to_b(yuv_y, yuv_u, yuv_v) &gt;&gt; (RGB32_CHANEL_BIT_SIZE - RGB16_B_SIZE)) &lt;&lt; RGB16_B_SHIFT);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void _convert_yuv420_to_bgra8888( uchar *dest, const uchar *src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int width, const int height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int d_size, const int s_size)
+static void 
+_convert_yuv420_to_bgra8888(uchar *dest, const uchar *src,
+&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 int width, const int height,
+&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 int d_size, const int s_size)
 {
 &nbsp;&nbsp;&nbsp;unsigned int pix_count = width * height;
 &nbsp;&nbsp;&nbsp;unsigned int dest_stride = (d_size / height);
@@ -642,9 +670,10 @@ static void _convert_yuv420_to_bgra8888( uchar *dest, const uchar *src,
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void _convert_yuv422_to_bgra8888( uchar *dest, const uchar *src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int width, const int height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int d_size, const int s_size)
+static void 
+_convert_yuv422_to_bgra8888(uchar *dest, const uchar *src,
+&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 int width, const int height,
+&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 int d_size, const int s_size)
 {
 &nbsp;&nbsp;&nbsp;unsigned int dest_stride = (d_size / height);
 &nbsp;&nbsp;&nbsp;uchar yuv_u, yuv_v, yuv_y1, yuv_y2;
@@ -675,9 +704,10 @@ static void _convert_yuv422_to_bgra8888( uchar *dest, const uchar *src,
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void _convert_rgb888_to_bgra8888( uchar *dest, const uchar *src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int width, const int height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int d_size, const int s_size)
+static void 
+_convert_rgb888_to_bgra8888(uchar *dest, const uchar *src,
+&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 int width, const int height,
+&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 int d_size, const int s_size)
 {
 &nbsp;&nbsp;&nbsp;unsigned int src_stride = (s_size / height);
 &nbsp;&nbsp;&nbsp;unsigned int dest_stride = (d_size / height);
@@ -698,23 +728,24 @@ static void _convert_rgb888_to_bgra8888( uchar *dest, const uchar *src,
 &nbsp;&nbsp;&nbsp;}
 }
 
-int image_sample_util_convert_colorspace( uchar *dest , image_util_colorspace_e dest_colorspace,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const uchar *src , int width, int height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_util_colorspace_e src_colorspace)
+int 
+image_sample_util_convert_colorspace(uchar *dest, image_util_colorspace_e dest_colorspace,
+&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;const uchar *src, int width, int height,
+&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;image_util_colorspace_e src_colorspace)
 {
-&nbsp;&nbsp;&nbsp;RETVM_IF(NULL == src, IMAGE_UTIL_ERROR_INVALID_PARAMETER, "source buffer in NULL");
-&nbsp;&nbsp;&nbsp;RETVM_IF(NULL == dest, IMAGE_UTIL_ERROR_INVALID_PARAMETER, "destination buffer in NULL");
-&nbsp;&nbsp;&nbsp;RETVM_IF(width &lt;= 0 || height &lt;= 0, IMAGE_UTIL_ERROR_INVALID_PARAMETER, "width or heightis incorrect");
+&nbsp;&nbsp;&nbsp;RETVM_IF(NULL == src, IMAGE_UTIL_ERROR_INVALID_PARAMETER, &quot;source buffer in NULL&quot;);
+&nbsp;&nbsp;&nbsp;RETVM_IF(NULL == dest, IMAGE_UTIL_ERROR_INVALID_PARAMETER, &quot;destination buffer in NULL&quot;);
+&nbsp;&nbsp;&nbsp;RETVM_IF(width &lt;= 0 || height &lt;= 0, IMAGE_UTIL_ERROR_INVALID_PARAMETER, &quot;width or heightis incorrect&quot;);
 &nbsp;&nbsp;&nbsp;int error = IMAGE_UTIL_ERROR_NONE;
 
-
 &nbsp;&nbsp;&nbsp;if (IMAGE_UTIL_COLORSPACE_BGRA8888 != src_colorspace
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; IMAGE_UTIL_COLORSPACE_RGB565 != src_colorspace
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; IMAGE_UTIL_COLORSPACE_I420 != src_colorspace
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; IMAGE_UTIL_COLORSPACE_UYVY != src_colorspace
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; IMAGE_UTIL_COLORSPACE_RGB888 != src_colorspace)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ERR("src_colorspace not supported yet");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ERR(&quot;src_colorspace not supported yet&quot;);
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return IMAGE_UTIL_ERROR_NOT_SUPPORTED_FORMAT;
 &nbsp;&nbsp;&nbsp;}
 
@@ -722,24 +753,25 @@ int image_sample_util_convert_colorspace( uchar *dest , image_util_colorspace_e
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; IMAGE_UTIL_COLORSPACE_RGB565 != dest_colorspace
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; IMAGE_UTIL_COLORSPACE_I420 != dest_colorspace)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ERR("dest_colorspace not supported yet");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ERR(&quot;dest_colorspace not supported yet&quot;);
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return IMAGE_UTIL_ERROR_NOT_SUPPORTED_FORMAT;
 &nbsp;&nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;unsigned int dest_size = 0;
-&nbsp;&nbsp;&nbsp;error = image_util_calculate_buffer_size(width, height, dest_colorspace, &dest_size);
-&nbsp;&nbsp;&nbsp;RETVM_IF(IMAGE_UTIL_ERROR_NONE != error, error, "image_util_calculate_buffer_size error");
+&nbsp;&nbsp;&nbsp;error = image_util_calculate_buffer_size(width, height, dest_colorspace, &amp;dest_size);
+&nbsp;&nbsp;&nbsp;RETVM_IF(IMAGE_UTIL_ERROR_NONE != error, error, &quot;image_util_calculate_buffer_size error&quot;);
 &nbsp;&nbsp;&nbsp;unsigned int src_size = 0;
-&nbsp;&nbsp;&nbsp;error = image_util_calculate_buffer_size(width, height, src_colorspace, &src_size);
-&nbsp;&nbsp;&nbsp;RETVM_IF(IMAGE_UTIL_ERROR_NONE != error, error, "image_util_calculate_buffer_size error");
+&nbsp;&nbsp;&nbsp;error = image_util_calculate_buffer_size(width, height, src_colorspace, &amp;src_size);
+&nbsp;&nbsp;&nbsp;RETVM_IF(IMAGE_UTIL_ERROR_NONE != error, error, &quot;image_util_calculate_buffer_size error&quot;);
 
 &nbsp;&nbsp;&nbsp;if (dest_colorspace == src_colorspace)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memcpy(dest, src, src_size);
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return error;
 &nbsp;&nbsp;&nbsp;}
 
-
 &nbsp;&nbsp;&nbsp;if (IMAGE_UTIL_COLORSPACE_BGRA8888 == src_colorspace)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (IMAGE_UTIL_COLORSPACE_I420 == dest_colorspace)
@@ -781,7 +813,8 @@ int image_sample_util_convert_colorspace( uchar *dest , image_util_colorspace_e
 &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;ERR("dest_colorspace not supported yet");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ERR(&quot;dest_colorspace not supported yet&quot;);
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return IMAGE_UTIL_ERROR_NOT_SUPPORTED_FORMAT;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
@@ -793,15 +826,16 @@ int image_sample_util_convert_colorspace( uchar *dest , image_util_colorspace_e
 &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;ERR("dest_colorspace not supported yet");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ERR(&quot;dest_colorspace not supported yet&quot;);
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return IMAGE_UTIL_ERROR_NOT_SUPPORTED_FORMAT;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return error;
 }
 
-bool frame_extractor_frame_get(const frame_extractor *extractor, unsigned char **frame, int pos)
+bool 
+frame_extractor_frame_get(const frame_extractor *extractor, unsigned char **frame, int pos)
 {
 &nbsp;&nbsp;&nbsp;bool result = false;
 &nbsp;&nbsp;&nbsp;if (extractor &amp;&amp; frame)
@@ -815,7 +849,9 @@ bool frame_extractor_frame_get(const frame_extractor *extractor, unsigned char *
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*frame = malloc(size + (extractor-&gt;width * extractor-&gt;height) * ARGB_PIXEL_SIZE);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (*frame)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error = image_sample_util_convert_colorspace(*frame , IMAGE_UTIL_COLORSPACE_BGRA8888, buf,  extractor->width, extractor->height, IMAGE_UTIL_COLORSPACE_RGB888);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error = image_sample_util_convert_colorspace(*frame, IMAGE_UTIL_COLORSPACE_BGRA8888, buf,  
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;extractor-&gt;width, extractor-&gt;height, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IMAGE_UTIL_COLORSPACE_RGB888);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (IMAGE_UTIL_ERROR_NONE == error)
 &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;result = true;
@@ -829,7 +865,6 @@ bool frame_extractor_frame_get(const frame_extractor *extractor, unsigned char *
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(buf);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return result;
 }
 </pre>
@@ -843,7 +878,8 @@ bool frame_extractor_frame_get(const frame_extractor *extractor, unsigned char *
 <p>This view allows the user to play tone sounds from the numeric phone keypad. Internally, when any phone keypad button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_on_keypad_btn_down_cb</span> and <span style="font-family: Courier New,Courier,monospace;">_on_keypad_btn_up_cb</span> callbacks are called and the <span style="font-family: Courier New,Courier,monospace;">_process</span> method is executed:</p>
 
 <pre class="prettyprint">
-static void _on_keypad_btn_down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+static void 
+_on_keypad_btn_down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;tone_player_view *view = data;
 &nbsp;&nbsp;&nbsp;if (view)
@@ -860,7 +896,8 @@ static void _on_keypad_btn_down_cb(void *data, Evas *e, Evas_Object *obj, void *
 <p align="center"><img alt="Tone player" src="../images/mediaapp_tone_player.png" /></p>
 
 <pre class="prettyprint">
-static void _on_keypad_btn_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+static void 
+_on_keypad_btn_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;tone_player_view *view = data;
 &nbsp;&nbsp;&nbsp;if (view)
@@ -877,7 +914,8 @@ static void _on_keypad_btn_up_cb(void *data, Evas *e, Evas_Object *obj, void *ev
 <p align="center"><img alt="Audio in-out" src="../images/mediaapp_inout.png" /></p>
 
 <pre class="prettyprint">
-static void _audio_in_start(audio_inout *obj)
+static void 
+_audio_in_start(audio_inout *obj)
 {
 &nbsp;&nbsp;&nbsp;audio_buffer *buf = obj-&gt;buffer;
 &nbsp;&nbsp;&nbsp;char *samples = buf-&gt;samples;
@@ -927,7 +965,8 @@ static void _audio_in_start(audio_inout *obj)
 <p align="center"><img alt="Audio equalizer" src="../images/mediaapp_equalizer.png" /></p>
 
 <pre class="prettyprint">
-static void _set_equalizer_layout(equalizer_view *view, Evas_Object *parent)
+static void 
+_set_equalizer_layout(equalizer_view *view, Evas_Object *parent)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *box = elm_box_add(parent);
 &nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_FALSE);
@@ -968,7 +1007,8 @@ static void _set_equalizer_layout(equalizer_view *view, Evas_Object *parent)
 <p>Initialize and render openGL:</p>
 
 <pre class="prettyprint">
-void _gles_cube_view_glview_init(Evas_Object *obj)
+void 
+_gles_cube_view_glview_init(Evas_Object *obj)
 {
 &nbsp;&nbsp;&nbsp;gles_cube_view_data *view = evas_object_data_get(obj, GLVIEW_VIEW_DATA_NAME);
 &nbsp;&nbsp;&nbsp;RETM_IF(!view, &quot;View data is NULL&quot;);
@@ -982,7 +1022,8 @@ void _gles_cube_view_glview_init(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;api-&gt;glEnable(GL_DEPTH_TEST);
 }
 
-void _gles_cube_view_glview_render(Evas_Object *obj)
+void 
+_gles_cube_view_glview_render(Evas_Object *obj)
 {
 &nbsp;&nbsp;&nbsp;gles_cube_view_data *view = evas_object_data_get(obj, GLVIEW_VIEW_DATA_NAME);
 &nbsp;&nbsp;&nbsp;RETM_IF(!view, &quot;View data is NULL&quot;);
@@ -1010,7 +1051,8 @@ void _gles_cube_view_glview_render(Evas_Object *obj)
 <p>This view allows the user to play different media sources, such as MP3, AMR, WAV, MP4, and AAC. Internally, when the <strong>Play</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_start_player</span> callback is called, which prepares the selected media and plays it.</p>
 
 <pre class="prettyprint">
-static void _start_player(media_player_view *view)
+static void 
+_start_player(media_player_view *view)
 {
 &nbsp;&nbsp;&nbsp;player_state_e state;
 &nbsp;&nbsp;&nbsp;player_get_state(view-&gt;player, &amp;state);
@@ -1050,7 +1092,8 @@ static void _start_player(media_player_view *view)
 <p align="center"><img alt="Multi Play" src="../images/mediaapp_multi.png" /></p>
 
 <pre class="prettyprint">
-static void _on_genlist_item_selected_cb(void *data, Evas_Object *obj, void *event_info)
+static void 
+_on_genlist_item_selected_cb(void *data, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;Elm_Object_Item *item = (Elm_Object_Item *) event_info;
 &nbsp;&nbsp;&nbsp;player_data *player = elm_object_item_data_get(item);
@@ -1083,7 +1126,8 @@ static void _on_genlist_item_selected_cb(void *data, Evas_Object *obj, void *eve
 <p>This view allows the user to display the camera preview and media player at the same window. Initially, both the camera and the player should be created and initiated:</p>
 
 <pre class="prettyprint">
-static player_h _create_player(camera_player_view *this)
+static player_h 
+_create_player(camera_player_view *this)
 {
 &nbsp;&nbsp;&nbsp;player_h player = NULL;
 
@@ -1121,7 +1165,8 @@ static player_h _create_player(camera_player_view *this)
 <p>When the <strong>Start</strong> button is clicked, camera streaming and video player streaming start simultaneously:</p>
 
 <pre class="prettyprint">
-static void _start_camera(camera_player_view *this)
+static void 
+_start_camera(camera_player_view *this)
 {
 &nbsp;&nbsp;&nbsp;if (!this-&gt;camera)
 &nbsp;&nbsp;&nbsp;{
@@ -1140,7 +1185,8 @@ static void _start_camera(camera_player_view *this)
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void _start_player(camera_player_view *this)
+static void 
+_start_player(camera_player_view *this)
 {
 &nbsp;&nbsp;&nbsp;if (!this-&gt;player)
 &nbsp;&nbsp;&nbsp;{
@@ -1169,7 +1215,8 @@ static void _start_player(camera_player_view *this)
 <p>This view allows the user to record camera streaming and play another video stream at the same time. Initially, both the camera recorder and the player should be created and initiated:</p>
 
 <pre class="prettyprint">
-static void _create_video_recorder(video_recorder_player_view *view)
+static void 
+_create_video_recorder(video_recorder_player_view *view)
 {
 &nbsp;&nbsp;&nbsp;window_obj *win_obj = view-&gt;app-&gt;win;
 &nbsp;&nbsp;&nbsp;Evas_Object *win = win_obj-&gt;win;
@@ -1202,7 +1249,8 @@ static void _create_video_recorder(video_recorder_player_view *view)
 <p>When the <strong>Start</strong> button is clicked, recording a video stream to a file and playing another video stream at the same time begins. The recorded file is played after the recording is finished.</p>
 
 <pre class="prettyprint">
-static void _stop_video_recorder(video_recorder_player_view *view)
+static void 
+_stop_video_recorder(video_recorder_player_view *view)
 {
 &nbsp;&nbsp;&nbsp;if (view-&gt;recorder)
 &nbsp;&nbsp;&nbsp;{
@@ -1218,7 +1266,8 @@ static void _stop_video_recorder(video_recorder_player_view *view)
 static void _on_record_completed(video_recorder_player_view *view)
 {
 &nbsp;&nbsp;&nbsp;win_set_view_style(view-&gt;app-&gt;win, STYLE_DEFAULT_WINDOW);
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *video_player_navi_item = video_player_view_add(view-&gt;app, view-&gt;navi, get_data_path(RECORDERED_3GP_VIDEO), NULL, NULL);
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *video_player_navi_item = video_player_view_add(view-&gt;app, view-&gt;navi, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get_data_path(RECORDERED_3GP_VIDEO), NULL, NULL);
 &nbsp;&nbsp;&nbsp;elm_naviframe_item_pop_cb_set(video_player_navi_item, _video_player_navi_item_pop_cb, view);
 }
 </pre>
@@ -1229,7 +1278,8 @@ static void _on_record_completed(video_recorder_player_view *view)
 <p>This view allows the user to capture a separate frame from the camera stream as an image and display it in the saved images. There are numerous settings that can be used to adjust the capturing process and to customize the camera stream style, quality, and filtering. Initially, the camera view should be prepared and started:</p>
 
 <pre class="prettyprint">
-static void _create_camera(camera_capture_view *view)
+static void 
+_create_camera(camera_capture_view *view)
 {
 &nbsp;&nbsp;&nbsp;window_obj *win_obj = view-&gt;app-&gt;win;
 &nbsp;&nbsp;&nbsp;Evas_Object *win = win_obj-&gt;win;
@@ -1263,7 +1313,9 @@ static void _start_camera(camera_capture_view *view)
 <p>When the <strong>Capture</strong> button is clicked, it takes a frame shot of the current camera view and places it into a scrollable gallery down the view. </p>
 
 <pre class="prettyprint">
-static void _on_camera_capture_cb(camera_image_data_s *image, camera_image_data_s *postview, camera_image_data_s *thumbnail, void *user_data)
+static void 
+_on_camera_capture_cb(camera_image_data_s *image, camera_image_data_s *postview, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;camera_image_data_s *thumbnail, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;camera_capture_view *view = user_data;
 
@@ -1285,12 +1337,14 @@ static void _on_camera_capture_cb(camera_image_data_s *image, camera_image_data_
 <p>Each newly created frame can be viewed with the image viewer:</p>
 
 <pre class="prettyprint">
-static void _on_thumb_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+static void 
+_on_thumb_clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;thumbnail_data *thumbnail = data;
 &nbsp;&nbsp;&nbsp;if (thumbnail)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (capture_image_viewer_add(thumbnail-&gt;view-&gt;app, thumbnail-&gt;view-&gt;navi, thumbnail-&gt;image_path, _on_capture_image_viewer_del_cb, thumbnail-&gt;view))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (capture_image_viewer_add(thumbnail-&gt;view-&gt;app, thumbnail-&gt;view-&gt;navi, 
+&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;thumbnail-&gt;image_path, _on_capture_image_viewer_del_cb, thumbnail-&gt;view))
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thumbnail-&gt;view-&gt;activated = false;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_stop_camera(thumbnail-&gt;view);
@@ -1310,7 +1364,8 @@ static void _on_thumb_clicked_cb(void *data, Evas_Object *obj, void *event_info)
 <p align="center"><img alt="Video recorder" src="../images/mediaapp_video.png" /></p>
 
 <pre class="prettyprint">
-static void _create_video_recorder(video_recorder_view *view)
+static void 
+_create_video_recorder(video_recorder_view *view)
 {
 &nbsp;&nbsp;&nbsp;if (view-&gt;recorder)
 &nbsp;&nbsp;&nbsp;{
@@ -1331,7 +1386,8 @@ static void _create_video_recorder(video_recorder_view *view)
 <p>When the <strong>Start</strong> button is clicked, it starts to record a video. The recorded video can be played in the Media player.</p>
 
 <pre class="prettyprint">
-static void _start_video_recorder(video_recorder_view *view)
+static void 
+_start_video_recorder(video_recorder_view *view)
 {
 &nbsp;&nbsp;&nbsp;if (view-&gt;recorder)
 &nbsp;&nbsp;&nbsp;{
@@ -1344,7 +1400,8 @@ static void _start_video_recorder(video_recorder_view *view)
 <p>This view allows the user to record audio streaming and play the recorded audio. There are several settings that can be used to adjust audio quality and pre-processing. Initially, the audio recorder should be created and prepared:</p>
 
 <pre class="prettyprint">
-static void _recorder_create(audio_recorder_view *view)
+static void 
+_recorder_create(audio_recorder_view *view)
 {
 &nbsp;&nbsp;&nbsp;if (recorder_create_audiorecorder(&amp;view-&gt;recorder) == RECORDER_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;{
@@ -1379,7 +1436,8 @@ static void _recorder_create(audio_recorder_view *view)
 <p>When the <strong>Start</strong> button is clicked, it starts to record the audio stream. The recorded audio can be played in the Media player.</p>
 
 <pre class="prettyprint">
-static void _recorder_start(audio_recorder_view *view)
+static void 
+_recorder_start(audio_recorder_view *view)
 {
 &nbsp;&nbsp;&nbsp;if (view-&gt;recorder)
 &nbsp;&nbsp;&nbsp;{
@@ -1391,7 +1449,9 @@ static void _recorder_start(audio_recorder_view *view)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
 }
-static void _recorder_stop(audio_recorder_view *view)
+
+static void 
+_recorder_stop(audio_recorder_view *view)
 {
 &nbsp;&nbsp;&nbsp;if (view-&gt;recorder)
 &nbsp;&nbsp;&nbsp;{
@@ -1408,7 +1468,8 @@ static void _recorder_stop(audio_recorder_view *view)
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void _on_ctrl_btn_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+static void 
+_on_ctrl_btn_pressed_cb(void *data, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;audio_recorder_view *view = data;
 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/mediacontroller_client_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/mediacontroller_client_sd_mn.htm
new file mode 100644
index 0000000..626957d
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/mediacontroller_client_sd_mn.htm
@@ -0,0 +1,174 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+	<script type="text/javascript" src="../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+	<title>Media-controller-client 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/mobile_s_n.png"/></p>
+	</div>
+  <h1>Media-controller-client Sample Overview</h1>
+<p>The media-controller-client sample application demonstrates how you can create a custom media controller client type application. This sample application is based on a simple lockscreen application.</p>
+<p>The following figure illustrates the main view of the media-controller-client sample application.</p>
+
+  <p class="figure">Figure: Media-controller-client main view</p>
+  <p align="center">
+    <img alt="Media-controller-client main view" src="../images/mediacontrol_client_sd.png" />
+  </p>
+
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privilege must be set:</p>
+ <ul>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/mediacontroller.client</span></li>
+ </ul>
+
+<h2>Implementation</h2>
+
+<p>To use the media controller client:</p>
+<ol>
+<li>Create the media controller client handle in the <span style="font-family: Courier New,Courier,monospace">__create_player_client()</span> function. The function sets the callbacks to receive the update event from the media controller server.
+<pre class="prettyprint">
+static void 
+__create_player_client(void)
+{
+&nbsp;&nbsp;&nbsp;int ret = mc_client_create(&amp;s_player_data.player_client);
+
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTROLLER_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Media controller client creation [%d]&quot;, ret);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Callbacks on server events
+&nbsp;&nbsp;&nbsp;mc_client_set_server_update_cb(s_player_data.player_client, __player_state_changed_cb, NULL);
+&nbsp;&nbsp;&nbsp;mc_client_set_playback_update_cb(s_player_data.player_client, __playback_updated_cb, NULL);
+&nbsp;&nbsp;&nbsp;mc_client_set_metadata_update_cb(s_player_data.player_client, __metadata_updated_cb, NULL);
+&nbsp;&nbsp;&nbsp;mc_client_set_shuffle_mode_update_cb(s_player_data.player_client, __shuffle_mode_updated_cb, NULL);
+&nbsp;&nbsp;&nbsp;mc_client_set_repeat_mode_update_cb(s_player_data.player_client, __repeat_mode_updated_cb, NULL);    
+
+&nbsp;&nbsp;&nbsp;return;
+} 
+</pre>
+</li>
+
+<li>Initialize the media information with the latest server information in the <span style="font-family: Courier New,Courier,monospace">__create_player_client()</span> function. The function can also get the latest media information using the <span style="font-family: Courier New,Courier,monospace">mc_client_get_latest_server_info()</span> and <span style="font-family: Courier New,Courier,monospace">mc_client_get_server_xxx()</span> functions. The server name is necessary to use the  <span style="font-family: Courier New,Courier,monospace">mc_client_get_server_xxx()</span> functions. To get the server name, use the <span style="font-family: Courier New,Courier,monospace">mc_client_foreach_server()</span> or <span style="font-family: Courier New,Courier,monospace">mc_client_get_latest_server_info()</span> function.
+<pre class="prettyprint">
+static void 
+__create_player_client(void)
+{
+&nbsp;&nbsp;&nbsp;int ret = mc_client_create(&amp;s_player_data.player_client);
+
+&nbsp;&nbsp;&nbsp;ret = mc_client_foreach_server(s_player_data.player_client, __server_list_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;ret = mc_client_get_latest_server_info(s_player_data.player_client, &amp;server_name, &amp;server_state);
+
+&nbsp;&nbsp;&nbsp;if (ret == MEDIA_CONTROLLER_ERROR_NONE
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; server_name
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; !s_player_data.connected) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_player_data.app_name = strdup(server_name);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mc_client_get_server_playback_info(s_player_data.player_client, s_player_data.app_name, &amp;s_player_data.playback_info);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mc_client_get_server_metadata(s_player_data.player_client, s_player_data.app_name, &amp;s_player_data.metadata);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mc_client_get_server_shuffle_mode(s_player_data.player_client, s_player_data.app_name, &amp;shuffle_mode);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mc_client_get_server_repeat_mode(s_player_data.player_client, s_player_data.app_name, &amp;repeat_mode);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Didn&#39;t get information about latest server&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;return;
+} 
+</pre>
+</li>
+
+<li>Send the playback state command to the media controller server application with the <span style="font-family: Courier New,Courier,monospace">mc_client_send_playback_state_command()</span> function. This function can change the playback state of the media controller server.
+<pre class="prettyprint">
+static void 
+__play_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;mc_client_send_playback_state_command(s_player_data.player_client, s_player_data.app_name, MEDIA_PLAYBACK_STATE_PLAYING);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Send Play command to player app [%s]&quot;, s_player_data.app_name);
+}
+
+static void 
+__prev_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;mc_client_send_playback_state_command(s_player_data.player_client, s_player_data.app_name, MEDIA_PLAYBACK_STATE_PREV_FILE);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Send Previous track command to player app [%s]&quot;, s_player_data.app_name);
+}
+
+static void 
+__next_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;mc_client_send_playback_state_command(s_player_data.player_client, s_player_data.app_name, MEDIA_PLAYBACK_STATE_NEXT_FILE);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Send Next track command to player app [%s]&quot;, s_player_data.app_name);
+}
+</pre>
+</li>
+
+<li>Unset the callbacks with the <span style="font-family: Courier New,Courier,monospace">mc_client_unset_xxx_update_cb()</span> functions. The media controller client handle must be destroyed using the <span style="font-family: Courier New,Courier,monospace">mc_client_destroy()</span> function.
+<pre class="prettyprint">
+static void 
+__destroy_player_client(void)
+{
+&nbsp;&nbsp;&nbsp;mc_client_unset_server_update_cb(s_player_data.player_client);
+&nbsp;&nbsp;&nbsp;mc_client_unset_playback_update_cb(s_player_data.player_client);
+&nbsp;&nbsp;&nbsp;mc_client_unset_metadata_update_cb(s_player_data.player_client);
+&nbsp;&nbsp;&nbsp;mc_client_unset_shuffle_mode_update_cb(s_player_data.player_client);
+&nbsp;&nbsp;&nbsp;mc_client_unset_repeat_mode_update_cb(s_player_data.player_client);
+
+&nbsp;&nbsp;&nbsp;mc_client_destroy(s_player_data.player_client);
+&nbsp;&nbsp;&nbsp;mc_client_destroy_playback(s_player_data.playback_info);
+&nbsp;&nbsp;&nbsp;mc_client_destroy_metadata(s_player_data.metadata);
+
+&nbsp;&nbsp;&nbsp;if (s_player_data.app_name) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(s_player_data.app_name);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;return;
+}
+</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/mediacontroller_server_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/mediacontroller_server_sd_mn.htm
new file mode 100644
index 0000000..78f4ba5
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/mediacontroller_server_sd_mn.htm
@@ -0,0 +1,163 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+	<script type="text/javascript" src="../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+	<title>Media-controller-server 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/mobile_s_n.png"/></p>
+	</div>
+  <h1>Media-controller-server Sample Overview</h1>
+<p>The media-controller-server sample application demonstrates how you can create a custom media controller server type application. This sample application is based on a simple music application.</p>
+<p>The following figure illustrates the main view of the media-controller-server sample application.</p>
+
+  <p class="figure">Figure: Media-controller server main view</p>
+  <p align="center">
+    <img alt="Media-controller-server main view" src="../images/mediacontrol_server_sd.png" />
+  </p>
+
+  <h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privilege must be set:</p>
+ <ul>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/mediacontroller.server</span></li>
+ </ul> 
+ 
+<h2>Implementation</h2>
+
+<p>To use the media controller server:</p>
+<ol>
+<li>Create a media controller server handle in the <span style="font-family: Courier New,Courier,monospace">create_player()</span> function. The function sets the callbacks to receive commands from the media controller client. To handle the incoming playback state command, define a callback and register it using the <span style="font-family: Courier New,Courier,monospace">mc_server_set_playback_state_command_received_cb()</span> function.
+<pre class="prettyprint">
+static void 
+create_player(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;ret = mc_server_create(&amp;ad-&gt;player_controller);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTROLLER_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;mc_server_create() is failed. err = %d&quot;, ret);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;mc_server_set_playback_state_command_received_cb(ad-&gt;player_controller, _playback_state_cb, (void*)ad);
+&nbsp;&nbsp;&nbsp;mc_server_set_custom_command_received_cb(ad-&gt;player_controller, __custom_command_received_cb, (void*)ad);
+} 
+</pre>
+</li>
+
+<li>Update the playback state, media metadata information, shuffle mode, and repeat mode in the <span style="font-family: Courier New,Courier,monospace">play_media()</span> function:
+<pre class="prettyprint">
+void
+play_media(media_info_h media_info, appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;mc_server_set_metadata(ad-&gt;player_controller, 0, file_name);
+&nbsp;&nbsp;&nbsp;mc_server_set_metadata(ad-&gt;player_controller, 1, artist);
+&nbsp;&nbsp;&nbsp;mc_server_set_metadata(ad-&gt;player_controller, 2, album);
+&nbsp;&nbsp;&nbsp;mc_server_set_metadata(ad-&gt;player_controller, 3, author);
+&nbsp;&nbsp;&nbsp;mc_server_set_metadata(ad-&gt;player_controller, 4, genre);
+&nbsp;&nbsp;&nbsp;mc_server_set_metadata(ad-&gt;player_controller, 5, duration_c);
+&nbsp;&nbsp;&nbsp;mc_server_set_metadata(ad-&gt;player_controller, 6, date);
+&nbsp;&nbsp;&nbsp;mc_server_set_metadata(ad-&gt;player_controller, 7, copyright);
+&nbsp;&nbsp;&nbsp;mc_server_set_metadata(ad-&gt;player_controller, 8, description);
+&nbsp;&nbsp;&nbsp;mc_server_set_metadata(ad-&gt;player_controller, 9, track_num);      
+&nbsp;&nbsp;&nbsp;mc_server_update_metadata(ad-&gt;player_controller);
+
+&nbsp;&nbsp;&nbsp;// Update shuffle mode information for clients
+&nbsp;&nbsp;&nbsp;mc_server_update_shuffle_mode(ad-&gt;player_controller, SHUFFLE_MODE_OFF);
+
+&nbsp;&nbsp;&nbsp;// Update repeat mode information for clients
+&nbsp;&nbsp;&nbsp;mc_server_update_repeat_mode(ad-&gt;player_controller, REPEAT_MODE_ON);
+
+&nbsp;&nbsp;&nbsp;switch (player_state) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Case when the player state is playing
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mc_server_set_playback_state(ad-&gt;player_controller, MEDIA_PLAYBACK_STATE_PLAYING);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mc_server_update_playback_info(ad-&gt;player_controller);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Case when the player state is paused
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mc_server_set_playback_state(ad-&gt;player_controller, MEDIA_PLAYBACK_STATE_PAUSED);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mc_server_update_playback_info(ad-&gt;player_controller);
+&nbsp;&nbsp;&nbsp;}
+} 
+</pre>
+</li>
+
+<li>Handle the custom command in the <span style="font-family: Courier New,Courier,monospace">mc_server_set_custom_command_received_cb()</span> function and send a reply to the media controller client application with the <span style="font-family: Courier New,Courier,monospace">mc_server_send_command_reply()</span> function: 
+<pre class="prettyprint">
+void 
+__custom_command_received_cb(const char *client_name, const char *command, bundle *data, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;ret = mc_server_send_command_reply(ad-&gt;player_controller, client_name, 0, bundle_reply);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTROLLER_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;mc_server_send_command_reply() is failed. err = %d&quot;, ret);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+</li>
+
+<li>Unset the callbacks with the <span style="font-family: Courier New,Courier,monospace">mc_client_unset_xxx_command_received_cb()</span> functions. The media controller server handle must be destroyed using the <span style="font-family: Courier New,Courier,monospace">mc_server_destroy()</span> function.
+<pre class="prettyprint">
+static void 
+__destroy_player(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;ret = mc_server_unset_playback_state_command_received_cb(ad-&gt;player_controller);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTROLLER_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;mc_server_unset_playback_state_command_received_cb() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;ret = mc_server_unset_custom_command_received_cb(ad-&gt;player_controller);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTROLLER_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;mc_server_unset_playback_state_command_received_cb() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;ret = mc_server_destroy(ad-&gt;player_controller);
+&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTROLLER_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;mc_server_destroy() is failed. err = %d&quot;, ret);
+&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/messageport_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/messageport_sd_mn.htm
new file mode 100644
index 0000000..09c4833
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/messageport_sd_mn.htm
@@ -0,0 +1,945 @@
+<!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>Message Port 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/mobile_s_n.png"/></p>
+	</div>
+
+  <h1>Message Port Sample Overview</h1>
+
+  <p>The Message Port sample demonstrates how to implement data exchange through a message port to enable custom bundled data exchange.</p>
+  <p>The following figure illustrates the main screens of the application.</p>
+  <p class="figure" id="app-screenshot">Figure: Message Port screens</p>
+  <p align="center">
+    <img alt="Data source view" src="../images/messageport_data_source_view_sd.png" />
+	<img alt="Data sink view" src="../images/messageport_data_sink_view_sd.png" />
+  </p>
+
+  <p>You can:</p>
+  <ul>
+    <li>Input a text message: a user-defined text message is bundled and sent through a message port</li>
+	<li>Trigger trusted communication: you can change between common and trusted message sending mode</li>
+	<li>Send a text message: a bundled text message is sent through a message port following the trust level set by the user</li>
+	<li>Receive a text message: a user-defined text message is received and displayed</li>
+  </ul>
+  
+  <p>The following figures illustrate the structure of the user interface (EDJE layout scripts are used).</p>
+  
+  <p id="ui-source-layout" class="figure">Figure: UI layout structure of the Data source view</p>
+  <p align="center" id="ui-data-source-struct">
+    <img alt="UI layout structure of the data source" src="../images/messageport_edje_structure_data_source_sd.png" /> <img alt="UI component structure of the data source" src="../images/messageport_ui_structure_data_source_sd.png" />
+  </p>
+
+  <p id="ui-sink-layout" class="figure">Figure: UI layout structure of Data sink view</p>
+  <p align="center" id="ui-data-sink-struct">
+    <img alt="UI layout structure of the data sink" src="../images/messageport_edje_structure_data_sink_sd.png" /> <img alt="UI component structure of the data sink" src="../images/messageport_ui_structure_data_sink_sd.png" />
+  </p>
+  <p>The application workflow can be divided into the following logical pipelines, illustrated in the following figure:</p>
+  <ul>
+    <li>Application startup</li>
+	<li>Bundled text message sending</li>
+	<li>Bundled text message receiving</li>
+  </ul>
+ 
+  <p id="workflow" class="figure">Figure: Application workflow</p>
+  <p align="center">
+    <img alt="Startup" src="../images/messageport_workflow_startup_sd.png"/> <img alt="Message sending" src="../images/messageport_workflow_text_send_sd.png"/> <img alt="Message receiving" src="../images/messageport_workflow_text_receive_sd.png"/> <img alt="Message structure" src="../images/messageport_workflow_message_structure_sd.png"/>
+  </p>
+
+<h2>Implementation</h2>
+
+<h3 id="type-defs">Type Definitions</h3>
+
+<p>The main data structure is used as a placeholder for the model and view data:</p>
+<pre class="prettyprint">
+typedef struct 
+__appdata 
+{
+&nbsp;&nbsp;&nbsp;viewdata_s view; // View module data
+} appdata_s;
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">viewdata_s</span> structure contains references to all UI component objects created by the <a href="#view">View</a> module.</p>
+<pre class="prettyprint">
+typedef struct 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object* win; // Main window object
+&nbsp;&nbsp;&nbsp;Evas_Object* conform; // Conformant object
+&nbsp;&nbsp;&nbsp;Evas_Object* layout_main_panel; // Main window&#39;s layout object (embedded into the conform component)
+&nbsp;&nbsp;&nbsp;Evas_Object* main_toolbar; // Toolbar object (embedded into the PART_MAIN_TOOLBAR part of the layout_main_panel object)
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *main_toolbar_item_data_source; // &quot;Data source&quot; item of the main_toolbar component
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *main_toolbar_item_data_sink; // &quot;Data sink&quot; item of the main_toolbar component
+&nbsp;&nbsp;&nbsp;Evas_Object* layout_data_source; // Data source view layout (embedded into the PART_MAIN_CONTENT part of the layout_main_panel object)
+&nbsp;&nbsp;&nbsp;Evas_Object *data_source_check; // Checkbox component for toggling the trusted message port on and off (embedded into the PART_DATA_SOURCE_CHECK part of the layout_data_source object)
+&nbsp;&nbsp;&nbsp;Evas_Object *data_source_entry; // Text entry component (embedded into the PART_DATA_SOURCE_ENTRY part of the layout_data_source object)
+&nbsp;&nbsp;&nbsp;Evas_Object *data_source_button_send; // Button component for data sending (embedded into the PART_DATA_SOURCE_BUTTON part of the layout_data_source object)
+&nbsp;&nbsp;&nbsp;Evas_Object* layout_data_sink; // Data sink view layout (embedded into the PART_MAIN_CONTENT part of the layout_main_panel object)
+&nbsp;&nbsp;&nbsp;Evas_Object* sink_entry; // Message entry component (embedded into the PART_DATA_SINK_ENTRY part of the layout_data_sink object)
+} viewdata_s;
+</pre>
+
+<h3 id="app-init">Application Initialization</h3>
+
+<p>The entire application life-cycle is implemented in the <span style="font-family: Courier New,Courier,monospace">main.c</span> file, using the common structure of the Tizen application:</p>
+<pre class="prettyprint">
+int 
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = {{0,},};
+&nbsp;&nbsp;&nbsp;// Variable declaration and initialization
+
+&nbsp;&nbsp;&nbsp;event_callback.create = __create_app;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = __terminate_app;
+&nbsp;&nbsp;&nbsp;event_callback.pause = __pause_app;
+&nbsp;&nbsp;&nbsp;event_callback.resume = __resume_app;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = __control_app;
+
+&nbsp;&nbsp;&nbsp;// Event handler assignment
+
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+<p>The Message Port sample application is implemented using the MVC design pattern. Its initialization is done within the <span style="font-family: Courier New,Courier,monospace">__app_create()</span> callback function where the <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function is responsible for the application initialization. When the application is terminated, the <span style="font-family: Courier New,Courier,monospace">__terminate_app()</span> callback function is called, and all the allocated resources are freed. For more information, see <a href="#controller">Controller</a>.</p>
+<pre class="prettyprint">
+static bool 
+__create_app(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Variable assignment
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+
+&nbsp;&nbsp;&nbsp;return controller_initialization(&amp;ad-&gt;view);
+}
+</pre>
+<pre class="prettyprint">
+static void 
+__terminate_app(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+
+&nbsp;&nbsp;&nbsp;controller_terminate(&amp;ad-&gt;view);
+}
+</pre>
+
+<h3 id="view">View</h3>
+
+<p>The entire application layout is implemented using EDJE scripts. All top level swallows are designed for EFL Elementary component embedding. The following EDJE swallow - EFL Elementary component relations and assigned functionalities are used:</p>
+
+  <ul>
+    <li><span style="font-family: Courier New,Courier,monospace">PART_MAIN_TOOLBAR-elm_toolbar</span>: Switches the view between the Data source and Data sink.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_CHECK-elm_check</span>: Toggles the trusted port mode on and off.</li>
+	<li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_ENTRY-elm_entry</span>: Custom text message edit field.</li>
+	<li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_BUTTON-elm_button</span>: Bundles the custom text message and sends it to the Data sink.</li>
+	<li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SINK_ENTRY-elm_entry</span>: Displays received data.</li>
+  </ul>
+
+<p> For more information, see also the <a href="#ui-source-layout">UI layout structure of the Data source view</a> and
+<a href="#ui-sink-layout">UI layout structure of the Data sink view</a> figures.</p>
+<p>The following code snippets create the application layout.</p>
+<table>
+   <caption>
+     Table: UI layout code snippets and figures
+   </caption> 
+    <tr> 
+     <th>Code snippet</th> 
+     <th>Figure</th> 
+    </tr> 
+	<tr>
+    <td colspan="2">
+	<strong>The main layout is defined in the <span style="font-family: Courier New,Courier,monospace">main.edc</span> file.</strong>
+	</td>
+  </tr> 
+  <tr>
+    <td id="main-panel-layout">
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: GROUP_MAIN;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Background part occupies the entire window
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_MAIN_BACKGROUND;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part is positioned in relation to PART_MAIN_BACKGROUND
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Spacer occupies the entire area of PART_MAIN_BACKGROUND with a small margin all around
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_MAIN_PANEL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SPACER;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part is positioned in relation to PART_MAIN_PANEL
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Swallow occupies 6% of the PART_MAIN_PANEL height
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Designed to hold the elm_toolbar component
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_MAIN_TOOLBAR;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part is positioned in relation to PART_MAIN_PANEL
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Swallow occupies 93% of the PART_MAIN_PANEL height
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Designed to hold the data source/sink layout
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_MAIN_CONTENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+	</td>
+	<td>
+	  <p align="center">
+        <img alt="EDJE main layout" src="../images/messageport_edje_layout_main_sd.png" />
+      </p>
+	</td>
+  </tr>
+	<tr>
+    <td colspan="2">
+	<strong>The <span style="font-family: Courier New,Courier,monospace">PART_MAIN_CONTENT</span> swallow is used as a container for:</strong>
+	  <ul>
+        <li><strong><a href="#data-source-panel-layout">Data source layout</a> defined in the <span style="font-family: Courier New,Courier,monospace">data_source.edc</span> file</strong></li>
+        <li><strong><a href="#data-sink-panel-layout">Data sink layout</a> defined in the <span style="font-family: Courier New,Courier,monospace">data_sink.edc</span> file</strong></li>
+      </ul>
+	  <p><strong>The data source/sink layouts are switched by the toolbar item selection.</strong></p>
+	</td>
+  </tr> 
+  <tr>
+    <td id="data-source-panel-layout">
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: GROUP_DATA_SOURCE;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part is positioned in relation to PART_MAIN_CONTENT from the main.edc file
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Rect plays a role of the background for the data source view and occupies
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the entire area of the PART_MAIN_CONTENT
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_DATA_SOURCE_BACKGROUND;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part is positioned in relation to PART_DATA_SOURCE_BACKGROUND
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Swallow part occupies 10% of the PART_DATA_SOURCE_BACKGROUND height
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Designed to hold the elm_check component for trusted mode toggling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_DATA_SOURCE_CHECK;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part is positioned in relation to PART_DATA_SOURCE_BACKGROUND
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Rect part occupies 80% of the PART_DATA_SOURCE_BACKGROUND height
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Background for the entry component
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_DATA_SOURCE_ENTRY_BACKGROUND;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part is positioned in relation to PART_DATA_SOURCE_ENTRY_BACKGROUND
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Swallow part occupies the entire area of the underlying part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Designed to hold the elm_entry component for text message input
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_DATA_SOURCE_ENTRY;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part is positioned in relation to PART_DATA_SOURCE_BACKGROUND
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Swallow part occupies 10% of the PART_DATA_SOURCE_BACKGROUND height
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Designed to hold the elm_button component for data sending
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_DATA_SOURCE_BUTTON;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+	</td>
+	<td>
+	  <p align="center">
+        <img alt="EDJE data source layout" src="../images/messageport_edje_layout_data_source_sd.png" />
+      </p>
+	</td>
+  </tr>
+  <tr>
+    <td id="data-sink-panel-layout">
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: GROUP_DATA_SINK;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part is positioned in relation to PART_MAIN_CONTENT from the main.edc file
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Rect plays a role of the background for the entry panel and occupies
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the entire area of the PART_MAIN_CONTENT
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_DATA_SINK_BACKGROUND;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part is positioned in relation to PART_DATA_SINK_BACKGROUND
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Swallow part occupies the entire area of PART_DATA_SINK_BACKGROUND
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Designed to hold the elm_entry component for displaying received data
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: PART_DATA_SINK_ENTRY;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+    </td>
+	<td>
+	  <p align="center">
+        <img alt="EDJE data sink layout" src="../images/messageport_edje_layout_data_sink_sd.png" />
+      </p>
+	</td>
+  </tr>
+</table>
+
+<p>Based on the layout defined with EDJE scripts, the application interface is created with the <span style="font-family: Courier New,Courier,monospace">view_create_base_gui()</span> function, which takes a pointer to the structure containing view data as its parameter. The <span style="font-family: Courier New,Courier,monospace">view_create_base_gui()</span> function is invoked in the <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function called from the <span style="font-family: Courier New,Courier,monospace">__create_app()</span> callback function. For call stack details, see <a href="#controller">Controller</a> and <a href="#app-init">Application Initialization</a>. The following code snippet presents the general procedure of the user interface creation.</p>
+
+<pre class="prettyprint">
+bool 
+view_create_base_gui(viewdata_s *vd)
+{
+&nbsp;&nbsp;&nbsp;// Pointer to the viewdata_s structure is stored for future use
+&nbsp;&nbsp;&nbsp;// Variable viewdata is declared globally in the scope of the view.c file
+&nbsp;&nbsp;&nbsp;viewdata = vd;
+
+&nbsp;&nbsp;&nbsp;// Main panel view creation (window, conformant, main layout, toolbar)
+&nbsp;&nbsp;&nbsp;if (!__create_main_panel(vd)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Data source view creation
+&nbsp;&nbsp;&nbsp;if (!__create_view_data_source(vd)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Data sink view creation
+&nbsp;&nbsp;&nbsp;if (!__create_data_sink(vd)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Data source/sink layout objects are assigned to the data field of the respective toolbar&#39;s items
+&nbsp;&nbsp;&nbsp;// These layout objects are used in __toolbar_item_selected_cb() callback function to switch between the layouts
+&nbsp;&nbsp;&nbsp;// depending on the toolbar item selection
+&nbsp;&nbsp;&nbsp;elm_object_item_data_set(vd-&gt;main_toolbar_item_data_source, (void *)vd-&gt;layout_data_source);
+&nbsp;&nbsp;&nbsp;elm_object_item_data_set(vd-&gt;main_toolbar_item_data_sink, (void *)vd-&gt;layout_data_sink);
+
+&nbsp;&nbsp;&nbsp;// Data source tab is marked as selected (the __toolbar_item_selected_cb() callback function is not called automatically)
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(vd-&gt;main_toolbar_item_data_source, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;// Set the vd-&gt;layout_data_source as the content of the viewdata-&gt;layout_main_panel layout because the __toolbar_item_selected_cb()
+&nbsp;&nbsp;&nbsp;// callback function is not called when elm_toolbar_item_selected_set() is invoked
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(viewdata-&gt;layout_main_panel, PART_MAIN_CONTENT, vd-&gt;layout_data_source);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(vd-&gt;win);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>The entire application view creation is triggered by the <span style="font-family: Courier New,Courier,monospace">view_create_base_gui()</span> function described above. The result of the succeeding subfunction invocations is depicted in the following table.</p>
+<table>
+<caption>
+     Table: Base view creation code snippets and figures
+   </caption> 
+  <col width="25%"/>
+  <col width="50%"/>
+  <col width="25%"/>
+      <tr> 
+	  <th>Description</th> 
+     <th>Code snippet</th> 
+     <th>Figure</th> 
+    </tr> 
+  <tr>
+    <td>
+	  <p><span style="font-family: Courier New,Courier,monospace">__create_main_panel()</span>:</p>
+<p>The main window and descendant conformant are created (<span style="font-family: Courier New,Courier,monospace">vd-&gt;win</span> and <span style="font-family: Courier New,Courier,monospace">vd-&gt;conform</span> respectively) and used as a placeholder for the main layout (<span style="font-family: Courier New,Courier,monospace">vd-&gt;layout_main_panel</span>).</p>
+<p>The main layout is created with the <span style="font-family: Courier New,Courier,monospace">view_generic_create_set_layout()</span> function by loading the main group from the EDJE layout (<span style="font-family: Courier New,Courier,monospace">main.edj</span> file), and  it is then embedded into the <span style="font-family: Courier New,Courier,monospace">vd-&gt;layout_main_panel</span> container. Finally, the <span style="font-family: Courier New,Courier,monospace">__layout_back_cb()</span> callback function is attached to the <span style="font-family: Courier New,Courier,monospace">vd-&gt;layout_main_panel</span> for the hardware back button handling.</p>
+<p>When the EDJE layout is loaded successfully, the <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> component can be created as a descendant of the <span style="font-family: Courier New,Courier,monospace">vd-&gt;layout_main_panel</span> main layout. At the very end, the following items are appended to the newly created <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> component with the <span style="font-family: Courier New,Courier,monospace">__toolbar_item_selected_cb()</span> callback function attached:</p>
+		<ul>
+		  <li><a href="#ui-data-source">Data source</a></li>
+		  <li><a href="#ui-data-sink">Data sink</a></li>
+		</ul>
+<p>The <span style="font-family: Courier New,Courier,monospace">__toolbar_item_selected_cb()</span> callback function is responsible for switching between the layout objects embedded in the <span style="font-family: Courier New,Courier,monospace">PART_MAIN_CONTENT</span> swallow of the <span style="font-family: Courier New,Courier,monospace">vd-&gt;layout_main_panel</span>. Those layouts are defined in the <span style="font-family: Courier New,Courier,monospace">data_source.edc</span> and <span style="font-family: Courier New,Courier,monospace">data_sink.edc</span> files. </p>
+	</td>
+	<td>
+<pre class="prettyprint">
+static bool 
+__create_main_panel(viewdata_s *vd)
+{
+&nbsp;&nbsp;&nbsp;vd-&gt;win = view_generic_create_window(__delete_win_request_cb);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;vd-&gt;conform = view_generic_create_conformant(vd-&gt;win);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;vd-&gt;layout_main_panel = view_generic_create_set_layout(vd-&gt;conform, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EDJ_MAIN_FILE_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GROUP_MAIN, NULL);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(vd-&gt;layout_main_panel, EEXT_CALLBACK_BACK, 
+&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;__layout_back_cb, (void *)vd);
+
+&nbsp;&nbsp;&nbsp;vd-&gt;main_toolbar = view_generic_create_toolbar(vd-&gt;layout_main_panel, 
+&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;&nbsp;&nbsp;PART_MAIN_TOOLBAR);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;vd-&gt;main_toolbar_item_data_source = elm_toolbar_item_append(vd-&gt;main_toolbar, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, &quot;Data source&quot;, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__toolbar_item_selected_cb, NULL);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;vd-&gt;main_toolbar_item_data_sink = elm_toolbar_item_append(vd-&gt;main_toolbar, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, &quot;Data sink&quot;, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__toolbar_item_selected_cb, NULL);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+	</td>
+	<td>
+	  <p align="center">
+        <img alt="UI main layout" height="410" src="../images/messageport_ui_layout_main_sd.png" />
+      </p>
+	</td>
+  </tr>
+  <tr>
+    <td id="ui-data-source">
+	  <p><span style="font-family: Courier New,Courier,monospace">__create_view_data_source()</span>:</p>
+<p>The entire Data source view is created by the Data source layout loading from the <span style="font-family: Courier New,Courier,monospace">data_source.edj</span> file. The resulting layout is not inserted into the <span style="font-family: Courier New,Courier,monospace">PART_MAIN_CONTENT</span>, as this operation is performed later depending on toolbar item selection.</p>
+<p>Next, the <span style="font-family: Courier New,Courier,monospace">elm_check</span>, <span style="font-family: Courier New,Courier,monospace">elm_entry</span>, and <span style="font-family: Courier New,Courier,monospace">elm_button</span> components are created and inserted into the <span style="font-family: Courier New,Courier,monospace">vd-&gt;layout_data_source</span> layout. The newly created components are used for:</p>
+	  <ul>
+	    <li>Toggling the trusted mode on and off</li>
+		<li>Text message input</li>
+		<li>Sending the text message with respect to the trusted mode</li>
+	  </ul>
+<p>The relevant callback function (<span style="font-family: Courier New,Courier,monospace">__button_send_clicked_cb()</span>) is attached to the created button (<span style="font-family: Courier New,Courier,monospace">vd-&gt;data_source_button_send</span>) to handle the &quot;send&quot; event. For more information, see <a href="#user-interaction">User Interaction</a>.</p>
+<p>The side image depicts the <span style="font-family: Courier New,Courier,monospace">vd-&gt;layout_data_source</span> layout only.</p>
+	</td>
+	<td>
+<pre class="prettyprint">
+static bool 
+__create_view_data_source(viewdata_s *vd)
+{
+&nbsp;&nbsp;&nbsp;vd-&gt;layout_data_source = view_generic_create_layout(vd-&gt;layout_main_panel, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EDJ_DATA_SOURCE_FILE_NAME, GROUP_DATA_SOURCE);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;vd-&gt;data_source_check = view_generic_create_checkbox(vd-&gt;layout_data_source, PART_DATA_SOURCE_CHECK, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;font color=#ffffff&gt;Use trusted message port&lt;/font&gt;&quot;);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;vd-&gt;data_source_entry = view_generic_create_entry(vd-&gt;layout_data_source, PART_DATA_SOURCE_ENTRY);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;elm_entry_single_line_set(vd-&gt;data_source_entry, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_entry_line_wrap_set(vd-&gt;data_source_entry, ELM_WRAP_WORD);
+
+&nbsp;&nbsp;&nbsp;vd-&gt;data_source_button_send = view_generic_create_button(vd-&gt;layout_data_source, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PART_DATA_SOURCE_BUTTON, &quot;Send&quot;, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__button_send_clicked_cb, (void *)vd);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+	</td>
+	<td>
+	  <p align="center">
+        <img alt="UI data source layout" height="410" src="../images/messageport_ui_layout_data_source_sd.png" />
+      </p>
+	</td>
+  </tr>
+  <tr>
+    <td id="ui-data-sink">
+	  <p><span style="font-family: Courier New,Courier,monospace">__create_data_sink()</span>:</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">vd-&gt;layout_data_sink</span> layout is created based on the <span style="font-family: Courier New,Courier,monospace">data_sink.edc</span> file. The resulting layout is embedded into the <span style="font-family: Courier New,Courier,monospace">PART_MAIN_CONTENT</span> part.</p>
+<p>Next, the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component is created and inserted into the <span style="font-family: Courier New,Courier,monospace">vd-&gt;layout_data_sink</span> layout. The <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component plays a role of a non-editable text panel for displaying the received messages.</p>
+	</td>
+	<td>
+<pre class="prettyprint">
+static bool 
+__create_data_sink(viewdata_s *vd)
+{
+&nbsp;&nbsp;&nbsp;vd-&gt;layout_data_sink = view_generic_create_layout(vd-&gt;layout_main_panel, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EDJ_DATA_SINK_FILE_NAME, GROUP_DATA_SINK);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;vd-&gt;sink_entry = view_generic_create_entry(vd-&gt;layout_data_sink, PART_DATA_SINK_ENTRY);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;elm_entry_single_line_set(vd-&gt;sink_entry, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_entry_editable_set(vd-&gt;sink_entry, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_entry_scrollable_set(vd-&gt;sink_entry, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+	</td>
+	<td>
+	  <p align="center">
+        <img alt="UI data sink layout" height="410" src="../images/messageport_ui_layout_data_sink_sd.png" />
+      </p>
+	</td>
+  </tr>
+</table>
+
+<h3 id="user-interaction">User Interaction</h3>
+
+  <p>The interaction between the user and the sample application must follow the scheme described below:</p>
+    <ul>
+		<li>Text message input</li>
+		<li>Selecting whether the message is to be sent through a trusted message port</li>
+		<li>Sending message to the data sink using the <strong>Send</strong> button</li>
+    </ul>
+  <p>After the message is successfully sent, the user can switch the view from the Data source to Data sink, where the received data is printed in a text form.</p>
+
+  <p>The text message sending procedure is triggered by the <strong>Send</strong> button click and implemented in the <span style="font-family: Courier New,Courier,monospace">__button_send_clicked_cb()</span> callback function:</p>
+  <ol>
+  <li>The text message provided by the user is obtained from the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component available from the Data source view.</li>
+<li>The state of the <span style="font-family: Courier New,Courier,monospace">elm_check</span> component is obtained, pointing to the trusted mode selection.</li>
+<li>The text message is bundled and sent through the message port to the Data sink with respect to the trusted mode selection.</li></ol>
+
+<pre class="prettyprint">
+static void 
+__button_send_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;// Variable declaration
+
+&nbsp;&nbsp;&nbsp;// Obtaining the text message and trusted mode selection state
+&nbsp;&nbsp;&nbsp;if (__get_input_data(vd, &amp;text, &amp;trusted_port))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Text message bundling and sending through message port
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;controller_data_source_send_message((const char *)text, trusted_port);
+
+&nbsp;&nbsp;&nbsp;if (text)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(text);
+}
+</pre>
+
+  <p>The <span style="font-family: Courier New,Courier,monospace">__get_input_data()</span> function is responsible for obtaining the user data, and its implementation boils down to the invocation of the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_check_state_get()</span> functions
+  with the <span style="font-family: Courier New,Courier,monospace">vd-&gt;data_source_entry</span> and <span style="font-family: Courier New,Courier,monospace">vd-&gt;data_source_check</span> parameters.</p>
+
+  <p>For more information on the implementation of the <span style="font-family: Courier New,Courier,monospace">controller_data_source_send_message()</span> function, see <a href="#controller-data-source">Data Source Controller</a>.</p>
+
+<h3 id="controller">Controller</h3>
+  <p>  The objective of the general Controller module is to handle the application initialization and termination procedures. For the function invocation contexts, see <a href="#app-init">Application Initialization</a>.</p>
+  <p>The <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function handles:</p>
+  <ul>
+    <li><a href="#view">User interface creation</a>: <span style="font-family: Courier New,Courier,monospace">view_create_base_gui()</span></li>
+       <li><a href="#controller-data-sink">Data sink creation and initialization</a>: <span style="font-family: Courier New,Courier,monospace">controller_data_sink_init()</span></li>
+  </ul>
+  <p>If any of the above functions fail, the <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function returns a failure status which results in the application termination.</p>
+
+<pre class="prettyprint">
+bool 
+controller_initialization(viewdata_s *vd)
+{
+&nbsp;&nbsp;&nbsp;return (view_create_base_gui(vd) &amp;&amp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;controller_data_sink_init(__message_port_message_cb));
+}
+</pre>
+
+  <p>When the application is terminated, the <span style="font-family: Courier New,Courier,monospace">controller_terminate()</span> function is called. It is responsible for deleting the user interface and releasing resources. For more information on the used functions, see <a href="#controller-data-sink">Data Sink Controller</a> and <a href="#view">View</a>.</p>
+
+<pre class="prettyprint">
+void 
+controller_terminate(viewdata_s *vd)
+{
+&nbsp;&nbsp;&nbsp;controller_data_sink_finit();
+&nbsp;&nbsp;&nbsp;view_destroy_base_gui(vd);
+}
+</pre>
+
+
+<h4 id="controller-data-source">Data Source Controller</h4>
+  <p>The Data source controller module is responsible for data bundling and sending through the message port. For more information on the function triggering the entire process (<span style="font-family: Courier New,Courier,monospace">controller_data_source_send_message()</span>), see <a href="#user-interaction">User Interaction</a>.</p>
+  
+    <p>All user input data is passed as parameters to the <span style="font-family: Courier New,Courier,monospace">controller_data_source_send_message()</span> function:</p>
+  <ul>
+    <li><span style="font-family: Courier New,Courier,monospace">text</span>: Message text provided by the user</li>
+       <li><span style="font-family: Courier New,Courier,monospace">trusted_port</span>: User selection of the message port trust mode</li>
+  </ul>
+  <p>The bundle object is created and filled with the user message text by the <span style="font-family: Courier New,Courier,monospace">__create_bundle()</span> function. At the beginning, an empty bundle object is created, and then the message text is added with the <span style="font-family: Courier New,Courier,monospace">text-message</span> key name assigned to the defined <span style="font-family: Courier New,Courier,monospace">BUNDLE_DATA_KEY</span> symbol. Once it is created, the bundle object is sent to the Data sink through a message port with the <span style="font-family: Courier New,Courier,monospace">__send_bundle()</span> function.</p>
+
+<pre class="prettyprint">
+bool 
+controller_data_source_send_message(const char *text, bool trusted_port)
+{
+&nbsp;&nbsp;&nbsp;bundle *bundle_obj = NULL;
+
+&nbsp;&nbsp;&nbsp;if (!__create_bundle(&amp;bundle_obj, text))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;if (!__send_bundle(bundle_obj, trusted_port)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model_bundle_destroy(bundle_obj);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;model_bundle_destroy(bundle_obj);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+static bool 
+__create_bundle(bundle **bundle_obj, const char *text)
+{
+&nbsp;&nbsp;&nbsp;if (!model_bundle_create(bundle_obj))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;if (!model_bundle_add_string(bundle_obj, BUNDLE_DATA_KEY, text)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model_bundle_destroy(*bundle_obj);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+  <p>For more information on the model functions, see <a href="#model-bundle">Bundle Model</a>.</p>
+
+  <p>The <span style="font-family: Courier New,Courier,monospace">__send_bundle()</span> function sends the created bundle to the Data sink:</p>
+
+<pre class="prettyprint">
+static bool 
+__send_bundle(bundle *bundle_obj, bool trusted_port)
+{
+&nbsp;&nbsp;&nbsp;if (trusted_port) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return model_message_port_send_trusted_message(bundle_obj);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return model_message_port_send_message(bundle_obj);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+  <p>Depending on the user selection regarding the trusted mode, the bundle is sent using:</p>
+  <ul>
+    <li><span style="font-family: Courier New,Courier,monospace">model_message_port_send_trusted_message()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">model_message_port_send_message()</span></li>
+  </ul>
+  <p>For the implementation of both functions, see <a href="#model-bundle">Bundle Model</a>.</p>
+
+
+<h4 id="controller-data-sink">Data Sink Controller</h4>
+  <p>The Data sink controller module is responsible for initializing and finalizing the communication channel through the message port and receiving messages. The Data sink initialization function (<span style="font-family: Courier New,Courier,monospace">controller_data_sink_init()</span>) is invoked from the <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function contained in the general <a href="#controller">Controller</a> module. Similarly, the finalization function (<span style="font-family: Courier New,Courier,monospace">controller_data_sink_finit()</span>) is called from the <span style="font-family: Courier New,Courier,monospace">controller_terminate()</span> function contained in the same Controller module.</p>
+  <p>In the message port initialization procedure, <a href="#model-message-port">2 new communication channels are created</a> using the <span style="font-family: Courier New,Courier,monospace">model_message_port_register_port()</span> and <span style="font-family: Courier New,Courier,monospace">model_message_port_register_trusted_port()</span> functions with the <span style="font-family: Courier New,Courier,monospace">__message_port_message_cb()</span> and <span style="font-family: Courier New,Courier,monospace">__message_port_trusted_message_cb()</span> callback functions attached.</p>
+<p>When a new message arrives, one of the 2 attached callback functions is invoked with the received data passed as the callback function&#39;s argument. The <span style="font-family: Courier New,Courier,monospace">__message_port_message_cb()</span> callback function is invoked if the message is received through non-trusted message port. The second callback function (<span style="font-family: Courier New,Courier,monospace">__message_port_trusted_message_cb()</span>) is invoked if the message is received through a trusted message port channel.</p>
+<p>Additionally, the <span style="font-family: Courier New,Courier,monospace">controller_data_sink_init()</span> function takes 1 parameter
+  (<span style="font-family: Courier New,Courier,monospace">msg_rcv_cb</span>), which points to a callback function defined in the general <a href="#controller">Controller</a> module. This callback function is called whenever any message from a message port is received (trusted or non-trusted).</p>
+
+<pre class="prettyprint">
+bool 
+controller_data_sink_init(message_received_cb msg_rcv_cb)
+{
+&nbsp;&nbsp;&nbsp;__message_received_cb = msg_rcv_cb;
+
+&nbsp;&nbsp;&nbsp;if (!model_message_port_register_port(__message_port_message_cb, NULL))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;if (!model_message_port_register_trusted_port(__message_port_trusted_message_cb, NULL))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+void 
+controller_data_sink_finit(void)
+{
+&nbsp;&nbsp;&nbsp;bool exists = false;
+
+&nbsp;&nbsp;&nbsp;if (model_message_port_check_remote_port(&amp;exists)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (exists)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model_message_port_unregister_port();
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;exists = false;
+
+&nbsp;&nbsp;&nbsp;if (model_message_port_check_trusted_remote_port(&amp;exists)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (exists)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model_message_port_unregister_trusted_port();
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The general approach of data extraction from a received bundle object is based on the knowledge about its structure (see the bundle object structure in the <a href="#workflow">Application workflow</a> image). Due to the simplicity of bundled data (message text), the procedure of message extraction is limited to obtaining a text value from the known key name of the bundle object:</p>
+
+<pre class="prettyprint">
+static void 
+__message_port_message_process(int local_port_id, const char *remote_app_id, 
+&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 *remote_port, bool trusted_port, bundle *message)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;char *msg = NULL;
+&nbsp;&nbsp;&nbsp;if (!model_bundle_get_string(message, BUNDLE_DATA_KEY, &amp;msg))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;__message_received_cb(local_port_id, remote_app_id, remote_port, 
+&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;trusted_port, (const char *)msg);
+}
+</pre>
+
+  <p>The <span style="font-family: Courier New,Courier,monospace">__message_port_message_process()</span> function is invoked by one of the receiving callback functions (<span style="font-family: Courier New,Courier,monospace">_message_port_message_cb()</span> and
+  <span style="font-family: Courier New,Courier,monospace">__message_port_trusted_message_cb()</span>). At the end of the
+  <span style="font-family: Courier New,Courier,monospace">__message_port_message_process()</span> function, the
+  <span style="font-family: Courier New,Courier,monospace">__message_received_cb()</span> callback function is called. This callback function is assigned through the <span style="font-family: Courier New,Courier,monospace">msg_rcv_cb</span> parameter of the <span style="font-family: Courier New,Courier,monospace">controller_data_sink_init()</span> function.</p>
+  
+  <p>For more information on the implementation details of the following functions, see <a href="#model-bundle">Bundle Model</a> and <a href="#model-message-port">Message Port Model</a>:</p>
+  <ul>
+    <li><span style="font-family: Courier New,Courier,monospace">model_bundle_get_string()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">model_message_port_register_port()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">model_message_port_register_trusted_port()</span></li>
+  </ul>
+
+
+ <p>In case the <span style="font-family: Courier New,Courier,monospace">__message_received_cb()</span> callback function is called successfully, the message text is displayed in the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component in the Data sink view (for the text output structure, see the implementation of the
+  <span style="font-family: Courier New,Courier,monospace">__message_port_message_cb()</span> callback function in the general Controller module). An example of the text output is depicted in the <a href="#app-screenshot">Message Port screens</a> figure.</p>
+
+
+<h3 id="model-bundle">Bundle Model</h3>
+  <p>The Bundle model module provides a set of wrapper functions for the Bundle API used by the <a href="#controller-data-source">Data source controller</a> and the <a href="#controller-data-sink">Data sink controller</a> modules for the bundle object management:</p>
+  <ul>
+    <li>Creating and removing the bundle object:
+	<pre class="prettyprint">
+bool 
+model_bundle_create(bundle **bundle_obj)
+{
+&nbsp;&nbsp;&nbsp;// Bundle object is created
+&nbsp;&nbsp;&nbsp;*bundle_obj = bundle_create();
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+bool 
+model_bundle_destroy(bundle *bundle_obj)
+{
+&nbsp;&nbsp;&nbsp;// Bundle object is freed
+&nbsp;&nbsp;&nbsp;int ret = bundle_free(bundle_obj);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+       <li>Adding a text string to the bundle object:
+	   <pre class="prettyprint">
+bool 
+model_bundle_add_string(bundle **bundle_obj, const char *key, const char *value)
+{
+&nbsp;&nbsp;&nbsp;// String value assigned to the given key is added to the bundle
+&nbsp;&nbsp;&nbsp;int ret = bundle_add_str(*bundle_obj, key, value);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+       <li>Extracting a text string from the bundle object:
+	   <pre class="prettyprint">
+bool 
+model_bundle_get_string(bundle *bundle_obj, const char *key, char **value)
+{
+&nbsp;&nbsp;&nbsp;*value = NULL;
+
+&nbsp;&nbsp;&nbsp;// String value assigned to the given key is acquired from the bundle
+&nbsp;&nbsp;&nbsp;int ret = bundle_get_str(bundle_obj, key, value);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+  </ul>
+
+<h3 id="model-message-port">Message Port Model</h3>
+  <p>The Message port model module provides a set of wrapper functions for the Message Port API used by the <a href="#controller-data-sink">Data sink controller</a> and the <a href="#controller-data-source">Data source controller</a> modules:</p>
+  <ul>
+    <li>Creating and removing the message port:
+	<pre class="prettyprint">
+bool 
+model_message_port_register_port(message_port_message_cb callback, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Local message port is registered with a callback function assigned
+&nbsp;&nbsp;&nbsp;// Callback function is called whenever a message is received
+&nbsp;&nbsp;&nbsp;// If the returned value is non-negative, the message port is created successfully
+&nbsp;&nbsp;&nbsp;// Otherwise, the ret value points to the error code
+&nbsp;&nbsp;&nbsp;int ret = message_port_register_local_port(MESSAGE_PORT_REMOTE_NAME, callback, user_data);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;// Identifier of a message port is stored
+&nbsp;&nbsp;&nbsp;_local_port_id = ret;
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+bool 
+model_message_port_register_trusted_port(message_port_trusted_message_cb callback, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Trusted local message port is registered with a callback function assigned
+&nbsp;&nbsp;&nbsp;// Callback function is called whenever a trusted message is received
+&nbsp;&nbsp;&nbsp;// If the returned value is non-negative, the trusted message port is created successfully
+&nbsp;&nbsp;&nbsp;// Otherwise, the ret value points to the error code
+&nbsp;&nbsp;&nbsp;int ret = message_port_register_trusted_local_port(MESSAGE_PORT_TRUSTED_REMOTE_NAME, callback, user_data);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;// Identifier of a trusted message port is stored
+&nbsp;&nbsp;&nbsp;_local_trusted_port_id = ret;
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+bool 
+model_message_port_unregister_port(void)
+{
+&nbsp;&nbsp;&nbsp;// Local message port is unregistered based on its identifier
+&nbsp;&nbsp;&nbsp;int ret = message_port_unregister_local_port(_local_port_id);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+bool 
+model_message_port_unregister_trusted_port(void)
+{
+&nbsp;&nbsp;&nbsp;// Trusted local message port is unregistered based on its identifier
+&nbsp;&nbsp;&nbsp;int ret = message_port_unregister_trusted_local_port(_local_trusted_port_id);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+	</li>
+       <li>Checking the message port existence:
+	   <pre class="prettyprint">
+bool 
+model_message_port_check_remote_port(bool *exists)
+{
+&nbsp;&nbsp;&nbsp;*exists = false;
+
+&nbsp;&nbsp;&nbsp;// Check whether the message port with given name (MESSAGE_PORT_REMOTE_NAME) exists
+&nbsp;&nbsp;&nbsp;int ret = message_port_check_remote_port(PACKAGE, MESSAGE_PORT_REMOTE_NAME, exists);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+bool 
+model_message_port_check_trusted_remote_port(bool *exists)
+{
+&nbsp;&nbsp;&nbsp;*exists = false;
+
+&nbsp;&nbsp;&nbsp;// Check whether the trusted message port with given name (MESSAGE_PORT_TRUSTED_REMOTE_NAME) exists
+&nbsp;&nbsp;&nbsp;int ret = message_port_check_trusted_remote_port(PACKAGE, MESSAGE_PORT_TRUSTED_REMOTE_NAME, exists);
+&nbsp;&nbsp;&nbsp;// Error handling
+ 
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+       <li>Sending the bundle object:
+	   <pre class="prettyprint">
+bool 
+model_message_port_send_message(bundle *message)
+{
+&nbsp;&nbsp;&nbsp;// Bundled message is sent over the previously created message port
+&nbsp;&nbsp;&nbsp;int ret = message_port_send_message(PACKAGE, MESSAGE_PORT_REMOTE_NAME, message);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+bool 
+model_message_port_send_trusted_message(bundle *message)
+{
+&nbsp;&nbsp;&nbsp;// Bundled message is sent over the previously created trusted message port
+&nbsp;&nbsp;&nbsp;int ret = message_port_send_trusted_message(PACKAGE, MESSAGE_PORT_TRUSTED_REMOTE_NAME, message);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+  </ul>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/notificationmanager_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/notificationmanager_sd_mn.htm
index 7dec5b6..81bb76b 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/notificationmanager_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/notificationmanager_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>NotificationManager Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/paint_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/paint_sd_mn.htm
index f873f7f..db26545 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/paint_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/paint_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>Paint Sample Overview</h1> 
@@ -1107,4 +1107,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.sampledescriptions/html/mobile_n/pedometer_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/pedometer_sd_mn.htm
index 7db893f..76d1ce8 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/pedometer_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/pedometer_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>Pedometer Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/piano_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/piano_sd_mn.htm
index 2b585e6..2362bd4 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/piano_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/piano_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>Piano Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/preference_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/preference_sd_mn.htm
index 8ea90df..ba6c3c5 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/preference_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/preference_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>Preference Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/puzzle_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/puzzle_sd_mn.htm
index 7920e98..1941c73 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/puzzle_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/puzzle_sd_mn.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
   <h1>Puzzle Sample Overview</h1>
 
@@ -31,17 +31,21 @@
 <p class="figure">Figure: Puzzle main view</p>
 <p align="center"><img src="../images/puzzle_main.png" alt="Puzzle main view" /></p>
 
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privilege must be set:</p>
+ <ul>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/systemsettings</span></li>
+ </ul>
+
 <h2 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)
+void 
+puzzle_create(appdata_s *data)
 {
 &nbsp;&nbsp;&nbsp;_D(&quot;Puzzle_create&quot;);
 &nbsp;&nbsp;&nbsp;ret_if(!data);
@@ -100,9 +104,10 @@ void puzzle_create(appdata_s *data)
 </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>
+<p>The <span style="font-family: Courier New,Courier,monospace">move_***_cb()</span> function moves 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)
+int 
+move_puzzle_to_right(void *data)
 {
 &nbsp;&nbsp;&nbsp;retv_if(!data, 0); 
 
@@ -148,7 +153,8 @@ int move_puzzle_to_right(void *data)
 <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)
+void 
+puzzle_correct_cb(appdata_s *data)
 {
 &nbsp;&nbsp;&nbsp;ret_if(!data);
 
@@ -159,7 +165,7 @@ void puzzle_correct_cb(appdata_s *data)
 &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;// Make a popup for congratulations
 &nbsp;&nbsp;&nbsp;popup = elm_popup_add(win);
 &nbsp;&nbsp;&nbsp;elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
 
@@ -201,7 +207,8 @@ void puzzle_correct_cb(appdata_s *data)
 
 <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)
+void 
+_level_button_cb(void *data, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;ret_if(!data);
 
@@ -256,4 +263,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.sampledescriptions/html/mobile_n/scheduler_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/scheduler_sd_mn.htm
index 2da1ecd..2880e80 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/scheduler_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/scheduler_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>Scheduler Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/scroller_index_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/scroller_index_sd_mn.htm
index 246c8c3..413554f 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/scroller_index_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/scroller_index_sd_mn.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
   <h1>Scroller Index Sample Overview</h1>
 
@@ -96,7 +96,7 @@ Evas_Object *page_scroller_create(Evas_Object *parent, int p_width, int p_height
 &nbsp;&nbsp;&nbsp;// Switch off limiting the scroller&#39;s minimum size to the minimum size of its content
 &nbsp;&nbsp;&nbsp;elm_scroller_content_min_limit(page_scroller, EINA_FALSE, EINA_FALSE);
 
-&nbsp;&nbsp;&nbsp;// Set the bouncing behaviour. The bounce effect is shown when the scroller reaches the last page
+&nbsp;&nbsp;&nbsp;// Set the bouncing behavior. The bounce effect is shown when the scroller reaches the last page
 &nbsp;&nbsp;&nbsp;// In this case, it must be switched off
 &nbsp;&nbsp;&nbsp;elm_scroller_bounce_set(page_scroller, EINA_FALSE, EINA_TRUE);
 
@@ -290,8 +290,8 @@ static Eina_Bool init_position_set_cb(void *data)
 &nbsp;&nbsp;&nbsp;int i = 0;
 
 &nbsp;&nbsp;&nbsp;// Obtain the pointer to the used objects
-&nbsp;&nbsp;&nbsp;page_scroller = init_data->scroller;
-&nbsp;&nbsp;&nbsp;index = init_data->box;
+&nbsp;&nbsp;&nbsp;page_scroller = init_data-&gt;scroller;
+&nbsp;&nbsp;&nbsp;index = init_data-&gt;box;
 
 &nbsp;&nbsp;&nbsp;// Obtain active page in page scroller component
 &nbsp;&nbsp;&nbsp;c_page = page_scroller_current_page_number_get(page_scroller);
@@ -424,8 +424,8 @@ static void page_area_changed_cb(void *data, Evas_Object *obj, void *event_info)
 &nbsp;&nbsp;&nbsp;// Set the rotation angles of the indexes
 &nbsp;&nbsp;&nbsp;// The next page rotation angle is increased by 360 degrees because the rotate 
 &nbsp;&nbsp;&nbsp;// function does not work if the angle is lower than 0 and the scroller is moved from right to left
-&nbsp;&nbsp;&nbsp;indice_rotate(cb_data->box, current_page, 90 + angle);
-&nbsp;&nbsp;&nbsp;indice_rotate(cb_data->box, next_page, 360 + angle);
+&nbsp;&nbsp;&nbsp;indice_rotate(cb_data-&gt;box, current_page, 90 + angle);
+&nbsp;&nbsp;&nbsp;indice_rotate(cb_data-&gt;box, next_page, 360 + angle);
 }
 </pre></li></ul>
 
@@ -453,4 +453,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.sampledescriptions/html/mobile_n/sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
index 747b449..2b84c12 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 	
   <h1>Mobile Native Sample Descriptions</h1> 
@@ -71,7 +71,7 @@
      <td>Demonstrates how you can manage contacts.</td>
     </tr>
 	<tr> 
-     <td><a href="evas_gl_sd_mn.htm">EvasGLCube</a></td>
+     <td><a href="evas_gl_sd_mn.htm">EvasGLCube</a></td> 
      <td>Demonstrates how you can implement a cube that can be rotated on the screen through Evas_GL.</td>
     </tr>
 	<tr> 
@@ -111,6 +111,18 @@
      <td>Demonstrates how you can develop media handling applications with the ability to manage different media sources.</td>
     </tr>
 	<tr> 
+     <td><a href="mediacontroller_client_sd_mn.htm">Media-controller-client</a></td> 
+     <td>Demonstrates how you can create a custom media controller client type application.</td>
+    </tr>
+	<tr> 
+     <td><a href="mediacontroller_server_sd_mn.htm">Media-controller-server</a></td> 
+     <td>Demonstrates how you can create a custom media controller server type application.</td>
+    </tr>
+    <tr>
+     <td><a href="messageport_sd_mn.htm">Message Port</a></td>
+     <td>Demonstrates how you can implement a data exchange mechanism using the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a> API.</td>
+    </tr>
+	<tr> 
      <td><a href="notificationmanager_sd_mn.htm">Notification Manager</a></td> 
      <td>Demonstrates how you can present a notification to the user.</td>
     </tr>
@@ -134,10 +146,6 @@
      <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>
@@ -169,7 +177,7 @@
     </tr>
 	<tr>
      <td><a href="systeminfo_sd_mn.htm">System Info</a></td>
-     <td>Demonstrates how you how to get system information.</td>
+     <td>Demonstrates how you can get system information.</td>
     </tr>
 	<tr>
      <td><a href="taskmanager_sd_mn.htm">Taskmanager</a></td>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/selfcamera_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/selfcamera_sd_mn.htm
index 7a79863..f57ecf5 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/selfcamera_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/selfcamera_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>SelfCamera Sample Overview</h1> 
@@ -32,45 +32,36 @@
 <p class="figure">Figure: SelfCamera main view</p> 
 <p align="center"><img alt="SelfCamera main screen" src="../images/selfcamera_start.png" /></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/camera</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span></li>
+ </ul>
+
 <h2>Implementation</h2>
 
 <p>To use the camera:</p>
 <ol>
-<li>Add required privileges.
-<p>To use the camera, the application has to request permission by adding the corresponding privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file. In this case, the <span style="font-family: Courier New,Courier,monospace;">appmanager.launch</span> privilege is also added to allow the launch of other applications, such as the gallery.</p>
-
-<pre class="prettyprint">
-&lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/camera&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
-&lt;/privileges&gt;
-</pre>
-<p>This can also be done using the Tizen Manifest Editor.</p>
-</li>
-
 <li>Create the layout for the camera preview.
 <p>The <span style="font-family: Courier New,Courier,monospace;">main_view_add()</span> function creates the main layout of the SelfCamera application and adds the <span style="font-family: Courier New,Courier,monospace;">evas_object_image</span> for displaying the camera preview.</p>
 
 <pre class="prettyprint">
 Evas_Object * main_view_add(Evas_Object *navi)
 {
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;// SELF_CAMERA_LAYOUT refers to &quot;edje/self-camera.edj&quot;
 &nbsp;&nbsp;&nbsp;elm_layout_file_set(view-&gt;layout, get_resource_path(SELF_CAMERA_LAYOUT), &quot;layout&quot;);
 &nbsp;&nbsp;&nbsp;// Signal for default timer option to be selected
 &nbsp;&nbsp;&nbsp;elm_object_signal_emit(view-&gt;layout, &quot;mouse,clicked,1&quot;, &quot;timer_2&quot;);
 &nbsp;&nbsp;&nbsp;view-&gt;preview_canvas = evas_object_image_filled_add(evas_object_evas_get(view-&gt;layout));
     
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;// view-&gt;preview_canvas is placed at &quot;elm.swallow.content&quot;
 &nbsp;&nbsp;&nbsp;elm_object_part_content_set(view-&gt;layout, &quot;elm.swallow.content&quot;, view-&gt;preview_canvas);
 &nbsp;&nbsp;&nbsp;view-&gt;camera_enabled = _main_view_start_preview(view); 
     
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;_main_view_thumbnail_load(view);
 &nbsp;&nbsp;&nbsp;_main_view_register_cbs(view);
 
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;return view-&gt;layout;
 } 
 </pre>
@@ -122,11 +113,9 @@ static Eina_Bool _main_view_start_preview(main_view *view)
 <pre class="prettyprint">
 static Eina_Bool _main_view_timer_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;view-&gt;timer_count = view-&gt;timer_count - 1;
 &nbsp;&nbsp;&nbsp;if (view-&gt;timer_count &gt; 0)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
 &nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;else
@@ -136,7 +125,6 @@ static Eina_Bool _main_view_timer_cb(void *data)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;camera_start_capture(view-&gt;camera, _main_view_capture_cb, _main_view_capture_completed_cb, view);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
 &nbsp;&nbsp;&nbsp;}
 }
@@ -149,7 +137,6 @@ static Eina_Bool _main_view_timer_cb(void *data)
 <pre class="prettyprint">
 static void _main_view_capture_cb(camera_image_data_s *image, camera_image_data_s *postview, camera_image_data_s *thumbnail, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;if (image-&gt;format == CAMERA_PIXEL_FORMAT_JPEG)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char filename[PATH_MAX] = { &#39;\0&#39; };
@@ -176,7 +163,6 @@ static void _main_view_capture_cb(camera_image_data_s *image, camera_image_data_
 <pre class="prettyprint">
 static void _main_view_capture_completed_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;camera_start_preview(view-&gt;camera);
 }
 </pre>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/sensorapp_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/sensorapp_sd_mn.htm
index 0aa56fb..04e2283 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/sensorapp_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/sensorapp_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>SensorApp Sample Overview</h1> 
@@ -265,8 +265,8 @@ static void _data_view_value_items_update(data_view *view, float *values)
 &nbsp;&nbsp;&nbsp;if (view-&gt;chart &amp;&amp; update_chart)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sensor_data_chart_update(view-&gt;chart, view-&gt;sensor_info-&gt;value_range,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view-&gt;sensor_info-&gt;axes, values, data_view_item_colors,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view-&gt;sensor_info-&gt;value_count);
+&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;view-&gt;sensor_info-&gt;axes, values, data_view_item_colors,
+&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;view-&gt;sensor_info-&gt;value_count);
 &nbsp;&nbsp;&nbsp;}
 }
 </pre>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/simple_home_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/simple_home_sd_mn.htm
index dc7bd94..3b9d935 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/simple_home_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/simple_home_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>Simple Homescreen Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/sketch_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/sketch_sd_mn.htm
index 1950785..7c07fb9 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/sketch_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/sketch_sd_mn.htm
@@ -20,11 +20,11 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.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 Sketch application demonstrates how you can 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>
@@ -36,9 +36,10 @@
 <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>
+<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.</p>
 <pre class="prettyprint">
-static int _layout_create(appdata_s *ad)
+static int 
+_layout_create(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;// Image
 &nbsp;&nbsp;&nbsp;img = image_create(ad);
@@ -52,7 +53,7 @@ static int _layout_create(appdata_s *ad)
 &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;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;
@@ -102,13 +103,14 @@ static int _layout_create(appdata_s *ad)
 
 <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)
+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;// 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));
@@ -140,12 +142,13 @@ Evas_Object *image_create(appdata_s *ad)
 }
 </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>
+<p>When the move event callback in the 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:
+<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)
+static void 
+_draw_cb(int x, int y, void *data, Evas_Object* obj)
 {
 &nbsp;&nbsp;&nbsp;ret_if(!data);
 
@@ -167,9 +170,9 @@ static void _draw_cb(int x, int y, void *data, Evas_Object* obj)
 &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;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;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;{
@@ -185,7 +188,8 @@ static void _draw_cb(int x, int y, void *data, Evas_Object* obj)
 </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)
+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);
@@ -258,7 +262,7 @@ static void _move_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 
 &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;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;{
@@ -320,12 +324,14 @@ static void _move_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 
 <h3>Palette</h3>
 
+<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>
+
 <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)
+static Evas_Object 
+*_create_colorselector(Evas_Object *parent, appdata_s *data)
 {
 &nbsp;&nbsp;&nbsp;retv_if(!data, NULL);
 
@@ -352,7 +358,8 @@ static Evas_Object *_create_colorselector(Evas_Object *parent, appdata_s *data)
 &nbsp;&nbsp;&nbsp;return colorselector;
 }
 
-static Evas_Object *_create_colorselector_layout(Evas_Object *parent, appdata_s *data)
+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);
@@ -375,6 +382,7 @@ static Evas_Object *_create_colorselector_layout(Evas_Object *parent, appdata_s
 &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);
@@ -386,7 +394,8 @@ static Evas_Object *_create_colorselector_layout(Evas_Object *parent, appdata_s
 
 <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)
+static void 
+_palette_button_cb(void *data, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;ret_if(!data);
 
@@ -402,9 +411,9 @@ static void _palette_button_cb(void *data, Evas_Object *obj, void *event_info)
 &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;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;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;}
@@ -438,12 +447,14 @@ static void _palette_button_cb(void *data, Evas_Object *obj, void *event_info)
 
 <h3>Pen</h3>
 
+<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> 
+
 <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)
+void 
+pen_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;ret_if(!data);
 
@@ -483,17 +494,18 @@ void pen_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 
 &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;ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(slider);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup_destroy(popup);
 
-&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&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>
+<p>Clicking <strong>OK</strong> 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)
+static void 
+_pen_button_cb(void *data, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;ret_if(!data);
 
@@ -515,12 +527,14 @@ static void _pen_button_cb(void *data, Evas_Object *obj, void *event_info)
 
 <h3>Eraser</h3>
 
+<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>
+
 <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)
+static void 
+_eraser_button_cb(void *data, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;ret_if(!data);
 
@@ -556,7 +570,8 @@ static void _eraser_button_cb(void *data, Evas_Object *obj, void *event_info)
 &nbsp;&nbsp;&nbsp;evas_object_del(popup);
 }
 
-void eraser_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+void 
+eraser_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;ret_if(!data);
 
@@ -614,12 +629,12 @@ void eraser_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 
 &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;ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(slider);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup_destroy(popup);
 
-&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 }
 </pre> 
 
@@ -627,7 +642,8 @@ ERROR:
 
 <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)
+void 
+save_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;ret_if(!data);
 
@@ -677,10 +693,11 @@ void save_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 &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);
+
+&nbsp;&nbsp;&nbsp;ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(btn);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup_destroy(popup);
 }
 </pre>
 
@@ -688,7 +705,8 @@ ERROR:
 
 <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 *))
+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);
@@ -751,4 +769,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.sampledescriptions/html/mobile_n/stopwatch_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/stopwatch_sd_mn.htm
index cb0086e..09fa2b3 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/stopwatch_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/stopwatch_sd_mn.htm
@@ -20,12 +20,12 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.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 Stopwatch sample demonstrates how you can 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>
 
@@ -42,7 +42,8 @@
 <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)
+static void 
+_create_stopwatch(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it = NULL;
 &nbsp;&nbsp;&nbsp;Evas_Object *box1 = NULL;
@@ -92,7 +93,7 @@ static void _create_stopwatch(appdata_s *ad)
 &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;// Show the window after the base GUI is set up
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
 
 &nbsp;&nbsp;&nbsp;return;
@@ -106,7 +107,8 @@ static void _create_stopwatch(appdata_s *ad)
   </p>
 
 <pre class="prettyprint">
-extern Evas_Object *view_create_stopwatch_display(appdata_s *ad)
+extern Evas_Object 
+*view_create_stopwatch_display(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *box = NULL;
 &nbsp;&nbsp;&nbsp;Evas_Object *grid = NULL;
@@ -147,8 +149,8 @@ extern Evas_Object *view_create_stopwatch_display(appdata_s *ad)
 
 &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;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;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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);
 
@@ -160,13 +162,14 @@ extern Evas_Object *view_create_stopwatch_display(appdata_s *ad)
 </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_start_cb()</span> function starts changing the display 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)
+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;
@@ -203,9 +206,10 @@ extern void stopwatch_button_clicked(void *data, Evas_Object *obj, void *event_i
 </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>
+<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 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)
+extern void 
+thread_job(void *data, Ecore_Thread *thread)
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
 &nbsp;&nbsp;&nbsp;viewdata_s *vd = NULL;
diff --git a/org.tizen.sampledescriptions/html/mobile_n/systeminfo_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/systeminfo_sd_mn.htm
index 73bf945..11c22b3 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/systeminfo_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/systeminfo_sd_mn.htm
@@ -20,32 +20,25 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.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 System Info sample application demonstrates how you can 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" />
+    <img alt="System info screens" src="../images/system_info_1.png" /> <img alt="System info screens" src="../images/system_info_2.png" /> <img alt="System Info screens" 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>
+<p>The application opens with 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>
+<p>To use the system information, 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>
@@ -56,9 +49,10 @@
 </pre>
 </li>
 
-<li>Initialize the application using a common Tizen application structure.
+<li>Initialize the application using a common Tizen application structure:
 <pre class="prettyprint">
-int main(int argc, char *argv[])
+int 
+main(int argc, char *argv[])
 {
 &nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
 &nbsp;&nbsp;&nbsp;int ret = 0;
@@ -91,7 +85,8 @@ int main(int argc, char *argv[])
 
 <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)
+static void 
+_create_base_gui(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *bg = NULL;
 &nbsp;&nbsp;&nbsp;Evas_Object *list = NULL;
@@ -130,22 +125,23 @@ static void _create_base_gui(appdata_s *ad)
 &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;// Base layout
 &nbsp;&nbsp;&nbsp;list = _create_main_list(ad);
 
-&nbsp;&nbsp;&nbsp;// Push the Main Layout to the Naviframe
+&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;// Show the window after the 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>
+<p>Each main menu list item has a callback function for getting the system information. If an item is clicked, the information about the category is illustrated in a genlist.</p>
 <pre class="prettyprint">
-Evas_Object *_create_main_list(appdata_s *ad)
+Evas_Object 
+*_create_main_list(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *list = NULL;
 
@@ -175,9 +171,10 @@ Evas_Object *_create_main_list(appdata_s *ad)
 </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>
+<p>The following code example is the callback function of the camera, which is a default double label list. The codes of others are similar.</p>
 <pre class="prettyprint">
-void camera_list_cb(void *data, Evas_Object *obj, void *event_info)
+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;
@@ -208,10 +205,10 @@ void camera_list_cb(void *data, Evas_Object *obj, void *event_info)
 &nbsp;&nbsp;&nbsp;elm_naviframe_item_push(navi, &quot;Camera&quot;, NULL, NULL, clist, NULL);
 }
 </pre>
-<ul>
-<li>Definitions
+<p>The following snippet shows the camera definitions. For more information, see the <a href="../../../org.tizen.guides/html/native/system/sysinfo_n.htm">System Information</a> guide.</p>
 <pre class="prettyprint">
-static struct camera_info 
+static struct 
+camera_info 
 {
 &nbsp;&nbsp;&nbsp;char *description;
 &nbsp;&nbsp;&nbsp;char *feature_key;
@@ -224,13 +221,11 @@ static struct camera_info
 &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>
+<p>This genlist makes the list with 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">system_info_get_platform_bool()</span> function of the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a> API.</p>
 <pre class="prettyprint">
-static char *_gl_text_get_cb(void *data, Evas_Object *obj, const char *part)
+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,};
@@ -259,8 +254,6 @@ static char *_gl_text_get_cb(void *data, Evas_Object *obj, const char *part)
 }
 </pre>
 </li>
-</ul>
-</li>
 </ol>
   
   
diff --git a/org.tizen.sampledescriptions/html/mobile_n/taskmanager_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/taskmanager_sd_mn.htm
index 317ff38..b0066bc 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/taskmanager_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/taskmanager_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>Taskmanager Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_alignment_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_alignment_sd_mn.htm
index e9fd571..24d147d 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_alignment_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_alignment_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Alignment Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_animation_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_animation_sd_mn.htm
index dc6f7bb..94194c8 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_animation_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_animation_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Animation Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_animator_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_animator_sd_mn.htm
index 54a9e11..e39e453 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_animator_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_animator_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Animator Sample Overview</h1> 
@@ -38,7 +38,6 @@
 <p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function draws 2 different rectangles and calls the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set()</span>, <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span>, <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span>, and <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add()</span> functions to give animation effects.</p>
 
 <pre class="prettyprint">
-
 typedef struct appdata 
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *win;
@@ -48,22 +47,23 @@ typedef struct appdata
 static void create_base_gui(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;Evas *evas;
-&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad->win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad->win)) {
-&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
-&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&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->win, "delete,request", win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-&nbsp;&nbsp;&nbsp;/* Base layout */
-&nbsp;&nbsp;&nbsp;ad->layout = elm_layout_add(ad->win);
-&nbsp;&nbsp;&nbsp;elm_layout_theme_set(ad->layout, "layout", "application", "default");
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad->layout);
-&nbsp;&nbsp;&nbsp;/* Animator */
-&nbsp;&nbsp;&nbsp;evas = evas_object_evas_get(ad->layout);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+&nbsp;&nbsp;&nbsp;// Base layout
+&nbsp;&nbsp;&nbsp;ad-&gt;layout = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_layout_theme_set(ad-&gt;layout, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;layout);
+&nbsp;&nbsp;&nbsp;// Animator
+&nbsp;&nbsp;&nbsp;evas = evas_object_evas_get(ad-&gt;layout);
 &nbsp;&nbsp;&nbsp;rect1 = evas_object_rectangle_add(evas);
 &nbsp;&nbsp;&nbsp;evas_object_color_set(rect1, 0, 0, 255, 255);
 &nbsp;&nbsp;&nbsp;evas_object_resize(rect1, 50, 50);
@@ -78,8 +78,8 @@ static void create_base_gui(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;timer1 = ecore_timer_add(10, _start_second_anim, rect1);
 &nbsp;&nbsp;&nbsp;timer2 = ecore_timer_add(5, _freeze_third_anim, anim2);
 &nbsp;&nbsp;&nbsp;timer3 = ecore_timer_add(10, _thaw_third_anim, anim2);
-&nbsp;&nbsp;&nbsp;/* Show window after base gui is set up */
-&nbsp;&nbsp;&nbsp;evas_object_show(ad->win);
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
 }
 </pre>
 
@@ -167,4 +167,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.sampledescriptions/html/mobile_n/ui_app_store_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_app_store_sd_mn.htm
index 6376a91..ffdb470 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_app_store_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_app_store_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] ApplicationStore Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_box_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_box_sd_mn.htm
index 5e0a0e0..0052d0f 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_box_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_box_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Box Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_calculator_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_calculator_sd_mn.htm
index 16c5026..7587e70 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_calculator_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_calculator_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] Calculator Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_clock_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_clock_sd_mn.htm
index be74e23..0caf1dc 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_clock_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_clock_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] Clock Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_components_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_components_sd_mn.htm
index b1bbea4..418a799 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_components_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_components_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>UI Components Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_1_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_1_sd_mn.htm
index 2159bd8..c2a881f 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_1_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_1_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Ecore Thread 1 Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_2_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_2_sd_mn.htm
index c4b1728..5f9f74b 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_2_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_2_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Ecore Thread 2 Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_3_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_3_sd_mn.htm
index f4b3834..f92d1d2 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_3_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_3_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Ecore Thread 3 Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_4_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_4_sd_mn.htm
index 9d82c18..c400d09 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_4_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_4_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Ecore Thread 4 Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_5_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_5_sd_mn.htm
index 9c2d9e1..fc13b63 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_5_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_ecore_thread_5_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Ecore Thread 5 Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_ecoreevent_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_ecoreevent_sd_mn.htm
index 6f92b1e..c732e2c 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_ecoreevent_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_ecoreevent_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] EcoreEvent Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_edc_format_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_edc_format_sd_mn.htm
index 9f3a1bc..78312fd 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_edc_format_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_edc_format_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] EDCformat Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_edc_map_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_edc_map_sd_mn.htm
index 76cb88f..7cc0574 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_edc_map_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_edc_map_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] EDC Map Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_elmtransit_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_elmtransit_sd_mn.htm
index a36071f..cab0a64 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_elmtransit_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_elmtransit_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Elm Transit Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_email_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_email_sd_mn.htm
index adb5e8e..88f57f1 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_email_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_email_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] Email Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_mapping_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_mapping_sd_mn.htm
index 8dacb6e..cb1faa6 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_mapping_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_mapping_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Evas Map Mapping Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_rotation_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_rotation_sd_mn.htm
index 631b0bb..1883ca6 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_rotation_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_rotation_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Evas Map Rotation Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_sd_mn.htm
index 5a65b4f..5c01b52 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_evas_map_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Evas Map Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_evasevent_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_evasevent_sd_mn.htm
index 706c6a6..2c26f5e 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_evasevent_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_evasevent_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Evas Event Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_gallery_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_gallery_sd_mn.htm
index 8bb3af2..bacf189 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_gallery_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_gallery_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Gallery Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_idler_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_idler_sd_mn.htm
index ff822a9..88c6479 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_idler_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_idler_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Idler Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_image_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_image_sd_mn.htm
index b705cff..6db6e24 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_image_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_image_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Image Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_inlist_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_inlist_sd_mn.htm
index 0a6009f..1cb191c 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_inlist_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_inlist_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] InList Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_job_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_job_sd_mn.htm
index e8d37f4..cd01314 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_job_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_job_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Job Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_language_change_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_language_change_sd_mn.htm
index 0f5f9c0..7493e3b 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_language_change_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_language_change_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] LanguageChange Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_layout_samples_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_layout_samples_sd_mn.htm
index a9c2835..4ce2c76 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_layout_samples_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_layout_samples_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] LayoutSample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_layout_signal_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_layout_signal_sd_mn.htm
index dcde1fd..aaca933 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_layout_signal_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_layout_signal_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] LayoutSignal Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_list_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_list_sd_mn.htm
index 9ce83f4..e2872b5 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_list_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_list_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] List Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_message_bubble_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_message_bubble_sd_mn.htm
index 02d1e43..fb02ba7 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_message_bubble_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_message_bubble_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] MessageBubble Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_proxy_object_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_proxy_object_sd_mn.htm
index 2688997..3e673f5 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_proxy_object_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_proxy_object_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Proxy Object Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_rectangle_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_rectangle_sd_mn.htm
index c02f2de..b1b0300 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_rectangle_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_rectangle_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] Rectangle Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_relative_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_relative_sd_mn.htm
index ae5adc0..cf9f3d4 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_relative_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_relative_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] RelativePositioning Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_setting_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_setting_sd_mn.htm
index 5f5c9be..39e0147 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_setting_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_setting_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] Setting Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_sns_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_sns_sd_mn.htm
index f4f1c51..9847b06 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_sns_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_sns_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] SNS Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_stringshare_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_stringshare_sd_mn.htm
index 23ac78a..e7d6127 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_stringshare_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_stringshare_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] StringShare Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_theme_extension_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_theme_extension_sd_mn.htm
index f590f76..b8d73af 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_theme_extension_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_theme_extension_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
 <h1>[UI Sample] ThemeExtension Sample Overview</h1>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_timer_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_timer_sd_mn.htm
index 1e103d1..70cea5d 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_timer_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_timer_sd_mn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
 
   <h1>[UI Sample] Timer Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_n/volume_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/volume_sd_mn.htm
index 9ef2912..65ab0fe 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/volume_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/volume_sd_mn.htm
@@ -20,7 +20,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
 	</div>
   <h1>Volume Sample Overview</h1>
 <p>The Volume sample demonstrates how you can use the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API to acquire and set the device sound levels. The application window consists of a list of sliders that manage the levels of different volume types.</p>
diff --git a/org.tizen.sampledescriptions/html/mobile_w/archivemanager_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/archivemanager_mw.htm
index 115ce58..22df4c2 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/archivemanager_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/archivemanager_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/bluetoothchat_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/bluetoothchat_mw.htm
index ef301c4..9cb8f1a 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/bluetoothchat_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/bluetoothchat_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/calculator_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/calculator_mw.htm
index 5620baf..1477198 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/calculator_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/calculator_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/calendar_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/calendar_mw.htm
index aee801d..1f7c02d 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/calendar_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/calendar_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/calllog_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/calllog_mw.htm
index e409f0e..2105a7c 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/calllog_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/calllog_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -52,6 +52,14 @@
    <li>An active SIM card</li> 
    <li>If the call history is empty, the application cannot be used.</li> 
    <li>The application does not work on the Emulator.</li>
+    <li>
+<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/application.launch</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/callhistory.read</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/callhistory.write</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/contact.read</span></li>
+ </ul>  </li>  
   </ul> 
   <h2>Source Files</h2> 
   <p>You can create and view the sample application project including the source files in the IDE.</p> 
@@ -117,17 +125,6 @@
   </table> 
     
 <h2 id="implementation">Implementation</h2>
-
-
-	
-<p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
-<pre class="prettyprint">
-&lt;!--config.xml--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/callhistory.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/callhistory.write&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/contact.read&quot;/&gt;
-</pre>
 <p>On initialization of the application layout, the Contact API is used to get phone contacts.</p>
 <pre class="prettyprint">
 /* app.ui.js */
diff --git a/org.tizen.sampledescriptions/html/mobile_w/chatter_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/chatter_mw.htm
index 0d92a10..548a072 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/chatter_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/chatter_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -46,8 +46,17 @@
   <h2>Prerequisites</h2> 
   <ul> 
    <li>2 devices with active SIM cards</li> 
-  </ul> 
 
+<li>
+<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/application.launch</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/contact.read</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/contact.write</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/messaging.read</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/messaging.write</span></li>
+ </ul>  </li>
+  </ul>
   <h2>Source Files</h2> 
   <p>You can create and view the sample application project including the source files in the IDE.</p> 
   <table border="1"> 
@@ -104,16 +113,6 @@
   </table> 
   
  <h2 id="implementation">Implementation</h2>
- 
- <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
- <pre class="prettyprint">
-&lt;!--config.xml--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/contact.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/contact.write&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/messaging.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/messaging.write&quot;/&gt;
-</pre>
 
 <p>On application launch during the creation of the <span style="font-family: Courier New,Courier,monospace">model</span> module, the Contact API is used to get contacts from the phone address book. The returned result is a unified address book object.</p>
 <pre class="prettyprint">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/compass_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/compass_mw.htm
index ba43fa4..b613fc3 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/compass_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/compass_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/contactlist_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/contactlist_mw.htm
index 83663ca..e0485ec 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/contactlist_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/contactlist_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/contactsexchanger_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/contactsexchanger_mw.htm
index be5ba9c..963ee4f 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/contactsexchanger_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/contactsexchanger_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/downloadmanager_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/downloadmanager_mw.htm
index 732e963..cd1f401 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/downloadmanager_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/downloadmanager_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/eventmanager_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/eventmanager_mw.htm
index 83a02a0..2a97872 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/eventmanager_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/eventmanager_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/exerciseplanner_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/exerciseplanner_mw.htm
index a48bc6d..1851057 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/exerciseplanner_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/exerciseplanner_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/filemanager_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/filemanager_mw.htm
index 3399a87..5fa7f8a 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/filemanager_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/filemanager_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm
index 99acda4..a3dd23c 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/hellotizen_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/hellotizen_mw.htm
index 5705179..0cf2595 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/hellotizen_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/hellotizen_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 
 	<div id="toc_border"><div id="toc">
@@ -68,7 +68,7 @@
    </tbody>
   </table>
   <h2>Implementation</h2>
-  <p>The following code adds a click event listener. When a click event occurs, the <strong>Hello Tizen</strong> text changes into the <strong>Hi Gear</strong> text.</p>
+  <p>The following code adds a click event listener. When a click event occurs, the <strong>Hello Tizen</strong> text changes into the <strong>Hi WebApp</strong> text.</p>
 <pre class="prettyprint">
 textbox.addEventListener(&#39;click&#39;, function() 
 {
diff --git a/org.tizen.sampledescriptions/html/mobile_w/hybridwebapp_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/hybridwebapp_mw.htm
index a36851c..315f1b8 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/hybridwebapp_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/hybridwebapp_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/mediacontent_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/mediacontent_mw.htm
index 27e0bcf..c850eab 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/mediacontent_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/mediacontent_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -40,6 +40,14 @@
   <p class="figure">Figure: MediaContent screens</p> 
   <p align="center"><img alt="MediaContent screens" src="../images/content_sd.png" /> </p> 
   <p>The application opens with the screen where you can choose the type of storage to check. After choosing the storage, you can choose the type of files to be retrieved. To view the details of the file, click the file name.</p>
+  
+     <h2>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/content.read</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/content.write</span></li>
+ </ul>  
+  
   <h2>Source Files</h2> 
   <p>You can create and view the sample application project including the source files in the IDE.</p> 
   <table border="1"> 
@@ -84,17 +92,6 @@
   </table> 
   
   <h2>Implementation</h2>
-  
-  <p>The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file contains the specified privileges for reading from and writing to the Content API.</p>
-
-<pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
-&lt;widget xmlns=&quot;http://www.w3.org/ns/widgets&quot; 
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.read&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.write&quot; /&gt;
-&lt;/widget&gt;
-</pre>
-  
 <p>To get all folders from the API, use the <span style="font-family: Courier New,Courier,monospace">getDirectories()</span> method from the <span style="font-family: Courier New,Courier,monospace">tizen.content</span> object.</p>
 <pre class="prettyprint">
 getFolders: function getFolders(successCallback, errorCallback) 
diff --git a/org.tizen.sampledescriptions/html/mobile_w/moneybook_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/moneybook_mw.htm
index 565e2fe..b403d31 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/moneybook_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/moneybook_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/multiprocess_hybrid_package_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/multiprocess_hybrid_package_mw.htm
index 48596ed..3ceddb2 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/multiprocess_hybrid_package_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/multiprocess_hybrid_package_mw.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">	
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 <h1>Multi-project Hybrid Application</h1> 
diff --git a/org.tizen.sampledescriptions/html/mobile_w/piano_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/piano_mw.htm
index 1415146..5aebbaf 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/piano_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/piano_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm
index 1a5ed91..9c8acd0 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
   <h1>Mobile Web Sample Descriptions</h1> 
  
@@ -68,7 +68,7 @@
      <td><a href="calendar_mw.htm">Calendar</a></td> 
      <td>Demonstrates how you can create a calendar displaying the month using: 
       <ul> 
-       <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time API</a></li>
+       <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">Time API</a></li>
       </ul></td> 
     </tr>
     <tr> 
@@ -223,22 +223,22 @@
        <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information</a> API</li> 
 	   <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html">Package</a> API</li>
       </ul><p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm">Task: System Information</a>.</p> </td> 
-    </tr>
+    </tr> 		
 <tr> 
      <td><a href="touchpaint_mw.htm">TouchPaint</a></td> 
      <td>Demonstrates how you can create a simple paint application through touch events and the <a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element using: 
       <ul> 
        <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1</a> API</li>  
       </ul> <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm">Task: Touch Paint</a>.</p></td> 
-    </tr>
-    <tr>
-     <td><a href="uicomponent_mw.htm">UIComponent</a></td>
-     <td>Demonstrates how you can use Tizen Advanced UI (TAU) UI components using:
-      <ul>
-       <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a> Reference</li>
-      </ul>
-      <p>This sample is also explained in the <a href="../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">UI Component Reference</a>.</p></td>
-    </tr>
+    </tr> 		
+	<tr>
+		<td><a href="uicomponent_mw.htm">UIComponent</a></td>
+		<td>Demonstrates how you can use Tizen Advanced UI (TAU) components using:
+		<ul>
+		<li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a> Reference</li>
+		</ul>
+		<p>This sample is also explained in the <a href="../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">UI Component Reference</a>.</p></td>
+	</tr>
    </tbody> 
   </table> 
 
@@ -290,4 +290,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.sampledescriptions/html/mobile_w/selfcamera_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/selfcamera_mw.htm
index deace14..b708380 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/selfcamera_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/selfcamera_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -41,6 +41,18 @@
   <p class="figure">Figure: SelfCamera screen</p> 
   <p align="center"><img alt="SelfCamera screen" src="../images/selfcamera.png" /> </p> 
   <p>The application opens with a screen that shows the front camera. To set the timer for 2, 5, or 10 seconds, click a timer option on top of the screen. To take a photo, click on the shutter button.</p>
+  
+    <h2>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/application.launch</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/filesystem.read</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/filesystem.write</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/content.read</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/content.write</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/mediacapture</span></li>
+ </ul>
+  
     <h2>Source Files</h2> 
    <table border="1"> 
    <tbody> 
@@ -65,17 +77,6 @@
 <h2>Implementation</h2>   
 <p>To use the camera:</p>
 <ol>
-<li>
-<p>Add the required privileges.</p>
-<p>To use the camera, the application has to request permissions by adding the corresponding privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. In this case, the <span style="font-family: Courier New,Courier,monospace">application.launch</span> privilege is also added to allow other applications to launch.</p>
-<pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot; /&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.read&quot; /&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.write&quot; /&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.read&quot; /&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.write&quot; /&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/mediacapture&quot; /&gt;
-</pre>
-</li>
 <li><p>Create the layout for the camera preview.</p>
 <pre class="prettyprint">&lt;body&gt;
 
diff --git a/org.tizen.sampledescriptions/html/mobile_w/sensorball_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/sensorball_mw.htm
index 3b67b8c..abfa067 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/sensorball_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/sensorball_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/soundmanager_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/soundmanager_mw.htm
index 7e344b8..682256a 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/soundmanager_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/soundmanager_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/systeminfo_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/systeminfo_mw.htm
index 57f620d..623d09b 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/systeminfo_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/systeminfo_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/touchpaint_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/touchpaint_mw.htm
index 4ac8b8d..c39fe80 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/touchpaint_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/touchpaint_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/mobile_w/uicomponent_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/uicomponent_mw.htm
index de272de..300fcea 100644
--- a/org.tizen.sampledescriptions/html/mobile_w/uicomponent_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/uicomponent_mw.htm
@@ -11,41 +11,41 @@
 	<script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
 	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-	<title>UIComponent Overview</title>
+	<title>UIComponent Overview</title>  
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
 		<ul class="toc">
-			<li><a href="../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU UI Guide</a></li> 
+			<li><a href="../../../org.tizen.ui.practices/html/web/tau/guides_tau_w.htm">TAU UI Practices</a></li> 
 			<li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a></li>
 		</ul>
 	</div></div>
 </div>	
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>UIComponent Overview</h1>
-  <p>The UIComponent sample application demonstrates how you can use TAU UI components.</p>
+  <h1>UIComponent Overview</h1> 
+  <p>The UIComponent sample application demonstrates how you can use TAU UI components.</p> 
   <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
-  <p>The following figure illustrates the main screen of the UIComponent. </p>
-  <p class="figure">Figure: UIComponent screen</p>
-  <p align="center"><img style="width:40%" alt="UIComponent screen" src="../images/uicomponent_mobile.png"/> </p>
+  <p>The following figure illustrates the main screen of the UIComponent. </p> 
+  <p class="figure">Figure: UIComponent screen</p> 
+  <p align="center"><img alt="UIComponent screen" src="../images/uicomponent_mobile.png"/> </p> 
   <p>The application opens with the main screen, which shows a list of the available UI components. Click a list item to choose the UI component you want to see: </p> 
   <ul> 
-   <li><strong>Header and Footer</strong>: You can view the page layout with header and footer.</li>
-   <li><strong>Navigation Elements</strong>: You can view various navigation components such as tabs, navigation, index scroll bar.</li>
-   <li><strong>List</strong>: You can view various list styles.</li>
-   <li><strong>Controls</strong>: You can view various control components.</li>
-   <li><strong>Popup</strong>: You can view various popup, context popup and toast popup.</li>
-   <li><strong>Gallery</strong>: You can view a gallery sample which using section-changer component.</li>
-   <li><strong>Multimedia View</strong>: You can view multimedia element using standard HTML video and audio tag.</li>
+	<li><strong>Header and Footer</strong>: View the page layout with header and footer.</li>
+	<li><strong>Navigation Elements</strong>: View various navigation components, such as tabs, navigation, and index scroll bar.</li>
+	<li><strong>List</strong>: View various list styles.</li>
+	<li><strong>Controls</strong>: View various control components.</li>
+	<li><strong>Popup</strong>: View various popup, context popup, and toast popup components.</li>
+	<li><strong>Gallery</strong>: View a gallery sample using a section-changer component.</li>
+	<li><strong>Multimedia View</strong>: View a multimedia element using a standard HTML video and audio element.</li>
   </ul> 
 
   <h2>Source Files</h2> 
@@ -55,22 +55,22 @@
     <tr> 
      <th>File name</th> 
      <th>Description</th> 
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
+	<td><span style="font-family: Courier New,Courier,monospace">components/</span> </td>
+	<td>This directory contains the HTML and JavaScript files for UI components.</td>
+    </tr>
+    <tr>
      <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td> 
      <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td> 
      <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td> 
     </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">components/</span> </td>
-     <td>This directory contains the HTML and JavaScript files for UI Components.</td>
-    </tr> 
-   </tbody> 
-  </table> 
-  
+   </tbody>
+  </table>
+ 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.sampledescriptions/html/wearable_n/analog_watch_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/analog_watch_sd_wn.htm
index ef23a7c..6d3d497 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/analog_watch_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/analog_watch_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>Analog Watch Sample Overview</h1> 
@@ -69,7 +69,7 @@ _create_analogwatch(appdata_s *ad)
 </li>
 
 <li>Create the detailed layout of the analog watch.
-<p>The <span style="font-family: Courier New,Courier,monospace;">_create_clock()</span> function creates the detailed layout of the analog watch application: it makes a rectangle which is the background of the analog watch, and always sets the size of the rectangle to become a square. It also makes hands of the analog watch.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">_create_clock()</span> function creates the detailed layout of the analog watch application: it makes a rectangle which is the background of the analog watch, and sets the size of the rectangle to become a square. It also makes the hands of the analog watch.</p>
 
 <pre class="prettyprint">
 static Evas_Object *
@@ -111,7 +111,7 @@ _create_clock(appdata_s *ad)
 </pre>
 </li>
 <li>Renew the time once per second. 
-<p>The <span style="font-family: Courier New,Courier,monospace;">app_time_tick()</span> function is one of the <span style="font-family: Courier New,Courier,monospace;">watch_app_lifecycle_callback_s</span> structure variables, and it called at least once per second. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace;">watch_time</span> handle. Therefore, the <span style="font-family: Courier New,Courier,monospace;">_clock_set_info_time()</span> function is also called once per second.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">app_time_tick()</span> function is one of the <span style="font-family: Courier New,Courier,monospace;">watch_app_lifecycle_callback_s</span> structure variables, and is called at least once per second. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace;">watch_time</span> handle. Therefore, the <span style="font-family: Courier New,Courier,monospace;">_clock_set_info_time()</span> function is also called once per second.</p>
 
 <pre class="prettyprint">
 static void 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/bluetoothchat_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/bluetoothchat_sd_wn.htm
index ce6fbed..2387372 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/bluetoothchat_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/bluetoothchat_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Circle) Bluetooth Chat Sample Overview</h1> 
@@ -32,12 +32,12 @@
 <p class="figure">Figure: (Circle) Bluetooth Chat screens</p>
 <p align="center"><img alt="(Circle) Bluetooth Chat screens" src="../images/bluetoothchat_circle_sd.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>  
+<p>The main screen has 2 buttons for finding devices (<strong>Search friends</strong>) and creating a server (<strong>Wait a friend</strong>). 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>Implementation</h2>
  
 <h3>Client</h3>
-<p>The client application is started by clicking <strong>Search friends</strong>. The client draws its own layout (list of found devices) with the <span style="font-family: Courier New,Courier,monospace">_search_layout_create()</span> function.</p>
+<p>To start the client application, click <strong>Search friends</strong>. The client draws its own layout (list of found devices) with the <span style="font-family: Courier New,Courier,monospace">_search_layout_create()</span> function.</p>
 
 <p>While drawing the list, the application starts finding devices with the <span style="font-family: Courier New,Courier,monospace">_discovery_start()</span> function. Set the device discovery state changed callback, and the list updates whenever a new device is found.</p>
 
@@ -68,7 +68,7 @@ _search_layout_create(appdata_s *ad)
 }
 </pre>
 
-<p>If you click an item on the list, the application starts to bond with the target device, and requests to connect to the target server. 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 chat room layout for chatting.</p>
+<p>If you click an item on the list, the application starts to bond with the target device, and requests to connect to the target server. When 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 for chatting.</p>
 <pre class="prettyprint">
 static void 
 _socket_conn_state_changed_cb(int result, bt_socket_connection_state_e connection_state, 
@@ -135,20 +135,20 @@ _device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_da
 
 &nbsp;&nbsp;&nbsp;return;
 
-DEL_NOTI:
+&nbsp;&nbsp;&nbsp;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;&nbsp;&nbsp;&nbsp;if (s_info.noti) 
+&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;s_info.noti = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 }
 </pre>
 
 <h3>Server</h3>
-<p>The server application is started by clicking <strong>Wait a friend</strong>. The role of this application is to create a server for chatting, and wait for a client. Before drawing the proper layout, it checks whether the device is discoverable using the <span style="font-family: Courier New,Courier,monospace">_server_create()</span> function.</p>
+<p>To start the server application, click <strong>Wait a friend</strong>. The role of this application is to create a server for chatting, and wait for a client. Before drawing the proper layout, it checks whether the device is discoverable using the <span style="font-family: Courier New,Courier,monospace">_server_create()</span> function.</p>
 <pre class="prettyprint">
 static void 
 _server_create(appdata_s *ad)
@@ -207,22 +207,22 @@ _server_layout_create(appdata_s *ad)
 
 &nbsp;&nbsp;&nbsp;return;
 
-ERROR:
-&nbsp;&nbsp;&nbsp;_E(&quot;Failed to create server layout&quot;);
+&nbsp;&nbsp;&nbsp;ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;Failed to create server layout&quot;);
 
-&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;&nbsp;&nbsp;&nbsp;if (layout) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layout = NULL;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;if (progress) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(progress);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progress = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 }
 </pre>
 
@@ -287,20 +287,20 @@ _main_view_create(appdata_s *ad)
 
 &nbsp;&nbsp;&nbsp;return layout;
 
-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;ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (layout) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layout = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;if (input_field) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(input_field);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input_field = NULL;
-&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (input_field) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(input_field);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input_field = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
 }
 
 static void 
@@ -388,20 +388,20 @@ _socket_data_received_cb(bt_socket_received_data_s *data, void *user_data)
 
 &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;ERROR:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bubble_table) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(bubble_table);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bubble_table = NULL;
+&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;if (message) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(message);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 }
 </pre>
 </li>
diff --git a/org.tizen.sampledescriptions/html/wearable_n/cairo_basic_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/cairo_basic_sd_wn.htm
index 390af16..94f2994 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/cairo_basic_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/cairo_basic_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Circle) Cairo Basic Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/cairo_evasgl_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/cairo_evasgl_sd_wn.htm
index e3e23d3..802283e 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/cairo_evasgl_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/cairo_evasgl_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Circle) Cairo EvasGL Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/circleemail_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/circleemail_sd_wn.htm
index 4802b84..79ef505 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/circleemail_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/circleemail_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Circle) Email Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/circlerotarytimer_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/circlerotarytimer_sd_wn.htm
index d6ff226..f079f4e 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/circlerotarytimer_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/circlerotarytimer_sd_wn.htm
@@ -21,12 +21,12 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.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 (Circle) Rotary Timer sample application demonstrates how you can 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>
 
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 d01a373..62e67c4 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/circlesettings_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/circlesettings_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Circle) Settings Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/circlesettingtime_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/circlesettingtime_sd_wn.htm
index 0ec959c..40bed55 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/circlesettingtime_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/circlesettingtime_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Circle) Setting Time Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/circleuicomponents_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/circleuicomponents_sd_wn.htm
index 26b314d..12b7aeb 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/circleuicomponents_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/circleuicomponents_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Circle) UI Components Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/digital_watch_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/digital_watch_sd_wn.htm
index c8b164c..2793293 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/digital_watch_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/digital_watch_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>Digital-Watch Sample Overview</h1> 
@@ -39,8 +39,7 @@
 <p>To implement the watch application:</p>
 <ol>
 <li>Add the header file.
-<p>The Watch Application API provides functions to manage the watch application life-cycle, represent the current date and time accurately, and get a watch application window. To use the functions and data types of the Watch Application API, include the <span style="font-family: Courier New,Courier,monospace;">watch_app.h</span> header file in your application:
-</p>
+<p>The Watch Application API provides functions to manage the watch application life-cycle, represent the current date and time accurately, and get a watch application window. To use the functions and data types of the <a href="../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API, include the <span style="font-family: Courier New,Courier,monospace;">watch_app.h</span> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;watch_app.h&gt;
 </pre>
diff --git a/org.tizen.sampledescriptions/html/wearable_n/evas_gl_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/evas_gl_sd_wn.htm
index d231b97..8d5e56e 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/evas_gl_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/evas_gl_sd_wn.htm
@@ -11,7 +11,7 @@
 	<script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
 	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-	<title>EvasGLCube Sample Overview</title>
+	<title>EvasGLCube Sample Overview</title>  
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
@@ -21,10 +21,10 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
-  <h1>EvasGLCube Sample Overview</h1>
+  <h1>EvasGLCube Sample Overview</h1> 
   <p>The EvasGLCube sample application demonstrates how to implement a rotatable cube on the screen using EvasGL with the Tizen SDK. The sample shows how to handle polygon geometry, and how to write a simple vertex and fragment shader for the cube. EvasGL is similar to the EGL&#8482; layer and is related to GLView.</p>
   
   
@@ -34,16 +34,16 @@
 		 <th class="note">Note</th> 
 		</tr> 
 		<tr> 
-		 <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.<p>A 3D application using the OpenGL ES must use the GLView. EvasGL can be used in special cases, such as a multi-thread.</p></td>
+		 <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.<p>A 3D application using the OpenGL ES must use the GLView. EvasGL can be used in special cases, such as a multi-thread.</p></td> 
 		</tr> 
 	   </tbody> 
 	  </table> 
   
   <p>The following figure illustrates the main screen of the EvasGLCube.</p>
-
-    <p class="figure">Figure: EvasGLCube screen</p>
-  <p align="center"><img alt="EvasGLCube screen" src="../images/evas_gl_sd_wn.png" /></p>
-
+  
+    <p class="figure">Figure: EvasGLCube screen</p> 
+  <p align="center"><img alt="EvasGLCube screen" src="../images/evas_gl_sd_wn.png" /></p>   
+ 
 <h2>Setting up the OpenGL ES Surface</h2>
 <p>The EvasGL interface is similar to the EGL interface. It can be connected to Evas so that OpenGL ES code works with Evas 2D objects.</p>
 <p>This sample shows how to implement with EvasGL to use OpenGL ES:</p>
@@ -58,7 +58,7 @@
 
 <pre class="prettyprint">EVAS_GL_GLOBAL_GLES2_DEFINE();</pre>
 
-<p>The EvasGL or GLView program uses the wrapper functions by the supported Evas GL. The wrapper function&#39;s interface is the same as OpenGL ES&#39;s. This macro can provide a set of convenience wrapper function tables.</p>
+<p>The EvasGL or GLView program uses the wrapper function by the supported Evas GL. The wrapper function&#39;s interface is the same as OpenGL ES&#39;s. This macro can provide a set of convenience wrapper function tables.</p>
 <pre class="prettyprint">
 Evas_Object *add_win(const char *name)
 {
@@ -74,7 +74,7 @@ Evas_Object *add_win(const char *name)
 &nbsp;&nbsp;&nbsp;return win;
 }
 </pre>
-<p>Before creating the Elm Window, we set the GL Rendering Engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set(&quot;opengl&quot;)</span> because EvasGL runs with EvasGL Render Engine.</p>
+<p>Before creating the Elm Window, set the GL Rendering Engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set(&quot;opengl&quot;)</span> function because EvasGL runs with EvasGL Render Engine.</p>
  
 <h2>Setting up Callbacks</h2>
 
@@ -123,11 +123,11 @@ static void init_evasgl(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
 
 &nbsp;&nbsp;&nbsp;ani = ecore_animator_add(animate_cb, ad-&gt;img);
-&nbsp;&nbsp;&nbsp;evas_object_data_set(ad->img, &quot;ani&quot;, ani);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad->conform,ad->img);
+&nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;img, &quot;ani&quot;, ani);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;img);
 }
 </pre>
-<p>To use EvasGL, we first create it, then set its configuration, and create the Evas GL surface and context. For rendering, we connect EvasGL with the Evas Object Image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_native_surface_set()</span>.</p>
+<p>To use EvasGL, create it, set its configuration, and create the Evas GL surface and context. For rendering, connect EvasGL with the Evas Object Image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_native_surface_set()</span> function.</p>
 </li>
 
 <li>Resize callbacks.
@@ -144,16 +144,16 @@ static void win_resize_cb(void *data, Evas *e , Evas_Object *obj , void *event_i
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = NULL;
 &nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, NULL, NULL, &amp;ad->surface_w, &amp;ad->surface_h);
-&nbsp;&nbsp;&nbsp;evas_object_image_size_set(ad-&gt;img, ad->surface_w, ad->surface_h);
-&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;img, ad->surface_w, ad->surface_h);
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, NULL, NULL, &amp;ad-&gt;surface_w, &amp;ad-&gt;surface_h);
+&nbsp;&nbsp;&nbsp;evas_object_image_size_set(ad-&gt;img, ad-&gt;surface_w, ad-&gt;surface_h);
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;img, ad-&gt;surface_w, ad-&gt;surface_h);
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;img);
 
 &nbsp;&nbsp;&nbsp;if (!ad-&gt;sfc) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Native_Surface ns;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, ad->surface_w, ad->surface_h);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, ad-&gt;surface_w, ad-&gt;surface_h);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(ad-&gt;img, EINA_TRUE);
@@ -165,7 +165,7 @@ static void win_resize_cb(void *data, Evas *e , Evas_Object *obj , void *event_i
 <li>Draw callbacks.
 <p>The Evas GL draw callback function is registered by the following Evas Object Image function:</p>
 <pre class="prettyprint">
- evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixel_cb, ad);
+evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixel_cb, ad);
 </pre>
 <p>This callback function is provided for on-demand mode. Especially, if Evas GL uses <span style="font-family: Courier New,Courier,monospace">EVAS_GL_OPTIONS_DIRECT</span>, all OpenGL ES options are called in this callback function.</p>
 <pre class="prettyprint">
@@ -191,19 +191,20 @@ static void img_pixel_cb(void *data, Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, 3 * 72 * 4, cube_vertices,GL_STATIC_DRAW);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_matrix(view);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad->surface_w &gt; ad->surface_h)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;surface_w &gt; ad-&gt;surface_h) 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float)ad->surface_w / ad->surface_h;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float)ad-&gt;surface_w / ad-&gt;surface_h;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view_set_ortho(view, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0, -1.0, 1.0);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float)ad->surface_h / ad->surface_w;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float)ad-&gt;surface_h / ad-&gt;surface_w;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view_set_ortho(view, -1.0, 1.0, -1.0 * aspect,  1.0 *aspect, -1.0, 1.0);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
 &nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;glViewport(0, 0, ad->surface_w, ad->surface_h);
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, ad-&gt;surface_w, ad-&gt;surface_h);
 &nbsp;&nbsp;&nbsp;glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
 &nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
@@ -243,7 +244,7 @@ static Eina_Bool animate_cb(void *data)
 }
 </pre>
 
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function sets dirty bit of the Evas Object image which is connected Evas GL. After that, the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_get_callback_set()</span> callback function is called whenever Evas renders.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function sets the dirty bit of the Evas Object image which is connected Evas GL. After that, the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_get_callback_set()</span> callback function is called whenever Evas renders.</p>
 </li>
 
 <li>Delete callbacks.
@@ -252,7 +253,7 @@ static Eina_Bool animate_cb(void *data)
 static void img_del_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Ecore_Animator *ani = evas_object_data_get(ad->img, &quot;ani&quot;);
+&nbsp;&nbsp;&nbsp;Ecore_Animator *ani = evas_object_data_get(ad-&gt;img, &quot;ani&quot;);
 &nbsp;&nbsp;&nbsp;ecore_animator_del(ani);
 
 &nbsp;&nbsp;&nbsp;// Free the GL resources when image object is deleted
@@ -294,4 +295,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.sampledescriptions/html/wearable_n/glview11_cube_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/glview11_cube_sd_wn.htm
index 8fbd4f3..73d1fc8 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/glview11_cube_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/glview11_cube_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>GLView11Cube Sample Overview</h1> 
@@ -46,7 +46,7 @@
 
  
 <h2>Initializing the Application</h2>
-<p>The easiest tool to use OpenGL ES within an EFL application is to rely on the Elementary GLView widget.</p>
+<p>The easiest tool to use OpenGL ES within an EFL application is to rely on the Elementary GLView component.</p>
 <p>Current GLView can support both GLES 2.0 and 1.1. GLView with the GLES 1.1 basic application has a similar format as the other GLView application.</p>
 <p>Create a basic application:</p>
 <pre class="prettyprint">
@@ -56,7 +56,7 @@
 #include &lt;dlog.h&gt;
 </pre>
 
-<p>The GLView application should include the header files as the <span style="font-family: Courier New,Courier,monospace">&lt;Evas_GL.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;Elementary.h&gt;</span>. The <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file is for key events and the <span style="font-family: Courier New,Courier,monospace">&lt;dlog.h&gt;</span> header file is for logs view.</p>
+<p>The GLView application should include the header files as the <span style="font-family: Courier New,Courier,monospace">&lt;Evas_GL.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;Elementary.h&gt;</span>. The <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file is for key events and the <span style="font-family: Courier New,Courier,monospace">&lt;dlog.h&gt;</span> header file is for the logs view.</p>
 <pre class="prettyprint">
 #define S(a) evas_object_show(a)
 
@@ -164,7 +164,7 @@ _glview_create(appdata_s *ad)
 <p>To set up callbacks:</p>
 <ol>
 <li>Set the initialization callback.
-<p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface created. This is called from the main loop, as are the 3 other callbacks.</p>
+<p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface have been created. This is called from the main loop, as are the 3 other callbacks.</p>
 <pre class="prettyprint">
 #include &lt;Elementary_GL_Helpers.h&gt;</pre>
 
@@ -238,7 +238,7 @@ void resize_gl(Evas_Object *obj)
 <pre class="prettyprint">
 void draw_gl(Evas_Object *obj)
 {
-ELEMENTARY_GLVIEW_USE(obj);
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_USE(obj);
 
 &nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 &nbsp;&nbsp;&nbsp;glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
@@ -298,7 +298,7 @@ _anim_cb(void *data)
 		 <th class="note">Note</th> 
 		</tr> 
 		<tr> 
-		 <td class="note">OpenGL ES 1.1 application can be implemented in Tizen. However, if OpenGL ES 1.1 and OpenGL ES 2.0 are used together, they cannot be used in the same file.</td>
+		 <td class="note">OpenGL ES 1.1 application can be implemented in Tizen. However, if OpenGL ES 1.1 and OpenGL ES 2.0 are used together, they cannot be used in the same file.</td> 
 		</tr> 
 	   </tbody> 
 	  </table>
diff --git a/org.tizen.sampledescriptions/html/wearable_n/glview_cube_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/glview_cube_sd_wn.htm
index cd736f2..63a8b4b 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/glview_cube_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/glview_cube_sd_wn.htm
@@ -21,12 +21,12 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>GLViewCube Sample Overview</h1> 
   
-<p>This sample demonstrates how to render with OpenGL ES 2.0 using an Elementary GLView Widget. It goes through the creation of a simple UI and how to draw a rotating cube using simple vertex and fragment shaders.</p>
+<p>This sample demonstrates how to render with OpenGL ES 2.0 using an Elementary GLView component. It goes through the creation of a simple UI and how to draw a rotating cube using simple vertex and fragment shaders.</p>
 
 	  <table class="note"> 
 	   <tbody> 
@@ -54,14 +54,12 @@
 #include &quot;glviewcube_utils.h&quot;
 
 ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
-...
+
 static bool app_create(void *data) 
 {
-...
 &nbsp;&nbsp;&nbsp;// Create and initialize GLView
 &nbsp;&nbsp;&nbsp;gl = elm_glview_add(ad-&gt;conform);
 &nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(gl);
-...
 }
 </pre>
 
@@ -69,7 +67,7 @@ static bool app_create(void *data)
 <ol>
 <li>Set the initialization callback.
 <p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface have been created.</p>
-<p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span>.</p>
+<p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span> function.</p>
 
 <pre class="prettyprint">
 static void init_gl(Evas_Object *obj) 
@@ -82,7 +80,6 @@ static void init_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 }
 </pre>
 </li>
@@ -90,7 +87,7 @@ static void init_gl(Evas_Object *obj)
 <li>Initialize the shaders.
 <ol type="a">
 <li>The shader instances for the fragment and vertex shader are compiled and created by passing the shader type as a parameter to the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.
-	<p>We should Load the shader objects, and use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
+	<p>Load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
 	<pre class="prettyprint">
 static void init_shaders(Evas_Object *obj) 
 {
@@ -106,7 +103,7 @@ static void init_shaders(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
 &nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
 </pre></li>
-	<li>Once the shader objects loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
+	<li>Once the shader objects have been loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
 	<pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
 &nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
@@ -139,7 +136,7 @@ static void init_shaders(Evas_Object *obj)
 static void resize_gl(Evas_Object *obj) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
-&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &ad->glview_w, &ad->glview_h);
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;ad-&gt;glview_w, &amp;ad-&gt;glview_h);
 }
 </pre>
 </li>
@@ -153,7 +150,6 @@ static void resize_gl(Evas_Object *obj)
 	<pre class="prettyprint">
 static void draw_gl(Evas_Object *obj) 
 {
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;glViewport(0, 0, ad-&gt;glview_w, ad-&gt;glview_h);
 </pre>
 	</li>
@@ -167,7 +163,7 @@ static void draw_gl(Evas_Object *obj)
 
 &nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_position);
 &nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_color);
-	</pre>
+</pre>
 	</li>
 
 	<li>The <span style="font-family: Courier New,Courier,monospace">glUniformMatrix4fv()</span> function modifies the values of the 4x4 MVP (Model View/Projection) uniform matrix according to the vertices information of the cube. An MVP matrix is created with data after each vertex of the cube has passed through 2 transformation stages: The first transformation state is the model view transformation, which includes translation, rotation, and scaling of objects. The second state is projection, which includes changes in the  perspective or orthography.
@@ -179,7 +175,8 @@ static void draw_gl(Evas_Object *obj)
 	<pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;glDrawElements(GL_TRIANGLES, cube_indices_count, 				
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_UNSIGNED_SHORT, cube_indices);
-	</pre>
+}
+</pre>
 	</li>
 	</ol>
 	</li>
@@ -190,14 +187,13 @@ static void draw_gl(Evas_Object *obj)
 static Eina_Bool anim(void *data) 
 {
 &nbsp;&nbsp;&nbsp;elm_glview_changed_set(data);
+
 &nbsp;&nbsp;&nbsp;return EINA_TRUE;
 }
 
 static bool app_create(void *data) 
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;ani = ecore_animator_add(anim, gl);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 }
 </pre>
 </li>
diff --git a/org.tizen.sampledescriptions/html/wearable_n/glview_shader_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/glview_shader_sd_wn.htm
index 022040c..50d5e7a 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/glview_shader_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/glview_shader_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>GLViewShader Sample Overview</h1> 
@@ -53,14 +53,12 @@
 #include &quot;glviewcube_utils.h&quot;
 
 ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
-...
+
 static bool app_create(void *data) 
 {
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;// Create and initialize GLView
 &nbsp;&nbsp;&nbsp;gl = elm_glview_add(ad-&gt;conform);
 &nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(gl);
-&nbsp;&nbsp;&nbsp;...
 }
 </pre>
 
@@ -71,7 +69,7 @@ static bool app_create(void *data)
 <li>Set the initialization callback.
 <p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface have been created.</p>
 <p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span> function.</p>
-<p>A Vertex Buffer Object (VBO) allows vertex array data to be stored in a high-performance graphics memory on the server, to maximize data transfer efficiency.</p>
+<p>A Vertex Buffer Object (VBO) allows vertex array data to be stored in a high-performance graphics memory on the server to maximize data transfer efficiency.</p>
 <p>A VBO is created in the application for the teapot vertices. Additionally, an Index Buffer Object (IBO) is created for the indices. The <span style="font-family: Courier New,Courier,monospace">glGenBuffers()</span> function specifies an array in which the buffer object name is stored.</p>
 <p>The <span style="font-family: Courier New,Courier,monospace">glBindBuffer()</span> function binds the buffer object to a specified target. In this case, the target is <span style="font-family: Courier New,Courier,monospace">GL_ARRAY_BUFFER</span>.</p>
 <p>The <span style="font-family: Courier New,Courier,monospace">glBufferData()</span> function is used to create a new data storage for the current buffer object. The parameters of the function are the buffer object target, the data store size, the array of teapot vertices, and the usage function of the data store (in this case, <span style="font-family: Courier New,Courier,monospace">GL_STATIC_DRAW</span>).</p>
@@ -79,11 +77,11 @@ static bool app_create(void *data)
 static void init_gl(Evas_Object *obj) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+
 &nbsp;&nbsp;&nbsp;if (!ad-&gt;initialized) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_shaders(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;idx_vbo);
@@ -105,10 +103,9 @@ static void init_gl(Evas_Object *obj)
 
 <li>Initialize the shaders:
 <ol type="a">
-	<li>Vertex and fragment shaders are created and compiled by passing shader parameters to the<span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.
-	<p>We should load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
+	<li>Vertex and fragment shaders are created and compiled by passing the shader parameters to the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.
+	<p>Load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
 	<pre class="prettyprint">
-	
 static void init_shaders(Evas_Object *obj) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
@@ -123,7 +120,7 @@ static void init_shaders(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
 &nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
 </pre></li>
-	<li>Once the shader objects are loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
+	<li>Once the shader objects have been loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
 	<pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
 &nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
@@ -133,7 +130,7 @@ static void init_shaders(Evas_Object *obj)
 </li>
 
 <li>Get the location for each attribute in the shader program using the <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> and <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> functions. If the shader program attributes, such as <span style="font-family: Courier New,Courier,monospace">u_mvpMatrix</span> and <span style="font-family: Courier New,Courier,monospace">a_position</span> are valid, these functions return an integer value that represents the index location of the attributes. For invalid attributes, the return value is -1.
-<p>The <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> retrieves the location of the uniform related to groups of vertices or pixels, such as model view matrix, projection matrix, or light position. The <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> retrieves the location of the attributes trelated to a vertex or pixel, such as position vector, normal vector, or vertex color.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> function retrieves the location of the uniform related to groups of vertices or pixels, such as the model view matrix, projection matrix, or light position. The <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> function retrieves the location of the attributes related to a vertex or pixel, such as position vector, normal vector, or vertex color.</p>
 <pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;ad-&gt;idx_light_dir = glGetUniformLocation(ad-&gt;program, &quot;u_light_dir&quot;);
 &nbsp;&nbsp;&nbsp;ad-&gt;idx_mvp = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMatrix&quot;);
@@ -170,12 +167,10 @@ static void resize_gl(Evas_Object *obj)
 <ol type="a">
 	<li>The <span style="font-family: Courier New,Courier,monospace">glViewport()</span> function specifies the affine transformation of the x and y values from normalized device coordinates to window coordinates as specified by the <span style="font-family: Courier New,Courier,monospace">elm_glview_size_get()</span> function.
 	<pre class="prettyprint">
-
 static void draw_gl(Evas_Object *obj) 
 {
-&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;ad-&gt;glview_w, &amp;ad-&gt;glview_h);
-&nbsp;&nbsp;&nbsp;...
+
 &nbsp;&nbsp;&nbsp;glViewport(0, 0, ad-&gt;glview_w, ad-&gt;glview_h);
 </pre>
 	</li>
@@ -186,7 +181,7 @@ static void draw_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;glUniform4fv(ad-&gt;idx_light_dir, 1, ad-&gt;light_dir);
 &nbsp;&nbsp;&nbsp;glUniformMatrix4fv(ad-&gt;idx_mvp, 1, GL_FALSE, ad-&gt;mvp);
 &nbsp;&nbsp;&nbsp;glUniform1f(ad-&gt;idx_time_stamp, ad-&gt;time_stamp);
-	</pre>
+</pre>
 	</li>
 	
 	<li>The <span style="font-family: Courier New,Courier,monospace">glVertexAttribPointer()</span> function is used to define an array of generic vertex attribute data. These attributes are parameters associated with each vertex of the teapot. In this case, they are position and normal.
@@ -201,14 +196,14 @@ static void draw_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(float) * 6, (void*) (sizeof(float) * 3));
 &nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_vnormal);
 &nbsp;&nbsp;&nbsp;glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ad-&gt;idx_ibo);
-	</pre>
+</pre>
 	</li>
 	
 	<li>Once the vertex arrays have been enabled, the actual process of rendering graphics primitives from the array data occurs using the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function.
 	<pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;glDrawElements(GL_TRIANGLES, MAX_F_COUNT * 3,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_UNSIGNED_SHORT, 0);
-	</pre>
+</pre>
 	</li>
 	
 	<li>The <span style="font-family: Courier New,Courier,monospace">glFlush()</span> function empties all buffers causing all issued commands to be executed as quickly as they are accepted by the rendering engine.
@@ -221,23 +216,22 @@ static void draw_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, 0);
 &nbsp;&nbsp;&nbsp;glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
 }
-	</pre>
+</pre>
 	</li></ol></li>
 
 <li>Add an animator.
-<p>The application regularly triggers the update of the GLView using the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</p>
+<p>The application regularly triggers an update of the GLView using the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</p>
 <pre class="prettyprint">
 static Eina_Bool anim(void *data) 
 {
 &nbsp;&nbsp;&nbsp;elm_glview_changed_set(data);
+
 &nbsp;&nbsp;&nbsp;return EINA_TRUE;
 }
 
 static bool app_create(void *data) 
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 &nbsp;&nbsp;&nbsp;ani = ecore_animator_add(anim, gl);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
 }
 </pre>
 </li>	
diff --git a/org.tizen.sampledescriptions/html/wearable_n/rectemail_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/rectemail_sd_wn.htm
index 25597fb..769774c 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/rectemail_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/rectemail_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Rectangle) Email Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/rectnotificationmanager_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/rectnotificationmanager_sd_wn.htm
index dc82234..44df9e3 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/rectnotificationmanager_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/rectnotificationmanager_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Rectangle) NotificationManager Sample Overview</h1> 
@@ -31,8 +31,8 @@
   
 <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 class="figure">Figure: (Rectangle) NotificationManager screens</p> 
+  <p align="center"><img alt="(Rectangle) NotificationManager 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> 
 
@@ -50,9 +50,9 @@
 <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)
+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;const char *content_text,const char *sound_path)
 {
 &nbsp;&nbsp;&nbsp;notification_h notify = notification_create(NOTIFICATION_TYPE_NOTI);
 &nbsp;&nbsp;&nbsp;if (notify)
@@ -97,7 +97,8 @@ notify_by_app_control_cb(notification_data *notify_data)
 &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;// Set extra data to app control
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification_post(notify_data-&gt;notification);
 &nbsp;&nbsp;&nbsp;}
 
@@ -141,7 +142,8 @@ notify_by_app_id_cb(notification_data *notify_data)
 &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;// Set the app package to app control
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification_post(notify_data-&gt;notification);
 &nbsp;&nbsp;&nbsp;}
 
@@ -205,7 +207,8 @@ remove_badge_number_by_app_id_cb(notification_data *notify_data)
 <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)
+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;);
@@ -220,7 +223,8 @@ static notification_h create_ongoing_notification(const char *image_path, const
 </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)
+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;
@@ -234,6 +238,7 @@ static int delete_ongoing_notification(notification_data *data)
 &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>
@@ -365,7 +370,7 @@ delete_ongoing_notification(enum ongoing_notification type)
 </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>To notify a 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 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/rectsettings_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/rectsettings_sd_wn.htm
index 40cd926..af2e002 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/rectsettings_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/rectsettings_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Rectangle) Settings Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/rectuicomponents_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/rectuicomponents_sd_wn.htm
index 4fd26f7..10dec1a 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/rectuicomponents_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/rectuicomponents_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Rectangle) UI Components Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/rectuidialer_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/rectuidialer_sd_wn.htm
index dc989c3..aa6693c 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/rectuidialer_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/rectuidialer_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>(Rectangle) UI Dialer Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
index ce7f04c..114fdf9 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 	
   <h1>Wearable Native Sample Descriptions</h1> 
@@ -102,7 +102,7 @@
      <td>Demonstrates how you can implement a watch application.</td>
     </tr>	
 	<tr> 
-     <td><a href="evas_gl_sd_wn.htm">EvasGLCube</a></td>
+     <td><a href="evas_gl_sd_wn.htm">EvasGLCube</a></td> 
      <td>Demonstrates how you can implement a cube that can be rotated on the screen through Evas_GL.</td>
     </tr>	
 	<tr> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/widget_animation_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/widget_animation_sd_wn.htm
index 934cfa0..231ac0d 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/widget_animation_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/widget_animation_sd_wn.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 
   <h1>Widget Animation Sample Overview</h1> 
diff --git a/org.tizen.sampledescriptions/html/wearable_w/altimeter_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/altimeter_ww.htm
index 4d4cf58..57f03db 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/altimeter_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/altimeter_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/analogwatch_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/analogwatch_ww.htm
index 25cbe19..09773c6 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/analogwatch_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/analogwatch_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/appcalleecaller_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/appcalleecaller_ww.htm
index 2e2fda9..d45ebba 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/appcalleecaller_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/appcalleecaller_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/basicwatch_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/basicwatch_ww.htm
index e10b4f4..4aacd45 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/basicwatch_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/basicwatch_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/calculator_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/calculator_ww.htm
index c446c82..3544fcc 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/calculator_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/calculator_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/calendar_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/calendar_ww.htm
index 3e2a77a..feebaab 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/calendar_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/calendar_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/camera_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/camera_ww.htm
index a8bf2fb..1797f5a 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/camera_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/camera_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/compass_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/compass_ww.htm
index e8fc07f..74b927a 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/compass_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/compass_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/digitalwatch_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/digitalwatch_ww.htm
index a52383a..1c2da1a 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/digitalwatch_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/digitalwatch_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/hellotizen_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/hellotizen_ww.htm
index 0aab6c7..f85a50f 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/hellotizen_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/hellotizen_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/minigallery_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/minigallery_ww.htm
index 3f778c6..57b8f5e 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/minigallery_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/minigallery_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/moneybook_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/moneybook_ww.htm
index 48c216b..212450b 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/moneybook_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/moneybook_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/newsfeed_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/newsfeed_ww.htm
index 0304a6a..916e3df 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/newsfeed_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/newsfeed_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm
index d9d80e6..a629ab6 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm
@@ -21,7 +21,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
   <h1>Wearable Web Sample Descriptions</h1> 
 
diff --git a/org.tizen.sampledescriptions/html/wearable_w/sensorball_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/sensorball_ww.htm
index 5073b60..8067f24 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/sensorball_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/sensorball_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/spinning_arrow_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/spinning_arrow_ww.htm
index fb1373f..8f3bfe9 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/spinning_arrow_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/spinning_arrow_ww.htm
@@ -18,13 +18,13 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
 		<ul class="toc">
-			<li><a href="../../../org.tizen.ui.guides/html/web/w3c/transform_w.htm">CSS Transforms UI Guide</a></li>  
+			<li><a href="../../../org.tizen.ui.practices/html/web/w3c/transform_w.htm">CSS Transforms</a></li>  
 		   <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms API</a></li>
 		   <li><a href="../../../org.tizen.gettingstarted/html/web/details/event_handling_w.htm">Rotary Events</a></li>		   
 		</ul>
diff --git a/org.tizen.sampledescriptions/html/wearable_w/stopwatch_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/stopwatch_ww.htm
index 7a0c448..6ed8229 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/stopwatch_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/stopwatch_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/sunburnmonitor_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/sunburnmonitor_ww.htm
index dd77c7c..dc783f4 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/sunburnmonitor_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/sunburnmonitor_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/touchpaint_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/touchpaint_ww.htm
index d545e40..6f3f6fe 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/touchpaint_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/touchpaint_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/voicerecorder_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/voicerecorder_ww.htm
index 7bcc598..a068dda 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/voicerecorder_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/voicerecorder_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/html/wearable_w/wearableuicomponents_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/wearableuicomponents_ww.htm
index 88526e7..bcb1a0d 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/wearableuicomponents_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/wearableuicomponents_ww.htm
@@ -18,13 +18,13 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
 		<ul class="toc">
-		   <li><a href="../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU UI Guide</a></li> 
+		   <li><a href="../../../org.tizen.ui.practices/html/web/tau/guides_tau_w.htm">TAU UI Practices</a></li> 
 		   <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a></li> 
 		</ul>
 	</div></div>
diff --git a/org.tizen.sampledescriptions/html/wearable_w/worldclock_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/worldclock_ww.htm
index b4cb644..6814884 100644
--- a/org.tizen.sampledescriptions/html/wearable_w/worldclock_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/worldclock_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.sampledescriptions/index.xml b/org.tizen.sampledescriptions/index.xml
index 78334f9..fb32366 100644
--- a/org.tizen.sampledescriptions/index.xml
+++ b/org.tizen.sampledescriptions/index.xml
@@ -32,6 +32,7 @@
 			<topic href="html/mobile_w/systeminfo_mw.htm" label="Systeminfo"></topic>
 			<topic href="html/mobile_w/touchpaint_mw.htm" label="TouchPaint"></topic>
 			<topic href="html/mobile_w/uicomponent_mw.htm" label="UIComponent"></topic>
+
 		</topic>
 		<topic href="html/wearable_w/sd_ww.htm" label="Wearable Web">
 			<topic href="html/wearable_w/altimeter_ww.htm" label="Altimeter"></topic>
@@ -76,13 +77,15 @@
 			<topic href="html/mobile_n/hybridservice_sd_mn.htm" label="HybridServiceApp"></topic>
 			<topic href="html/mobile_n/lockscreen_sd_mn.htm" label="Lockscreen"></topic>
 			<topic href="html/mobile_n/mediaapp_sd_mn.htm" label="Media App"></topic>
+			<topic href="html/mobile_n/mediacontroller_client_sd_mn.htm" label="Media-controller-client"></topic>
+			<topic href="html/mobile_n/mediacontroller_server_sd_mn.htm" label="Media-controller-server"></topic>
+			<topic href="html/mobile_n/messageport_sd_mn.htm" label="Message Port"></topic>
 			<topic href="html/mobile_n/notificationmanager_sd_mn.htm" label="Notification Manager"></topic>
 			<topic href="html/mobile_n/paint_sd_mn.htm" label="Paint"></topic>
 			<topic href="html/mobile_n/pedometer_sd_mn.htm" label="Pedometer"></topic>
 			<topic href="html/mobile_n/piano_sd_mn.htm" label="Piano"></topic>
 			<topic href="html/mobile_n/preference_sd_mn.htm" label="Preference"></topic>
 			<topic href="html/mobile_n/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>
@@ -150,7 +153,7 @@
 			<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>
 			<topic href="html/wearable_n/digital_watch_sd_wn.htm" label="Digital-Watch"></topic>
-			<topic href="html/wearable_n/evas_gl_sd_wn.htm" label="EvasGLCube"></topic>
+			<topic href="html/wearable_n/evas_gl_sd_wn.htm" label="EvasGLCube"></topic>	
 			<topic href="html/wearable_n/glview11_cube_sd_wn.htm" label="GLView11Cube"></topic>
 			<topic href="html/wearable_n/glview_cube_sd_wn.htm" label="GLViewCube"></topic>
 			<topic href="html/wearable_n/glview_shader_sd_wn.htm" label="GLViewShader"></topic>				
diff --git a/org.tizen.tutorials/html/images/mn_division.png b/org.tizen.tutorials/html/images/mn_division.png
index 1f7e337..faecb28 100644
Binary files a/org.tizen.tutorials/html/images/mn_division.png and b/org.tizen.tutorials/html/images/mn_division.png differ
diff --git a/org.tizen.tutorials/html/images/mobile_s_n.png b/org.tizen.tutorials/html/images/mobile_s_n.png
new file mode 100644
index 0000000..ad8c779
Binary files /dev/null and b/org.tizen.tutorials/html/images/mobile_s_n.png differ
diff --git a/org.tizen.tutorials/html/images/mobile_s_w.png b/org.tizen.tutorials/html/images/mobile_s_w.png
new file mode 100644
index 0000000..f86df29
Binary files /dev/null and b/org.tizen.tutorials/html/images/mobile_s_w.png differ
diff --git a/org.tizen.tutorials/html/images/mobile_s_w_optional.png b/org.tizen.tutorials/html/images/mobile_s_w_optional.png
new file mode 100644
index 0000000..0434b73
Binary files /dev/null and b/org.tizen.tutorials/html/images/mobile_s_w_optional.png differ
diff --git a/org.tizen.tutorials/html/images/mw_division.png b/org.tizen.tutorials/html/images/mw_division.png
index 8fc3efa..c4a8655 100644
Binary files a/org.tizen.tutorials/html/images/mw_division.png and b/org.tizen.tutorials/html/images/mw_division.png differ
diff --git a/org.tizen.tutorials/html/images/n_division.png b/org.tizen.tutorials/html/images/n_division.png
index d687bc5..5a0b8f6 100644
Binary files a/org.tizen.tutorials/html/images/n_division.png and b/org.tizen.tutorials/html/images/n_division.png differ
diff --git a/org.tizen.tutorials/html/images/w_division.png b/org.tizen.tutorials/html/images/w_division.png
index 88d9959..443a1ea 100644
Binary files a/org.tizen.tutorials/html/images/w_division.png and b/org.tizen.tutorials/html/images/w_division.png differ
diff --git a/org.tizen.tutorials/html/images/wearable_s_n.png b/org.tizen.tutorials/html/images/wearable_s_n.png
new file mode 100644
index 0000000..02e3791
Binary files /dev/null and b/org.tizen.tutorials/html/images/wearable_s_n.png differ
diff --git a/org.tizen.tutorials/html/images/wearable_s_w.png b/org.tizen.tutorials/html/images/wearable_s_w.png
new file mode 100644
index 0000000..379a9c5
Binary files /dev/null and b/org.tizen.tutorials/html/images/wearable_s_w.png differ
diff --git a/org.tizen.tutorials/html/images/wearable_s_w_optional.png b/org.tizen.tutorials/html/images/wearable_s_w_optional.png
new file mode 100644
index 0000000..cef460c
Binary files /dev/null and b/org.tizen.tutorials/html/images/wearable_s_w_optional.png differ
diff --git a/org.tizen.tutorials/html/images/wn_division.png b/org.tizen.tutorials/html/images/wn_division.png
index 11a7876..dca667f 100644
Binary files a/org.tizen.tutorials/html/images/wn_division.png and b/org.tizen.tutorials/html/images/wn_division.png differ
diff --git a/org.tizen.tutorials/html/images/ww_division.png b/org.tizen.tutorials/html/images/ww_division.png
index 65e7ab7..5f5160c 100644
Binary files a/org.tizen.tutorials/html/images/ww_division.png and b/org.tizen.tutorials/html/images/ww_division.png differ
diff --git a/org.tizen.tutorials/html/index.htm b/org.tizen.tutorials/html/index.htm
index 37f1d4b..3eab966 100644
--- a/org.tizen.tutorials/html/index.htm
+++ b/org.tizen.tutorials/html/index.htm
@@ -31,6 +31,7 @@
 			<ul>
 				<li><a href="web/tizen/application/alarm_tutorial_w.htm">Alarm</a></li>
 				<li><a href="web/tizen/application/application_tutorial_w.htm">Application</a></li>
+				<li><a href="web/tizen/application/appgroup_tutorial_w.htm">Application Group</a></li>
 				<li><a href="web/tizen/application/package_tutorial_w.htm">Package</a></li>
 				<li><a href="web/tizen/application/data_tutorial_w.htm">Data Control</a></li>
 			</ul>
@@ -188,7 +189,7 @@
 			<ul>
 				<li><a href="web/w3c/communication/web_messaging_tutorial_w.htm">HTML5 Web Messaging</a></li>						
 				<li><a href="web/w3c/communication/websocket_tutorial_w.htm">WebSocket</a></li>
-				<li><a href="web/w3c/communication/xmlhttprequest_tutorial_w.htm">XMLHttpRequest Level 1 and 2</a></li>	
+				<li><a href="web/w3c/communication/xmlhttprequest_tutorial_w.htm">XMLHttpRequest (Level 1 and 2)</a></li>	
 				<li><a href="web/w3c/communication/server_sent_tutorial_w.htm">Server-Sent Events</a></li>		
 			</ul>		
 		</li>
@@ -240,14 +241,21 @@
 	<ul>
 		<li><a href="native/account/account_tutorials_n.htm">Account</a>
 			<ul>
-				<li><a href="native/account/oauth2_tutorial_n.htm">oauth2</a></li>			
+				<li><a href="native/account/account_tutorial_n.htm">Account Manager</a></li>
+				<li><a href="native/account/oauth2_tutorial_n.htm">OAuth 2.0</a></li>	
 				<li><a href="native/account/sync_manager_tutorial_n.htm">Sync Manager</a></li>
 			</ul>
 		</li>
 		<li><a href="native/app_framework/app_framework_tutorials_n.htm">Application Framework</a>
 			<ul>
-				<li><a href="native/app_framework/application_tutorial_n.htm">Application</a></li>
-				<li><a href="native/app_framework/appgroup_tutorial_n.htm">Application Group</a></li>
+				<li><a href="native/app_framework/application_tutorial_n.htm">Application</a>
+					<ul>
+						<li><a href="native/app_framework/alarm_tutorial_n.htm">Alarm</a></li>
+						<li><a href="native/app_framework/appcontrol_tutorial_n.htm">App Control</a></li>			
+						<li><a href="native/app_framework/event_tutorial_n.htm">Event</a></li>
+						<li><a href="native/app_framework/preference_tutorial_n.htm">Preference</a></li>
+					</ul>				
+				</li>
 				<li><a href="native/app_framework/app_manager_tutorial_n.htm">Application Manager</a></li>
 				<li><a href="native/app_framework/badge_tutorial_n.htm">Badge</a></li>
 				<li><a href="native/app_framework/bundle_tutorial_n.htm">Bundle</a></li>
@@ -256,8 +264,8 @@
 				<li><a href="native/app_framework/notification_tutorial_n.htm">Notification</a></li>
 				<li><a href="native/app_framework/package_tutorial_n.htm">Package Manager</a></li>
 				<li><a href="native/app_framework/service_app_tutorial_n.htm">Service Application</a></li>
-				<li><a href="native/app_framework/widget_tutorial_n.htm">Widget Application</a></li>				
 				<li><a href="native/app_framework/shortcut_tutorial_n.htm">Shortcut</a></li>
+				<li><a href="native/app_framework/widget_tutorial_n.htm">Widget Application</a></li>				
 				<li><a href="native/app_framework/watch_tutorial_n.htm">Watch Application</a></li>
 			</ul>
 		</li>
@@ -295,8 +303,8 @@
 		<li><a href="native/location/location_tutorials_n.htm">Location</a>
 			<ul>
 				<li><a href="native/location/location_tutorial_n.htm">Location</a></li>
-				<li><a href="native/location/geofence_tutorial_n.htm">Geofence</a></li>
 				<li><a href="native/location/maps_tutorial_n.htm">Maps Service</a></li>
+				<li><a href="native/location/geofence_tutorial_n.htm">Geofence</a></li>
 			</ul>		
 		</li>
 		<li><a href="native/messaging/messaging_tutorials_n.htm">Messaging</a>
@@ -324,7 +332,7 @@
 				<li><a href="native/multimedia/tone_player_tutorial_n.htm">Tone Player</a></li>
 				<li><a href="native/multimedia/wav_player_tutorial_n.htm">WAV Player</a></li>
 				<li><a href="native/multimedia/sound_manager_tutorial_n.htm">Sound Manager</a></li>
-				<li><a href="native/multimedia/screen_mirroring_tutorial_n.htm">Screen Mirroring Sink</a></li>
+				<li><a href="native/multimedia/screen_mirroring_tutorial_n.htm">Screen Mirroring</a></li>
 				<li><a href="native/multimedia/video_util_tutorial_n.htm">Video Util</a></li>
 			</ul>
 		</li>
@@ -333,7 +341,7 @@
 				<li><a href="native/network/connection_tutorial_n.htm">Connection</a></li>
 				<li><a href="native/network/bluetooth_tutorial_n.htm">Bluetooth</a></li>
 				<li><a href="native/network/nfc_tutorial_n.htm">NFC</a></li>
-				<li><a href="native/network/smartcard_tutorial_n.htm">SmartCard</a></li>	
+				<li><a href="native/network/smartcard_tutorial_n.htm">Smartcard</a></li>	
 				<li><a href="native/network/wifi_tutorial_n.htm">Wi-Fi</a></li>
 				<li><a href="native/network/wifi_direct_tutorial_n.htm">Wi-Fi Direct</a></li>	
 			</ul>
@@ -346,10 +354,9 @@
 		</li>
 		<li><a href="native/social/social_tutorials_n.htm">Social</a>
 			<ul>
-				<li><a href="native/social/service_adaptor_tutorial_n.htm">Service Adaptor</a></li>
-				<li><a href="native/social/account_tutorial_n.htm">Account Manager</a></li>
-				<li><a href="native/social/calendar_tutorial_n.htm">Calendar</a></li>
 				<li><a href="native/social/contact_tutorial_n.htm">Contacts</a></li>
+				<li><a href="native/social/calendar_tutorial_n.htm">Calendar</a></li>
+				<li><a href="native/social/service_adaptor_tutorial_n.htm">Service Adaptor</a></li>
 			</ul>
 		</li>		
 		<li><a href="native/system/system_tutorials_n.htm">System</a>
@@ -374,6 +381,7 @@
 		<li><a href="native/ui/ui_tutorials_n.htm">UI Framework</a>
 			<ul>
 				<li><a href="native/ui/eom_tutorial_n.htm">External Output Manager</a></li>
+				<li><a href="native/ui/minicontrol_tutorial_n.htm">Minicontrol</a></li>
 			</ul>
 		</li>
 		<li><a href="native/uix/uix_tutorials_n.htm">UIX</a>
diff --git a/org.tizen.tutorials/html/native/account/account_tutorial_n.htm b/org.tizen.tutorials/html/native/account/account_tutorial_n.htm
new file mode 100644
index 0000000..1174046
--- /dev/null
+++ b/org.tizen.tutorials/html/native/account/account_tutorial_n.htm
@@ -0,0 +1,951 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Account Manager: Managing Account Information on the Device</title>
+ </head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+    </div>
+    <div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#init">Initializing the Accounts</a></li>
+			<li><a href="#add">Creating and Managing an Account</a></li>
+			<li>Information retrieval
+				<ul class="toc">
+					<li><a href="#get">Getting Account Information</a></li>
+					<li><a href="#retrieve">Retrieving Accounts by Package Name</a></li>
+					<li><a href="#capability">Retrieving Account Providers by Capability</a></li>
+				</ul>
+			</li>
+			<li><a href="#remove">Removing an Account</a></li>
+			<li><a href="#disconnect">Destroying the Account Handle</a></li>
+			<li><a href="#screen">Adding an Application on the Account Screen</a></li>
+			<li><a href="#queries">Performing Database Queries</a></li>
+			<li><a href="#secret">Managing Account Secrecy</a></li>
+			<li><a href="#update">Updating Accounts</a></li>
+			<li><a href="#type">Retrieving Account Types</a></li>
+		</ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.guides/html/native/account/account_manager_n.htm">Account Manager Guide</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API for Wearable Native</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Account Manager: Managing Account Information on the Device</h1>
+
+  
+ <p>This tutorial demonstrates how you can create, delete, and update accounts in the account database, and manage account information, such as user name, display name, domain name, and email address.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Account Manager API basics by learning about:</p>
+<ul>
+		<li><a href="#init">Initializing the Accounts</a>
+		<p>Initialize the account manager for use.</p></li>
+		<li><a href="#add">Creating and Managing an Account</a>
+		<p>Create an account, set its properties, and insert it to the database.</p></li>
+		<li>Information retrieval
+		<ul>
+		<li><a href="#get">Getting Account Information</a>
+		<p>Retrieve information for each existing account and implement a callback function.</p></li>
+		<li><a href="#retrieve">Retrieving Accounts by Package Name</a>
+		<p>Retrieve accounts based on a specific package.</p></li>
+		<li><a href="#capability">Retrieving Account Providers by Capability</a>
+		<p>Retrieve accounts providers based on a specific capability.</p></li>
+		</ul>
+		</li>
+		<li><a href="#remove">Removing an Account</a>
+		<p>Remove an account from the database.</p></li>
+		<li><a href="#disconnect">Destroying the Account Handle</a>
+		<p>Destroy the account handle.</p></li>
+		<li><a href="#screen">Adding an Application on the Account Screen</a>
+		<p>Display your application on the Add account screen of a Tizen device.</p>
+		</li>
+</ul>
+<h2>Follow-up</h2>
+<p>Once we have learned the basics of the Account Manager API, we can now move on to more advanced tasks, including:</p>
+<ul>
+		<li><a href="#queries">Performing Database Queries</a>
+		<p>Manage accounts and query them based on various attributes.</p></li>
+		<li><a href="#secret">Managing Account Secrecy</a>
+		<p>Manage account secrecy levels.</p></li>
+		<li><a href="#update">Updating Accounts</a>
+		<p>Update account details.</p></li>
+		<li><a href="#type">Retrieving Account Types</a>
+		<p>Retrieve account types.</p></li>
+		
+</ul>
+
+ <h2 id="init" name="init">Initializing the Accounts</h2>
+
+<p>To initialize the account manager:</p>
+<ol>
+<li> <p>To use the functions and data types of the Account Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;account.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;account.h&gt;
+</pre></li>
+<li><p>Declare the necessary global variables. To know whether a function has been executed properly, see that the return is equal to <span style="font-family: Courier New,Courier,monospace;">ACCOUNT_ERROR_NONE</span>.</p>
+ 
+<pre class="prettyprint">
+#include &lt;stdio.h&gt;
+#include &lt;time.h&gt;
+#include &lt;dlog.h&gt;
+
+static account_h account = NULL;
+static int account_id = 0;
+int ret = 0;
+</pre></li>
+
+<li><p>Set up the required privileges for your application:</p>
+
+<ul>
+<li>To use APIs for reading account data from the account database, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span> privilege to the manifest file.
+</li>
+
+<li>To use APIs for writing account data from the account database, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span> privilege to the manifest file.
+</li>
+
+</ul></li></ol>
+
+ <h2 id="add" name="add">Creating and Managing an Account</h2>
+
+<p>To create an account, set its properties, and add it to the account database:</p>
+
+
+<ol>
+
+<li>Create an account using the <span style="font-family: Courier New,Courier,monospace;">account_create()</span> function and the previously defined account handle:
+
+<pre class="prettyprint">
+ret = account_create(&amp;account);
+</pre>
+</li>
+<li>When the account is created, you can set account properties, such as name, display name, domain name, and email address:
+
+<pre class="prettyprint">
+char* account_name = &quot;Marcus&quot;;
+char* display_name = &quot;Marcus_display&quot;;
+char* domain_name = &quot;Marcus_domain&quot;;
+char* email_address = &quot;marcus@example.com&quot;;
+char* image_path = &quot;image_path&quot;;
+
+ret = account_set_user_name(account, account_name);
+
+ret = account_set_display_name(account, display_name);
+
+ret = account_set_domain_name(account, domain_name);
+
+ret = account_set_email_address(account, email_address);
+
+ret = account_set_icon_path(account, image_path);
+</pre>
+</li>
+
+<li>When the account is configured, use the <span style="font-family: Courier New,Courier,monospace;">account_insert_to_db()</span> function to insert the account to the account database. Use the account ID as the second parameter (<span style="font-family: Courier New,Courier,monospace;">account_id</span>):
+
+ <pre class="prettyprint">
+ret = account_insert_to_db(account, &amp;account_id);
+</pre>
+</li>
+</ol>
+
+ <h2 id="get" name="get">Getting Account Information</h2>
+
+<p>To get account information, such as user name, display name, domain name, and email address:</p>
+
+<ol>
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">account_get_total_count_from_db()</span> function to get the total number of inserted records.
+<p>To get individual records, use the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function, which iterates through all the records and invokes a callback function for each account:</p>
+<pre class="prettyprint">
+account_foreach_account_from_db(account_cb callback, void *user_data)
+</pre>
+ 
+<p>The function takes the following parameters:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">callback</span>: Callback function to be invoked</li>
+	<li><span style="font-family: Courier New,Courier,monospace;">user_data</span>: User data to be passed to the callback function</li>
+</ul>
+ 
+<pre class="prettyprint">
+int total_count = -1;
+ret = account_get_total_count_from_db(&amp;total_count);
+
+ret = account_foreach_account_from_db(on_account_read, NULL);
+</pre> 
+</li>
+
+<li>Define the callback function:
+<pre class="prettyprint">typedef bool(* account_cb)(account_h account, void *user_data)</pre>
+ 
+<p>The callback function takes the following parameters:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">account</span>: Account handle</li>
+	<li><span style="font-family: Courier New,Courier,monospace;">user_data</span>: User data passed from the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function</li>
+</ul>
+
+<p>This function retrieves information for each account.</p>
+</li>
+<li>To get more details, use the <span style="font-family: Courier New,Courier,monospace;">account_get_account_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_get_user_name()</span>, <span style="font-family: Courier New,Courier,monospace;">account_get_display_name()</span>, and <span style="font-family: Courier New,Courier,monospace;">account_get_icon_path()</span> functions:
+
+<pre class="prettyprint">
+static bool 
+on_account_read(account_h account, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+&nbsp;&nbsp;&nbsp;char *display_name = NULL;
+&nbsp;&nbsp;&nbsp;char *icon_path = NULL;
+&nbsp;&nbsp;&nbsp;// Get the account ID
+&nbsp;&nbsp;&nbsp;ret = account_get_account_id(account, &amp;account_id);
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// Get the user name
+&nbsp;&nbsp;&nbsp;ret = account_get_user_name(account, &amp;name);
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;name: %s&quot;, name);
+&nbsp;&nbsp;&nbsp;// Get the display name
+&nbsp;&nbsp;&nbsp;ret = account_get_display_name(account, &amp;display_name);
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;display_name: %s&quot;, display_name);
+&nbsp;&nbsp;&nbsp;// Get the icon path
+&nbsp;&nbsp;&nbsp;ret = account_get_icon_path(account, &amp;icon_path);
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;icon_path: %s&quot;, icon_path);
+
+&nbsp;&nbsp;&nbsp;free(name);
+&nbsp;&nbsp;&nbsp;free(display_name);
+&nbsp;&nbsp;&nbsp;free(icon_path);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+</li>
+</ol>
+
+ <h2 id="retrieve" name="retrieve">Retrieving Accounts by Package Name</h2>
+
+ <p>To retrieve accounts by a specific account provider:</p>
+  <ol>
+   <li>Define the <span style="font-family: Courier New,Courier,monospace">account_cb()</span> callback for getting data of accounts as a parameter of the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function:
+   <pre class="prettyprint">
+static bool 
+account_callback(account_h account, void* user_data) // account_cb() callback
+{
+&nbsp;&nbsp;&nbsp;// Called once for each account in the database
+}
+</pre></li>
+   <li>Retrieve the accounts of a specific account provider using the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function, and specifying the package name of the account provider:
+<pre class="prettyprint">int ret = -1;
+char* package_name = &quot;package_name&quot;;
+ret = account_query_account_by_package_name(account_callback, package_name, NULL);
+</pre></li>
+  </ol>
+
+ <h2 id="capability" name="capability">Retrieving Account Providers by Capability</h2>
+
+ <p>To retrieve account providers by a specific capability:</p>
+  <ol>
+   <li>Define <span style="font-family: Courier New,Courier,monospace">account_type_cb()</span> callback for getting account providers as a parameter of the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function. The callback takes the account provider handle as the first parameter.
+<pre class="prettyprint">
+static bool 
+account_type_callback(account_type_h account_type, void* user_data) // account_type_cb() callback
+{
+&nbsp;&nbsp;&nbsp;// Called once for each account type in the database
+}
+</pre>
+</li>
+   
+   <li>Retrieve the account providers of a specific capability by using the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function:
+<pre class="prettyprint">
+int ret = -1;
+char* capability = &quot;http://tizen.org/account/capability/contact&quot;;
+
+ret = account_type_create(&amp;account_type);
+
+account_type_query_by_provider_feature(account_type_callback, capability, NULL);
+</pre></li>
+  </ol>
+
+ <h2 id="remove" name="remove">Removing an Account</h2>
+
+<p>To remove an account, use the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_user_name()</span>, or <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_package_name()</span> function. They all remove a given account record.</p>
+
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">To get the ID needed as a parameter of the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span> function, use the <span style="font-family: Courier New,Courier,monospace;">account_get_account_id()</span> function.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<pre class="prettyprint">
+ret = account_delete_from_db_by_id(account_id);
+</pre>
+
+ <h2 id="disconnect" name="disconnect">Destroying the Account Handle</h2>
+
+<p>To destroy the account handle, use the <span style="font-family: Courier New,Courier,monospace;">account_destroy()</span> function:</p>
+<pre class="prettyprint">
+ret = account_destroy(account);
+</pre>
+
+ <h2 id="screen" name="screen">Adding an Application on the Account Screen</h2>
+
+<p>To add your application on the Add account screen of the device:</p>
+
+<ol>
+<li>Add the required information in the manifest file:
+<pre class="prettyprint">&lt;account&gt;
+&nbsp;&nbsp;&nbsp;&lt;account-provider appid=&quot;app-id name&quot; providerid=&quot;url style string&quot; multiple-accounts-support=&quot;true or false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account&quot;&gt;application icon name&lt;/icon&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account-small&quot;&gt;application small icon name&lt;/icon&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;Application name&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;Application name&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;ko-kr&quot;&gt;ߖȃخʼnL݇ Lا&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;capability&gt;http://tizen.org/account/capability/contact&lt;/capability&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;capability&gt;http://tizen.org/account/capability/calendar&lt;/capability&gt;
+&nbsp;&nbsp;&nbsp;&lt;/account-provider&gt;
+&lt;/account&gt;</pre>
+
+<p>The required information includes:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">appid=&quot;app-id name&quot;</span>
+<p>Application ID (for example, <span style="font-family: Courier New,Courier,monospace">appid=&quot;org.tizen.account&quot;</span>).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">providerid=&quot;url style string&quot;</span>
+<p>Provider identification string (for example, <span style="font-family: Courier New,Courier,monospace">providerid=&quot;http://www.tizen.org&quot;</span>).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">multiple-accounts-support=&quot;true or false&quot;</span>
+<p>Multiple account support (if your application can manage 2 or more accounts, set to <span style="font-family: Courier New,Courier,monospace">true</span>; otherwise set to <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">&lt;icon section=&quot;account&quot;&gt;application icon name&lt;/icon&gt;</span>
+<p>Icon displayed on the Add account screen.</p>
+<p>The icon size must be 72x72 px and the icon file must be in the <span style="font-family: Courier New,Courier,monospace">{app-root}\shared\res\</span> directory.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">&lt;icon section=&quot;account-small&quot;&gt;application small icon name&lt;/icon&gt;</span>
+<p>Small icon displayed on the Other application screen to represent the account provider.</p>
+<p>The small icon file must be in the <span style="font-family: Courier New,Courier,monospace">{app-root}\shared\res\</span> directory.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">&lt;label xml:lang=&quot;en-gb&quot;&gt;Application name&lt;/label&gt;</span>
+<p>Application name displayed on the Add account screen, according to the selected language.</p>
+<p>An account provider must have at least one label tag.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">&lt;capability&gt;http://tizen.org/account/capability/contact&lt;/capability&gt;</span>
+<p>For more information, see the <a href="../../../../org.tizen.guides/html/native/account/account_manager_n.htm">Account Manager</a> guide.</p></li></ul>
+</li>
+
+<li>Create the sign-in screen UI. 
+<p>When the user selects your application on the Add account screen, the Account Service launches your application with a specific operation ID (<span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span>) defined in the <span style="font-family: Courier New,Courier,monospace">account-types.h</span> header file, so the sign-in screen must be displayed.</p>
+
+  <p class="figure">Figure: Sign-in screen</p> 
+  <p align="center"><img alt="Sign-in screen" src="../../images/account_signin.png" /></p> 
+</li>
+</ol>
+
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">For more information on operations and events, see the <a href="../../../../org.tizen.guides/html/native/account/account_manager_n.htm">Account Manager</a> guide.</td>
+    </tr>
+   </tbody>
+  </table>
+
+ <h2 id="queries" name="queries">Performing Database Queries</h2>
+
+<p>To perform database queries:</p>
+
+
+<ol>
+<li>Prepare sample content. 
+<p>To perform queries, you need existing content in the database. To access the existing account, obtain it from the database. This can be done using a few functions, depending on the user requirements.</p>
+<p>To create new content to the database:</p>
+
+<ol type="a"><li><p>The <span style="font-family: Courier New,Courier,monospace;">Create_Account()</span> function creates a new account from a given <span style="font-family: Courier New,Courier,monospace;">account_h</span> handle and account details (name, display name, domain, e-mail). 3 capabilities are added to the account to demonstrate some of the query functions. The capabilities as well as user custom types can be predefined.</p>
+
+<p>After the account is created, it is added to the database. When no longer needed, destroy the account handle using the <span style="font-family: Courier New,Courier,monospace;">account_destroy(account)</span> function.</p>
+
+<pre class="prettyprint">
+int id[3];
+static account_h account = NULL;
+
+Create_Account(&amp;account, &quot;Person&quot;, &quot;DiplayPerson&quot;, &quot;Person Domain&quot;, &quot;someone1@somewho.com&quot;);
+
+account_set_capability(account, &quot;Custom&quot;, ACCOUNT_CAPABILITY_ENABLED);
+
+account_set_capability(account, &quot;Next&quot;, ACCOUNT_CAPABILITY_ENABLED);
+ 
+account_set_capability(account, &quot;Another&quot;, ACCOUNT_CAPABILITY_DISABLED);
+
+account_insert_to_db(account, &amp;id[0]);
+
+account_destroy(account);
+</pre></li>
+
+<li><p>Add 2 more accounts to the database:</p>
+
+<pre class="prettyprint">
+Create_Account(&amp;account, &quot;PersonX&quot;, &quot;DisplayX&quot;, &quot;Other Domain&quot;, &quot;someone2@somewho.com&quot;);
+account_insert_to_db(account, &amp;id[1]);
+
+account_destroy(account);
+
+Create_Account(&amp;account, &quot;Human&quot;, &quot;Humanity&quot;, &quot;Everyone&quot;, &quot;someone3@somewho.com&quot;);
+
+account_insert_to_db(account, &amp;id[2]);
+
+account_destroy(account);
+
+Create_Account(&amp;account, &quot;LastOne&quot;, &quot;LastDisplay&quot;, &quot;Last Domain&quot;, &quot;someone4@somewho.com&quot;);
+account_insert_to_db(account, &amp;id[3]);
+account_destroy(account);
+</pre>
+</li>
+
+<li><a href="#add">Create an account</a>.
+
+<pre class="prettyprint">
+static int 
+Create_Account(account_h * account, char * account_name, char * display_name, char *  domain_name, char * email_address)
+{
+&nbsp;&nbsp;&nbsp;account_create(account);
+
+&nbsp;&nbsp;&nbsp;account_set_user_name(*account, account_name);
+
+&nbsp;&nbsp;&nbsp;account_set_display_name(*account, display_name);
+
+&nbsp;&nbsp;&nbsp;account_set_domain_name(*account, domain_name);
+
+&nbsp;&nbsp;&nbsp;account_set_email_address(*account, email_address);
+}
+</pre></li></ol>
+</li>
+
+<li>List the accounts:
+<ol type="a"><li>
+<p>List all accounts to verify the database insertion:</p>
+
+<pre class="prettyprint">
+struct 
+Account_Records
+{
+&nbsp;&nbsp;&nbsp;int count;
+&nbsp;&nbsp;&nbsp;int tab[100];
+};
+
+struct Account_Records rec;
+ 
+List_Accounts(&amp;rec);
+</pre></li>
+
+<li><p>When <span style="font-family: Courier New,Courier,monospace;">struct Account_Records* rec</span> is not <span style="font-family: Courier New,Courier,monospace;">Null</span>, <span style="font-family: Courier New,Courier,monospace;">List_Accounts</span> counts all records in the database. Obtain the records using the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function.</p>
+
+<pre class="prettyprint">
+static void 
+List_Accounts(struct Account_Records* rec)
+{
+&nbsp;&nbsp;&nbsp;if (rec!=NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rec-&gt;count=0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;account_foreach_account_from_db(on_account_read, rec);
+}
+</pre></li>
+
+<li><p>Call the <span style="font-family: Courier New,Courier,monospace;">on_account_read()</span> callback function for each found record. If <span style="font-family: Courier New,Courier,monospace;">void *user_data</span> is not null, the function is counting the existing accounts. String data returned by the get functions has to be released with <span style="font-family: Courier New,Courier,monospace;">free</span>. Data prepared with the <span style="font-family: Courier New,Courier,monospace;">sprint()</span> function can, for example, be sent for <span style="font-family: Courier New,Courier,monospace;">stdout</span>.</p>
+
+<pre class="prettyprint">
+static bool 
+on_account_read(account_h account, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int account_id = 0;
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+&nbsp;&nbsp;&nbsp;char *display_name = NULL;
+&nbsp;&nbsp;&nbsp;struct Account_Records * rec = (struct Account_Records *)user_data;
+&nbsp;&nbsp;&nbsp;char buf[100];
+
+&nbsp;&nbsp;&nbsp;account_get_account_id(account, &amp;account_id);
+
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback ID: %d\n&quot;, account_id);
+
+&nbsp;&nbsp;&nbsp;if (user_data!=NULL)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rec-&gt;tab[rec-&gt;count++]=account_id;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;account_get_user_name(account, &amp;name);
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback Name: %s\n&quot;, name);
+
+&nbsp;&nbsp;&nbsp;free(name);
+
+&nbsp;&nbsp;&nbsp;account_get_display_name(account, &amp;display_name);
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback Disp.: %s\n&quot;, display_name);
+
+&nbsp;&nbsp;&nbsp;free(display_name);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre></li></ol>
+</li>
+<li>Query the account by its ID with the <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_account_id()</span> function. This function requires an existing handle to an account as an input parameter.
+
+<pre class="prettyprint">
+for (i=0; i&lt;rec.count; i++)
+{
+&nbsp;&nbsp;&nbsp;account_create(&amp;account);
+&nbsp;&nbsp;&nbsp;account_query_account_by_account_id(rec.tab[i], &amp;account);
+
+&nbsp;&nbsp;&nbsp;Show_Account(account);
+
+&nbsp;&nbsp;&nbsp;account_destroy(account);
+}
+</pre>
+</li>
+
+<li>Show the account:
+
+<pre class="prettyprint">
+static int 
+Show_Account(account_h acc)
+{
+&nbsp;&nbsp;&nbsp;int account_id = 0;
+&nbsp;&nbsp;&nbsp;char *name = NULL;
+&nbsp;&nbsp;&nbsp;char *display_name = NULL;
+&nbsp;&nbsp;&nbsp;char buf[100];
+
+&nbsp;&nbsp;&nbsp;account_get_account_id(acc, &amp;account_id);
+
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account ID: %d\n&quot;, account_id);
+
+&nbsp;&nbsp;&nbsp;account_get_user_name(acc, &amp;name);
+
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account Name: %s\n&quot;, name);
+
+&nbsp;&nbsp;&nbsp;free(name);
+
+&nbsp;&nbsp;&nbsp;account_get_display_name(acc, &amp;display_name);
+
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account Disp.: %s\n&quot;, display_name);
+
+&nbsp;&nbsp;&nbsp;free(display_name);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+
+<li>Query the account by various attributes:
+<ul><li>Query by user name.
+<p>Querying data by user name requires providing a valid user name callback function. In this example, it is the same function as for <span style="font-family: Courier New,Courier,monospace;">for_each</span>, but cast without the third parameter.</p>
+
+<pre class="prettyprint">
+account_query_account_by_user_name(on_account_read, &quot;Human&quot;, NULL);
+</pre>
+</li>
+
+<li>Query by package name.
+<p>By default, the accounts created in the application context have a package name set to the application name. Change it using the <span style="font-family: Courier New,Courier,monospace;">account_set_package_name()</span> function. To list accounts by package name, the user can provide a name by itself or obtain it with the <span style="font-family: Courier New,Courier,monospace;">account_get_package_name()</span> function.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_package_name()</span> function requires a callback function and a package name. In addition, the user data can be passed to the callback function as a third parameter.</p>
+ 
+<p>The package name has to be released when no longer needed.</p>
+
+<pre class="prettyprint">
+char * package_name;
+account_get_package_name(account, &amp;package_name);
+account_query_account_by_package_name(on_account_read, package_name, NULL);
+free(package_name);
+</pre>
+</li>
+
+<li>Query by capability.
+<p>The following function allows the user to find all accounts with a specified capability on a specified state. Once again, the callback function is required.</p>
+
+<pre class="prettyprint">
+account_query_account_by_capability(on_account_read, &quot;Custom&quot;, ACCOUNT_CAPABILITY_ENABLED, NULL);
+</pre>
+</li>
+
+<li> Query by capability type.
+<p>This function is similar to the <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_capability()</span> function, but returns all accounts with a specified capability, without checking its state.</p>
+
+<pre class="prettyprint">
+account_query_account_by_capability_type(on_account_read, &quot;Next&quot;, NULL);
+</pre>
+</li>
+
+<li>Query capability by account ID.
+<p>The <span style="font-family: Courier New,Courier,monospace;">account_query_capability_by_account_id()</span> function is different from the previous functions. It lists all capabilities from an account with a specified ID. In this case it requires a different type of callback, as listed below.</p>
+
+<pre class="prettyprint">
+account_query_capability_by_account_id(_capability_cb, id[0], NULL);
+</pre>
+
+<p>The callback function prepares data to be sent to an output.</p>
+
+<pre class="prettyprint">
+static bool 
+_capability_cb(const char *capability_type, account_capability_state_e capability_state, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char buf[200];
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Found capability: %s on state %d\n&quot;, capability_type, capability_state);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+</li></ul></li>
+
+<li>Destroy all account handles when they are no longer needed:
+
+<pre class="prettyprint">
+account_destroy(account);
+</pre>
+</li>
+</ol>
+
+ <h2 id="secret" name="secret">Managing Account Secrecy</h2>
+
+<p>To manage account secrecy:</p>
+<ol>
+<li>Select the secrecy level using the <span style="font-family: Courier New,Courier,monospace;">account_secrecy_state_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html#ga41a7e7e7cfb072d0b0ba37087a0535b6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html#ga41a7e7e7cfb072d0b0ba37087a0535b6">wearable</a> applications):
+
+<pre class="prettyprint">
+static 
+account_h account = NULL;
+account_secrecy_state_e secret;
+ 
+char buf[200];
+int ret;
+int id;
+
+// Account 1
+Create_Account(&amp;account, &quot;Security 1&quot;, &quot;Invalid&quot;, &quot;NOBODY&quot;, &quot;anony@mous.not&quot;);
+
+account_set_secret(account, ACCOUNT_SECRECY_INVALID);
+
+account_get_secret(account, &amp;secret);
+
+account_insert_to_db(account, &amp;id);
+
+sprintf(buf,&quot;Account 1 secret: %d\n&quot;, secret);
+
+account_destroy(account);
+
+// Account 2
+
+Create_Account(&amp;account, &quot;Security 2&quot;, &quot;Invisible&quot;, &quot; NOBODY&quot;, &quot;anony1@mous.not&quot;);
+
+account_set_secret(account, ACCOUNT_SECRECY_INVISIBLE);
+
+account_get_secret(account, &amp;secret);
+
+account_insert_to_db(account, &amp;id);
+
+sprintf(buf, &quot; Account 2 secret: %d\n&quot;, secret);
+
+account_destroy(account);
+
+// Account 3
+
+Create_Account(&amp;account, &quot;Secret 3&quot;, &quot;Visible&quot;, &quot; NOBODY&quot;, &quot;anony2@mous.not&quot;);
+
+ret = account_set_secret(account, ACCOUNT_SECRECY_VISIBLE);
+
+ret = account_get_secret(account, &amp;secret);
+
+ret = account_insert_to_db(account, &amp;id);
+
+sprintf(buf,&quot; Account 3 secret: %d\n&quot;, secret);
+
+account_destroy(account);
+
+List_Accounts(NULL);
+</pre>
+
+<p>Secrecy is linked only with visibility on the account settings screen. The account is still visible and can be accessed using a query or the <span style="font-family: Courier New,Courier,monospace;">for_each</span> function. For further information on how to add your application to the account screen, see <a href="#screen">Adding an Application on the Account Screen</a>.</p>
+
+<pre class="prettyprint">
+// List_Account() console output
+MyCallback ID: 12
+MyCallback Name: Security 1
+MyCallback Disp.: Invalid
+-------------------
+MyCallback ID: 13
+MyCallback Name: Security 2
+MyCallback Disp.: Invisible
+-------------------
+MyCallback ID: 14
+MyCallback Name: Secret 3
+MyCallback Disp.: Visible
+</pre>
+</li>
+
+<li>Destroy all account handles when they are no longer needed:
+
+<pre class="prettyprint">
+account_destroy(account);
+</pre>
+</li>
+</ol>
+
+ <h2 id="update" name="update">Updating Accounts</h2>
+
+<p>To update and track account data:</p>
+
+<ol>
+<li>Subscribe notifications to track account changes. Create an <span style="font-family: Courier New,Courier,monospace;">account_subscribe_h</span> instance and register a notification.
+
+<pre class="prettyprint">
+account_subscribe_h account_subscribe;
+
+account_subscribe_create(&amp;account_subscribe);
+
+account_subscribe_notification(account_subscribe, _account_event_cb, NULL);
+</pre>
+</li>
+
+<li>Create an account. Accounts are created and then their handles are destroyed. The package name is obtained from the second account.
+
+<pre class="prettyprint">
+Create_Account(&amp;account, &quot;Updater&quot;, &quot;Updated?&quot;, &quot;ToUpdate&quot;, &quot;not.up@to.date&quot;);
+account_insert_to_db(account, &amp;id);
+
+Show_Account(account);
+account_destroy(account);
+
+Create_Account(&amp;account, &quot;Another&quot;, &quot;Updated?&quot;, &quot;ToUpdate&quot;, &quot;not.up@to.date&quot;);
+account_insert_to_db(account, &amp;id);
+
+account_get_package_name(account, &amp;package_name);
+sprintf(buf, &quot;Package_name: %s\n&quot;, package_name);
+
+Show_Account(account);
+account_destroy(account);
+</pre>
+</li>
+
+<li>Update the account:
+<ul><li><p>To update an account by its ID:</p>
+<ol type="a">
+<li>Create a handle to the account.</li>
+<li>Get the account from the database (also possible by ID).</li>
+<li>Make the necessary changes.</li>
+<li>Update the account using the account handle and a valid ID.</li>
+<li>Destroy the account handle.</li>
+</ol>
+
+<pre class="prettyprint">
+account_create(&amp;account);
+account_query_account_by_account_id(id, &amp;account);
+account_set_display_name(account, &quot;Updated!&quot;);
+account_update_to_db_by_id(account, id);
+account_destroy(account);
+</pre>
+</li>
+
+<li>To update an account by its user name:
+<ol type="a">
+<li>Create a handle to the account.</li>
+<li>Get the account from the database (also by ID).</li>
+<li>Make the necessary changes.</li>
+<li>Update the account using the account handle, a valid user name, and a package name. There can be accounts with the same user names in different packages.</li>
+<li>Destroy the account handle.</li>
+</ol>
+
+<pre class="prettyprint">
+account_create(&amp;account);
+account_query_account_by_account_id(id, &amp;account);
+account_set_display_name(account, &quot;Updated!&quot;);
+account_update_to_db_by_user_name(account, &quot;Another&quot;, package_name);
+account_destroy(account);
+</pre></li></ul>
+</li>
+
+<li>Create the account event callback. When any action is taking place on any account when a notification is subscribed, a callback function is invoked. The callback function provides in its parameters the event type as a string, the ID of the account associated with the actual change, and, additionally, the user data registered while subscribing the notification.
+
+<pre class="prettyprint">
+bool 
+_account_event_cb(const char *event_type, int account_id, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char buf[200];
+
+&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;ACCOUNT EVENT: %s, %d\n&quot;, event_type, account_id);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+</li>
+
+<li>Show the accounts to verify the updates:
+
+<pre class="prettyprint">
+account_create(&amp;account);
+account_query_account_by_account_id(id, &amp;account);
+Show_Account(account);
+account_destroy(account);
+</pre>
+</li>
+
+<li>Unsubscribe the notification when no longer needed:
+
+<pre class="prettyprint">
+account_unsubscribe_notification(account_subscribe);
+</pre>
+</li>
+</ol>
+
+ <h2 id="type" name="type">Retrieving Account Types</h2>
+
+<p>To retrieve account types:</p>
+
+<ol>
+<li>Create a handle to operate on the account type:
+
+<pre class="prettyprint">
+account_type_h account_type;
+
+account_type_create(&amp;account_type);
+</pre>
+</li>
+
+<li>Get the type information. 
+<p>If the account type with a specified ID exists, you can get it from the database with the <span style="font-family: Courier New,Courier,monospace;">account_query_by_app_id()</span> function.</p>
+
+<p>It is possible to set, for example:</p>
+<ul>
+<li>ID</li>
+<li>Labels</li>
+<li>Features</li>
+<li>Multiple account support (this is only a flag)</li>
+</ul>
+
+<p>To get the account types by the application ID, use the <span style="font-family: Courier New,Courier,monospace;">account_type_query_by_app_id()</span> function.</p>
+
+<pre class="prettyprint">
+int multiple_account_support = -1;
+char *your_app_id = &quot;com.tizen.example&quot;; // App ID for retrieving account types
+char *app_id = NULL;
+char *provider_feature = NULL;
+char *icon_path = NULL;
+
+if (account_type_query_app_id_exist(your_app_id))
+{
+&nbsp;&nbsp;&nbsp;account_type_query_by_app_id(your_app_id, &amp;account_type);
+
+&nbsp;&nbsp;&nbsp;account_type_get_app_id(account_type, &amp;app_id);
+
+&nbsp;&nbsp;&nbsp;account_type_get_multiple_account_support(account_type, &amp;multiple_account_support);
+
+&nbsp;&nbsp;&nbsp;account_type_get_icon_path(account_type, &amp;icon_path);
+
+&nbsp;&nbsp;&nbsp;account_type_get_provider_feature(account_type, &amp;provider_feature);
+}
+</pre>
+</li>
+
+<li>List the account types or all the labels from a specified type with a proper callback function:
+
+<pre class="prettyprint">
+account_type_foreach_account_type_from_db(_account_type_cb, NULL);
+
+account_type_query_label_by_app_id(_account_label_cb, type_id, NULL);
+</pre>
+
+<p>While listing the labels, the user has access to the ID of the account type, label and its local value, and the user data passed while casting the query function.</p>
+
+<pre class="prettyprint">
+bool 
+_account_label_cb(char *app_id, char *label, char *locale, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char buf[200];
+
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Get Label ID: %s LABEL: %s LOCALE %s\n&quot;, app_id, label, locale);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>The account type callback has access to the account type and user data.</p>
+
+<pre class="prettyprint">
+bool 
+_account_type_cb(account_type_h account_type, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;char * id;
+&nbsp;&nbsp;&nbsp;int support;
+&nbsp;&nbsp;&nbsp;char buf[200];
+
+&nbsp;&nbsp;&nbsp;account_type_get_app_id(account_type, &amp;id);
+
+&nbsp;&nbsp;&nbsp;account_type_get_multiple_account_support(account_type, &amp;support);
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Account Type ID: %s Multiple support %d:\n&quot;, id, support);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+</li>
+
+<li>Clean up and destroy the allocated handles:
+
+<pre class="prettyprint">
+free(app_id);
+free(provider_feature);
+free(icon_path);
+
+account_type_destroy(account_type);
+</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.tutorials/html/native/account/account_tutorials_n.htm b/org.tizen.tutorials/html/native/account/account_tutorials_n.htm
index 1c62475..38b60d4 100644
--- a/org.tizen.tutorials/html/native/account/account_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/account/account_tutorials_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
@@ -34,8 +34,9 @@
 
  <p>The account tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
    <ul>
-	<li><a href="oauth2_tutorial_n.htm">oauth2: Using the Authorization Framework</a>
-    <p>Demonstrates how you can obtain access tokens using oauth2 authorization.</p></li>		
+ 	<li><a href="account_tutorial_n.htm">Account Manager: Managing Account Information on the Device</a> <p>Demonstrates how you can connect to and disconnect from the Account Service, create, delete, and update accounts in the account database, and manage account information.</p></li>  
+    <li><a href="oauth2_tutorial_n.htm">OAuth 2.0: Using the Authorization Framework</a>
+    <p>Demonstrates how you can obtain access tokens using OAuth 2.0 authorization.</p></li>		
   </ul>
  
  <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>  
diff --git a/org.tizen.tutorials/html/native/account/oauth2_tutorial_n.htm b/org.tizen.tutorials/html/native/account/oauth2_tutorial_n.htm
index 5a4400b..16e3d65 100644
--- a/org.tizen.tutorials/html/native/account/oauth2_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/account/oauth2_tutorial_n.htm
@@ -10,62 +10,62 @@
     <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>oauth2: Using the Authorization Framework</title>
+  <title>OAuth 2.0: Using the Authorization Framework</title>
  </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
 		<ul class="toc">
-			<li><a href="#mgr_init">Initializing the oauth2 Manager</a></li>
-			<li><a href="#request">Creating and Managing an oauth2 Request</a></li>
+			<li><a href="#mgr_init">Initializing the OAuth 2.0 Manager</a></li>
+			<li><a href="#request">Creating and Managing an OAuth 2.0 Request</a></li>
 			<li><a href="#token">Requesting the Server for a Grant or Token</a></li>
-			<li><a href="#response">Managing an oauth2 Response</a></li>
+			<li><a href="#response">Managing an OAuth 2.0 Response</a></li>
 			<li><a href="#des_mgr">Releasing the Resources</a></li>
 		</ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
-        	<li><a href="../../../../org.tizen.guides/html/native/account/oauth2_n.htm">oauth2 Guide</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">oauth2 API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">oauth2 API for Wearable Native</a></li>
+        	<li><a href="../../../../org.tizen.guides/html/native/account/oauth2_n.htm">OAuth 2.0 Guide</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">OAuth 2.0 API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">OAuth 2.0 API for Wearable Native</a></li>
         </ul>
     </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>oauth2: Using the Authorization Framework</h1>
+<h1>OAuth 2.0: Using the Authorization Framework</h1>
 
-<p>This tutorial demonstrates how you can create a request for oauth2 authentication and authorization grant from a server, obtain an access token using the manager handle, and retrieve this info from the response handle returned in the callback.</p>
+<p>This tutorial demonstrates how you can create a request for OAuth 2.0 authentication and authorization grant from a server, obtain an access token using the manager handle, and retrieve this info from the response handle returned in the callback.</p>
 
 <h2>Warm-up</h2>
 
-<p>Become familiar with the oauth2 API basics by learning about:</p>
+<p>Become familiar with the OAuth 2.0 API basics by learning about:</p>
 <ul>
-		<li><a href="#mgr_init">Initializing the oauth2 Manager</a>
-		<p>Initialize the oauth2 manager for use.</p></li>
+		<li><a href="#mgr_init">Initializing the OAuth 2.0 Manager</a>
+		<p>Initialize the OAuth 2.0 manager for use.</p></li>
 		
-		<li><a href="#request">Creating and Managing an oauth2 Request</a>
-		<p>Create a request handle, set and retrieve request parameters, and pass the request to the oauth2 manager to request a token.</p></li>
+		<li><a href="#request">Creating and Managing an OAuth 2.0 Request</a>
+		<p>Create a request handle, set and retrieve request parameters, and pass the request to the OAuth 2.0 manager to request a token.</p></li>
 
 		<li><a href="#token">Requesting the Server for a Grant or Token</a>
-		<p>Request the authorization server for the required oauth2 grant or token using various methods and grant types.</p></li>
+		<p>Request the authorization server for the required OAuth 2.0 grant or token using various methods and grant types.</p></li>
 
-		<li><a href="#response">Managing an oauth2 Response</a>
-		<p>Obtain information from the oauth2 response handle returned in a callback.</p></li>
+		<li><a href="#response">Managing an OAuth 2.0 Response</a>
+		<p>Obtain information from the OAuth 2.0 response handle returned in a callback.</p></li>
 
 		<li><a href="#des_mgr">Releasing the Resources</a>
-		<p>Destroy the oauth2 manager handle.</p></li>
+		<p>Destroy the OAuth 2.0 manager handle.</p></li>
 </ul>
 
-<h2 id="mgr_init" name="mgr_init">Initializing the oauth2 Manager</h2>
+<h2 id="mgr_init" name="mgr_init">Initializing the OAuth 2.0 Manager</h2>
 
-<p>To initialize the oauth2 manager:</p>
+<p>To initialize the OAuth 2.0 manager:</p>
 <ol>
-<li> <p>To use the functions and data types of the oauth2 API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;oauth2.h&gt;</span> header file in your application:</p>
+<li> <p>To use the functions and data types of the OAuth 2.0 API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;oauth2.h&gt;</span> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;oauth2.h&gt;
 </pre></li>
@@ -78,23 +78,23 @@ ret = oauth2_manager_create(&amp;mgr)
 </pre></li>
 
 <li><p>Set up the required privileges for your application:</p>
-<p>To use APIs for oauth2 authentication and connecting to the Web servers, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span> privilege to the manifest file.</p></li>
+<p>To use APIs for OAuth 2.0 authentication and connecting to the Web servers, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span> privilege to the manifest file.</p></li>
 
 </ol>
 
- <h2 id="request" name="request">Creating and Managing an oauth2 Request</h2>
+ <h2 id="request" name="request">Creating and Managing an OAuth 2.0 Request</h2>
 
-<p>To make a request with the oauth2 manager:</p>
+<p>To make a request with the OAuth 2.0 manager:</p>
 
 <ol>
-<li>Create an <span style="font-family: Courier New,Courier,monospace;">oauth2_request_h</span> request handle and use the <span style="font-family: Courier New,Courier,monospace;">oauth2_request_create()</span> function to create the oauth2 request:
+<li>Create an <span style="font-family: Courier New,Courier,monospace;">oauth2_request_h</span> request handle and use the <span style="font-family: Courier New,Courier,monospace;">oauth2_request_create()</span> function to create the OAuth 2.0 request:
 
 <pre class="prettyprint">
 oauth2_request_h request = NULL;
 ret = oauth2_request_create(&amp;request);
 </pre>
 </li>
-<li>Set the parameters needed for making an oauth2 request.
+<li>Set the parameters needed for making an OAuth 2.0 request.
 <p>You can set various request properties, such as end points for authentication and token, grant type, user name, and password.</p>
 
 <pre class="prettyprint">
@@ -169,7 +169,7 @@ request_auth_code(void)
 &nbsp;&nbsp;&nbsp;ret = oauth2_request_create(&amp;request);
 
 &nbsp;&nbsp;&nbsp;// Set all the required parameters needed as per the Web server&#39;s
-&nbsp;&nbsp;&nbsp;// oauth2 authentication policy before making the request
+&nbsp;&nbsp;&nbsp;// OAuth 2.0 authentication policy before making the request
 
 &nbsp;&nbsp;&nbsp;// Set the response_type as &quot;code&quot;
 &nbsp;&nbsp;&nbsp;ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
@@ -205,7 +205,7 @@ request_auth_code(void)
 &nbsp;&nbsp;&nbsp;ret = oauth2_request_create(&amp;request);
 
 &nbsp;&nbsp;&nbsp;// Set all the required parameters needed as per the Web server&#39;s
-&nbsp;&nbsp;&nbsp;// oauth2 authentication policy before making the request
+&nbsp;&nbsp;&nbsp;// OAuth 2.0 authentication policy before making the request
 
 &nbsp;&nbsp;&nbsp;ret = oauth2_request_set_auth_end_point_url(request, &quot;https://login.live.com/oauth20_authorize.srf&quot;);
 
@@ -291,7 +291,7 @@ request_access_token(void)
 &nbsp;&nbsp;&nbsp;ret = oauth2_request_create(&amp;request);
 
 &nbsp;&nbsp;&nbsp;// Set all the required parameters needed as per the Web server&#39;s
-&nbsp;&nbsp;&nbsp;// oauth2 authentication policy before making the request
+&nbsp;&nbsp;&nbsp;// OAuth 2.0 authentication policy before making the request
 
 &nbsp;&nbsp;&nbsp;ret = oauth2_request_set_auth_end_point_url(request, &quot;https://www.facebook.com/dialog/oauth&quot;);
 
@@ -308,7 +308,7 @@ request_access_token(void)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_manager_request_token(mgr, request, token_response_cb, request);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != OAUTH2_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG , &quot;Access Token request failed&quot;); 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Access Token request failed&quot;); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
 }
@@ -348,7 +348,7 @@ refresh_token_response_cb(oauth2_response_h response, void* user_data)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int ret = oauth2_request_create(&amp;request);
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set all the required parameters needed as per the Web server&#39;s
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// oauth2 authentication policy before making the request
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// OAuth 2.0 authentication policy before making the request
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_refresh_token_url(request, &quot;https://www.googleapis.com/oauth2/v3/token&quot;);
 
@@ -379,7 +379,7 @@ request_access_token(void)
 &nbsp;&nbsp;&nbsp;ret = oauth2_request_create(&amp;request);
 
 &nbsp;&nbsp;&nbsp;// Set all the required parameters needed as per the Web server&#39;s
-&nbsp;&nbsp;&nbsp;// oauth2 authentication policy before making the request
+&nbsp;&nbsp;&nbsp;// OAuth 2.0 authentication policy before making the request
 
 &nbsp;&nbsp;&nbsp;ret = oauth2_request_set_auth_end_point_url(request, &quot;https://accounts.google.com/o/oauth2/auth&quot;);
 
@@ -404,11 +404,11 @@ request_access_token(void)
 </li>
 </ul>
 
-<h2 id="response" name="response" class="items-tit-h2">Managing an oauth2 Response</h2>
+<h2 id="response" name="response" class="items-tit-h2">Managing an OAuth 2.0 Response</h2>
 
 <p>The response from the server is bundled in the <span style="font-family: Courier New,Courier,monospace;">oauth2_response_h</span> handle and returned in the callbacks, from which all the various response parameters can be obtained.</p>
 
-<p>To manage the oauth2 response:</p>
+<p>To manage the OAuth 2.0 response:</p>
 
 <ol>
 <li>Retrieve the response parameters from the response handle.
@@ -462,7 +462,7 @@ ret = oauth2_response_destroy(response);
 
  <h2 id="des_mgr" name="des_mgr">Releasing the Resources</h2>
 
-<p>To free the oauth2 manager handle, use the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_destroy()</span> function:</p>
+<p>To free the OAuth 2.0 manager handle, use the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_destroy()</span> function:</p>
 
 <pre class="prettyprint">
 ret = oauth2_manager_destroy(mgr);
diff --git a/org.tizen.tutorials/html/native/account/sync_manager_tutorial_n.htm b/org.tizen.tutorials/html/native/account/sync_manager_tutorial_n.htm
index 340dc2b..dd91e3d 100644
--- a/org.tizen.tutorials/html/native/account/sync_manager_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/account/sync_manager_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -26,7 +26,7 @@
 			<li><a href="#on_demand_sync">Initializing the On-demand Sync</a></li>
 			<li><a href="#periodic_sync">Initializing the Periodic Sync</a></li>
 			<li><a href="#data_change_sync">Initializing the Data Change Sync</a></li>
-			<li><a href="#foreach_sync">Initializing the ForEach Sync</a></li>
+            <li><a href="#foreach_sync">Initializing the ForEach Sync</a></li>
 			<li>Sync adapter
 			<ul class="toc">
 				<li><a href="#set_callback">Setting the Callback Functions</a></li>
@@ -46,17 +46,7 @@
 
 	<p>This tutorial demonstrates how you can manage the data synchronizing schedule and control the sync operations manually or periodically.</p>
 
- <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">These features are supported in mobile applications only. To use the features of the Sync Manager API, <a href="#set_callback">Setting the Callback Functions</a> should be carried out first by a service application. <br>An UI application can not initialize and set callbacks through using the Sync Adapter API. On the contrary, the Sync Manager API should be called to request sync operations by UI application.</td>
-    </tr>
-   </tbody>
- </table>
-
+<p>This feature is supported in mobile applications only. To use the Sync Manager API features, the service application must first <a href="#set_callback">set the callback functions</a>. A UI application cannot initialize and set callbacks through the Sync Adapter API. On the contrary, the UI application must call the Sync Manager API to request sync operations.</p>
 
   <h2>Warm-up</h2>
     <p>Become familiar with the Sync Manager API basics by learning about:</p>
@@ -65,10 +55,10 @@
 		<p>Add an on-demand sync job scheduling for a one-time operation.</p></li>
 		<li><a href="#periodic_sync">Initializing the Periodic Sync</a>
 		<p>Add a periodic sync job scheduling with a recurring cycle.</p></li>
-		<li><a href="#data_change_sync">Initializing the Data Change Sync</a>
-		<p>Add a data change sync job for receiving notification whenever a specific DB changed.</p></li>
-		<li><a href="#foreach_sync">Initializing the ForEach Sync</a>
-		<p>Iterate all of registered sync jobs for managing them more efficiently.</p></li>
+        <li><a href="#data_change_sync">Initializing the Data Change Sync</a>
+        <p>Add a data change sync job for receiving a notification whenever a specific database change occurs.</p></li>
+        <li><a href="#foreach_sync">Initializing the ForEach Sync</a>
+        <p>Iterate all the registered sync jobs for managing them more efficiently.</p></li>
 		<li>Sync adapter
 		<ul>
 			<li><a href="#set_callback">Setting the Callback Functions</a>
@@ -77,13 +67,12 @@
 		</li>
 	</ul>
 
-
 <h2 id="on_demand_sync" name="on_demand_sync">Initializing the On-demand Sync</h2>
 
-<p>To inform a service application of the time to operate one-time sync job:</p>
+<p>To inform a service application of the time to operate a one-time sync job:</p>
 
 <ol>
-<li><a href="#set_callback">Set the sync adapter callbacks</a> in your service application first:
+<li><a href="#set_callback">Set the sync adapter callbacks</a> in the service application first:
 <pre class="prettyprint">
 #include &lt;sync_adapter.h&gt;
 
@@ -93,16 +82,17 @@ result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
 </li>
 
 <li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;sync_manager.h&gt;</span> header file in your UI application:
-<pre class="prettyprint">
+ <pre class="prettyprint">
 #include &lt;sync_manager.h&gt;
-</pre>
-</li>
+</pre></li>
 
-<li>If you want to use an account, create the account and obtain some parameters which are used to call <span style="font-family: Courier New,Courier,monospace">sync_manager_on_demand_sync_job()</span> like below: <p>For more information, see <a href="../social/account_tutorial_n.htm">Creating and Managing an Account</a> and <a href="../app_framework/bundle_tutorial_n.htm">Managing and Using the Bundle Content</a>.</p>
+<li>If you want to use an account, create the account and obtain the parameters that are used to call the <span style="font-family: Courier New,Courier,monospace">sync_manager_on_demand_sync_job()</span> function.
+<p>For more information, see <a href="account_tutorial_n.htm#add">Creating and Managing an Account</a> and <a href="../app_framework/bundle_tutorial_n.htm#manage">Managing and Using the Bundle Content</a>.</p>
 
 <pre class="prettyprint">
 account_h account = NULL;
 int account_id = -1;
+
 account_create(&amp;account);
 account_set_user_name(account, &quot;test_name&quot;);
 account_set_email_address(account, &quot;test_email@samsung.com&quot;);
@@ -110,36 +100,46 @@ account_set_package_name(account, &quot;data-sync-module&quot;);
 account_set_sync_support(account, ACCOUNT_SUPPORTS_SYNC);
 account_insert_to_db(account, &amp;account_id);
 
-const char *sync_job_name = "on_demand_sync_job";
+const char *sync_job_name = &quot;on_demand_sync_job&quot;;
 
 bundle *sync_job_user_data = NULL;
 sync_job_user_data = bundle_create();
-bundle_add_str(sync_job_user_data, "str", "String sync_job_user_data sample.");
+bundle_add_str(sync_job_user_data, &quot;str&quot;, &quot;String sync_job_user_data sample.&quot;);
 
 int sync_job_id = -1;
 </pre>
 </li>
 
-<li>To add an on-demand sync job:
+<li>Add an on-demand sync job:
 <pre class="prettyprint">
-result = sync_manager_on_demand_sync_job(account, sync_job_name, SYNC_OPTION_NONE, sync_job_user_data, &amp;sync_job_id);
+result = sync_manager_on_demand_sync_job(account, sync_job_name, SYNC_OPTION_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id);
 </pre>
-<p>This API can be used with different options each other. Below example shows the API is called with a variety of sync options. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span> means a sync job will not be performed again when it fails. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span> means another sync job will be operated as soon as possible. Of course, the value which is OR-ing let the other sync job operate just once with priority.</p>
+<p>This function can be used with various options. The following example shows the function called with a variety of sync options. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span> option means the sync job is not performed again when it fails. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span> option means the another sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
+ 
 <pre class="prettyprint">
-result = sync_manager_on_demand_sync_job(account, sync_job_name2, SYNC_OPTION_NO_RETRY, sync_job_user_data, &amp;sync_job_id2);
-result = sync_manager_on_demand_sync_job(account, sync_job_name3, SYNC_OPTION_EXPEDITED, sync_job_user_data, &amp;sync_job_id3);
-result = sync_manager_on_demand_sync_job(account, sync_job_name4, (SYNC_OPTION_NO_RETRY | SYNC_OPTION_EXPEDITED), sync_job_user_data, &amp;sync_job_id4);
+result = sync_manager_on_demand_sync_job(account, sync_job_name2, SYNC_OPTION_NO_RETRY, 
+&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;sync_job_user_data, &amp;sync_job_id2);
+result = sync_manager_on_demand_sync_job(account, sync_job_name3, SYNC_OPTION_EXPEDITED, 
+&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;sync_job_user_data, &amp;sync_job_id3);
+result = sync_manager_on_demand_sync_job(account, sync_job_name4, 
+&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;(SYNC_OPTION_NO_RETRY | SYNC_OPTION_EXPEDITED), 
+&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;sync_job_user_data, &amp;sync_job_id4);
 </pre>
-<p>This API also can be called like below. Because, account handle and sync_job_user_data are not mandatory data:</p>
+<p>This function can also be called like in the following example, because the account handle and user data are not mandatory.</p>
 <pre class="prettyprint">
-result = sync_manager_on_demand_sync_job(NULL, sync_job_name, SYNC_OPTION_NONE, sync_job_user_data, &amp;sync_job_id);
-result = sync_manager_on_demand_sync_job(account, sync_job_name2, SYNC_OPTION_NO_RETRY, NULL, &amp;sync_job_id2);
-result = sync_manager_on_demand_sync_job(NULL, sync_job_name3, SYNC_OPTION_EXPEDITED, NULL, &amp;sync_job_id3);
+result = sync_manager_on_demand_sync_job(NULL, sync_job_name, SYNC_OPTION_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id);
+result = sync_manager_on_demand_sync_job(account, sync_job_name2, SYNC_OPTION_NO_RETRY, 
+&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;NULL, &amp;sync_job_id2);
+result = sync_manager_on_demand_sync_job(NULL, sync_job_name3, SYNC_OPTION_EXPEDITED, 
+&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;NULL, &amp;sync_job_id3);
 </pre>
 <p>If the on-demand sync job addition process succeeds, the <span style="font-family: Courier New,Courier,monospace">SYNC_ERROR_NONE</span> value is returned.</p>
 </li>
 
-<li>When the on-demand sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_sync_job()</span> API with its <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>. If you want to stop using the account too, clean up the account handle. <p>At the end, unset the sync callbacks and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_adapter_unset_callbacks()</span> API.</p>
+<li>When the on-demand sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_sync_job()</span> function with its <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>. If you want to stop using the account too, clean up the account handle. 
+<p>At the end, unset the sync callbacks and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_adapter_unset_callbacks()</span> function.</p>
 <pre class="prettyprint">
 result = sync_manager_remove_sync_job(sync_job_id);
 
@@ -156,11 +156,10 @@ sync_adapter_unset_callbacks();
 </pre>
 </li>
 </ol>
-
-
+		
 <h2 id="periodic_sync" name="periodic_sync">Initializing the Periodic Sync</h2>
 
-<p>To inform periodically a service application of the time to operate sync job with its sync interval:</p>
+<p>To inform periodically a service application of the time to operate a sync job with its sync interval:</p>
 
 <ol>
 <li><a href="#set_callback">Set the sync adapter callbacks</a> in your service application first:
@@ -178,8 +177,8 @@ result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
 </pre>
 </li>
 
-<li>If you want to use an account, create the account and obtain some parameters which are used to call <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> like below: <p>For more information, see <a href="../social/account_tutorial_n.htm">Creating and Managing an Account</a> and <a href="../app_framework/bundle_tutorial_n.htm">Managing and Using the Bundle Content</a>.</p>
-
+<li>If you want to use an account, create the account and obtain the parameters that are used to call the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> function.
+<p>For more information, see <a href="account_tutorial_n.htm#add">Creating and Managing an Account</a> and <a href="../app_framework/bundle_tutorial_n.htm#manage">Managing and Using the Bundle Content</a>.</p>
 <pre class="prettyprint">
 account_h account = NULL;
 int account_id = -1;
@@ -190,7 +189,7 @@ account_set_package_name(account, &quot;data-sync-module&quot;);
 account_set_sync_support(account, ACCOUNT_SUPPORTS_SYNC);
 account_insert_to_db(account, &amp;account_id);
 
-const char *sync_job_name = "periodic_sync_job";
+const char *sync_job_name = &quot;periodic_sync_job&quot;;
 
 sync_period_e sync_period = SYNC_PERIOD_INTERVAL_30MIN;
 sync_period_e sync_period2 = SYNC_PERIOD_INTERVAL_1H;
@@ -199,40 +198,52 @@ sync_period_e sync_period4 = SYNC_PERIOD_INTERVAL_6H;
 
 bundle *sync_job_user_data = NULL;
 sync_job_user_data = bundle_create();
-bundle_add_str(sync_job_user_data, "str", "String sync_job_user_data sample.");
+bundle_add_str(sync_job_user_data, &quot;str&quot;, &quot;String sync_job_user_data sample.&quot;);
 
 int sync_job_id = -1;
 </pre>
 </li>
-
-<li>This API will operate sync job with given period interval. To add a periodic sync job with interval as 30 minutes:
+<li>Add an periodic sync job with an interval as 30 minutes.
+<p>This function operates sync job with the given period interval.</p>
 <pre class="prettyprint">
-result = sync_manager_add_periodic_sync_job(account, sync_job_name, sync_period, SYNC_OPTION_NONE, sync_job_user_data, &amp;sync_job_id);
+result = sync_manager_add_periodic_sync_job(account, sync_job_name, sync_period, SYNC_OPTION_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id);
 </pre>
-<p>This API can be used with different options each other. Below example shows the API is called with a variety of sync options. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span> means a sync job will not be performed again when it fails. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span> means another sync job will be operated as soon as possible. Of course, the value which is OR-ing let the other sync job operate just once with priority.</p>
+<p>This function can be used with various options. The following example shows the function called with a variety of sync options. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span> option means a sync job is not performed again when it fails. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span> option means another sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
 <pre class="prettyprint">
-result = sync_manager_add_periodic_sync_job(account, sync_job_name2, sync_period2, SYNC_OPTION_NO_RETRY, sync_job_user_data, &amp;sync_job_id2);
-result = sync_manager_add_periodic_sync_job(account, sync_job_name3, sync_period3, SYNC_OPTION_EXPEDITED, sync_job_user_data, &amp;sync_job_id3);
-result = sync_manager_add_periodic_sync_job(account, sync_job_name4, sync_period4, (SYNC_OPTION_NO_RETRY | SYNC_OPTION_EXPEDITED), sync_job_user_data, &amp;sync_job_id4);
+result = sync_manager_add_periodic_sync_job(account, sync_job_name2, sync_period2, SYNC_OPTION_NO_RETRY, 
+&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;sync_job_user_data, &amp;sync_job_id2);
+result = sync_manager_add_periodic_sync_job(account, sync_job_name3, sync_period3, SYNC_OPTION_EXPEDITED, 
+&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;sync_job_user_data, &amp;sync_job_id3);
+result = sync_manager_add_periodic_sync_job(account, sync_job_name4, sync_period4, 
+&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;(SYNC_OPTION_NO_RETRY | SYNC_OPTION_EXPEDITED), 
+&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;sync_job_user_data, &amp;sync_job_id4);
 </pre>
-<p>This API also can be called like below. Because, account handle and sync_job_user_data are not mandatory data:</p>
+<p>This function can also be called like in the following example, because the account handle and user data are not mandatory.</p>
 <pre class="prettyprint">
-result = sync_manager_add_periodic_sync_job(NULL, sync_job_name, sync_period, SYNC_OPTION_NONE, sync_job_user_data, &amp;sync_job_id);
-result = sync_manager_add_periodic_sync_job(account, sync_job_name2, sync_period2, SYNC_OPTION_NO_RETRY, NULL, &amp;sync_job_id2);
-result = sync_manager_add_periodic_sync_job(NULL, sync_job_name3, sync_period3, SYNC_OPTION_EXPEDITED, NULL, &amp;sync_job_id3);
+result = sync_manager_add_periodic_sync_job(NULL, sync_job_name, sync_period, SYNC_OPTION_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id);
+result = sync_manager_add_periodic_sync_job(account, sync_job_name2, sync_period2, SYNC_OPTION_NO_RETRY, 
+&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;NULL, &amp;sync_job_id2);
+result = sync_manager_add_periodic_sync_job(NULL, sync_job_name3, sync_period3, SYNC_OPTION_EXPEDITED, 
+&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;NULL, &amp;sync_job_id3);
 </pre>
 <p>If the periodic sync job addition process succeeds, the <span style="font-family: Courier New,Courier,monospace">SYNC_ERROR_NONE</span> value is returned.</p>
 </li>
 
-<li>This API can renew registered periodic sync job by using sync_job_name as same like below:
+<li>The <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> function can renew a registered periodic sync job by using the same <span style="font-family: Courier New,Courier,monospace">sync_job_name</span> as before:
 <pre class="prettyprint">
-result = sync_manager_add_periodic_sync_job(account, sync_job_name, sync_period, SYNC_OPTION_NONE, sync_job_user_data, &amp;sync_job_id);
-result = sync_manager_add_periodic_sync_job(account, sync_job_name, sync_period2, SYNC_OPTION_EXPEDITED, sync_job_user_data2, &amp;sync_job_id);
+result = sync_manager_add_periodic_sync_job(account, sync_job_name, sync_period, SYNC_OPTION_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id);
+result = sync_manager_add_periodic_sync_job(account, sync_job_name, sync_period2, SYNC_OPTION_EXPEDITED, 
+&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;sync_job_user_data2, &amp;sync_job_id);
 </pre>
-All the settings of the API can be reset except <span style="font-family: Courier New,Courier,monospace">sync_job_name</span> and <span style="font-family: Courier New,Courier,monospace">sync_job_id</span> which are used to manage a specific sync job.
+<p>All the function parameters can be reset except <span style="font-family: Courier New,Courier,monospace">sync_job_name</span> and <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>, which are used to manage a specific sync job.</p>
 </li>
 
-<li>When the periodic sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_sync_job()</span> API with its <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>. If you want to stop using the account too, clean up the account handle. <p>At the end, unset the sync callbacks and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_adapter_unset_callbacks()</span> API.</p>
+<li>When the periodic sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_sync_job()</span> function with its <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>. If you want to stop using the account too, clean up the account handle. 
+<p>At the end, unset the sync callbacks and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_adapter_unset_callbacks()</span> function.</p>
+ 
 <pre class="prettyprint">
 result = sync_manager_remove_sync_job(sync_job_id);
 
@@ -253,7 +264,7 @@ sync_adapter_unset_callbacks();
 
 <h2 id="data_change_sync" name="data_change_sync">Initializing the Data Change Sync</h2>
 
-<p>To inform a service application of the time to operate sync job whenever corresponding DB changed:</p>
+<p>To inform a service application of the time to operate a sync job whenever a corresponding database change occurs:</p>
 
 <ol>
 <li><a href="#set_callback">Set the sync adapter callbacks</a> in your service application first:
@@ -271,7 +282,8 @@ result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
 </pre>
 </li>
 
-<li>If you want to use an account, create the account and obtain some parameters which are used to call <span style="font-family: Courier New,Courier,monospace">sync_manager_add_data_change_sync_job()</span> like below: <p>For more information, see <a href="../social/account_tutorial_n.htm">Creating and Managing an Account</a> and <a href="../app_framework/bundle_tutorial_n.htm">Managing and Using the Bundle Content</a>.</p>
+<li>If you want to use an account, create the account and obtain the parameters that are used to call the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_data_change_sync_job()</span> function.
+<p>For more information, see <a href="account_tutorial_n.htm#add">Creating and Managing an Account</a> and <a href="../app_framework/bundle_tutorial_n.htm#manage">Managing and Using the Bundle Content</a>.</p>
 
 <pre class="prettyprint">
 account_h account = NULL;
@@ -292,40 +304,54 @@ const char *sync_capability_video = SYNC_SUPPORTS_CAPABILITY_VIDEO;
 
 bundle *sync_job_user_data = NULL;
 sync_job_user_data = bundle_create();
-bundle_add_str(sync_job_user_data, "str", "String sync_job_user_data sample.");
+bundle_add_str(sync_job_user_data, &quot;str&quot;, &quot;String sync_job_user_data sample.&quot;);
 
 int sync_job_id = -1;
 </pre>
 </li>
 
-<li>This API will operate sync job only for registered capability. To add a data change sync job for calendar:
+<li>The <span style="font-family: Courier New,Courier,monospace">sync_manager_add_data_change_sync_job()</span> function operates a sync job only for a registered capability. To add a data change sync job for the calendar: 
 <pre class="prettyprint">
-result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar, SYNC_OPTION_NONE, sync_job_user_data, &amp;sync_job_id);
+result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar, SYNC_OPTION_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id);
 </pre>
-<p>This API can be used with different options each other. Below example shows the API is called with a variety of sync options. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span> means a sync job will not be performed again when it fails. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span> means another sync job will be operated as soon as possible. Of course, the value which is OR-ing let the other sync job operate just once with priority.</p>
+
+<p>This function can be used with various options. The following example shows the function called with a variety of sync options. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span> option means a sync job is not performed again when it fails. The <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span> option means another sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
 <pre class="prettyprint">
-result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar, SYNC_OPTION_NO_RETRY, sync_job_user_data, &amp;sync_job_id2);
-result = sync_manager_add_data_change_sync_job(account, sync_capability_contact, SYNC_OPTION_EXPEDITED, sync_job_user_data, &amp;sync_job_id3);
-result = sync_manager_add_data_change_sync_job(account, sync_capability_image, (SYNC_OPTION_NO_RETRY | SYNC_OPTION_EXPEDITED), sync_job_user_data, &amp;sync_job_id4);
+result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar, SYNC_OPTION_NO_RETRY, 
+&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;sync_job_user_data, &amp;sync_job_id2);
+result = sync_manager_add_data_change_sync_job(account, sync_capability_contact, SYNC_OPTION_EXPEDITED, 
+&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;sync_job_user_data, &amp;sync_job_id3);
+result = sync_manager_add_data_change_sync_job(account, sync_capability_image, 
+&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;(SYNC_OPTION_NO_RETRY | SYNC_OPTION_EXPEDITED), 
+&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;sync_job_user_data, &amp;sync_job_id4);
 </pre>
-<p>This API also can be called like below. Because, account handle and sync_job_user_data are not mandatory data:</p>
+<p>This function can also be called like in the following example, because the account handle and user data are not mandatory.</p>
+
 <pre class="prettyprint">
-result = sync_manager_add_data_change_sync_job(NULL, sync_capability_music, SYNC_OPTION_NONE, sync_job_user_data, &amp;sync_job_id);
-result = sync_manager_add_data_change_sync_job(account, sync_capability_sound, SYNC_OPTION_NO_RETRY, NULL, &amp;sync_job_id2);
-result = sync_manager_add_data_change_sync_job(NULL, sync_capability_video, SYNC_OPTION_EXPEDITED, NULL, &amp;sync_job_id3);
+result = sync_manager_add_data_change_sync_job(NULL, sync_capability_music, SYNC_OPTION_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id);
+result = sync_manager_add_data_change_sync_job(account, sync_capability_sound, SYNC_OPTION_NO_RETRY, 
+&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;NULL, &amp;sync_job_id2);
+result = sync_manager_add_data_change_sync_job(NULL, sync_capability_video, SYNC_OPTION_EXPEDITED, 
+&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;NULL, &amp;sync_job_id3);
 </pre>
 <p>If the data change sync job addition process succeeds, the <span style="font-family: Courier New,Courier,monospace">SYNC_ERROR_NONE</span> value is returned.</p>
 </li>
 
-<li>This API can renew registered data change sync job by using sync_capability as same like below:
+<li>The <span style="font-family: Courier New,Courier,monospace">sync_manager_add_data_change_sync_job()</span> function can renew a registered data change sync job by using the same <span style="font-family: Courier New,Courier,monospace">sync_capability</span> as before:
 <pre class="prettyprint">
-result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar, SYNC_OPTION_NONE, sync_job_user_data, &amp;sync_job_id);
-result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar, SYNC_OPTION_EXPEDITED, sync_job_user_data2, &amp;sync_job_id);
+result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar, SYNC_OPTION_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id);
+result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar, SYNC_OPTION_EXPEDITED, 
+&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;sync_job_user_data2, &amp;sync_job_id);
 </pre>
-All the settings of the API can be reset except <span style="font-family: Courier New,Courier,monospace">sync_capability</span> and <span style="font-family: Courier New,Courier,monospace">sync_job_id</span> which are used to manage a specific sync job.
+<p>All the function parameters can be reset except <span style="font-family: Courier New,Courier,monospace">sync_capability</span> and <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>, which are used to manage a specific sync job.</p>
 </li>
 
-<li>When the data change sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_sync_job()</span> API with its <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>. If you want to stop using the account too, clean up the account handle. <p>At the end, unset the sync callbacks and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_adapter_unset_callbacks()</span> API.</p>
+<li>When the data change sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_sync_job()</span> function with its <span style="font-family: Courier New,Courier,monospace">sync_job_id</span>. If you want to stop using the account too, clean up the account handle. 
+<p>At the end, unset the sync callbacks and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_adapter_unset_callbacks()</span> function.</p>
+
 <pre class="prettyprint">
 result = sync_manager_remove_sync_job(sync_job_id);
 
@@ -343,10 +369,9 @@ sync_adapter_unset_callbacks();
 </li>
 </ol>
 
-
 <h2 id="foreach_sync" name="set_callback">Initializing the ForEach Sync</h2>
 
-<p>To interate all of registered sync jobs to manage sync job more efficiently:</p>
+<p>To iterate all registered sync jobs to manage them more efficiently:</p>
 
 <ol>
 <li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;sync_manager.h&gt;</span> header file in your UI application:
@@ -355,16 +380,18 @@ sync_adapter_unset_callbacks();
 </pre>
 </li>
 
-<li>Set the callback which is invoked and call the iterate function at the same time like below:
+<li>Set the callback to be invoked and call the iterate function at the same time:
 <pre class="prettyprint">
 int result;
 result = sync_manager_foreach_sync_job(sync_job_cb, NULL);
 </pre>
 </li>
 
-<li>The <span style="font-family: Courier New,Courier,monospace">sync_job_cb()</span> callback is invoked as many as existing registered sync jobs. Then, the sync jobs are verified with corresponding data.
+<li>The <span style="font-family: Courier New,Courier,monospace">sync_job_cb()</span> callback is invoked separately for every registered sync jobs. Then, the sync jobs are verified with a corresponding data.
 <pre class="prettyprint">
-bool sync_job_cb(account_h account, const char *sync_job_name, const char *sync_capability, int sync_job_id, bundle *sync_job_user_data, void *user_data)
+bool 
+sync_job_cb(account_h account, const char *sync_job_name, const char *sync_capability, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int sync_job_id, bundle *sync_job_user_data, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;// Verify the registered sync jobs
 }
@@ -379,6 +406,7 @@ bool sync_job_cb(account_h account, const char *sync_job_name, const char *sync_
 
 <ol>
 <li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">Sync Adapter</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;sync_adapter.h&gt;</span> header file in your service application:
+
 <pre class="prettyprint">
 #include &lt;sync_adapter.h&gt;
 </pre>
@@ -389,24 +417,28 @@ bool sync_job_cb(account_h account, const char *sync_job_name, const char *sync_
 int result;
 result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
 </pre>
-<p>When a specific event is detected or sync job is requested, the <span style="font-family: Courier New,Courier,monospace">sync_adapter_start_sync_cb</span> or <span style="font-family: Courier New,Courier,monospace">sync_adapter_cancel_sync_cb</span> can be invoked.</p>
+<p>When a specific event is detected or a sync job is requested, the <span style="font-family: Courier New,Courier,monospace">sync_adapter_start_sync_cb</span> or <span style="font-family: Courier New,Courier,monospace">sync_adapter_cancel_sync_cb</span> callback can be invoked.</p>
 </li>
 
 <li>When the <span style="font-family: Courier New,Courier,monospace">on_start_cb()</span> callback is invoked, the predefined data sync process is performed inside the callback function. The <span style="font-family: Courier New,Courier,monospace">on_cancel_cb()</span> callback works in a similar way and cancels the data sync process.
 <pre class="prettyprint">
-bool on_start_cb(account_h account, const char *sync_job_name, const char *sync_capability, bundle *sync_job_user_data)
+bool 
+on_start_cb(account_h account, const char *sync_job_name, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *sync_capability, bundle *sync_job_user_data)
 {
 &nbsp;&nbsp;&nbsp;// Start the data sync process
 }
 
-void on_cancel_cb(account_h account, const char *sync_job_name, const char *sync_capability, bundle *sync_job_user_data)
+void 
+on_cancel_cb(account_h account, const char *sync_job_name, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *sync_capability, bundle *sync_job_user_data)
 {
 &nbsp;&nbsp;&nbsp;// Cancel the data sync process
 }
 </pre>
 </li>
 
-<li>If the sync operation is no longer needed, unset callbacks to free the sync adapter instance:
+<li>When the sync operation is no longer needed, unset callbacks to free the sync adapter instance:
 <pre class="prettyprint">
 result = sync_adapter_unset_callbacks();
 </pre>
diff --git a/org.tizen.tutorials/html/native/app_framework/alarm_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/alarm_tutorial_n.htm
new file mode 100644
index 0000000..b7ecf3a
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/alarm_tutorial_n.htm
@@ -0,0 +1,361 @@
+<!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>Alarm: Setting and Managing Alarms</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#init">Initializing Alarms</a></li>
+			<li><a href="#scenario_1">Setting an Alarm after Specific Time</a></li>
+			<li><a href="#scenario_2">Setting an Alarm on a Specific Date</a></li>
+			<li><a href="#scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</a></li>
+			<li><a href="#scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</a></li>			
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.guides/html/native/app/alarm_n.htm">Alarm Guide</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">Alarm API for Mobile Native</a></li> 
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">Alarm API for Wearable Native</a></li> 
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+	<h1>Alarm: Setting and Managing Alarms</h1>
+
+
+<p>This tutorial demonstrates how you can set various alarm and cancel them when no longer needed.</p> 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Alarm API basics by learning about:</p>
+
+<ul>
+	<li><a href="#init">Initializing Alarms</a>
+	<p>Initialize the alarm for use.</p></li>
+	<li><a href="#scenario_1">Setting an Alarm after Specific Time</a>
+	<p>Set single alarms at specific times.</p></li>
+	<li><a href="#scenario_2">Setting an Alarm on a Specific Date</a>
+	<p>Set an alarm on a specific date.</p></li>
+	<li><a href="#scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</a>
+	<p>Set a recurring alarm for a period of time at a specific time.</p></li>
+	<li><a href="#scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</a>
+	<p>List all alarms and cancel them.</p></li>	
+</ul>
+
+<h2 id="init" name="init">Initializing Alarms</h2>
+
+<p>To initialize the alarm:</p>
+<ol><li>To use the functions and data types of the Alarm API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;app.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;app_alarm.h&gt;
+</pre></li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.get</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span> privileges are required for the Alarm API.
+</li></ol>
+
+<h2 id="scenario_1" name="scenario_1">Setting an Alarm after Specific Time</h2>
+
+<table class="note">
+    <tbody>
+     <tr>
+      <th class="note">Note</th>
+     </tr>
+     <tr>
+      <td class="note">Since 2.4, the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_after_delay()</span> function does not support an exact period and delay for minimizing the wake-ups of the device. The system can adjust when the alarm expires.</td>
+     </tr>
+    </tbody>
+</table>
+
+
+<p>To set an alarm after a specific time:</p>
+
+<ol>
+
+<li>
+<p><strong>Implement the AlarmRegister application</strong></p>
+<p>AlarmRegister requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span> privilege.</p>
+<ol type="a"><li>
+<p>To identify which application to alarm, the Alarm API needs the <span style="font-family: Courier New,Courier,monospace">app_control_h</span> handle.</p>
+<p>Obtain the <span style="font-family: Courier New,Courier,monospace">app_control_h</span> handle of a specific app by calling the <span style="font-family: Courier New,Courier,monospace">app_control_set_app_id(app_control_h app_control, const char *app_id)</span> function. You can get AlarmTarget <span style="font-family: Courier New,Courier,monospace">app_id</span> from the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. </p>
+
+<pre class="prettyprint">
+bool 
+init_alarm()
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;int DELAY = 2;
+&nbsp;&nbsp;&nbsp;int REMIND = 1;
+&nbsp;&nbsp;&nbsp;int alarm_id;
+
+&nbsp;&nbsp;&nbsp;app_control_h app_control = NULL;
+&nbsp;&nbsp;&nbsp;ret = app_control_create(&amp;app_control);
+&nbsp;&nbsp;&nbsp;ret = app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
+&nbsp;&nbsp;&nbsp;ret = app_control_set_app_id (app_control, &quot;org.tizen.alarmslave&quot;);
+</pre>
+</li>
+
+<li>
+
+	<p>To schedule an alarm after a delay, the function requires 4 parameters:</p>
+  <ul>
+	<li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> to perform the specific work when the alarm is triggered.</li>	
+	<li>[in] <span style="font-family: Courier New,Courier,monospace">delay</span>: The amount of time before the first execution (in seconds). Since 2.4, although this is inexact, the alarm does not fire before this time. </li>
+	<li>[in] <span style="font-family: Courier New,Courier,monospace">period</span>: The amount of time before a subsequent alarm (in seconds). Since 2.4, this value does not guarantee accuracy. The actual interval is calculated by the OS, and the minimum value is 600 seconds.</li>
+	<li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span> The alarm ID that uniquely identifies an alarm.</li>
+  </ul>
+
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;ret = alarm_schedule_after_delay(app_control, DELAY, REMIND, &amp;alarm_id);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre> 
+</li></ol></li>
+
+<li>
+<p><strong>Implement the AlarmTarget application</strong></p>
+<p>A scheduled alarm calls AlarmTarget&#39;s <span style="font-family: Courier New,Courier,monospace">app_control_cb</span> callback when the alarm expires.</p>
+
+<pre class="prettyprint">
+void 
+service_app_control(app_control_h app_control, void *data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;app_control called by Alarm API.&quot;);
+}
+</pre>
+</li>
+</ol>			
+
+<h2 id="scenario_2" name="scenario_2">Setting an Alarm on a Specific Date</h2>
+
+<p>To schedule an alarm on a specific date, the function requires 4 parameters:</p>
+
+<ul>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> to perform the specific work when the alarm is triggered </li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">date</span>: The first active alarm time </li>
+  <li>[in] <span style="font-family: Courier New,Courier,monospace">period</span>: The amount of time before a subsequent alarm (in seconds). If set to 0, there is only 1 execution. </li>
+  <li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The alarm ID that uniquely identifies an alarm </li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">tm</span> struct is included in the <span style="font-family: Courier New,Courier,monospace">&lt;time.h&gt;</span> header file. The following table lists the selected <span style="font-family: Courier New,Courier,monospace">tm</span> fields.</p>
+
+<table> 
+   <caption>
+     Table: tm fields 
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th>Member</th> 
+     <th>Type</th> 
+	 <th>Meaning</th>
+	 <th>Range</th>
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_sec</span></td> 
+     <td>int</td> 
+	 <td>Seconds after the minute</td> 
+	 <td>0-61*</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_min</span></td> 
+     <td>int</td> 
+	 <td>Minutes after the hour</td> 
+	 <td>0-59</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_hour</span></td> 
+     <td>int</td> 
+	 <td>Hours since midnight</td> 
+	 <td>0-23</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_mday</span></td> 
+     <td>int</td> 
+	 <td>Day of the month</td> 
+	 <td>1-31</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_mon</span></td> 
+     <td>int</td> 
+	 <td>Months since January</td> 
+	 <td>0-11</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">tm_year</span></td> 
+     <td>int</td> 
+	 <td>Years since 1900</td> 
+	 <td></td> 
+    </tr> 	
+   </tbody> 
+  </table> 
+  
+<pre class="prettyprint">
+int alarm_schedule_at_date(app_control_h app_control, struct tm* date, int period, int* alarm_id)
+</pre>
+			
+<p>The following code schedules <span style="font-family: Courier New,Courier,monospace">app_control</span> to invoke after 4 seconds. Modifying, for example, <span style="font-family: Courier New,Courier,monospace">date.tm_mday</span>, sets the alarm to another day of the month.</p>
+<pre class="prettyprint">struct tm date;
+ret = alarm_get_current_time(&amp;date);
+
+date.tm_sec+=4;
+ret = alarm_schedule_at_date(app, &amp;date, 0, &amp;alarm_id);	
+</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">alarm_schedule_at_date()</span> function has been deprecated since Tizen 2.4. Use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_once_at_date()</span> function instead.</td>
+     </tr>
+    </tbody>
+</table>
+
+
+<h2 id="scenario_3" name="scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</h2>
+
+
+<p>To schedule an alarm on a specific time of the day with a recurrence, use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_with_recurrence_week_flag()</span> function, which requires 4 parameters:</p>
+<ul>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> that performs the specific work when the alarm is triggered.</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">date</span>: The date on which the alarm is triggered for the first time.</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">week_flag</span>: The day of the week on which the alarm recurs. The value is defined with the <span style="font-family: Courier New,Courier,monospace">enum alarm_week_flag_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">wearable</a> applications), and can be a combination of days, for example <span style="font-family: Courier New,Courier,monospace">ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY</span>. The value can also be a binary, such as <span style="font-family: Courier New,Courier,monospace">1&lt;&lt;3 | 1&lt;&lt;6</span>.</li>
+ <li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The unique ID that identifies the alarm.</li>
+</ul>
+
+<p>The following code schedules <span style="font-family: Courier New,Courier,monospace">app_control</span> to invoke on TUESDAY and FRIDAY.</p>
+  
+  <pre class="prettyprint">
+struct tm date;
+ret = alarm_get_current_time(&amp;date);
+
+time_t time_current = mktime(&amp;date);
+dlog_print(DLOG_INFO, TAG, &quot;Schedule on date: %s &quot;, ctime(&amp;time_current));
+ret = alarm_schedule_with_recurrence_week_flag(app_control, &amp;date, ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY, &amp;alarm_id);
+</pre>
+
+<h2 id="scenario_4" name="scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</h2>
+
+
+<p>To list all scheduled alarms, use the following function:</p>
+<pre class="prettyprint">
+int alarm_foreach_registered_alarm(alarm_registered_alarm_cb callback, void* user_data)
+</pre>
+<p>To list a scheduled alarm, the function requires 2 parameters:</p>
+<ul>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: The callback function to invoke.</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">user_data</span>: The user data to be passed to the callback.</li>
+</ul>
+
+<p>To cancel specific scheduled alarms, use the following function:</p>
+<pre class="prettyprint">
+int alarm_cancel(int alarm_id)
+</pre>
+<p>To cancel a scheduled alarm, the function requires 1 parameter:</p>
+<ul>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The alarm ID that is cancelled.</li>
+</ul>
+
+<p>The following code implements the <span style="font-family: Courier New,Courier,monospace">alarm_registered_alarm_cb()</span> function. This callback lists all registered alarms and alarm recurrence days. At the end of the function, the <span style="font-family: Courier New,Courier,monospace">alarm_cancel()</span> function is called to cancel every scheduled alarm.</p>
+<pre class="prettyprint">
+static bool 
+on_foreach_registered_alarm(int alarm_id, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int flag;
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;struct tm date;
+&nbsp;&nbsp;&nbsp;time_t time_current;
+
+&nbsp;&nbsp;&nbsp;ret = alarm_get_scheduled_date(alarm_id, &amp;date);
+&nbsp;&nbsp;&nbsp;if (ret != ALARM_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Get time Error : %d &quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Logging scheduled alarm&#39;s info
+&nbsp;&nbsp;&nbsp;time_current = mktime(&amp;date);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Registered alarm:%d on date:%s &quot;, alarm_id, ctime(&amp;time_current));
+
+&nbsp;&nbsp;&nbsp;ret = alarm_get_scheduled_recurrence_week_flag(alarm_id, &amp;flag);
+&nbsp;&nbsp;&nbsp;if (ret==0)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_SUNDAY)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on SUNDAY \n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_MONDAY)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on MONDAY \n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_TUESDAY)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on TUESDAY \n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_WEDNESDAY)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on WEDNESDAY \n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_THURSDAY)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on THURSDAY \n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_FRIDAY)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on FRIDAY \n&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_SATURDAY)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on SATURDAY \n&quot;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Cancel scheduled alarms
+&nbsp;&nbsp;&nbsp;ret = alarm_cancel(alarm_id);
+&nbsp;&nbsp;&nbsp;if (ret != ALARM_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Cancel Error : %d &quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<pre class="prettyprint">
+ret = alarm_foreach_registered_alarm(on_foreach_registered_alarm, NULL);
+if (ret != ALARM_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Listing Error : %d &quot;, ret);
+}
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm b/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
index 45040d9..e9436ac 100644
--- a/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
@@ -36,22 +36,19 @@
 	
 <p>The application framework tutorials demonstrate how to use the following features in creating Tizen native applications:</p> 
   <ul> 
-   <li><a href="application_tutorial_n.htm">Application: Using Alarms, Preferences, AppControl, and Other Fundamentals</a> <p>Demonstrates how you can manage application fundamentals, such as application settings and localized strings.</p></li> 
-   <li><a href="appgroup_tutorial_n.htm">Application Group: Managing Groups</a> <p>Demonstrates how you can define the application launch mode and manage your applications in a group.</p></li>
-    <li><a href="app_manager_tutorial_n.htm">Application Manager: Getting Information about Applications</a> <p>Demonstrates how you can get information about applications.</p></li> 
+   <li><a href="application_tutorial_n.htm">Application: Using Alarms, Preferences, AppControl, and Other Fundamentals</a> <p>Demonstrates how you can manage application fundamentals, such as application settings, alarms, application controls, and application groups.</p></li> 
+   <li><a href="app_manager_tutorial_n.htm">Application Manager: Getting Information about Applications</a> <p>Demonstrates how you can get information about applications.</p></li> 
    <li><a href="badge_tutorial_n.htm">Badge: Displaying the Notification (Badge) Count on the Home Screen</a> <p>Demonstrates how you can create and modify badges.</p></li>
    <li><a href="bundle_tutorial_n.htm">Bundle: Using the String-based Dictionary ADT</a> <p>Demonstrates how you can create and manage a key-value dictionary.</p></li>
    <li><a href="data_control_tutorial_n.htm">Data Control: Exchanging Specific Data Between Applications</a><p>Demonstrates how you can manage map data and SQL data.</p></li>
-   <li><a href="message_port_tutorial_n.htm">Message Port: Passing Messages Between Applications</a> <p>Demonstrates how you can send and receive messages through message ports.</p></li>	   
+   <li><a href="message_port_tutorial_n.htm">Message Port: Passing Messages Between Applications</a> <p>Demonstrates how you can send and receive messages through message ports.</p></li>	 
    <li><a href="notification_tutorial_n.htm">Notification: Notifying the User of Application Events</a> <p>Demonstrates how you can display notifications on the application screen.</p></li>
    <li><a href="package_tutorial_n.htm">Package Manager: Installing and Uninstalling Applications</a> <p>Demonstrates how you can manage and retrieve package information.</p></li>
    <li><a href="service_app_tutorial_n.htm">Service Application: Creating Background Applications</a> <p>Demonstrates how you can create and manage native service applications.</p></li>
+   <li><a href="shortcut_tutorial_n.htm">Shortcut: Adding a Shortcut to Home</a> <p>Demonstrates how you can create and modify shortcuts and widgets on the home screen.</p></li>   
    <li><a href="widget_tutorial_n.htm">Widget Application: Creating Widget Applications</a> <p>Demonstrates how you can create and manage widget applications.</p></li>    
   </ul> 
-<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
-  <ul>   
-   <li><a href="shortcut_tutorial_n.htm">Shortcut: Adding a Shortcut to Home</a> <p>Demonstrates how you can create and modify shortcuts on the home screen.</p></li>
-  </ul> 	
+	
 <p>The following tutorials apply in <strong>wearable applications only</strong>:</p>
   <ul>   
    <li><a href="watch_tutorial_n.htm">Watch Application: Creating a Watch Application</a> <p>Demonstrates how you can create a watch application, set the time, and use the ambient mode.</p></li>
diff --git a/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm
index 5635188..b680f91 100644
--- a/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -59,11 +59,7 @@
 #include &lt;app_manager.h&gt;
 </pre></li>
 
-<li>Get the context of the currently running application.
-
-<p>When an application is not running, it is impossible to get its context.</p>
-
-<p>Call the <span style="font-family: Courier New,Courier,monospace">app_manager_get_app_context()</span> function with the ID of the application from which the context is being obtained, and the handle (<span style="font-family: Courier New,Courier,monospace">app_context_h*</span>) to the application context which is filled with the received context:</p>
+<li>Get the context of the currently running application with the <span style="font-family: Courier New,Courier,monospace">app_manager_get_app_context()</span> function. Its parameters are the ID of the application from which the context is being obtained, and the handle (<span style="font-family: Courier New,Courier,monospace">app_context_h*</span>) to the application context which is filled with the received context. When an application is not running, it is impossible to get its context.
 
 
 <pre class="prettyprint">
@@ -164,7 +160,8 @@ ret = app_info_filter_add_string(app_info_filter, PACKAGE_INFO_PROP_APP_TYPE, &q
 <li>Use the <span style="font-family: Courier New,Courier,monospace">app_info_filter_cb()</span> callback to retrieve all filtered applications and print their information:
 
 <pre class="prettyprint">
-void app_info_filter_cb(app_info_filter_h app_info, void *user_data)
+void 
+app_info_filter_cb(app_info_filter_h app_info, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;int ret;
 
diff --git a/org.tizen.tutorials/html/native/app_framework/appcontrol_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/appcontrol_tutorial_n.htm
new file mode 100644
index 0000000..79d8571
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/appcontrol_tutorial_n.htm
@@ -0,0 +1,324 @@
+<!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>App Control: Launching Applications and Managing Groups</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#use">Running Applications Using Extra Data</a></li>
+			<li><a href="#mode">Controlling the Launch Mode</a></li>		
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.guides/html/native/app/appcontrol_n.htm">App Control Guide</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Mobile Native</a></li> 
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Wearable Native</a></li> 
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+	<h1>App Control: Launching Applications and Managing Groups</h1>
+
+
+<p>This tutorial demonstrates how you can launch other applications and manage application groups.</p> 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the App Control API basics by learning about:</p>
+
+<ul>
+	<li><a href="#use">Running Applications Using Extra Data</a> <p>Run a specific application control with preconfigured parameters.</p></li>
+	<li><a href="#mode">Controlling the Launch Mode</a> <p>Set the launch mode when calling for an application through an application control to manage application groups.</p></li>
+</ul>
+
+ <h2 id="use" name="use">Running Applications Using Extra Data</h2>
+
+<p>To run a specified <span style="font-family: Courier New,Courier,monospace">app_control</span> with some preconfigured parameters:</p>
+
+<ol>
+<li><p>To use the functions and data types of the 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>Prepare <span style="font-family: Courier New,Courier,monospace">app_control</span>.</p>
+<pre class="prettyprint">
+error_code = app_control_create(&amp;app_control);
+
+ret = app_control_create(&amp;app);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_create() is failed. err = %d&quot;, ret);
+</pre>
+</li>
+<li>
+<p>When the <span style="font-family: Courier New,Courier,monospace">app_control</span> is created, set the operation. 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. 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.</p>
+<pre class="prettyprint">
+ret = app_control_set_operation(app, APP_CONTROL_OPERATION_VIEW);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_set_operation() is failed. err = %d&quot;, ret);
+
+ret = app_control_set_mime(app, &quot;image/jpeg&quot;);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_set_mime() is failed. err = %d&quot;, ret);
+</pre>
+
+<p>The following table lists the available base application services.</p>
+
+   <table style="vertical-align: middle; text-align: center;">
+		   <caption>
+				   Table: Tizen base application services
+		   </caption>
+
+		   <tbody>
+		   <tr>
+				   <th>Service</th>
+				   <th>Operation</th>
+				   <th>Scheme</th>
+				   <th>MIME</th>
+		   </tr>
+		   <tr>
+				   <td style="vertical-align: middle; text-align: center;">Browsing a Web page</td>
+				   <td style="vertical-align: middle; text-align: center;" rowspan="4"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
+				   <td style="vertical-align: middle; text-align: center;">
+						   <ul>
+								   <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">https</span></li>
+						   </ul>
+				   </td>
+				   <td style="vertical-align: middle; text-align: center;">-</td>
+		   </tr>
+		   <tr>
+				   <td style="vertical-align: middle; text-align: center;">Displaying an image</td>
+				   <td style="vertical-align: middle; text-align: center;">
+						   <ul>
+								   <li><span style="font-family: Courier New,Courier,monospace">file</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">https</span></li>
+						   </ul>
+				   </td>
+				   <td style="vertical-align: middle; text-align: center;">
+						   <ul>
+								   <li><span style="font-family: Courier New,Courier,monospace">image/bmp</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">image/gif</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">image/jpeg</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">image/png</span></li>
+						   </ul>
+				   </td>
+		   </tr>
+		   <tr>
+				  <td style="vertical-align: middle; text-align: center;">Playing a sound file</td>
+				   <td style="vertical-align: middle; text-align: center;" rowspan="3"><span style="font-family: Courier New,Courier,monospace">file</span></td>
+				   <td style="vertical-align: middle; text-align: center;">
+						   <ul>
+								   <li><span style="font-family: Courier New,Courier,monospace">audio/aac</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">audio/amr</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">audio/mp3</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">audio/wav</span></li>
+						   </ul>
+				   </td>
+		   </tr>
+		   <tr>
+				   <td style="vertical-align: middle; text-align: center;">Playing a video file</td>
+				   <td style="vertical-align: middle; text-align: center;">
+						   <ul>
+								   <li><span style="font-family: Courier New,Courier,monospace">video/mp4</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">video/3gpp</span></li>
+						   </ul>
+				   </td>
+		   </tr>
+		   <tr>
+				   <td style="vertical-align: middle; text-align: center;">Selecting a file</td>
+				   <td style="vertical-align: middle; text-align: center;"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></td>
+				   <td style="vertical-align: middle; text-align: center;">
+						   <ul>
+								   <li><span style="font-family: Courier New,Courier,monospace">*/*</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
+								   <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
+						   </ul>
+				   </td>
+		   </tr>
+		   </tbody>
+   </table>
+</li>
+
+<li>
+<p>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">
+ret = app_control_add_extra_data(app, Your Message Key, message);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_add_extra_data() is failed. err = %d&quot;, ret);
+</pre>
+</li>
+<li>
+<p>Launch <span style="font-family: Courier New,Courier,monospace">app_control</span> using the <span style="font-family: Courier New,Courier,monospace">app_control_send_launch_request()</span> function:</p>
+
+<pre class="prettyprint">
+ret = app_control_send_launch_request(app, NULL, NULL);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_send_launch_request() is failed. err = %d&quot;, ret);
+</pre>
+<table class="note">
+	<tbody>
+	    <tr>
+        <th class="note">Note</th>
+    </tr>
+    <tr>
+        <td class="note">Since Tizen 2.4, service applications are only allowed to be launched explicitly and the caller must be an application in the same package. Otherwise, <span style="font-family: Courier New,Courier,monospace">app_control</span> returns an error.</td>
+    </tr>
+</tbody>
+</table>
+
+</li>
+
+<li>
+  <p>Read the extra data set to <span style="font-family: Courier New,Courier,monospace">app_control</span> using the <span style="font-family: Courier New,Courier,monospace">app_control_foreach_extra_data()</span> function. The same function used on <span style="font-family: Courier New,Courier,monospace">app_control_h</span> returned by the <span style="font-family: Courier New,Courier,monospace">app_control</span> reply allows you to read the reply message.</p>
+
+  <pre class="prettyprint">
+bool
+_app_control_extra_data_cb(app_control_h app_control, const char *key, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int ret;
+&nbsp;&nbsp;&nbsp;char *value;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;ret = app_control_get_extra_data(app, key, &amp;value);
+&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_get_extra_data() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[value] %s&quot;, value);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+ret = app_control_foreach_extra_data(app, _app_control_extra_data_cb, 0);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_foreach_extra_data() is failed. err = %d&quot;, ret);
+</pre>
+</li>
+
+<li>	
+  <p>When your work with <span style="font-family: Courier New,Courier,monospace">app_control</span> is finished, clean up. 
+  	To do this, pass the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle to the 
+  	<span style="font-family: Courier New,Courier,monospace">app_control_destroy()</span> function.</p>
+<pre class="prettyprint">
+ret = app_control_destroy(app);
+if (ret != APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_destroy() is failed. err = %d&quot;, ret);
+</pre>
+</li>
+</ol>
+
+ <h2 id="mode" name="mode">Controlling the Launch Mode</h2>
+
+<p>In this use case, the caller application has a <strong>Launch</strong> button. When it is clicked, an app control is used to launch a sub application within the same group.</p>
+ 
+<p>To control the launch mode:</p>
+<ol>
+<li>Create the UI with the <strong>Launch</strong> button:
+<pre class="prettyprint">
+static void 
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *bigbox, *bx, *bt;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;bigbox = elm_box_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(bigbox, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, bigbox);
+&nbsp;&nbsp;&nbsp;evas_object_show(bigbox);
+
+&nbsp;&nbsp;&nbsp;bx = elm_box_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(bigbox, bx);
+&nbsp;&nbsp;&nbsp;evas_object_show(bx);
+
+&nbsp;&nbsp;&nbsp;bt = elm_label_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(bt, &quot;AGT3&quot;);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(bx, bt);
+&nbsp;&nbsp;&nbsp;evas_object_show(bt);
+
+&nbsp;&nbsp;&nbsp;bt = elm_button_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(bt, &quot;Launch&quot;);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(bx, bt);
+&nbsp;&nbsp;&nbsp;evas_object_show(bt);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(bt, &quot;clicked&quot;, button_click_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}</pre></li>
+
+<li>When the button is clicked, use an app control to launch the sub application.
+<p>Define the launch mode for the application to be called using the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function. The second parameter defines the launch mode with the <span style="font-family: Courier New,Courier,monospace">app_control_launch_mode_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html#gadf26b03f2f6b18acba4a946e7eb7b31c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html#gadf26b03f2f6b18acba4a946e7eb7b31c">wearable</a> applications).</p>
+<pre class="prettyprint">
+static void 
+button_click_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;app_control_h h;
+
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;h);
+&nbsp;&nbsp;&nbsp;app_control_set_operation(h, &quot;http://tizen.org/appcontrol/operation/view&quot;);
+&nbsp;&nbsp;&nbsp;app_control_set_mime(h, &quot;application/pdf&quot;);
+&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(h, APP_CONTROL_LAUNCH_MODE_GROUP);
+&nbsp;&nbsp;&nbsp;app_control_send_launch_request(h, NULL, NULL);
+
+&nbsp;&nbsp;&nbsp;app_control_destroy(h);
+}
+
+static void 
+app_control(app_control_h app_control, void *data)
+{
+&nbsp;&nbsp;&nbsp;// Handle the launch request
+}
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
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 fc6eef2..c9e2728 100644
--- a/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm
@@ -18,35 +18,12 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
 		<ul class="toc">
-			<li>Application fundamentals
-				<ul class="toc">
-				<li><a href="#fundamentals">Handling the Application Fundamentals</a></li>
-				</ul>
-			</li>	
-			<li>App control
-				<ul class="toc">
-					<li><a href="#use">Running Applications Using Extra Data</a></li>
-				</ul>
-			</li>					
-			<li>Alarm
-				<ul class="toc">
-					<li><a href="#init">Initializing Alarms</a></li>
-					<li><a href="#scenario_1">Setting an Alarm after Specific Time</a></li>
-					<li><a href="#scenario_2">Setting an Alarm on a Specific Date</a></li>
-					<li><a href="#scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</a></li>
-					<li><a href="#scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</a></li>
-				</ul>
-			</li>
-			<li>Application preferences
-				<ul class="toc">
-					<li><a href="#manage_pref">Managing Application Preferences</a></li>
-				</ul>
-			</li>
+			<li><a href="#fundamentals">Handling the Application Fundamentals</a></li>
 		</ul>
 		<p class="toc-title">Related Info</p>
 		<ul class="toc">
@@ -62,49 +39,32 @@
 	<h1>Application: Using Alarms, Preferences, AppControl, and Other Fundamentals</h1>
 
 
-<p>This tutorial demonstrates how you can manage application fundamentals, such as application settings and service applications.</p> 
+<p>This tutorial demonstrates how you can manage application fundamentals, such as application life-cycle callbacks.</p> 
 
 <h2>Warm-up</h2>
 <p>Become familiar with the Application API basics by learning about:</p>
 
 <ul>
-	<li>Application fundamentals
-		<ul> 
-			<li><a href="#fundamentals">Handling the Application Fundamentals</a> <p>Define the application entry point and life-cycle callbacks.</p></li>
-		</ul>
-	</li>
-    <li>App control
-		<ul>
-			<li><a href="#use">Running Applications Using Extra Data</a> <p>Run a specific application control with preconfigured parameters.</p></li>
-		</ul>  
-    </li>
-	<li>Alarm
-		<ul>
-			<li><a href="#init">Initializing Alarms</a>
-			<p>Initialize the alarm for use.</p></li>
-			<li><a href="#scenario_1">Setting an Alarm after Specific Time</a>
-			<p>Set single alarms at specific times.</p></li>
-			<li><a href="#scenario_2">Setting an Alarm on a Specific Date</a>
-			<p>Set an alarm on a specific date.</p></li>
-			<li><a href="#scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</a>
-			<p>Set a recurring alarm for a period of time at a specific time.</p></li>
-			<li><a href="#scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</a>
-			<p>List all alarms and cancel them.</p></li>
-		</ul>
-    </li>
-	<li>Application preferences
-		<ul>
-			<li><a href="#manage_pref">Managing Application Preferences</a><p>Manage application preferences.</p></li>
-		</ul>
-	</li>
-	
+	<li><a href="#fundamentals">Handling the Application Fundamentals</a> <p>Define the application entry point and life-cycle callbacks.</p></li>
+</ul>
+
+<p>For additional application-related features, see:</p> 
+<ul>
+	<li><a href="alarm_tutorial_n.htm">Alarm: Setting and Managing Alarms</a> 
+	<p>Set and cancel various alarms.</p></li>	
+	<li><a href="appcontrol_tutorial_n.htm">App Control: Launching Applications and Managing Groups</a> 
+	<p>Launch other applications and manage application groups.</p></li>	
+	<li><a href="event_tutorial_n.htm">Event: Managing Events</a> 
+	<p>Broadcast and subscribe to system and user-defined events.</p></li>	
+	<li><a href="preference_tutorial_n.htm">Preference: Managing Preferences</a> 
+	<p>Manage application preferences.</p></li>		
 </ul>
 
  <h2 id="fundamentals" name="fundamentals">Handling the Application Fundamentals</h2>
 
 <p>The Application API is the framework all Tizen applications are based on. It is simple and only handles interactions between applications and the operating system.</p>
 <p>An application starts with the <span style="font-family: Courier New,Courier,monospace;">main()</span> function. It initializes the Application API and starts it.</p>
-<p>The code below is the minimal application using the Application API. It only builds and runs.</p>
+<p>The following code is the minimal application using the Application API. It only builds and runs.</p>
 <pre class="prettyprint">
 // Add this include to be able to use the functions from the Application API
 #include &lt;app.h&gt;
@@ -123,11 +83,11 @@ main(int argc, char *argv[])
 <p>The Application API has 2 classes of application state callbacks: those about the application&#39;s life-cycle and those about the system.</p>
 <p>The application&#39;s life-cycle callbacks are:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace;">create</span>: first initialization, comes after <span style="font-family: Courier New,Courier,monospace;">ui_app_main()</span> has been called and initializes UI.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">control</span>: triggered when the application is started to do something. It can be called several times during the lifespan of an application, it shows the screen for the action requested. It requires specific information given to the callback.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">terminate</span>: saves work, releases resources, and exits.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">pause</span>: sets the application&#39;s window not visible and switches to a mode which uses less resources.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">resume</span>: sets the application&#39;s window to be visible again.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">create</span>: First initialization, comes after <span style="font-family: Courier New,Courier,monospace;">ui_app_main()</span> has been called and initializes UI.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">control</span>: Triggered when the application is started to do something. It can be called several times during the lifespan of an application, it shows the screen for the action requested. It requires specific information given to the callback.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">terminate</span>: Saves work, releases resources, and exits.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">pause</span>: Sets the application&#39;s window not visible and switches to a mode which uses less resources.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">resume</span>: Sets the application&#39;s window to be visible again.</li>
 </ul>
 
 <p>The system-related callbacks can be handled with the <span style="font-family: Courier New,Courier,monospace;">app_event_cb()</span> callback:</p>
@@ -139,7 +99,7 @@ main(int argc, char *argv[])
 	   <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_REGION_FORMAT_CHANGED</span>: Event type responsible for refreshing the display into the new time zone.</li>
 </ul>
 
-<p>A basic implementation is shown below:</p>
+<p>A basic implementation is shown in the following example:</p>
 <pre class="prettyprint">
 #include &lt;app.h&gt;
 
@@ -227,575 +187,13 @@ main(int argc, char *argv[])
 <p>The <span style="font-family: Courier New,Courier,monospace;">app_control_h</span> type is opaque and information can only be extracted from it through functions from the SDK.</p>
 <p>The most interesting ones are:</p>
 <ul>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span>: retrieves a string describing which operation the application was started for.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_mime()</span>: retrieves the MIME type of the data (e.g. image/jpg).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data()</span>: gets the string value associated with the given key.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data_array()</span>: gets the string array associated with the given key (first check with <span style="font-family: Courier New,Courier,monospace;">app_control_is_extra_data_array()</span> whether the data associated with a key is an array).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span>: Retrieves a string describing which operation the application was started for.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_mime()</span>: Retrieves the MIME type of the data (such as image/jpg).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data()</span>: Gets the string value associated with the given key.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data_array()</span>: Gets the string array associated with the given key (first check with <span style="font-family: Courier New,Courier,monospace;">app_control_is_extra_data_array()</span> whether the data associated with a key is an array).</li>
 </ul>
 <p>If other functions are needed, check the <span style="font-family: Courier New,Courier,monospace;">app.h</span> header.</p>
 
- <h2 id="use" name="use">Running Applications Using Extra Data</h2>
-
-<p>To run a specified <span style="font-family: Courier New,Courier,monospace">app_control</span> with some preconfigured parameters:</p>
-
-<ol>
-<li><p>To use the functions and data types of the 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>Prepare <span style="font-family: Courier New,Courier,monospace">app_control</span>.</p>
-<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)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_create() is failed. err = %d&quot;, ret);
-
-ret = app_control_set_operation(app, APP_CONTROL_OPERATION_VIEW);
-if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_set_operation() is failed. err = %d&quot;, ret);
-
-ret = app_control_set_mime(app, &quot;image/jpeg&quot;);
-if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_set_mime() is failed. err = %d&quot;, ret);
-
-ret = app_control_add_extra_data(app, Your Message Key, message);
-if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_add_extra_data() is failed. err = %d&quot;, ret);
-</pre>
-
-<p>The following table lists the available base application services.</p>
-
-   <table style="vertical-align: middle; text-align: center;">
-		   <caption>
-				   Table: Tizen base application services
-		   </caption>
-
-		   <tbody>
-		   <tr>
-				   <th>Service</th>
-				   <th>Operation</th>
-				   <th>Scheme</th>
-				   <th>MIME</th>
-		   </tr>
-		   <tr>
-				   <td style="vertical-align: middle; text-align: center;">Browsing a Web page</td>
-				   <td style="vertical-align: middle; text-align: center;" rowspan="4"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
-				   <td style="vertical-align: middle; text-align: center;">
-						   <ul>
-								   <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">https</span></li>
-						   </ul>
-				   </td>
-				   <td style="vertical-align: middle; text-align: center;">-</td>
-		   </tr>
-		   <tr>
-				   <td style="vertical-align: middle; text-align: center;">Displaying an image</td>
-				   <td style="vertical-align: middle; text-align: center;">
-						   <ul>
-								   <li><span style="font-family: Courier New,Courier,monospace">file</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">https</span></li>
-						   </ul>
-				   </td>
-				   <td style="vertical-align: middle; text-align: center;">
-						   <ul>
-								   <li><span style="font-family: Courier New,Courier,monospace">image/bmp</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">image/gif</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">image/jpeg</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">image/png</span></li>
-						   </ul>
-				   </td>
-		   </tr>
-		   <tr>
-				  <td style="vertical-align: middle; text-align: center;">Playing a sound file</td>
-				   <td style="vertical-align: middle; text-align: center;" rowspan="3"><span style="font-family: Courier New,Courier,monospace">file</span></td>
-				   <td style="vertical-align: middle; text-align: center;">
-						   <ul>
-								   <li><span style="font-family: Courier New,Courier,monospace">audio/aac</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">audio/amr</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">audio/mp3</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">audio/wav</span></li>
-						   </ul>
-				   </td>
-		   </tr>
-		   <tr>
-				   <td style="vertical-align: middle; text-align: center;">Playing a video file</td>
-				   <td style="vertical-align: middle; text-align: center;">
-						   <ul>
-								   <li><span style="font-family: Courier New,Courier,monospace">video/mp4</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">video/3gpp</span></li>
-						   </ul>
-				   </td>
-		   </tr>
-		   <tr>
-				   <td style="vertical-align: middle; text-align: center;">Selecting a file</td>
-				   <td style="vertical-align: middle; text-align: center;"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></td>
-				   <td style="vertical-align: middle; text-align: center;">
-						   <ul>
-								   <li><span style="font-family: Courier New,Courier,monospace">*/*</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
-								   <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
-						   </ul>
-				   </td>
-		   </tr>
-		   </tbody>
-   </table>
-</li>
-
-<li>
-<p>Launch <span style="font-family: Courier New,Courier,monospace">app_control</span>.</p>
-
-<p>After preparing <span style="font-family: Courier New,Courier,monospace">app_control</span>, launch it using the <span style="font-family: Courier New,Courier,monospace">app_control_send_launch_request()</span> function:</p>
-
-<pre class="prettyprint">
-ret = app_control_send_launch_request(app, NULL, NULL);
-if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_send_launch_request() is failed. err = %d&quot;, ret);
-</pre>
- <table class="note">
-<tbody>
-    <tr>
-        <th class="note">Note</th>
-    </tr>
-    <tr>
-        <td class="note">Since Tizen 2.4, service applications are only allowed to be launched explicitly and the caller must be an application with the same package. Otherwise, the app_control will return error.</td>
-    </tr>
-</tbody>
-</table>
-</li>
-
-<li>
-  <p>Get extra data.</p>	
-  <p>Read the extra data set to <span style="font-family: Courier New,Courier,monospace">app_control</span> using the <span style="font-family: Courier New,Courier,monospace">app_control_foreach_extra_data()</span> function. The same function used on <span style="font-family: Courier New,Courier,monospace">app_control_h</span> returned by the <span style="font-family: Courier New,Courier,monospace">app_control</span> reply allows you to read the reply message.</p>
-
-  <pre class="prettyprint">
-bool _app_control_extra_data_cb(app_control_h app_control, const char *key, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;char *value;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;ret = app_control_get_extra_data(app, key, &amp;value);
-&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_get_extra_data() is failed. err = %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[value] %s&quot;, value);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-ret = app_control_foreach_extra_data(app, _app_control_extra_data_cb, 0);
-if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_foreach_extra_data() is failed. err = %d&quot;, ret);
-</pre>
-</li>
-
-<li>
-  <p>Clean up.</p>	
-  <p>When your work with <span style="font-family: Courier New,Courier,monospace">app_control</span> is finished, clean up. 
-  	To do this, pass the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle to the 
-  	<span style="font-family: Courier New,Courier,monospace">app_control_destroy()</span> function.</p>
-<pre class="prettyprint">
-ret = app_control_destroy(app);
-if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_destroy() is failed. err = %d&quot;, ret);
-</pre>
-</li>
-</ol>
-
-
-<h2 id="init" name="init">Initializing Alarms</h2>
-
-<p>To initialize the alarm:</p>
-<ol><li>To use the functions and data types of the Alarm API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;app.h&gt;</span> header file in your application:
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;app_alarm.h&gt;
-</pre></li>
-
-<li>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.get</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span> privileges are required for the Alarm API.
-</li></ol>
-
-<h2 id="scenario_1" name="scenario_1">Setting an Alarm after Specific Time</h2>
-
-<table class="note">
-    <tbody>
-     <tr>
-      <th class="note">Note</th>
-     </tr>
-     <tr>
-      <td class="note">Since 2.4, the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_after_delay()</span> function does not support an exact period and delay for minimizing the wake-ups of the device. The system can adjust when the alarm expires.</td>
-     </tr>
-    </tbody>
-</table>
-
-
-<p>To set an alarm after a specific time:</p>
-
-<ol>
-
-<li>
-<p><strong>Implement the AlarmRegister application</strong></p>
-<p>AlarmRegister requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span> privilege.</p>
-<ol type="a"><li>
-<p>To identify which application to alarm, the Alarm API needs <span style="font-family: Courier New,Courier,monospace">app_control_h</span>.</p>
-<p>Obtain <span style="font-family: Courier New,Courier,monospace">app_control_h</span> of a specific app by calling <span style="font-family: Courier New,Courier,monospace">app_control_set_app_id(app_control_h app_control, const char *app_id);</span>. You can get AlarmTarget <span style="font-family: Courier New,Courier,monospace">app_id</span> from the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. </p>
-
-<pre class="prettyprint">
-bool init_alarm()
-{
-&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;int DELAY = 2;
-&nbsp;&nbsp;&nbsp;int REMIND = 1;
-&nbsp;&nbsp;&nbsp;int alarm_id;
-
-&nbsp;&nbsp;&nbsp;app_control_h app_control = NULL;
-&nbsp;&nbsp;&nbsp;ret = app_control_create(&amp;app_control);
-&nbsp;&nbsp;&nbsp;ret = app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
-&nbsp;&nbsp;&nbsp;ret = app_control_set_app_id (app_control, &quot;org.tizen.alarmslave&quot;);
-</pre>
-</li>
-
-<li>
-
-	<p>To schedule an alarm after a delay, the function requires 4 parameters:</p>
-  <ul>
-	<li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> to perform the specific work when the alarm is triggered</li>	
-	<li>[in] <span style="font-family: Courier New,Courier,monospace">delay</span>: The amount of time before the first execution (in seconds). Since 2.4, although this is inexact, the alarm does not fire before this time. </li>
-	<li>[in] <span style="font-family: Courier New,Courier,monospace">period</span>: The amount of time before a subsequent alarm (in seconds). Since 2.4, this value does not guarantee accuracy. The actual interval is calculated by the OS, and the minimum value is 600 seconds.</li>
-	<li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span> The alarm ID that uniquely identifies an alarm</li>
-  </ul>
-
-
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ret = alarm_schedule_after_delay(app_control, DELAY, REMIND, &amp;alarm_id);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre> 
-</li></ol></li>
-
-<li>
-<p><strong>Implement the AlarmTarget application</strong></p>
-<p>A scheduled alarm calls AlarmTarget&#39; <span style="font-family: Courier New,Courier,monospace">app_control_cb</span> callback when the alarm expires.</p>
-
-<pre class="prettyprint">
-void service_app_control(app_control_h app_control, void *data)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;app_control called by Alarm API.&quot;);
-}
-</pre>
-</li>
-</ol>			
-
-<h2 id="scenario_2" name="scenario_2">Setting an Alarm on a Specific Date</h2>
-
-<p>To schedule an alarm on a specific date, the function requires 4 parameters:</p>
-
-<ul>
-  <li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> to perform the specific work when the alarm is triggered </li>
-  <li>[in] <span style="font-family: Courier New,Courier,monospace">date</span>: The first active alarm time </li>
-  <li>[in] <span style="font-family: Courier New,Courier,monospace">period</span>: The amount of time before a subsequent alarm (in seconds). If set to 0, there is only 1 execution. </li>
-  <li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The alarm ID that uniquely identifies an alarm </li>
-</ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">tm</span> struct is included in the <span style="font-family: Courier New,Courier,monospace">&lt;time.h&gt;</span> header file. The following table lists the selected <span style="font-family: Courier New,Courier,monospace">tm</span> fields.</p>
-
-<table> 
-   <caption>
-     Table: tm fields 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Member</th> 
-     <th>Type</th> 
-	 <th>Meaning</th>
-	 <th>Range</th>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">tm_sec</span></td> 
-     <td>int</td> 
-	 <td>Seconds after the minute</td> 
-	 <td>0-61*</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">tm_min</span></td> 
-     <td>int</td> 
-	 <td>Minutes after the hour</td> 
-	 <td>0-59</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">tm_hour</span></td> 
-     <td>int</td> 
-	 <td>Hours since midnight</td> 
-	 <td>0-23</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">tm_mday</span></td> 
-     <td>int</td> 
-	 <td>Day of the month</td> 
-	 <td>1-31</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">tm_mon</span></td> 
-     <td>int</td> 
-	 <td>Months since January</td> 
-	 <td>0-11</td> 
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">tm_year</span></td> 
-     <td>int</td> 
-	 <td>Years since 1900</td> 
-	 <td></td> 
-    </tr> 	
-   </tbody> 
-  </table> 
-  
-<pre class="prettyprint">
-int alarm_schedule_at_date(app_control_h app_control, struct tm* date, int period, int* alarm_id)
-</pre>
-			
-<p>The following code schedules <span style="font-family: Courier New,Courier,monospace">app_control</span> to invoke after 4 seconds. Modifying, for example, <span style="font-family: Courier New,Courier,monospace">date.tm_mday</span>, sets the alarm to another day of the month.</p>
-<pre class="prettyprint">struct tm date;
-ret = alarm_get_current_time(&amp;date);
-
-date.tm_sec+=4;
-ret = alarm_schedule_at_date(app, &amp;date, 0, &amp;alarm_id);	
-</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">alarm_schedule_at_date()</span> function has been deprecated since Tizen 2.4. Use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_once_at_date()</span> function instead.</td>
-     </tr>
-    </tbody>
-</table>
-
-
-<h2 id="scenario_3" name="scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</h2>
-
-
-<p>To schedule an alarm on a specific time of the day with a recurrence, use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_with_recurrence_week_flag()</span> function, which requires 4 parameters:</p>
-<ul>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> that performs the specific work when the alarm is triggered.</li>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">date</span>: The date on which the alarm is triggered for the first time.</li>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">week_flag</span>: The day of the week on which the alarm recurs. The value is defined with the <span style="font-family: Courier New,Courier,monospace">enum alarm_week_flag_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">wearable</a> applications), and can be a combination of days, for example <span style="font-family: Courier New,Courier,monospace">ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY</span>. The value can also be a binary, such as <span style="font-family: Courier New,Courier,monospace">1&lt;&lt;3 | 1&lt;&lt;6</span>.</li>
- <li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The unique ID that identifies the alarm.</li>
-</ul>
-
-<p>The following code schedules <span style="font-family: Courier New,Courier,monospace">app_control</span> to invoke on TUESDAY and FRIDAY.</p>
-  
-  <pre class="prettyprint">
-struct tm date;
-ret = alarm_get_current_time(&amp;date);
-
-time_t time_current = mktime(&amp;date);
-dlog_print(DLOG_INFO, TAG, &quot;Schedule on date: %s &quot;, ctime(&amp;time_current));
-ret = alarm_schedule_with_recurrence_week_flag(app_control, &amp;date, ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY, &amp;alarm_id);
-</pre>
-
-<h2 id="scenario_4" name="scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</h2>
-
-
-<p>To list all scheduled alarms, use the following function:</p>
-<pre class="prettyprint">
-int alarm_foreach_registered_alarm(alarm_registered_alarm_cb callback, void* user_data)
-</pre>
-<p>To list a scheduled alarm, the function requires 2 parameters:</p>
-<ul>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: The callback function to invoke.</li>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">user_data</span>: The user data to be passed to the callback.</li>
-</ul>
-
-<p>To cancel specific scheduled alarms, use the following function:</p>
-<pre class="prettyprint">
-int alarm_cancel(int alarm_id)
-</pre>
-<p>To cancel a scheduled alarm, the function requires 1 parameter:</p>
-<ul>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The alarm ID that is cancelled.</li>
-</ul>
-
-<p>The following code implements the <span style="font-family: Courier New,Courier,monospace">alarm_registered_alarm_cb()</span> function. This callback lists all registered alarms and alarm recurrence days. At the end of the function, the <span style="font-family: Courier New,Courier,monospace">alarm_cancel()</span> function is called to cancel every scheduled alarm.</p>
-<pre class="prettyprint">
-static bool on_foreach_registered_alarm(int alarm_id, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;int flag;
-&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;struct tm date;
-&nbsp;&nbsp;&nbsp;time_t time_current;
-
-&nbsp;&nbsp;&nbsp;ret = alarm_get_scheduled_date(alarm_id, &amp;date);
-&nbsp;&nbsp;&nbsp;if (ret != ALARM_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Get time Error : %d &quot;, ret);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;// Logging scheduled alarm&#39;s info
-&nbsp;&nbsp;&nbsp;time_current = mktime(&amp;date);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Registered alarm:%d on date:%s &quot;, alarm_id, ctime(&amp;time_current));
-
-&nbsp;&nbsp;&nbsp;ret = alarm_get_scheduled_recurrence_week_flag(alarm_id, &amp;flag);
-&nbsp;&nbsp;&nbsp;if (ret==0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_SUNDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on SUNDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_MONDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on MONDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_TUESDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on TUESDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_WEDNESDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on WEDNESDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_THURSDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on THURSDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_FRIDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on FRIDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_SATURDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on SATURDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// Cancel scheduled alarms
-&nbsp;&nbsp;&nbsp;ret = alarm_cancel (alarm_id);
-&nbsp;&nbsp;&nbsp;if (ret != ALARM_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Cancel Error : %d &quot;, ret);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-
-<pre class="prettyprint">
-ret = alarm_foreach_registered_alarm(on_foreach_registered_alarm, NULL);
-if (ret != ALARM_ERROR_NONE) 
-{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Listing Error : %d &quot;, ret);
-}
-</pre>
-
-
- <h2 id="manage_pref" name="manage_pref">Managing Application Preferences</h2>
-
- <p>You can set and get application preference data. Any stored preference data can also be shared with among the applications in the same package.</p>
- 
-<p>To manage preferences:</p>
-
-<ol><li>			
-<p>To use the functions and data types of the Preference API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PREFERENCE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;app.h&gt;</span> header file in your application:</p>
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;app_preference.h&gt;
-</pre></li>
-
-<li>Store and retrieve simple type variables.
-<p>To store a variable, you must create a key-value pair. Use the following functions to create a key-value pair for a specific simple type:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">preference_set_int (const char *key, int value)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">preference_set_double (const char *key, double value)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">preference_set_boolean (const char *key, bool value)</span></li></ul>
-
-<p>Before storing or retrieving a variable, check whether it exists using:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">preference_is_existing (const char *key, bool *existing)</span></li></ul>
-
-<p>Use the following functions to retrieve a stored variable of a given simple type:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">preference_get_int (const char *key, int *value)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">preference_get_double (const char *key, double *value)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">preference_get_boolean (const char *key, bool *value)</span></li></ul>
-
-
-<pre class="prettyprint">const char *integer_key = &quot;integer_key&quot;;
-int integer_value = 1;
-int integer_output;
-
-preference_set_int(integer_key, integer_value);
-
-preference_is_existing(integer_key, &amp;existing);
-
-preference_get_int(integer_key, &amp;integer_output);</pre></li>
-
-
-<li>Store and retrieve string variables.
-<p>Use the following functions to store and retrieve string variables:</p>
-
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">preference_set_string (const char *key, const char *value)</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">preference_get_string (const char *key, char **value)</span></li>
-</ul>
-
-<p>Release the value returned by the get function using the <span style="font-family: Courier New,Courier,monospace">free()</span> function.</p>
-<pre class="prettyprint">const char *string_key = &quot;string_key&quot;;
-const char *string_value = &quot;Sample content&quot;;
-char *string_output;
-bool existing;
-
-preference_set_string(string_key, string_value);
-
-preference_is_existing(string_key, &amp;existing);
-
-preference_get_string(string_key, &amp;string_output);
-
-free(string_output);</pre></li>
-
-<li>Track variables.
-<p>You can set a different callback function to each variable. The callback function is invoked each time the variable is changed.</p>
-
-<pre class="prettyprint">
-int previous_value;
-
-preference_set_changed_cb(integer_key, preference_changed_cb_impl, &amp;previous_value);</pre>
-
-<p>Pass custom parameters to the callback function in the <span style="font-family: Courier New,Courier,monospace">user_data</span> field.</p>
-
-<pre class="prettyprint">void preference_changed_cb_impl(const char *key, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;int integer_output = 0;
-
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[preference_changed_cb_impl]\n&quot;);
-&nbsp;&nbsp;&nbsp;preference_get_int(key, &amp;integer_output);
-     
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Key: %s has changed its value to %d \n&quot;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key, integer_output);
-}</pre>
-
-
-<p>Unset a callback function based on a variable key.</p>
-<pre class="prettyprint">preference_unset_changed_cb(const char *key);</pre></li>
-
-
-<li>List all records.
-<p>Access all the records with the foreach function. The function calls a specific callback function for each key-value pair in the database. You can pass additional data to the function in the <span style="font-family: Courier New,Courier,monospace">user_data</span> field.</p>
-
-<pre class="prettyprint">preference_foreach_item(preference_foreach_item_cb, NULL);</pre>
-
-<p>If the callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>, or if all the records have been opened, the foreach function ends.</p>
- 
-<pre class="prettyprint">bool preference_foreach_item_cb(const char *key, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[preference_foreach_item_cb]\n&quot;);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Key found: %s\n&quot;, key);
-&nbsp;&nbsp;&nbsp;return true;
-}</pre></li>
-
-<li>Delete records.
-<p>Delete records one by one using a unique key. You can also delete all records for an application using the <span style="font-family: Courier New,Courier,monospace">remove_all()</span> function.</p>
-
-<pre class="prettyprint">preference_remove(const char *key)
-
-preference_remove_all(void)</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.tutorials/html/native/app_framework/badge_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm
index b3fa72f..63743f0 100644
--- a/org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/>  <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -86,100 +86,74 @@ static int ret = 0;
 
  <h2 id="create" name="create">Creating a Badge</h2>
 
-<p>To create a badge for an application, call the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> function:</p>
-<pre class="prettyprint">badge_new(const char *writable_app_id)</pre>
-
-<p>The application calling the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> function has the ownership of the badge. And the <span style="font-family: Courier New,Courier,monospace">writable_app_id</span> parameter means the application which is to be authorized to change the badge.</p>
-
-<pre class="prettyprint">ret = badge_new(TEST_PKG);
+<p>To create a badge for an application, call the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> function. The application calling the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> function has the ownership of the badge. The parameter means the application which is to be authorized to change the badge.</p>
+<pre class="prettyprint">
+ret = badge_new(TEST_PKG);
 if (ret != BADGE_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
+}
+</pre>
 
  <h2 id="manage" name="manage">Managing the Badge</h2>
 
 <p>To manage the badge:</p>
 
 <ol>
-<li>Get the count attribute:
-<p>The count attribute is displayed in the right corner of the badge and its value must be an integer.</p>
-<p>To get the count attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_get_count()</span> function:</p>
-<pre class="prettyprint">badge_get_count(const char *app_id, unsigned int *count)</pre>
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that gets the count of the badge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[out] count</span>: The value of the count attribute.</li>
-</ul>
-<pre class="prettyprint">unsigned int count = 0;
+<li>Get the count attribute with the <span style="font-family: Courier New,Courier,monospace">badge_get_count()</span> function. The count attribute is displayed in the right corner of the badge and its value must be an integer.
+<p>The parameters are the name of the application that gets the count of the badge, and the value for the count attribute.</p>
+
+<pre class="prettyprint">
+unsigned int count = 0;
 ret = badge_get_count(TEST_PKG, &amp;count);
 if (ret != BADGE_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
+}
+</pre>
 </li>
-<li>Set the count attribute:
-<p>To set the count attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_set_count()</span> function:</p>
-<pre class="prettyprint">badge_set_count(const char *app_id, unsigned int count)</pre>
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that sets the count of the badge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] count</span>: The new value for the count attribute.</li>
-</ul>
-<pre class="prettyprint">ret = badge_set_count(TEST_PKG, count+1);
+
+<li>Set the count attribute with the <span style="font-family: Courier New,Courier,monospace">badge_set_count()</span> function. The parameters are the name of the application that sets the count of the badge, and the value for the count attribute.
+<pre class="prettyprint">
+ret = badge_set_count(TEST_PKG, count+1);
 if (ret != BADGE_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
+}
+</pre>
 </li>
-<li>Getting the display attribute:
-<p>You can check whether the badge is visible by getting its display attribute.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">app_id</span> parameter refers to the application which is the owner of the badge.</p>
-<p>To get the display attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_get_display()</span> function:</p>
-<pre class="prettyprint">badge_get_display(const char *app_id, unsigned int *is_display)</pre>
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that gets the display flag of the badge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[out] is_display</span>: The value of the display attribute (1 = badge is visible, 0 = badge is hidden).</li>
-</ul>
-
-<pre class="prettyprint">unsigned int is_displayed = false;
+<li>Get the display attribute and check whether the badge is visible with the <span style="font-family: Courier New,Courier,monospace">badge_get_display()</span> function. The parameters are the application which owns the badge, and the value of the display attribute (1 = badge is visible, 0 = badge is hidden).
+<pre class="prettyprint">
+unsigned int is_displayed = false;
 ret = badge_get_display(TEST_PKG, &amp;is_displayed);
 if (ret != BADGE_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
+}
+</pre>
 </li>
-<li>Setting the display attribute:
-<p>You can display or hide the badge by setting its display attribute accordingly.</p>
-<p>To set the display attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_set_display()</span> function:</p>
-<pre class="prettyprint">badge_set_display(const char *app_id, unsigned int is_display)</pre>
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that gets the display flag of the badge.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] is_display</span>: The new value for the display attribute (1 = badge is visible, 0 = badge is hidden).</li>
-</ul>
-<pre class="prettyprint">ret = badge_set_display(TEST_PKG, 1);
+<li>Set the display attribute with the <span style="font-family: Courier New,Courier,monospace">badge_set_display()</span> function to hide or show the badge. The parameters are the application which owns the badge, and the display attribute (1 = badge is visible, 0 = badge is hidden).
+<pre class="prettyprint">
+ret = badge_set_display(TEST_PKG, 1);
 if (ret != BADGE_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
+}
+</pre>
 </li>
 </ol>
 
  <h2 id="remove" name="remove">Removing the Badge</h2>
 
-<p>To remove the badge from the application, call the <span style="font-family: Courier New,Courier,monospace">badge_remove()</span> function:</p>
-<pre class="prettyprint">badge_remove(const char *app_id)</pre>
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The ID of the application whose badge to remove.</li>
-</ul>
-<pre class="prettyprint">ret = badge_remove(TEST_PKG);
+<p>To remove the badge from the application, call the <span style="font-family: Courier New,Courier,monospace">badge_remove()</span> function. The only parameter is the ID of the application whose badge to remove.</p>
+
+<pre class="prettyprint">
+ret = badge_remove(TEST_PKG);
 if (ret != BADGE_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
+}
+</pre>
 
 <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.tutorials/html/native/app_framework/bundle_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm
index 6d12a46..2171947 100644
--- a/org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -71,17 +71,26 @@
 
  <h2 id="init" name="init">Initializing a Bundle</h2>
 
+ <p>To initialize a bundle:</p>
+ <ol>
+ <li>
 <p>To use the functions and data types of the Bundle API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;bundle.h&gt;</span> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;bundle.h&gt;
 </pre>
+</li>
+<li>
 <p>Before you can perform any operations on a bundle, create the bundle instance. Each bundle is independent from other bundles and stores its own set of records.</p>
 <pre class="prettyprint">bundle* bund = NULL;
 
 bund = bundle_create();</pre>
+</li>
+</ol>
 
  <h2 id="add" name="add">Adding Content to a Bundle</h2>
  
+  <p>To add content to a bundle:</p>
+
 <p>Fill a valid bundle instance with content. The content is in the form of key-value pairs. The key is always a string. The value can be of the following types:</p>
 
 <table> 
@@ -136,7 +145,8 @@ bundle_add_byte(bund, &quot;Byte&quot;, &quot;Byte content&quot;, 12);</pre>
 
 </ul>
 <pre class="prettyprint">
-void test_bundle_add_del_get(void)
+void 
+test_bundle_add_del_get(void)
 {
 &nbsp;&nbsp;&nbsp;bundle *b = NULL;
 &nbsp;&nbsp;&nbsp;int count = 0;
@@ -169,7 +179,8 @@ void test_bundle_add_del_get(void)
 <p>After the <span style="font-family: Courier New,Courier,monospace">bundle_foreach()</span> function, the <span style="font-family: Courier New,Courier,monospace">_bundle_iterator_t()</span> function is invoked for each record in the bundle:</p>
 
 <pre class="prettyprint">
-void iterate_bundle_foreach(const char *key, const int type, bundle_keyval_t *kv, void *user_data)
+void 
+iterate_bundle_foreach(const char *key, const int type, bundle_keyval_t *kv, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;key : %s, type : %d &quot;, key, type);
     
@@ -207,7 +218,8 @@ void iterate_bundle_foreach(const char *key, const int type, bundle_keyval_t *kv
 &nbsp;&nbsp;&nbsp;}    
 }
 
-void test_bundle_foreach(void)
+void 
+test_bundle_foreach(void)
 {
 &nbsp;&nbsp;&nbsp;const char *s_arr[] = {&quot;abc&quot;, &quot;bcd&quot;, &quot;cde&quot;};
 &nbsp;&nbsp;&nbsp;bundle *b;
@@ -225,10 +237,11 @@ void test_bundle_foreach(void)
  
 <p>To store or send a bundle over a serial connection, encode the bundle to <span style="font-family: Courier New,Courier,monospace">bundle_raw</span> (a typedef of <span style="font-family: Courier New,Courier,monospace">unsigned char</span>). To encode the bundle, call the <span style="font-family: Courier New,Courier,monospace">bundle_encode()</span> function.</p>
 
-<p>To store the bundle, write <span style="font-family: Courier New,Courier,monospace">bundle_raw</span> to a file, for example, and then open it with the <span style="font-family: Courier New,Courier,monospace">bundle_decode()</span> function. The encoded data and created bundle must be released when no longer needed.</p>
+<p>To store the bundle, write <span style="font-family: Courier New,Courier,monospace">bundle_raw</span> to a file, for example, and open it with the <span style="font-family: Courier New,Courier,monospace">bundle_decode()</span> function. The encoded data and created bundle must be released when no longer needed.</p>
 
 <pre class="prettyprint">
-void test_bundle_encode_decode(void)
+void 
+test_bundle_encode_decode(void)
 {
 &nbsp;&nbsp;&nbsp;bundle *b1, *b2;
 &nbsp;&nbsp;&nbsp;bundle_raw *r;
diff --git a/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm
index a5574ec..0ed8792 100644
--- a/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -57,7 +57,9 @@
   </ul> 
 
  <h2 id="init" name="init">Initializing Data Controls</h2>
-
+<p>To initialize data controls:</p>
+<ol>
+<li>
 <p>To use the functions and data types of the Data Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;data_control.h&gt;</span> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;data_control.h&gt;
@@ -67,17 +69,22 @@
 #include &lt;glib.h&gt;
 #include &lt;string.h&gt;
 </pre>
+</li>
+<li>
 <p>To execute this application, the <span style="font-family: Courier New,Courier,monospace">&lt;sqlite3.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;stdlib.h&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;glib.h&gt;</span>, and <span style="font-family: Courier New,Courier,monospace">&lt;string.h&gt;</span> header files have to be included too.</p>
+</li>
 
-  <p>This data control use cases run 2 applications. Each application plays a different role: one for the consumer, the other for the provider. For the consumer application, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/datasharing</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span> privileges must be added. For the provider application, in the IDE, go to <strong>tizen-manifest.xml &gt; Advanced &gt; Data Control &gt; Add (Read, Write SQL and Read, Write Map) access rights</strong>.</p>
+<li>
+<p>This data control use cases run 2 applications. Each application plays a different role: one for the consumer, the other for the provider. For the consumer application, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/datasharing</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span> privileges must be added. For the provider application, in the IDE, go to <strong>tizen-manifest.xml &gt; Advanced &gt; Data Control &gt; Add (Read, Write SQL and Read, Write Map) access rights</strong>.</p>
+</li>
+</ol>
 
  <h2 id="map1" name="map1">Working with Map-type Data Controls</h2>
 
 <p>To get, add, remove, and set map-type data using the Data Control API:</p>
 
 <ol>
-<li id="provider">Implement the provider application.
-<p>The provider application stores and provides data to the consumer application.</p>
+<li id="provider">Implement the provider application. The provider application stores and provides data to the consumer application.
 <p>The provider application has 4 operations: get, add, remove, and set. To use the map-type Data Control API, these 4 operation callbacks must be implemented.</p>
 
 <pre class="prettyprint">
@@ -88,7 +95,8 @@ typedef struct map_data
 } map_data_s;
 
 static GHashTable *map_repository_test;
-void get_value_request_cb(int request_id, data_control_h provider, const char *key, void *user_data)
+void 
+get_value_request_cb(int request_id, data_control_h provider, const char *key, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
 
@@ -111,7 +119,8 @@ void get_value_request_cb(int request_id, data_control_h provider, const char *k
 &nbsp;&nbsp;&nbsp;}
 }
 
-void set_value_request_cb(int request_id, data_control_h provider, const char *key, const char *old_value, const char *new_value, void *user_data)
+void 
+set_value_request_cb(int request_id, data_control_h provider, const char *key, const char *old_value, const char *new_value, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
 &nbsp;&nbsp;&nbsp;if (map_data != NULL)
@@ -136,7 +145,8 @@ void set_value_request_cb(int request_id, data_control_h provider, const char *k
 &nbsp;&nbsp;&nbsp;}
 }
 
-void add_value_request_cb(int request_id, data_control_h provider, const char *key, const char *value, void *user_data)
+void 
+add_value_request_cb(int request_id, data_control_h provider, const char *key, const char *value, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
 
@@ -174,7 +184,8 @@ void add_value_request_cb(int request_id, data_control_h provider, const char *k
 &nbsp;&nbsp;&nbsp;}
 }
 
-void remove_value_request_cb(int request_id, data_control_h provider, const char *key, const char *value, void *user_data)
+void 
+remove_value_request_cb(int request_id, data_control_h provider, const char *key, const char *value, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
 
@@ -211,10 +222,12 @@ void remove_value_request_cb(int request_id, data_control_h provider, const char
 &nbsp;&nbsp;&nbsp;}
 }
 </pre>
-
+</li>
+<li>
 <p>Register the callback within the <span style="font-family: Courier New,Courier,monospace">app_create(void *data)</span> function using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_map_register_cb()</span> function:</p>
 <pre class="prettyprint">
-void __free_key(gpointer data)
+void 
+__free_key(gpointer data)
 {
 &nbsp;&nbsp;&nbsp;if (data)
 &nbsp;&nbsp;&nbsp;{
@@ -224,7 +237,8 @@ void __free_key(gpointer data)
 &nbsp;&nbsp;&nbsp;}
 }
 
-void __free_data(gpointer data)
+void
+__free_data(gpointer data)
 {
 &nbsp;&nbsp;&nbsp;if (data)
 &nbsp;&nbsp;&nbsp;{
@@ -235,7 +249,8 @@ void __free_data(gpointer data)
 }
 
 data_control_provider_map_cb map_callback;
-void initialize_datacontrol_provider()
+void 
+initialize_datacontrol_provider()
 {
 &nbsp;&nbsp;&nbsp;map_repository_test = g_hash_table_new_full(g_str_hash, g_str_equal, __free_key, __free_data);
 
@@ -257,16 +272,15 @@ void initialize_datacontrol_provider()
 </pre>
 </li>
 
-<li id="consumer">Implement the consumer application.
-
-<p>The consumer application requests get, set, add, and remove functions to the provider application and receives the results from the provider application.</p>
+<li id="consumer">Implement the consumer application. The consumer application requests get, set, add, and remove functions to the provider application and receives the results from the provider application.
 
 <p>Implement the response callback. The response callback receives the request result and data from the provider.</p>
 <pre class="prettyprint">
 // Callback functions 
-void map_get_response_cb(int request_id, data_control_h provider,
-&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;char **ret_value_list, int ret_value_count, bool provider_ret, 
-&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 *error, void *user_data)
+void
+map_get_response_cb(int request_id, data_control_h provider,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char **ret_value_list, int ret_value_count, bool provider_ret, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *error, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (provider_ret)
 &nbsp;&nbsp;&nbsp;{
@@ -282,7 +296,8 @@ void map_get_response_cb(int request_id, data_control_h provider,
 &nbsp;&nbsp;&nbsp;}
 }
 
-void map_set_response_cb(int request_id, data_control_h provider, bool provider_ret, const char *error, void *user_data)
+void 
+map_set_response_cb(int request_id, data_control_h provider, bool provider_ret, const char *error, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (provider_ret)
 &nbsp;&nbsp;&nbsp;{
@@ -294,7 +309,8 @@ void map_set_response_cb(int request_id, data_control_h provider, bool provider_
 &nbsp;&nbsp;&nbsp;}
 }
 
-void map_add_response_cb(int request_id, data_control_h provider, bool provider_ret, const char *error, void *user_data)
+void 
+map_add_response_cb(int request_id, data_control_h provider, bool provider_ret, const char *error, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (provider_ret)
 &nbsp;&nbsp;&nbsp;{
@@ -306,7 +322,8 @@ void map_add_response_cb(int request_id, data_control_h provider, bool provider_
 &nbsp;&nbsp;&nbsp;}
 }
 
-void map_remove_response_cb(int request_id, data_control_h provider, bool provider_ret, const char *error, void *user_data)
+void 
+map_remove_response_cb(int request_id, data_control_h provider, bool provider_ret, const char *error, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (provider_ret)
 &nbsp;&nbsp;&nbsp;{
@@ -318,13 +335,15 @@ void map_remove_response_cb(int request_id, data_control_h provider, bool provid
 &nbsp;&nbsp;&nbsp;}
 }
 </pre>
-
+</li>
+<li>
 <p>To identify the provider and data, initialize a data control handler. The initializing process has to be performed within the <span style="font-family: Courier New,Courier,monospace">app_create(void *data)</span> function generated by the IDE.</p>
 <p>To grant access to the provider ID, go to the provider application <strong>tizen-manifest.xml &gt; Advanced &gt; Data Control</strong>.</p>
 
 <pre class="prettyprint">
 data_control_map_response_cb map_callback;
-void initialize_datacontrol_consumer(appdata_s *ad)
+void 
+initialize_datacontrol_consumer(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;const char *provider_id = Your Provider ID;
 &nbsp;&nbsp;&nbsp;const char *data_id = &quot;table&quot;;
@@ -397,14 +416,14 @@ void initialize_datacontrol_consumer(appdata_s *ad)
 <p>To insert, select, update, and delete SQL-type data using the Data Control API:</p>
 
 <ol>
-<li id="provider2">Implement the provider application.
-<p>The provider application stores and provides data to the consumer application.</p> 
+<li id="provider2">Implement the provider application. The provider application stores and provides data to the consumer application.
 <p>The provider application has 4 operations: insert, select, update, and delete. To use the SQL-type Data Control API, these operation callbacks have to be implemented.</p>
 
 <pre class="prettyprint">
 data_control_provider_sql_cb *sql_callback;
 static sqlite3* db;
-void insert_request_cb(int request_id, data_control_h provider, bundle *insert_data, void *user_data)
+void 
+insert_request_cb(int request_id, data_control_h provider, bundle *insert_data, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_insert_statement(provider, insert_data);
 &nbsp;&nbsp;&nbsp;int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
@@ -429,7 +448,8 @@ void insert_request_cb(int request_id, data_control_h provider, bundle *insert_d
 &nbsp;&nbsp;&nbsp;free(command);
 }
 
-void delete_request_cb(int request_id, data_control_h provider, const char *where, void *user_data)
+void 
+delete_request_cb(int request_id, data_control_h provider, const char *where, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[delete_request_cb] request_id(%d)&quot;, request_id);
 &nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_delete_statement(provider, where);
@@ -452,8 +472,9 @@ void delete_request_cb(int request_id, data_control_h provider, const char *wher
 &nbsp;&nbsp;&nbsp;free(command);
 }
 
-void select_request_cb(int request_id, data_control_h provider, const char **column_list, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int column_count, const char *where, const char *order, void *user_data)
+void 
+select_request_cb(int request_id, data_control_h provider, const char **column_list, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int column_count, const char *where, const char *order, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;sqlite3_stmt* sql_stmt = NULL;
 
@@ -479,7 +500,8 @@ void select_request_cb(int request_id, data_control_h provider, const char **col
 &nbsp;&nbsp;&nbsp;free(command);
 }
 
-void update_request_cb(int request_id, data_control_h provider, bundle *update_data, const char *where, void *user_data)
+void 
+update_request_cb(int request_id, data_control_h provider, bundle *update_data, const char *where, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_update_statement(provider, update_data, where);
 &nbsp;&nbsp;&nbsp;int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
@@ -501,11 +523,12 @@ void update_request_cb(int request_id, data_control_h provider, bundle *update_d
 &nbsp;&nbsp;&nbsp;free(command);
 }
 </pre>
-
+</li>
+<li>
 <p>Register the callback and create the database:</p>
-
 <pre class="prettyprint">
-int create_database()
+int 
+create_database()
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,  &quot;%s%s&quot;, app_get_data_path(), &quot;test.db&quot;);
 
@@ -530,7 +553,8 @@ int create_database()
 &nbsp;&nbsp;&nbsp;return ret;
 }
 
-void initialize_datacontrol_provider()
+void
+initialize_datacontrol_provider()
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;initialize_datacontrol_provider &quot;);
 
@@ -557,14 +581,13 @@ void initialize_datacontrol_provider()
 </pre>
 </li>
 
-<li id="consumer2">Implement the consumer application.
-
-<p>The consumer application requests the insert, select, update, and delete functions to the provider application and receives the result from the provider application.</p>
+<li id="consumer2">Implement the consumer application. The consumer application requests the insert, select, update, and delete functions to the provider application and receives the result from the provider application.
 
 <p>Implement the response callback. The response callback receives the request result and data from the provider.</p>
 		
 <pre class="prettyprint">
-void sql_delete_response_cb(int request_id, data_control_h provider, bool provider_result, const char *error, void *user_data)
+void 
+sql_delete_response_cb(int request_id, data_control_h provider, bool provider_result, const char *error, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (provider_result)
 &nbsp;&nbsp;&nbsp;{
@@ -576,8 +599,9 @@ void sql_delete_response_cb(int request_id, data_control_h provider, bool provid
 &nbsp;&nbsp;&nbsp;}
 }
 
-void sql_insert_response_cb(int request_id, data_control_h provider, long long inserted_row_id, 
-&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;bool provider_result, const char *error, void *user_data)
+void 
+sql_insert_response_cb(int request_id, data_control_h provider, long long inserted_row_id, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool provider_result, const char *error, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (provider_result)
 &nbsp;&nbsp;&nbsp;{
@@ -589,8 +613,9 @@ void sql_insert_response_cb(int request_id, data_control_h provider, long long i
 &nbsp;&nbsp;&nbsp;}
 }
 
-void sql_select_response_cb(int request_id, data_control_h provider, result_set_cursor cursor, 
-&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;bool provider_result, const char *error, void *user_data)
+void 
+sql_select_response_cb(int request_id, data_control_h provider, result_set_cursor cursor, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool provider_result, const char *error, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (provider_result)
 &nbsp;&nbsp;&nbsp;{
@@ -616,7 +641,8 @@ void sql_select_response_cb(int request_id, data_control_h provider, result_set_
 &nbsp;&nbsp;&nbsp;}
 }
 
-void sql_update_response_cb(int request_id, data_control_h provider, bool provider_result, const char *error, void *user_data)
+void 
+sql_update_response_cb(int request_id, data_control_h provider, bool provider_result, const char *error, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (provider_result)
 &nbsp;&nbsp;&nbsp;{
@@ -628,13 +654,15 @@ void sql_update_response_cb(int request_id, data_control_h provider, bool provid
 &nbsp;&nbsp;&nbsp;}
 }
 </pre>
-
+</li>
+<li>
 <p>To identify the provider and data, initialize a data control handler. The initializing process has to be performed within the <span style="font-family: Courier New,Courier,monospace">app_create(void *data)</span> function generated by the IDE.</p>
 <p>To grant access to the provider ID, go to the provider application <strong>tizen-manifest.xml &gt; Advanced &gt; Data Control</strong>.</p>
 
 <pre class="prettyprint">
 data_control_sql_response_cb sql_callback;
-void initialize_datacontrol_consumer(appdata_s *ad)
+void 
+initialize_datacontrol_consumer(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;int ret;
 
diff --git a/org.tizen.tutorials/html/native/app_framework/event_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/event_tutorial_n.htm
new file mode 100644
index 0000000..cc62dd8
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/event_tutorial_n.htm
@@ -0,0 +1,266 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Event: Managing Events</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#manage">Subscribing to an Event</a></li>
+			<li><a href="#broadcast">Publishing an Event</a></li>	 
+			<li><a href="#launch">Managing Launch-On-Events</a></li>	 	 		
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.guides/html/native/app/event_n.htm">Event Guide</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">Event API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EVENT__MODULE.html">Event API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+	<h1>Event: Managing Events</h1>
+
+  
+<p>This tutorial demonstrates how you can publish and subscribe to events.</p>
+
+  
+<h2>Warm-up</h2>
+<p>Become familiar with the Event API basics by learning about:</p>
+	<ul>
+		<li><a href="#manage">Subscribing to an Event</a>
+		<p>Register an event handle to receive events.</p></li>
+		<li><a href="#broadcast">Publishing an Event</a>
+		<p>Broadcast an application event to all listeners.</p></li>	 
+		<li><a href="#launch">Managing Launch-On-Events</a>
+		<p>Launch service applications based on specific events.</p></li>	 		 
+	</ul>
+
+
+ <h2 id="manage" name="manage">Subscribing to an Event</h2>
+
+<p>To subscribe to a predefined system event or user-defined event:</p>
+<ol>
+<li>To use the functions and data types of the Event API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EVENT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;app_event.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;app_event.h&gt; 
+</pre> 
+</li>
+<li>Add an event handler.
+<p>One event can have multiple event handlers, and one handler can be registered multiple times.</p>
+
+<ul><li>Add an event handler for a system event:
+
+<pre class="prettyprint">
+static void 
+battery_event_callback(const char *event_name, bundle *event_data, void *user_data) 
+{
+&nbsp;&nbsp;&nbsp;// event_name is Event-Name 
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;event_name is [%s]&quot;, event_name);
+
+&nbsp;&nbsp;&nbsp;// event_data is Event-Data, its type is bundle
+&nbsp;&nbsp;&nbsp;char *battery_level_status = NULL;
+&nbsp;&nbsp;&nbsp;battery_level_status = bundle_get_val(event_data, EVENT_KEY_BATTERY_LEVEL_STATUS);
+}
+
+event_handler_h handler;
+
+// Register the event handler
+int ret = event_add_event_handler(&amp;handler, SYSTEM_EVENT_BATTERY_LEVEL_STATUS,
+&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;(event_cb)battery_event_cb, user_data);
+if (ret != EVENT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;err: [%d]&quot;, ret);
+</pre>
+</li>
+
+<li>Add an event handler for a user-defined event:
+
+<p>When defining an event name for a user event (such as <span style="font-family: Courier New,Courier,monospace">event.org.tizen.senderapp.user_event</span>), the name format is <span style="font-family: Courier New,Courier,monospace">event.{sender appid}.{user-defined name}</span>. The <span style="font-family: Courier New,Courier,monospace">{user-defined name}</span> must:</p>
+<ul>
+	<li>Contain only the ASCII characters &quot;[A-Z][a-z][0-9]_&quot; and not begin with a digit.</li>
+	<li>Not contain the &#39;.&#39; (period) character.</li>
+	<li>Not exceed the maximum name length (127 bytes).</li>
+	<li>Be at least 1 byte in length.</li>
+</ul>
+<pre class="prettyprint">
+ret = event_add_event_handler(&quot;event.org.tizen.senderapp.user_event&quot;,
+&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;utc_event_cb_with_valid_check,
+&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;&quot;CUSTOM_EVENT_KEY&quot;, &amp;event_handler);
+
+if (ret != EVENT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;err: [%d]&quot;, ret);
+</pre>
+</li></ul></li>
+
+<li>When no longer needed, remove the event handler.
+<p>A registered handler can be removed when application is running, and all registered handlers are removed when the application is terminated.</p>
+
+<pre class="prettyprint">
+ret = event_remove_event_handler(handler);
+if (ret != EVENT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;err: [%d]&quot;, ret);
+</pre>
+</li>
+
+</ol>
+
+
+ <h2 id="broadcast" name="broadcast">Publishing an Event</h2>
+ 
+<p>To publish an event to all listeners:</p>
+
+<ol>
+<li>To use the functions and data types of the Event API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EVENT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;app_event.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;app_event.h&gt; 
+</pre> 
+</li>
+<li>Create the call back for handling the event:
+<pre class="prettyprint">
+static void 
+user_event_cb(const char *event_name, bundle *event_data, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;user_event_cb : %s \n&quot;, event_name);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+</li>
+<li>Register the event handler and create the bundle for handling the event data:
+<pre class="prettyprint">
+int ret = EVENT_ERROR_NONE;
+event_handler_h event_handler;
+bundle *event_data = NULL;
+
+ret = event_add_event_handler(&quot;event.org.tizen.senderapp.user_event&quot;,
+&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;user_event_cb, &quot;CUSTOM_EVENT_KEY&quot;, &amp;event_handler);
+
+if (ret != EVENT_ERROR_NONE)
+dlog_print(DLOG_ERROR, LOG_TAG, &quot;err: [%d]&quot;, ret);
+
+event_data = bundle_create();
+
+ret = bundle_add_str(event_data, user_data_key, user_data);
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">event_publish_app_event()</span> function to publish the event:
+<pre class="prettyprint">
+ret = event_publish_app_event(&quot;event.org.tizen.senderapp.user_event&quot;, event_data);
+
+if (ret != EVENT_ERROR_NONE)
+dlog_print(DLOG_ERROR, LOG_TAG, &quot;err: [%d]&quot;, ret);
+</pre>
+</li>
+<li>When no longer needed, free the bundle:
+<pre class="prettyprint">
+ret = bundle_free(event_data);
+</pre>
+</li>
+</ol>
+ 
+ <h2 id="launch" name="launch">Managing Launch-On-Events</h2>
+
+ <p>To manage a Launch-On-Event:</p>
+ 
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Only service applications can register and receive Launch-On-Events.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
+ <ol>
+ <li>To register an interest in a Launch-On-Event, define the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/launch_on_event</span> operation in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. The URI name for the operation represents the event name in the Launch-On-Event format (<span style="font-family: Courier New,Courier,monospace">event://{Event_Name}</span>).
+
+<pre class="prettyprint">
+&lt;app-control&gt;
+&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/launch_on_event&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;event://tizen.system.event.battery_charger_status&quot;/&gt;
+&lt;/app-control&gt;
+</pre>
+ 
+<p>The Launch-On-Event operation cannot be requested using the <span style="font-family: Courier New,Courier,monospace">app_control_send_launch_request()</span> function, unlike other application control operations.</p> 
+</li>
+
+<li>Receive the event:
+
+<pre class="prettyprint">
+static void 
+*app_control(app_control_h app_control, void *data)
+{
+&nbsp;&nbsp;&nbsp;char *event_uri = &quot;event://tizen.system.event.battery_charger_status&quot;;
+&nbsp;&nbsp;&nbsp;char *operation, char *uri, char *event_value;
+&nbsp;&nbsp;&nbsp;ret = app_control_get_operation(app_control, &amp;operation);
+
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE &amp;&amp; operation &amp;&amp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strcmp(operation, APP_CONTROL_OPERATION_LAUNCH_ON_EVENT) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_get_uri(app_control, &amp;uri);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE &amp;&amp; uri) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strncmp(uri, event_uri, strlen(event_uri) + 1) == 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_get_extra_data(app_control, &quot;battery_charger_status&quot;, &amp;event_value);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE &amp;&amp; event_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;free(event_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;// Use event_add_event_handler() for further event subscriptions here
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(uri);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(operation);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>The application can get the event name and data in the first <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback, which is called after the application state changes to <span style="font-family: Courier New,Courier,monospace">created</span>.</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>
diff --git a/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm
index d0e7682..4d93627 100644
--- a/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -105,7 +105,9 @@ int message_port_register_local_port(const char* local_port, message_port_messag
 <p>Implement the following codes in Application 2. Implement the <span style="font-family: Courier New,Courier,monospace">message_port_cb()</span> callback function for the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</p>
 
 <pre class="prettyprint">
-void message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port, bool trusted_remote_port, bundle *message, void *user_data)
+void 
+message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool trusted_remote_port, bundle *message, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;char *command = NULL;
 &nbsp;&nbsp;&nbsp;char *data = NULL;
@@ -150,7 +152,8 @@ int message_port_check_remote_port(const char* remote_app_id, const char* remote
 
 <p>Implement the following codes in Application 1:</p>
 <pre class="prettyprint">
-bool test_check_remote_port() 
+bool 
+test_check_remote_port() 
 {
 &nbsp;&nbsp;&nbsp;int ret;
 &nbsp;&nbsp;&nbsp;bool found;
@@ -160,7 +163,6 @@ bool test_check_remote_port()
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;message_port_check_remote_port error : %d&quot;, ret);	   
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return found;
 }
 </pre>
@@ -183,7 +185,8 @@ bool test_check_remote_port()
 </ul>
 
 <pre class="prettyprint">
-void send_message(void)
+void 
+send_message(void)
 {
 &nbsp;&nbsp;&nbsp;int ret;
 &nbsp;&nbsp;&nbsp;bundle *b = bundle_create ();
@@ -215,7 +218,9 @@ void send_message(void)
   
   
 <pre class="prettyprint">
-void message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port, bool trusted_remote_port, bundle *message, void *user_data)
+void 
+message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool trusted_remote_port, bundle *message, void *user_data)
 {
 
 &nbsp;&nbsp;&nbsp;int ret;
@@ -244,7 +249,9 @@ void message_port_cb(int local_port_id, const char *remote_app_id, const char *r
 	<p>Register the local port in Application 1.</p>
 	
 <pre class="prettyprint">
-void message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port, bool trusted_remote_port, bundle *message, void *user_data)
+void 
+message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool trusted_remote_port, bundle *message, void *user_data) 
 {
 &nbsp;&nbsp;&nbsp;char *result = NULL;
 &nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;result&quot;, &amp;result);
@@ -281,7 +288,8 @@ else
 
   <p>Implement the following codes in Application 1:</p>
 <pre class="prettyprint">
-void send_message_with_local_port(int local_port_id) 
+void 
+send_message_with_local_port(int local_port_id) 
 {
 &nbsp;&nbsp;&nbsp;int ret;
 &nbsp;&nbsp;&nbsp;bundle *b = bundle_create ();
diff --git a/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm
index 7db32b4..43fe6eb 100644
--- a/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -94,84 +94,43 @@
 <p>To initialize notifications:</p>
 <ol><li>To use the functions and data types of the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;notification.h&gt;</span> header file in your application:
 <pre class="prettyprint">
-#include &lt;notification.h&gt;</pre></li>
+#include &lt;notification.h&gt;
+</pre></li>
 
 <li>To follow this tutorial, place an image file in, for example, your application&#39;s shared resource directory. The following variables are used in the tutorial code:
-<pre class="prettyprint">static notification_h notification = NULL;
+<pre class="prettyprint">
+static notification_h notification = NULL;
 char *image_path[BUFLEN];
 char * shared_path = app_get_shared_resource_path();
 snprintf(image_path, BUFLEN, &quot;%stutorial_native_api_application.png&quot;, shared_path);
-free(shared_path);</pre></li></ol>
+free(shared_path);
+</pre></li></ol>
 
 
 
  <h2 id="create" name="create">Creating a Notification</h2>
 
-<p>To create a notification:</p>
-<p>Initialize a notification handle by calling the <span style="font-family: Courier New,Courier,monospace">notification_create()</span> function:</p>
-<pre class="prettyprint">notification_h notification_create(notification_type_e type)</pre>
-
-<p>The function takes the following parameters:</p>
-<ul>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">type</span>: Notification type.</li>
-</ul>
+<p>Initialize a notification handle by calling the <span style="font-family: Courier New,Courier,monospace">notification_create()</span> function. It takes the notification type as a parameter. The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_type</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga0809cf2728f6e60d54ba8ddf9aa7db20">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga0809cf2728f6e60d54ba8ddf9aa7db20">wearable</a> applications).</p>
 
-<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_NOTI</span>: Create a regular notification.</li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_ONGOING</span>: Create an ongoing notification.</li>
-</ul>
-
-<p>The following example code creates an ongoing notification and checks whether the initialization was successful:</p>
-<pre class="prettyprint">notification = notification_create(NOTIFICATION_TYPE_ONGOING);
+<pre class="prettyprint">
+notification = notification_create(NOTIFICATION_TYPE_ONGOING);
 if (notification != NULL)
 {
 &nbsp;&nbsp;&nbsp;// Notification was initialized successfully
-}</pre>
+}
+</pre>
 
  <h2 id="set" name="set">Setting Notification Attributes</h2>
 
 <p>You can set the following attributes for a notification:</p>
 <ul>
- <li><a href="#text">Notification text</a></li>
- <li><a href="#timestamp">Timestamp</a></li>
- <li><a href="#image">Image</a></li>
- <li><a href="#display">Display options</a></li>
- <li><a href="#led">LED options</a></li>
- <li><a href="#prop">Properties</a></li>
-</ul>
-
-<h3 id="text" name="text">Setting the Notification Text</h3>
-
-<p>To set the text to display in the notification view, use the <span style="font-family: Courier New,Courier,monospace">notification_set_text()</span> function:</p>
-
-<pre class="prettyprint">notification_set_text (notification_h noti, notification_text_type_e type, const char *text, const char *key, int args_type, ...)</pre>
-
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] type</span>: Notification text type.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] text</span>: Text to display in the notification view.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] key</span>: Text key for localization.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] args_type</span>: Variable parameter for a type-value pair.</li>
-</ul>
+<li id="text">Set the notification text.
 
-<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_TITLE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_CONTENT</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_CONTENT_FOR_DISPLAY_OPTION_IS_OFF</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_EVENT_COUNT</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_1</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_SUB_1</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_2</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_SUB_2</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_3</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_INFO_SUB_3</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_GROUP_TITLE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_GROUP_CONTENT</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_GROUP_CONTENT_FOR_DISPLAY_OPTION_IS_OFF</span></li>
-</ul>
+<p>To set the text to display in the notification view, use the <span style="font-family: Courier New,Courier,monospace">notification_set_text()</span> function. The function takes the notification handle, notification text type, the text to display in the notification view, text key for localization, and the variable parameter for a type-value pair as its parameters. The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_text_type</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga1b932c18e0430b4cd3a09da98d1fb41b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga1b932c18e0430b4cd3a09da98d1fb41b">wearable</a> applications).</p>
+<pre class="prettyprint">
+int ret =0;
+ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, &quot;text&quot;, NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+</pre>
 
 <p>The <span style="font-family: Courier New,Courier,monospace">notification_set_text()</span> function sets the title and content string. If the text is formatted data (only d, f, and s are supported), set the type-value pair:</p>
 <ul>
@@ -179,275 +138,148 @@ if (notification != NULL)
  <li>If f, the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_DOUBLE</span> and the value is a double.</li>
  <li>If s, the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_STRING</span> and the value is a string.</li>
 </ul>
-<p>If the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_COUNT</span>, the notification count is displayed with the text. If the value is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_COUNT_POS_LEFT</span>, the count is displayed to the left of the text. If the value is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_COUNT_POS_IN</span>, the count is displayed in the text when the text is of the d format. If the value is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_COUNT_POS_RIGHT</span>, the count is displayed to the right of the text. Variable parameters should be terminated by <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_NONE</span>.</p>
+<p>If the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_COUNT</span>, the notification count is displayed with the text. If the value is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_COUNT_POS_LEFT</span>, the count is displayed to the left of the text. If the value is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_COUNT_POS_IN</span>, the count is displayed in the text when the text is of the d format. If the value is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_COUNT_POS_RIGHT</span>, the count is displayed to the right of the text. Variable parameters must be terminated by <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_NONE</span>.</p>
 
 <p>Check whether the operation was successful by retrieving and comparing the return value of any function to <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_ERROR_NONE</span>:</p>
-
-<pre class="prettyprint">int ret =0;
-ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, &quot;text&quot;, NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+<pre class="prettyprint">
 if (ret != NOTIFICATION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
-
-<h3 id="timestamp" name="timestamp">Setting the Notification Timestamp</h3>
-
-<p>To set the timestamp to display in the notification text, use the <span style="font-family: Courier New,Courier,monospace">notification_set_time_to_text()</span> function:</p>
-
-<pre class="prettyprint">notification_set_time_to_text (notification_h noti, notification_text_type_e type, time_t time)</pre>
+}
+</pre>
+</li>
 
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] type</span>: Notification text type. For information about the possible values, see <a href="#text">Setting the Notification Text</a>.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] time_t</span>: Timestamp to display in the notification text.</li>
-</ul>
+<li id="timestamp">Set the notification timestamp.
 
-<pre class="prettyprint">ret = notification_set_time_to_text(notification, NOTIFICATION_TEXT_TYPE_CONTENT, time(NULL));
+<p>To set the timestamp to display in the notification text, use the <span style="font-family: Courier New,Courier,monospace">notification_set_time_to_text()</span> function. The parameters are the notification handle, notification text type, and the timestamp. The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_text_type</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga1b932c18e0430b4cd3a09da98d1fb41b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga1b932c18e0430b4cd3a09da98d1fb41b">wearable</a> applications).</p>
+<pre class="prettyprint">
+ret = notification_set_time_to_text(notification, NOTIFICATION_TEXT_TYPE_CONTENT, time(NULL));
 if (ret != NOTIFICATION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
-
-<h3 id="image" name="image">Setting the Notification Image</h3>
-
-<p>To set the image to display in the notification view, use the <span style="font-family: Courier New,Courier,monospace">notification_set_image()</span> function:</p>
-
-<pre class="prettyprint">notification_set_image (notification_h noti, notification_image_type_e type, const char *image_path)</pre> 
-
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] type</span>: Notification image type.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] image_path</span>: Absolute path and file name of the image file.</li>
-</ul>
+}
+</pre>
+</li>
 
-<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON_FOR_INDICATOR</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON_FOR_LOCK</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_THUMBNAIL</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_THUMBNAIL_FOR_LOCK</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON_SUB</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_BACKGROUND</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_LIST_1</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_LIST_2</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_LIST_3</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_LIST_4</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_LIST_5</span></li>
-</ul>
+<li id="image">Set the notification image.
 
+<p>To set the image to display in the notification view, use the <span style="font-family: Courier New,Courier,monospace">notification_set_image()</span> function. The parameters are the notification handle, notification image type, and the image path. The possible values for the image type are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_image_type</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaa285a3f74abc58d1cb0b78f0bfd09ed5">mobile</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaa285a3f74abc58d1cb0b78f0bfd09ed5">wearable</a> applications).</p>
 <pre class="prettyprint">ret = notification_set_image(notification, NOTIFICATION_IMAGE_TYPE_ICON, image_path);
 if (ret != NOTIFICATION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
 }</pre>
+</li>
 
-<h3 id="display" name="display">Setting the Notification Display Options</h3>
+<li id="display">Set the notification display options.
 
-<p>To set how applications display the notification, use the <span style="font-family: Courier New,Courier,monospace">notification_set_display_applist()</span> function:</p>
-
-<pre class="prettyprint">notification_set_display_applist (notification_h noti, int applist)</pre>
-
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] applist</span>: Notification display option. You can set multiple options with the &quot;|&quot; pipe operation.</li>
-</ul>
-
-<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">applist</span> parameter are:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_TICKER</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_LOCK</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_INDICATOR</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_ACTIVE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_ALL</span></li>
-</ul>
-
-<p>You can combine the flags in the function by using the pipe &quot;|&quot; operation:</p>
-<pre class="prettyprint">ret = notification_set_display_applist(notification, NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY | NOTIFICATION_DISPLAY_APP_TICKER);
+<p>To set how applications display the notification, use the <span style="font-family: Courier New,Courier,monospace">notification_set_display_applist()</span> function. The parameters are the notification handle and the notification display option. You can set multiple options with the &quot;|&quot; pipe operation. The possible values for the display option are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_display_applist</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaf7944456661e023a3bac1f430eb680a2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#gaf7944456661e023a3bac1f430eb680a2">wearable</a> applications).</p>
+<pre class="prettyprint">
+ret = notification_set_display_applist(notification, NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY | NOTIFICATION_DISPLAY_APP_TICKER);
 if (ret != NOTIFICATION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
-
-<h3 id="led" name="led">Setting the LED Options</h3>
-
-<p>To set the LED options for a notification, use the <span style="font-family: Courier New,Courier,monospace">notification_set_led()</span> and <span style="font-family: Courier New,Courier,monospace">notification_set_led_time_period()</span> functions:</p>
-<pre class="prettyprint">notification_set_led (notification_h noti, notification_led_op_e operation, int led_argb)</pre>
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] operation</span>: LED notification operation.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] led_argb</span>: Notification LED color.</li>
-</ul>
-<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">operation</span> parameter are:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LED_OP_ON</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LED_OP_ON_CUSTOM_COLOR</span></li>
-</ul>
+}
+</pre>
+</li>
 
-<pre class="prettyprint">notification_set_led_time_period (notification_h noti, int on_ms, int off_ms)</pre>
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] on_ms</span>: Time for turning on the LED.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] off_ms</span>: Time for turning off the LED.</li>
-</ul>
+<li id="led">Set the LED options.
 
-<pre class="prettyprint">ret = notification_set_led(notification, NOTIFICATION_LED_OP_ON, 100);
+<p>To set the LED options for a notification, use the <span style="font-family: Courier New,Courier,monospace">notification_set_led()</span> and <span style="font-family: Courier New,Courier,monospace">notification_set_led_time_period()</span> functions.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">notification_set_led()</span> function sets the LED operation. The parameters are the notification handle, LED notification operation, and the notification LED color. The possible values for the LED notification operation are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_led_op</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaa96099d9bff211107f6b200eeb92e1d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#gaa96099d9bff211107f6b200eeb92e1d9">wearable</a> applications).</p>
+<pre class="prettyprint">
+ret = notification_set_led(notification, NOTIFICATION_LED_OP_ON, 100);
 if (ret != NOTIFICATION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
 }
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">notification_set_led_time_period()</span> function sets the time period when the LED is switched on and off. The parameters are the notification handle, time for switching the LED on, and time for switching the LED off.</p>
+<pre class="prettyprint">
 ret = notification_set_led_time_period(notification, 100, 100);
 if (ret != NOTIFICATION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
-
-<h3 id="prop" name="prop">Setting Notification Properties</h3>
-
-<p>To set a notification property, use the <span style="font-family: Courier New,Courier,monospace">notification_set_property()</span> function:</p>
-<pre class="prettyprint">notification_set_property (notification_h noti, int flags)</pre>
-
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] flags</span>: Notification property. You can set multiple properties with the &quot;|&quot; pipe operation.</li>
-</ul>
-
-<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">flags</span> parameter are:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISPLAY_ONLY_SIMMODE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_APP_LAUNCH</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_AUTO_DELETE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_LAUNCH_UG</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_TICKERNOTI</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_UPDATE_ON_INSERT</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_UPDATE_ON_DELETE</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_VOLATILE_DISPLAY</span></li>
-</ul>
+}
+</pre>
+</li>
+<li id="prop">Set notification properties.
 
-<pre class="prettyprint">ret = notification_set_property(notification, NOTIFICATION_PROP_DISABLE_APP_LAUNCH);
+<p>To set a notification property, use the <span style="font-family: Courier New,Courier,monospace">notification_set_property()</span> function. The parameters are the notification handle and the notification property. You can set multiple properties with the &quot;|&quot; pipe operation. The possible values for the notification property are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_property</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga70f1e4c6f3d36e09d0a9bdff7d6807c3">mobile</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga70f1e4c6f3d36e09d0a9bdff7d6807c3">wearable</a> applications).</p>
+<pre class="prettyprint">
+ret = notification_set_property(notification, NOTIFICATION_PROP_DISABLE_APP_LAUNCH);
 if (ret != NOTIFICATION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
-
-<h3 id="button" name="button">Adding a button on Active Notification</h3>
-<p>To add a button on Active Notification, use the <span style="font-family: Courier New,Courier,monospace">notification_add_button()</span> function and <span style="font-family: Courier New,Courier,monospace">notification_set_event_handler()</span> function:</p>
-<pre class="prettyprint">notification_add_button(notification_h noti, notification_button_index_e button_index)</pre>
-
-<p>This function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] button_index</span>: Button index.</li>
-</ul>
-
-<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">button_index</span> parameter are:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_BUTTON_1</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_BUTTON_2</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_BUTTON_3</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_BUTTON_4</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_BUTTON_5</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_BUTTON_6</span></li>
-</ul>
+}
+</pre>
+</li>
+<li id="button">Add a button on the active notification.
 
-<pre class="prettyprint">notification_set_event_handler(notification_h noti, notification_event_type_e event_type, app_control_h event_handler)</pre>
+<p>To add a button on the active notification, use the <span style="font-family: Courier New,Courier,monospace">notification_add_button()</span> and <span style="font-family: Courier New,Courier,monospace">notification_set_event_handler()</span> functions.</p>
 
-<p>This function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] button_index</span>: Button index.</li>
- <li><span style="font-family: Courier New,Courier,monospace">[in] event_handler</span>: app control handle.</li>
-</ul>
+<p>The parameters to the <span style="font-family: Courier New,Courier,monospace">notification_add_button()</span> function are the notification handle and the button index. The possible values for the button index parameter are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_button_index</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga2b8eaa47c666ec055def59c32eab419b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga2b8eaa47c666ec055def59c32eab419b">wearable</a> applications).</p>
 
-<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">event_type</span> parameter are:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_2</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_3</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_4</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_5</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_6</span></li>
-</ul>
+<p>The parameters to the <span style="font-family: Courier New,Courier,monospace">notification_set_event_handler()</span> function are the notification handle, the button index, and the app control handle. The possible values for the app control handle are listed in the <span style="font-family: Courier New,Courier,monospace">_notification_event_type</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga38d5cdc16c56dbe88d821995f82b0799">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga38d5cdc16c56dbe88d821995f82b0799">wearable</a> applications).</p>
 
 <pre class="prettyprint">
-
-noti_errnotification_add_button(noti, NOTIFICATION_BUTTON_1);
-if (noti_err != NOTIFICATION_ERROR_NONE) {
+noti_err = notification_add_button(noti, NOTIFICATION_BUTTON_1);
+if (noti_err != NOTIFICATION_ERROR_NONE) 
+{
 &nbsp;&nbsp;&nbsp;// Error handling
 }
 
 app_control_h app_control = NULL;
 
-app_control_create(&app_control);
-app_control_set_app_id(app_control, "org.tizen.app");
+app_control_create(&amp;app_control);
+app_control_set_app_id(app_control, &quot;org.tizen.app&quot;);
 noti_err  = notification_set_event_handler(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1, app_control);
-if (noti_err != NOTIFICATION_ERROR_NONE) {
+if (noti_err != NOTIFICATION_ERROR_NONE) 
+{
 &nbsp;&nbsp;&nbsp;// Error handling
 }
 
 app_control_destroy(app_control);
-}</pre>
-
- <h2 id="post" name="post">Posting a Notification</h2>
-
-<p>To post a notification to the database, use the <span style="font-family: Courier New,Courier,monospace">notification_post()</span> function:</p>
-<pre class="prettyprint">notification_post (notification_h noti)</pre>
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
+</pre>
+</li>
 </ul>
+ <h2 id="post" name="post">Posting a Notification</h2>
 
-<pre class="prettyprint">ret = notification_post(notification);
+<p>To post a notification to the database, use the <span style="font-family: Courier New,Courier,monospace">notification_post()</span> function. The function takes the notification handle as a parameter.</p>
+<pre class="prettyprint">
+ret = notification_post(notification);
 if (ret != NOTIFICATION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
+}
+</pre>
 
  <h2 id="update" name="update">Updating Notification Content</h2>
 
-<p>To update the content of a notification, use the <span style="font-family: Courier New,Courier,monospace">notification_update()</span> function:</p>
-<pre class="prettyprint">notification_update (notification_h noti)</pre>
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
-</ul>
+<p>To update the content of a notification, use the <span style="font-family: Courier New,Courier,monospace">notification_update()</span> function. The function takes the notification handle as a parameter.</p>
 
 <p>The <span style="font-family: Courier New,Courier,monospace">notification_update()</span> function works only for ongoing notifications.</p>
-<pre class="prettyprint">ret = notification_update (notification);
+<pre class="prettyprint">
+ret = notification_update (notification);
 if (ret != NOTIFICATION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
-}</pre>
+}
+</pre>
 
  <h2 id="delete" name="delete">Deleting a Notification</h2>
 
 <p>To delete a notification:</p>			
-<ol><li>To delete a notification from the database, use the <span style="font-family: Courier New,Courier,monospace">notification_delete()</span> function:
-<pre class="prettyprint">notification_delete(notification_h noti)</pre>
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
-</ul>
+<ol><li>To delete a notification from the database, use the <span style="font-family: Courier New,Courier,monospace">notification_delete()</span> function. The function takes the notification handle as a parameter.
 
-<pre class="prettyprint">ret = notification_delete(notification);
+<pre class="prettyprint">
+ret = notification_delete(notification);
 if (ret != NOTIFICATION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;// Error handling
 }</pre></li>
-<li><p>After deleting the notification, free the internal structure data of the notification handle by calling the <span style="font-family: Courier New,Courier,monospace">notification_free()</span> function:</p>
-<pre class="prettyprint">notification_free (notification_h noti)</pre>
-
-<p>The function takes the following parameters:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
-</ul>
+<li><p>After deleting the notification, free the internal structure data of the notification handle by calling the <span style="font-family: Courier New,Courier,monospace">notification_free()</span> function. The function takes the notification handle as a parameter.</p>
 
 <pre class="prettyprint">ret = notification_free(notification);
 if (ret != NOTIFICATION_ERROR_NONE)
@@ -490,7 +322,8 @@ ecore_timer_add(1, timeout_func, NULL);
 <li>To update the progress bar, use the <span style="font-family: Courier New,Courier,monospace">notification_load_by_tag()</span> function for getting the notification handle:
 
 <pre class="prettyprint">
-static Eina_Bool timeout_func(void *data)
+static 
+Eina_Bool timeout_func(void *data)
 {
 &nbsp;&nbsp;&nbsp;static int i = 0;
 &nbsp;&nbsp;&nbsp;double progress = 0;
@@ -509,10 +342,8 @@ static Eina_Bool timeout_func(void *data)
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_DONE; 
 &nbsp;&nbsp;&nbsp;} 
-
 &nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_PASS_ON;
 }
-
 </pre></li></ol>
 
     <p class="figure">Figure: Progress bar</p> 
diff --git a/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm
index fd5d066..d4c75fe 100644
--- a/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/app_framework/preference_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/preference_tutorial_n.htm
new file mode 100644
index 0000000..015fa2e
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/preference_tutorial_n.htm
@@ -0,0 +1,197 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Preference: Managing Preferences</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#manage_pref">Managing Application Preferences</a></li>			
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.guides/html/native/app/application_n.htm">Application Guide</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">Preference API for Mobile Native</a></li> 
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PREFERENCE__MODULE.html">Preference API for Wearable Native</a></li> 
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+	<h1>Preference: Managing Preferences</h1>
+
+
+<p>This tutorial demonstrates how you can manage application preferences.</p> 
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Preference API basics by learning about:</p>
+
+<ul>
+	<li><a href="#manage_pref">Managing Application Preferences</a><p>Manage application preferences.</p></li>
+</ul>
+
+ <h2 id="manage_pref" name="manage_pref">Managing Application Preferences</h2>
+
+ <p>You can set and get application preference data. Any stored preference data can also be shared with among the applications in the same package.</p>
+ 
+<p>To manage preferences:</p>
+
+<ol><li>			
+<p>To use the functions and data types of the Preference API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PREFERENCE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;app.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;app_preference.h&gt;
+</pre></li>
+
+<li>Store and retrieve simple type variables.
+<p>To store a variable, you must create a key-value pair. Use the following functions to create a key-value pair for a specific simple type:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">preference_set_int(const char *key, int value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">preference_set_double(const char *key, double value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">preference_set_boolean(const char *key, bool value)</span></li></ul>
+
+<p>Before storing or retrieving a variable, check whether it exists using:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">preference_is_existing(const char *key, bool *existing)</span></li></ul>
+
+<p>Use the following functions to retrieve a stored variable of a given simple type:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">preference_get_int(const char *key, int *value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">preference_get_double(const char *key, double *value)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">preference_get_boolean(const char *key, bool *value)</span></li></ul>
+
+
+<pre class="prettyprint">
+const char *integer_key = &quot;integer_key&quot;;
+int integer_value = 1;
+int integer_output;
+
+preference_set_int(integer_key, integer_value);
+
+preference_is_existing(integer_key, &amp;existing);
+
+preference_get_int(integer_key, &amp;integer_output);
+</pre></li>
+
+
+<li>Use the following functions to store and retrieve string variables:
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">preference_set_string(const char *key, const char *value)</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">preference_get_string(const char *key, char **value)</span></li>
+</ul>
+
+<p>Release the value returned by the get function using the <span style="font-family: Courier New,Courier,monospace">free()</span> function.</p>
+<pre class="prettyprint">
+const char *string_key = &quot;string_key&quot;;
+const char *string_value = &quot;Sample content&quot;;
+char *string_output;
+bool existing;
+
+preference_set_string(string_key, string_value);
+
+preference_is_existing(string_key, &amp;existing);
+
+preference_get_string(string_key, &amp;string_output);
+
+free(string_output);
+</pre></li>
+
+<li>Track variables.
+<p>You can set a different callback function to each variable. The callback function is invoked each time the variable is changed.</p>
+
+<pre class="prettyprint">
+int previous_value;
+
+preference_set_changed_cb(integer_key, preference_changed_cb_impl, &amp;previous_value);
+</pre>
+
+<p>Pass custom parameters to the callback function in the <span style="font-family: Courier New,Courier,monospace">user_data</span> field.</p>
+
+<pre class="prettyprint">
+void 
+preference_changed_cb_impl(const char *key, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;int integer_output = 0;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[preference_changed_cb_impl]\n&quot;);
+&nbsp;&nbsp;&nbsp;preference_get_int(key, &amp;integer_output);
+     
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Key: %s has changed its value to %d \n&quot;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key, integer_output);
+}
+</pre>
+
+
+<p>Unset a callback function based on a variable key.</p>
+<pre class="prettyprint">preference_unset_changed_cb(const char *key);</pre></li>
+
+
+<li>List all records with the foreach function. The function calls a specific callback function for each key-value pair in the database. You can pass additional data to the function in the <span style="font-family: Courier New,Courier,monospace">user_data</span> field.
+
+<pre class="prettyprint">preference_foreach_item(preference_foreach_item_cb, NULL);</pre>
+
+<p>If the callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>, or if all the records have been opened, the foreach function ends.</p>
+ 
+<pre class="prettyprint">
+bool 
+preference_foreach_item_cb(const char *key, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[preference_foreach_item_cb]\n&quot;);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Key found: %s\n&quot;, key);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li>
+
+<li>Delete records one by one using a unique key. You can also delete all records for an application using the <span style="font-family: Courier New,Courier,monospace">remove_all()</span> function.
+
+<pre class="prettyprint">
+preference_remove(const char *key)
+
+preference_remove_all(void)
+</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>
diff --git a/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm
index b676429..7ed0d76 100644
--- a/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -63,41 +63,46 @@
 <ul>
 
 <li>
-<p>Add a callback for initializing the service application. This callback is called when the application is launched.</p>
-<p>Use the callback to write the necessary initialization code, such as setting up the dbus connection.</p>
-<p>The callback returns a Boolean value. If there is a critical error during the launch, the return is <span style="font-family: Courier New,Courier,monospace">false</span>, thereby cancelling the launch. Otherwise, the return is <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
-<p>The callback receives user data.</p>
-<pre class="prettyprint">bool service_app_create(void *data)
+<p>Add a callback for initializing the service application. This callback is called when the application is launched. Use the callback to write the necessary initialization code, such as setting up the dbus connection.</p>
+<p>The callback returns a Boolean value. If there is a critical error during the launch, the return is <span style="font-family: Courier New,Courier,monospace">false</span>, thereby cancelling the launch. Otherwise, the return is <span style="font-family: Courier New,Courier,monospace">true</span>. The callback receives user data.</p>
+<pre class="prettyprint">
+bool 
+service_app_create(void *data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
 
 &nbsp;&nbsp;&nbsp;return true;
-}</pre>
+}
+</pre>
 </li>
 
 <li>
-<p>Add a callback for terminating the service application. This callback is called when the application terminates.</p>
-<p>Use the callback to release all resources, especially any allocations and shared resources used by other applications.</p>
-<p>The callback returns nothing: Its return type is <span style="font-family: Courier New,Courier,monospace">void</span>.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">service_app_exit()</span> function quits the application&#39;s main loop internally.</p>
-<pre class="prettyprint">void __service_app_terminate(void *data)
+<p>Add a callback for terminating the service application. This callback is called when the application terminates. Use the callback to release all resources, especially any allocations and shared resources used by other applications.</p>
+<p>The callback returns nothing: Its return type is <span style="font-family: Courier New,Courier,monospace">void</span>. The <span style="font-family: Courier New,Courier,monospace">service_app_exit()</span> function quits the application&#39;s main loop internally.</p>
+<pre class="prettyprint">
+void
+__service_app_terminate(void *data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
 &nbsp;&nbsp;&nbsp;service_app_exit();
 
 &nbsp;&nbsp;&nbsp;return;
-}</pre>
+}
+</pre>
 </li>
 
 <li>
 <p>Add a control callback for handling service requests from other applications. This callback is called when the service application receives an <span style="font-family: Courier New,Courier,monospace">app_control</span> request from another application.</p>
-<pre class="prettyprint">void __service_app_control (app_control_h app_control, void *data)
+<pre class="prettyprint">
+void
+__service_app_control(app_control_h app_control, void *data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
 &nbsp;&nbsp;&nbsp;service_app_exit();
 
 &nbsp;&nbsp;&nbsp;return;
-}</pre>
+}
+</pre>
 </li>
 
 </ul>
@@ -112,7 +117,9 @@
 
 <li>
 <p>Add the low memory callback for handling the low memory event. This callback is called when the device is low on memory.</p>
-<pre class="prettyprint">void service_app_low_memory_callback(void *data)
+<pre class="prettyprint">
+void 
+service_app_low_memory_callback(void *data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
 &nbsp;&nbsp;&nbsp;service_app_exit();
@@ -124,7 +131,9 @@
 
 <li>
 <p>Add the low battery callback for handling the low battery event. This callback is called when the device is low on battery power.</p>
-<pre class="prettyprint">void service_app_low_battery_callback(void *data)
+<pre class="prettyprint">
+void 
+service_app_low_battery_callback(void *data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
 &nbsp;&nbsp;&nbsp;service_app_exit();
@@ -142,7 +151,9 @@
 
 <p>Set the callbacks in the <span style="font-family: Courier New,Courier,monospace">service_app_event_callback_s</span> structure. This structure is passed to the function that starts the service application.</p>
 
-<pre class="prettyprint">int main(int argc, char* argv[])
+<pre class="prettyprint">
+int 
+main(int argc, char* argv[])
 {
 &nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
 &nbsp;&nbsp;&nbsp;service_app_lifecycle_callback_s event_callback = {0,};
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 359ff2e..b94b7ca 100644
--- a/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm
@@ -18,20 +18,19 @@
 	
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
 		<ul class="toc">
 			<li><a href="#add">Adding a Shortcut</a></li>
-		</ul>
-		<ul class="toc">
-			<li><a href="#add_widget">Adding a Widget</a></li>
-		</ul>
+			<li><a href="#add_widget">Adding a Widget</a></li>			
+		</ul>		
 		<p class="toc-title">Related Info</p>
 		<ul class="toc">
 			<li><a href="../../../../org.tizen.guides/html/native/app/shortcut_n.htm">Shortcut Guide</a></li>
 			<li><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__SHORTCUT__MODULE.html">Shortcut API for Wearable Native</a></li>
 		</ul>
 	</div></div>
 </div>	
@@ -40,27 +39,15 @@
 <h1>Shortcut: Adding a Shortcut to Home</h1>
 
   
-<p>This tutorial demonstrates how you can add shortcuts on the home screen, and track when shortcuts are added to the home screen.</p>
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This tutorial demonstrates how you can add shortcuts and widgets on the home screen, and track when they are added to the home screen.</p>  
 
 <h2>Warm-up</h2>
 <p>Become familiar with the Shortcut API basics by learning about:</p>
 	<ul>
 		<li><a href="#add">Adding a Shortcut</a>
 		<p>Add a shortcut to the home screen.</p></li>
-	</ul>
-	<ul>
 		<li><a href="#add_widget">Adding a Widget</a>
-		<p>Add a widget to the home screen.</p></li>
+        <p>Add a widget to the home screen.</p></li>		
 	</ul>
 
  <h2 id="add" name="add">Adding a Shortcut</h2>
@@ -69,18 +56,23 @@
 
 <ol>
 
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;shortcut_manager.h&gt;</span> header file in your application:</p>
+<li><p>To use the functions and data types of the Shortcut API (in <a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__SHORTCUT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;shortcut_manager.h&gt;</span> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;shortcut_manager.h&gt;
 </pre>
 </li>
-<li><p>To add a shortcut, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function:</p>
+<li><p>Add a shortcut using 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_APP, 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>
 
-<li><p>To track possible errors, define a callback function:</p>
-<pre class="prettyprint">static int result_cb(int ret, void *data)
+<li><p>Define a callback function to track possible errors:</p>
+<pre class="prettyprint">
+static int 
+result_cb(int ret, void *data)
 {
 &nbsp;&nbsp;&nbsp;if (ret &lt; 0)
 &nbsp;&nbsp;&nbsp;{
@@ -94,20 +86,23 @@
 </pre></li></ol>
 
 <h2 id="add_widget" name="add_widget">Adding a Widget</h2>
-<p>To add a Widget to the home screen from your application:</p>
+<p>To add a widget to the home screen from your application:</p>
 <ol>
-<li>
-<p>Before adding a widget on the home screen, a widget application must be prepared. Refer the <a href="widget_tutorial_n.htm">Widget application tutorial</a> and create a widget application</p>
-</li>
-<li><p>To add a widget, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home_widget()</span> function:</p>
+<li><p>Before adding a widget on the home screen, a widget application must be prepared. For more information on creating a widget application, see <a href="widget_tutorial_n.htm">Widget Application Tutorial</a>.</p></li>
 
-<pre class="prettyprint">shortcut_add_to_home_widget(&quot;alter_name&quot;, WIDGET_SIZE_1x1, &quot;org.tizen.testwidget&quot;, &quot;/opt/media/Pictures/alter_icon.png&quot;, -1.0f, 0, result_cb, NULL);</pre>
+<li><p>Add a widget with the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home_widget()</span> function:</p>
 
-<p>To add a widget, you have to know the widget id and supported sizes.</p>
-<p>Alter name and icon will be shown when the widget is not available.</li>
+<pre class="prettyprint">
+shortcut_add_to_home_widget(&quot;alter_name&quot;, WIDGET_SIZE_1x1, &quot;org.tizen.testwidget&quot;, 
+&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;&quot;/opt/media/Pictures/alter_icon.png&quot;, -1.0f, 0, result_cb, NULL);
+</pre>
+
+<p>To add a widget, you have to know the widget ID and supported sizes. The alter name and icon are shown when the widget is not available.</p></li>
 
-<li><p>To track possible errors, define a callback function:</p>
-<pre class="prettyprint">static int result_cb(int ret, void *data)
+<li><p>Define a callback function to track possible errors:</p>
+<pre class="prettyprint">
+static int 
+result_cb(int ret, void *data)
 {
 &nbsp;&nbsp;&nbsp;if (ret &lt; 0)
 &nbsp;&nbsp;&nbsp;{
diff --git a/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm
index de4ef17..ea396a5 100644
--- a/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -45,16 +45,7 @@
   
 <p>This tutorial demonstrates how you can create a watch application, set the time, and use the ambient mode.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in wearable applications only.</p>
   
 <h2>Warm-up</h2>
 <p>Become familiar with the Watch Application API basics by learning about:</p>
@@ -95,7 +86,8 @@
 <ul>
 <li>The <span style="font-family: Courier New,Courier,monospace">create</span> callback is called before the application main loop starts. In this callback, you can initialize the application resources, such as create windows and data structures. 
 <pre class="prettyprint">
-bool app_create(int width, int height, void* user_data)
+bool 
+app_create(int width, int height, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Hook to take necessary actions before the main event loop starts
 &nbsp;&nbsp;&nbsp;// This usually means initializing the UI and application data
@@ -106,7 +98,8 @@ bool app_create(int width, int height, void* user_data)
 </li>
 <li>The <span style="font-family: Courier New,Courier,monospace">app_control</span> callback is called when another application sends a launch request to the application.
 <pre class="prettyprint">
-void app_control(app_control_h app_control, void* user_data) 
+void 
+app_control(app_control_h app_control, void* user_data) 
 {
 &nbsp;&nbsp;&nbsp;// Handle the launch request, show the user the task requested through the &quot;app_control&quot; parameter
 }
@@ -114,7 +107,8 @@ void app_control(app_control_h app_control, void* user_data)
 </li>
 <li>The <span style="font-family: Courier New,Courier,monospace">pause</span> callback is called when the application is completely obscured by another application and becomes invisible.
 <pre class="prettyprint">
-void app_pause(void* user_data) 
+void 
+app_pause(void* user_data) 
 {
 &nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes invisible 
 &nbsp;&nbsp;&nbsp;// Release the resources needed to draw the normal watch 
@@ -122,7 +116,9 @@ void app_pause(void* user_data)
 </pre>
 </li>
 <li>The <span style="font-family: Courier New,Courier,monospace">resume</span> callback is called when the application becomes visible.
-<pre class="prettyprint">void app_resume(void* user_data)
+<pre class="prettyprint">
+void 
+app_resume(void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Take the necessary actions when application becomes visible
 &nbsp;&nbsp;&nbsp;// Acquire the resources needed to draw the normal watch 
@@ -130,7 +126,9 @@ void app_pause(void* user_data)
 </pre>
 </li>
 <li>The <span style="font-family: Courier New,Courier,monospace">terminate</span> callback is called when the application main loop exits.
-<pre class="prettyprint">void app_terminate(void* user_data)
+<pre class="prettyprint">
+void 
+app_terminate(void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Release all resources
 }
@@ -138,7 +136,8 @@ void app_pause(void* user_data)
 </li>
 <li>The <span style="font-family: Courier New,Courier,monospace">time_tick</span> callback is called at least once per second. The watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time</span> time handle to draw a normal watch.
 <pre class="prettyprint">
-void app_time_tick(watch_time_h watch_time, void* user_data)
+void 
+app_time_tick(watch_time_h watch_time, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Called at least once per second
 &nbsp;&nbsp;&nbsp;// Draw a normal watch with the hour, minute, and second
@@ -149,7 +148,8 @@ void app_time_tick(watch_time_h watch_time, void* user_data)
 </li>
 <li>Set the event callbacks in the <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> structure, and pass the structure to the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span> function that starts the watch application event loop:
 <pre class="prettyprint">
-int main(int argc, char* argv[])
+int 
+main(int argc, char* argv[])
 {
 &nbsp;&nbsp;&nbsp;appdata ad = {0,};
 &nbsp;&nbsp;&nbsp;watch_app_lifecycle_callback_s callback = {0,};
@@ -188,23 +188,27 @@ int main(int argc, char* argv[])
 </ul>
 
 <pre class="prettyprint">
-void lang_changed(app_event_info_h event_info, void* user_data)
+void 
+lang_changed(app_event_info_h event_info, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Take the necessary actions when the language setting changes
 }
  
-void region_changed(app_event_info_h event_info, void* user_data)
+void 
+region_changed(app_event_info_h event_info, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Take the necessary actions when the region setting changes
 }
  
-void low_battery(app_event_info_h event_info, void* user_data)
+void 
+low_battery(app_event_info_h event_info, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Take the necessary actions when the system is running low on battery
 &nbsp;&nbsp;&nbsp;watch_app_exit();
 }
  
-void low_memory(app_event_info_h event_info, void* user_data)
+void 
+low_memory(app_event_info_h event_info, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Take the necessary actions when the system is running low on memory
 &nbsp;&nbsp;&nbsp;watch_app_exit();
@@ -212,7 +216,8 @@ void low_memory(app_event_info_h event_info, void* user_data)
 </pre></li>
 <li><p>Register the callback functions:</p>
 <pre class="prettyprint">
-bool app_create(void *user_date)
+bool 
+app_create(void *user_date)
 {
 &nbsp;&nbsp;&nbsp;// Register callbacks for each system event
 &nbsp;&nbsp;&nbsp;if (watch_app_add_event_handler(&amp;handler, APP_EVENT_LANGUAGE_CHANGED, lang_changed, NULL) != APP_ERROR_NONE) 
@@ -257,7 +262,8 @@ typedef struct
 } 
 appdata;
 
-static void __create_base_gui(appdata *ad, int width, int height)
+static 
+void __create_base_gui(appdata *ad, int width, int height)
 {
 &nbsp;&nbsp;&nbsp;int ret;
 &nbsp;&nbsp;&nbsp;watch_time_h watch_time = NULL;
@@ -288,8 +294,8 @@ static void __create_base_gui(appdata *ad, int width, int height)
 &nbsp;&nbsp;&nbsp;__update_watch(ad, watch_time);
 }
 
-
-bool app_create(void *user_date)
+bool 
+app_create(void *user_date)
 {
 &nbsp;&nbsp;&nbsp;// Define system callbacks
 
@@ -310,13 +316,14 @@ bool app_create(void *user_date)
 
 <p>For example, you can use the <span style="font-family: Courier New,Courier,monospace">int watch_time_get_minute()</span> method to retrieve the current minute value.</p>
 <pre class="prettyprint">
-static void __update_watch(appdata *ad, watch_time_h watch_time)
+static 
+void __update_watch(appdata *ad, watch_time_h watch_time)
 {
 &nbsp;&nbsp;&nbsp;watch_text[TEXT_BUF_SIZE];
 &nbsp;&nbsp;&nbsp;int hour24, minute, second;
 
 &nbsp;&nbsp;&nbsp;if (watch_time == NULL)
-&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 
 &nbsp;&nbsp;&nbsp;watch_time_get_hour24(watch_time, &amp;hour24);
 &nbsp;&nbsp;&nbsp;watch_time_get_minute(watch_time, &amp;minute);
@@ -327,7 +334,8 @@ static void __update_watch(appdata *ad, watch_time_h watch_time)
 &nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, watch_text);
 } 
 
-static void __create_base_gui(appdata *ad, int width, int height)
+static 
+void __create_base_gui(appdata *ad, int width, int height)
 {
 &nbsp;&nbsp;&nbsp;// Get the window object and time handle
 
@@ -345,13 +353,15 @@ static void __create_base_gui(appdata *ad, int width, int height)
 <ul><li><p>The <span style="font-family: Courier New,Courier,monospace">watch_app_ambient_changed_cb()</span> callback is triggered when the ambient mode is enabled or disabled in the device. You can use the callback to initialize your ambient mode UI.</p></li>
 <li><p>The <span style="font-family: Courier New,Courier,monospace">watch_app_ambient_tick_cb()</span> callback is triggered every minute while the device is in the ambient mode. You can use the callback to update the time on your watch application in the ambient mode. In this callback, do not perform time-consuming task and always update the UI as fast as possible. The platform can put the device to sleep shortly after the ambient tick expires.</p></li></ul>
 <pre class="prettyprint">
-void app_ambient_tick(watch_time_h watch_time, void* user_data)
+void 
+app_ambient_tick(watch_time_h watch_time, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;appdata *ad = user_data;
 &nbsp;&nbsp;&nbsp;__update_watch(ad, watch_time);
 }
 
-void app_ambient_changed(bool ambient_mode, void* user_data)
+void 
+app_ambient_changed(bool ambient_mode, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;if (ambient_mode) 
 &nbsp;&nbsp;&nbsp;{
@@ -362,12 +372,12 @@ void app_ambient_changed(bool ambient_mode, void* user_data)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Prepare to exit the ambient mode
 &nbsp;&nbsp;&nbsp;}
 }
-
 </pre>
 </li>
 <li>Register the ambient mode callbacks:
 <pre class="prettyprint">
-int main(int argc, char* argv[])
+int 
+main(int argc, char* argv[])
 {
 &nbsp;&nbsp;&nbsp;appdata ad = {0,};
 &nbsp;&nbsp;&nbsp;watch_app_lifecycle_callback_s callback = {0,};
@@ -382,6 +392,7 @@ int main(int argc, char* argv[])
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;watch_app_main() is failed. err = %d&quot;, ret);
 &nbsp;&nbsp;&nbsp;}
+
 &nbsp;&nbsp;&nbsp;return ret;
 } 
 </pre>
diff --git a/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm
index 31d3f04..9480384 100644
--- a/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -102,7 +102,7 @@ main(int argc, char *argv[])
 </li>
 <li>Use the <span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> function to initialize any resources that can be shared among widget instances. This function is called before the main event loop starts.
 <pre class="prettyprint">
-widget_class_h widget_app_create (void *user_data)
+widget_class_h widget_app_create(void *user_data)
 {
 &nbsp;&nbsp;&nbsp;// Hook to take necessary actions before main event loop starts
 &nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s obj_callback = {0,};
@@ -133,7 +133,8 @@ widget_class_h widget_app_create (void *user_data)
 
 <li>Define the callback functions for the system events:
 <pre class="prettyprint">
-void widget_app_lang_changed(app_event_info_h event_info, void* user_data)
+void 
+widget_app_lang_changed(app_event_info_h event_info, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Take actions when language setting changes and messages must be translated
 &nbsp;&nbsp;&nbsp;char *locale = NULL;
@@ -141,20 +142,23 @@ void widget_app_lang_changed(app_event_info_h event_info, void* user_data)
 &nbsp;&nbsp;&nbsp;elm_language_set(locale);
 &nbsp;&nbsp;&nbsp;free(locale);
 }
- 
-void widget_app_region_changed(app_event_info_h event_info, void* user_data)
+
+void 
+widget_app_region_changed(app_event_info_h event_info, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Take actions when the time zone changes
 }
- 
-void widget_app_low_battery(app_event_info_h event_info, void* user_data)
+
+void 
+widget_app_low_battery(app_event_info_h event_info, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Take actions when system is running low on battery (less than 5%)
 &nbsp;&nbsp;&nbsp;// Save the work and avoid battery-intensive processes
 &nbsp;&nbsp;&nbsp;widget_app_exit();
 }
- 
-void widget_app_low_memory(app_event_info_h event_info, void* user_data)
+
+void 
+widget_app_low_memory(app_event_info_h event_info, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Take actions when system is running on low memory
 &nbsp;&nbsp;&nbsp;// Save the work and release resources; if necessary, some apps can be killed
@@ -182,7 +186,8 @@ widget_app_terminate(void *user_data)
 <li>This callback is triggered when the widget instance is created.
 <p>Initialize resources for this widget instance and <a href="#get_window">draw the UI</a>. If bundle content is not NULL, restore the previous status.</p>
 <pre class="prettyprint">
-int widget_instance_create(widget_context_h context, bundle *content, int w, int h, void *user_data)
+int 
+widget_instance_create(widget_context_h context, bundle *content, int w, int h, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;widget_instance_data_s *wid = (widget_instance_data_s*) malloc(sizeof(widget_instance_data_s));
 &nbsp;&nbsp;&nbsp;int ret;
@@ -202,7 +207,9 @@ int widget_instance_create(widget_context_h context, bundle *content, int w, int
 <li>This callback is triggered when the widget instance is destroyed. 
 <p>Release all widget resources. If the <span style="font-family: Courier New,Courier,monospace">reason</span> for the termination is not <span style="font-family: Courier New,Courier,monospace">WIDGET_APP_DESTROY_TYPE_PERMANENT</span>, store the current status with the incoming bundle.</p>
 <pre class="prettyprint">
-int widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason, bundle *content, void *user_data)
+int 
+widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle *content, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (reason != WIDGET_APP_DESTROY_TYPE_PERMANENT) 
 &nbsp;&nbsp;&nbsp;{
@@ -218,7 +225,8 @@ int widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e
 <li>This callback is triggered when the widget instance is paused.
 <p>Take the necessary actions since the widget instance becomes invisible. The framework can destroy a paused widget instance.</p>
 <pre class="prettyprint">
-int widget_instance_pause(widget_context_h context, void *user_data)
+int 
+widget_instance_pause(widget_context_h context, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
 }
@@ -227,7 +235,8 @@ int widget_instance_pause(widget_context_h context, void *user_data)
 <li>This callback is triggered when the widget instance is resumed.
 <p>Take the necessary actions since the widget instance becomes visible.</p>
 <pre class="prettyprint">
-int widget_instance_resume(widget_context_h context, void *user_data)
+int 
+widget_instance_resume(widget_context_h context, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
 }
@@ -236,7 +245,8 @@ int widget_instance_resume(widget_context_h context, void *user_data)
 <li>This callback is triggered before the widget instance is resized.
 <p>Take the necessary actions to accommodate the new size.</p>
 <pre class="prettyprint">
-int widget_instance_resize(widget_context_h context, int w, int h, void *user_data)
+int 
+widget_instance_resize(widget_context_h context, int w, int h, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
 } 
@@ -245,7 +255,8 @@ int widget_instance_resize(widget_context_h context, int w, int h, void *user_da
 <li>This callback is triggered when a widget update event is received.
 <p>Take the necessary actions for the widget update. If the <span style="font-family: Courier New,Courier,monospace">force</span> parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, the widget can be updated even in the pause state.</p>
 <pre class="prettyprint">
-int widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
+int 
+widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
 }
@@ -256,7 +267,7 @@ int widget_instance_update(widget_context_h context, bundle *content, int force,
 
 <li>Register the callbacks in the <span style="font-family: Courier New,Courier,monospace">widget_instance_lifecycle_callback_s</span> structure during the widget application initialization:
 <pre class="prettyprint">
-widget_class_h widget_app_create (void *user_data)
+widget_class_h widget_app_create(void *user_data)
 {
 &nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s obj_callback = {0,};
 &nbsp;&nbsp;&nbsp;// Register the callback functions
@@ -330,27 +341,27 @@ widget_instance_create(widget_context_h context, bundle *content, int w, int h,
 &nbsp;&nbsp;&nbsp;widget_app_context_set_tag(context, wid);
 
 &nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
-}
+} 
 
-int widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason, bundle *content, void *user_data)
+int 
+widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle *content, void *user_data)
 {
-
 &nbsp;&nbsp;&nbsp;if (reason != WIDGET_APP_DESTROY_TYPE_PERMANENT)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Save the current status at the bundle object
 &nbsp;&nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;widget_instance_data_s *wid = NULL;
-&nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&wid);
+&nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&amp;wid);
 
 &nbsp;&nbsp;&nbsp;if (wid-&gt;win)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; evas_object_del(wid-&gt;win);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(wid-&gt;win);
 
 &nbsp;&nbsp;&nbsp;free(wid);
 
 &nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
 }
-
 </pre>
 
 <h2 id="get_instance">Managing the Widget Instance</h2>
@@ -365,21 +376,25 @@ typedef struct
 } user_defined_s;
 
 
-int widget_instance_create(widget_context_h context, bundle *content, int w, int h, void *user_data)
+int 
+widget_instance_create(widget_context_h context, bundle *content, int w, int h, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;user_defined_s *uds = (user_defined_s*)malloc(sizeof(user_defined_s));
 &nbsp;&nbsp;&nbsp;uds-&gt;val1 = 0;
 &nbsp;&nbsp;&nbsp;widget_app_context_set_tag(context, uds);
 }
 
-int widget_instance_destroy(widget_context_h context, widget_destroy_type_e reason, bundle *content, void *user_data)
+int 
+widget_instance_destroy(widget_context_h context, widget_destroy_type_e reason, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle *content, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;user_defined_s *uds = NULL;
 &nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&amp;uds);
 &nbsp;&nbsp;&nbsp;free(uds);
 }
 
-int widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
+int 
+widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;user_defined_s *uds = NULL;
 &nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&amp;uds);
@@ -390,7 +405,8 @@ int widget_instance_update(widget_context_h context, bundle *content, int force,
 
 <li>Get the widget instance ID:
 <pre class="prettyprint">
-int widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
+int 
+widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;const char *inst_id = NULL;
 &nbsp;&nbsp;&nbsp;inst_id = widget_app_get_id(context);
diff --git a/org.tizen.tutorials/html/native/base/base_tutorials_n.htm b/org.tizen.tutorials/html/native/base/base_tutorials_n.htm
index e09d314..80efe3f 100644
--- a/org.tizen.tutorials/html/native/base/base_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/base/base_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
        <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm b/org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm
index 77b1daf..41c98c6 100644
--- a/org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -29,7 +29,7 @@
 			<li><a href="#numbers">Managing Numbers</a></li>
 			<li><a href="#ubrk">Managing Iteration Using Ubrk</a></li>
 			<li><a href="#uenum">Managing Enumerations</a></li>
-			<li><a href="#tmz">Managing Timezones</a></li>
+			<li><a href="#tmz">Managing Time Zones</a></li>
 			<li><a href="#uset">Managing Sets</a></li>
 		</ul>
 		<p class="toc-title">Related Info</p>
@@ -38,7 +38,7 @@
 			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Mobile Native</a></li>
 			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Wearable Native</a></li>
 		</ul>
-
+       
     </div></div>
 </div>
 
@@ -49,7 +49,7 @@
 <p>This tutorial demonstrates how you can manage numbers, date, time and locale information.</p>
 <h2>Warm-up</h2>
 
- <p>Become familiar with the i18n API basics by learning about:</p>
+ <p>Become familiar with the i18n API basics by learning about:</p> 
 		<ul>
 			<li><a href="#characters">Managing Characters and Strings</a>
 		   <p>Convert and manage characters and strings.</p></li>
@@ -59,14 +59,16 @@
 			<p>Manage locales, which represent a specific geographical, political, or cultural region.</p></li>
 		   <li><a href="#numbers">Managing Numbers</a>
 			<p>Format and parse numbers for any locale.</p></li>
-			<li><a href="#ubrk">Managing Iteration Using Ubrk</a>
+    		<li><a href="#ubrk">Managing Iteration Using Ubrk</a>
             <p>Iterate through strings using Ubrk.</p></li>
 			<li><a href="#uenum">Managing Enumerations</a>
-           <p>Create, acquire, and use enumerations.</p></li>
-		   <li><a href="#tmz">Managing Timezones</a>
-           <p>Get the timezone name, ID, DST savings, raw offset, and region code.</p></li>
-           <li><a href="#uset">Managing Sets</a>
-           <p>Manage sets of characters and strings.</p></li>
+            <p>Create, acquire, and use enumerations.</p></li>
+			<li><a href="#tmz">Managing Time Zones</a>
+            <p>Get the time zone name, ID, DST savings, raw offset, and region code.</p></li>
+			<li><a href="#uset">Managing Sets</a>
+			<p>Manage sets of characters and strings.</p></li>
+
+	
 	</ul>
 
 <h2 id="characters" name="characters">Managing Characters and Strings</h2>
@@ -116,7 +118,7 @@ i18n_ucollator_create(I18N_ULOCALE_US, &amp;coll);
 <li>Tertiary differences (<span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_TERTIARY</span>), such as case differences (&quot;a&quot; vs &quot;A&quot;)</li>
 </ul>
 
-<p>For the default value of the Ucollator's strength, use <span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_DEFAULT_STRENGTH</span>.</p>
+<p>For the default value of the Ucollator&#39;s strength, use <span style="font-family: Courier New,Courier,monospace">I18N_UCOLLATOR_DEFAULT_STRENGTH</span>.</p>
 
 <pre class="prettyprint">
 i18n_ucollator_set_strength(coll, I18N_UCOLLATOR_DEFAULT_STRENGTH);
@@ -195,6 +197,7 @@ i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
 const char dest[BUFLEN];
 i18n_ustring_copy_au_n(dest, src, BUFLEN);
 </pre></li>
+
 <li><p>Another way to convert a Ustring to a string is using the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_to_UTF8()</span> function. Its parameters are:</p>
 <ul>
 	<li>Destination buffer</li>
@@ -205,6 +208,7 @@ i18n_ustring_copy_au_n(dest, src, BUFLEN);
 	<li>Error code variable</li>
 </ul>
 <p>To get the length of a Ustring, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_get_length()</span> function.</p>
+
 <pre class="prettyprint">
 i18n_uchar src[BUFLEN];
 i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
@@ -217,7 +221,7 @@ i18n_ustring_to_UTF8(dest, BUFLEN, &amp;dest_len, src, i18n_ustring_get_length(s
 <h3 id="unicode" name="unicode">Getting Unicode Block of a Character</h3>
 <p>To get information about the location of a specified character:</p>
 <ol>
-<li><p>To get information about which Unicode allocation block contains the specified character, use the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_get_ublock_code()</span> function. The Unicode blocks are listed in the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_ublock_code_e</span> enumeration.</p>
+<li><p>To get information about which Unicode allocation block contains the specified character, use the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_get_ublock_code()</span> function. The Unicode blocks are listed in the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_ublock_code_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa338daff96b0e62243e25fe240e4eda5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa338daff96b0e62243e25fe240e4eda5">wearable</a> applications).</p>
 <pre class="prettyprint">
 i18n_uchar character = 0xC131;
 i18n_uchar_ublock_code_e ublock;
@@ -228,7 +232,7 @@ i18n_uchar_get_ublock_code(character, &amp;ublock);
 
 <p>To get the value of a property of a specified character:</p>
 <ol>
-<li><p>Properties of characters are listed in the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_uproperty_e</span> enumeration. To read the value of a property, use the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_get_int_property_value()</span> function.</p>
+<li><p>Properties of characters are listed in the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_uproperty_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa57de8e60ee941839fdfd80833106757">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html#gaa57de8e60ee941839fdfd80833106757">wearable</a> applications). To read the value of a property, use the <span style="font-family: Courier New,Courier,monospace">i18n_uchar_get_int_property_value()</span> function.</p>
 
 <p>The following example shows how to read the East Asian width property:</p>
 <pre class="prettyprint">
@@ -237,6 +241,7 @@ int32_t property_value;
 i18n_uchar_get_int_property_value(character, I18N_UCHAR_EAST_ASIAN_WIDTH, &amp;property_value);
 </pre></li></ol>
 
+
 <h3 id="normalize" name="normalize">Normalizing Ustrings</h3>
 <p>To normalize a Ustring:</p>
 <ol>
@@ -258,6 +263,7 @@ i18n_unormalization_get_instance(NULL, &quot;nfc&quot;, I18N_UNORMALIZATION_DECO
 	<li>Size of the destination buffer</li>
 	<li>Variable to store the actual length of the normalized Ustring</li>
 </ul>
+
 <pre class="prettyprint">
 i18n_uchar src = 0xACE0;
 i18n_uchar dest[4];
@@ -279,7 +285,6 @@ i18n_unormalization_normalize(normalizer, &amp;src, 1, dest, 4, &amp;dest_str_le
 	<li>Optional break iterator structure</li>
 	<li>Handle to created search iterator</li>
 </ul>
-
 <pre class="prettyprint">
 i18n_uchar text[BUFLEN];
 i18n_ustring_copy_ua(text, &quot;TIZEN&quot;);
@@ -304,6 +309,7 @@ i18n_usearch_destroy(usearch);
 <p>To change the case in a Ustring:</p>
 <ol>
 <li><p>To change all characters&#39; case in a Ustring, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_to_upper()</span> and <span style="font-family: Courier New,Courier,monospace">i18n_ustring_to_lower()</span> functions. The parameters of both functions are:</p>
+
 <ul>
 	<li>Result buffer</li>
 	<li>Result buffer capacity</li>
@@ -313,6 +319,7 @@ i18n_usearch_destroy(usearch);
 	<li>Result length</li>
 	<li>Error code variable</li>
 </ul>
+
 <pre class="prettyprint">
 i18n_uchar src[BUFLEN];
 i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
@@ -330,7 +337,7 @@ i18n_ustring_to_lower(dest, BUFLEN, src, -1, I18N_ULOCALE_US, &amp;error_code);
 	<li>Break iterator (to find first characters of words); if NULL, standard iterator is used</li>
 	<li>Locale (<span style="font-family: Courier New,Courier,monospace">&quot;&quot;</span> for root locale, NULL for default locale</li>
 </ul>
-<pre>
+<pre class="prettyprint">
 i18n_uchar src[BUFLEN];
 i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
 i18n_uchar dest[BUFLEN];
@@ -340,7 +347,7 @@ i18n_ustring_to_title_new(dest, BUFLEN, src, BUFLEN, NULL, NULL);
 </ol>
 
 <h3 id="concatenate" name="concatenate">Concatenating Ustrings</h3>
-<p>To concatenate two Ustrings:</p>
+<p>To concatenate 2 Ustrings:</p>
 <ol>
 <li><p>Use the <span style="font-family: Courier New,Courier,monospace">18n_ustring_cat_n()</span> functions. The parameters are:</p>
 <ul>
@@ -369,6 +376,7 @@ i18n_ustring_cat(dest, src);
 	<li>Substring which the function searches for in the string</li>
 </ul>
 <p>The result is a pointer to the first occurrence of the substring, or NULL if the substring is not found. You can use pointer arithmetic to find the index of the character at which the first occurrence begins.</p>
+
 <pre class="prettyprint">
 i18n_uchar s[BUFLEN];
 i18n_uchar substring[BUFLEN];
@@ -386,8 +394,7 @@ else
 </pre>
 </li>
 </ol>
-
-
+	
 <h2 id="dates" name="dates">Managing Dates and Calendar</h2>
 
 
@@ -414,7 +421,6 @@ else
     <li>Calendar type (default, Gregorian)</li>
     <li>Handle to the created Ucalendar</li>
 </ul>
-
 <pre class="prettyprint">
 i18n_uchar timezone[17];
 i18n_ustring_copy_ua_n(timezone, &quot;America/New_York&quot;, 17);
@@ -424,7 +430,7 @@ i18n_ucalendar_create(timezone, -1, I18N_ULOCALE_US, I18N_UCALENDAR_DEFAULT, &am
 
 <li>Set a date.
 <p>To set a date in the Ucalendar, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_set_date_time()</span> function.</p>
-<p>Provide a handle to the Ucalendar, year, month reduced by 1 (0 for January, 1 for February, and so forth; use the values of the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_months_e</span> enumeration to avoid mistakes), day, hour, minute, and second.</p>
+<p>Provide a handle to the Ucalendar, year, month reduced by 1 (0 for January, 1 for February, and so forth; use the values of the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_months_e</span> enumeration, in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#ga094cacb2ef9ee4805e42e276fec5ae2f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#ga094cacb2ef9ee4805e42e276fec5ae2f">wearable</a> applications, to avoid mistakes), day, hour, minute, and second.</p>
 <pre class="prettyprint">
 i18n_ucalendar_set_date_time(ucalendar, 2014, I18N_UCALENDAR_JULY, 1, 9, 0, 0);</pre>
 <p>To set a date using milliseconds from the epoch, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_set_milliseconds()</span> function:</p>
@@ -433,7 +439,7 @@ i18n_udate udate;
 // udate must be set
 i18n_ucalendar_set_milliseconds(ucalendar, udate);
 </pre>
-<p>To add a specified period to the Ucalendar, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_add()</span> function. Specify a handle to the Ucalendar, a field of Ucalendar to add to (year, week, day; the value of the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_date_fields_e</span> enumeration) and the amount to add to field (use a negative value to subtract).</p>
+<p>To add a specified period to the Ucalendar, use the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_add()</span> function. Specify a handle to the Ucalendar, a field of Ucalendar to add to (year, week, day; the value of the <span style="font-family: Courier New,Courier,monospace">i18n_ucalendar_date_fields_e</span> enumeration, in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#gaee345f9992035a07732d16d69c41c192">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html#gaee345f9992035a07732d16d69c41c192">wearable</a> applications) and the amount to add to field (use a negative value to subtract).</p>
 <pre class="prettyprint">i18n_ucalendar_add(ucalendar, I18N_UCALENDAR_HOUR, 3);</pre></li>
 
 <li>Get a date.
@@ -475,7 +481,7 @@ i18n_ustring_copy_ua_n(format, &quot;EEEdMMMyyyyHHmmssz&quot;, 64);
 i18n_uchar best_pattern[64];
 i18n_udatepg_get_best_pattern(udatepg, format, 64, best_pattern, 64, &amp;pattern_len);
 </pre>
-<p>To create a date format, use the <span style="font-family: Courier New,Courier,monospace">i18n_udate_create()</span> function. Specify the style to format time, the style to format date (from the <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_style_e</span> enumeration), the desired locale, the desired time zone name, the length of the time zone name, a date pattern to use, the length of the pattern, and a handle to the created date format).</p>
+<p>To create a date format, use the <span style="font-family: Courier New,Courier,monospace">i18n_udate_create()</span> function. Specify the style to format time, the style to format date (from the <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_style_e</span> enumeration, in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html#gaee2461e926bc151486d380c43bc4f2a3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html#gaee2461e926bc151486d380c43bc4f2a3">wearable</a> applications), the desired locale, the desired time zone name, the length of the time zone name, a date pattern to use, the length of the pattern, and a handle to the created date format).</p>
 <pre class="prettyprint">
 i18n_udate_format_h date_format;
 i18n_ustring_copy_ua_n(timezone, &quot;Asia/Seoul&quot;, 17);
@@ -508,11 +514,12 @@ i18n_udate_destroy(date_format);
 </pre></li>
 <li>To manage locale information:
 <ul>
-<li>To get the language code associated with a locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> function. Provide the:
-<ul><li>Locale symbol (such as &quot;en_US&quot; or &quot;ko_KR&quot; - the supported locales are defined in the API as <span style="font-family: Courier New,Courier,monospace">I18N_ULOCALE_*</span>)</li>
-<li>Buffer for the language code</li>
-<li>The size of the buffer</li>
-<li>Variable to store the actual length of the language code</li>
+<li>To get the language code associated with a locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> function. The parameters are:
+<ul>
+	<li>Locale symbol (such as &quot;en_US&quot; or &quot;ko_KR&quot; - the supported locales are defined in the API as <span style="font-family: Courier New,Courier,monospace">I18N_ULOCALE_*</span>)</li>
+	<li>Buffer for the language code</li>
+	<li>Size of the buffer</li>
+	<li>Variable to store the actual length of the language code</li>
 </ul>
 <pre class="prettyprint">
 char language[BUFLEN];
@@ -520,45 +527,45 @@ int lang_len;
 i18n_ulocale_get_language(I18N_ULOCALE_GERMANY, language, BUFLEN, &amp;lang_len);
 </pre></li>
 
-<li>To get the language ISO-3 code for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> function. The argument is the locale.
-<pre class="prettyprint">const char *language_iso = i18n_ulocale_get_iso3_language(I18N_ULOCALE_GERMANY);
+<li>To get the language ISO-3 code for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> function. The parameter is the locale.
+<pre class="prettyprint">
+const char *language_iso = i18n_ulocale_get_iso3_language(I18N_ULOCALE_GERMANY);
 </pre>
 </li>
 
-<li>To get the full name of language for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_language()</span> function. The parameters are:
+<li>To get the full name of the language for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_language()</span> function. The parameters are:
 <ul>
-	<li>Locale to get the full language name of</li>
-	<li>Locale to localize the language name (specifies the language of the obtained name)</li>
-	<li>Buffer for the name</li>
-	<li>Size of the buffer</li>
-	<li>Variable to store the actual size of the language name</li>
+      <li>Locale to get the full language name of</li>
+       <li>Locale to localize the language name (specifies the language of the obtained name)</li>
+       <li>Buffer for the name</li>
+       <li>Size of the buffer</li>
+       <li>Variable to store the actual size of the language name</li>
 </ul>
 <pre class="prettyprint">
-char *locale = I18N_ULOCALE_FRENCH;
+char *locale = I18N_ULOCALE_CANADA_FRENCH;
 i18n_uchar language_name[BUFLEN];
 int lang_len;
 i18n_ulocale_get_display_language(locale, I18N_ULOCALE_GERMANY, language_name, BUFLEN, &amp;lang_len);
 </pre>
 <p>In this example, the name of the &quot;fr_CA&quot; locale is obtained in German.</p></li>
 
-<li>To get the line orientation for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_line_orientation()</span> function.
- The  parameters are:
- <ul>
- <li>Locale to get the line orientation of</li>
- <li>Variable to store the returned orientation</li>
- </ul>
- <pre class="prettyprint">
+<li>To get the line orientation for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_line_orientation()</span> function. The parameters are:
+<ul>
+	<li>Locale to get the line orientation of</li>
+	<li>Variable to store the returned orientation</li>
+</ul>
+<pre class="prettyprint">
 char *locale = I18N_ULOCALE_ENGLISH;
 i18n_ulocale_layout_type_e type;
 i18n_ulocale_get_line_orientation(locale, &amp;type);
 </pre></li>
 
-<li>To get the character orientation for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_character_orientation()</span> function.
-   The parameters are:<ul>
- <li>Locale to get the character orientation of</li>
- <li>Variable to store the returned orientation</li>
- </ul>
- <pre class="prettyprint">
+<li>To get the character orientation for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_character_orientation()</span> function. The parameters are:
+<ul>
+	<li>Locale to get the character orientation of</li>
+	<li>Variable to store the returned orientation</li>
+</ul>
+<pre class="prettyprint">
 char *locale = I18N_ULOCALE_ENGLISH;
 i18n_ulocale_layout_type_e type;
 i18n_ulocale_get_character_orientation(locale, &amp;type);
@@ -574,7 +581,9 @@ i18n_ulocale_get_character_orientation(locale, &amp;type);
 char *locale = I18N_ULOCALE_ENGLISH;
 char *variant = malloc(sizeof(char) * BUFLEN);
 int32_t variant_len = i18n_ulocale_get_variant(locale, variant, BUFLEN);
-</pre><p>The function returns the actual size of the variant</p></li>
+</pre>
+<p>The function returns the actual size of the variant.</p>
+</li>
 
 <li>To get a full name for the specified locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_name()</span> function. The parameters are:
 <ul>
@@ -584,6 +593,7 @@ int32_t variant_len = i18n_ulocale_get_variant(locale, variant, BUFLEN);
 	<li>Size of the buffer</li>
 	<li>Variable to store the actual size of the name</li>
 </ul>
+
 <pre class="prettyprint">
 i18n_uchar name[BUFLEN];
 int name_len;
@@ -591,12 +601,13 @@ i18n_ulocale_get_display_name(I18N_ULOCALE_CANADA_FRENCH, I18N_ULOCALE_GERMANY,
 </pre>
 <p>In this example, the name of the &quot;fr_CA&quot; locale is obtained in German.</p></li>
 
-<li>To get the default locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_default()</span> function.
+<li>To get the default locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_default()</span> function:
 <pre class="prettyprint">
 char *locale;
 i18n_ulocale_get_default(&amp;locale);
-</pre></li>
-<li>To set the default locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_set_default()</span> function.
+</pre>
+</li>
+<li>To set the default locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_set_default()</span> function:
 <pre class="prettyprint">
 i18n_ulocale_set_default(I18N_ULOCALE_KOREA);</pre></li>
 </ul></li>
@@ -613,23 +624,25 @@ i18n_ulocale_set_default(I18N_ULOCALE_KOREA);</pre></li>
 <li>Create a number format.
 <p>To start using the Unumber module, create a number format using the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_create()</span> function. The parameters are:</p>
 <ul>
-	<li>Number format style (see the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_format_style_e</span> enumeration in documentation)</li>
+	<li>Number format style (such as <span style="font-family: Courier New,Courier,monospace">I18N_UNUMBER_CURRENCY</span>; see the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_format_style_e</span> enumeration, in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga4edc8cb72e7f46e05d8cdfe24cf386f1">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga4edc8cb72e7f46e05d8cdfe24cf386f1">wearable</a> applications)</li>
 	<li>Format pattern (only for decimal and rule-based types)</li>
 	<li>Length of the format pattern</li>
-	<li>Locale identifier (<span style="font-family: Courier New,Courier,monospace">NULL</span> for default)</li>
+	<li>Locale identifier (<span style="font-family: Courier New,Courier,monospace">NULL</span> for default)
+	<p>Some identifiers (string shortcuts for specific locales) are defined in the <span style="font-family: Courier New,Courier,monospace">utils_i18n_types.h</span> header file. For example, <span style="font-family: Courier New,Courier,monospace">I18N_ULOCALE_US</span> is equal to <span style="font-family: Courier New,Courier,monospace">&quot;en_US&quot;</span>.</p></li>
 	<li>Optional pointer to an <span style="font-family: Courier New,Courier,monospace">i18n_uparse_error_s</span> struct</li>
 	<li>Handle to the created number format</li>
 </ul>
-<p>As format_style you can use one of the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_format_style_e</span> enums, eg. <span style="font-family: Courier New,Courier,monospace">I18N_UNUMBER_CURRENCY</span>. Some Locale parameters are defined in the <span style="font-family: Courier New,Courier,monospace">utils_i18n_types.h</span> header file. They are string shortcuts for specific locale, eg. <span style="font-family: Courier New,Courier,monospace">I18N_ULOCALE_US</span> is equal to <span style="font-family: Courier New,Courier,monospace">"en_US"</span>.</p>
+
+
 
 <pre class="prettyprint">
 i18n_unumber_format_h num_format;
 i18n_unumber_format_style_e format_style = I18N_UNUMBER_CURRENCY;
 const char* locale = I18N_ULOCALE_US;
-i18n_unumber_create(format_style, NULL, -1, locale, NULL, &amp;num_format);</pre>
-
-<p>After creating the number format, you can use it to format a given number in the way it is used in a specified locale. After invoking:</p>
+i18n_unumber_create(format_style, NULL, -1, locale, NULL, &amp;num_format);
+</pre>
 
+<p>After creating the number format, you can use it to format a given number based on the rules of a specified locale:</p>
 <pre class="prettyprint">
 #define BUFLEN 64
 i18n_uchar myString[BUFLEN];
@@ -637,17 +650,16 @@ double myNumber = 4.5;
 i18n_unumber_format_double(num_format, myNumber, myString, BUFLEN, NULL);
 </pre>
 
-<p>the result set in <span style="font-family: Courier New,Courier,monospace">myString</span> variable will be equal to:</p>
-
+<p>The result set in the <span style="font-family: Courier New,Courier,monospace">myString</span> variable is equal to:</p>
 <pre class="prettyprint">
 $4.50
 </pre>
-
+</li>
 <li>Get a symbol associated with the number format.
 <p>To get a symbol associated with the created number format, use the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_get_symbol()</span> function. The parameters are:</p>
 <ul>
 	<li>Number format</li>
-	<li>Symbol to get (see the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_format_symbol_e</span> enumeration in documentation)</li>
+	<li>Symbol to get (see the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_format_symbol_e</span> enumeration, in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga9abb496f12b9fd47244060af5ecbc39e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga9abb496f12b9fd47244060af5ecbc39e">wearable</a> applications)</li>
 	<li>Destination buffer</li>
 	<li>Size of the buffer</li>
 	<li>Variable to store the length of the symbol</li>
@@ -656,12 +668,15 @@ $4.50
 i18n_uchar buffer[BUFLEN];
 int buf_len;
 i18n_unumber_format_symbol_e symbol = I18N_UNUMBER_CURRENCY_SYMBOL;
-i18n_unumber_get_symbol(num_format, symbol, buffer, BUFLEN, &amp;buf_len);</pre></li>
-<p>It returns only the symbol using in given locale (here the currency <span style="font-family: Courier New,Courier,monospace">$</span> sign).
+i18n_unumber_get_symbol(num_format, symbol, buffer, BUFLEN, &amp;buf_len);
+</pre>
+<p>The function returns only the symbol used in the given locale, in this example, the currency <span style="font-family: Courier New,Courier,monospace">$</span> sign.</p>
+</li>
 
 <li>Destroy the number format.
-<p>When you finish using the number format, destroy it with the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_destroy()</span> function.</p>
+<p>When you finish using the number format, destroy it with the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_destroy()</span> function:</p>
 <pre class="prettyprint">i18n_unumber_destroy(num_format);</pre></li>
+
 </ol>
 
 <h2 id="ubrk" name="ubrk">Managing Iteration Using Ubrk</h2>
@@ -835,7 +850,7 @@ const char *keyword = NULL;
 int len;
 
 keyword = i18n_uenumeration_next(keywords, &amp;len);
-while (keyword != NULL)
+while (keyword != NULL) 
 {
 &nbsp;&nbsp;&nbsp;// Use the keyword string
 
@@ -846,8 +861,9 @@ i18n_uenumeration_destroy(keywords);
 </pre>
 </li>
 </ol>
+	
 
-<h2 id="tmz" name="tmz">Managing Timezones</h2>
+<h2 id="tmz" name="tmz">Managing Time Zones</h2>
 <p>The Timezone module represents a time zone offset, and also figures out daylight savings.</p>
 
 <ol><li><p>To use the Timezone API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__TIMEZONE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__TIMEZONE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;utils_i18n.h&gt;</span> header file in your application:</p>
@@ -855,28 +871,28 @@ i18n_uenumeration_destroy(keywords);
 #include &lt;utils_i18n.h&gt;
 </pre></li>
 
-<li>Retrieve timezone information:
+<li>Retrieve time zone information:
 
-<ul><li><p>To get the default timezone based on the timezone where the program is running:</p>
+<ul><li><p>To get the default time zone based on the time zone where the program is running:</p>
 <pre class="prettyprint">
 i18n_timezone_h tmz;
 i18n_timezone_create_default(&amp;tmz);
 </pre></li>
 
-<li><p>To get the display name of the timezone:</p>
+<li><p>To get the display name of the time zone:</p>
 <pre class="prettyprint">
 char *display_name;
 i18n_timezone_get_display_name(tmz, &amp;display_name);
 </pre></li>
 
-<li><p>To get the timezone ID:</p>
+<li><p>To get the time zone ID:</p>
 <pre class="prettyprint">
 char *timezone_id;
 i18n_timezone_get_id(tmz, &amp;timezone_id);
 </pre></li>
 
 <li>
-<p>To check whether a given timezone uses daylight savings time (DST):</p>
+<p>To check whether a given time zone uses daylight savings time (DST):</p>
 <pre class="prettyprint">
 int32_t dst_savings;
 i18n_timezone_get_dst_savings(tmz, &amp;dst_savings);
@@ -889,7 +905,7 @@ i18n_timezone_get_dst_savings(tmz, &amp;dst_savings);
 int32_t dst_savings;
 i18n_timezone_get_dst_savings(tmz, &amp;dst_savings/MS_TO_MIN);
 </pre>
-<p>The result is returned in milliseconds (3600000 ms = 1 hour). In this tutorial milliseconds are changed to minutes (1 min = 60000 ms).</p></li>
+<p>The result is returned in milliseconds (3600000 ms = 1 hour). In this tutorial, milliseconds are changed to minutes (1 min = 60000 ms).</p></li>
 
 <li><p>To get the raw GMT offset:</p>
 <pre class="prettyprint">
@@ -897,40 +913,47 @@ i18n_timezone_get_dst_savings(tmz, &amp;dst_savings/MS_TO_MIN);
 int32_t offset_milliseconds;
 i18n_timezone_get_raw_offset(tmz, &amp;offset_milliseconds/MS_TO_MIN);
 </pre>
-<p>The result is returned in milliseconds. It is the number of milliseconds to add to GMT to get the local time, before taking DST into account. In this tutorial milliseconds are changed to minutes (1 min = 60000 ms).</p></li>
+<p>The result is returned in milliseconds. It is the number of milliseconds to add to GMT to get the local time, before taking DST into account. In this tutorial, milliseconds are changed to minutes (1 min = 60000 ms).</p></li>
 
-<li><p>To get the region code associated with the timezone ID:</p>
+<li><p>To get the region code associated with the time zone ID:</p>
 <pre class="prettyprint">
 char region[6];
 int32_t region_len = -1;
 i18n_timezone_get_region(timezone_id, region, &amp;region_len, 20);
 </pre></li></ul></li>
 
-<li><p>Destroy the timezone when it is no longer needed:</p>
+<li><p>Destroy the time zone when it is no longer needed:</p>
 <pre class="prettyprint">
 i18n_timezone_destroy(tmz);
-</pre></li></ol>
-
-
+</pre></li></ol>	
+	
 <h2 id="uset" name="uset">Managing Sets</h2>
 <p>The Uset module allows you to create sets which can contain characters and strings. You can iterate through elements of the given set and carry out various operations on the set.</p>
+<p>To manage sets:</p>
+<ol>
 
-<p>To use Uset API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USET__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USET__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;utils_i18n.h&gt;</span> header file in your application.</p>
-<li>
-The first step is to create a set. The code below creates an empty set:
-<pre>
+<li>To use the Uset API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USET__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USET__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;utils_i18n.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;utils_i18n.h&gt;
+</pre>
+</li>
+
+<li>Create a set. 
+<p>The following example creates an empty set:</p>
+<pre class="prettyprint">
 i18n_uset_h set;
 i18n_uset_create_empty(&amp;set);
 </pre>
 </li>
+</ol>
+
 
-<h3 id="uset_managing_characters" name="uset_managing_characters">Managing characters</h3>
-<p>The set can contain characters as its elements. It's also possible to check if a set contains specified characters.</p>
+<h3 id="uset_managing_characters" name="uset_managing_characters">Managing Characters</h3>
+<p>The set can contain characters as its elements. It is also possible to check whether a set contains specified characters.</p>
 <ol>
-<li>
-Add characters from a string to the set:
-<pre>
-const char *text = "Example string";
+<li>Add characters from a string to the set:
+<pre class="prettyprint">
+const char *text = &quot;Example string&quot;;
 i18n_uchar u_input_text[BUFLEN];
 i18n_ustring_copy_ua(u_input_text, text);
 
@@ -938,83 +961,82 @@ i18n_uset_add_all_code_points(set, u_input_text, -1);
 </pre>
 </li>
 
-<li>
-Get the list of characters in the set:
-<pre>
+<li>Get the list of characters in the set:
+<pre class="prettyprint">
 int chars_count = i18n_uset_size(set);
 int i;
 
 // Get all characters in the set
-for (i = 0; i < chars_count; i++) {
-    i18n_uchar32 uchar = i18n_uset_char_at(set, i);
+for (i = 0; i &lt; chars_count; i++) 
+{
+&nbsp;&nbsp;&nbsp;i18n_uchar32 uchar = i18n_uset_char_at(set, i);
 }
 </pre>
 </li>
 
-<li>
-Check whether the set contains the given character:
-<pre>
-i18n_ubool contains_character = i18n_uset_contains(set, 'a');
+<li>Check whether the set contains the given character:
+<pre class="prettyprint">
+i18n_ubool contains_character = i18n_uset_contains(set, &#39;a&#39;);
 </pre>
 </li>
 
-<li>
-Check whether the set contains characters from the a - c range:
-<pre>
-i18n_ubool contains_character = i18n_uset_contains_range(set, 'a', 'c');
+<li>Check whether the set contains characters from the a - c range:
+<pre class="prettyprint">
+i18n_ubool contains_character = i18n_uset_contains_range(set, &#39;a&#39;, &#39;c&#39;);
 </pre>
 </li>
 
-<li>
-Check whether the set contains characters from another set:
-<pre>
+<li>Check whether the set contains characters from another set:
+<pre class="prettyprint">
 i18n_uset_h compare_set = NULL;
+
 // Fill the second set
 i18n_ubool contains_character = i18n_uset_contains_all(set, compare_set);
 </pre>
 </li>
 </ol>
+	
 
-<h3 id="uset_managing_strings" name="uset_managing_strings">Managing strings</h3>
-<p>The set can contain strings as its elements:</p>
-<ol>
-<li>
-Add a string to the set:
-<pre>
-const char *text = "Example string";
+	<h3 id="uset_managing_strings" name="uset_managing_strings">Managing Strings</h3>
+	
+<p>The set can contain strings as its elements. To manage strings:</p>
+<ul>
+<li>Add a string to the set:
+<pre class="prettyprint">
+const char *text = &quot;Example string&quot;;
 i18n_uchar u_input_text[BUFLEN];
 i18n_ustring_copy_ua(u_input_text, text);
-
+ 
 i18n_uset_add_string(set, u_input_text, -1);
 </pre>
-The entire string is a single element in such cases.
+<p>The entire string is a single element.</p>
 </li>
-<li>
-List all strings in the set:
-<pre>
+
+<li>List all strings in the set:
+<pre class="prettyprint">
 int strings_count = i18n_uset_get_item_count(set);
 int32_t len = 0;
 int32_t i;
-for (i = 0; i < strings_count; ++i) {
-    i18n_uchar32 start, end;
-    i18n_uchar string[100];
-    let = i18n_uset_get_item(set, i, &amp;start, &amp;end, string, 100);
-    if (len != 0) {
-        // a string was found, use the 'string' variable
-    }
+for (i = 0; i &lt; strings_count; ++i) 
+{
+&nbsp;&nbsp;&nbsp;i18n_uchar32 start, end;
+&nbsp;&nbsp;&nbsp;i18n_uchar string[100];
+&nbsp;&nbsp;&nbsp;let = i18n_uset_get_item(set, i, &amp;start, &amp;end, string, 100);
+&nbsp;&nbsp;&nbsp;if (len != 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// String was found, use the &#39;string&#39; variable
+&nbsp;&nbsp;&nbsp;}
 }
 </pre>
-Note that the <span style="font-family: Courier New,Courier,monospace">i18n_uset_get_item()</span> function also returns ranges (an item is a string or a range). The return value is 0 if the current item is a range. Please refer to the documentation for details.
+<p>Note that the <span style="font-family: Courier New,Courier,monospace">i18n_uset_get_item()</span> function also returns ranges (an item is a string or a range). The return value is 0 if the current item is a range. For more information, see the API documentation.</p>
 </li>
-<li>
-Check whether the set contains a string:
-<pre>
+<li>Check whether the set contains a string:
+<pre class="prettyprint">
 i18n_ubool contains = i18n_uset_contains_string(set, input_ustring, -1);
 </pre>
 </li>
-</ol>
-
-
+</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.tutorials/html/native/base/sqlite_tutorial_n.htm b/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
index 0ed1cb0..ae681f1 100644
--- a/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -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 <a href="../../../../org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm#layout">API layout</a>.</p>
+<p>This tutorial demonstrates how you can use the open source modules, whose functions provide access to SQLite and OpenSSL and demonstrate how to encrypt and store application data. The open source modules supported by Tizen are listed in the <a href="../../../../org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm">API modules</a>.</p>
 
 <h2>Warm-up</h2> 
 <p>Become familiar with the basics of the Sqlite API by learning about:</p> 
@@ -162,7 +162,8 @@ CREATE TABLE IF NOT EXISTS EncryptedData(TEXT NOT NULL,
 </ol>
 
 <pre class="prettyprint">
-static int CreateTable()
+static int 
+CreateTable()
 {
 &nbsp;&nbsp;&nbsp;int ret;
 &nbsp;&nbsp;&nbsp;char *ErrMsg;
@@ -183,7 +184,8 @@ static int CreateTable()
 
 <p>The string delimiting characters are removed. In a real implementation, replace some more characters, such as the comment sequence.</p>
 <pre class="prettyprint">
-void PrepareToSQL(unsigned char* msg)
+void 
+PrepareToSQL(unsigned char* msg)
 {
 &nbsp;&nbsp;&nbsp;int i = 0;
 &nbsp;&nbsp;&nbsp;while (msg[i]!=0x00)
@@ -230,7 +232,8 @@ InsertRecord(decrypted_out, 1, 0, strlen(ShortMsg));
 		<li>Add a delimiting 0x00 character at the end of the byte array.</li>
 	</ol>
 		<pre class="prettyprint">
-static int EncryptMsg(char* in, unsigned char* out, const unsigned char* password, unsigned char *localsalt, unsigned char *vector)
+static int 
+EncryptMsg(char* in, unsigned char* out, const unsigned char* password, unsigned char *localsalt, unsigned char *vector)
 {
 &nbsp;&nbsp;&nbsp;AES_KEY encryption_key;
 &nbsp;&nbsp;&nbsp;int iter = (int)vector[0];
@@ -272,7 +275,8 @@ static int EncryptMsg(char* in, unsigned char* out, const unsigned char* passwor
 	<li>Insert a record into the database.
 	<p>To insert data to the database, use the <span style="font-family: Courier New,Courier,monospace">sqlite3_exec()</span> function. A query is prepared with common C functions. The encrypted variable is stored in the database and indicates whether the DATA field in the database is encrypted.</p>
 	<pre class="prettyprint">
-static int InsertRecord(unsigned char *msg, int encrypted,
+static int 
+InsertRecord(unsigned char *msg, int encrypted,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int part, int len)
 {
 &nbsp;&nbsp;&nbsp;char sqlbuff[BUFLEN];
@@ -287,7 +291,6 @@ static int InsertRecord(unsigned char *msg, int encrypted,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Error: %s\n&quot;, ErrMsg);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlite3_free(ErrMsg);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return 0;
 }
 </pre>
@@ -300,7 +303,8 @@ static int InsertRecord(unsigned char *msg, int encrypted,
 	
 	<p>A message is divided into blocks 16 characters long. Each block is tagged by its own number with a <span style="font-family: Courier New,Courier,monospace">parts</span> variable. A tag is stored in the database in the PART field.</p>
 	<pre class="prettyprint">
-static int InsertMessage(unsigned char* text)
+static int 
+InsertMessage(unsigned char* text)
 {
 &nbsp;&nbsp;&nbsp;unsigned char encrypted_out[BUFLEN];
 &nbsp;&nbsp;&nbsp;int ret = 0;
@@ -330,7 +334,6 @@ static int InsertMessage(unsigned char* text)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encrypted_out, password, salt, iv);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;InsertRecord(encrypted_out, 1, parts, retlen);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return 0;
 }
 </pre>
@@ -349,7 +352,8 @@ ShowRecords();
 
 <p>To list all records, use the <span style="font-family: Courier New,Courier,monospace">SELECT * FROM EncryptedData</span> query. The callback function is invoked for each record returned by SQLite. SQLite allows passing user data to the callback function. User data is the 4th parameter of <span style="font-family: Courier New,Courier,monospace">sqlite3_exec(..., ..., ..., &amp;counter, ...)</span>.</p>
 <pre class="prettyprint">
-static void ShowRecords()
+static void 
+ShowRecords()
 {
 &nbsp;&nbsp;&nbsp;char *sql = &quot;select * from EncryptedData&quot;;
 &nbsp;&nbsp;&nbsp;int counter = 0, ret = 0;
@@ -362,7 +366,8 @@ static void ShowRecords()
 </pre>
 <p>Callback simply prints an obtained record. The record is passed in the form of a few arrays of strings. <span style="font-family: Courier New,Courier,monospace">Argv</span> contains the column content, <span style="font-family: Courier New,Courier,monospace">azColName</span> contains the column name. <span style="font-family: Courier New,Courier,monospace">Argc</span> is the number of columns. Counter is user data. Here it is used to indicate the record number in a row (not an SQL primary key) while listing. If the content of any column is empty, the <span style="font-family: Courier New,Courier,monospace">NULL</span> string is printed.</p>
 <pre class="prettyprint">
-static int callback(void *counter, int argc, char **argv, char **azColName)
+static int 
+callback(void *counter, int argc, char **argv, char **azColName)
 {
 &nbsp;&nbsp;&nbsp;int *localcounter = (int *)counter;
 &nbsp;&nbsp;&nbsp;int i;
@@ -386,7 +391,8 @@ static int callback(void *counter, int argc, char **argv, char **azColName)
 
 <p>The <span style="font-family: Courier New,Courier,monospace">SELECT * FROM EncryptedData</span> query where <span style="font-family: Courier New,Courier,monospace">ENCRYPTED=&#39;1&#39;</span> lists all encrypted records. The <span style="font-family: Courier New,Courier,monospace">callbackdecrypt()</span> function is invoked for each record returned by the <span style="font-family: Courier New,Courier,monospace">sqlite3_exec()</span> function. In case of an error, the SQLite API requires releasing error message memory with the <span style="font-family: Courier New,Courier,monospace">sqlite3_free()</span> function.</p>
 <pre class="prettyprint">
-static void DecryptRecords()
+static void 
+DecryptRecords()
 {
 &nbsp;&nbsp;&nbsp;char *sql = &quot;select * from EncryptedData where ENCRYPTED=&#39;1&#39;&quot;;
 &nbsp;&nbsp;&nbsp;int counter = 0;
@@ -412,7 +418,8 @@ static void DecryptRecords()
 <li>Decrypted data is listed</li>
 </ul>
 <pre class="prettyprint">
-static int callbackdecrypt(void *counter, int argc, char **argv, char **azColName)
+static int 
+callbackdecrypt(void *counter, int argc, char **argv, char **azColName)
 {
 &nbsp;&nbsp;&nbsp;unsigned char decrypted_out[BUFLEN];
 &nbsp;&nbsp;&nbsp;int *localcounter = (int *)counter;
@@ -456,7 +463,8 @@ static int callbackdecrypt(void *counter, int argc, char **argv, char **azColNam
 </pre>
 <p>The decryption routine is similar to encryption:</p>
 <pre class="prettyprint">
-static int DecryptMsg(unsigned char* in, unsigned char * out, const unsigned char* password, unsigned char* localsalt, unsigned char* vector)
+static int 
+DecryptMsg(unsigned char* in, unsigned char * out, const unsigned char* password, unsigned char* localsalt, unsigned char* vector)
 {
 &nbsp;&nbsp;&nbsp;AES_KEY decryption_key;
 &nbsp;&nbsp;&nbsp;int iter = (int)vector[0];
@@ -505,7 +513,8 @@ static char encoding_table[] = {&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#3
 static char *decoding_table = NULL;
 static int mod_table[] = {0, 2, 1};
 
-void build_decoding_table()
+void 
+build_decoding_table()
 {
 &nbsp;&nbsp;&nbsp;decoding_table = malloc(256);
 &nbsp;&nbsp;&nbsp;int i;
@@ -569,11 +578,11 @@ unsigned char *base64_decode(const char *data, size_t input_length, size_t *outp
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (j &lt; *output_length) decoded_data[j++] = (triple &gt;&gt; 1 * 8) &amp; 0xFF;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (j &lt; *output_length) decoded_data[j++] = (triple &gt;&gt; 0 * 8) &amp; 0xFF;
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return decoded_data;
 }
 
-void base64_cleanup() 
+void 
+base64_cleanup() 
 {
 &nbsp;&nbsp;&nbsp;free(decoding_table);
 &nbsp;&nbsp;&nbsp;decoding_table = NULL;
@@ -584,7 +593,8 @@ void base64_cleanup()
 <li>Main function source code:
 
 <pre class="prettyprint">
-int OpenSQL_AES_example_1(void)
+int 
+OpenSQL_AES_example_1(void)
 {
 &nbsp;&nbsp;&nbsp;unsigned char decrypted_out[BUFLEN];
 &nbsp;&nbsp;&nbsp;int ret;
diff --git a/org.tizen.tutorials/html/native/content/content_tutorials_n.htm b/org.tizen.tutorials/html/native/content/content_tutorials_n.htm
index 1a42bcb..4aca393 100644
--- a/org.tizen.tutorials/html/native/content/content_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/content/content_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         
diff --git a/org.tizen.tutorials/html/native/content/download_tutorial_n.htm b/org.tizen.tutorials/html/native/content/download_tutorial_n.htm
index 82aa5f9..aff6b12 100644
--- a/org.tizen.tutorials/html/native/content/download_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/content/download_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -39,16 +39,7 @@
   
 <p>This tutorial demonstrates how you can download content asynchronously from a given URL into the device storage.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
 <h2>Warm-up</h2>
 
@@ -108,7 +99,7 @@ error = download_set_file_name(download_id, &quot;downloaded_file.bin&quot;);
 <ul><li>Auto download
 
 <p>To set an automatic download, call the <span style="font-family: Courier New,Courier,monospace;">download_set_auto_download()</span> function passing the download handle and setting the second parameter to <span style="font-family: Courier New,Courier,monospace;">true</span>.</p>
-<p>This operation changes the download manager state so that it continues downloading even after the client process is terminated. Set the notification download option when using this feature, to allow the user to receive the download result when the client process is not alive. </p>
+<p>This operation changes the download manager state so that it continues downloading even after the client process is terminated. Set the notification download option when using this feature to allow the user to receive the download result when the client process is not alive. </p>
 
 <pre class="prettyprint">
 error = download_set_auto_download(download_id, true);
@@ -190,7 +181,8 @@ if (state == DOWNLOAD_STATE_DOWNLOADING)
 </pre></li>
 <li>The received parameter of the <span style="font-family: Courier New,Courier,monospace;">progress_cb()</span> callback function contains the size of the data received in bytes. In this example, print out the value and the total download size.
 <pre class="prettyprint">
-static void progress_cb(int download_id, unsigned long long received, void *user_data)
+static void 
+progress_cb(int download_id, unsigned long long received, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;received: %llu of %llu&quot;, received, *((unsigned long long*)user_data));
 }</pre></li></ol></li>
diff --git a/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm b/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm
index f6ecce1..0dec834 100644
--- a/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>		
@@ -217,6 +217,7 @@
 				<p>Get information about media tags.</p></li>
 				<li><a href="#tag_delete">Deleting Tags</a>
 				<p>Delete tags from the database.</p></li>
+
 			</ul>
 		</li>
         <li>Storage
@@ -282,7 +283,8 @@ media_content_disconnect();
 <ol>
 <li>Register a callback function to get the folder list:
 <pre class="prettyprint">
-bool gallery_folder_list_cb(media_folder_h folder, void *user_data)
+bool 
+gallery_folder_list_cb(media_folder_h folder, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_folder_h new_folder = NULL;
 &nbsp;&nbsp;&nbsp;media_folder_clone(&amp;new_folder, folder);
@@ -303,7 +305,8 @@ GList *folder_list = NULL; // Include glib.h for this value
 media_folder_h folder_handle = NULL;
 
 ret = media_folder_foreach_folder_from_db(filter, gallery_folder_list_cb, &amp;folder_list);
-if (ret != MEDIA_CONTENT_ERROR_NONE) {
+if (ret != MEDIA_CONTENT_ERROR_NONE) 
+{
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;media_folder_foreach_folder_from_db failed: %d&quot;, ret);
 
 &nbsp;&nbsp;&nbsp;return ret;
@@ -354,7 +357,8 @@ else
 <ol>
 <li>Create a callback function to retrieve a media item:
 <pre class="prettyprint">
-bool gallery_media_item_cb(media_info_h media, void *user_data)
+bool 
+gallery_media_item_cb(media_info_h media, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_info_h new_media = NULL;
 &nbsp;&nbsp;&nbsp;media_info_clone(&amp;new_media, media);
@@ -443,11 +447,12 @@ media_filter_destroy(filter);
 <ol>
 <li>Define the database update callback function:
 <pre class="prettyprint">
-void _noti_cb(media_content_error_e error, int pid,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_db_update_item_type_e update_item,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_db_update_type_e update_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_type_e media_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *uuid, char *path, char *mime_type, void *user_data)
+void 
+_noti_cb(media_content_error_e error, int pid,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_db_update_item_type_e update_item,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_db_update_type_e update_type,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_type_e media_type,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *uuid, char *path, char *mime_type, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (error == MEDIA_CONTENT_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
@@ -537,10 +542,12 @@ media_content_unset_db_updated_cb();
 
 <li>Retrieve album information.
 
-<p>Define the callback and retrieve the basic album information (album id, name, the artist name, and the number of media items in the album) in it.</p>
+<p>Define the callback and retrieve the basic album information (album ID, name, the artist name, and the number of media items in the album) in it.</p>
 <p>If the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the iteration continues and the callback is called for the next album, if available. If the value is <span style="font-family: Courier New,Courier,monospace">false</span>, the iteration stops.</p>
 
-<pre class="prettyprint">bool media_album_list_cb(media_album_h album, void *user_data)
+<pre class="prettyprint">
+bool 
+media_album_list_cb(media_album_h album, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
 
@@ -660,7 +667,9 @@ media_album_get_album_id(album, &amp;id);</pre>
 <p>Define the callback in which you can receive and handle the album content.</p>
 <p>As long as the callback returns <span style="font-family: Courier New,Courier,monospace">true</span>, the callback is called for the next item, if available. The iteration stops when the return value is <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
  
-<pre class="prettyprint">bool album_contents_info_cb(media_info_h media, void *user_data)
+<pre class="prettyprint">
+bool 
+album_contents_info_cb(media_info_h media, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
 
@@ -701,7 +710,6 @@ media_album_get_album_id(album, &amp;id);</pre>
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Size: %llu\n&quot;, size);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return true;
 }</pre>
 
@@ -783,9 +791,10 @@ media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);</pre></l
 <li>Set the offset for the filter.
 
 <pre class="prettyprint">media_filter_set_offset(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, // Offset
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3 // Count
-);</pre>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Offset
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Count
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3);</pre>
 
 <p>The count sets the limit on the number of returned bookmarks, and the offset determines which of the found bookmarks counts as the &quot;first&quot;. For example, if you sort the bookmarks in an ascending order and the offset is set to 1, you do not receive the earliest bookmark.</p></li>
 
@@ -810,7 +819,9 @@ media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);</pre></l
 
 <p>To read the bookmark information within a callback after finding the bookmark:</p>
 
-<pre class="prettyprint">bool get_bookmarks_cb(media_bookmark_h bookmark, void* user_data)
+<pre class="prettyprint">
+bool 
+get_bookmarks_cb(media_bookmark_h bookmark, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;char *thumb = NULL;
 
@@ -825,7 +836,6 @@ media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);</pre></l
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_bookmark_get_marked_time(bookmark, &amp;time);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Marked time [s]: %d\n&quot;, (int) time);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return true;
 }</pre>
 <p>The above callback prints the thumbnail path and marked time for each found bookmark.</p>
@@ -1011,8 +1021,11 @@ media_filter_destroy(filter);</pre>
 
 <li>Read folder details within the callback:
 
-<pre class="prettyprint">bool folder_cb(media_folder_h folder, void *user_data)
-{</pre>
+<pre class="prettyprint">
+bool 
+folder_cb(media_folder_h folder, void *user_data)
+{
+</pre>
 
 <p>The return value determines if the iterative calls of the callback continue (<span style="font-family: Courier New,Courier,monospace">true</span>) or are stopped (<span style="font-family: Courier New,Courier,monospace">false</span>).</p>
 
@@ -1188,7 +1201,9 @@ media_filter_destroy(filter);</pre>
 
 <p>The following example prints the title of the media item for which it was called.</p>
 
-<pre class="prettyprint">bool media_cb(media_info_h media, void *user_data)
+<pre class="prettyprint">
+bool 
+media_cb(media_info_h media, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;char *title = NULL;
 
@@ -1204,7 +1219,8 @@ media_filter_destroy(filter);</pre>
 &nbsp;&nbsp;&nbsp;}   
 
 &nbsp;&nbsp;&nbsp;return true;
-}</pre>
+}
+</pre>
 </li>
 </ol>
 
@@ -1237,7 +1253,8 @@ media_filter_destroy(filter);</pre>
 <li>Create a callback function to retrieve a media item:
 
 <pre class="prettyprint">
-bool gallery_media_item_cb(media_info_h media, void *user_data)
+bool 
+gallery_media_item_cb(media_info_h media, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_info_h new_media = NULL;
 &nbsp;&nbsp;&nbsp;media_info_clone(&amp;new_media, media);
@@ -1340,7 +1357,8 @@ else
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_meta_get_burst_id(image_handle, &amp;burst_id);
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;This is an image&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Width : %d, Height : %d, Orientation : %d, Date taken : %s&quot;, width, height, orientation, datetaken);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Width : %d, Height : %d, Orientation : %d, Date taken : %s&quot;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width, height, orientation, datetaken);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (datetaken) free(datetaken);
@@ -1372,7 +1390,8 @@ else
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_played_time(media_handle, &amp;time_played);
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;This is a video&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Title: %s, Album: %s, Artist: %s, Album_artist: %s \n Duration: %d, Played time: %d&quot;, title, album, artist, album_artist, duration, time_played);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Title: %s, Album: %s, Artist: %s, Album_artist: %s \n Duration: %d, Played time: %d&quot;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title, album, artist, album_artist, duration, time_played);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(artist);
@@ -1392,20 +1411,8 @@ else
 &nbsp;&nbsp;&nbsp;}
 }
 </pre></li>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Note that the video_meta_get_played_time () and a few APIs have been <strong>deprecated since Tizen 2.4</strong>.<br />
-To replace video_meta_get_played_time (), use media_info_get_played_time () instead.<br />
-Although the deprecated APIs continue to be available, it is strongly recommended to use new APIs.<br />
-For more information on the deprecated information, please refer to the media content mobile API reference (<a href="../../../../org.tizen.native.mobile.apireference/group_CAPIMEDIA_CONTENT_MODULE.html">link</a>) and the media content wearable API reference (<a href="../../../../org.tizen.native.mobile.apireference/group_CAPIMEDIA_CONTENT_MODULE.html">link</a>)
-</td>
-</tr>
-</tbody>
-</table>
+
+
 <li>When the filter is no longer used, destroy the list, filter, and query:
 
 <pre class="prettyprint">
@@ -1496,7 +1503,8 @@ if (ret != MEDIA_CONTENT_ERROR_NONE)
 <p>You also need the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span> or <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span> privilege, since when you insert metadata, the media content APIs access content in the internal or external storage.</p></li>
 <li>As scanning works asynchronously, you must a callback function:
 <pre class="prettyprint">
-void _scan_cb(media_content_error_e err, void *user_data)
+void 
+_scan_cb(media_content_error_e err, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Folder scanned\n&quot;);
 
@@ -1588,7 +1596,9 @@ media_playlist_update_to_db(playlist);</pre></li>
 
 <li><p>In the callback function, cast the user data to a proper type and copy the media ID:</p>
 
-<pre class="prettyprint">bool _media_info_cb(media_info_h media, void *user_data)
+<pre class="prettyprint">
+bool 
+_media_info_cb(media_info_h media, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;char *data = NULL;
 &nbsp;&nbsp;&nbsp;char *id = NULL;
@@ -1605,9 +1615,9 @@ media_playlist_update_to_db(playlist);</pre></li>
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(id);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return true;
-}</pre></li></ol></li>
+}
+</pre></li></ol></li>
 
 
 
@@ -1625,7 +1635,9 @@ media_playlist_foreach_playlist_from_db(NULL, playlist_list_cb,  NULL);
 <li>Handle the found records.
 
 <ol type="a"><li><p>When a record is found, a callback function is invoked. A handle to the record is passed as a playlist function parameter.</p> 
-<pre class="prettyprint">static bool playlist_list_cb(media_playlist_h playlist, void* user_data) 
+<pre class="prettyprint">
+static bool 
+playlist_list_cb(media_playlist_h playlist, void* user_data) 
 {
 &nbsp;&nbsp;&nbsp;char *name = NULL;
 &nbsp;&nbsp;&nbsp;int playlist_id = 0;
@@ -1662,14 +1674,17 @@ media_playlist_foreach_playlist_from_db(NULL, playlist_list_cb,  NULL);
 &nbsp;&nbsp;&nbsp;media_filter_destroy(temp_filter);
 
 &nbsp;&nbsp;&nbsp;return true;
-}</pre></li>
+}
+</pre></li>
 
 <li><p>The callback function operates on the records the same way as before. To get the media info, use the following functions:</p>
 <ul><li><span style="font-family: Courier New,Courier,monospace;">media_info_get_audio()</span></li>
 <li><span style="font-family: Courier New,Courier,monospace;">media_info_get_media_id()</span></li>
 <li><span style="font-family: Courier New,Courier,monospace;">media_info_get_size()</span></li></ul>
 
-<pre class="prettyprint">static bool audio_list_cb(int playlist_member_id, media_info_h media_hndl, void *user_data) 
+<pre class="prettyprint">
+static bool 
+audio_list_cb(int playlist_member_id, media_info_h media_hndl, void *user_data) 
 {
 &nbsp;&nbsp;&nbsp;char * id;
 &nbsp;&nbsp;&nbsp;media_info_get_media_id(media_hndl, &amp;id);
@@ -1677,7 +1692,8 @@ media_playlist_foreach_playlist_from_db(NULL, playlist_list_cb,  NULL);
 &nbsp;&nbsp;&nbsp;free(id);
 
 &nbsp;&nbsp;&nbsp;return true;
-}</pre></li></ol></li>
+}
+</pre></li></ol></li>
 
 
 <li>Clean up.
@@ -1705,29 +1721,28 @@ media_content_disconnect();</pre></li></ol>
 
 <pre class="prettyprint">media_content_disconnect();</pre>
 
- <h2 id="tag_add" name="tag_add">Adding Tags</h2>
+
+	<h2 id="tag_add" name="tag_add">Adding Tags</h2>
+	
 <p>To add a tag to the database, and add a file to the tag:</p>
 <ol>
 <li>Add the tag.
-<p>Use <span style="font-family: Courier New,Courier,monospace;">media_tag_insert_to_db()</span> to add the tag. The result is a handle to the new tag.</p>
-<pre>
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">media_tag_insert_to_db()</span> function to add the tag. The result is a handle to the new tag.</p>
+<pre class="prettyprint">
 media_tag_h tag = NULL;
-const char *tag_name = "Tag name";
+const char *tag_name = &quot;Tag name&quot;;
 
 media_tag_insert_to_db(tag_name, &amp;tag);
 </pre>
 </li>
 
 <li>Insert a media item into the tag.
-<p>
-To insert an item into the tag, you need to know the id of the item.
-One of the ways of obtaining the id is to insert a media item into the database.
-In the example below, a media file is inserted and then added to the tag.</p>
-<pre>
+<p>To insert an item into the tag, you need to know the ID of the item. One way of obtaining the ID is to insert a media item into the database. In the following example, a media file is inserted and then added to the tag.</p>
+<pre class="prettyprint">
 media_info_h image_info = NULL;
 char *image_id = NULL;
 
-media_info_insert_to_db("path/to/image_file", &amp;image_info);
+media_info_insert_to_db(&quot;path/to/image_file&quot;, &amp;image_info);
 
 media_info_get_media_id(image_info, &amp;image_id);
 
@@ -1736,17 +1751,18 @@ media_tag_add_media(tag, image_id);
 </li>
 
 <li>Update the tag.
-<p>After you make any changes to the tag, like change its name or add items, you need to update it.</p>
-<pre>
+<p>After you make any changes to the tag, such as changing its name or adding items, you need to update it.</p>
+<pre class="prettyprint">
 media_tag_update_to_db(tag);
 </pre>
 </li>
 
-<li>Destroy the tag handle.</li>
-<p>After the tag has been inserted into the database and all updates to it have been made, you can destroy the handle. Note that this is not related to deleting the tag from the database.</p>
-<pre>
+<li>Destroy the tag handle.
+<p>After the tag has been inserted into the database and all updates to it have been made, destroy the handle. Note that this is not related to deleting the tag from the database.</p>
+<pre class="prettyprint">
 media_tag_destroy(tag);
 </pre>
+</li>
 </ol>
 
 
@@ -1759,7 +1775,8 @@ media_tag_destroy(tag);
 <pre class="prettyprint">
 // glib library is used, so include glib.h
 
-bool gallery_tag_item_cb(media_tag_h tag, void *user_data)
+bool 
+gallery_tag_item_cb(media_tag_h tag, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_tag_h new_tag = NULL;
 &nbsp;&nbsp;&nbsp;media_tag_clone(&amp;new_tag, tag);
@@ -1770,7 +1787,8 @@ bool gallery_tag_item_cb(media_tag_h tag, void *user_data)
 &nbsp;&nbsp;&nbsp;return true;
 }
 
-bool gallery_media_item_cb(media_info_h media, void *user_data)
+bool 
+gallery_media_item_cb(media_info_h media, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_info_h new_media = NULL;
 &nbsp;&nbsp;&nbsp;media_info_clone(&amp;new_media, media);
@@ -1857,13 +1875,15 @@ else
 </pre></li>
 </ol>
 
- <h2 id="tag_delete" name="tag_delete">Deleting Tags</h2>
-<p>Deleting a tag requires its id. In the example below, the id is obtained by calling <span style="font-family: Courier New,Courier,monospace;">media_tag_foreach_tag_from_db()</span>.</p>
+	<h2 id="tag_delete" name="tag_delete">Deleting Tags</h2>
+	
+<p>To delete a tag, you need its ID. In the following example, the ID is obtained by calling the <span style="font-family: Courier New,Courier,monospace;">media_tag_foreach_tag_from_db()</span> function.</p>
 <ol>
 <li>Define the callback.
-<p>Define the callback called for each found tag. The callback will add the handle of each tag to the tag list.</p>
-<pre>
-bool gallery_tag_item_cb(media_tag_h tag, void *user_data)
+<p>Define the callback called for each found tag. The callback adds the handle of each tag to the tag list.</p>
+<pre class="prettyprint">
+bool 
+gallery_tag_item_cb(media_tag_h tag, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_tag_h new_tag = NULL;
 
@@ -1876,17 +1896,18 @@ bool gallery_tag_item_cb(media_tag_h tag, void *user_data)
 </pre>
 </li>
 <li>Find tags.
-<p>Call <span style="font-family: Courier New,Courier,monospace;">media_tag_foreach_tag_from_db()</span> to find tags in the database. The first parameter is a filter; if NULL, all tags are found. The second parameter is the callback, called for each found tag. The third parameter is data passed to the callback in each iteration. In this example it is a list of tag handles.</p>
-<pre>
+<p>Call the <span style="font-family: Courier New,Courier,monospace;">media_tag_foreach_tag_from_db()</span> function to find tags in the database. The first parameter is a filter; if <span style="font-family: Courier New,Courier,monospace;">NULL</span>, all tags are found. The second parameter is the callback, called for each found tag. The third parameter is data passed to the callback in each iteration. In this example, it is a list of tag handles.</p>
+<pre class="prettyprint">
 GList *tag_list = NULL;
 
 media_tag_foreach_tag_from_db(NULL, gallery_tag_item_cb, &amp;tag_list);
 </pre>
+</li>
 
 <li>Iterate through the tag list.
 <p>After the list is completed, access each element:</p>
 
-<pre>
+<pre class="prettyprint">
 media_tag_h tag_handle = NULL;
 int tag_id;
 char *tag_name = NULL;
@@ -1900,8 +1921,8 @@ for (i = 0; i &lt; len; i++)
 </pre>
 </li>
 <li>Delete the tag.
-<p>Provided that you have the tag handle, get the tag id with <span style="font-family: Courier New,Courier,monospace;">media_tag_get_tag_id()</span> and delete the tag with <span style="font-family: Courier New,Courier,monospace;">media_tag_delete_from_db()</span>.</p>
-<pre>
+<p>Provided that you have the tag handle, get the tag ID with the <span style="font-family: Courier New,Courier,monospace;">media_tag_get_tag_id()</span> function and delete the tag with the <span style="font-family: Courier New,Courier,monospace;">media_tag_delete_from_db()</span> function.</p>
+<pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;ret = media_tag_get_tag_id(tag_handle, &amp;tag_id);
 
 &nbsp;&nbsp;&nbsp;ret = media_tag_delete_from_db(tag_id);
@@ -1910,19 +1931,18 @@ for (i = 0; i &lt; len; i++)
 
 <li>Destroy the tag handle.
 <p>Now that the handle is no longer needed, it can be destroyed:</p>
-<pre>
+<pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;ret = media_tag_destroy(tag_handle);
 }
 </pre>
 </li>
 <li>Free the tag list.
 <p>After all elements have been accessed, free the tag handle list:</p>
-<pre>
+<pre class="prettyprint">
 g_list_free(tag_list);
 tag_list = NULL;
 </pre>
 </li>
-
 </ol>
 
 
@@ -1952,7 +1972,8 @@ tag_list = NULL;
 <ol>
 <li>Define callback functions:
 <pre class="prettyprint">
-void storage_cb(media_storage_h storage, void *user_data)
+void 
+storage_cb(media_storage_h storage, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_storage_h new_storage = NULL;
 &nbsp;&nbsp;&nbsp;media_storage_clone(&amp;new_storage, storage);
@@ -2039,7 +2060,8 @@ media_group_foreach_group_from_db(NULL, group, group_cb, (void *) group);
 <p>To find all items in the group, call the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_media_from_db()</span> function. The parameters are similar to those in the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_media_from_db()</span> function. The <span style="font-family: Courier New,Courier,monospace;">media_cb()</span> callback is called for each found item.</p>
 
 <pre class="prettyprint">
-bool group_cb(const char *name, void *user_data)
+bool 
+group_cb(const char *name, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
 &nbsp;&nbsp;&nbsp;media_group_e group = (media_group_e) user_data;
@@ -2060,7 +2082,8 @@ bool group_cb(const char *name, void *user_data)
 <li>Define the <span style="font-family: Courier New,Courier,monospace;">media_cb()</span> callback to handle each found item:
 
 <pre class="prettyprint">
-bool media_cb(media_info_h media, void *user_data)
+bool 
+media_cb(media_info_h media, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
 &nbsp;&nbsp;&nbsp;char *name = NULL;
@@ -2076,6 +2099,7 @@ bool media_cb(media_info_h media, void *user_data)
 }
 </pre></li></ol></li></ol>
 
+
  <h2 id="filter_groups" name="filter_groups">Finding Media Item Groups Using a Filter</h2>
 
 <p>To find groups containing only items matching the given criteria:</p>	
@@ -2091,7 +2115,7 @@ media_filter_create(&amp;filter);
 </pre></li>
 
 <li><p>Set the filter condition. The condition is a string used in a SQL query. </p>
-<p>The following example searches for files containing &#39;.jpg&#39; in their name. The &#39;%&#39; characters in the query act as wildcards. Also, they should be escaped using another &#39;%&#39; character to avoid compiler warnings.</p>
+<p>The following example searches for files containing &#39;.jpg&#39; in their name. The &#39;%&#39; characters in the query act as wildcards. Also, they must be escaped using another &#39;%&#39; character to avoid compiler warnings.</p>
 
 <pre class="prettyprint">
 #define BUFLEN 200 // This is just an example
diff --git a/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm b/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm
index 3eb2258..2ff0c7b 100644
--- a/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm b/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm
index 6ddb43f..781a0ef 100644
--- a/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -72,7 +72,10 @@ activity_start_recognition(handle, ACTIVITY_WALK, example_activity_callback, NUL
 </li>
 
 <li>When the <span style="font-family: Courier New,Courier,monospace;">example_activity_callback()</span> callback is invoked, the current activity is delivered as a parameter, and you can extract the accuracy of the recognized activity:
-<pre class="prettyprint">void example_activity_callback(activity_type_e activity, const activity_data_h data, double timestamp, activity_error_e error, void *user_data)
+<pre class="prettyprint">
+void 
+example_activity_callback(activity_type_e activity, const activity_data_h data, 
+&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;double timestamp, activity_error_e error, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;int result;
 
diff --git a/org.tizen.tutorials/html/native/context/context_tutorials_n.htm b/org.tizen.tutorials/html/native/context/context_tutorials_n.htm
index 126c4d7..7f39ce3 100644
--- a/org.tizen.tutorials/html/native/context/context_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/context/context_tutorials_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
        
diff --git a/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm b/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm
index 05b91e3..9b6903c 100644
--- a/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -74,7 +74,9 @@ gesture_create(&amp;handle);</pre></li>
 
 <li><p>When the <span style="font-family: Courier New,Courier,monospace;">gesture_cb()</span> callback function is invoked, you can retrieve the event data using the <span style="font-family: Courier New,Courier,monospace;">gesture_get_event()</span> function:</p>
 
-<pre class="prettyprint">void gesture_cb(gesture_type_e gesture, const gesture_data_h data, double timestamp, gesture_error_e error, void *user_data)
+<pre class="prettyprint">
+void 
+gesture_cb(gesture_type_e gesture, const gesture_data_h data, double timestamp, gesture_error_e error, void *user_data)
 {			
 &nbsp;&nbsp;&nbsp;gesture_event_e event;
 &nbsp;&nbsp;&nbsp;if (gesture == GESTURE_PICK_UP) 
@@ -86,7 +88,8 @@ gesture_create(&amp;handle);</pre></li>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
-}</pre>
+}
+</pre>
 
 <p>If the application registered multiple gestures to a single callback function, the input parameter gesture can be used to distinguish the gesture received.</p>
 <p>Some gestures can return different types of events. For example, <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE</span> can return <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE_DETECTED</span> or <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE_FINISHED</span>.</p>
diff --git a/org.tizen.tutorials/html/native/context/history_tutorial_n.htm b/org.tizen.tutorials/html/native/context/history_tutorial_n.htm
index e5a28e7..b23e400 100644
--- a/org.tizen.tutorials/html/native/context/history_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/context/history_tutorial_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -39,16 +39,7 @@
 
 <p>This tutorial demonstrates how you can get the history profiles of the device usage, and enumerate retrieved data lists.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
 <h2>Warm-up</h2>
 <p>Become familiar with the Contextual History API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/native/context/trigger_tutorial_n.htm b/org.tizen.tutorials/html/native/context/trigger_tutorial_n.htm
index 9881285..029d2ff 100644
--- a/org.tizen.tutorials/html/native/context/trigger_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/context/trigger_tutorial_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -47,16 +47,7 @@
 
   <p>This tutorial demonstrates how you can compose and manage rules based on context states.</p>
   
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
   <h2>Warm-up</h2>
   <p>Become familiar with the Contextual Trigger API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm
index b47cf1d..5760d58 100644
--- a/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/><br/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/><br/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -72,7 +72,8 @@ Build the environment.
 <p>Define the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure that contains the pointers to the objects to be manipulated:</p>
 
 <pre class="prettyprint">
-typedef struct appdata 
+typedef struct 
+appdata 
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *win;	
 &nbsp;&nbsp;&nbsp;Evas_Object *img;
@@ -108,7 +109,8 @@ ad-&gt;cairo = cairo_create(ad-&gt;surface);
 <li>To draw Cairo with some specific vector positions, use the window size that you got before. You can compare the window width and height and get the smaller length to set the square side.
 
 <pre class="prettyprint">
-void cairo_drawing(void *data)
+void 
+cairo_drawing(void *data)
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 &nbsp;&nbsp;&nbsp;int d = 0;
@@ -162,11 +164,12 @@ void cairo_drawing(void *data)
 }
 </pre></li>
 
-<li>The delete callback is triggered when the Window is destroyed from the main loop.
+<li>The delete callback is triggered when the window is destroyed from the main loop.
 
 
 <pre class="prettyprint">
-static void win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+static void 
+win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 &nbsp;&nbsp;&nbsp;cairo_surface_destroy(ad-&gt;surface);
@@ -246,7 +249,8 @@ cairo_gl_device_set_thread_aware(ad-&gt;cairo_device, 0);
 </pre></li></ul>
 
 <pre class="prettyprint">
-static void init_cairo_evasgl_drawing(appdata_s *ad)
+static void 
+init_cairo_evasgl_drawing(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp;// Create window
 &nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);
@@ -301,7 +305,8 @@ static void init_cairo_evasgl_drawing(appdata_s *ad)
 <li>Draw geometrical figures in the <span style="font-family: Courier New,Courier,monospace">cairo_drawing()</span> callback function. 
 <p>The following code snippet shows how to draw some geometrical figures such as a triangle, rectangle, and circle with various styles and random positions by using the Cairo APIs.</p>
 <pre class="prettyprint">
-void cairo_drawing(void *data)
+void 
+cairo_drawing(void *data)
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 
@@ -385,9 +390,10 @@ void cairo_drawing(void *data)
 </pre></li>
   
 <li>Resize the callback.
-<p>In the following code snippet, when resizing occurs, Evas GL surface is recreated and reconnected to the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image.</p>
+<p>In the following code snippet, when resizing occurs, Evas_GL surface is recreated and reconnected to the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image.</p>
 <pre class="prettyprint">
-static void win_resize_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+static void 
+win_resize_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 
@@ -428,7 +434,8 @@ static void win_resize_cb(void *data, Evas *e , Evas_Object *obj , void *event_i
 <p>To update the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image which is connected to Evas_GL, use the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function. This updates the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image whenever Evas renders.</p>
 
 <pre class="prettyprint">
-static Eina_Bool _animate_cb(void *data)
+static Eina_Bool 
+_animate_cb(void *data)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *obj = (Evas_Object *)data;
 &nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(obj, EINA_TRUE);
@@ -438,9 +445,10 @@ static Eina_Bool _animate_cb(void *data)
 </pre>
 </li>
 
-<li>The delete callback is triggered when the Window is destroyed from the main loop.
+<li>The delete callback is triggered when the window is destroyed from the main loop.
 <pre class="prettyprint">
-static void win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+static void 
+win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 &nbsp;&nbsp;&nbsp;cairo_surface_destroy(ad-&gt;surface);
diff --git a/org.tizen.tutorials/html/native/graphics/graphic_comp_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/graphic_comp_tutorial_n.htm
index e94580c..ffeba9f 100644
--- a/org.tizen.tutorials/html/native/graphics/graphic_comp_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/graphics/graphic_comp_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm b/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm
index 1aae492..4839283 100644
--- a/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		
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 e6405b2..f1f0d9f 100644
--- a/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -90,9 +90,13 @@
 
 <h2 id="basic" name="basic">Creating the Basic Application</h2>
 
-<p>This tutorial demonstrates how you can create a multicolored 3D rotating cube using OpenGL ES 2.0 API provided by GLView library. Several concepts are explained, such as the cube geometry, the initialization phase of the model, the adjustment of this very model frame by frame, and the way to design the OpenGL ES rendering loop.</p>
-<p>First create a basic application as explained in the Basic application tutorial. This provides a basic UI application skeleton which already makes available the window object that contains the GLView  canvas.</p>
-<h3>Building the Environment</h3>
+<p>This tutorial demonstrates how you can create a multicolored 3D rotating cube using the OpenGL ES 2.0 API provided by the GLView library. Several concepts are explained, such as the cube geometry, the initialization phase of the model, the adjustment of this very model frame by frame, and the way to design the OpenGL ES rendering loop.</p>
+<p>To create the basic application:</p>
+<ol>
+<li><p>Create a basic application as explained in the Basic application tutorial. The basic UI application skeleton already makes available the window object that contains the GLView canvas.</p>
+</li>
+<li>Build the environment:
+
 <p>Define the application data structure that holds all the objects pertinent for the GLView application:</p>
 <ul>
 <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *win</span>: Application window</li>
@@ -102,7 +106,8 @@
 <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *inner_box</span>: Box object for toolbox</li>
 </ul>
 <pre class="prettyprint">
-typedef struct appdata 
+typedef struct 
+appdata 
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *win;
 &nbsp;&nbsp;&nbsp;Evas_Object *conform;
@@ -111,98 +116,114 @@ typedef struct appdata
 &nbsp;&nbsp;&nbsp;Evas_Object *main_box;
 &nbsp;&nbsp;&nbsp;Evas_Object *inner_box;
 } appdata_s;
-</pre>
-
-<h3>OpenGL ES Canvas</h3>
+</pre></li>
 
-<p>When developing an application with Elementary, you can create a window by using the Elementary utility function as below:</p>
+<li>
 
+<p>Create the OpenGL ES canvas:</p>
+<ol type="a">
+<li>
+<p>When developing an application with Elementary, you can create a window by using the Elementary utility function:</p>
 <pre class="prettyprint">
 elm_config_accel_preference_set(&quot;opengl&quot;); 
 ad-&gt;win = elm_win_util_standard_add(&quot;GLView Example&quot;, &quot;GLView Example&quot;);</pre>
-
-<p>To develop a GL application, you have to call <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> before creating a window which makes an application to use GPU.</p>
-
+</li>
+<li>
+<p>To develop a GL application, you have to call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating a window which makes an application to use the GPU.</p>
 <pre class="prettyprint">
 ad-&gt;glview = elm_glview_add(ad-&gt;main_box);</pre>
 
-<p>There are 2 different methods to call GL functions.</p>
-
-<ul><li>First is to use Elementary GL Helper functions. You have to include <span style="font-family: Courier New,Courier,monospace">Elementary_GL_Helpers.h</span> and define a global variable by using <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span>. Before calling gl functions, write <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE()</span>. This tutorial uses this method. The usage is as follows.
+<p>There are 2 different methods to call the GL functions:</p>
 
+<ul><li>Use the Elementary GL Helper functions. You have to include the <span style="font-family: Courier New,Courier,monospace">Elementary_GL_Helpers.h</span> header file and define a global variable using the <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span> function. Before calling the gl functions, write the <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE()</span> function. This tutorial uses this method.
 <pre class="prettyprint">
 #include &lt;Elementary_GL_Helpers.h&gt;
 ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
 
-static void create_gl_canvas(appdata_s *ad) 
+static void 
+create_gl_canvas(appdata_s *ad) 
 {
 &nbsp;&nbsp;&nbsp;ad-&gt;glview = elm_glview_add(ad-&gt;main_box);
 &nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(ad-&gt;glview);
 }
 
-static void draw_gl(Evas_Object *obj) 
+static void 
+draw_gl(Evas_Object *obj) 
 { 
 &nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 }</pre></li>
 
-<li><p>Second, you can get the Evas_GL instance from <span style="font-family: Courier New,Courier,monospace">elm_glview_gl_api_get</span> function, then you can call the OpenGL ES functions with the instance.</p>
+<li><p>Get the Evas_GL instance from the <span style="font-family: Courier New,Courier,monospace">elm_glview_gl_api_get()</span> function, and call the OpenGL ES functions with the instance.</p>
 
 <pre class="prettyprint">
 ad-&gt;glview = elm_glview_add(ad-&gt;main_box);
 Evas_GL_API *glapi = elm_glview_gl_api_get(ad-&gt;glview);
 glapi-&gt;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);</pre></li></ul>
-
-<p>The next thing to do is to set the GLView mode. <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set(Evas_Object *obj, Elm_GLView_Mode mode)</span> supports alpha, depth, stencil, MSAA, and client_side_rotation.</p>
+</li>
+<li>
+<p>Set the GLView mode. The <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function supports alpha, depth, stencil, MSAA, and client_side_rotation.</p>
 
 <pre class="prettyprint">
 elm_glview_mode_set(ad-&gt;glview, ELM_GLVIEW_DEPTH);</pre>
-
-<p>To set up callbacks:</p>
-
-<pre class="prettyprint">
-elm_glview_init_func_set(ad-&gt;glview, init_gl);
-elm_glview_resize_func_set(ad-&gt;glview, resize_gl);
-elm_glview_render_func_set(ad-&gt;glview, draw_gl);
-elm_glview_del_func_set(ad-&gt;glview, del_gl);
-ani = ecore_animator_add(animate_cb, ad-&gt;glview);</pre>
-
+</li>
+<li>
+<p>Set up callbacks:</p>
 <ul>
 	<li>Callback for initialization
 	<p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface have been created. This is called from the main loop, just as the 3 other callbacks.</p>
+	<pre class="prettyprint">
+elm_glview_init_func_set(ad-&gt;glview, init_gl);
+</pre>
 	</li>
 	<li>Callback for resizing
 	<p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport.</p>
+	<pre class="prettyprint">
+elm_glview_resize_func_set(ad-&gt;glview, resize_gl);
+</pre>
 	</li>
 	<li>Callback for drawing
-	<p>The drawing callback is called whenever a new frame has to be drawn. The exact moment when this function is called depends on the policy set when calling.</p>
+	<p>The drawing callback is called whenever a new frame has to be drawn.</p>
+	<pre class="prettyprint">
+elm_glview_render_func_set(ad-&gt;glview, draw_gl);
+</pre>
+	<p>The exact moment when this function is called depends on the policy set when calling.</p>
 
 	<pre class="prettyprint">
 elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
 
-	<p>Another policy is ELM_GLVIEW_POLICY_ALWAYS, which requests render always even when it is not visible. So on demand policy is probably what you are looking for. The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created. Here it covers the whole window.</p>
+	<p>Another policy is <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_POLICY_ALWAYS</span>, which requests render always even when it is not visible. So on demand policy is probably what you are looking for. The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created. Here it covers the whole window.</p>
 	</li>
 	<li>Callback for deleting
 	<p>The delete callback is triggered when the GLView is being destroyed, from the main loop, and no other callback can be called on the same object afterwards.</p>
+	<pre class="prettyprint">
+elm_glview_del_func_set(ad-&gt;glview, del_gl);
+</pre>
 	</li>
 	<li>Add an animator.
-	<p>The application above is technically working but the scene does not get updated unless the object is marked as such. Games might want to use an animator to have a regular update of the scene.</p>
+	<p>The application above is technically working but the scene does not get updated unless the object is marked as such. Games want to use an animator to have a regular update of the scene.</p>
+	<pre class="prettyprint">
+ani = ecore_animator_add(animate_cb, ad-&gt;glview);</pre>
 
 	<p>Any other event can be used to refresh the view, for example user input if the view needs to be updated.</p>
 	</li>
 </ul>
-
+</li>
+</ol>
+</li>
+</ol>
 
 <h2 id="cube" name="cube">Creating the Cube</h2>
 
-<p>Creating and the coloring the cube can be separated into two distinct tasks: define the vertices and then add the colors to the faces.</p>
-
+<p>Creating and the coloring the cube can be separated into 2 distinct tasks: define the vertices and then add the colors to the faces.</p>
+<p>To create and color the cube:</p>
 
   <p class="figure">Figure: Cube</p> 
   <p align="center"><img alt="Cube" src="../../images/cube.png" /></p>
 
-
-<p>Declare an array that stores the vertices of the cube in order to make it look like the drawing above.</p>
- <pre class="prettyprint">static const float vertices[] =
+<ol>
+<li><p>Declare an array that stores the vertices of the cube to make it look like the drawing above.</p>
+ <pre class="prettyprint">
+static const float vertices[] =
 {
 &nbsp;&nbsp;&nbsp;// Front
 &nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
@@ -252,8 +273,10 @@ elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
   <p class="figure">Figure: Cube matrix</p> 
   <p align="center"><img alt="Cube matrix" src="../../images/cube_matrix.png" /></p>
 
-<p>Each triangle is defined with three point coordinates, three vertices for each triangle, two triangles per face and six faces, so there are 36 vertices is total.</p>
-<p>The next step is to specify a color for each face of the cube. Each color is represented in the RGBA format for the corresponding vertex, where each component is ranged from 0 to 1 where 1 is the maximum value. For example, in 32-byte color space, the RGB color of (16, 147, 237) is translated as (0.0625, 0.57421875, 0.92578125). The A of RGBA stands for the alpha channel, which represents the transparency of the color. All colors defined in this tutorial are opaque to make it simpler, so each alpha value is set to 1.0. In this example, different variants of blue are used for the faces of the cube.</p>
+<p>Each triangle is defined with 3 point coordinates, 3 vertices for each triangle, 2 triangles per face and 6 faces. There are 36 vertices is total.</p>
+</li>
+<li>
+<p>Specify a color for each face of the cube. Each color is represented in the RGBA format for the corresponding vertex, where each component is ranged from 0 to 1 where 1 is the maximum value. For example, in 32-byte color space, the RGB color of (16, 147, 237) is translated as (0.0625, 0.57421875, 0.92578125). The A of RGBA stands for the alpha channel, which represents the transparency of the color. All colors defined in this tutorial are opaque to make it simpler, so each alpha value is set to 1.0. In this example, different variants of blue are used for the faces of the cube.</p>
 <p>Specify the colors of the cube into an array dedicated to this vertex:</p>
 <pre class="prettyprint">static const float colors[] =
 {
@@ -301,12 +324,17 @@ elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
 &nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f
 };
 </pre>
+</li>
+</ol>
 
 <h2 id="draw" name="draw">Drawing the Cube with GLView</h2>
 
-<h3>Mathematical Functions for Matrices</h3>
-<p>After the model is initialized, create functionality to manipulate the scene. OpenGL ES 2.0 provided by GLView  requires more preliminary work that the previous version of the library, but  gives more power and flexibility, although our example does not take much benefit.</p>
-<p>First, declare additional global variables for tasks specific to OpenGL ES 2.0. A program object is needed, an identifier for the vertices buffer and another for the colors. Three variables are also required to ensure the connection with the shader language:</p>
+<p>After the model is initialized, create functionality to manipulate the scene. OpenGL ES 2.0 provided by GLView requires more preliminary work that the previous version of the library, but it gives you more power and flexibility, although this example does not take much benefit.</p>
+<p>To draw the cube with GLView and use mathematical functions for matrices:</p>
+
+<ol>
+<li>
+<p>Declare additional global variables for tasks specific to OpenGL ES 2.0. A program object is needed, an identifier for the vertices buffer, and another for the colors. Three variables are also required to ensure the connection with the shader language:</p>
 <ul>
 <li><span style="font-family: Courier New,Courier,monospace">mvpLoc</span> is an identifier for model-view-projection matrix.</li>
 <li><span style="font-family: Courier New,Courier,monospace">positionLoc</span> is an identifier for the vertex position.</li>
@@ -315,21 +343,23 @@ elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
 <p>Declare all these variables in the appdata object as static variables so that each function can use variables and that they exist for the whole duration of the program.</p>
 <pre class="prettyprint">typedef struct appdata 
 {
-&nbsp;&nbsp;&nbsp;unsigned int     program;
-&nbsp;&nbsp;&nbsp;unsigned int     vtx_shader;
-&nbsp;&nbsp;&nbsp;unsigned int     fgmt_shader;
-&nbsp;&nbsp;&nbsp;unsigned int     vertexID;
-&nbsp;&nbsp;&nbsp;unsigned int     colorID;
-&nbsp;&nbsp;&nbsp;unsigned int     mvpLoc;
-&nbsp;&nbsp;&nbsp;unsigned int     positionLoc;
-&nbsp;&nbsp;&nbsp;unsigned int     colorLoc;
+&nbsp;&nbsp;&nbsp;unsigned int program;
+&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
+&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;
+&nbsp;&nbsp;&nbsp;unsigned int vertexID;
+&nbsp;&nbsp;&nbsp;unsigned int colorID;
+&nbsp;&nbsp;&nbsp;unsigned int mvpLoc;
+&nbsp;&nbsp;&nbsp;unsigned int positionLoc;
+&nbsp;&nbsp;&nbsp;unsigned int colorLoc;
 }
 </pre>
-<p>Since OpenGL ES 2.0, some functions for matrix transformations have been removed. Define three matrices to use: projection matrix, model-view matrix, and a combination of these allows you to perform any transformations on the initial vertices matrix.</p>
-
-<h4>Matrix Multiplication Function (glMultMatrix)</h4>
-<p>First, define a function that is able to return the inner  product of two matrices. This function reproduces the behavior of <span style="font-family: Courier New,Courier,monospace">glMultMatrix()</span> available in OpenGL ES 1.1. This function is very useful since almost every matrix transformation can be translated as multiplications of matrices.</p>
-<p>The function takes three arguments, one is for the result and the other 2 matrices are operands:</p>
+</li>
+<li>
+<p>Since OpenGL ES 2.0, some functions for matrix transformations have been removed. Define 3 matrices to use: projection matrix, model-view matrix, and a combination of these allows you to perform any transformations on the initial vertices matrix.</p>
+<ul>
+<li>Create the matrix multiplication function.
+<p>Define a function that is able to return the inner product of 2 matrices. This function reproduces the behavior of the <span style="font-family: Courier New,Courier,monospace">glMultMatrix()</span> function available in OpenGL ES 1.1. This function is very useful since almost every matrix transformation can be translated as multiplications of matrices.</p>
+<p>The function takes 3 parameters, 1 is for the result and the other 2 matrices are operands.</p>
 <pre class="prettyprint">static void
 customMutlMatrix(float matrix[16], const float matrix0[16], const float matrix1[16])
 {
@@ -348,9 +378,9 @@ customMutlMatrix(float matrix[16], const float matrix0[16], const float matrix1[
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;matrix[i] = temp[i];
 }
 </pre>
-<h4>Matrix Identity Function (glLoadIdentity)</h4>
-
-<p>Implement a function equivalent to <span style="font-family: Courier New,Courier,monospace">glLoadIdentity()</span> that replaces the current matrix with the identity matrix:</p>
+</li>
+<li>Create the matrix identity function.
+<p>Implement a function equivalent to the <span style="font-family: Courier New,Courier,monospace">glLoadIdentity()</span> function that replaces the current matrix with the identity matrix.</p>
 <pre class="prettyprint">const float unit_matrix[] = 
 {
 &nbsp;&nbsp;&nbsp;1.0f, 0.0f, 0.0f, 0.0f,
@@ -366,14 +396,14 @@ customLoadIdentity(float matrix[16])
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;matrix[i] = unit_matrix[i];
 }
 </pre>
-
-<h4>Matrix Projection Function (glFrustum)</h4>
-<p>Since <span style="font-family: Courier New,Courier,monospace">glFrustum</span> has been depreciated, implement a function that produces perspective projection matrices that are used to transform from eye coordinate space to clip coordinate space. This matrix projects a portion of the space (the &quot;fustum&quot;) to your screen. Many caveats apply (normalized device coordinates, perspective divide, etc), but that is the idea:</p>
+</li>
+<li>Create the matrix projection function.
+<p>Since the <span style="font-family: Courier New,Courier,monospace">glFrustum()</span> function has been deprecated, implement a function that produces perspective projection matrices that are used to transform from eye coordinate space to clip coordinate space. This matrix projects a portion of the space (the &quot;frustum&quot;) to your screen. Many caveats apply (such as normalized device coordinates and perspective divide), but that is the idea.</p>
 <pre class="prettyprint">static int
 customFrustum(float result[16], 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float left,   const float right, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float left, const float right, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float bottom, const float top, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float near,   const float far)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float near, const float far)
 {
 &nbsp;&nbsp;&nbsp;if ((right - left) == 0.0f || (top - bottom) == 0.0f || (far - near) == 0.0f) 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
@@ -401,9 +431,9 @@ customFrustum(float result[16],
 &nbsp;&nbsp;&nbsp;return 1;
 }
 </pre>
-
-<h4>Matrix Scaling Function (glScale)</h4>
-<p>Depreciated <span style="font-family: Courier New,Courier,monospace">glScale()</span> function represents  a non-uniform scaling along the x, y, and z axes. The three parameters indicate the desired scale factor along each of the three axes:</p>
+</li>
+<li>Create the matrix scaling function.
+<p>The deprecated <span style="font-family: Courier New,Courier,monospace">glScale()</span> function represents a non-uniform scaling along the x, y, and z axes. The 3 parameters indicate the desired scale factor along each of the 3 axes.</p>
 <pre class="prettyprint">const float scale_matrix[] = 
 {
 &nbsp;&nbsp;&nbsp;x,    0.0f, 0.0f, 0.0f,
@@ -412,7 +442,7 @@ customFrustum(float result[16],
 &nbsp;&nbsp;&nbsp;0.0f, 0.0f, 0.0f, 1.0f
 }
 </pre>
-<p>Here is the implementation of the matrix scaling function:</p>
+<p>The following example shows the implementation of the matrix scaling function:</p>
 <pre class="prettyprint">static void
 customScale(float matrix[16], const float sx, const float sy, const float sz)
 { 
@@ -432,9 +462,10 @@ customScale(float matrix[16], const float sx, const float sy, const float sz)
 &nbsp;&nbsp;&nbsp;matrix[11] *= sz; 
 }
 </pre>
+</li>
 
-<h4>Matrix Rotation Function (glRotate)</h4>
-<p>Define a function to represent a rotation by the vector (x y z). The current matrix is multiplied by a rotation matrix:</p>
+<li>Create the matrix rotation function.
+<p>Define a function to represent a rotation by the vector (x y z). The current matrix is multiplied by a rotation matrix.</p>
 <pre class="prettyprint">static void
 customRotate(float matrix[16], const float anglex, const float angley, const floatanglez)
 {
@@ -467,10 +498,15 @@ customRotate(float matrix[16], const float anglex, const float angley, const flo
 &nbsp;&nbsp;&nbsp;customMultMatrix(matrix, matrix, temp);
 }
 </pre>
-
-<h3>Create the Shader</h3>
-<p>Define the source for the shader using a string array. First comes out vertex shader, which is used to a medium precision for float values. Then build a uniform matrix with dimensions 4x4 intended to hold the model-view-projection matrix. Also create two vector attributes which have 4 components for the vertex position and the color. This varying variable <span style="font-family: Courier New,Courier,monospace">v_color</span> can be accessed from the fragment shader. In the main function of the shader, initialize the position of the current vertex, <span style="font-family: Courier New,Courier,monospace">gl_Position</span>, with the product of the vertex position and the model-view-projection matrix, in order to normalize the position for the target screen. The pixel color is calculated by the varying variable from the vertex shader.</p>
-<p>In the fragment shader, declare a varying variable, then set the color of the pixel with this interpolated color.</p>
+</li>
+</ul>
+</li>
+<li>Create the shader:
+<ol type="a">
+<li>
+<p>Define the source for the shader using a string array. First comes out vertex shader, which is used to a medium precision for float values. Then build a uniform matrix with dimensions 4x4 intended to hold the model-view-projection matrix. Also create 2 vector attributes which have 4 components for the vertex position and the color. This varying variable <span style="font-family: Courier New,Courier,monospace">v_color</span> can be accessed from the fragment shader.</p>
+<p>In the main function of the shader, initialize the position of the current vertex, <span style="font-family: Courier New,Courier,monospace">gl_Position</span>, with the product of the vertex position and the model-view-projection matrix, to normalize the position for the target screen. The pixel color is calculated by the varying variable from the vertex shader.</p>
+<p>In the fragment shader, declare a varying variable, and set the color of the pixel with this interpolated color.</p>
 <pre class="prettyprint">static const char vertex_shader[] =
 &nbsp;&nbsp;&nbsp;&quot;precision mediump float;&quot;
 &nbsp;&nbsp;&nbsp;&quot;uniform mat4 u_mvpMat;&quot;
@@ -490,7 +526,9 @@ static const char fragment_shader[] =
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;gl_FragColor = v_color;&quot;
 &nbsp;&nbsp;&nbsp;&quot;}&quot;;
 </pre>
-<p>Create the shaders, attach the source code that is just defined and compile the program object:</p>
+</li>
+<li>
+<p>Create the shaders, attach the source code that is just defined, and compile the program object:</p>
 <pre class="prettyprint">static void
 initShaders(void* data)
 {
@@ -507,7 +545,9 @@ initShaders(void* data)
 &nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
 &nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
 </pre>
-<p>Once the shaders are ready, instantiate the program object and link the shaders. If the linking succeeds, you can destroy the shaders afterwards (using <span style="font-family: Courier New,Courier,monospace">glDeleteShader</span>). Since they are inside the program object, so it is pointless to keep them in memory.</p>
+</li>
+<li>
+<p>Once the shaders are ready, instantiate the program object and link the shaders. If the linking succeeds, you can destroy the shaders afterwards (using the <span style="font-family: Courier New,Courier,monospace">glDeleteShader()</span> function). Since they are inside the program object, it is pointless to keep them in memory.</p>
 <pre class="prettyprint">&nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
 
 &nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
@@ -518,14 +558,16 @@ initShaders(void* data)
 
 &nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program);
 </pre>
-
-<p>For shader process, create identifiers for the attribute variables used in the shader program. First create an identifier for the model-view-projection matrix, another one for the current vertex position, and a last one for the vertex color.</p>
+</li>
+<li>
+<p>For shader process, create identifiers for the attribute variables used in the shader program. Create an identifier for the model-view-projection matrix, another one for the current vertex position, and a last one for the vertex color.</p>
 <pre class="prettyprint">&nbsp;&nbsp;&nbsp;ad-&gt;mvpLoc      = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMat&quot;);
 &nbsp;&nbsp;&nbsp;ad-&gt;positionLoc = glGetAttribLocation(ad-&gt;program, &quot;a_position&quot;);
 &nbsp;&nbsp;&nbsp;ad-&gt;colorLoc    = glGetAttribLocation(ad-&gt;program, &quot;a_color&quot;);
 </pre>
-
-<p>Finally, generate the buffers for the vertex positions and colors.</p>
+</li>
+<li>
+<p>Generate the buffers for the vertex positions and colors:</p>
 <pre class="prettyprint">
 &nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;vertexID);
 &nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vertexID);
@@ -536,8 +578,9 @@ initShaders(void* data)
 &nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(colors), colors, GL_STATIC_DRAW);
 }
 </pre>
-
-<p>Allocate memory for the matrix and load a unit matrix into it. Then define the value that is used in order to build the perspective projection matrix. The <span style="font-family: Courier New,Courier,monospace">customFrustum()</span> function is used for it. Multiply this resulting matrix with a resizing matrix, so the model is correctly adjusted to the screen.</p>
+</li>
+<li>
+<p>Allocate memory for the matrix and load a unit matrix into it. Define the value that is used to build the perspective projection matrix with the <span style="font-family: Courier New,Courier,monospace">customFrustum()</span> function. Multiply this resulting matrix with a resizing matrix, so the model is correctly adjusted to the screen.</p>
 <pre class="prettyprint">
 float aspect;
 customLoadIdentity(view);
@@ -553,17 +596,25 @@ else
 &nbsp;&nbsp;&nbsp;customFrustum(view, -1.0, 1.0, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0);
 }
 </pre>
+</li>
+</ol>
+</li>
+</ol>
 
 <h2 id="render" name="render">Rendering the Cube</h2>
 
-<p>We set the viewport at 0,0 corresponding to the bottom left edge of the window, and the height and width of the GL surface. Clear the depth and the color buffers to the values that were selected during initialization. Then call the <span style="font-family: Courier New,Courier,monospace">glUseProgram()</span> function in order to trigger the shader program.</p>
+<p>To render the cube:</p>
+<ol>
+<li>
+<p>Set the viewport at 0,0 corresponding to the bottom left edge of the window, and the height and width of the GL surface. Clear the depth and the color buffers to the values that were selected during initialization. Call the <span style="font-family: Courier New,Courier,monospace">glUseProgram()</span> function to trigger the shader program.</p>
 <pre class="prettyprint">glViewport(0, 0, w, h);
 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
 glUseProgram(ad-&gt;program);
 </pre>
-
-<p>Also bind the position and color identifiers to the buffers defined above.</p>
+</li>
+<li>
+<p>Bind the position and color identifiers to the buffers defined above:</p>
 <pre class="prettyprint">glEnableVertexAttribArray(ad-&gt;positionLoc);
 glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vertexID);
 glVertexAttribPointer(ad-&gt;positionLoc, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), 0);
@@ -572,27 +623,32 @@ glEnableVertexAttribArray(ad-&gt;colorLoc);
 glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;colorID);
 glVertexAttribPointer(ad-&gt;colorLoc, 4, GL_FLOAT, GL_FALSE, 4 * sizeof(float), 0);
 </pre>
-
-<p>After this, initialize and calculate the transformation matrix of the model-view matrix by calling the <span style="font-family: Courier New,Courier,monospace">customRotate()</span> function. This makes the cube view rotate a little for a better perspective. Once the model-view matrix is ready to display, multiply the projection matrix with the model-view matrix.</p>
+</li>
+<li>
+<p>Initialize and calculate the transformation matrix of the model-view matrix by calling the <span style="font-family: Courier New,Courier,monospace">customRotate()</span> function. This makes the cube view rotate a little for a better perspective. Once the model-view matrix is ready to display, multiply the projection matrix with the model-view matrix.</p>
 <pre class="prettyprint">customLoadIdentity(model);
 customRotate(ad-&gt;model, 45.0f, 45.0f, 0.0f);
 customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
 </pre>
-
-<p>Then load the model-view-projection matrix into the shader and call <span style="font-family: Courier New,Courier,monospace">glDrawArrays()</span> to draw the model.</p>
+</li>
+<li>
+<p>Load the model-view-projection matrix into the shader and call the <span style="font-family: Courier New,Courier,monospace">glDrawArrays()</span> function to draw the model:</p>
 <pre class="prettyprint">glUniformMatrix4fv(ad-&gt;mvpLoc, 1, GL_FALSE, mvp);
 glDrawArrays(GL_TRIANGLES, 0, 36);
 glFlush();
 </pre>
-
-<p>You now are the proud owner of a nice cube!</p>
+</li>
+</ol>
 
   <p class="figure">Figure: Static cube</p> 
   <p align="center"><img alt="Static cube" src="../../images/static_cube.png" /></p>
 
 <h2 id="animate" name="animate">Animating the Cube</h2>
 
-<p><span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> is used to create an animation.</p>
+<p>To animate the cube:</p>
+<ol>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> to create an animation:</p>
 <pre class="prettyprint">static Eina_Bool
 animate_cb(void *data)
 {
@@ -607,8 +663,9 @@ create_gl_canvas(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;ani = ecore_animator_add(animate_cb, ad-&gt;glview);
 }
 </pre>
-
-<p>Next define the global variables which are used as parameters of the rendering process. Add parameters to the application data object that are used to control the scaling and the rotation of the cube. To make the cube rotate on one axis, take z, and allow the user to interact with the mouse to make the cube rotate on the two other axes x and y. In order to figure out whether the user is holding the mouse down, add a Boolean variable to have this information. Operations such as shader initialization or program compilation are not required at each tick of the animation loop. For better performance, isolate such task from the repetitive rendering loop. For such purpose, add a Boolean variable which tells whether the initialization is already done.</p>
+</li>
+<li>
+<p>Define the global variables which are used as parameters of the rendering process. Add parameters to the application data object that are used to control the scaling and the rotation of the cube. To make the cube rotate on 1 axis, take z, and allow the user to interact with the mouse to make the cube rotate on the other axes x and y. To figure out whether the user is holding the mouse down, add a Boolean variable to have this information. Operations such as shader initialization or program compilation are not required at each tick of the animation loop. For better performance, isolate such task from the repetitive rendering loop. For such purpose, add a Boolean variable which tells whether the initialization is already done.</p>
 <pre class="prettyprint">typedef struct appdata 
 {
 &nbsp;&nbsp;&nbsp;float xangle;
@@ -618,23 +675,29 @@ create_gl_canvas(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;Eina_Bool initialized : 1;
 }  appdata_s;
 </pre>
-
-<p>Here are the modifications that must be done to the rendering loop for animation.</p>
-<p>First, lighten the recurrent rendering process by adding an initialization step:</p>
+</li>
+<li><p>Modify the rendering loop for animation.</p>
+<ul>
+<li>
+<p>Lighten the recurrent rendering process by adding an initialization step:</p>
 <pre class="prettyprint">if (ad-&gt;initialized) 
 {
 &nbsp;&nbsp;&nbsp;initShaders(ad);
 &nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
 }
 </pre>
-
-<p>Before drawing the vertices, the rotation angle for the model-view matrix must be incremented for every tick.</p>
+</li>
+<li>
+<p>Before drawing the vertices, the rotation angle for the model-view matrix must be incremented for every tick. This makes the cube rotate automatically.</p>
 <pre class="prettyprint">customLoadIdentity(ad-&gt;model);
 customRotate(ad-&gt;model, ad-&gt;xangle, ad-&gt;yangle, ad-&gt;zangle++);
 customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
 </pre>
-
-<p>This makes the cube rotate automatically. The next thing is to use the mouse to drag the cube around. To do so, add callbacks for mouse events. The first callback defines whether the user is holding the mouse down while moving the cursor around:</p>
+</li>
+</ul>
+</li>
+<li>
+<p>Use the mouse to drag the cube around. To do so, add callbacks for mouse events. The first callback defines whether the user is holding the mouse down while moving the cursor around.</p>
 <pre class="prettyprint">static void
 mouse_down_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
 {
@@ -668,16 +731,22 @@ mouse_move_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
 &nbsp;&nbsp;&nbsp;}
 }
 </pre>
-
+</li>
+<li>
 <p>Define the mouse events callbacks when creating the image canvas:</p>
 <pre class="prettyprint">evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
 evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
 evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
 </pre>
+</li>
+</ol>
 
 <h2 id="component" name="component">Implementing UI Component Interaction</h2>
 
-<p>Consider using UI component to control some aspects of the rendering. For example, use some sliders to control the shape of the cube. Declare 3 sliders to play with the scaling coordinates of the cube.</p>
+<p>To implement UI component interaction:</p>
+<ol>
+<li>
+<p>Use the UI component to control some aspects of the rendering, such as some sliders to control the shape of the cube. Declare 3 sliders to play with the scaling coordinates of the cube.</p>
 <pre class="prettyprint">typedef struct appdata 
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *slx;
@@ -685,9 +754,10 @@ evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_mo
 &nbsp;&nbsp;&nbsp;Evas_Object *slz;
 }
 </pre>
-
-<p>When rendering the GUI, build and show the sliders. Those accept values in a range from 0.0 to 1.5 and control the scaling of each axis of the cube.</p>
-<pre class="prettyprint">// Slider for X-axis scale
+</li>
+<li>
+<p>Build and show the sliders when rendering the GUI. The sliders accept values in a range from 0.0 to 1.5. They control the scaling of each axis of the cube.</p>
+<pre class="prettyprint">// Slider for X axis scale
 ad-&gt;slx = elm_slider_add(ad-&gt;inner_box);
 evas_object_size_hint_align_set(ad-&gt;slx, EVAS_HINT_FILL, 0);
 elm_slider_horizontal_set(ad-&gt;slx, EINA_TRUE);
@@ -700,7 +770,7 @@ evas_object_color_set(ad-&gt;slx, 0.0, 0.0, 120, 255);
 elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slx);
 evas_object_show(ad-&gt;slx);
 
-// Slider for Y-axis scale
+// Slider for Y axis scale
 ad-&gt;sly = elm_slider_add(ad-&gt;inner_box);
 evas_object_size_hint_align_set(ad-&gt;sly, EVAS_HINT_FILL, 0);
 elm_slider_horizontal_set(ad-&gt;sly, EINA_TRUE);
@@ -713,7 +783,7 @@ evas_object_color_set(ad-&gt;sly, 0.0, 0.0, 120, 255);
 elm_box_pack_end(ad-&gt;inner_box, ad-&gt;sly);
 evas_object_show(ad-&gt;sly);
 
-// Slider for Z-axis scale
+// Slider for Z axis scale
 ad-&gt;slz = elm_slider_add(ad-&gt;inner_box);
 evas_object_size_hint_align_set(ad-&gt;slz, EVAS_HINT_FILL, 0);
 elm_slider_horizontal_set(ad-&gt;slz, EINA_TRUE);
@@ -726,8 +796,9 @@ evas_object_color_set(ad-&gt;slz, 0.0, 0.0, 120, 255);
 elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slz);
 evas_object_show(ad-&gt;slz);
 </pre>
-
-<p>Then use the actual sliders&#39;s values and pass them to the scaling function in the rendering loop:</p>
+</li>
+<li>
+<p>Use the actual sliders&#39;s values and pass them to the scaling function in the rendering loop:</p>
 <pre class="prettyprint">double scalex = elm_slider_value_get(ad-&gt;slx);
 double scaley = elm_slider_value_get(ad-&gt;sly);
 double scalez = elm_slider_value_get(ad-&gt;slz);
@@ -737,14 +808,16 @@ customRotate(ad-&gt;model, ad-&gt;xangle, ad-&gt;yangle, ad-&gt;zangle++);
 customScale(ad-&gt;model, scalex, scaley, scalez);
 customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
 </pre>
-
-<p>Consider also using a colorpicker to change the background. To achieve this, add a colorselector component:</p>
+</li>
+<li>
+<p>Use a colorpicker to change the background by adding a colorselector component:</p>
 <pre class="prettyprint">typedef struct appdata 
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *cs;
 }
 </pre>
-
+</li>
+<li>
 <p>Build the UI component with a default palette and add it to the GUI:</p>
 <pre class="prettyprint">ad-&gt;cs = elm_colorselector_add(ad-&gt;inner_box);
 elm_colorselector_mode_set(ad-&gt;cs, ELM_COLORSELECTOR_BOTH);
@@ -752,34 +825,40 @@ elm_colorselector_palette_name_set(ad-&gt;cs, &quot;default&quot;);
 elm_box_pack_end(ad-&gt;inner_box, ad-&gt;cs);
 evas_object_show(ad-&gt;cs);
 </pre>
-
-<p>When rendering the cube, retrieve the currently selected color to define the color buffer. The colors from the colorselector vary from 0 to 255, which  needs to be converted to the color format of OpenGL ES.</p>
-<p>Build the UI component with a default palette and add it to the GUI:</p>
+</li>
+<li>
+<p>When rendering the cube, retrieve the currently selected color to define the color buffer. The colors from the colorselector vary from 0 to 255, which needs to be converted to the color format of OpenGL ES.</p>
 <pre class="prettyprint">int r, g, b, a;
 elm_colorselector_color_get(ad-&gt;cs, &amp;r, &amp;g, &amp;b, &amp;a);
 glClearColor(r/255.0, g/255.0, b/255.0, a/255.0);
 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 </pre>
+</li>
+</ol>
 
 <h2 id="effect" name="effect">Implementing Effects</h2>
 
-
-<p>Create a button that resets the scene by putting the background color to black and makes the cube bounce back to its original scale. First add the button to the application data object:</p>
+<p>To implement effects:</p>
+<ol>
+<li>
+<p>Create a button that resets the scene by putting the background color to black and makes the cube bounce back to its original scale. Add the button to the application data object.</p>
 <pre class="prettyprint">typedef struct appdata 
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *button;
 }
 </pre>
-
-<p>Then add the button to the GUI:</p>
+</li>
+<li>
+<p>Add the button to the GUI:</p>
 <pre class="prettyprint">elm_object_text_set(ad-&gt;button, &quot;Reset&quot;);
 elm_box_pack_start(ad-&gt;reset_vbox, ad-&gt;button);
 evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, btn_reset_cb, ad);
 elm_box_pack_end(ad-&gt;inner_box, ad-&gt;button);
 evas_object_show(ad-&gt;button);
 </pre>
-
-<p>Declare a callback that resets the variables that have influence on the drawing of the cube. In addition, animate the sliders when they get back to their original position using <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span>.</p>
+</li>
+<li>
+<p>Declare a callback that resets the variables that have influence on the drawing of the cube. In addition, animate the sliders when they get back to their original position using the <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span>.</p>
 <pre class="prettyprint">
 typedef struct appdata 
 {
@@ -817,6 +896,8 @@ btn_reset_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
 &nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, animate_reset_cb, ad);
 }
 </pre>
+</li>
+</ol>
 
 <h2 id="source" name="source">Viewing the Entire Cube Source</h2>
 
@@ -849,25 +930,25 @@ typedef struct appdata
 &nbsp;&nbsp;&nbsp;Evas_Object *cs;
 &nbsp;&nbsp;&nbsp;Evas_Object *button;
 
-&nbsp;&nbsp;&nbsp;unsigned int     program;
-&nbsp;&nbsp;&nbsp;unsigned int     vtx_shader;
-&nbsp;&nbsp;&nbsp;unsigned int     fgmt_shader;
-&nbsp;&nbsp;&nbsp;unsigned int     vertexID;
-&nbsp;&nbsp;&nbsp;unsigned int     colorID;
-&nbsp;&nbsp;&nbsp;unsigned int&nbsp;&nbsp;&nbsp; mvpLoc;
-&nbsp;&nbsp;&nbsp;unsigned int&nbsp;&nbsp;&nbsp; positionLoc;
-&nbsp;&nbsp;&nbsp;unsigned int&nbsp;&nbsp;&nbsp; colorLoc;
-&nbsp;&nbsp;&nbsp;float 			 model[16], mvp[16];
-&nbsp;&nbsp;&nbsp;float 			 view[16];
-&nbsp;&nbsp;&nbsp;float            xangle;
-&nbsp;&nbsp;&nbsp;float            yangle;
-&nbsp;&nbsp;&nbsp;float            zangle;
-&nbsp;&nbsp;&nbsp;Eina_Bool        mouse_down : 1;
-&nbsp;&nbsp;&nbsp;Eina_Bool        initialized : 1;
-
-&nbsp;&nbsp;&nbsp;float            slx_value;
-&nbsp;&nbsp;&nbsp;float            sly_value;
-&nbsp;&nbsp;&nbsp;float            slz_value;
+&nbsp;&nbsp;&nbsp;unsigned int program;
+&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
+&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;
+&nbsp;&nbsp;&nbsp;unsigned int vertexID;
+&nbsp;&nbsp;&nbsp;unsigned int colorID;
+&nbsp;&nbsp;&nbsp;unsigned int mvpLoc;
+&nbsp;&nbsp;&nbsp;unsigned int positionLoc;
+&nbsp;&nbsp;&nbsp;unsigned int colorLoc;
+&nbsp;&nbsp;&nbsp;float model[16], mvp[16];
+&nbsp;&nbsp;&nbsp;float view[16];
+&nbsp;&nbsp;&nbsp;float xangle;
+&nbsp;&nbsp;&nbsp;float yangle;
+&nbsp;&nbsp;&nbsp;float zangle;
+&nbsp;&nbsp;&nbsp;Eina_Bool mouse_down : 1;
+&nbsp;&nbsp;&nbsp;Eina_Bool initialized : 1;
+
+&nbsp;&nbsp;&nbsp;float slx_value;
+&nbsp;&nbsp;&nbsp;float sly_value;
+&nbsp;&nbsp;&nbsp;float slz_value;
 } appdata_s;
 
 
@@ -1136,7 +1217,8 @@ initShaders(void* data)
 &nbsp;&nbsp;&nbsp;ad-&gt;colorLoc&nbsp;&nbsp;&nbsp;= glGetAttribLocation(ad-&gt;program, &quot;a_color&quot;);
 }
 
-static void init_gl(Evas_Object *obj) 
+static void 
+init_gl(Evas_Object *obj) 
 {
 &nbsp;&nbsp;&nbsp;int w, h;
 &nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
@@ -1159,7 +1241,8 @@ static void init_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;}
 }
 
-void resize_gl(Evas_Object *obj) 
+void 
+resize_gl(Evas_Object *obj) 
 {
 &nbsp;&nbsp;&nbsp;int w, h;
 &nbsp;&nbsp;&nbsp;float aspect;
@@ -1180,7 +1263,8 @@ void resize_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void draw_gl(Evas_Object *obj) 
+static void 
+draw_gl(Evas_Object *obj) 
 {
 &nbsp;&nbsp;&nbsp;int w, h;
 &nbsp;&nbsp;&nbsp;int r, g, b, a;
@@ -1221,7 +1305,8 @@ static void draw_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;glFlush();
 }
 
-static void del_gl(Evas_Object *obj) 
+static void 
+del_gl(Evas_Object *obj) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
 
@@ -1232,25 +1317,30 @@ static void del_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;evas_object_data_del((Evas_Object*) obj, &quot;ad&quot;);
 }
 
-static Eina_Bool animate_cb(void *data) 
+static Eina_Bool 
+animate_cb(void *data) 
 {
 &nbsp;&nbsp;&nbsp;elm_glview_changed_set(data);
+
 &nbsp;&nbsp;&nbsp;return EINA_TRUE;
 }
 
-static void del_animate_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info) 
+static void 
+del_animate_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info) 
 {
 &nbsp;&nbsp;&nbsp;Ecore_Animator *ani = evas_object_data_get(obj, &quot;ani&quot;);
 &nbsp;&nbsp;&nbsp;ecore_animator_del(ani);
 }
 
-static void mouse_down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
+static void 
+mouse_down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 &nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_TRUE;
 }
 
-static void mouse_move_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
+static void 
+mouse_move_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
 {
 &nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev;
 &nbsp;&nbsp;&nbsp;ev = (Evas_Event_Mouse_Move *) event_info;
@@ -1266,13 +1356,15 @@ static void mouse_move_cb(void *data, Evas *e, Evas_Object *obj, void *event_inf
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void mouse_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
+static void 
+mouse_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 &nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;
 }
 
-static Eina_Bool animate_reset_cb(void *data, double pos) 
+static Eina_Bool 
+animate_reset_cb(void *data, double pos) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 &nbsp;&nbsp;&nbsp;double frame = pos;
@@ -1290,7 +1382,8 @@ static Eina_Bool animate_reset_cb(void *data, double pos)
 &nbsp;&nbsp;&nbsp;return EINA_TRUE;
 }
 
-static void btn_reset_cb(void *data, Evas_Object *obj,	void *event_info) 
+static void 
+btn_reset_cb(void *data, Evas_Object *obj,	void *event_info) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 &nbsp;&nbsp;&nbsp;ad-&gt;slx_value = elm_slider_value_get(ad-&gt;slx);
@@ -1299,7 +1392,8 @@ static void btn_reset_cb(void *data, Evas_Object *obj,	void *event_info)
 &nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, animate_reset_cb, ad);
 }
 
-static void win_resize_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
+static void 
+win_resize_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
 {
 &nbsp;&nbsp;&nbsp;Evas_Coord w, h;
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
@@ -1316,10 +1410,11 @@ static void win_resize_cb(void *data, Evas *e, Evas_Object *obj, void *event_inf
 &nbsp;&nbsp;&nbsp;}
 }
 
-static void win_back_cb(void *data, Evas_Object *obj, void *event_info) 
+static void 
+win_back_cb(void *data, Evas_Object *obj, void *event_info) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;// Let window go to hidden state
+&nbsp;&nbsp;&nbsp;// Let the window go to the hidden state
 &nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
 }
 
@@ -1329,7 +1424,8 @@ win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
 &nbsp;&nbsp;&nbsp;ui_app_exit();
 }
 
-static void create_base_gui(appdata_s *ad) 
+static void 
+create_base_gui(appdata_s *ad) 
 {
 &nbsp;&nbsp;&nbsp;// Window
 &nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);
@@ -1365,7 +1461,8 @@ static void create_base_gui(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
 }
 
-static void create_gl_canvas(appdata_s *ad) 
+static void 
+create_gl_canvas(appdata_s *ad) 
 {
 &nbsp;&nbsp;&nbsp;Ecore_Animator *ani;
 
@@ -1379,15 +1476,15 @@ static void create_gl_canvas(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;elm_glview_mode_set(ad-&gt;glview, ELM_GLVIEW_DEPTH);
 
 &nbsp;&nbsp;&nbsp;// The resize policy tells GLView what to do with the surface when it
-&nbsp;&nbsp;&nbsp;// resizes. ELM_GLVIEW_RESIZE_POLICY_RECREATE will tell it to
+&nbsp;&nbsp;&nbsp;// resizes. ELM_GLVIEW_RESIZE_POLICY_RECREATE tells it to
 &nbsp;&nbsp;&nbsp;// destroy the current surface and recreate it to the new size
 &nbsp;&nbsp;&nbsp;elm_glview_resize_policy_set(ad-&gt;glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
 
-&nbsp;&nbsp;&nbsp;// The render policy sets how GLView should render GL code.
-&nbsp;&nbsp;&nbsp;// ELM_GLVIEW_RENDER_POLICY_ON_DEMAND will have the GL callback
+&nbsp;&nbsp;&nbsp;// The render policy sets how GLView must render GL code.
+&nbsp;&nbsp;&nbsp;// ELM_GLVIEW_RENDER_POLICY_ON_DEMAND has the GL callback
 &nbsp;&nbsp;&nbsp;// called only when the object is visible.
-&nbsp;&nbsp;&nbsp;// ELM_GLVIEW_RENDER_POLICY_ALWAYS would cause the callback to be
-&nbsp;&nbsp;&nbsp;// called even if the object were hidden.
+&nbsp;&nbsp;&nbsp;// ELM_GLVIEW_RENDER_POLICY_ALWAYS causes the callback to be
+&nbsp;&nbsp;&nbsp;// called even if the object were hidden
 &nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(ad-&gt;glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);
 
 &nbsp;&nbsp;&nbsp;// The initialize callback function gets registered here
@@ -1406,10 +1503,10 @@ static void create_gl_canvas(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;main_box, ad-&gt;glview);
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;glview);
 
-&nbsp;&nbsp;&nbsp;// This adds an animator so that the app will regularly
-&nbsp;&nbsp;&nbsp;// trigger updates of the GLView using elm_glview_changed_set()
+&nbsp;&nbsp;&nbsp;// This adds an animator so that the app regularly
+&nbsp;&nbsp;&nbsp;// triggers updates of the GLView using elm_glview_changed_set()
 &nbsp;&nbsp;&nbsp;//
-&nbsp;&nbsp;&nbsp;// NOTE: If you delete GL, this animator will keep running trying to access
+&nbsp;&nbsp;&nbsp;// NOTE: If you delete GL, this animator keeps running trying to access
 &nbsp;&nbsp;&nbsp;// GL so this animator needs to be deleted with ecore_animator_del()
 &nbsp;&nbsp;&nbsp;ani = ecore_animator_add(animate_cb, ad-&gt;glview);
 &nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;glview, &quot;ani&quot;, ani);
@@ -1427,7 +1524,8 @@ static void create_gl_canvas(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_FALSE;
 }
 
-static void create_toolbox(appdata_s *ad) 
+static void 
+create_toolbox(appdata_s *ad) 
 {
 &nbsp;&nbsp;&nbsp;ad-&gt;inner_box = elm_box_add(ad-&gt;main_box);
 &nbsp;&nbsp;&nbsp;elm_box_horizontal_set(ad-&gt;inner_box, EINA_FALSE);
@@ -1442,7 +1540,7 @@ static void create_toolbox(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;cs);
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;cs);
 
-&nbsp;&nbsp;&nbsp;// Slider for X-axis scale
+&nbsp;&nbsp;&nbsp;// Slider for X axis scale
 &nbsp;&nbsp;&nbsp;ad-&gt;slx = elm_slider_add(ad-&gt;inner_box);
 &nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;slx, EVAS_HINT_FILL, 0);
 &nbsp;&nbsp;&nbsp;elm_slider_horizontal_set(ad-&gt;slx, EINA_TRUE);
@@ -1455,7 +1553,7 @@ static void create_toolbox(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slx);
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;slx);
 
-&nbsp;&nbsp;&nbsp;// Slider for Y-axis scale
+&nbsp;&nbsp;&nbsp;// Slider for Y axis scale
 &nbsp;&nbsp;&nbsp;ad-&gt;sly = elm_slider_add(ad-&gt;inner_box);
 &nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;sly, EVAS_HINT_FILL, 0);
 &nbsp;&nbsp;&nbsp;elm_slider_horizontal_set(ad-&gt;sly, EINA_TRUE);
@@ -1468,7 +1566,7 @@ static void create_toolbox(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;sly);
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;sly);
 
-&nbsp;&nbsp;&nbsp;// Slider for Z-axis scale
+&nbsp;&nbsp;&nbsp;// Slider for Z axis scale
 &nbsp;&nbsp;&nbsp;ad-&gt;slz = elm_slider_add(ad-&gt;inner_box);
 &nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;slz, EVAS_HINT_FILL, 0);
 &nbsp;&nbsp;&nbsp;elm_slider_horizontal_set(ad-&gt;slz, EINA_TRUE);
@@ -1490,10 +1588,11 @@ static void create_toolbox(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;button);
 }
 
-static bool app_create(void *data) 
+static bool 
+app_create(void *data) 
 {
 &nbsp;&nbsp;&nbsp;// Hook to take necessary actions before main event loop starts
-&nbsp;&nbsp;&nbsp;// Initialize UI resources and application's data
+&nbsp;&nbsp;&nbsp;// Initialize UI resources and application&#39;s data
 &nbsp;&nbsp;&nbsp;// If this function returns true, the main loop of application starts
 &nbsp;&nbsp;&nbsp;// If this function returns false, the application is terminated
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
@@ -1505,27 +1604,32 @@ static bool app_create(void *data)
 &nbsp;&nbsp;&nbsp;return true;
 }
 
-static void app_control(app_control_h app_control, void *data) 
+static void 
+app_control(app_control_h app_control, void *data) 
 {
 &nbsp;&nbsp;&nbsp;// Handle the launch request
 }
 
-static void app_pause(void *data) 
+static void 
+app_pause(void *data) 
 {
 &nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes invisible
 }
 
-static void app_resume(void *data) 
+static void 
+app_resume(void *data) 
 {
 &nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes visible
 }
 
-static void app_terminate(void *data) 
+static void 
+app_terminate(void *data) 
 {
 &nbsp;&nbsp;&nbsp;// Release all resources
 }
 
-int main(int argc, char *argv[]) 
+int 
+main(int argc, char *argv[]) 
 {
 &nbsp;&nbsp;&nbsp;appdata_s ad = { 0, };
 &nbsp;&nbsp;&nbsp;int ret = 0;
@@ -1542,7 +1646,6 @@ int main(int argc, char *argv[])
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, PACKAGE, &quot;The application failed to start, and returned %d&quot;, ret);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return ret;
 }
 </pre>	  
@@ -1594,7 +1697,8 @@ typedef struct
 &nbsp;&nbsp;&nbsp;Target_Buffer *last_buffer;
 } App_Data;
 
-static bool app_create(void *data)
+static bool 
+app_create(void *data)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *win, *glview;
 &nbsp;&nbsp;&nbsp;App_Data *ad = data;
@@ -1698,7 +1802,7 @@ init(Evas_Object *obj)
 </ol>
 </li>
 
-<li>Create Ecore threads:
+<li>Create Ecore threads.
 <p>To easily create threads with EFL, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread()</span> infrastructure, which provides a high level abstraction over system threads, along with callbacks in the main loop to signal that a thread has finished running or has been canceled.</p>
 <p>When the main OpenGL ES context is properly set up, spawn the render thread and start setting up its OpenGL ES context:</p>
 <pre class="prettyprint">
@@ -1719,7 +1823,7 @@ init(Evas_Object *obj)
 <p>To establish safe communication channels between threads:</p>
 <ol>
 <li>Since most of EFL is not thread-safe, certain operations cannot be executed from another thread and you must use the main loop instead. 
-<p>Establish a communication channel from the render thread to the main loop:</p>
+<p>Establish a communication channel from the render thread to the main loop.</p>
 <ol type="a">
 <li>Create an <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span> channel.
 <p>EFL provides a simple tool to send messages to the main thread using pipes. Ecore Pipe is the abstraction layer around pipe objects, and is the easiest way to send a message from any thread back to the main thread.</p>
@@ -1775,7 +1879,7 @@ pipe_handler(void *data, void *buf, unsigned int len EINA_UNUSED)
 &nbsp;&nbsp;&nbsp;}
 }
 </pre>
-<p>You need not use the <span style="font-family: Courier New,Courier,monospace;">free()</span> function to free data since the data belongs to the <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span>.</p>
+<p>You do not need to use the <span style="font-family: Courier New,Courier,monospace;">free()</span> function to free data since the data belongs to the <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span>.</p>
 </li>
 </ol>
 </li>
@@ -1786,7 +1890,7 @@ pipe_handler(void *data, void *buf, unsigned int len EINA_UNUSED)
 
 <ol type="a">
 <li>Create a pipe.
-<p>The easiest way to send a simple message in EFL in Tizen is to rely on a POSIX pipe file handle:</p>
+<p>The easiest way to send a simple message in EFL in Tizen is to rely on a POSIX pipe file handle.</p>
 <pre class="prettyprint">
 // Create a pipe for messaging  
 int fds[2];
@@ -1796,7 +1900,7 @@ ad.rt_wpipefd = fds[1];
 </pre>
 </li>
 
-<li>Send messages to a thread. Write data to the pipe created above, from the main loop:
+<li>Send messages to a thread. Write data to the pipe created above, from the main loop.
 <pre class="prettyprint">
 // Main loop to render thread  
 static void
@@ -1818,8 +1922,8 @@ event_send(App_Data *ad, Event_Type type, ...)
 </pre>
 </li>
 
-<li>Receive messages in a thread:
-<p>In the render thread, use the event handling code:</p>
+<li>Receive messages in a thread.
+<p>In the render thread, use the event handling code.</p>
 <pre class="prettyprint">
 while (!ecore_thread_check(ad-&gt;th.thread))
 {
@@ -1836,7 +1940,7 @@ while (!ecore_thread_check(ad-&gt;th.thread))
 }
 </pre></li>
 
-<li>Use a simple pipe file descriptor to use the <span style="font-family: Courier New,Courier,monospace;">poll()</span> or <span style="font-family: Courier New,Courier,monospace;">select()</span> function, in order to wait for events for a pre-determined period of time, or to wait for events on more than a single file descriptor. In this example, the main loop is responsible for the render thread life-cycle:
+<li>Use a simple pipe file descriptor to use the <span style="font-family: Courier New,Courier,monospace;">poll()</span> or <span style="font-family: Courier New,Courier,monospace;">select()</span> function to wait for events for a pre-determined period of time, or to wait for events on more than a single file descriptor. In this example, the main loop is responsible for the render thread life-cycle.
 <pre class="prettyprint">
 thread_run(void *data, Ecore_Thread *th EINA_UNUSED)
 {
@@ -1875,7 +1979,7 @@ evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, &amp
 </li>
 
 <li>
-<p>Add a handle to the callbacks:</p>
+<p>Add a handle to the callbacks.</p>
 <p>The mouse down callback sends a mouse down event to render thread.</p>
 <pre class="prettyprint">
 static void
@@ -1892,7 +1996,7 @@ mouse_down_cb(void *data, Evas *e EINA_UNUSED,
 </pre>
 </li>
 <li>
-<p>The mouse up callback sends a mouse up event to render thread.</p>
+<p>The mouse up callback sends a mouse up event to render thread:</p>
 <pre class="prettyprint">
 static void
 mouse_up_cb(void *data, Evas *e EINA_UNUSED,
@@ -2016,7 +2120,6 @@ target_create(App_Data *ad EINA_UNUSED)
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return target;
 }
 </pre>
@@ -2054,7 +2157,7 @@ thread_run(void *data, Ecore_Thread *th EINA_UNUSED)
 </pre>
 </li>
 <li>
-<p>To render in a thread, use the <span style="font-family: Courier New,Courier,monospace;">thread_draw()</span> function. The following example draws with a color:</p>
+<p>To render in a thread, use the <span style="font-family: Courier New,Courier,monospace;">thread_draw()</span> function. The following example draws with a color.</p>
 <pre class="prettyprint">
 static void
 thread_draw(App_Data *ad, Evas_GL_API *gl)
@@ -2066,14 +2169,14 @@ thread_draw(App_Data *ad, Evas_GL_API *gl)
 </pre>
 </li>
 
-<li>Render the FBO to the screen. The following example uses the <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span>:
+<li>Render the FBO to the screen. The following example uses the <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span>.
 <pre class="prettyprint">
 // Signal the main thread that a new frame is now available  
 message_send(ad, MSG_NEWFRAME, target);
 </pre>
 </li>
 <li>
-<p>The pipe handler receives this message in <span style="font-family: Courier New,Courier,monospace;">pipe_handler</span>. The following example adds the target buffer to a queue:</p>
+<p>The pipe handler receives this message in <span style="font-family: Courier New,Courier,monospace;">pipe_handler</span>. The following example adds the target buffer to a queue.</p>
 <pre class="prettyprint">
 case MSG_NEWFRAME:
 &nbsp;&nbsp;&nbsp;// Queue a new frame description  
@@ -2184,7 +2287,7 @@ if (evasglCreateImageForContext)
 {
 &nbsp;&nbsp;&nbsp;// Create an image
 &nbsp;&nbsp;&nbsp;evasglCreateImageForContext(evgl, ctx, EVAS_GL_TEXTURE_2D,
-&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;(void*)(intptr_t)texid, 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;&nbsp;&nbsp;&nbsp;(void*)(intptr_t)texid, NULL);
 }
 </pre>
 <p>Tizen also provides specific buffers created with TBM that can be passed to this function. Unfortunately the image extension is more device-dependent, and may not even work in the Tizen emulator.</p>
@@ -2235,15 +2338,14 @@ if (gl-&gt;glGetProgramBinaryOES)
 
 <p>Image and sync support are the most commonly used EvasGL extensions. Both can be used for multi-thread rendering, but EvasGL images can also be used to share images between contexts.</p>
 
-<h3>EvasGLImage</h3>
-
-<p>There are 2 versions of the <span style="font-family: Courier New,Courier,monospace;">evasglCreateImage</span> function, out of which extra <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Context</span> is taken as an argument. It is recommended to call <span style="font-family: Courier New,Courier,monospace;">evasglCreateImageForContext</span> if you are dealing with multiple contexts, otherwise calling the <span style="font-family: Courier New,Courier,monospace;">evasglCreateImage</span> function is sufficient.</p>
+<ul>
+<li>To use the image extension:
 
-<p>The code below is just an example.</p>
+<p>There are 2 versions of the <span style="font-family: Courier New,Courier,monospace;">evasglCreateImage()</span> function, out of which extra <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Context</span> is taken as a parameter. It is recommended to call the  <span style="font-family: Courier New,Courier,monospace;">evasglCreateImageForContext()</span> function if you are dealing with multiple contexts, otherwise calling the <span style="font-family: Courier New,Courier,monospace;">evasglCreateImage()</span> function is sufficient.</p>
 
 <ol>
 	<li>Check for support.
-	<p>Before using this extension, check whether it is supported:</p>
+	<p>Before using this extension, check whether it is supported.</p>
 
 	<pre class="prettyprint">
 if (gl-&gt;evasglCreateImageForContext &amp;&amp; gl-&gt;evasglDestroyImage)
@@ -2253,7 +2355,7 @@ if (gl-&gt;evasglCreateImageForContext &amp;&amp; gl-&gt;evasglDestroyImage)
 </pre>
 	</li>
 	<li>Create an image.
-	<p>Create a render buffer and bind it to an EvasGL image:</p>
+	<p>Create a render buffer and bind it to an EvasGL image.</p>
 
 	<pre class="prettyprint">
 const int width = 64, height = 64;
@@ -2275,13 +2377,13 @@ gl-&gt;glFramebufferRenderbufferEXT(GL_FRAMEBUFFER_EXT,
 evgl = elm_glview_evas_gl_get(glview);
 ctx = evas_gl_current_context_get(evgl);
 image = gl-&gt;evasglCreateImageForContext(evgl, ctx, EVAS_GL_TEXTURE_2D,
-&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;(void *)(intptr_t) color_rb, 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(intptr_t) color_rb, NULL);
 </pre>
 
 	<p>The EvasGL image is now created and available for use from another context.</p>
 	</li>
 	<li>Use an image.
-	<p>To draw something in the texture and render that texture to the screen. To skip the draw function:</p>
+	<p>To draw something in the texture and render that texture to the screen. The following example shows how to skip the draw function.</p>
 
 	<pre class="prettyprint">
 gl-&gt;glBindFramebuffer(GL_FRAMEBUFFER_EXT, fbo);
@@ -2296,7 +2398,7 @@ gl-&gt;glBindFramebuffer(GL_FRAMEBUFFER_EXT, 0);
 gl-&gt;glGenTextures(1, &amp;tex);
 gl-&gt;glBindTexture(GL_TEXTURE_2D, tex);
 gl-&gt;glEGLImageTargetTexture2DOES(GL_TEXTURE_2D, image);
-And do the actual draw operation (draw the contents of the texture on screen):
+// Draw the contents of the texture on the screen
 static const GLint verts[12] = { -5, -6, -10,  5, -6, -10,  -5, 4, 10,  5, 4, 10 };
 static const GLint tex_coords[8] = { 0, 0,  1, 0,  0, 1,  1, 1 };
 
@@ -2323,37 +2425,41 @@ gl-&gt;glDisable(GL_TEXTURE_2D);
 	<p>The image content can be shared between different contexts.</p>
 	</li>
 	<li>Destroy an image.
-	<p>After releasing all the associated resources, such as FBO and textures, release the image object itself:</p>
+	<p>After releasing all the associated resources, such as FBO and textures, release the image object itself.</p>
 
 	<pre class="prettyprint">
 gl-&gt;evasglDestroyImage(image);</pre>
 	</li>
 </ol>
-
-<h3>Sync</h3>
+</li>
+<li>To use the sync extension:
 
 <p>Another commonly used extension is the fence sync extension along with the reusable sync and wait sync. This allows creating a semaphore-style object that is released as soon as all the previous render operations have been completed.</p>
 
-<p>This guide does not explain the details of these extensions, as they should behave in a similar way to their EGL implementations.</p>
+<p>This guide does not explain the details of these extensions, as they must behave in a similar way to their EGL implementations.</p>
 
 <p>As usual with extensions, check the support:</p>
 
 <pre class="prettyprint">
 if (gl-&gt;evasglCreateSync)
-  // fence_sync must be supported
+&nbsp;&nbsp;&nbsp;// fence_sync must be supported
 </pre>
+</li>
+</ul>
 
 <h2 id="direct" name="direct">Using Direct Rendering</h2>
 
 <p>To enhance rendering performance, the Direct Rendering option is supported.</p>
+<ul>
+<li>
+<p>To use direct rendering in GLView:</p>
 
-<h3>GLView</h3>
-
+<p>In GLView, the <span style="font-family: Courier New,Courier,monospace;">ELM_GLVIEW_DIRECT</span> option is one of GLView mode&#39;s enums and the option can be enabled using the <span style="font-family: Courier New,Courier,monospace;">elm_glview_mode_set()</span> function.</p>
 <pre class="prettyprint">
 // Tizen 2.3
 // elm_config_accel_preference_set(&quot;opengl&quot;);
 
-// since Tizen 2.3.1
+// Since Tizen 2.3.1
 elm_config_accel_preference_set(&quot;opengl:depth24:stencil8:msaa_high&quot;);
 Evas_Object *win = elm_win_util_standard_add(&quot;sample&quot;, &quot;sample&quot;);
 
@@ -2361,17 +2467,17 @@ Evas_Object *glview = elm_glview_add(win);
 elm_glview_mode_set(glview, ELM_GLVIEW_DEPTH_24 | ELM_GLVIEW_STENCIL_8 | ELM_GLVIEW_MULTISAMPLE_HIGH);
 </pre>
 
-<p>In GLView, the <span style="font-family: Courier New,Courier,monospace;">ELM_GLVIEW_DIRECT</span> option is one of GLView mode&#39;s enums and the option can be enabled using the <span style="font-family: Courier New,Courier,monospace;">elm_glview_mode_set()</span> function.</p>
-
 <p>To use the Direct Rendering mode since Tizen 2.3.1, set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function and to a GLView object using the <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function. If the GLView object option values are bigger or higher than the rendering engine&#39;s, the Direct Rendering mode is disabled.</p>
+</li>
+<li>
+<p>To use direct rendering in EvasGL:</p>
 
-<h3>EvasGL</h3>
-
+<p>In EvasGL, the <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_DIRECT</span> is one of EvasGL&#39;s config options and the option can be enabled by setting the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> option.</p>
 <pre class="prettyprint">
 // Tizen 2.3
 // elm_config_accel_preference_set(&quot;opengl&quot;);
 
-// since Tizen 2.3.1
+// Since Tizen 2.3.1
 elm_config_accel_preference_set(&quot;opengl:depth24:stencil8:msaa_high&quot;);
 Evas_Object *win = elm_win_util_standard_add(&quot;sample&quot;, &quot;sample&quot;);
 
@@ -2385,7 +2491,7 @@ cfg-&gt;options_bits = EVAS_GL_OPTIONS_DIRECT;
 cfg-&gt;multisample_bits = EVAS_GL_MULTISAMPLE_HIGH;
 </pre>
 
-<p>In EvasGL, the <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_DIRECT</span> is one of EvasGL&#39;s config options and the option can be enabled by setting the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> option. To use the Direct Rendering mode since Tizen 2.3.1, set the same option values (depth, stencil, and MSAA) to a rendering engine and an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> object. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function. If the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> object option values are bigger or higher than the rendering engine&#39;s, the Direct Rendering mode is disabled.</p>
+<p>To use the Direct Rendering mode since Tizen 2.3.1, set the same option values (depth, stencil, and MSAA) to a rendering engine and an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> object. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function. If the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> object option values are bigger or higher than the rendering engine&#39;s, the Direct Rendering mode is disabled.</p>
 
   <table class="note"> 
    <tbody> 
@@ -2393,17 +2499,17 @@ cfg-&gt;multisample_bits = EVAS_GL_MULTISAMPLE_HIGH;
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">If direct rendering is enabled, EvasGL will render directly to the back buffer of the window. Otherwise, EvasGL will render to the off screen buffer, then composited to the back buffer of the window.
+     <td class="note">If direct rendering is enabled, EvasGL rendersdirectly to the back buffer of the window. Otherwise, EvasGL renders to the off screen buffer, then composited to the back buffer of the window.
 
-<p>Although direct rendering is enabled, EvasGL will not always render directly to the back buffer. Here are some conditions that will disable direct rendering and force a fallback to indirect rendering in a frame buffer.</p>
+<p>Although direct rendering is enabled, EvasGL not always renders directly to the back buffer. The following conditions disable direct rendering and force a fallback to indirect rendering in a frame buffer:</p>
 
-<ol>
+<ul>
 	<li>If the object&#39;s color is not 255,255,255,255.</li>
 	<li>If the object has an Evas map.</li>
 	<li>If the object size is different from the viewport, (<span style="font-family: Courier New,Courier,monospace;">RESIZE_POLICY_SCALE</span>).</li>
 	<li>If the window is rotated and <span style="font-family: Courier New,Courier,monospace;">CLIENT_SIDE_ROTATION</span> is not set.</li>
 	<li>If the GLView policy is set to <span style="font-family: Courier New,Courier,monospace;">ALWAYS</span> render or the EvasGL does not use pixel getter callback.</li>
-</ol></td> 
+</ul></td> 
     </tr> 
    </tbody> 
   </table> 
@@ -2417,40 +2523,40 @@ cfg-&gt;multisample_bits = EVAS_GL_MULTISAMPLE_HIGH;
      <td class="note">In the render callback function, call only GL functions.
 <p>In case the GL functions are called outside the render callback function, you must call the <span style="font-family: Courier New,Courier,monospace;">evas_gl_make_current()</span> function before the GL function calls. However, this results in a performance degradation due to context switching, and only works if the target surface is not an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Surface</span> with Direct Rendering enabled.</p>	 
 
-<p>If the target buffer is an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Surface</span> with Direct Rendering enabled, all GL functions must be called from the render callback function only. All other operations can break the rendering order and the unexpected rendering will occur.</p></td> 
+<p>If the target buffer is an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Surface</span> with Direct Rendering enabled, all GL functions must be called from the render callback function only. All other operations can break the rendering order and the unexpected rendering occurs.</p></td> 
     </tr> 
    </tbody> 
   </table> 
+  </li>
+  </ul>
 
   <h2 id="client" name="client">Using Client-side Rotation</h2>
 
-
-<p>The Client Side Rotation is a special value that indicates to EFL that the application will handle the view rotation when the device is rotated. This is needed only when the application requests Direct Rendering.</p>
+<p>The Client Side Rotation is a special value that indicates to EFL that the application  handles the view rotation when the device is rotated. This is needed only when the application requests Direct Rendering.</p>
 
 <p>If the window is rotated and the Direct Rendering flag is set, Client Side Rotation can be used to avoid falling back to a frame buffer.</p>
 
-<h3>GLView</h3>
+<ul>
+<li>To use GLView rotation:
 
+<p>In GLView, the <span style="font-family: Courier New,Courier,monospace;">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span> option is one of GLView mode&#39;s enums and the option can be enabled by using the <span style="font-family: Courier New,Courier,monospace;">elm_glview_mode_set()</span> function. This option is needed only when Direct Rendering is enabled.</p>
 <pre class="prettyprint">
 Evas_Object *gl;
 gl = elm_glview_add(win);
  
 elm_glview_mode_set(gl, ELM_GLVIEW_DEPTH | ELM_GLVIEW_DIRECT | ELM_GLVIEW_CLIENT_SIDE_ROTATION);</pre>
+</li>
 
-<p>In GLView, the <span style="font-family: Courier New,Courier,monospace;">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span> option is one of GLView mode&#39;s enums and the option can be enabled by using the <span style="font-family: Courier New,Courier,monospace;">elm_glview_mode_set()</span> function. This option is needed only when Direct Rendering is enabled.</p>
-
-<h3>EvasGL</h3>
+<li>To use EvasGL rotation:
 
+<p>In EvasGL, the <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</span> is one of EvasGL&#39;s config options and this option can be enabled by setting the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> option.</p>
 <pre class="prettyprint">
 Evas_GL_Config *cfg;
 cfg = evas_gl_config_new();
  
 cfg-&gt;options_bits = EVAS_GL_OPTIONS_DIRECT | EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION;</pre>
 
-<p>In EvasGL, the <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</span> is one of EvasGL&#39;s config options and this option can be enabled by setting the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> option.</p>
-
 <p>Get the current rotation value:</p>
-
 <pre class="prettyprint">
 static void _draw_gl(Evas_Object *obj) 
 {
@@ -2464,7 +2570,9 @@ static void _draw_gl(Evas_Object *obj)
 &nbsp;&nbsp;&nbsp;} 
 }</pre>
 
-<p>To get the current rotation of the view, in degrees, call the <span style="font-family: Courier New,Courier,monospace;">evas_gl_rotation_get()</span> in order to properly handle the current rotation of the view. It will always return 0 unless the option <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</span> has been set. Indeed, in case of Direct Rendering to the back buffer, the client application is responsible for properly rotating its view. This can generally be done by applying a rotation to a view matrix.</p>			
+<p>To get the current rotation of the view, in degrees, call the <span style="font-family: Courier New,Courier,monospace;">evas_gl_rotation_get()</span> function to properly handle the current rotation of the view. It always returns 0 unless the option <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</span> has been set. Indeed, in case of Direct Rendering to the back buffer, the client application is responsible for properly rotating its view. This can generally be done by applying a rotation to a view matrix.</p>	
+</li>
+</ul>		
 		
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm
index d982d88..e30173c 100644
--- a/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -72,7 +72,7 @@ if (tbm_surface_query_formats (&amp;formats, &amp;format_num) != TBM_SURFACE_ERR
 </li>
 
 <li>
-<p>Create the TBM surface (<span style="font-family: Courier New,Courier,monospace">tbm_surface</span>), defining its format, height, and width:</p>
+<p>Create the TBM surface (<span style="font-family: Courier New,Courier,monospace">tbm_surface</span>) and define its format, height, and width:</p>
 <pre class="prettyprint">
 int i;
 tbm_surface_h surface = NULL;
@@ -107,7 +107,7 @@ if (tbm_surface_map (surface, TBM_SURF_OPTION_READ|TBM_SURF_OPTION_WRITE, &amp;s
 </li>
 
 <li>
-<p>Store data at the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> by using pointer of each plane:</p>
+<p>Store data at the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> by using a pointer of each plane:</p>
 <pre class="prettyprint">
 for (i = 0; i&lt;surface_info.num_planes; i++)
 {
@@ -116,7 +116,7 @@ for (i = 0; i&lt;surface_info.num_planes; i++)
 </pre>
 </li>
 
-<li>Unmap and destroy <span style="font-family: Courier New,Courier,monospace">tbm_surface</span>.
+<li>Unmap and destroy <span style="font-family: Courier New,Courier,monospace">tbm_surface</span>:
 <pre class="prettyprint">
 if (tbm_surface_unmap (surface) != TBM_SURFACE_ERROR_NONE)
 {
diff --git a/org.tizen.tutorials/html/native/location/geofence_tutorial_n.htm b/org.tizen.tutorials/html/native/location/geofence_tutorial_n.htm
index fe04c46..31c4592 100644
--- a/org.tizen.tutorials/html/native/location/geofence_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/location/geofence_tutorial_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -40,16 +40,7 @@
 
 <p>This tutorial demonstrates how you can implement the geofence-related information and services.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
 <h2>Warm-up</h2>
 <p>Become familiar with Geofence API basics by learning about:</p>
@@ -136,7 +127,7 @@ geofence_manager_stop(manager);
 geofence_manager_destroy(manager);
 manager = NULL;
 </pre>
-<p>If you destroy the handle, there is no need to call <span style="font-family: Courier New,Courier,monospace">geofence_manager_stop()</span> function to stop the service as the service is automatically stopped. Also, you do not have to unset the previously set callbacks.</p></li></ol>
+<p>If you destroy the handle, there is no need to call the <span style="font-family: Courier New,Courier,monospace">geofence_manager_stop()</span>  function to stop the service as the service is automatically stopped. Also, you do not have to unset the previously set callbacks.</p></li></ol>
 
 				<h2 id="status" name="status">Getting the Geofence Event State</h2>
 				
@@ -152,8 +143,9 @@ geofence_manager_set_geofence_event_cb(manager, geofence_event, NULL);
 <pre class="prettyprint">
 geofence_manage_e user_action;
 geofence_error_e user_error;
-void geofence_event(int place_id, int geofence_id, geofence_manager_error_e error, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;geofence_manage_e manage, void *user_data)
+void 
+geofence_event(int place_id, int geofence_id, geofence_manager_error_e error, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;geofence_manage_e manage, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;user_action = manage;
 &nbsp;&nbsp;&nbsp;user_error = error;
@@ -187,7 +179,8 @@ geofence_manager_set_geofence_state_changed_cb(manager, geofence_state_changed,
 <li><p>When the alert is received, you can use the callback to, for example, update the variables that store the current state:</p>
 <pre class="prettyprint">
 geofence_state_e received_state;
-void geofence_state_changed(int geofence_id, geofence_state_e state, void *user_data)
+void 
+geofence_state_changed(int geofence_id, geofence_state_e state, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;received_state = state;
 }
diff --git a/org.tizen.tutorials/html/native/location/location_tutorial_n.htm b/org.tizen.tutorials/html/native/location/location_tutorial_n.htm
index 3006795..42305e1 100644
--- a/org.tizen.tutorials/html/native/location/location_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/location/location_tutorial_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -75,7 +75,7 @@
 <pre class="prettyprint">
 #include &lt;locations.h&gt;
 </pre></li>
-<li><p>Create a location manager handle using the <span style="font-family: Courier New,Courier,monospace">location_manager_create()</span> function before you use it. For this example, the GPS is used as the source of the position data, so the first argument is <span style="font-family: Courier New,Courier,monospace">LOCATIONS_METHOD_GPS</span>. You can use other values of the <span style="font-family: Courier New,Courier,monospace">location_method_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_HYBRID</span> or <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_CPS</span>, but they are less accurate.</p>
+<li><p>Create a location manager handle using the <span style="font-family: Courier New,Courier,monospace">location_manager_create()</span> function before you use it. For this example, the GPS is used as the source of the position data, so the first parameter is <span style="font-family: Courier New,Courier,monospace">LOCATIONS_METHOD_GPS</span>. You can use other values of the <span style="font-family: Courier New,Courier,monospace">location_method_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_HYBRID</span> or <span style="font-family: Courier New,Courier,monospace;">LOCATIONS_METHOD_CPS</span>, but they are less accurate.</p>
 <pre class="prettyprint">
 location_manager_h manager;
 location_manager_create(LOCATIONS_METHOD_GPS, &amp;manager);
@@ -112,7 +112,8 @@ ret = location_manager_start(manager);</pre>
 	<p>The <span style="font-family: Courier New,Courier,monospace">__state_changed_cb</span> function is a callback, which is called when the status of the location service state changes. </p>
 	<pre class="prettyprint">
 static location_service_state_e service_state;
-static void __state_changed_cb(location_service_state_e state, void *user_data)
+static void 
+__state_changed_cb(location_service_state_e state, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;service_state = state;
 }
@@ -133,7 +134,8 @@ ret = location_manager_get_last_location(manager, &amp;altitude, &amp;latitude,
 
 <li>When getting the current location information, call the <span style="font-family: Courier New,Courier,monospace">location_manager_get_location()</span> function after the service is enabled:
 <pre class="prettyprint">
-static void __state_changed_cb(location_service_state_e state, void *user_data)
+static void 
+__state_changed_cb(location_service_state_e state, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;double altitude, latitude, longitude, climb, direction, speed;
 &nbsp;&nbsp;&nbsp;double horizontal, vertical;
@@ -150,7 +152,7 @@ static void __state_changed_cb(location_service_state_e state, void *user_data)
 </pre>
 </li>
 
-<li>When you no longer need the Location Manager, destroy it. You must also unset all connected callback functions and stop the Location Manager:
+<li>When you no longer need the Location Manager, destroy it, unset all connected callback functions, and stop the Location Manager:
 <pre class="prettyprint">
 location_manager_unset_service_state_changed_cb(manager);
 location_manager_stop(manager);
@@ -165,8 +167,9 @@ location_manager_destroy(manager);</pre></li></ol>
 <li><p>When the update is received, you can, for example, update the variables that store the current position:</p>
 <pre class="prettyprint">
 static double user_latitude, user_longitude;
-static void position_updated(double latitude, double longitude, double altitude, 
-&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;time_t timestamp, void *user_data)
+static void 
+position_updated(double latitude, double longitude, double altitude, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_t timestamp, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;user_latitude = latitude;
 &nbsp;&nbsp;&nbsp;user_longitude = longitude;
@@ -205,13 +208,14 @@ ret = location_bounds_create_polygon(coord_list, poly_size, &amp;bounds_poly);
 </pre>
 <p>When a circular bound is needed, use the <span style="font-family: Courier New,Courier,monospace">location_bounds_create_circle()</span> function.</p></li>
 
-<li>Get the coordinates of the generated polygon bounds. Register a callback function to notify you of the polygon coordinates:
+<li>Get the coordinates of the generated polygon bounds. Register a callback function to notify you of the polygon coordinates.
 <pre class="prettyprint">
 ret = location_bounds_foreach_polygon_coords(bounds_poly, capi_poly_coords_cb, NULL);</pre>
 <p>Implement the callback function (the second parameter in the function above) separately:</p>
 <pre class="prettyprint">
 static double latitude, longitude;
-static bool capi_poly_coords_cb(location_coords_s coords, void *user_data)
+static bool 
+capi_poly_coords_cb(location_coords_s coords, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;latitude = coords.latitude;
 &nbsp;&nbsp;&nbsp;longitude = coords.longitude;
@@ -225,7 +229,8 @@ static bool capi_poly_coords_cb(location_coords_s coords, void *user_data)
 <p>Implement the <span style="font-family: Courier New,Courier,monospace">bounds_state_changed_cb</span> callback separately:</p>
 <pre class="prettyprint">
 static location_boundary_state_e bound_state;
-static void bounds_state_changed_cb(location_boundary_state_e state, void *user_data)
+static void 
+bounds_state_changed_cb(location_boundary_state_e state, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;bound_state = state;
 }
@@ -248,7 +253,7 @@ location_bounds_destroy(bounds_poly);</pre></li>
 gps_status_set_satellite_updated_cb(manager, capi_gps_status_satellite_updated_cb, 10, NULL);
 </pre>
 <p>The third parameter determines the frequency of callback calls. In this example, the callback is called every 10 seconds.</p> </li>
-<li>When the update is received, the callback having brief satellite information is called. To get the detailed satellite information in the sky, call the <span style="font-family: Courier New,Courier,monospace">gps_status_foreach_satellites_in_view()</span> function in the callback. Variables that store the current satellite information are updated:
+<li>When the update is received, the callback having brief satellite information is called. To get the detailed satellite information in the sky, call the <span style="font-family: Courier New,Courier,monospace">gps_status_foreach_satellites_in_view()</span> function in the callback. Variables that store the current satellite information are updated.
 
 <pre class="prettyprint">
 int cur_azimuth, cur_elevation, cur_prn, cur_snr;
@@ -372,7 +377,7 @@ location_manager_get_location(manager, &amp;altitude, &amp;latitude, &amp;longit
 
 <li>Get the distance.
 <p>To get a distance (in meters) between 2 points, use the <span style="font-family: Courier New,Courier,monospace;">location_manager_get_distance()</span> function. The obtained value is a great-circle distance; the shortest distance between 2 points on the sphere.</p>
-<p>Provide the latitude and longitude of the starting point, the latitude and longitude of the end point, and the variable to store the obtained distance:</p>
+<p>Provide the latitude and longitude of the starting point, the latitude and longitude of the end point, and the variable to store the obtained distance.</p>
 
 <pre class="prettyprint">
 double distance;
diff --git a/org.tizen.tutorials/html/native/location/location_tutorials_n.htm b/org.tizen.tutorials/html/native/location/location_tutorials_n.htm
index 9eb76f3..f5b59d7 100644
--- a/org.tizen.tutorials/html/native/location/location_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/location/location_tutorials_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
@@ -35,14 +35,13 @@
 	<ul>
         <li><a href="location_tutorial_n.htm">Location: Using Location Information and Service</a> 
 		<p>Demonstrates how you can retrieve the location of the device.</p></li> 
+		<li><a href="maps_tutorial_n.htm">Maps Service: Using the Map Service</a> 
+        <p>Demonstrates how you can use the map service to query geocodes and routes, and search for places.</p></li>		
 	</ul>
 <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
 	<ul>
         <li><a href="geofence_tutorial_n.htm">Geofence: Creating and Using Geofences</a> 
 		<p>Demonstrates how you can create and use geofences.</p></li>
-		<li><a href="maps_tutorial_n.htm">Maps Service: Using the Map Service</a> 
-        <p>Demonstrates how you can use the map service to query geocodes and routes, and search for places.</p></li>
-
 	</ul>
 
  			
diff --git a/org.tizen.tutorials/html/native/location/maps_tutorial_n.htm b/org.tizen.tutorials/html/native/location/maps_tutorial_n.htm
index 6f4a890..022b4ed 100644
--- a/org.tizen.tutorials/html/native/location/maps_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/location/maps_tutorial_n.htm
@@ -19,7 +19,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border">
 		<div id="toc">
@@ -39,6 +39,7 @@
 			<ul class="toc">
 				<li><a href="../../../../org.tizen.guides/html/native/location/maps_n.htm">Maps Service Guide</a></li>
 		    		<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service API for Mobile Native</a></li>
+					<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service API for Wearable Native</a></li>
 			</ul>
 	    	</div>
 	</div>
@@ -52,18 +53,6 @@
 
 <p>This tutorial demonstrates how you can use the map service to query geocodes and routes, and search for places.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-
 <h2>Warm-up</h2>
 <p>Become familiar with the Maps Service API basics by learning about:</p>
 <ul>
@@ -105,22 +94,24 @@
 
 <p>To start using the map service:</p>
 <ol>
-<li><p>To use the functions and data types of the Maps Service API, include the <span style="font-family: Courier New,Courier,monospace;"> &lt;maps_service.h&gt; </span> header file in your application:</p>
+<li><p>To use the functions and data types of the Maps Service API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"> &lt;maps_service.h&gt; </span> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;maps_service.h&gt;
 </pre>
 </li>
 
-<li>The Maps Service instance relies on a particular map provider. To get a list of available map providers, use the <span style="font-family: Courier New,Courier,monospace;">maps_service_foreach_provider()</span> function:
+<li>The Maps Service instance relies on a particular map provider. To get a list of available map providers, use the <span style="font-family: Courier New,Courier,monospace;">maps_service_foreach_provider()</span> function.
 <pre class="prettyprint">
-static bool _maps_service_provider_info_cb(char* maps_provider, void* user_data)
+static bool 
+_maps_service_provider_info_cb(char* maps_provider, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Handle the map provider name, passed as maps_provider
 
 &nbsp;&nbsp;&nbsp;return bool;
 }
 
-void get_available_providers()
+void 
+get_available_providers()
 {
 &nbsp;&nbsp;&nbsp;void *user_data = NULL;
 &nbsp;&nbsp;&nbsp;const int error = maps_service_foreach_provider(_maps_service_provider_info_cb, user_data);
@@ -162,7 +153,7 @@ const bool is_routing_supported = (error == MAPS_ERROR_NONE) ? supported : false
 error = maps_service_provider_is_service_supported(maps, MAPS_SERVICE_SEARCH_ROUTE_WAYPOINTS, &amp;supported);
 const bool is_routing_waypoints_supported = (error == MAPS_ERROR_NONE) ? supported : false;
 </pre>
-<p>To check for the availability of other services, follow the same approach using the keys from the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8afd98ceb094d4c3edaf603051a69f8e">maps_service_e</a> enumerator.</p>
+<p>To check for the availability of other services, follow the same approach using the keys from the <span style="font-family: Courier New,Courier,monospace;">maps_service_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8afd98ceb094d4c3edaf603051a69f8e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8afd98ceb094d4c3edaf603051a69f8e">wearable</a> applications).</p>
 </li>
 
 <li>Optionally, check which data features are available for the desired services using the <span style="font-family: Courier New,Courier,monospace;">maps_service_provider_is_data_supported()</span> function:
@@ -191,7 +182,7 @@ if (is_route_segment_maneuvers_supported)
 &nbsp;&nbsp;&nbsp;// Use segment maneuvers
 }
 </pre>
-<p>To check the availability of other data features, follow the same approach using the keys from the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8f22bd07fe9300b3f3f1c74e83f1e272">maps_service_data_e</a> enumerator.</p>
+<p>To check the availability of other data features, follow the same approach using the keys from the <span style="font-family: Courier New,Courier,monospace;">maps_service_data_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8f22bd07fe9300b3f3f1c74e83f1e272">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8f22bd07fe9300b3f3f1c74e83f1e272">wearable</a> applications).</p>
 </li>
 
 <li><p>Set general preferences, such as language and distance units, using the <span style="font-family: Courier New,Courier,monospace;">maps_service_set_preference()</span> function:</p>
@@ -305,8 +296,9 @@ if (error != MAPS_ERROR_NONE)
 
 <li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_geocode_cb()</span> callback to receive the service response:
 <pre class="prettyprint">
-static bool __maps_service_geocode_cb(maps_error_e result, int request_id, int index, int total, 
-&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;maps_coordinates_h coordinates, void* user_data)
+static bool 
+__maps_service_geocode_cb(maps_error_e result, int request_id, int index, int total, 
+&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;maps_coordinates_h coordinates, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Handle the obtained coordinate data
 
@@ -337,8 +329,9 @@ if (error != MAPS_ERROR_NONE)
 
 <li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_reverse_geocode_cb()</span> callback to receive the service response:
 <pre class="prettyprint">
-static void __maps_service_reverse_geocode_cb(maps_error_e result, int request_id, int index, int total, 
-&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;maps_address_h address, void* user_data)
+static void 
+__maps_service_reverse_geocode_cb(maps_error_e result, int request_id, int index, int total, 
+&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;maps_address_h address, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Handle the obtained address
 
@@ -407,8 +400,9 @@ if (error != MAPS_ERROR_NONE)
 
 <li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_search_place_cb()</span> callback to receive the service response:
 <pre class="prettyprint">
-static bool __maps_service_search_place_cb(maps_error_e error, int request_id, int index, int total, 
-&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;maps_place_h place, void* user_data)
+static bool 
+__maps_service_search_place_cb(maps_error_e error, int request_id, int index, int total, 
+&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;maps_place_h place, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Handle the obtained place data
 
@@ -468,8 +462,9 @@ if (error != MAPS_ERROR_NONE)
 
 <li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_search_route_cb()</span> callback to receive the service response:
 <pre class="prettyprint">
-static bool __maps_service_search_route_cb(maps_error_e error, int request_id, int index, int total, 
-&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;maps_route_h route, void* user_data)
+static bool 
+__maps_service_search_route_cb(maps_error_e error, int request_id, int index, int total, 
+&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;maps_route_h route, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Handle the obtained route data
 
@@ -637,7 +632,8 @@ if (error != MAPS_ERROR_NONE)
 
 <li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_place_categories_cb()</span> callback:
 <pre class="prettyprint">
-static bool __maps_place_categories_cb(int index, int total, maps_place_category_h category, void* user_data)
+static bool 
+__maps_place_categories_cb(int index, int total, maps_place_category_h category, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Handle the obtained place category data
 
@@ -673,7 +669,8 @@ if (error != MAPS_ERROR_NONE)
 
 <li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_place_properties_cb()</span> callback:
 <pre class="prettyprint">
-static bool __maps_place_properties_cb(int index, int total, char* key, void* value, void* user_data)
+static bool 
+__maps_place_properties_cb(int index, int total, char* key, void* value, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Handle the obtained property:
 &nbsp;&nbsp;&nbsp;// property_name: key
@@ -788,7 +785,8 @@ if (error != MAPS_ERROR_NONE)
 
 <li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_route_path_cb()</span> callback:
 <pre class="prettyprint">
-static bool __maps_route_path_cb(int index, int total, maps_coordinates_h coordinates, void* user_data)
+static bool 
+__maps_route_path_cb(int index, int total, maps_coordinates_h coordinates, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Handle the obtained route path coordinates
 
@@ -812,8 +810,8 @@ if (error != MAPS_ERROR_NONE)
 
 <li><p>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_route_segment_cb()</span> callback:</p>
 <pre class="prettyprint">
-static bool __maps_route_segment_cb(int index, int total,
-maps_route_segment_h segment, void* user_data)
+static bool 
+__maps_route_segment_cb(int index, int total, maps_route_segment_h segment, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Handle the obtained route segment
 
@@ -842,7 +840,8 @@ if (error != MAPS_ERROR_NONE)
 
 <li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_route_properties_cb()</span> callback:
 <pre class="prettyprint">
-static bool __maps_route_properties_cb(int index, int total, char* key, void* value, void* user_data)
+static bool 
+__maps_route_properties_cb(int index, int total, char* key, void* value, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;// Handle the obtained property:
 &nbsp;&nbsp;&nbsp;// property_name: key
diff --git a/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm
index 80a561f..e4ca1b9 100644
--- a/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -40,16 +40,7 @@
   
 <p>This tutorial demonstrates how you can send email messages with attachments.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
         <h2>Warm-up</h2>
         <p>Become familiar with the Email API basics by learning about:</p>
@@ -78,7 +69,7 @@
 <p>To create and send email messages:</p>
 
 <ol><li>Create an email message.
-<p>To create an email message and receive its handle, use the <span style="font-family: Courier New,Courier,monospace;">email_create_message()</span> function. The function return code informs about success or failure:</p>
+<p>To create an email message and receive its handle, use the <span style="font-family: Courier New,Courier,monospace;">email_create_message()</span> function. The function return code informs about success or failure.</p>
 <pre class="prettyprint">email_h msg;
 int error_code = EMAILS_ERROR_NONE;
 error_code = email_create_message(&amp;msg);
@@ -89,7 +80,7 @@ if (error_code != EMAILS_ERROR_NONE)
 <p>One of the possible error codes that is not related to the Email module itself is <span style="font-family: Courier New,Courier,monospace;">EMAIL_ERROR_ACCOUNT_NOT_FOUND</span>. This error occurs if no email account has been configured on a device.</p></li>
 
 <li>Add recipients and attachments.
-<p>Email recipients can be added to the email message one by one. There is no possibility to add lists of recipients in one function call. Each address has to be given as a character string and the address type (TO, CC, BCC) has to be declared:</p>
+<p>Email recipients can be added to the email message one by one. There is no possibility to add lists of recipients in one function call. Each address has to be given as a character string and the address type (TO, CC, BCC) has to be declared.</p>
 <pre class="prettyprint">error_code = email_add_recipient(msg, EMAIL_RECIPIENT_TYPE_TO, &quot;example@mail.com&quot;);
 if (error_code != EMAILS_ERROR_NONE) 
 {
@@ -103,7 +94,7 @@ if (error_code != EMAILS_ERROR_NONE)
 }</pre></li>
 
 <li>Remove recipients or attachments.
-<p>You can remove added recipients and attachments. In both cases, all recipients or attachments are removed at once. It is not possible to remove one selected item. As all functions from the Email API, the <span style="font-family: Courier New,Courier,monospace;">email_remove_all_attachments()</span> and <span style="font-family: Courier New,Courier,monospace;">email_remove_all_recipients()</span> functions inform about success or failure by the returned error code:</p>
+<p>You can remove added recipients and attachments. In both cases, all recipients or attachments are removed at once. It is not possible to remove one selected item. As all functions from the Email API, the <span style="font-family: Courier New,Courier,monospace;">email_remove_all_attachments()</span> and <span style="font-family: Courier New,Courier,monospace;">email_remove_all_recipients()</span> functions inform about success or failure by the returned error code.</p>
 <pre class="prettyprint">error_code = email_remove_all_recipients(msg);
 if (error_code != EMAILS_ERROR_NONE) 
 {
@@ -115,7 +106,7 @@ if (error_code != EMAILS_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to remove attachments\n&quot;);
 }</pre></li>
 
-<li>Save the email before sending it.
+<li>Save the email before sending it:
 <pre class="prettyprint">error_code = email_save_message(msg);
 if (error_code != EMAILS_ERROR_NONE) 
 {
@@ -124,8 +115,9 @@ if (error_code != EMAILS_ERROR_NONE)
 </pre></li>
 
 <li>Define the email sending status callback.
-<p>Email sending is an asynchronous operation, and thus the sending status cannot be checked directly in the return code from the <span style="font-family: Courier New,Courier,monospace;">email_send_message()</span> function. To receive notifications about sending success or failure, a callback function must be defined:</p>
-<pre class="prettyprint">static void email_send_status(email_h email, email_sending_e result, void *user_data) 
+<p>Email sending is an asynchronous operation, and thus the sending status cannot be checked directly in the return code from the <span style="font-family: Courier New,Courier,monospace;">email_send_message()</span> function. To receive notifications about sending success or failure, a callback function must be defined.</p>
+<pre class="prettyprint">static void 
+email_send_status(email_h email, email_sending_e result, void *user_data) 
 {
 &nbsp;&nbsp;&nbsp;if (result == EMAIL_SENDING_FAILED) 
 &nbsp;&nbsp;&nbsp;{
@@ -140,7 +132,7 @@ if (error_code != EMAILS_ERROR_NONE)
 }</pre></li>
 
 <li>Send the email.
-<p>If the email message object is ready and the sending status callback is defined, the message can be sent:</p>
+<p>If the email message object is ready and the sending status callback is defined, the message can be sent.</p>
 <pre class="prettyprint">error_code = email_set_message_sent_cb(msg, email_send_status, NULL);
 if (error_code != EMAILS_ERROR_NONE) 
 {
@@ -152,7 +144,7 @@ if (error_code != EMAILS_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;&quot;);
 }</pre>
-<p>When the message is sent or if sending was canceled and the message is no longer needed, delete it using the <span style="font-family: Courier New,Courier,monospace;">email_destroy_message()</span> function. The callback registered for the specified message must also be unset using the <span style="font-family: Courier New,Courier,monospace;">email_unset_message_sent_cb()</span> callback function:</p>
+<p>When the message is sent or if sending was canceled and the message is no longer needed, delete it using the <span style="font-family: Courier New,Courier,monospace;">email_destroy_message()</span> function. The callback registered for the specified message must also be unset using the <span style="font-family: Courier New,Courier,monospace;">email_unset_message_sent_cb()</span> callback function.</p>
 <pre class="prettyprint">error_code = email_unset_message_sent_cb(msg);
 if (error_code != EMAILS_ERROR_NONE) 
 {
diff --git a/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm b/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm
index af9fcc7..17c3aea 100644
--- a/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         
diff --git a/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm
index b4950bf..0d87da6 100644
--- a/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -192,12 +192,13 @@ push_service_connection_h push_conn;
 <p>To manage push service connections:</p>
 <ol>
 <li>Connect to the push service.
-<p>Once the connection handle is defined, use the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function to connect the push service:</p>
+<p>Once the connection handle is defined, use the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function to connect the push service.</p>
 
 <pre class="prettyprint">
 #define PUSH_APP_ID &quot;YOUR_PUSH_ID_HERE&quot;
 
-static bool app_create(void *data)
+static bool 
+app_create(void *data)
 {
 &nbsp;&nbsp;&nbsp;int ret;
 
@@ -214,7 +215,7 @@ static bool app_create(void *data)
 }
 </pre>
 
-<p>In the above example, the application establishes a socket connection to the push service using the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. The <span style="font-family: Courier New,Courier,monospace;">YOUR_PUSH_ID_HERE</span> argument is the push app ID received from the Tizen push server team when the access to the server was requested. Keep this push app ID confidential, otherwise your push notifications can be hijacked by malicious applications.</p>
+<p>In the above example, the application establishes a socket connection to the push service using the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. The <span style="font-family: Courier New,Courier,monospace;">YOUR_PUSH_ID_HERE</span> parameter is the push app ID received from the Tizen push server team when the access to the server was requested. Keep this push app ID confidential, otherwise your push notifications can be hijacked by malicious applications.</p>
 <p>The <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> parameters are callback functions called when the <a href="#state">state changes</a> or <a href="#dealing">a notification arrives from the server</a> through the push service.</p>
 
 <p>The <span style="font-family: Courier New,Courier,monospace;">push_conn</span> parameter is the output of the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. If the connection between your application and the service is successful, the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function returns <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> and the <span style="font-family: Courier New,Courier,monospace;">push_conn</span> connection handle is returned through the last parameter. If the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function returns other values, the connection to the service failed. This happens most likely when the <a href="#privilege">push privilege</a> is not added in the SDK.</p>
@@ -246,10 +247,11 @@ push_conn = NULL;
 <li>If your application is not currently registered to the push server, the state transits from the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state to the <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span> state. In this case, your application can request registration to the push server through the push service using the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function. If this request is approved by the push server, the state transits to <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>.</li>
 <li>When an error occurs, the state transits to <span style="font-family: Courier New,Courier,monospace;">ERROR</span>.</li></ul>
 
-<p>When the current state transits, the <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> function is called and the new state is obtained from the first argument. The application then needs to determine its actions based on the new state:</p>
+<p>When the current state transits, the <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> function is called and the new state is obtained from the first parameter. The application then needs to determine its actions based on the new state:</p>
 
 <pre class="prettyprint">
-static void _state_cb(push_service_state_e state, const char *err, void *user_data)	
+static void 
+_state_cb(push_service_state_e state, const char *err, void *user_data)	
 {
 &nbsp;&nbsp;&nbsp;switch (state)	
 &nbsp;&nbsp;&nbsp;{
@@ -275,21 +277,22 @@ static void _state_cb(push_service_state_e state, const char *err, void *user_da
 }
 </pre>
 
-<p>In the above example, the <span style="font-family: Courier New,Courier,monospace;">_on_state_registered()</span>, <span style="font-family: Courier New,Courier,monospace;">_on_state_unregistered()</span>, and <span style="font-family: Courier New,Courier,monospace;">_on_state_error()</span> functions contain the actions for the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>, <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>, and <span style="font-family: Courier New,Courier,monospace;">ERROR</span> states, respectively. Your application does not need to handle the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state because it is maintained internally, and this callback function is never invoked in this state. The second argument, <span style="font-family: Courier New,Courier,monospace;">err</span>, is the error message from the push service when the state becomes ERROR. Consequently, only the <span style="font-family: Courier New,Courier,monospace;">_on_state_error()</span> function takes this argument while others ignore it.</p>
+<p>In the above example, the <span style="font-family: Courier New,Courier,monospace;">_on_state_registered()</span>, <span style="font-family: Courier New,Courier,monospace;">_on_state_unregistered()</span>, and <span style="font-family: Courier New,Courier,monospace;">_on_state_error()</span> functions contain the actions for the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>, <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>, and <span style="font-family: Courier New,Courier,monospace;">ERROR</span> states, respectively. Your application does not need to handle the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state because it is maintained internally, and this callback function is never invoked in this state. The second parameter, <span style="font-family: Courier New,Courier,monospace;">err</span>, is the error message from the push service when the state becomes <span style="font-family: Courier New,Courier,monospace;">ERROR</span>. Consequently, only the <span style="font-family: Courier New,Courier,monospace;">_on_state_error()</span> function takes this parameter while others ignore it.</p>
 </li>
 </ol>
 
  <h2 id="registration" name="registration">Registering with the Push Server</h2>
 
 <p>To receive push notifications, your application must send a registration request to the Tizen push server. When the server receives this request, it assigns a registration ID that is unique to your application on the particular device. When sending a notification from your application server, this registration ID is used as a destination address of your application. If your application no longer needs to receive push notifications, it needs to send a deregistration request to the server.</p>
-
+<p>To register with the push server:</p>
 <ol>
 <li>Request registration.
 <p>After connecting to the push service, request registration using the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function.</p>
-<p>The function takes 3 arguments. The first argument is the connection handle that was returned from the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. The second argument is the callback function that returns the result of this registration request. The last argument is the user data to be handed over to the result callback function. </p>
+<p>The function takes 3 parameters. The first parameter is the connection handle that was returned from the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. The second parameter is the callback function that returns the result of this registration request. The last parameter is the user data to be handed over to the result callback function. </p>
 
 <pre class="prettyprint">
-static void _on_state_unregistered(void *user_data) 
+static void 
+_on_state_unregistered(void *user_data) 
 {
 &nbsp;&nbsp;&nbsp;int ret;
 
@@ -300,10 +303,11 @@ static void _on_state_unregistered(void *user_data)
 
 <p>The <span style="font-family: Courier New,Courier,monospace;">_on_state_unregistered()</span> function containing the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function is called when the state transits to <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>. This sample application is designed to send the registration request as soon as it is connected to the push service. If your application requires users to login to your service, this registration request must be sent after the login process is complete.</p>
 
-<p>Note that the registration request is non-blocking. If <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> returns from the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function, your request is successfully delivered to the push service. However, it does not necessarily mean that your request is approved by the server. If the push service successfully sends your request to the server and receives an approval, the <span style="font-family: Courier New,Courier,monospace;">_result_cb()</span> callback is called with <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_RESULT_SUCCESS</span> from the first parameter:</p>
+<p>Note that the registration request is non-blocking. If <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> returns from the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function, your request is successfully delivered to the push service. However, it does not necessarily mean that your request is approved by the server. If the push service successfully sends your request to the server and receives an approval, the <span style="font-family: Courier New,Courier,monospace;">_result_cb()</span> callback is called with <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_RESULT_SUCCESS</span> from the first parameter.</p>
 
 <pre class="prettyprint">
-static void _result_cb(push_service_result_e result, const char *msg, void *user_data) 
+static void 
+_result_cb(push_service_result_e result, const char *msg, void *user_data) 
 {
 &nbsp;&nbsp;&nbsp;if (result == PUSH_SERVICE_RESULT_SUCCESS)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Registration request is approved.&quot;);
@@ -314,7 +318,7 @@ static void _result_cb(push_service_result_e result, const char *msg, void *user
 }
 </pre>
 
-<p>When an error occurs in the middle of the registration process, the reason is returned from the first parameter of the callback. For example, if the push server is not responding, the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function returns <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> (because delivery to the service is successful), but the <span style="font-family: Courier New,Courier,monospace;">_result_cb()</span> function is called later with <span style="font-family: Courier New,Courier,monospace;">PUSH_RESULT_TIMEOUT</span>. In this case, your application does not need to request registration again because the push service keeps the previous request and sends it when the network becomes online. The <span style="font-family: Courier New,Courier,monospace;">msg</span> argument is the error message from the push service if the request fails.</p>
+<p>When an error occurs in the middle of the registration process, the reason is returned from the first parameter of the callback. For example, if the push server is not responding, the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function returns <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> (because delivery to the service is successful), but the <span style="font-family: Courier New,Courier,monospace;">_result_cb()</span> function is called later with <span style="font-family: Courier New,Courier,monospace;">PUSH_RESULT_TIMEOUT</span>. In this case, your application does not need to request registration again because the push service keeps the previous request and sends it when the network becomes online. The <span style="font-family: Courier New,Courier,monospace;">msg</span> parameter is the error message from the push service if the request fails.</p>
 </li>
 
 <li id="upon" name="upon">
@@ -331,7 +335,8 @@ static void _result_cb(push_service_result_e result, const char *msg, void *user
 </ul>
 
 <pre class="prettyprint">
-static void _on_state_registered(void *user_data) 
+static void 
+_on_state_registered(void *user_data) 
 {
 &nbsp;&nbsp;&nbsp;int ret;
 &nbsp;&nbsp;&nbsp;char *reg_id = NULL;
@@ -346,6 +351,7 @@ static void _on_state_registered(void *user_data)
 &nbsp;&nbsp;&nbsp;if (ret != PUSH_SERVICE_ERROR_NONE)	
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;ERROR [%d]: push_service_get_registration_id()&quot;, ret);
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 &nbsp;&nbsp;&nbsp;}
 
@@ -369,7 +375,8 @@ static void _on_state_registered(void *user_data)
 #include &lt;openssl/sha.h&gt;
 #define PUSH_HASH_KEY &quot;existing_push_reg_id&quot;
 
-static void _send_reg_id_if_necessary(const char *reg_id)
+static void 
+_send_reg_id_if_necessary(const char *reg_id)
 {
 &nbsp;&nbsp;&nbsp;unsigned char md[SHA_DIGEST_LENGTH];
 &nbsp;&nbsp;&nbsp;char hash_string[2*SHA_DIGEST_LENGTH+1];
@@ -413,13 +420,13 @@ static void _send_reg_id_if_necessary(const char *reg_id)
 </li>
 
 <li>Request deregistration.
-<p>When your application no longer wants to receive push notifications, use the following function to request deregistration:</p>
+<p>When your application no longer wants to receive push notifications, use the following function to request deregistration.</p>
 
 <pre class="prettyprint">
 push_service_deregister(push_conn, _dereg_result_cb, NULL);
 </pre>
 
-<p>This function is non-blocking. If <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> returns from this function, the request is successfully received by the push service. The result of this request is returned in the <span style="font-family: Courier New,Courier,monospace;">_dereg_result_cb()</span> callback function. The third argument is the pointer to the user data which is handed over to the result function.</p>
+<p>This function is non-blocking. If <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_ERROR_NONE</span> returns from this function, the request is successfully received by the push service. The result of this request is returned in the <span style="font-family: Courier New,Courier,monospace;">_dereg_result_cb()</span> callback function. The third parameter is the pointer to the user data which is handed over to the result function.</p>
 
 <p>Note that the <span style="font-family: Courier New,Courier,monospace;">push_service_deregister()</span> function is not used, if the application is intended to receive push notifications while being installed. If the application is uninstalled, the push service detects the event and deregisters the application automatically. In contrast, if the application wants to receive push notifications only when a user logs in, the <span style="font-family: Courier New,Courier,monospace;">push_service_deregister()</span> function must be called whenever a user logs out.</p>
 </li>
@@ -446,42 +453,42 @@ push_service_deregister(push_conn, _dereg_result_cb, NULL);
 <tr>
  <td>00</td>
  <td>US East</td>
- <td>https://useast.push.samsungosp.com:8088/spp/pns/api/push</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">https://useast.push.samsungosp.com:8088/spp/pns/api/push</span></td>
 </tr>
 <tr>
  <td>01</td>
  <td>US West</td>
- <td>https://uswest.push.samsungosp.com:8088/spp/pns/api/push</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">https://uswest.push.samsungosp.com:8088/spp/pns/api/push</span></td>
 </tr>
 <tr>
  <td>02</td>
  <td>Asia Pacific Southeast</td>
- <td>https://apsoutheast.push.samsungosp.com:8088/spp/pns/api/push</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">https://apsoutheast.push.samsungosp.com:8088/spp/pns/api/push</span></td>
 </tr>
 <tr>
  <td>03</td>
  <td>EU West</td>
- <td>https://euwest.push.samsungosp.com:8088/spp/pns/api/push</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">https://euwest.push.samsungosp.com:8088/spp/pns/api/push</span></td>
 </tr>
 <tr>
  <td>04</td>
  <td>Asia Pacific Northeast</td>
- <td>https://apnortheast.push.samsungosp.com:8088/spp/pns/api/push</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">https://apnortheast.push.samsungosp.com:8088/spp/pns/api/push</span></td>
 </tr>
 <tr>
  <td>05</td>
  <td>Korea</td>
- <td>https://apkorea.push.samsungosp.com:8088/spp/pns/api/push</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">https://apkorea.push.samsungosp.com:8088/spp/pns/api/push></span></td>
 </tr>
 <tr>
  <td>06</td>
  <td>China</td>
- <td>https://apchina.push.samsungosp.com.cn:8088/spp/pns/api/push</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">https://apchina.push.samsungosp.com.cn:8088/spp/pns/api/push</span></td>
 </tr>
 <tr>
  <td>7C</td>
  <td>Staging (AP Northeast)</td>
- <td>https://175.41.248.50:8088/spp/pns/api/push</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">https://175.41.248.50:8088/spp/pns/api/push</span></td>
 </tr>
 </tbody>
 </table>
@@ -502,33 +509,33 @@ push_service_deregister(push_conn, _dereg_result_cb, NULL);
 </tr>
 <tr>
  <td><span style="font-family: Courier New,Courier,monospace;">action</span></td>
- <td>ALERT: Store the message and alert the user.
-	<p>SILENT: Store the message without alerting the user.</p>
-	<p>DISCARD: Discard the message.</p>
-	<p>LAUNCH: Forcibly launch the app and deliver the notification.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">ALERT</span>: Store the message and alert the user.
+	<p><span style="font-family: Courier New,Courier,monospace;">SILENT</span>: Store the message without alerting the user.</p>
+	<p><span style="font-family: Courier New,Courier,monospace;">DISCARD</span>: Discard the message.</p>
+	<p><span style="font-family: Courier New,Courier,monospace;">LAUNCH</span>: Forcibly launch the app and deliver the notification.</p></td>
  <td>Action to be performed if the application is not running. If action is not included, the default behavior is SILENT.</td>
 </tr>
 <tr>
  <td><span style="font-family: Courier New,Courier,monospace;">alertMessage</span></td>
  <td>Up to 127 bytes</td>
- <td>Alert message shown to the user in the quick panel. If the action is not set as ALERT, this value is meaningless.</td>
+ <td>Alert message shown to the user in the quick panel. If the action is not set as <span style="font-family: Courier New,Courier,monospace;">ALERT</span>, this value is meaningless.</td>
 </tr>
 <tr>
  <td><span style="font-family: Courier New,Courier,monospace;">badgeOption</span></td>
- <td>INCREASE: Increase the badge number by the given value.
-	<p>DECREASE: Decrease the badge number by the given value.</p>
-	<p>SET: Set badge number to the given value.</p></td>
- <td>Option for updating the icon badge number. If the action is set as DISCARD, the <span style="font-family: Courier New,Courier,monospace;">badgeOption</span> is ignored. If it is not included, the icon badge number remains unchanged.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">INCREASE</span>: Increase the badge number by the given value.
+	<p><span style="font-family: Courier New,Courier,monospace;">DECREASE</span>: Decrease the badge number by the given value.</p>
+	<p><span style="font-family: Courier New,Courier,monospace;">SET</span>: Set badge number to the given value.</p></td>
+ <td>Option for updating the icon badge number. If the action is set as <span style="font-family: Courier New,Courier,monospace;">DISCARD</span>, the <span style="font-family: Courier New,Courier,monospace;">badgeOption</span> is ignored. If it is not included, the icon badge number remains unchanged.</td>
 </tr>
 <tr>
- <td>badgeNumber</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">badgeNumber</span></td>
  <td>0-999</td>
   <td>-</td>
 </tr>
 </tbody>
 </table>
 
-<p>For example, to show a &quot;Hi&quot; message in the quick panel and increase the badge count by 1 when the notification arrives at the device, the message field of the notification must be as follows:</p>
+<p>For example, to show a &quot;Hi&quot; message in the quick panel and increase the badge count by 1 when the notification arrives at the device, the message field of the notification must be the following:</p>
 
 <pre class="prettyprint">&quot;badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi&quot;</pre>
 
@@ -677,7 +684,8 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 
 <li>Example response
 <p>If the push server receives a notification request, the server returns a JSON string that contains the <span style="font-family: Courier New,Courier,monospace;">regID</span>, <span style="font-family: Courier New,Courier,monospace;">requestID</span>, status code, and status message. If the request contains a malformed JSON format, requests are not processed and are returned without the <span style="font-family: Courier New,Courier,monospace;">regID</span> and <span style="font-family: Courier New,Courier,monospace;">requestID</span> values. If the request is of the JSON format but has invalid data, no requests are processed and are considered as an error. This return message only shows whether receiving notification request was successful. This return message does not deal with whether the push client receives the notification. The order of the return message is the same as the request message order.</p>
-
+<ul>
+<li>
 <p>The following example is shown if the request is successful:</p>
 <pre class="prettyprint">
 {
@@ -690,6 +698,8 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 &nbsp;&nbsp;&nbsp;}]
 }
 </pre>
+</li>
+<li>
 <p>The following example is shown if the request fails due to malformation:</p>
 <pre class="prettyprint">
 {
@@ -701,7 +711,10 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;:&quot;error of json mapping exception&quot;
 &nbsp;&nbsp;&nbsp;}]
 }
-</pre><p>The following example is shown if the request fails due to abnormal data:</p>
+</pre>
+</li>
+<li>
+<p>The following example is shown if the request fails due to abnormal data:</p>
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;&quot;results&quot;:
@@ -717,6 +730,8 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 </ul>
 </li>
 </ul>
+</li>
+</ul>
 
  <h2 id="dealing" name="dealing">Handling Push Notifications</h2>
 
@@ -726,10 +741,11 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 
 <ul>
 <li id="receive" name="receive">Receive notifications when the application is running.
-<p>When a notification arrives to your application while it is running (precisely, your application is connected to the service), the <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> function is called as defined in the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. In this callback function, you can handle the received notification. The following example shows how your application can retrieve the app data (payload), message, and timestamp from the received notification:</p>
+<p>When a notification arrives to your application while it is running (precisely, your application is connected to the service), the <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> function is called as defined in the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. In this callback function, you can handle the received notification. The following example shows how your application can retrieve the app data (payload), message, and timestamp from the received notification.</p>
 
 <pre class="prettyprint">
-static void _noti_cb(push_service_notification_h noti, void *user_data)
+static void 
+_noti_cb(push_service_notification_h noti, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;int ret;
 
@@ -792,7 +808,8 @@ static void _noti_cb(push_service_notification_h noti, void *user_data)
 </p>
 
 <pre class="prettyprint">
-static void app_control(app_control_h app_control, void *data)
+static void 
+app_control(app_control_h app_control, void *data)
 {
 &nbsp;&nbsp;&nbsp;char *op = NULL;
 &nbsp;&nbsp;&nbsp;push_service_notification_h noti = NULL;
@@ -823,7 +840,7 @@ static void app_control(app_control_h app_control, void *data)
 }
 </pre>
 
-<p>When you create your project in the SDK, the <span style="font-family: Courier New,Courier,monospace;">app_control()</span> function is created automatically. When your application is launched by the push service, all related information regarding this launch request is delivered through the <span style="font-family: Courier New,Courier,monospace;">app_control</span> argument. From this handle, retrieve the <span style="font-family: Courier New,Courier,monospace;">op</span> operation using the <span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span> function. With <span style="font-family: Courier New,Courier,monospace;">app_control</span> and <span style="font-family: Courier New,Courier,monospace;">op</span>, retrieve the notification data using the <span style="font-family: Courier New,Courier,monospace;">push_service_app_control_to_noti_data()</span> function. If your application is not launched by the push service, this function returns as <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+<p>When you create your project in the SDK, the <span style="font-family: Courier New,Courier,monospace;">app_control()</span> function is created automatically. When your application is launched by the push service, all related information regarding this launch request is delivered through the <span style="font-family: Courier New,Courier,monospace;">app_control</span> parameter. From this handle, retrieve the <span style="font-family: Courier New,Courier,monospace;">op</span> operation using the <span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span> function. With <span style="font-family: Courier New,Courier,monospace;">app_control</span> and <span style="font-family: Courier New,Courier,monospace;">op</span>, retrieve the notification data using the <span style="font-family: Courier New,Courier,monospace;">push_service_app_control_to_noti_data()</span> function. If your application is not launched by the push service, this function returns as <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
 
 <p>For the second option, you need to set the action to <span style="font-family: Courier New,Courier,monospace;">ALERT</span> or <span style="font-family: Courier New,Courier,monospace;">SILENT</span> in the message field when sending the notification from the application server. When such a notification arrives at the device, the push service keeps the notification in the database and waits for the request from the application. The difference of the 2 options is that the former shows the alert message in the quick panel and changes the badge count while the latter does not. If the user clicks the message in the quick panel, the push service forcibly launches the application and delivers the notification through the app control callback function as in the first option. </p>
 
@@ -832,7 +849,7 @@ static void app_control(app_control_h app_control, void *data)
 
 <li>Request unread notifications.
 
-<p>If the user does not launch the application from the quick panel, the application requests the unread notifications after start-up using the <span style="font-family: Courier New,Courier,monospace;">push_service_request_unread_notification()</span> function as <a href="#upon">already introduced</a>. The synchronous request using the <span style="font-family: Courier New,Courier,monospace;">push_service_get_unread_notification()</span> function is shown below:
+<p>If the user does not launch the application from the quick panel, the application requests the unread notifications after start-up using the <span style="font-family: Courier New,Courier,monospace;">push_service_request_unread_notification()</span> function as <a href="#upon">already introduced</a>. The synchronous request using the <span style="font-family: Courier New,Courier,monospace;">push_service_get_unread_notification()</span> function is shown in the following example.
 </p>
 
 <pre class="prettyprint">
@@ -888,4 +905,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.tutorials/html/native/messaging/sms_mms_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm
index b8c3350..6da67e9 100644
--- a/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -62,7 +62,7 @@
 #include &lt;messages.h&gt;
 </pre></li>
 <li><p>The Messages service works like a client-service architecture. In this architecture, a Tizen application is the client side and has to connect to the service before using the Messages API.</p>
-<p>Establish a connection using the <span style="font-family: Courier New,Courier,monospace;">messages_open_service(messages_service_h *service)</span> function:</p>
+<p>Establish a connection using the <span style="font-family: Courier New,Courier,monospace;">messages_open_service(messages_service_h *service)</span> function.</p>
 
 <pre class="prettyprint">static messages_service_h service_handle = NULL;
 int error_code;
@@ -83,11 +83,11 @@ service_handle = NULL;</pre></li></ol>
 
 <p>To fetch messages from a message box, use the <span style="font-family: Courier New,Courier,monospace;">messages_foreach_message()</span> function with the appropriate parameters. One of these parameters is the callback function called for each message matching the search criteria.</p>
 
+<p>To fetch messages:</p>
+
 <ol><li>Define the message searching callback function.
-<ol type="a"><li>
-<p>The callback function signature has to match the following typedef:</p>
-<pre class="prettyprint">typedef bool(* messages_search_cb)(messages_message_h msg, int index, int result_count, int total_count, void *user_data)</pre></li>
-<li><p>Within the callback, to print the message content (or to show it to the user in any other way), extract its text, address, and type as below:</p>
+<ol type="a">
+<li><p>Within the callback, to print the message content (or to show it to the user in any other way), extract its text, address, and type as in the following example:</p>
 <pre class="prettyprint">char *message = NULL, *address = NULL;
 messages_recipient_type_e rtype;
 int error_code = MESSAGES_ERROR_NONE;
@@ -133,7 +133,7 @@ free(address);</pre></li></ol></li>
 <li>Keyword (for searching based on text and subject)</li>
 <li>Address (message recipient address)</li></ul>
 
-<p>The following example shows a simple search for all SMS messages in all message boxes with a callback function named <span style="font-family: Courier New,Courier,monospace;">message_search_callback</span>:</p>
+<p>The following example shows a simple search for all SMS messages in all message boxes with a callback function named <span style="font-family: Courier New,Courier,monospace;">message_search_callback</span>.</p>
 <pre class="prettyprint">int error_code;
 error_code = messages_open_service(&amp;service_handle);
 if (error_code != MESSAGES_ERROR_NONE) 
@@ -154,10 +154,11 @@ messages_close_service(service_handle);</pre></li></ol>
 
  <h2 id="sending" name="sending">Sending SMS or MMS Messages</h2>
 
-<p>The Messaging API provides functions to send SMS (Short Message Service) messages and MMS (Multimedia Message Service) messages with attachments (image or video files):</p>
+<p>The Messaging API supports SMS (Short Message Service) messages and MMS (Multimedia Message Service) messages with attachments (image or video files).</p>
+<p>To send a message:</p>
 <ol><li>Create a message.
 <p>Before sending a message, open a connection to the messaging service.</p>
-<p>To create an SMS or an MMS message, use the <span style="font-family: Courier New,Courier,monospace;">messages_create_message()</span> function. Specify the message type (<span style="font-family: Courier New,Courier,monospace;">MESSAGES_TYPE_SMS</span> or <span style="font-family: Courier New,Courier,monospace;">MESSAGES_TYPE_MMS</span>) when creating the message. The following example creates an SMS message:</p>
+<p>To create an SMS or an MMS message, use the <span style="font-family: Courier New,Courier,monospace;">messages_create_message()</span> function. Specify the message type (<span style="font-family: Courier New,Courier,monospace;">MESSAGES_TYPE_SMS</span> or <span style="font-family: Courier New,Courier,monospace;">MESSAGES_TYPE_MMS</span>) when creating the message. The following example creates an SMS message.</p>
 <pre class="prettyprint">int error_code;
 messages_message_h msg_hndl = NULL;
 
@@ -168,7 +169,7 @@ if (error_code != MESSAGES_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to create message&quot;);
 }</pre></li>
 <li>Define the recipients and message body.
-<p>Functions for setting the recipient address and the message body (the message text) are the same for SMS and MMS, but in this case the message type specification is not needed:</p>
+<p>Functions for setting the recipient address and the message body (the message text) are the same for SMS and MMS, but in this case the message type specification is not needed.</p>
 <pre class="prettyprint">error_code = messages_add_address(msg_hndl, &quot;123456789&quot;, MESSAGES_RECIPIENT_TO);
 if (error_code != MESSAGES_ERROR_NONE) 
 {
@@ -182,13 +183,13 @@ if (error_code != MESSAGES_ERROR_NONE)
 }</pre></li>
 
 <li>Set a subject and add an attachment (note that sending MMS is not supported on the Emulator).
-<ul><li><p>You can set a message subject and add attachments to MMS messages. Set the subject:</p>
+<ul><li><p>Set a message subject to a MMS message:</p>
 <pre class="prettyprint">error_code = messages_mms_set_subject(msg_hndl, &quot;MMS test&quot;);
 if (error_code != MESSAGES_ERROR_NONE) 
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to set MMS subject&quot;);
 }</pre></li>
-<li><p>Add attachments to the MMS message with their absolute path in the device file system. When adding the attachment, give the attachment type. Possible attachment types are image, audio, and video:</p>
+<li><p>Add attachments to the MMS message with their absolute path in the device file system. When adding the attachment, give the attachment type. Possible attachment types are image, audio, and video.</p>
 <pre class="prettyprint">error_code = messages_mms_add_attachment(g_message, MESSAGES_MEDIA_IMAGE, &quot;/path/to/image/file&quot;);
 if (error_code != MESSAGES_ERROR_NONE) 
 {
@@ -196,10 +197,10 @@ if (error_code != MESSAGES_ERROR_NONE)
 }</pre></li></ul></li>
 
 <li>Send the message.
-<ol type="a"><li><p>SMS and MMS sending is an asynchronous operation, and a callback function is needed to receive the sending operation status. This function has to match the following typedef:</p>
-<pre class="prettyprint">typedef void(* messages_sent_cb)(messages_sending_result_e result, void *user_data)</pre></li>
+<ol type="a">
 <li><p>Using the first parameter in the callback (result), the messaging service informs you about the sending status. It can be used to determine whether the sending succeeded:</p>
-<pre class="prettyprint">static void sent_msg_cb(messages_sending_result_e result, void *user_data)
+<pre class="prettyprint">static void 
+sent_msg_cb(messages_sending_result_e result, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (MESSAGES_SENDING_SUCCEEDED == result) 
 &nbsp;&nbsp;&nbsp;{
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 958cc76..1c9bbd0 100644
--- a/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm
index 063ec8f..979b4b5 100644
--- a/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm
@@ -18,13 +18,13 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
 		<ul class="toc">
 			<li><a href="#init">Initializing the Camera</a></li>
-			<li><a href="#display">Setting the Display for Camera Preview</a></li>
+			<li><a href="#display">Setting the Display for the Camera Preview</a></li>
 			<li><a href="#photo">Taking a Photo</a></li>
 			<li><a href="#attributes">Setting Camera Attributes</a></li>
 			<li><a href="#release">Releasing Resources</a></li>
@@ -50,9 +50,9 @@
  <li><a href="#init">Initializing the Camera</a>
  <p>Initialize the camera for use.</p>
  </li>
- <li><a href="#display">Setting the Display for Camera Preview</a>
-  <p>Diplay the camera preview</p>
- </li>
+ <li><a href="#display">Setting the Display for the Camera Preview</a>
+  <p>Display the camera preview.</p>
+ </li> 
  <li><a href="#photo">Taking a Photo</a>
   <p>Start a camera preview and take a photo.</p>
  </li>
@@ -346,105 +346,127 @@ static void _camera_focus_cb(camera_focus_state_e state, void *user_data)
 }</pre>
 
 </li>
+
 </ol>
 
- <li>
-	 <h2 id="display" name="display">Setting the Display for Camera Preview</h2>
-		 <p>In order to display camera preview to the screen, need to check settings for camera display.</p>
-		 <p>Camera Framework already provided proper display with default setting. Applications don't have to invoke display setting. However, if some applications want to use own display setting, you refer this page for intended display setting.</p>
-		 <ol>
-		 	<li>Camera Device Location
-		 		<p>To display camera preview to the screen, you need to check device location.</p>
-		 		<p>This location of camera device depends on the hardware device.</p>
-		 		<pre class="prettyprint">
+<h2 id="display" name="display">Setting the Display for the Camera Preview</h2>
+
+<p>To display the camera preview on the screen, you must check the camera display settings.</p>
+<p>The Camera framework provides a proper display with the default settings, so the applications have no need usually to invoke the display settings. However, if you want to use your own display settings, use the following information:</p>
+
+<ul>
+<li>To set the camera device location:
+
+<p>To display the camera preview on the screen, you need to check the device location. The camera device location depends on the hardware device.</p>
+
+<pre class="prettyprint">
 typedef enum
 {
-    CAMERA_DEVICE_CAMERA0 = 0, /**< Primary camera*/
-    CAMERA_DEVICE_CAMERA1      /**< Secondary camera*/
+&nbsp;&nbsp;&nbsp;CAMERA_DEVICE_CAMERA0 = 0, // Primary camera
+&nbsp;&nbsp;&nbsp;CAMERA_DEVICE_CAMERA1 // Secondary camera
 } camera_device_e;
-				</pre>
-		 	</li>
-		 	<li>Camera Device Orientation</li>
-		 		<p>To consider proper display, you must think the physical lens orientation and location.</p>
-		 		<p>If the facing direction of camera is opposite to the display, camear device orientation is calculated clockwise. If the facing direction of camera is same direction to the display, camera device orientation is calculated counterclockwise.</p>
-		 		<pre class="prettyprint">
+</pre>
+
+</li>
+
+<li>To set the camera device orientation:
+<p>For a proper display, you must think about the physical lens orientation and location.</p>
+<p>If the facing direction of the camera is opposite to the display, the camera device orientation is calculated clockwise. If the facing direction of the camera is the same direction as the display, the camera device orientation is calculated counter-clockwise.</p>
+
+<pre class="prettyprint">
 int angle = 0;
 int error_code = 0;
-error_code = camera_attr_get_lens_orientation(cam_data.g_camera, &angle);
-		 		</pre>
-		 		<p>If your camera device is opposite to the display, the right side is 90 degrees and If it is same as the display direction, right side is 270 degrees</p>
-		 	  <p>The returned value of "angle" is degress</p>
-		 	<li>Default display settings</li>
-		 		<p>Camera display settings are already set internally. For example, the Sencondary camera is already set flip for supporting mirror mode.</p>
-		 		<p>If application sets any other values with camera_set_display_rotation, camera_get_display_flip, these default values will be changed.</p>
-		 		<p>Therefore, remind that these valuses should be get the default display right after initializing the camera</p>
-		 		<pre class="prettyprint">
+
+error_code = camera_attr_get_lens_orientation(cam_data.g_camera, &amp;angle);
+</pre>
+
+<p>If your camera device is opposite to the display, the right side is 90 degrees, and if it is on the display direction, the right side is 270 degrees.</p>
+<p>The returned value of the <span style="font-family: Courier New,Courier,monospace">angle</span> variable is degrees.</p>
+</li>
+
+<li>To set the default display settings:
+
+<p>The camera display settings are already set internally. For example, the secondary camera is already set flipped for supporting the mirror mode.</p>
+<p>If you set any other values with the <span style="font-family: Courier New,Courier,monospace">camera_set_display_rotation()</span> or <span style="font-family: Courier New,Courier,monospace">camera_get_display_flip()</span> functions, the default values are changed. Therefore, remember that these values are retrieved for the default display right after initializing the camera.</p>
+
+<pre class="prettyprint">
 camera_rotation_e rotation = 0;
 camera_flip_e flip = 0
 int error_code = 0;
-//To get default display rotation value
-error_code = camera_get_display_rotation(cam_data.g_camera, &rotation);
-//To get default display flip value
-error_code = camera_get_display_flip(cam_data.g_camera, &flip);
-		 		</pre>
-		 	<li>Display Rotation</li>
-		 	 <p>The recommended display rotation can be calculated like below</p>
-		 	 <pre class="prettyprint">
+
+// To get the default display rotation value
+error_code = camera_get_display_rotation(cam_data.g_camera, &amp;rotation);
+
+// To get the default display flip value
+error_code = camera_get_display_flip(cam_data.g_camera, &amp;flip);
+</pre></li>
+
+<li>To set the display rotation:
+<p>The recommended display rotation can be calculated as follows:</p>
+
+<pre class="prettyprint">
 int lens_orientation = 0;
 int error_code = 0;
 camera_rotation_e display_rotation = CAMERA_ROTATION_NONE;
 int display_rotation_angle = 0;
 
-// To get recommanded display rotation value
-error_code = camera_attr_get_lens_orientation (cam_data.g_camera, &lens_orientation);
+// To get the recommended display rotation value
+error_code = camera_attr_get_lens_orientation (cam_data.g_camera, &amp;lens_orientation);
 display_rotation_angle = (360 - lens_orientation) % 360;
 
-// To convert to enum type and set display rotation
-switch(display_rotation_angle) {
-    case   0: display_rotation = CAMERA_ROTATION_NONE; break;
-    case  90: display_rotation = CAMERA_ROTATION_90; break;
-    case 180: display_rotation = CAMERA_ROTATION_180; break;
-    case 270: display_rotation = CAMERA_ROTATION_270; break;
-    default : display_rotation = CAMERA_ROTATION_NONE; break;
+// To convert to enum type and set the display rotation
+switch (display_rotation_angle) 
+{
+&nbsp;&nbsp;&nbsp;case   0: display_rotation = CAMERA_ROTATION_NONE; break;
+&nbsp;&nbsp;&nbsp;case  90: display_rotation = CAMERA_ROTATION_90; break;
+&nbsp;&nbsp;&nbsp;case 180: display_rotation = CAMERA_ROTATION_180; break;
+&nbsp;&nbsp;&nbsp;case 270: display_rotation = CAMERA_ROTATION_270; break;
+&nbsp;&nbsp;&nbsp;default : display_rotation = CAMERA_ROTATION_NONE; break;
 }
+
 error_code = camera_set_display_rotation(cam_data.g_camera, display_rotation);
-		 	 	</pre>
-		 	<li>Display Flip</li>
-		 	 <p>According to the camera facing direction, you need to select flip api.</p>
-		 	 <p>Because the display flip api runs after display rotation api, you need to remind calculation carefully with camera facing direction.</p>
-		 	 <pre class="prettyprint">
-//If the facing direction of camera is same as display module, it is needed to apply flip for front camera, because of mirror effect
+</pre></li>
+
+<li>To set the display flip:
+<p>According to the camera facing direction, you need to select the flip API. Because the display flip API runs after the display rotation API, you need to define the calculation carefully taking account of the camera facing direction.</p>
+
+<pre class="prettyprint">
+// If the facing direction of camera is the same as display, apply flip for the front camera because of the mirror effect
 int lens_orientation = 0;
 int error_code = 0;
 camera_flip_e camera_default_flip = MM_FLIP_NONE;
 
-// To get recommanded display rotation value
-error_code = camera_attr_get_lens_orientation (cam_data.g_camera, &lens_orientation);
+// To get the recommended display rotation value
+error_code = camera_attr_get_lens_orientation (cam_data.g_camera, &amp;lens_orientation);
 display_rotation_angle = (360 - lens_orientation) % 360;
 
-// To set mirror display
-if (display_rotation_angle == 90 || display_rotation_angle == 270) {
-    camera_default_flip = MM_FLIP_VERTICAL;
-} else {
-    camera_default_flip = MM_FLIP_HORIZONTAL;
+// To set the mirror display
+if (display_rotation_angle == 90 || display_rotation_angle == 270) 
+{
+&nbsp;&nbsp;&nbsp;camera_default_flip = MM_FLIP_VERTICAL;
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;camera_default_flip = MM_FLIP_HORIZONTAL;
 }
 
-// To set display flip
+// To set the display flip
 error_code = camera_set_display_flip(cam_data.g_camera, camera_default_flip);
-  </pre>
-  </ol>
- <table class="note">
- <tbody>
-  <tr>
-  <th class="note">Note</th>
-  </tr>
-  <tr>
-   <td class="note">In case of an overlay surface, when the device orientation changes, the displayed camera preview does not rotate automatically. If you want to change the display orientation according to the device orientation, use the camera_set_display_rotation() function within the app_device_orientation_cb() callback function used by the application.
-    In case of an Evas surface, the Evas object for camera display is rotated by the window manager used by the application, not by the camera_set_display_rotation() function.</span> function.</td>
-  </tr>
- </tbody>
- </table>
- </li>
+</pre>
+</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">In case of an overlay surface, when the device orientation changes, the displayed camera preview does not rotate automatically. If you want to change the display orientation according to the device orientation, use the <span style="font-family: Courier New,Courier,monospace">camera_set_display_rotation()</span> function within the <span style="font-family: Courier New,Courier,monospace">app_device_orientation_cb()</span> callback function used by the application.
+<p>In case of an Evas surface, the Evas object for the camera display is rotated by the window manager used by the application, not by the <span style="font-family: Courier New,Courier,monospace">camera_set_display_rotation()</span> function.</p></td>
+</tr>
+</tbody>
+</table>
 
  <h2 id="photo" name="photo">Taking a Photo</h2>
 
diff --git a/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm
index 13e5a49..ffcdd1f 100644
--- a/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm
index 2a63f76..3daf961 100644
--- a/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/media_controller_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/media_controller_tutorial_n.htm
index 99580e3..cdcbcd3 100644
--- a/org.tizen.tutorials/html/native/multimedia/media_controller_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/media_controller_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
  		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm
index a56d1df..e4c1731 100644
--- a/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/media_vision_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/media_vision_tutorial_n.htm
index c2e109f..362879c 100644
--- a/org.tizen.tutorials/html/native/multimedia/media_vision_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/media_vision_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
  		<p class="toc-title">Content</p>
@@ -65,8 +65,10 @@
 <li>For barcode generation:
 <ol type="a">
 <li>Create a structure to store the global data with the <span style="font-family: Courier New,Courier,monospace;">bargendata_s</span> structure:
+
 <pre class="prettyprint">
-typedef struct _bargendata_s
+typedef struct 
+_bargendata_s
 {
 &nbsp;&nbsp;&nbsp;// Generate the variables to store barcode information
 &nbsp;&nbsp;&nbsp;mv_barcode_type_e type;
@@ -86,22 +88,20 @@ typedef struct _bargendata_s
 static bargendata_s bargendata;
 </pre>
 </li>
-<li>Configure the barcode generation engine with the <span style="font-family: Courier New,Courier,monospace;">mv_create_engine_config()</span> function. The function configures an engine attribute with default values:
-
-<ul><li>The <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_GENERATE_ATTR_TEXT</span> attribute defines the generation with text using the <span style="font-family: Courier New,Courier    ,monospace;">mv_barcode_generate_attr_text_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b2    27062a6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">wearable</a> applications). The default value is <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_GENERATE_ATTR_TEXT_INVISIBLE</span>.</li></ul>
-
+<li>Configure the barcode generation engine with the <span style="font-family: Courier New,Courier,monospace;">mv_create_engine_config()</span> function. The function configures an engine attribute with default values.
 <pre class="prettyprint">
 int error_code = 0;
-
+ 
 error_code = mv_create_engine_config(&amp;bargendata.g_engine_cfg);
 if (error_code != MEDIA_VISION_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
 }
 </pre>
+<p>For example, use the <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_GENERATE_ATTR_TEXT</span> attribute to define whether the barcode is generated with text. The possible values are listed in the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_generate_attr_text_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#xxxx">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#xxxx">wearable</a> applications). The default value is <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_GENERATE_ATTR_TEXT_INVISIBLE</span>.</p>
 </li>
 </ol>
-
+</li>
 <li>For barcode detection:
 <ol type="a">
 <li>Include the <span style="font-family: Courier New,Courier,monospace;">&lt;camera.h&gt;</span> header file to handle camera preview images:
@@ -111,7 +111,8 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 </li>
 <li>Create a structure to store the global data with the <span style="font-family: Courier New,Courier,monospace;">bardetdata_s</span> structure:
 <pre class="prettyprint">
-typedef struct _bardetdata_s
+typedef struct 
+_bardetdata_s
 {
 &nbsp;&nbsp;&nbsp;// Generate the variables for the camera display
 &nbsp;&nbsp;&nbsp;Evas_Object *win;
@@ -142,10 +143,7 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 }
 </pre>
 </li>
-<li>Configure the barcode detection engine with the <span style="font-family: Courier New,Courier,monospace;">mv_create_engine_config()</span> function. The function configures an engine attribute with default values:
-
-<ul><li>The <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_DETECT_ATTR_TARGET</span> attribute defines the detection target using the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_detect_attr_target_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">wearable</a> applications). The default value is <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_DETECT_ATTR_TARGET_ALL</span>.</li></ul>
-
+<li>Configure the barcode detection engine with the <span style="font-family: Courier New,Courier,monospace;">mv_create_engine_config()</span> function. The function configures an engine attribute with default values.
 <pre class="prettyprint">
 int error_code = 0;
 
@@ -155,6 +153,7 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
 }
 </pre>
+<p>For example, use the <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_DETECT_ATTR_TARGET</span> attribute to define the detection target. The possible values are listed in the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_detect_attr_target_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">wearable</a> applications). The default value is <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_DETECT_ATTR_TARGET_ALL</span>.</p>
 </li>
 <li>To provide camera preview images, create the camera handle, set the display and preview callback, and start the camera preview:
 <pre class="prettyprint">
@@ -312,6 +311,7 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 </ol>
 </li>
 </ul>
+</li>
 <li>To release the <span style="font-family: Courier New,Courier,monospace;">g_engine_cfg</span> handle, use the <span style="font-family: Courier New,Courier,monospace;">mv_destroy_engine_config()</span> function:
 <pre class="prettyprint">
 error_code = mv_destroy_engine_cfg(bargendata.g_engine_cfg);
@@ -321,7 +321,6 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 }
 </pre>
 </li>
-</li>
 </ol>
 
 
@@ -332,7 +331,8 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 <li>Fill the <span style="font-family: Courier New,Courier,monospace;">g_source</span> source handle with the media packet using the <span style="font-family: Courier New,Courier,monospace;">mv_source_fill_by_media_packet()</span> function. 
 <p>Use the media packet, because the camera preview images can be received through the <span style="font-family: Courier New,Courier,monospace;">_camera_media_packet_preview_cb()</span> callback function as a media packet handle. </p>
 <pre class="prettyprint">
-static void _camera_media_packet_preview_cb (media_packet_h pkt, void *user_data)
+static void 
+_camera_media_packet_preview_cb (media_packet_h pkt, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;mv_rectangle_s mv_roi = { {0,0}, bardetdata.width, bardetdata.height};
 
@@ -369,12 +369,10 @@ static void _camera_media_packet_preview_cb (media_packet_h pkt, void *user_data
 <li>Implement the <span style="font-family: Courier New,Courier,monospace;">_barcode_detected_cb()</span> callback function, which is triggered when  a barcode is detected.
 <p>In the callback, when the number of detected barcodes is more than zero, print the number of detected barcodes and their messages. The used source must be cleared to use the next preview image.</p>
 <pre class="prettyprint">
-static void _barcode_detected_cb (mv_source_h source,
-mv_engine_config_h engine_cfg, const mv_quadrangle_s *barcode_locations, 
-const char *message[],
-const mv_barcode_type_e *types,
-int number_of_barcodes,
-void *user_data)
+static void 
+_barcode_detected_cb(mv_source_h source, mv_engine_config_h engine_cfg, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const mv_quadrangle_s *barcode_locations, const char *message[], 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const mv_barcode_type_e *types, int number_of_barcodes, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;int i = 0;
 &nbsp;&nbsp;&nbsp;char type[50] = {‘\0};
diff --git a/org.tizen.tutorials/html/native/multimedia/metadata_editor_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/metadata_editor_tutorial_n.htm
index 133ca3a..4b30616 100644
--- a/org.tizen.tutorials/html/native/multimedia/metadata_editor_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/metadata_editor_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
  		<p class="toc-title">Content</p>
@@ -39,16 +39,6 @@
 <h1>Metadata Editor: Editing Metadata from an Input Audio File</h1>
   
 <p>This tutorial demonstrates how you can edit metadata in audio files.</p>
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The metadata editor can only be used with audio files. It is not supported in the image and video files.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
 
 <h2>Warm-up</h2>
 
@@ -60,6 +50,17 @@
 			<li><a href="#edit_metadata">Editing Metadata and Artwork</a>
 			<p>Create a metadata editor handle, bind the handle with the file, edit metadata and artwork, and apply to the file.</p></li>
 	</ul>
+	
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The metadata editor can only be used with audio files. It is not supported in the image and video files.</td> 
+    </tr> 
+   </tbody> 
+  </table>  	
         
 <h2 id="init_metadata" name="init_metadata">Initializing the Metadata Editor</h2>
 
diff --git a/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm
index 2702b75..dccd814 100644
--- a/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
  		<p class="toc-title">Content</p>
@@ -52,9 +52,6 @@
 			<p>Create a metadata extractor handle, bind the handle with the file, and get metadata, artwork, lyrics, and frames.</p></li>
 	</ul>
         
-
- <h2 id="init_metadata" name="init_metadata">Initializing the Metadata Extractor</h2>
- 
 <table class="note"> 
    <tbody> 
     <tr> 
@@ -65,6 +62,9 @@
     </tr> 
    </tbody> 
   </table>  
+  
+ <h2 id="init_metadata" name="init_metadata">Initializing the Metadata Extractor</h2>
+
 <p>To initialize the metadata extractor:</p>
   <ol>
 
diff --git a/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm b/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm
index cbbd90a..00a0a03 100644
--- a/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 
@@ -55,7 +55,7 @@
 
 <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
 	<ul>
-    <li><a href="screen_mirroring_tutorial_n.htm">Screen Mirroring Sink: Mirroring Screen and Sound</a>  <p>Demonstrates how you can mirror the device screen and sound to another device wirelessly.</p></li>
+    <li><a href="screen_mirroring_tutorial_n.htm">Screen Mirroring: Mirroring Screen and Sound</a>  <p>Demonstrates how you can mirror the device screen and sound to another device wirelessly.</p></li>
 	<li><a href="video_util_tutorial_n.htm">Video Util: Transcoding Media Files</a> <p>Demonstrates how you can transcode and trim video files.</p></li>
 	</ul>
 
diff --git a/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm
index 094ce06..d8e4ed4 100644
--- a/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm
index cdfd816..bf96c0e 100644
--- a/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
  		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm
index 69bcde1..e793672 100644
--- a/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm
index 343bddb..4e3d9e9 100644
--- a/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm
@@ -11,14 +11,14 @@
     <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-    <title>Screen Mirroring Sink: Mirroring Screen and Sound</title>
+    <title>Screen Mirroring: Mirroring Screen and Sound</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -31,30 +31,21 @@
 		</ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm">Screen Mirroring Sink Guide</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink API for Mobile Native</a></li>
+            <li><a href="../../../../org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm">Screen Mirroring Guide</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__MODULE.html">Screen Mirroring API for Mobile Native</a></li>
         </ul>
     </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Screen Mirroring Sink: Mirroring Screen and Sound</h1>
+<h1>Screen Mirroring: Mirroring Screen and Sound</h1>
 
 <p>This tutorial demonstrates how you can mirror the device screen and sound to another device wirelessly as a sink.</p>
 
-<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>This feature is supported in mobile applications only.</p>
 
 <h2>Warm-up</h2>
-<p>Become familiar with Screen Mirroring Sink API basics by learning about:</p>
+<p>Become familiar with Screen Mirroring API basics by learning about:</p>
 
 <ul>
  <li><a href="#init">Initializing the Screen Mirroring Sink</a>
@@ -78,7 +69,7 @@
 
 <p>To initialize the screen mirroring sink:</p>
 
-<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;scmirroring_type.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;scmirroring_sink.h&gt;</span> header files in your application:</p>
+<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__MODULE.html">Screen Mirroring</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;scmirroring_type.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;scmirroring_sink.h&gt;</span> header files in your application:</p>
 <pre class="prettyprint">
 #include &lt;scmirroring_type.h&gt;
 #include &lt;scmirroring_sink.h&gt;
diff --git a/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm
index ac11b34..11807bc 100644
--- a/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/thumbnail_util_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/thumbnail_util_tutorial_n.htm
index 550a836..ae3372e 100644
--- a/org.tizen.tutorials/html/native/multimedia/thumbnail_util_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/thumbnail_util_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
  		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm
index bbce269..234cc50 100644
--- a/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm
index f276e7b..ae5061d 100644
--- a/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -42,16 +42,8 @@
   
 <p>This tutorial demonstrates how you can transcode and trim video files.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
+
 <h2>Warm-up</h2>
 
 <p>Become familiar with the Video Util API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm
index b99e002..3a553e2 100644
--- a/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm b/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
index 1a6eada..b0c7c50 100644
--- a/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -27,33 +27,33 @@
 			<li><a href="#enable">Enabling and Disabling Bluetooth</a></li>
 			<li><a href="#state">Initializing Bluetooth and Checking the Adapter State</a></li>
 			<li><a href="#find">Finding Other Devices</a></li>
-			<li>Serial Port Profile (SPP)
+			<li>Serial Port Profile (SPP) operations
 				<ul class="toc">
 					<li><a href="#connect">Connecting to Other Devices Using SPP</a></li>
 					<li><a href="#exchange">Exchanging Data Using SPP</a></li>
 					<li><a href="#disconnect">Disconnecting from the Connected Device Using SPP</a></li>
 				</ul>
 			</li>
-			<li>Bluetooth GATT Operations
+			<li>Bluetooth GATT operations
 				<ul class="toc">
-					<li><a href="#gatt_client">Gatt Client Role Operation</a></li>
-					<li><a href="#gatt_getter">Gatt Client Getter Operation</a></li>
-					<li><a href="#gatt_setter">Gatt Client Setter Operation</a></li>
+					<li><a href="#gatt">Managing the Client Operations</a></li>
+					<li><a href="#gatt_getter">Managing Common Getter Operations</a></li>
+					<li><a href="#gatt_setter">Managing Common Setter Operations</a></li>
 				</ul>
 			</li>
-			<li>Object Push Profile (OPP)
+			<li>Object Push Profile (OPP) operations
 				<ul class="toc">
 					<li><a href="#exc">Exchanging Data Using OPP</a></li>
 				</ul>
 			</li>
-			<li>Bluetooth LE Operations
+			<li>Bluetooth LE operations
 				<ul class="toc">
 					<li><a href="#le_scan">Managing Bluetooth LE Scans</a></li>
-					<li><a href="#le_discovery">Discoverying Bluetooth LE Devices</a></li>
+					<li><a href="#le_discovery">Discovering Bluetooth LE Devices</a></li>
 					<li><a href="#add_adv_data">Adding Advertising Data to the LE Advertisement</a></li>
 					<li><a href="#set_adv_conn">Setting the Advertising Connectable Mode</a></li>
 					<li><a href="#set_adv_mode">Setting the LE Advertising Mode</a></li>
-					<li><a href="#start_adv">Start and Stop Advertising</a></li>
+					<li><a href="#start_adv">Starting and Stopping Advertising</a></li>
 				</ul>
 			</li>		
 			<li><a href="#release">Releasing All Resources</a></li>
@@ -79,12 +79,12 @@
 				<li><a href="#init">Initializing Bluetooth</a>
 				<p>Initialize Bluetooth for use.</p></li>
 				<li><a href="#enable">Enabling and Disabling Bluetooth</a>
-				<p>Enable or disable Bluetooth. </p></li>
+				<p>Enable or disable Bluetooth.</p></li>
 				<li><a href="#state">Initializing Bluetooth and Checking the Adapter State</a>
 				<p>Initialize Bluetooth and check the Bluetooth adapter state.</p></li>
 				<li><a href="#find">Finding Other Devices</a>
 				<p>Find other devices using Bluetooth.</p></li>
-				<li>Serial Port Profile (SPP)
+				<li>Serial Port Profile (SPP) operations
 				<ul>
 					<li><a href="#connect">Connecting to Other Devices Using SPP</a>
 					<p>Connect to other devices through SPP.</p></li>
@@ -93,36 +93,34 @@
 					<li><a href="#disconnect">Disconnecting from the Connected Device Using SPP</a>
 					<p>Disconnect from the connected devices.</p></li>
 				</ul></li>
-				<li>Bluetooth GATT Operations
+				<li>Bluetooth GATT operations
 				<ul>
-					<li><a href="#gatt_client">Gatt Client Role Operations</a>
-					<p>Create a client to connect to a remote service, get service details, read and set service attributes and set/unset characteristic value changed information callback.</p></li>
-					<li><a href="#gatt_getter">Gatt Client Common Getter Operations</a>
-					<p>Getter APIs which are used commonly for GATT Client related operations.
-					</p></li>
-					<li><a href="#gatt_setter">Gatt Client Common setter operations</a>
-					<p>Set the properties and values of the attribute.</p></li>
+					<li><a href="#gatt">Managing the Client Operations</a>
+					<p>Create a client to connect to a remote service, get service details, read and set service attributes, and set and release callbacks when the characteristic value changes.</p></li>
+					<li><a href="#gatt_getter">Managing Common Getter Operations</a>
+                    <p>Get information used commonly in client operations.</p></li>
+					<li><a href="#gatt_setter">Managing Common Setter Operations</a>
+                    <p>Set the properties and values of attributes.</p></li>
 				</ul></li>
-				<li>Object Push Profile (OPP)
+				<li>Object Push Profile (OPP) operations
 				<ul>
 					<li><a href="#exc">Exchanging Data Using OPP</a>
 					<p>Exchange data between devices through OPP.</p></li>
 				</ul></li>
-				<li>Bluetooth LE Operations
+				<li>Bluetooth LE operations
 				<ul>
-					
 					<li><a href="#le_scan">Managing Bluetooth LE Scans</a>
 					<p>Start the scan, handle the scanning results, and stop the scan.</p></li>
 					<li><a href="#le_discovery">Discovering Bluetooth LE Devices</a>
-					<p> Discovers nearby Bluetooth LE enabled devices</p></li>
+                    <p>Discover nearby Bluetooth LE-enabled devices</p></li>
 					<li><a href="#add_adv_data">Adding Advertising Data to the LE Advertisement</a>
-					<p>Add advertising data to a LE advertisement or scan result.</p></li>
+					<p>Add advertising data to an LE advertisement or scan result.</p></li>
 					<li><a href="#set_adv_conn">Setting the Advertising Connectable Mode</a>
 					<p>Define whether the advertising type is connectable or non-connectable.</p></li>
 					<li><a href="#set_adv_mode">Setting the LE Advertising Mode</a>
 					<p>Control the advertising power and latency.</p></li>
-					<li><a href="#start_adv">Start and Stop Advertising</a>
-					<p>Start advertising and Stop advertising with the advertising parameters.</p></li>
+					<li><a href="#start_adv">Starting and Stopping Advertising</a> 
+					<p>Start and stop advertising with the advertising parameters.</p></li>
 				</ul></li>
 				
 				<li><a href="#release">Releasing All Resources</a>
@@ -166,7 +164,8 @@ if (ret != BT_ERROR_NONE)
 #include &lt;app_control.h&gt;
 #include &lt;dlog.h&gt;
 
-int bt_onoff_operation(void)
+int 
+bt_onoff_operation(void)
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
 &nbsp;&nbsp;&nbsp;app_control_h service = NULL;
@@ -177,8 +176,8 @@ int bt_onoff_operation(void)
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
 &nbsp;&nbsp;&nbsp;}
-&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;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;app_control_destroy(service);
@@ -194,7 +193,6 @@ int bt_onoff_operation(void)
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return 0;
 }</pre>
 
@@ -202,7 +200,7 @@ int bt_onoff_operation(void)
 
 <p>To communicate with other devices using Bluetooth, learn how to check the Bluetooth adapter state:</p>
 
-<ol><li>Check, whether the Bluetooth adapter is enabled on your device:
+<ol><li>Check whether the Bluetooth adapter is enabled on your device:
 <pre class="prettyprint">bt_adapter_state_e adapter_state;
  
 // Check whether the Bluetooth Service is enabled
@@ -227,7 +225,8 @@ if (adapter_state == BT_ADAPTER_DISABLED)
 
 bt_error_e ret;
 
-void adapter_state_changed_cb(int result, bt_adapter_state_e adapter_state, void* user_data) 
+void 
+adapter_state_changed_cb(int result, bt_adapter_state_e adapter_state, void* user_data) 
 {
 &nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
@@ -273,7 +272,7 @@ void adapter_state_changed_cb(int result, bt_adapter_state_e adapter_state, void
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[adapter_state_changed_cb] Bluetooth is disabled!&quot;);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// When you try to get device information
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// by invoking bt_adapter_get_name(), bt_adapter_get_address(), or bt_adapter_get_visibility(), 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// BT_ERROR_NOT_ENABLED will occur
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// BT_ERROR_NOT_ENABLED occurs
 &nbsp;&nbsp;&nbsp;}
 }
 ret = bt_adapter_set_state_changed_cb(adapter_state_changed_cb, NULL);
@@ -287,22 +286,13 @@ if (ret != BT_ERROR_NONE)
  <h2 id="find" name="find">Finding Other Devices</h2>
 
 <p>To find remote Bluetooth devices either through device discovery or querying bonded devices:</p>
-
-<h3>Defining and Registering the Discovery State Callback Function</h3>
+<ul>
+<li>Define and register the discovery state callback function.
+<ol>
+<li>
 <p>Discovering available Bluetooth-enabled devices is the first step to communicating with remote devices. There are 2 types of Bluetooth devices: classic Bluetooth devices and Bluetooth LE devices. Both device types use their own APIs to discover devices of the same type.</p>
-<p>Define a callback with the following function signature to get information about a specific device type:</p>
-<pre class="prettyprint">typedef void(* bt_adapter_device_discovery_state_changed_cb)(int result, 
-&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_device_discovery_info_s *discovery_info,
-&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data);
-typedef void (*bt_adapter_le_device_discovery_state_changed_cb)(int result, 
-&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_device_discovery_info_s *discovery_info,
-&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data);
-</pre>
-<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">result</span>, specifies the result of the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_start_device_discover()</span> or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_stop_device_discovery()</span> function in classic Bluetooth, or the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_start_discover_device()</span> or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_stop_device_discovery()</span> function in Bluetooth LE.</p>
 
-<p>This discovery start functions for the 2 types are declared as follows:</p>
+<p>Declare the discovery start functions for the 2 types.</p>
 <pre class="prettyprint">// Classic Bluetooth
 int bt_adapter_start_device_discovery(void);
 int bt_adapter_stop_device_discovery(void);
@@ -311,57 +301,20 @@ int bt_adapter_stop_device_discovery(void);
 int bt_adapter_le_start_device_discovery(void);
 int bt_adapter_le_stop_device_discovery(void);
 </pre>
- 
-<p>If discovering Bluetooth succeeds, you will receive the <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_NONE</span> result as the first parameter in your <span style="font-family: Courier New,Courier,monospace;">bt_adapter_device_discovery_state_changed_cb()</span> (classic Bluetooth)  or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_device_discovery_state_changed_cb()</span> (Bluetooth LE) callback function. If your device did not start to discover devices due to an error, then the result code will be <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_TIMEOUT</span>.</p>
-<p>If stopping the discovery succeeds, you can also receive <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_CANCELLED</span>.</p>
-
-<p>The values in <span style="font-family: Courier New,Courier,monospace;">bt_adapter_device_discovery_state_e</span> (classic Bluetooth) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_device_discovery_state_e</span> (Bluetooth LE) are as follows:</p>
-
-<table> 
-   <caption>
-     Table: Discovery states 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Discovery state</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_DEVICE_DISCOVERY_STARTED</span></td> 
-     <td>When discovery is started</td> 
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_DEVICE_DISCOVERY_FINISHED</span></td> 
-     <td>When discovery is finished</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_DEVICE_DISCOVERY_FOUND</span></td> 
-     <td>When a device is found</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED</span></td> 
-     <td>When LE discovery is started</td> 
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_LE_DEVICE_DISCOVERY_FINISHED</span></td> 
-     <td>When LE discovery is finished</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND</span></td> 
-     <td>When an LE device is found</td> 
-    </tr> 	
-   </tbody> 
-  </table>
-	
-	
-	
+ </li>
+ <li>
+<p>If discovering Bluetooth succeeds, you receive the <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_NONE</span> result as the first parameter in your <span style="font-family: Courier New,Courier,monospace;">bt_adapter_device_discovery_state_changed_cb()</span> (classic Bluetooth) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_device_discovery_state_changed_cb()</span> (Bluetooth LE) callback function. If your device did not start to discover devices due to an error, the result code is <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_TIMEOUT</span>. If stopping the discovery succeeds, you can also receive <span style="font-family: Courier New,Courier,monospace;">BT_ERROR_CANCELLED</span>.</p>
+</li>
+<li>
 <p>When your implemented callback function is first called, the second parameter, <span style="font-family: Courier New,Courier,monospace;">discovery_state</span>, is <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_STARTED</span> or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED</span>. This indicates that device discovery has begun.</p>
-<p>Each time you find a remote Bluetooth device, <span style="font-family: Courier New,Courier,monospace;">discovery_state</span> will be in the <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_FOUND</span> or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND</span> state.</p>
-<p>At the <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_FOUND</span> or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND</span> state, you can get some information about a discovered device, such as the device MAC address, name, class, rssi (received signal strength indicator), and bonding state. Using this information, you can connect to the discovered device.</p>
+<p>The discovery states are values of the enumerations <span style="font-family: Courier New,Courier,monospace;">bt_adapter_device_discovery_state_e</span> (classic Bluetooth) (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html#gaae6b21353576e515e5bb1e76d25472bd">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html#gaae6b21353576e515e5bb1e76d25472bd">wearable</a> applications) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_device_discovery_state_e</span> (Bluetooth LE) (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__LE__MODULE.html#ga4b90a954c6cfb51b60d520c114d8f62d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__LE__MODULE.html#ga4b90a954c6cfb51b60d520c114d8f62d">wearable</a> applications).</p>
+<p>Each time you find a remote Bluetooth device, <span style="font-family: Courier New,Courier,monospace;">discovery_state</span> is in the <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_FOUND</span> or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND</span> state. At this state you can get some information about a discovered device, such as the device MAC address, name, class, rssi (received signal strength indicator), and bonding state. Using this information, you can connect to the discovered device.</p>
 <p><span style="font-family: Courier New,Courier,monospace;">discovery_info</span> is a NULL value in the <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_STARTED</span>, <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED</span>, <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_DEVICE_DISCOVERY_FINISHED</span>, or <span style="font-family: Courier New,Courier,monospace;">BT_ADAPTER_LE_DEVICE_DISCOVERY_FINISHED</span> state.</p>
-<p>An example implementation for classic Bluetooth (Bluetooth LE usage is the same):</p>
+<p>The following example shows the implementation for classic Bluetooth. Bluetooth LE usage is the same.</p>
 <pre class="prettyprint">#include &lt;glib.h&gt; // For GList
-void adapter_device_discovery_state_changed_cb(int result, bt_adapter_device_discovery_state_e discovery_state, bt_adapter_device_discovery_info_s *discovery_info, void* user_data) 
+void 
+adapter_device_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;bt_adapter_device_discovery_info_s *discovery_info, void* user_data) 
 {
 &nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
@@ -396,8 +349,9 @@ void adapter_device_discovery_state_changed_cb(int result, bt_adapter_device_dis
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;}
 }</pre>
-
-<p>Register the callback for classic Bluetooth (Bluetooth LE usage is the same):</p>
+</li>
+<li>
+<p>Register the callback for classic Bluetooth. Bluetooth LE usage is the same.</p>
 <pre class="prettyprint">GList *devices_list = NULL;
 ret = bt_adapter_set_device_discovery_state_changed_cb(
 adapter_device_discovery_state_changed_cb, (void*)&amp;devices_list);
@@ -406,10 +360,12 @@ if (ret != BT_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_set_device_discovery_state_changed_cb] Failed.&quot;);
 }</pre>
-
-<h3>Finding Other Bluetooth Devices</h3>
-<p>If you want to stop the device discovery, call <span style="font-family: Courier New,Courier,monospace;">bt_adapter_stop_device_discovery()</span> (classic Bluetooth) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_stop_device_discovery()</span> (Bluetooth LE).</p>
-<p>A remote Bluetooth device will respond to the request if it is enabled and in a discovery mode. Classic Bluetooth and Bluetooth LE usages are the same.</p>
+</li>
+</ol>
+</li>
+<li>Find other Bluetooth devices.
+<p>If you want to stop the device discovery, call the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_stop_device_discovery()</span> (classic Bluetooth) or <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_stop_device_discovery()</span> (Bluetooth LE) function.</p>
+<p>A remote Bluetooth device responds to the request if it is enabled and in a discovery mode. Classic Bluetooth and Bluetooth LE usages are the same.</p>
 <pre class="prettyprint">
 // Classic Bluetooth
 ret = bt_adapter_start_device_discovery();
@@ -418,9 +374,12 @@ if (ret != BT_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_start_device_discovery] Failed.&quot;);
 }</pre>
 
-<h3>Enabling Discovery</h3>
-<p>For other devices to find your device, your device must be discoverable.</p>
-<p>To check the current visibility of your device, do the following:</p>
+</li>
+
+<li>Enable discovery.
+<ol>
+<li>
+<p>Check the current visibility of your device. For other devices to find your device, your device must be discoverable.</p>
 <pre class="prettyprint">
 // Visibility mode of the Bluetooth device
 bt_adapter_visibility_mode_e mode;
@@ -439,7 +398,8 @@ else
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The device is discoverable for a set period of time.&quot;);
 }</pre>
-
+</li>
+<li>
 <p>To change the visibility mode, use the Bluetooth visibility setting application (shown below with the initial screen on the left and the visibility setting screen on the right).</p>
 <p class="figure">Figure: Bluetooth visibility setting application</p>
 <p align="center"><img alt="Bluetooth visibility setting application" src="../../images/bluetooth_visibility.png" /></p>
@@ -448,7 +408,8 @@ else
 #include &lt;app_control.h&gt;
 #include &lt;dlog.h&gt;
 
-int bt_set_visibility_operation(void)
+int 
+bt_set_visibility_operation(void)
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
 &nbsp;&nbsp;&nbsp;app_control_h service = NULL;
@@ -476,14 +437,14 @@ int bt_set_visibility_operation(void)
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return 0;
 }</pre>
-
-<p>If you want to get a notification when the visibility is changed after 90 seconds, you must implement the following callback and register it.</p>
-<pre class="prettyprint">typedef void(* bt_adapter_visibility_mode_changed_cb)(int result, bt_adapter_visibility_mode_e visibility_mode, void *user_data)</pre>
-<p>An example implementation:</p>
-<pre class="prettyprint">void adapter_visibility_mode_changed_cb(int result, bt_adapter_visibility_mode_e visibility_mode, void* user_data) 
+</li>
+<li>
+<p>To get a notification when the visibility is changed after 90 seconds, implement the following callback:</p>
+<pre class="prettyprint">
+void 
+adapter_visibility_mode_changed_cb(int result, bt_adapter_visibility_mode_e visibility_mode, void* user_data) 
 {
 &nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
@@ -503,27 +464,32 @@ int bt_set_visibility_operation(void)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[visibility_mode_changed_cb] Limited discoverable mode!&quot;);
 &nbsp;&nbsp;&nbsp;}
 }</pre>
+</li>
+<li>
 <p>Register the callback:</p>
 <pre class="prettyprint">ret = bt_adapter_set_visibility_mode_changed_cb(adapter_visibility_mode_changed_cb, NULL);
 if (ret != BT_ERROR_NONE) 
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_set_visibility_mode_changed_cb] Failed.&quot;);
 }</pre>
-
-<h3>Querying Bonded Devices</h3>
-<p>Before trying to find the remote devices nearby, you can query the list of bonded devices to get the basic information (such as device address and name) your device has stored for the bonded devices. In order to get all bonded devices, call <span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span>. You can get information about bonded devices in <span style="font-family: Courier New,Courier,monospace;">bt_adapter_bonded_device_cb()</span>, which you need to call for each bonded device.</p>
-<p><span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span> is declared as follows:</p>
+</li>
+</ol>
+</li>
+<li>Query bonded devices.
+<ol>
+<li>
+<p>Before trying to find the remote devices nearby, you can query the list of bonded devices to get the basic information (such as device address and name) your device has stored for the bonded devices. To get all bonded devices, call the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span> function. You can get information about bonded devices in the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_bonded_device_cb()</span> callback function, which you need to call for each bonded device.</p>
+<p>Declare the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span> function.</p>
 <pre class="prettyprint">int bt_adapter_foreach_bonded_device(bt_adapter_bonded_device_cb foreach_cb, void *user_data)</pre>
-<p>The callback function is declared as follows:</p>
-<pre class="prettyprint">typedef bool(* bt_adapter_bonded_device_cb)(bt_device_info_s *device_info, void *user_data)</pre>
 <p>You can get information (such as the device name, service list, and Mac address) about the bonded device.</p>
 <p>To continue performing iterations, your implemented callback function must return <span style="font-family: Courier New,Courier,monospace;">true</span>. Otherwise, it returns <span style="font-family: Courier New,Courier,monospace;">false</span> and stops performing additional iterations.</p>
-<p>The following code sample describes how to query bonded devices and how to discover a desired device.</p>
+<p>The following example describes how to query bonded devices and how to discover a desired device.</p>
 <pre class="prettyprint">// Server address for connecting
 char *bt_server_address = NULL;
 const char *remote_server_name = &quot;server device&quot;;
  
-bool adapter_bonded_device_cb(bt_device_info_s *device_info, void *user_data) 
+bool 
+adapter_bonded_device_cb(bt_device_info_s *device_info, void *user_data) 
 {
 &nbsp;&nbsp;&nbsp;if (device_info == NULL) 
 &nbsp;&nbsp;&nbsp;{
@@ -562,13 +528,19 @@ if (ret != BT_ERROR_NONE)
 if (bt_server_address != NULL)
 &nbsp;&nbsp;&nbsp;free(bt_server_address);
 </pre>
+</li>
+</ol>
+</li>
 
-<h3>Requesting Bonding with a Remote Bluetooth Device</h3>
-<p>You already got information about a remote device through device discovery or querying a bonded device. You can request to bond with that device using the <span style="font-family: Courier New,Courier,monospace;">bt_device_create_bond()</span> function. If you want to cancel bonding, call <span style="font-family: Courier New,Courier,monospace;">bt_device_cancel_bonding()</span>.</p>
+<li>Request bonding with a remote Bluetooth device.
+<ol>
+<li>
+<p>You can request to bond with a remote device using the <span style="font-family: Courier New,Courier,monospace;">bt_device_create_bond()</span> function. If you want to cancel bonding, call the <span style="font-family: Courier New,Courier,monospace;">bt_device_cancel_bonding()</span> function.</p>
 <p>To get notified when the bonding has finished, register a <span style="font-family: Courier New,Courier,monospace;">bt_device_bond_created_cb()</span> callback function using the <span style="font-family: Courier New,Courier,monospace;">bt_device_set_bond_created_cb()</span> function. From this callback, you can get the service list that the remote Bluetooth device provides and the service UUID from that service list.</p>
-<p>The example below shows how to implement a <span style="font-family: Courier New,Courier,monospace;">bt_device_bond_created_cb()</span> callback function and bond with a remote Bluetooth device.</p>
-
-<pre class="prettyprint">void device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data) 
+<p>The following example shows how to implement the <span style="font-family: Courier New,Courier,monospace;">bt_device_bond_created_cb()</span> callback function and bond with a remote Bluetooth device.</p>
+<pre class="prettyprint">
+void 
+device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data) 
 {
 &nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
@@ -614,19 +586,23 @@ else
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_device_create_bond] succeeded. device_bond_created_cb callback will be called.&quot;);
 }</pre>
-<p>After that, the remote device is included in the bonded device list. So next time you do not need to find it again. Without finding, you can get information (such as address and name) by querying the bonded device.</p>
-<p>You can verify the bonding by calling the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span> function.</p>
-<p>If you want to remove the device from the bonded list, call the <span style="font-family: Courier New,Courier,monospace;">bt_device_destroy_bond()</span> function.</p>
+</li>
+<li>
+<p>After that, the remote device is included in the bonded device list. Next time you do not need to find it again. Without finding, you can get information (such as address and name) by querying the bonded device.</p>
+<p>You can verify the bonding by calling the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span> function. To remove the device from the bonded list, call the <span style="font-family: Courier New,Courier,monospace;">bt_device_destroy_bond()</span> function.</p>
+</li>
+</ol>
+</li>
+</ul>
 
  <h2 id="connect" name="connect">Connecting to Other Devices Using SPP</h2>
 			
 <p>To connect to other devices:</p>			
-<h3>Connecting as a Server</h3>
-<p>If you want your device to work as a server, establish a connection using an RFCOMM socket.</p>
-<p>To establish a connection, create a RFCOMM Bluetooth socket using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span> function. It has the following signature:</p>
-<pre class="prettyprint">int bt_socket_create_rfcomm(const char *port_uuid, int *socket_fd)</pre>
-<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">port_uuid</span>, uniquely identifies which service to provide. It is the UUID of the service. This UUID must match for the connection to be accepted. The second parameter, <span style="font-family: Courier New,Courier,monospace;">socket_fd</span>, is the RFCOMM socket ID as an output parameter.</p>
-<p>The example below shows how to make an rfcomm socket with the Bluetooth API.</p>
+<ul>
+<li>Connect as a server
+<ol>
+<li>
+<p>To establish a connection with your device as a server, create a RFCOMM Bluetooth socket using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span> function. The first parameter is the UUID of the service, which uniquely identifies which service to provide. This UUID must match for the connection to be accepted. The second parameter is the RFCOMM socket ID as an output parameter.</p>
 <pre class="prettyprint">const char* my_uuid=&quot;00001101-0000-1000-8000-00805F9B34FB&quot;;
 int server_socket_fd = -1;
 bt_error_e ret;
@@ -636,23 +612,19 @@ if (ret != BT_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_socket_create_rfcomm() failed.&quot;);
 }</pre>
-<p>To listen for an incoming connection, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_listen_and_accept_rfcomm()</span> function.</p>
-<p>This function is declared as follows:</p>
+</li>
+<li>
+<p>To listen for an incoming connection, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_listen_and_accept_rfcomm()</span> function. The first parameter is the socket fd passed from <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span>, which starts listening. The second parameter is the maximum number of pending connections that a Bluetooth server can store.</p>
 <pre class="prettyprint">int bt_socket_listen_and_accept_rfcomm(int socket_fd, int max_pending_connections)</pre>
 
-<ul><li><span style="font-family: Courier New,Courier,monospace;">int socket_fd</span>: socket fd passed from <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span>, which starts listening</li>
-<li><span style="font-family: Courier New,Courier,monospace;">int max_pending_connections</span>: maximum number of pending connections that a Bluetooth server can store</li></ul>
-
-
-<p>You can be notified about which device connects to your device by using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span> function.</p>
-
-<p>The callback function is declared as follows:</p>
-<pre class="prettyprint">typedef void (* bt_socket_connection_state_changed_cb) (int result, bt_socket_connection_state_e connection_state, bt_socket_connection_s *connection, void *user_data)</pre>
-
-<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">result</span>, is the change in the connection state. The second parameter, <span style="font-family: Courier New,Courier,monospace;">connection_state</span>, is the connection state, itself, either <span style="font-family: Courier New,Courier,monospace;">BT_SOCKET_CONNECTED</span> or <span style="font-family: Courier New,Courier,monospace;">BT_SOCKET_DISCONNECTED</span>. The third parameter is the pointer to the structure <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_s</span>, which can specify an RFCOMM Bluetooth socket. The <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_s</span> structure contains <span style="font-family: Courier New,Courier,monospace;">socket_fd</span>, role (client or server), and the opposite Bluetooth device&#39;s MAC address. The fourth parameter, <span style="font-family: Courier New,Courier,monospace;">user_data</span>, is user-defined data.</p>
+</li>
+<li>
+<p>Get notified about which device connects to your device by using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span> function. The first parameter, <span style="font-family: Courier New,Courier,monospace;">result</span>, is the change in the connection state. The second parameter, <span style="font-family: Courier New,Courier,monospace;">connection_state</span>, is the connection state, itself, either <span style="font-family: Courier New,Courier,monospace;">BT_SOCKET_CONNECTED</span> or <span style="font-family: Courier New,Courier,monospace;">BT_SOCKET_DISCONNECTED</span>. The third parameter is the pointer to the structure <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_s</span>, which can specify an RFCOMM Bluetooth socket. The <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_s</span> structure contains <span style="font-family: Courier New,Courier,monospace;">socket_fd</span>, role (client or server), and the opposite Bluetooth device&#39;s MAC address. The fourth parameter, <span style="font-family: Courier New,Courier,monospace;">user_data</span>, is user-defined data.</p>
 
-<p>The example below shows how to implement a callback function and start listening for Bluetooth client devices.</p>
-<pre class="prettyprint">void socket_connection_state_changed(int result, bt_socket_connection_state_e connection_state, bt_socket_connection_s *connection, void *user_data) 
+<pre class="prettyprint">
+void 
+socket_connection_state_changed(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;bt_socket_connection_s *connection, void *user_data) 
 {
 &nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
@@ -713,9 +685,15 @@ else
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_socket_listen_and_accept_rfcomm] Succeeded. bt_socket_connection_state_changed_cb will be called.&quot;);
 &nbsp;&nbsp;&nbsp;// Waiting for incoming connections
 }</pre>
+
 <p>If you do not want to accept any other connections or provide a service, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_destroy_rfcomm()</span> function.</p>
+</li>
+</ol>
+</li>
 
-<h3>Connecting as a Client</h3>
+<li>Connect as a client
+<ol>
+<li>
 <p>Set up the <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span> function that is called when your device is connected to a Bluetooth server device.</p>
 
 
@@ -729,16 +707,10 @@ else
     </tr> 
    </tbody> 
   </table> 
-  
-<p>Request a connection to the Bluetooth server. The server socket fd is used when you send data or disconnect.</p>
-<pre class="prettyprint">bt_socket_connect_rfcomm (const char *remote_address, const char *remote_port_uuid)</pre>
-<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">remote_address</span>, is the address of the remote device. You can get this from the <span style="font-family: Courier New,Courier,monospace;">bt_device_info_s</span> structure.</p>
-
-<p>The second parameter, <span style="font-family: Courier New,Courier,monospace;">remote_port_uuid</span>, is the UUID for the specific RFCOMM-based service on a remote device.</p>
-<p>This remote_port_uuid must match the UUID used by the server device in the <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span> function.</p>
-
-<p>The example below shows how to connect to a specific RFCOMM-based service on a remote device.</p>
-
+ </li>
+ <li>
+<p>Request a connection to the Bluetooth server using the <span style="font-family: Courier New,Courier,monospace;">bt_socket_connect_rfcomm()</span> function. The server socket fd is used when you send data or disconnect.</p>
+<p>The first parameter is the address of the remote device. You can get this from the <span style="font-family: Courier New,Courier,monospace;">bt_device_info_s</span> structure. The second parameter is the UUID for the specific RFCOMM-based service on a remote device. This remote_port_uuid must match the UUID used by the server device in the <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span> function.</p>
 <pre class="prettyprint">const char *service_uuid=&quot;00001101-0000-1000-8000-00805F9B34FB&quot;;
  
 ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed, NULL);
@@ -760,24 +732,24 @@ else
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_socket_connect_rfcomm] Succeeded. bt_socket_connection_state_changed_cb will be called.&quot;);
 }</pre>
+</li>
+</ol>
+</li>
+</ul>
 
  <h2 id="exchange" name="exchange">Exchanging Data Using SPP</h2>
 
 <p>To share data between devices after establishing a connection:</p>
-<ol><li><p>To write data, use the <span style="font-family: Courier New,Courier,monospace;">bt_socket_send_data()</span> function.</p>
-<p>This function is declared as follows:</p>
-<pre class="prettyprint">int bt_socket_send_data(int socket_fd, const char *data, int length)</pre>
-<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">socket_fd</span>, is the socket ID from the <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span> function. The second parameter, <span style="font-family: Courier New,Courier,monospace;">data</span>, is the data to write. The third parameter, <span style="font-family: Courier New,Courier,monospace;">length</span>, is the data length.</p></li>
-<li><p>To read data from other devices, you must set up the <span style="font-family: Courier New,Courier,monospace;">bt_socket_data_received_cb()</span> callback that will be invoked when your device receives data from other Bluetooth devices.</p>
-<p>To register a <span style="font-family: Courier New,Courier,monospace;">bt_socket_data_received_cb()</span> callback function, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_set_data_received_cb()</span> function. The callback function is declared as follows:</p>
-<pre class="prettyprint">typedef void bt_socket_data_received_cb(bt_socket_received_data_s* data, void* user_data)</pre>
-<p>The first parameter, <span style="font-family: Courier New,Courier,monospace;">data</span>, is the pointer to the structure <span style="font-family: Courier New,Courier,monospace;">bt_socket_received_data_s</span> that can specify received data, data size, and socket fd. The second parameter, <span style="font-family: Courier New,Courier,monospace;">user_data</span>, is user data. This callback will be called whenever your device receives data from other Bluetooth devices. You can read the data in the callback.</p>
+<ol><li><p>To write data, use the <span style="font-family: Courier New,Courier,monospace;">bt_socket_send_data()</span> function. The first parameter is the socket ID from the <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span> function. The second parameter  is the data to write. The third parameter is the data length.</p></li>
+<li><p>To read data from other devices, you must set up the <span style="font-family: Courier New,Courier,monospace;">bt_socket_data_received_cb()</span> callback that is invoked when your device receives data from other Bluetooth devices.</p>
+<p>To register a <span style="font-family: Courier New,Courier,monospace;">bt_socket_data_received_cb()</span> callback function, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_set_data_received_cb()</span> function. The first parameter is the pointer to the <span style="font-family: Courier New,Courier,monospace;">bt_socket_received_data_s</span> structure that can specify received data, data size, and socket fd. The second parameter is user data. This callback is called whenever your device receives data from other Bluetooth devices. You can read the data in the callback.</p>
 
 <pre class="prettyprint">bt_error_e ret;
 char data[] = &quot;Sending test&quot;;
 int client_socket_fd = 0;
 
-void bt_socket_data_received_cb(bt_socket_received_data_s* data, void* user_data)
+void 
+bt_socket_data_received_cb(bt_socket_received_data_s* data, void* user_data)
 {
 &nbsp;&nbsp;&nbsp;if (data == NULL) 
 &nbsp;&nbsp;&nbsp;{
@@ -806,7 +778,7 @@ if (ret != BT_ERROR_NONE)
 
 <p>To disconnect from a device, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_destroy_rfcomm()</span> or <span style="font-family: Courier New,Courier,monospace;">bt_socket_disconnect_rfcomm()</span> function:</p>
 
-<ol><li>Disconnect the Bluetooth server:
+<ul><li>Disconnect the Bluetooth server:
 <pre class="prettyprint">bt_error_e ret;
  
 // You can get &quot;server_socket_fd&quot; from output of bt_socket_create_rfcomm()
@@ -832,19 +804,18 @@ if (ret != BT_ERROR_NONE)
 else 
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_socket_destroy_rfcomm] Succeeded. server_socket_fd = %d.&quot;, server_socket_fd);
-}</pre></li></ol>
+}</pre></li></ul>
 
-<h2 id="gatt_client" name="gatt_client">Performing GATT Client Operations</h2>
-<p>To perform GATT operations:</p>
+<h2 id="gatt" name="gatt">Managing the Client Operations</h2>
+<p>To perform GATT client operations:</p>
 <ol>
 <li>Register a callback for connection state changes:
 <pre class="prettyprint">
 int ret = 0;
 // Register for GATT connection callback
-void __bt_gatt_connection_state_changed_cb(int result, 
-&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;bool connected, 
-&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;const char *remote_address, 
-&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;void *user_data) 
+void
+__bt_gatt_connection_state_changed_cb(int result, bool connected, 
+&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;const char *remote_address, void *user_data) 
 {
 &nbsp;&nbsp;&nbsp;if (connected)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;LE connected&quot;);
@@ -863,7 +834,6 @@ if (ret == BT_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
 break;
 </pre>
-
 </li>
 
 <li>Unregister the callback registered for connection state changes:
@@ -884,7 +854,7 @@ break;
 </pre>
 </li>
 
-<li>Gets the address of remote device:
+<li>Get the address of the remote device:
 <pre class="prettyprint">
 int ret = 0;
 char *addr = NULL;
@@ -901,9 +871,7 @@ break;
 <pre class="prettyprint">
 int ret = 0;
 
-ret = bt_gatt_client_foreach_services(client,
-&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_gatt_client_foreach_svc_cb, 
-&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;(void *)test_id);
+ret = bt_gatt_client_foreach_services(client, __bt_gatt_client_foreach_svc_cb, (void *)test_id);
 if (ret != BT_ERROR_NONE) 
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;fail&quot;);
@@ -913,7 +881,8 @@ break;
 </li>
 <li>Use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_foreach_svc_cb()</span> callback to initiate the service characteristics discovery:
 <pre class="prettyprint">
-bool __bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle, void *data)
+bool 
+__bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle, void *data)
 {
 &nbsp;&nbsp;&nbsp;int test_id = (int)data;
 &nbsp;&nbsp;&nbsp;int ret;
@@ -933,7 +902,6 @@ bool __bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_service_foreach_characteristics is failed : %d&quot;, ret);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
 &nbsp;&nbsp;&nbsp;}
 }
@@ -941,7 +909,8 @@ bool __bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle,
 </li>
 <li>Use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_foreach_chr_cb()</span> callback to discover the characteristic descriptors:
 <pre class="prettyprint">
-bool __bt_gatt_client_foreach_chr_cb(int total, int index, bt_gatt_h chr_handle, void *data)
+bool 
+__bt_gatt_client_foreach_chr_cb(int total, int index, bt_gatt_h chr_handle, void *data)
 {
 &nbsp;&nbsp;&nbsp;int ret;
 &nbsp;&nbsp;&nbsp;char *uuid = NULL;
@@ -964,7 +933,8 @@ bool __bt_gatt_client_foreach_chr_cb(int total, int index, bt_gatt_h chr_handle,
 </li>
 <li>Use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_foreach_desc_cb()</span> callback to get the descriptor data: 
 <pre class="prettyprint">
-bool __bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handle, void *data)
+bool 
+__bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handle, void *data)
 {
 &nbsp;&nbsp;&nbsp;char *uuid = NULL;
 
@@ -973,7 +943,6 @@ bool __bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handl
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;\t\t[%d / %d] uuid : (%s)&quot;, index, total, uuid);
 &nbsp;&nbsp;&nbsp;__bt_gatt_client_print_value(desc_handle);
 
-&nbsp;&nbsp;&nbsp;g_free(str);
 &nbsp;&nbsp;&nbsp;g_free(uuid);
 
 &nbsp;&nbsp;&nbsp;return true;
@@ -982,7 +951,6 @@ bool __bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handl
 </li>
 </ol>
 </li>
-
 <li>Read the value of the given attribute handle:
 <pre class="prettyprint">
 {
@@ -1041,22 +1009,21 @@ bool __bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handl
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_read_value is failed : %d&quot;, ret);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;__bt_free_test_param(&amp;g_test_param);
 }
 </pre> 
 <p>After the reading operation is complete, use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_read_complete_cb()</span> callback to handle values:</p>
 <pre class="prettyprint">
-void __bt_gatt_client_read_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
+void 
+__bt_gatt_client_read_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
 {
 &nbsp;&nbsp;&nbsp;char *uuid = NULL;
 
 &nbsp;&nbsp;&nbsp;bt_gatt_get_uuid(gatt_handle, &amp;uuid);
 
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Read %s for uuid : (%s)&quot;,
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Read %s for uuid : (%s)&quot;, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result == BT_ERROR_NONE ? &quot;Success&quot; : &quot;Fail&quot;, uuid);
 
-&nbsp;&nbsp;&nbsp;g_free(str);
 &nbsp;&nbsp;&nbsp;g_free(uuid);
 
 &nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE)
@@ -1147,30 +1114,28 @@ void __bt_gatt_client_read_complete_cb(int result, bt_gatt_h gatt_handle, void *
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_write_value is failed : %d&quot;, ret);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;__bt_free_test_param(&amp;g_test_param);
 }
 </pre>
 <p>After the writing operation is complete, use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_write_complete_cb()</span> callback to finish the task:</p>
 <pre class="prettyprint">
-void __bt_gatt_client_write_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
+void 
+__bt_gatt_client_write_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
 {
 &nbsp;&nbsp;&nbsp;char *uuid = NULL;
 
 &nbsp;&nbsp;&nbsp;bt_gatt_get_uuid(gatt_handle, &amp;uuid);
 
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Write %s for uuid : (%s)&quot;,
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Write %s for uuid : (%s)&quot;, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result == BT_ERROR_NONE ? &quot;Success&quot; : &quot;Fail&quot;, uuid);
 
-&nbsp;&nbsp;&nbsp;g_free(str);
 &nbsp;&nbsp;&nbsp;g_free(uuid);
 
 &nbsp;&nbsp;&nbsp;return;
 }
 </pre>
 </li>
-
-<li>Registers a callback function to be invoked when the characteristic value is changed on the remote device:
+<li>Register a callback function to be invoked when the characteristic value changes on the remote device:
 
 <pre class="prettyprint">
 {
@@ -1193,7 +1158,7 @@ void __bt_gatt_client_write_complete_cb(int result, bt_gatt_h gatt_handle, void
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_get_service is failed : %d&quot;, ret);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__bt_free_test_param(&amp;g_test_param);
-&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;chr);
@@ -1204,8 +1169,7 @@ void __bt_gatt_client_write_complete_cb(int result, bt_gatt_h gatt_handle, void
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;}
 
-&nbsp;&nbsp;&nbsp;ret = bt_gatt_client_set_characteristic_value_changed_cb(chr,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__bt_gatt_client_value_changed_cb, NULL);
+&nbsp;&nbsp;&nbsp;ret = bt_gatt_client_set_characteristic_value_changed_cb(chr, __bt_gatt_client_value_changed_cb, NULL);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_set_characteristic_value_changed_cb is failed : %d&quot;, ret);
@@ -1213,10 +1177,10 @@ void __bt_gatt_client_write_complete_cb(int result, bt_gatt_h gatt_handle, void
 &nbsp;&nbsp;&nbsp;}
 }
 </pre>
-<p>After registering callback operation, use the <span style="font-family: Courier New,Courier,monospace;">__bt_gatt_client_value_changed_cb()</span> callback to display the changed value:</p>
+<p>After registering the callback operation, use the <span style="font-family: Courier New,Courier,monospace;">__bt_gatt_client_value_changed_cb()</span> callback to display the changed value:</p>
 <pre class="prettyprint">
-void __bt_gatt_client_value_changed_cb(bt_gatt_h chr, char *value, int len,
-&nbsp;&nbsp;void *user_data)
+void 
+__bt_gatt_client_value_changed_cb(bt_gatt_h chr, char *value, int len, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;char *uuid = NULL;
 &nbsp;&nbsp;&nbsp;int i;
@@ -1227,9 +1191,8 @@ void __bt_gatt_client_value_changed_cb(bt_gatt_h chr, char *value, int len,
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;len [%d]&quot;, len);
 &nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i++)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;value %u&quot;, value[i]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;value %u&quot;, value[i]);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;g_free(uuid);
 
 &nbsp;&nbsp;&nbsp;return;
@@ -1237,7 +1200,7 @@ void __bt_gatt_client_value_changed_cb(bt_gatt_h chr, char *value, int len,
 </pre>
 </li>
 
-<li>Unregisters the registered characteristic value changed callback. After Unregistration, the value change will not be informed:
+<li>Unregister the callback for characteristic value changes. Afterwards, you are not notified of the value changes.
 
 <pre class="prettyprint">
 {
@@ -1260,7 +1223,7 @@ void __bt_gatt_client_value_changed_cb(bt_gatt_h chr, char *value, int len,
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_get_service is failed : %d&quot;, ret);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__bt_free_test_param(&amp;g_test_param);
-&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;chr);
@@ -1293,17 +1256,19 @@ break;
 </pre></li>
 </ol>
 
-<h2 id="gatt_getter" name="gatt_getter">Performing GATT Client Common Getter Operations</h2>
-<p>To perform Getter operations for both GATT Client related information:</p>
-<ol>
-<li>Gets the type of a service, characteristic or descriptor's GATT handle:
+
+
+<h2 id="gatt_getter" name="gatt_getter">Managing Common Getter Operations</h2>
+<p>To perform getter operations for client-related information:</p>
+<ul>
+<li>Get the type of a service, characteristic, or descriptor handle:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
 &nbsp;&nbsp;&nbsp;bt_gatt_h gatt_handle = NULL;
 &nbsp;&nbsp;&nbsp;bt_gatt_type_e gatt_type;
 
-&nbsp;&nbsp;&nbsp;// Handle is already created either for Service/Characteristic/Descriptor using
+&nbsp;&nbsp;&nbsp;// Handle is already created for service/characteristic/descriptor
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_get_type(gatt_handle, &amp;gatt_type);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1313,14 +1278,14 @@ break;
 }
 </pre></li>
 
-<li>Gets the UUID of a service, characteristic or descriptor's GATT handle:
+<li>Get the UUID of a service, characteristic, or descriptor handle:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
 &nbsp;&nbsp;&nbsp;bt_gatt_h gatt_handle = NULL;
 &nbsp;&nbsp;&nbsp;char *uuid = NULL;
 
-&nbsp;&nbsp;&nbsp;// Handle is already created either for Service/Characteristic/Descriptor using
+&nbsp;&nbsp;&nbsp;// Handle is already created for service/characteristic/descriptor
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_get_uuid(gatt_handle, &amp;uuid);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1330,7 +1295,7 @@ break;
 }
 </pre></li>
 
-<li>Gets the value of a characteristic or descriptor's GATT handle:
+<li>Get the value of a characteristic or descriptor handle:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
@@ -1338,7 +1303,7 @@ break;
 &nbsp;&nbsp;&nbsp;bt_gatt_h gatt_handle = NULL;
 &nbsp;&nbsp;&nbsp;char *value = NULL;
 
-&nbsp;&nbsp;&nbsp;// Handle is already created either for Characteristic/Descriptor using
+&nbsp;&nbsp;&nbsp;// Handle is already created for characteristic/descriptor
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_get_value(gatt_handle, &amp;value, &amp;len);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1348,7 +1313,7 @@ break;
 }
 </pre></li>
 
-<li>Gets the value of a characteristic or descriptor's GATT handle as an integer type:
+<li>Get the value of a characteristic or descriptor handle as an <span style="font-family: Courier New,Courier,monospace;">integer</span> type:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
@@ -1357,7 +1322,7 @@ break;
 &nbsp;&nbsp;&nbsp;bt_gatt_h gatt_handle = NULL;
 &nbsp;&nbsp;&nbsp;int value;
 
-&nbsp;&nbsp;&nbsp;// Assuming All the input parameters[gatt_handle, type& offset] available.
+&nbsp;&nbsp;&nbsp;// Assuming all the input parameters (gatt_handle, type, and offset) are available
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_get_int_value(gatt_handle, type, offset, &amp;value);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1367,7 +1332,7 @@ break;
 }
 </pre></li>
 
-<li>Gets the value of a characteristic or descriptor's GATT handle as a float type:
+<li>Get the value of a characteristic or descriptor handle as a <span style="font-family: Courier New,Courier,monospace;">float</span> type:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;int ret = 0;
@@ -1376,7 +1341,7 @@ break;
 &nbsp;&nbsp;&nbsp;bt_gatt_h gatt_handle = NULL;
 &nbsp;&nbsp;&nbsp;float value;
 
-&nbsp;&nbsp;&nbsp;// Assuming All the input parameters[gatt_handle, type& offset] available.
+&nbsp;&nbsp;&nbsp;// Assuming all the input parameters (gatt_handle, type, and offset) are available
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_get_float_value(gatt_handle, type, offset, &amp;value);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1386,7 +1351,7 @@ break;
 }
 </pre></li>
 
-<li>Gets a service's GATT handle which has specific UUID:
+<li>Get a service handle with a specific UUID:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;char *svc_uuid = NULL;
@@ -1409,7 +1374,7 @@ break;
 }
 </pre></li>
 
-<li>Gets a characteristic's GATT handle which has specific UUID:
+<li>Get a characteristic handle with a specific UUID:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;char *svc_uuid = NULL;
@@ -1443,7 +1408,7 @@ break;
 }
 </pre></li>
 
-<li>Gets a descriptor's GATT handle which has specific UUID:
+<li>Get a descriptor handle with a specific UUID:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;char *svc_uuid = NULL;
@@ -1490,13 +1455,13 @@ break;
 }
 </pre></li>
 
-<li>Gets the properties using characteristic's GATT handle:
+<li>Get the properties using the characteristic handle:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;bt_gatt_h chr = NULL;
 &nbsp;&nbsp;&nbsp;int properties;
 
-&nbsp;&nbsp;&nbsp;//get the characteristic handle using bt_gatt_service_get_characteristic()
+&nbsp;&nbsp;&nbsp;// Get the characteristic handle using bt_gatt_service_get_characteristic()
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_characteristic_get_properties(chr, &amp;properties);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1506,12 +1471,12 @@ break;
 }
 </pre></li>
 
-<li>Gets the service's GATT handle for which the specified characteristic belongs to:
+<li>Get the service handle to which the specified characteristic belongs:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;bt_gatt_h svc = NULL;
 &nbsp;&nbsp;&nbsp;bt_gatt_h chr = NULL;
-&nbsp;&nbsp;&nbsp;//chr = Assuming characteristic's handle is already available
+&nbsp;&nbsp;&nbsp;// chr = Assuming characteristic handle is already available
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_characteristic_get_service(chr, &amp;svc);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1521,12 +1486,12 @@ break;
 }
 </pre></li>
 
-<li>Gets the characteristic's GATT handle for which the specified descriptor belongs to:
+<li>Get the characteristic handle to which the specified descriptor belongs:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;bt_gatt_h chr = NULL;
 &nbsp;&nbsp;&nbsp;bt_gatt_h dsc = NULL;
-&nbsp;&nbsp;&nbsp;//dsc = Assuming descriptor's handle is already available.
+&nbsp;&nbsp;&nbsp;// dsc = Assuming descriptor handle is already available
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_descriptor_get_characteristic(des, &amp;chr);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1536,12 +1501,12 @@ break;
 }
 </pre></li>
 
-<li>Gets the GATT client handle for which the specified service belongs to:
+<li>Get the client handle to which the specified service belongs:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;bt_gatt_h svc = NULL;
 &nbsp;&nbsp;&nbsp;bt_gatt_client_h client = NULL;
-&nbsp;&nbsp;&nbsp;//svc = Assuming service's handle is already available.
+&nbsp;&nbsp;&nbsp;// svc = Assuming service handle is already available
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_service_get_client(svc, &amp;client);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1551,12 +1516,12 @@ break;
 }
 </pre></li>
 
-<li>Gets the write type of the specified characteristic:
+<li>Get the write type of the specified characteristic:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;bt_gatt_h chr = NULL;
 &nbsp;&nbsp;&nbsp;bt_gatt_write_type_e write_type = NULL;
-&nbsp;&nbsp;&nbsp;//svc = Assuming characteristic's handle is already available.
+&nbsp;&nbsp;&nbsp;// svc = Assuming characteristic handle is already available
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_characteristic_get_write_type(chr, &amp;write_type);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1566,14 +1531,14 @@ break;
 }
 </pre></li>
 
-<li>Gets an included service's GATT handle which has specific UUID:
+<li>Get an included service&#39;s handle with a specific UUID:
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;bt_gatt_h svc = NULL;
 &nbsp;&nbsp;&nbsp;bt_gatt_h included_svc = NULL;
 &nbsp;&nbsp;&nbsp;char *uuid = NULL;
 &nbsp;&nbsp;&nbsp;bt_gatt_write_type_e write_type = NULL;
-&nbsp;&nbsp;&nbsp;//svc = Assuming service's handle and UUID are already available.
+&nbsp;&nbsp;&nbsp;// svc = Assuming service handle and UUID are already available
 
 &nbsp;&nbsp;&nbsp;ret = bt_gatt_service_get_included_service(svc, uuid, &amp;included_svc);
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
@@ -1582,103 +1547,109 @@ break;
 &nbsp;&nbsp;&nbsp;}
 }
 </pre></li>
-</ol>
 
-<h2 id="gatt_setter" name="gatt_setter">Gatt Client/Server Common setter operations</h2>
+</ul>
+
+<h2 id="gatt_setter" name="gatt_setter">Managing Common Setter Operations</h2>
+
+<p>The setter operations are common for the client role.</p>
 
-<p>Set the properties and values of the attribute, These operations are common for Server and Client roles.</p>
+<p>To set the properties and values of attributes:</p>
 <ol>
 
-<li>Set/Update characteristic Value, value of the type unit8 or char:
+<li>Set or update the characteristic value (<span style="font-family: Courier New,Courier,monospace">unit8</span> or <span style="font-family: Courier New,Courier,monospace">char</span> type value):
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;char char_value[1] = {1 + (rand()%100)};
+int ret = 0;
+char char_value[1] = {1 + (rand()%100)};
 
-/* In case of Client, the characteristic handle shall be retrived from the client created using gatt_client_create(),
- * using the  bt_gatt_service_get_characteristic()*/
+// For client, the characteristic handle is retrieved from the client created using gatt_client_create()
+// by using bt_gatt_service_get_characteristic()
 
-&nbsp;&nbsp;&nbsp;ret = bt_gatt_set_value(characteristic_handle, char_value, 1);
-&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+ret = bt_gatt_set_value(characteristic_handle, char_value, 1);
+if (ret == BT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
 </pre></li>
 
-<li>Set/Update characteristic Value, value of the type integer:
+<li>Set or update the characteristic value (<span style="font-family: Courier New,Courier,monospace">integer</span> type value):
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;int char_value = 60 + (rand()%60);
+int ret = 0;
+int char_value = 60 + (rand()%60);
 
-/* In case of Client, the characteristic handle shall be retrived from the client created using gatt_client_create(),
- * using the  bt_gatt_service_get_characteristic()*/
+// For client, the characteristic handle is retrieved from the client created using gatt_client_create()
+// by using bt_gatt_service_get_characteristic()
 
-&nbsp;&nbsp;&nbsp;ret = bt_gatt_set_int_value(characteristic_handle, BT_DATA_TYPE_UINT16, char_value, 1);
-&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+ret = bt_gatt_set_int_value(characteristic_handle, BT_DATA_TYPE_UINT16, char_value, 1);
+if (ret == BT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
 </pre></li>
 
-<li>Set/Update characteristic Value, value of the type float:
+<li>Set or update the characteristic value (<span style="font-family: Courier New,Courier,monospace">float</span> type value):
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;int ret = 0;
+int ret = 0;
 
-/* In case of Client, the characteristic handle shall be retrived from the client created using gatt_client_create(),
- * using the  bt_gatt_service_get_characteristic()*/
+// For client, the characteristic handle is retrieved from the client created using gatt_client_create()
+// by using bt_gatt_service_get_characteristic()
 
-&nbsp;&nbsp;&nbsp; /* Here the char value is, value: 123 exponent -2 */
-&nbsp;&nbsp;&nbsp;ret = bt_gatt_set_float_value(characteristic_handle, BT_DATA_TYPE_FLOAT, 123, -2, 1);
-&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+// Here the char value is, value: 123 exponent -2
+ret = bt_gatt_set_float_value(characteristic_handle, BT_DATA_TYPE_FLOAT, 123, -2, 1);
+if (ret == BT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
 </pre></li>
 
-<li>Set characteristic write type:
+<li>Set the characteristic write type:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;bt_gatt_h svc = NULL;
-&nbsp;&nbsp;&nbsp;bt_gatt_h control_point = NULL;
-&nbsp;&nbsp;&nbsp;char *svc_uuid = "000018f2-0000-1000-8000-00805f9b34fb";
-&nbsp;&nbsp;&nbsp;char *chr_uuid = "00002af6-0000-1000-8000-00805f9b34fb";
+int ret = 0;
+bt_gatt_h svc = NULL;
+bt_gatt_h control_point = NULL;
+char *svc_uuid = &quot;000018f2-0000-1000-8000-00805f9b34fb&quot;;
+char *chr_uuid = &quot;00002af6-0000-1000-8000-00805f9b34fb&quot;;
 
-&nbsp;&nbsp;&nbsp;ret = bt_gatt_client_get_service(client, svc_uuid, &ancs_svc);
-&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+ret = bt_gatt_client_get_service(client, svc_uuid, &amp;ancs_svc);
+if (ret == BT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
 
-&nbsp;&nbsp;&nbsp;ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &control_point);
-&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;control_point);
+if (ret == BT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
 
-&nbsp;&nbsp;&nbsp;ret = bt_gatt_characteristic_set_write_type(control_point,
-&nbsp;&nbsp;&nbsp;			BT_GATT_WRITE_TYPE_WRITE);
-&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+ret = bt_gatt_characteristic_set_write_type(control_point,
+&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_GATT_WRITE_TYPE_WRITE);
+if (ret == BT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
 
-&nbsp;&nbsp;&nbsp;ret = bt_gatt_set_value(control_point, value, len);
-&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+ret = bt_gatt_set_value(control_point, value, len);
+if (ret == BT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
 
-&nbsp;&nbsp;&nbsp;ret = bt_gatt_client_write_value(control_point,
-&nbsp;&nbsp;&nbsp;			__write_completed_cb, NULL);
-&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+ret = bt_gatt_client_write_value(control_point, __write_completed_cb, NULL);
+if (ret == BT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
 
-&nbsp;&nbsp;&nbsp;return ret;
+return ret;
 
-&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+if (ret == BT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
 </pre></li>
 </ol>
 
- <h2 id="exc" name="exc">Exchanging Data Using OPP</h2>
 
-<p>To exchange data with Object Push Profile (OPP):</p>			
+  <h2 id="exc" name="exc">Exchanging Data Using OPP</h2>	
 			
 <p>The OPP is a basic profile for sending objects, such as pictures, virtual business cards, or schedules. The sender, which is a client, always initiates the transactions (called &quot;push&quot;), not the receiver, which is a server.</p>
-
-<h3>Server Role</h3>
+<p>To exchange data with Object Push Profile (OPP):</p>	
+<ul>
+<li>Exchange data in server role.
+<ol>
+<li>
 <p>The API has a server role to initialize the status of an OPP server device.</p>
+<p>The following example initializes the OPP server device requested by the <span style="font-family: Courier New,Courier,monospace;">bt_opp_server_push_requested_cb()</span>. The <span style="font-family: Courier New,Courier,monospace;">bt_opp_server_connection_requested_cb</span> function is called when an OPP connection is requested.</p>
 <pre class="prettyprint">
 bt_error_e ret;
 char *directory = NULL;
 storage_get_directory(0, STORAGE_DIRECTORY_DOWNLOADS, &amp;directory);
 
-void connection_requested_cb_for_opp_server(const char *remote_address, void *user_data)
+void 
+connection_requested_cb_for_opp_server(const char *remote_address, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote_address: %s&quot;, remote_address);
 }
@@ -1689,21 +1660,23 @@ if (ret != BT_ERROR_NONE)
 }
 free(directory);
 </pre>
-<p>This function initializes the OPP server device requested by the <span style="font-family: Courier New,Courier,monospace;">bt_opp_server_push_requested_cb()</span>. The <span style="font-family: Courier New,Courier,monospace;">bt_opp_server_connection_requested_cb</span> function is called when an OPP connection is requested.</p>
-
+</li>
+<li>
 <p>When a client requests a file push, the server can accept or reject it using the following functions:</p>
 <pre class="prettyprint">
 bt_error_e ret;
 const char file_name [18] = &quot;tempfile&quot;;
 
-void bt_opp_server_transfer_progress_cb_for_opp(const char *file, long long size, int percent, void *user_data)
+void 
+bt_opp_server_transfer_progress_cb_for_opp(const char *file, long long size, int percent, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;file: %s&quot;, file);
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;size: %ld&quot;, size);
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;percent: %d&quot;, percent);
 }
 
-void bt_opp_server_transfer_finished_cb_for_opp(int result, const char *file, long long size, void *user_data)
+void 
+bt_opp_server_transfer_finished_cb_for_opp(int result, const char *file, long long size, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;result: %d&quot;, result);
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;file: %s&quot;, file);
@@ -1724,8 +1697,12 @@ if (ret != BT_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_opp_server_reject] Failed.&quot;);
 }
 </pre>
-
-<h3>Client Role</h3>
+</li>
+</ol>
+</li>
+<li>Exchange data in client role.
+<ol>
+<li>
 <p>Initialize the client using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_initialize()</span> function:</p>
 <pre class="prettyprint">
 bt_error_e ret;
@@ -1738,7 +1715,9 @@ if (ret != BLUETOOTH_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;return -1;
 }
 </pre>
-<p>You can get the information of a file that can be sent to the server device using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_add_file()</span> function:</p>
+</li>
+<li>
+<p>Get the information of a file that can be sent to the server device using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_add_file()</span> function:</p>
 <pre class="prettyprint">
 bt_error_e ret;
 char *resource_path = NULL;
@@ -1757,31 +1736,37 @@ if (ret != BLUETOOTH_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;return -1;
 }
 </pre>
-<p>You can send the files to the server using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_push_files()</span> function:</p>
+</li>
+<li>
+<p>Send the files to the server using the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_push_files()</span> function:</p>
 <pre class="prettyprint">
 bt_error_e ret;
 char remote_addr[18] = REMOTE_DEVICE_MAC_ADDRESS;
 
-void __bt_opp_client_push_responded_cb(int result,
-&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;const char *remote_address,
-&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;void *user_data)
+void 
+__bt_opp_client_push_responded_cb(int result,
+&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 *remote_address,
+&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;void *user_data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;result: %d&quot;, result);
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote_address: %s&quot;, remote_address);
 }
 
-void __bt_opp_client_push_progress_cb(const char *file,
-&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;long long size,
-&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;int percent,
-&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;void *user_data)
+void 
+__bt_opp_client_push_progress_cb(const char *file,
+&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;long long size,
+&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;int percent,
+&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;void *user_data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;size: %ld&quot;, (long)size);
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;percent: %d&quot;, percent);
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;file: %s&quot;, file);
 }
-void __bt_opp_client_push_finished_cb(int result,
-&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;const char *remote_address,
-&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;void *user_data)
+
+void 
+__bt_opp_client_push_finished_cb(int result,
+&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 *remote_address,
+&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;void *user_data)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;result: %d&quot;, result);
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote_address: %s&quot;, remote_address);
@@ -1798,7 +1783,8 @@ else
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_opp_client_push_files] Succeeded.&quot;);
 }
 </pre>
-
+</li>
+<li>
 <p>After the push is finished by the client, call the <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_clear_files()</span> and <span style="font-family: Courier New,Courier,monospace;">bt_opp_client_deinitialize()</span> to release the Bluetooth resources related to the OPP client:</p>
 <pre class="prettyprint">
 bt_error_e ret;
@@ -1821,18 +1807,22 @@ if (ret != BLUETOOTH_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;return -1;
 }
 </pre>
+</li>
+</ol>
+</li>
+</ul>
+
 
-	
-	
 	<h2 id="le_scan" name="le_scan">Managing Bluetooth LE Scans</h2>
 	
-	<p>To discover nearby LE devices, perform a LE scan operation:</p>
+	<p>To discover nearby LE devices, perform an LE scan operation:</p>
 	<ol>
 	<li>
 	<p>To start the BLE scan:</p>
 	
 <pre class="prettyprint">
-int main()
+int 
+main()
 {
 &nbsp;&nbsp;&nbsp;int ret = BT_ERROR_NONE;
 &nbsp;&nbsp;&nbsp;ret = bt_adapter_le_start_scan(__bt_adapter_le_scan_result_cb, NULL);
@@ -1841,7 +1831,6 @@ int main()
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_le_start_scan] Failed.&quot;);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return;
 }
 </pre>
@@ -1853,9 +1842,10 @@ int main()
 	<pre class="prettyprint">
 int ret;
 
-void __bt_adapter_le_scan_result_cb(int result,
-&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_le_device_scan_result_info_s *info, 
-&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;void *user_data)
+void 
+__bt_adapter_le_scan_result_cb(int result,
+&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_le_device_scan_result_info_s *info, 
+&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;void *user_data)
 {
 &nbsp;&nbsp;&nbsp;bt_adapter_le_packet_type_e pkt_type = BT_ADAPTER_LE_PACKET_ADVERTISING;
 
@@ -1948,7 +1938,8 @@ void __bt_adapter_le_scan_result_cb(int result,
 <li>
 	<p>To stop the BLE scan operation:</p>
 <pre class="prettyprint">
-int main()
+int 
+main()
 {
 &nbsp;&nbsp;&nbsp;int ret = BT_ERROR_NONE;
 &nbsp;&nbsp;&nbsp;ret = bt_adapter_le_stop_scan();
@@ -1957,7 +1948,6 @@ int main()
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_le_stop_scan] Failed.&quot;);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return;
 }
 </pre>	
@@ -1966,13 +1956,24 @@ int main()
 
 <h2 id="le_discovery" name="le_discovery">Discovering Bluetooth LE Devices</h2>
 
-	<p>Perform LE discovery operation to discover nearby Bluetooth LE Devices. Callbacks can be registered and unregistered for the LE discovery operation through the use of set and unset callback functions</p>
-	<p>The registered device discovery call back provides details of the discovered devices and state of discovery (started, finished, found):</p>
-	<p>To start the BLE discovery operation. Please note, the below described BLE discovery apis are deprecated since tizen_2.3.1</p>
-	<p>Please refer to the section "Managing Bluetooth LE Scans" for scanning nearby BLE devices.
+<p>Perform the LE discovery operation to discover nearby Bluetooth LE devices. You can register and unregister callbacks for the LE discovery operation through the use of set and unset callback functions. The registered device discovery callback provides details of the discovered devices and the state of the discovery (started, finished, found).</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The APIs used in this use case are deprecated since Tizen 2.3.1. For scanning nearby BLE devices in Tizen 2.3.1 and later, see <a href="#le_scan">Managing Bluetooth LE Scans</a>.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>To start the BLE discovery operation:</p>
 
 <pre class="prettyprint">
-int main()
+int 
+main()
 {
 &nbsp;&nbsp;&nbsp;int ret = BT_ERROR_NONE;
 
@@ -1984,29 +1985,28 @@ int main()
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_le_start_device_discovery] Failed.&quot;);
 &nbsp;&nbsp;&nbsp;}
-
-/* To unset the le device discovery state change call back*/
+&nbsp;&nbsp;&nbsp;// To unset the LE device discovery state change callback
 &nbsp;&nbsp;&nbsp;ret = bt_adapter_le_unset_device_discovery_state_changed_cb
-&nbsp;&nbsp;&nbsp;
 
 &nbsp;&nbsp;&nbsp;return;
 }
 </pre>
-</ol>
-
-	<h2 id="add_adv_data" name="add_adv_data">Add Advertising Data to the LE Advertisement</h2>
+	
+	<h2 id="add_adv_data" name="add_adv_data">Adding Advertising Data to the LE Advertisement</h2> 
 	
 	<p>LE advertising data can be added to the LE advertisement or the scan response data. You can add various information, such as the device name, service UUID, service solicitation UUID, advertising appearance, advertising transmission power level, device name, and manufacturer data.</p>
-	<ol>
-	<li>
-<p>To add the advertising data:</p>
+	<p>To add the advertising data:</p>
+<ol>
+<li>
+<p>Add the advertising data:</p>
 
 <pre class="prettyprint">
 static bt_advertiser_h advertiser = NULL;
 static bt_advertiser_h advertiser_list[3] = {NULL, };
 static int advertiser_index = 0;
 
-int le_add_advertising_data()
+int 
+le_add_advertising_data()
 {
 &nbsp;&nbsp;&nbsp;int adv_data_type = 3; // Default all
 &nbsp;&nbsp;&nbsp;int manufacturer_id = 117;
@@ -2162,19 +2162,18 @@ int le_add_advertising_data()
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add manufacturer data [0x%04x]&quot;, ret);
 }
 </pre>
+</li>
 <li>
-
-	<p>To destroy the LE advertiser:</p>
+<p>When you are done, destroy the LE advertiser:</p>
 <pre class="prettyprint">
 {
 &nbsp;&nbsp;&nbsp;int ret = BT_ERROR_NONE;
 &nbsp;&nbsp;&nbsp;ret = bt_adapter_le_destroy_advertiser(advertiser);
-
+ 
 &nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_le_destroy_advertiser] Failed.&quot;);
 &nbsp;&nbsp;&nbsp;}
-
 &nbsp;&nbsp;&nbsp;return;
 }
 </pre>
@@ -2245,7 +2244,8 @@ if (ret != BT_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add scan response data [0x%04x]&quot;, ret);
 </pre>
 	
-	<h2 id="start_adv" name="start_adv">Start and Stop Advertising</h2>
+	<h2 id="start_adv" name="start_adv">Starting and Stopping Advertising</h2>
+<p>To manage advertising:</p>
 <ol>
 <li>
 <p>To start advertising with the given advertiser and advertising parameters information, use the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_start_advertising_new()</span> function:</p>
@@ -2272,18 +2272,20 @@ ret = bt_adapter_le_start_advertising_new(advertiser, cb, NULL);
 if (ret &lt; BT_ERROR_NONE)
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;failed with [0x%04x]&quot;, ret);
 </pre>
+</li>
 <li>
 <p>To stop advertising with the given advertiser, use the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_stop_advertising()</span> function:</p>
 
 <pre class="prettyprint">
 if (advertiser != NULL)
 {
-ret = bt_adapter_le_stop_advertising(advertiser);
-if (ret &lt; BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;failed with [0x%04x]&quot;, ret);
+&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_stop_advertising(advertiser);
+&nbsp;&nbsp;&nbsp;if (ret &lt; BT_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;failed with [0x%04x]&quot;, ret);
 }
-</pre>
+</pre></li>
 </ol>
+	
 
  <h2 id="release" name="release">Releasing All Resources</h2>
 
@@ -2328,4 +2330,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.tutorials/html/native/network/connection_tutorial_n.htm b/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm
index 276a948..6e329c5 100644
--- a/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -335,7 +335,7 @@ if (error_code != CONNECTION_ERROR_NONE)
 
 <p>To initialize a socket for use:</p>
 <ol>
-<li>To use the functions and data types of the Socket API, include the following header files:
+<li>To use the functions and data types of the Socket API, include the following header files in your application:
 <pre class="prettyprint">
 #include &lt;sys/stat.h&gt;
 #include &lt;arpa/inet.h&gt;
diff --git a/org.tizen.tutorials/html/native/network/network_tutorials_n.htm b/org.tizen.tutorials/html/native/network/network_tutorials_n.htm
index f1dae2b..d546470 100644
--- a/org.tizen.tutorials/html/native/network/network_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/network/network_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
      
@@ -40,7 +40,7 @@
 		   <li><a href="connection_tutorial_n.htm">Connection: Managing Modem Data Connections</a> <p>Demonstrates how you can get network connection information, such as default gateway and proxy configuration, IPv4/IPv6 address, cellular connection state, and data transfer statistics.</p></li>
 		   <li><a href="bluetooth_tutorial_n.htm">Bluetooth: Managing Bluetooth Devices</a> <p>Demonstrates how you can enable Bluetooth, connect to other devices, and exchange data.</p></li>
 		   <li><a href="nfc_tutorial_n.htm">NFC: Managing Near Field Radio Communication</a> <p>Demonstrates how you can activate NFC and get cached NFC messages and send and receive NDEF messages using the NFC P2P mode.</p></li>
-		   <li><a href="smartcard_tutorial_n.htm">SmartCard: Accessing Secure Elements</a> <p>Demonstrates how you can access secure elements (SE) through smart card features.</p></li>
+		   <li><a href="smartcard_tutorial_n.htm">Smartcard: Accessing Secure Elements</a> <p>Demonstrates how you can access secure elements (SE) through smart card features.</p></li>
 		   <li><a href="wifi_tutorial_n.htm">Wi-Fi: Managing Wi-Fi and Monitoring Its State</a> <p>Demonstrates how you can manage Wi-Fi connections and monitor the Wi-Fi state.</p></li>
 		   
       </ul>
diff --git a/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm b/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm
index e9a939d..57f97c4 100644
--- a/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -29,8 +29,8 @@
 					<li><a href="#enable">Enabling and Disabling NFC</a></li>
 					<li><a href="#work">Working with NFC</a></li>
 					<li><a href="#get">Getting a Cached NFC Message</a></li>
-					<li><a href="#cardemulation">Using the Card_Emulation Feature</a></li>
-					<li><a href="#appcontrol">NFC Application Control</a></li>
+					<li><a href="#cardemulation">Using the Card Emulation Feature</a></li>
+					<li><a href="#appcontrol">Using the NFC Application Control</a></li>
 				</ul>
 			</li>
 			<li>NFC P2P bump
@@ -68,10 +68,11 @@
 				<p>Initialize NFC asynchronously, set the NFC tag filter, and register all necessary NFC callbacks.</p></li>
 				<li><a href="#get">Getting a Cached NFC Message</a>
 				<p>Initialize NFC synchronously and get a cached NFC message.</p></li>
-				<li><a href="#cardemulation">Using the Card_Emulation Feature</a>
-				<p>Create a Card Emulation application.</p></li>
-				<li><a href="#appcontrol">NFC Application Control</a>
-				<p>Using NFC Application Control.</p></li>
+				<li><a href="#cardemulation">Using the Card Emulation Feature</a>
+				<p>Create a card emulation application.</p></li>
+				<li><a href="#appcontrol">Using the NFC Application Control</a>
+				<p>Use the NFC application control to manage events.</p></li>
+
 			</ul>	
 		</li>
 		<li>NFC P2P bump
@@ -96,8 +97,8 @@
 <p>In the NFC tutorial, the NFC API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">wearable</a> applications) is used to write an application which initializes the NFC adapter and registers callbacks called in case of each connection scenario, so the user is able to work with NFC manually. By connecting your device to the other NFC point (tag, device, or sales terminal), you can invoke the specified callback registered earlier. The second scenario of this tutorial shows how to get the message cached by NFC.</p>
 
 <p>To initialize NFC:</p>
-<ol>
-<li><p>To use the functions and data types of the NFC API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;nfc.h&gt;</span> header file in your application:</p>
+<ol><li>
+<p>To use the functions and data types of the NFC API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;nfc.h&gt;</span> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;nfc.h&gt;
 </pre></li>
@@ -108,7 +109,7 @@
 &nbsp;&nbsp;&nbsp;gmainloop = g_main_loop_new(NULL, FALSE);
 &nbsp;&nbsp;&nbsp;bool is_nfc_supported = nfc_manager_is_supported();
 &nbsp;&nbsp;&nbsp;if (!is_nfc_supported)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "is_nfc_supported NOT SUPPORTED");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;is_nfc_supported NOT SUPPORTED&quot;);
 }</pre>
 
 <p>The <span style="font-family: Courier New,Courier,monospace;">gmainloop</span>, which is being created here, is used to wait for the results of calling asynchronous functions.</p></li>
@@ -196,9 +197,9 @@ g_main_loop_run(gmainloop);</pre>
 <pre class="prettyprint">static void on_nfc_activation_changed(bool activated, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (activated)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC activated");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC activated&quot;);
 &nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC deactivated");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC deactivated&quot;);
 }</pre>
 <p>So in our example, this callback only informs the user that the activation state has changed.</p></li>
 
@@ -259,7 +260,7 @@ if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
 <p>The <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_information_event()</span> callback in this tutorial is really simple. It just prints out the found keys and their values.</p>
 <pre class="prettyprint">on_nfc_tag_information_event(const char *key, const unsigned char *value, int value_size, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Title: %s, Value: %s", key, (char*)value);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Title: %s, Value: %s&quot;, key, (char*)value);
 
 &nbsp;&nbsp;&nbsp;return true;
 }</pre>
@@ -393,13 +394,13 @@ if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
 &nbsp;&nbsp;&nbsp;nfc_ndef_record_h record;
 
 &nbsp;&nbsp;&nbsp;nfc_ndef_message_get_record_count(message, &amp;count);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "on_nfc_ndef_discovered %d", count);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;on_nfc_ndef_discovered %d&quot;, count);
 
 &nbsp;&nbsp;&nbsp;for (i=0; i&lt;count; i++)
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_get_record(message, i, &amp;record);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_record_get_payload (record, &amp;payload, &amp;size);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Record Number : %d, Payload : %s", i, payload);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_record_get_payload(record, &amp;payload, &amp;size);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Record Number : %d, Payload : %s&quot;, i, payload);
 &nbsp;&nbsp;&nbsp;}
 }</pre>
 
@@ -429,7 +430,7 @@ if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
 <pre class="prettyprint">static void on_nfc_p2p_read_completed(nfc_p2p_target_h target, nfc_ndef_message_h message, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;int count;
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "on_nfc_p2p_read_completed");
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;on_nfc_p2p_read_completed&quot;);
 
 &nbsp;&nbsp;&nbsp;nfc_ndef_message_get_record_count(message, &amp;count);
 &nbsp;&nbsp;&nbsp;nfc_ndef_message_read_cb(clone_message(message));
@@ -448,19 +449,19 @@ if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This event notifies the terminal host that it shall launch
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// an application associated with an NFC application in a
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// UICC (Universal Integrated Circuit Card) host
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Start Transaction");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: Start Transaction&quot;);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_END_TRANSACTION:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This event notifies the terminal host that the current transaction
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// in process was ended
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: End Transaction");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: End Transaction&quot;);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_CONNECTIVITY:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// It is a ready signal to communicate UICC (Universal Integrated Circuit
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Card) with terminal host. \nUICC (Universal Integrated Circuit Card)
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// creates a pipe and opens the pipe channel.\nThen it sends the signal
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// to terminal host or host controller
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Connectivity");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: Connectivity&quot;);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_FIELD_ON:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// When the CLF (Contactless Front-end) detects 5ra RF field, the card
@@ -469,7 +470,7 @@ if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the CLF shall send the #NFC_SE_EVENT_FIELD_ON on all open pipes
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// to these gates. Next the CLF starts the initialization
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// and anti-collision process as defined in ISO/IEC 14443-3 [6]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Field ON");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: Field ON&quot;);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_FIELD_OFF:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// When the CLF (Contactless Front-end) detects that the RF field
@@ -477,15 +478,15 @@ if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the card application gate.\nWhen there are multiple open card RF
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// gates the CLF shall send the #NFC_SE_EVENT_FIELD_OFF to one gate
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// only
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Field OFF");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: Field OFF&quot;);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_TRANSACTION:
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This event notifies that an external reader is trying to access a secure
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// element
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Remote Start Transaction");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: Remote Start Transaction&quot;);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: DEFAULT:OTHER");
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: DEFAULT:OTHER&quot;);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
 &nbsp;&nbsp;&nbsp;}
 } </pre>
@@ -494,7 +495,7 @@ if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
 <p>The secure element transaction event gives you 4 information parameters and user data. You can get the application ID (specified in ISO/IEC 7816-4) from the first parameter, size of aid from the second parameter, the parameter list (specified in ISO/IEC 8825-1) from the third parameter, and the size of the parameter from the next function input parameter.</p>
 <pre class="prettyprint">static void on_nfc_se_transaction_event(nfc_se_type_e se_type, unsigned char *aid, int aid_size, unsigned char *param, int param_size, void *user_data)
 {
-&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, "Secure Element(SIM/UICC(Universal Integrated Circuit Card)) transaction event data");
+&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Secure Element(SIM/UICC(Universal Integrated Circuit Card)) transaction event data&quot;);
 }</pre>
 
  <h2 id="get" name="get">Getting a Cached NFC Message</h2>
@@ -523,12 +524,12 @@ if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
 }</pre></li>
 <li>Clean up at the application end.</li></ol>
 
- <h2 id="cardemulation" name="cardemulation">Using the Card Emulation Feature</h2>
-
-<p>To create a Card Emulation application:</p>
+  <h2 id="cardemulation" name="cardemulation">Using the Card Emulation Feature</h2>
 
-<ol><li>Initialize the Card Emulation application:
-<ol type="a">
+<p>To create a card emulation application:</p>
+<ol>
+<li>Initialize the card emulation application:
+ <ol type="a">
 <li>
 <p>To initialize NFC, use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_initialize()</span> function: </p>
 <pre class="prettyprint">int ret = NFC_ERROR_NONE;
@@ -566,55 +567,59 @@ else
 &nbsp;&nbsp;&nbsp;return false;
 }
 </pre></li>
-<li><p>Specify a &quot;AID&quot; value for the application. Next two step is required.</p>
-<br/>
-<p>1. To tell the platform which AIDs groups are requested by application, a metadata must be included in the manifest file.</p>
-<pre class="prettyprint">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
+<li><p>Specify an <span style="font-family: Courier New,Courier,monospace;">AID</span> value for the application:</p>
+<ol>
+<li>
+<p>To tell the platform which AID groups are requested by application, a metadata element must be included in the manifest file:</p>
+<pre class="prettyprint">
+&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
 &lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.3.1&quot; package=&quot;org.tizen.basicuiapplication&quot; version=&quot;1.0.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;profile name="wearable" /&gt;
-&nbsp;&nbsp;&nbsp;&lt;ui-application appid="org.tizen.basicuiapplication" exec="basicuiapplication" type="capp" multiple="false" taskmanage="true" nodisplay="false"&gt;
+&nbsp;&nbsp;&nbsp;&lt;profile name=&quot;wearable&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.basicuiapplication&quot; exec=&quot;basicuiapplication&quot; type=&quot;capp&quot; multiple=&quot;false&quot; taskmanage=&quot;true&quot; nodisplay=&quot;false&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;basicuiapplication.png&lt;/icon&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;basicuiapplication&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key="http://tizen.org/metadata/nfc_cardemulation" value="/shared/res/wallet.xml"/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/nfc_cardemulation&quot; value=&quot;/shared/res/wallet.xml&quot;/&gt;
 &nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;
 &lt;/manifest&gt;
 </pre>
-<ul><li>The &lt;metadata&gt; is required to contain a &lt;key&gt; and &lt;value&gt; attribute. </li>
-<li> &lt;key&gt; attribute must be "http://tizen.org/metadata/nfc_cardemulation".</li>
-<li> &lt;value&gt; attribute contain the AID xml file path.</li>
-<p>&lt;value&gt; attribute is a relative path starting from the app root path.</p>
+<ul><li>The <span style="font-family: Courier New,Courier,monospace;">metadata</span> element must contain the <span style="font-family: Courier New,Courier,monospace;">key</span> and <span style="font-family: Courier New,Courier,monospace;">value</span> attributes.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">key</span> attribute must be <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/metadata/nfc_cardemulation</span>.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">value</span> attribute must contain the AID XML file path.
+<p>The <span style="font-family: Courier New,Courier,monospace;">value</span> attribute is a relative path starting from the application root path.</p></li>
 </ul>
-<br/>
-<p>2. meta-data tag points to an AID xml file. An example of this file with AID declaration is shown below :</p>
-<pre class="prettyprint">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-   &lt;application name = &quot;org.tizen.basicuiapplication&quot;&gt;
-      &lt;wallet&gt;
-        &lt;aid-group category = &quot;payment&quot;&gt;
-                &lt;aid aid = &quot;325041592E5359532E4444463031&quot; se_type = &quot;hce&quot; unlock = &quot;false&quot; power = &quot;sleep&quot;/&gt;
-        &lt;/aid-group&gt;
-      &lt;/wallet&gt;
-   &lt;/application&gt;
+</li>
+<li><p>The metadata element points to an AID XML file. The following is an example of this file with AID declaration.</p>
+<pre class="prettyprint">
+&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
+&lt;application name=&quot;org.tizen.basicuiapplication&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;wallet&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;aid-group category=&quot;payment&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;aid aid=&quot;325041592E5359532E4444463031&quot; se_type=&quot;hce&quot; unlock=&quot;false&quot; power=&quot;sleep&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/aid-group&gt;
+&nbsp;&nbsp;&nbsp;&lt;/wallet&gt;
+&lt;/application&gt;
 </pre>
-<ul><li>The &lt;application&gt; is required to contain a &lt;name&gt; attribute that contains a application name.</li>
-<li>The &lt;application&gt; must contain one or more &lt;wallet&gt; tags.</li>
-<li>Each &lt;wallet&gt; must contain one or more &lt;aid-group&gt; tags. </li>
-<li>The &lt;aid-group&gt; is required to contain a &lt;category&gt; attribute that contains &lt;payment&gt; or &lt;other&gt;.</li>
-<li>Each &lt;aid-group&gt; must contain one or more &lt;aid&gt; tags, each of which contains a single AID.</li>
-<li>The&lt;aid-group&gt; can have as much as you want aid</li>
-<li>The &lt;aid&gt; is required to contain a &lt;aid&gt;, &lt;se_type&gt;, &lt;unlock&gt;, &lt;power&gt; attribute.</li>
-<li>The &lt;se_type&gt; must contains &quot;hce&quot; or &quot;ese&quot; or &quot;uicc&quot;. se_type value can be added later.</li>
-<li>The &lt;unlock&gt; must contains &quot;true&quot; or &quot;false&quot;.</li>
-<ul><li>&quot;true&quot; mean &quot;Card can't work, when device is locked.&quot;</li>
-<li>&quot;false&quot; mean &quot;Card can work, when device is locked.&quot;</li></ul>
-<li>The &lt;power&gt; must contains &quot;on&quot; or &quot;off&quot; or &quot;sleep&quot;.</li>
-<ul><li>&quot;on&quot; mean &quot;Card can work, when device is on.&quot;</li>
-<li>&quot;off&quot; mean &quot;Card can work, when device is off.&quot;</li>
-<li>&quot;sleep&quot; mean &quot;Card can work, when device is sleep.&quot;</li></ul>
+<ul><li>The <span style="font-family: Courier New,Courier,monospace;">application</span> element must contain a <span style="font-family: Courier New,Courier,monospace;">name</span> attribute with an application name.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">application</span> element must contain one or more <span style="font-family: Courier New,Courier,monospace;">wallet</span> element, each of which must contain one or more <span style="font-family: Courier New,Courier,monospace;">aid-group</span> element. </li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">aid-group</span> element is required to contain a <span style="font-family: Courier New,Courier,monospace;">category</span> attribute with the <span style="font-family: Courier New,Courier,monospace;">payment</span> or <span style="font-family: Courier New,Courier,monospace;">other</span> value.</li>
+<li>Each <span style="font-family: Courier New,Courier,monospace;">aid-group</span> element must contain one or more <span style="font-family: Courier New,Courier,monospace;">aid</span> element, each of which contains a single AID. The <span style="font-family: Courier New,Courier,monospace;">aid-group</span> can have as much as many <span style="font-family: Courier New,Courier,monospace;">aid</span> elements as you want.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">aid</span> element must contain the <span style="font-family: Courier New,Courier,monospace;">aid</span>, <span style="font-family: Courier New,Courier,monospace;">se_type</span>, <span style="font-family: Courier New,Courier,monospace;">unlock</span>, and <span style="font-family: Courier New,Courier,monospace;">power</span> attributes.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">se_type</span> attribute must contain <span style="font-family: Courier New,Courier,monospace;">hce</span>, <span style="font-family: Courier New,Courier,monospace;">ese</span>, or <span style="font-family: Courier New,Courier,monospace;">uicc</span>. The <span style="font-family: Courier New,Courier,monospace;">se_type</span> value can be added later.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">unlock</span> attribute must contain one of the following:
+<ul><li><span style="font-family: Courier New,Courier,monospace;">true</span>: The card cannot work when the device is locked.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">false</span>: The card can work when the device is locked.</li></ul></li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">power</span> must contain one of the following:
+<ul><li><span style="font-family: Courier New,Courier,monospace;">on</span>: The card can work when the device is on.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">off</span>: The card can work when the device is off.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">sleep</span>: The card can work when the device is in the sleep mode.</li></ul></li>
+</ul>
 </li>
-<li>The <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.cardemulation</span> privilege is required for the HCE API. Add the privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file.</li></ol></li>
 
-<li>To create a Host based Card Emulation (HCE) application :
+<li>The <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.cardemulation</span> privilege is required for the HCE API. Add the privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file.</li></ol></li></ol></li>
+
+<li>To create a host-based card emulation (HCE) application:
 <ol type="a">
+
 <li>Define HCE event handling.
 <p>The application must be able to handle an HCE event from the NFC reader. Define and register a callback that is triggered when data arrives from the NFC reader.</p>
 <p>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_hce_send_apdu_response()</span> function to send a response to the NFC reader. The actual data moving between the NFC reader and the application can be anything. The APDU protocol only defines as a promise between the application producer and NFC reader.</p>
@@ -747,7 +752,8 @@ if (ret != NFC_ERROR_NONE)
   
 &nbsp;&nbsp;&nbsp;return false;
 }
-<p>When an application receives an app-control event, application can receive the aid value using the &quot;data&quot; appcontrol extra key.</p></li>
+</pre>
+<p>When an application receives an app control event, the application can receive the AID value using the <span style="font-family: Courier New,Courier,monospace;">data</span> app control extra key.</p></li>
 </ul></li>
 <li>When HCE operations are no longer needed, deinitialize the resources:
 <pre class="prettyprint">int ret = NFC_ERROR_NONE;
@@ -759,7 +765,12 @@ if (ret != NFC_ERROR_NONE)
 {
 &nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;nfc_manager_deinitialize failed : %d&quot;, ret);
 }
-</pre></li></ol>
+</pre>
+</li>
+</ol>
+</li>
+</ol>
+
 
 <p>The following example shows the entire HCE application sample code:</p>
 
@@ -899,75 +910,41 @@ int main(int argc, char* argv[])
 
 &nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, ad);
 }
-</pre></ol>
-
-<h2 id="appcontrol" name="appcontrol">NFC Application Control</h2>
-  <p>NFC application controls are kinds of event sent by the system to applications when NFC-based payment transaction occurs.</p>
-  <p>To receive these events, you are required to define the application control information in the <strong>Application Control</strong> tab of the manifest editor.</p>
-
-  <p> The platform supports the following application controls for NFC applications: </p>
-  <p> <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span> operations.</p>
-
-<h3>default_changed operation</h3>
-  <p>The application control with <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</span> is sent by the system when the default wallet is changed.</p><p>For example, in <strong>Setting &gt; NFC &gt; Set Default Wallet App</strong>, if the default wallet is changed, an application control with this operation will be sent to the selected application (wallet).</p>
-
-  <p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
-  <br/>
-
-<h3>host_apdu_service operation</h3>
-  <p>The application control with <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span> operation is sent by the system when HCE event occurs.</p> <p>For example, when a mobile device receives Host based apdu (HCE) event from POS terminal, an application control with this operation will be sent to NFC applications. </p>
-<p>You can get the target AID information using app_control_get_extra_data() with "data" key. </p>
-
-  <p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
-
-  <p>The following table shows the information comes packaged when the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span> operation is launching.</p>
-  <table border="1">
-   <caption>
-     Table: host_apdu_service extra key
-   </caption>
-
-    <tbody>
-    <tr>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Extra key</th>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">data</span></td>
-     <td>Target AID key</td>
-    </tr>
-   </tbody>
-  </table>
-<br/>
-<h3>off_host_apdu_service operation</h3>
-  <p>The application control with <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span> operation is sent by the system when SE transaction occurs.</p><p>For example, when a mobile device receives Off-Host apdu event from POS terminal, an application control with this operation will be sent to NFC applications.</p>
-<p>You can get the target AID information using app_control_get_extra_data() with "data" key.</p>
-
-  <p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
-
-  <p>The following table shows the information comes packaged when the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span> operation is launching.</p>
-  <table border="1">
-   <caption>
-     Table: off_host_apdu_service extra key
-   </caption>
-
-    <tbody>
-    <tr>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Extra key</th>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">data</span></td>
-     <td>Target AID key</td>
-    </tr>
-   </tbody>
-  </table>
- <br/>
-<h3>Application control example</h3>
-<p>To tell the platform which application is register the opeartion, a operation must be included in the manifest file.</p>
-<pre class="prettyprint">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
+</pre>
+
+
+<h2 id="appcontrol" name="appcontrol">Using the NFC Application Control</h2>
+
+<p>NFC application controls are events sent by the system to applications when NFC-based payment transactions occur.</p>
+<p>To receive these events, you must define the application control information in the <strong>Application Control</strong> tab of the manifest editor.</p>
+
+<p>The platform supports the following application controls for NFC applications: </p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default_changed</span> operation
+
+<p>The system sends the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</span> application control when the default wallet is changed. For example, in <strong>Setting &gt; NFC &gt; Set Default Wallet App</strong>, if the default wallet is changed, an application control with this operation is sent to the selected application (wallet).</p>
+
+<p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">host_apdu_service</span> operation
+<p>The system sends the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span> application control when HCE event occurs. For example, when a mobile device receives a host-based APDU (HCE) event from a POS terminal, an application control with this operation is sent to NFC applications. </p>
+<p>You can get the target AID information using the <span style="font-family: Courier New,Courier,monospace">app_control_get_extra_data()</span> function with the <span style="font-family: Courier New,Courier,monospace">data</span> key. The target AID key comes packaged when the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span> operation is launching.</p>
+<p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">off_host_apdu_service</span> operation
+
+<p>The system sends the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span> application control when SE transaction occurs. For example, when a mobile device receives an off-host APDU event from a POS terminal, an application control with this operation is sent to NFC applications.</p>
+<p>You can get the target AID information using the <span style="font-family: Courier New,Courier,monospace">app_control_get_extra_data()</span> function with the <span style="font-family: Courier New,Courier,monospace">data</span> key. The target AID key comes packaged when the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span> operation is launching.</p>
+<p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
+
+</li>
+</ul>
+<p>The following example shows the use of the application control. To tell the platform which application is registered for the operation:</p>
+<pre class="prettyprint">
+&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
 &lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.3.1&quot; package=&quot;org.tizen.basicuiapplication&quot; version=&quot;1.0.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;profile name="wearable" /&gt;
-&nbsp;&nbsp;&nbsp;&lt;ui-application appid="org.tizen.basicuiapplication" exec="basicuiapplication" type="capp" multiple="false" taskmanage="true" nodisplay="false"&gt;
+&nbsp;&nbsp;&nbsp;&lt;profile name=&quot;wearable&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.basicuiapplication&quot; exec=&quot;basicuiapplication&quot; type=&quot;capp&quot; multiple=&quot;false&quot; taskmanage=&quot;true&quot; nodisplay=&quot;false&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;basicuiapplication.png&lt;/icon&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;basicuiapplication&lt;/label&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;app-control&gt;
@@ -978,29 +955,30 @@ int main(int argc, char* argv[])
 &nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;
 &lt;/manifest&gt;
 </pre>
-<p>The code of the NFC application control is presented below: </p>
+<p>The following example shows the NFC application control code:</p>
 <pre class="prettyprint">
-...
-bool service_app_control(app_control_h service, void *data)
+bool 
+service_app_control(app_control_h service, void *data)
 {
 &nbsp;&nbsp;&nbsp;struct _appdata *ad = user_data;
 &nbsp;&nbsp;&nbsp;char *operation, *aid;
 &nbsp;&nbsp;&nbsp;int ret = 0;
 
 &nbsp;&nbsp;&nbsp;app_control_get_operation(service, &amp;operation);
-&nbsp;&nbsp;&nbsp;if ((strncmp(operation, NFC_APPCONTROL_STRING, strlen(NFC_APPCONTROL_STRING)) == 0)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, "HCETESTAPP", "nfc appcontrol operation : [%s]", operation);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(service, "data", &amp;aid);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, "HCETESTAPP", "nfc appcontrol uri : [%s]", aid);
+&nbsp;&nbsp;&nbsp;if ((strncmp(operation, NFC_APPCONTROL_STRING, strlen(NFC_APPCONTROL_STRING)) == 0)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;HCETESTAPP&quot;, &quot;nfc appcontrol operation : [%s]&quot;, operation);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(service, &quot;data&quot;, &amp;aid);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;HCETESTAPP&quot;, &quot;nfc appcontrol uri : [%s]&quot;, aid);
 &nbsp;&nbsp;&nbsp;}
 }
-...
 
-int main(int argc, char* argv[])
+int 
+main(int argc, char* argv[])
 {
 &nbsp;&nbsp;&nbsp;char ad[50] = {0,};
 &nbsp;&nbsp;&nbsp;service_app_event_callback_s event_callback;
-
+ 
 &nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
 &nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
 &nbsp;&nbsp;&nbsp;event_callback.app_control = service_app_control;
diff --git a/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm b/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm
index 1855c3d..d046508 100644
--- a/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm
@@ -11,14 +11,14 @@
     <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-    <title>SmartCard: Accessing Secure Elements</title>
+    <title>Smartcard: Accessing Secure Elements</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -31,21 +31,21 @@
 		</ul>        
         <p class="toc-title">Related Info</p>
         <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/network/smartcard_n.htm">SmartCard Guide</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Wearable Native</a></li>
+            <li><a href="../../../../org.tizen.guides/html/native/network/smartcard_n.htm">Smartcard Guide</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard API for Wearable Native</a></li>
         </ul>
     </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>SmartCard: Accessing Secure Elements</h1>
+<h1>Smartcard: Accessing Secure Elements</h1>
 
   
 <p>This tutorial demonstrates how you can manage smart card features and access secure elements (SE).</p>
 
 <h2>Warm-up</h2>
-<p>Become familiar with the SmartCard API basics by learning about:</p>
+<p>Become familiar with the Smartcard API basics by learning about:</p>
 	<ul>
 		<li><a href="#service">Using the SE Service</a>
 		<p>Initialize the SE service and retrieve available readers.</p></li>
diff --git a/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm b/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
index 452d532..6cc6c2b 100644
--- a/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -47,16 +47,7 @@
   
 <p>This tutorial demonstrates how you can manage Wi-Fi Direct&trade; connections.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
 <h2>Warm-up</h2>
 <p>Become familiar with the Wi-Fi Direct API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm b/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
index 59d3fec..3974da9 100644
--- a/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</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 99ad33b..722a897 100644
--- a/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -193,17 +193,7 @@ if (CKMC_ERROR_NONE != ret)
 &nbsp;&nbsp;&nbsp;// Error handling
 }
 </pre>
-<table class="note">
- <tbody>
-  <tr>
-  <th class="note">Note</th>
-  </tr>
-  <tr>
-   <td class="note">Note that a few Key manager APIs have been <strong>deprecated since Tizen 2.4</strong>. 
- For example, several ckmc_remove_* () have been replaced by ckmc_remove_alias(). Although the deprecated APIs continue to be available, it is strongly recommended to use new APIs. For more information on the deprecated information, please refer to the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key-manager API References</a>.</td>
-  </tr>
- </tbody>
-</table>
+
 </li></ol>
 
 
diff --git a/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm b/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
index 13ee06d..87be121 100644
--- a/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/security/security_tutorials_n.htm b/org.tizen.tutorials/html/native/security/security_tutorials_n.htm
index ee8f1ea..f043761 100644
--- a/org.tizen.tutorials/html/native/security/security_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/security/security_tutorials_n.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		
diff --git a/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm
index 707fdf4..8a7f109 100644
--- a/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -66,16 +66,7 @@
    
 <p>This tutorial demonstrates how you can manage events and todo tasks, and convert calendar details to and from the vCalendar format.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
     <h2 id="warmup" name="warmup">Warm-up</h2>
     <p>Become familiar with the Calendar API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm b/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm
index 4e30fdd..5bfa67b 100644
--- a/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -92,6 +92,7 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/social/contact_n.htm">Contacts Guide</a></li>
 			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Wearable Native</a></li>
         </ul>
     </div></div>
 </div>
@@ -103,16 +104,6 @@
    
 <p>This tutorial demonstrates how you can manage contacts and groups, and import them to or export them from the vCard format.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
 
   <h2>Warm-up</h2>
       <p>Become familiar with the Contacts API basics by learning about:</p>
@@ -230,7 +221,7 @@
 
 <p>To start with the Contact Service:</p>
 <ol><li>			
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;contacts.h&gt;</span> header file in your application:</p>
+<p>To use the functions and data types of the Contacts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;contacts.h&gt;</span> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;contacts.h&gt;
 </pre></li>	
@@ -274,7 +265,7 @@ error_code = contacts_record_create(_contacts_name._uri, &amp;name);
 <li>Associate the <span style="font-family: Courier New,Courier,monospace">name</span> record with the <span style="font-family: Courier New,Courier,monospace">contact</span> record, by setting the name as the contact&#39;s child record. In this example, it is achieved using <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span>.
 <pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.name, name);
 </pre>
-<p>The second argument (<span style="font-family: Courier New,Courier,monospace">_contacts_contact.name</span>) is the parent property to which the child record is assigned. See <span style="font-family: Courier New,Courier,monospace">_contacts_contact</span> view description in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">Contacts</a> API. In the API, the <span style="font-family: Courier New,Courier,monospace">name</span> property is listed as one of the <span style="font-family: Courier New,Courier,monospace">record</span> type properties, which means that other records can be assigned to this property as child records (&quot;single&quot; means that only 1 <span style="font-family: Courier New,Courier,monospace">_contacts_name</span> type child record is allowed). The required type of the child record is specified in the API. </p></li></ol></li>
+<p>The second argument (<span style="font-family: Courier New,Courier,monospace">_contacts_contact.name</span>) is the parent property to which the child record is assigned. See <span style="font-family: Courier New,Courier,monospace">_contacts_contact</span> view description in the Contacts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">wearable</a> applications). In the API, the <span style="font-family: Courier New,Courier,monospace">name</span> property is listed as one of the <span style="font-family: Courier New,Courier,monospace">record</span> type properties, which means that other records can be assigned to this property as child records (&quot;single&quot; means that only 1 <span style="font-family: Courier New,Courier,monospace">_contacts_name</span> type child record is allowed). The required type of the child record is specified in the API. </p></li></ol></li>
 <li>Add an image.
 <ol type="a"><li>Create an image record:
 <pre class="prettyprint">contacts_record_h image;
@@ -307,10 +298,10 @@ int int_date = year * 10000 + month * 100 + day;
 
 error_code = contacts_record_set_int(event, _contacts_event.date, int_date);
 </pre></li>
-<li>Set the event type to birthday. For available types, see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">contacts_event_type_e</a> enumeration.
+<li>Set the event type to birthday. For the available types, see the <span style="font-family: Courier New,Courier,monospace">contacts_event_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">wearable</a> applications).
 <pre class="prettyprint">error_code = contacts_record_set_int(event, _contacts_event.type, CONTACTS_EVENT_TYPE_BIRTH);
 </pre></li>
-<li>If the type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_EVENT_TYPE_CUSTOM</span>, you can set a custom label (see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_VIEW_MODULE_contacts_event">_contacts_event view</a>).
+<li>If the type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_EVENT_TYPE_CUSTOM</span>, you can set a custom label (see the <span style="font-family: Courier New,Courier,monospace">_contacts_event</span> view, in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_VIEW_MODULE_contacts_event">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_VIEW_MODULE_contacts_event">wearable</a> applications).
 <pre class="prettyprint">error_code = contacts_record_set_int(event, _contacts_event.type, CONTACTS_EVENT_TYPE_CUSTOM);
 
 error_code = contacts_record_set_str(event, _contacts_event.label, &quot;Event description&quot;);
@@ -1389,17 +1380,6 @@ error_code = contacts_record_set_int(speeddial, _contacts_speeddial. number_id,
 </pre>
 </li>
 </ol>
-
-    <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">This tutorial does not describe how to insert a number. For more information, see the <a href="contact_tutorial_n.htm">Contact Tutorial</a>.</td>
-    </tr>
-   </tbody>
-  </table>
   
  <h2 id="sd_insert" name="sd_insert">Inserting a Speed Dial to the Database</h2>
 
@@ -2358,7 +2338,7 @@ static contact_gl_data_t *_create_gl_data(contacts_record_h r_contact)
 </li>
 
 <li>Retrieve record data into the structure.
-<p>Contacts are organized in a parent-child structure. To access specified data from a record, get the child responsible for the requested type using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function (for the property lists, see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a>). Do not pass any data returned by a function with the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix to the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
+<p>Contacts are organized in a parent-child structure. To access specified data from a record, get the child responsible for the requested type using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function. For the property lists, see View/Property (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">wearable</a> applications). Do not pass any data returned by a function with the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix to the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
 
 <ul><li><p>To get the name details, get the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact.name</span> (representing the child) from the <span style="font-family: Courier New,Courier,monospace;">r_contact</span> parent. Both structures have the <span style="font-family: Courier New,Courier,monospace;">contacts_record_h</span> type. After obtaining a child record, get the desired data from it using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_str()</span> function.</p>
 
@@ -2387,7 +2367,7 @@ static bool _get_contact_id(contacts_record_h r_contact, int *id)
 }
 </pre></li>
 
-<li><p>To get a contact number, check whether it exists using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_bool()</span> function. If it exists, use the various <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">Query</a>  and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">Filter</a> functions from the Contacts API to make a query to get a list. At the end, free any data returned by a function not containing the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix.</p>
+<li><p>To get a contact number, check whether it exists using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_bool()</span> function. If it exists, use the various Query (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">wearable</a> applications) and Filter (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">wearable</a> applications) functions from the Contacts API to make a query to get a list. At the end, free any data returned by a function not containing the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix.</p>
 <ul><li>Get a list of all numbers and filter the list to get the default:
 <pre class="prettyprint">
 static bool _get_contact_number(contacts_record_h r_contact, char **number)
@@ -2547,7 +2527,7 @@ contacts_filter_h filter = NULL;
 contacts_filter_create (_contacts_name._uri, &amp;filter);
 </pre>
 
-<p>The first parameter defines in which view to place the filter. To filter by the first and last name, use the <span style="font-family: Courier New,Courier,monospace;">_contacts_name</span> filter. The first parameter of the <span style="font-family: Courier New,Courier,monospace;">contacts_query_create()</span> function must be the same parameter as in the filter to be appended. For more information on views, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a> tables.</p></li>
+<p>The first parameter defines in which view to place the filter. To filter by the first and last name, use the <span style="font-family: Courier New,Courier,monospace;">_contacts_name</span> filter. The first parameter of the <span style="font-family: Courier New,Courier,monospace;">contacts_query_create()</span> function must be the same parameter as in the filter to be appended. For more information on views, see the View/Property tables (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">wearable</a> applications).</p></li>
 
 <li><p>Add a condition, such as the following where only contacts beginning with &quot;Za&quot; are shown:</p>
 
@@ -2774,7 +2754,7 @@ contacts_person_link_person(first_person_id, second_person_id);
 </li>
 
 <li>Set the default properties.
-<p>Set the default values from one of the linked contacts with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_set_default_property()</span> function. The first parameter determines the detail to be set using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">contacts_person_property_e</a> enum.</p>
+<p>Set the default values from one of the linked contacts with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_set_default_property()</span> function. The first parameter determines the detail to be set using the <span style="font-family: Courier New,Courier,monospace;">contacts_person_property_e</span> enum (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">wearable</a> applications).</p>
 
 <p>To set a default number from one of the persons, you have to know its ID. Get the detail ID using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function, because you need to get the value from the <span style="font-family: Courier New,Courier,monospace;">_contact_number</span> view.</p>
 
diff --git a/org.tizen.tutorials/html/native/social/service_adaptor_tutorial_n.htm b/org.tizen.tutorials/html/native/social/service_adaptor_tutorial_n.htm
index e629653..2282d69 100644
--- a/org.tizen.tutorials/html/native/social/service_adaptor_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/social/service_adaptor_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -33,7 +33,6 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/social/service_adaptor_n.htm">Service Adaptor Guide</a></li>
             <li><a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor API for Mobile Native</a></li>
-            <li><a href="../../../../org.tizen.native.wearable.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor API for Wearable Native</a></li>
         </ul>				
     </div></div>
 </div>
@@ -41,6 +40,9 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Service Adaptor: Working with Plugins</h1>
  <p>This tutorial demonstrates how you can use adaptors to work with plugins.</p>
+ 
+<p>This feature is supported in mobile applications only.</p>
+
     <h2>Warm-up</h2>
         <p>Become familiar with the Service Adaptor API basics:</p>
         <ul>
diff --git a/org.tizen.tutorials/html/native/social/social_tutorials_n.htm b/org.tizen.tutorials/html/native/social/social_tutorials_n.htm
index 90f94ee..f5a4a48 100644
--- a/org.tizen.tutorials/html/native/social/social_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/social/social_tutorials_n.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
@@ -31,19 +31,19 @@
 <div id="container"><div id="contents"><div class="content">
 
  <h1>Social: Managing Personal Data</h1>
-
- <p>The social tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
-   <ul>
-	<li><a href="service_adaptor_tutorial_n.htm">Service Adaptor: Working with Plugins</a> 
-	<p>Demonstrates how you can manage adaptors between the Service Adaptor Client and related plugins.</p></li>		
-  </ul>
  
- <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>  
-  <ul>
-   <li><a href="account_tutorial_n.htm">Account Manager: Managing Account Information on the Device</a> <p>Demonstrates how you can connect to and disconnect from the Account Service, create, delete, and update accounts in the account database, and manage account information.</p></li>
-   <li><a href="calendar_tutorial_n.htm">Calendar: Managing Calendar Events and Accessing the Calendar Database</a> <p> Demonstrates how you can manage calendars, events, and tasks.</p> </li>
-   <li><a href="contact_tutorial_n.htm">Contacts: Managing Contacts and Groups, and Accessing the Contact Database</a> <p>Demonstrates how you can manage contact information, contact groups, vCards, and phone logs.</p></li>
+ <p>The social tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
+   <ul>	
+		<li><a href="contact_tutorial_n.htm">Contacts: Managing Contacts and Groups, and Accessing the Contact Database</a> <p>Demonstrates how you can manage contact information, contact groups, vCards, and phone logs.</p></li>
   </ul>
+  
+   <p>The following tutorials apply in <strong>mobile applications only</strong>:</p> 
+   
+   <ul>
+		<li><a href="calendar_tutorial_n.htm">Calendar: Managing Calendar Events and Accessing the Calendar Database</a> <p> Demonstrates how you can manage calendars, events, and tasks.</p> </li>
+		<li><a href="service_adaptor_tutorial_n.htm">Service Adaptor: Working with Plugins</a> 
+	<p>Demonstrates how you can manage adaptors between the Service Adaptor Client and related plugins.</p></li>
+   </ul>
 
 <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.tutorials/html/native/system/device_tutorial_n.htm b/org.tizen.tutorials/html/native/system/device_tutorial_n.htm
index 109484f..7114ee3 100644
--- a/org.tizen.tutorials/html/native/system/device_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/device_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm b/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm
index 493f4d8..d2c1346 100644
--- a/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm b/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm
index 0155264..01b3b49 100644
--- a/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm b/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm
index dab5682..9bcb7ac 100644
--- a/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm b/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm
index fd9facc..000baa6 100644
--- a/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm b/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm
index 4a5ad3b..04d51c4 100644
--- a/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm b/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm
index 0c3aabb..ff001fa 100644
--- a/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm b/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm
index 467415c..cc693ec 100644
--- a/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/system/system_tutorials_n.htm b/org.tizen.tutorials/html/native/system/system_tutorials_n.htm
index 7147058..4ba7927 100644
--- a/org.tizen.tutorials/html/native/system/system_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/system/system_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		
diff --git a/org.tizen.tutorials/html/native/system/t-trace_tutorial_n.htm b/org.tizen.tutorials/html/native/system/t-trace_tutorial_n.htm
index e2dd716..6abb0ea 100644
--- a/org.tizen.tutorials/html/native/system/t-trace_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/system/t-trace_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -57,7 +57,7 @@
 
 <p>To initialize tracing:</p>
 <ol>
-<li>To use the functions and data types of the T-trace API, include the <span style="font-family: Courier New,Courier,monospace">&lt;trace.h&gt;</span> header file in your application:
+<li>To use the functions and data types of the T-trace API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;trace.h&gt;</span> header file in your application:
 <pre class="prettyprint">
 #include &lt;trace.h&gt;
 </pre>
diff --git a/org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm b/org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm
index 3581422..7005b6d 100644
--- a/org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm
@@ -18,7 +18,7 @@
 	
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
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 2891677..3f7fdec 100644
--- a/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -535,4 +535,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.tutorials/html/native/telephony/telephony_tutorials_n.htm b/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm
index d7f3c5c..4cf4c08 100644
--- a/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/native/tutorials_n.htm b/org.tizen.tutorials/html/native/tutorials_n.htm
index 16a18a1..f4d06b3 100644
--- a/org.tizen.tutorials/html/native/tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
 	</div>
 		<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
@@ -39,7 +39,7 @@
 
 <ul>
 	<li><a href="account/account_tutorials_n.htm">Account</a>
-	<p>Demonstrates how you can manage account information, such as receive sync operation notifications, and obtain an access token by using the oauth2 authorization.</p></li>	
+	<p>Demonstrates how you can manage account information, such as receive sync operation notifications, and obtain an access token by using the OAuth 2.0 authorization.</p></li>	
 	<li><a href="app_framework/app_framework_tutorials_n.htm">Application Framework: Controlling Your Application</a>
 	<p>Demonstrates how you can configure application properties and manage application data.</p></li>
 	<li><a href="base/base_tutorials_n.htm">Base: Using Fundamental Libraries</a>
diff --git a/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm
index 264f3c7..25c1a6a 100644
--- a/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
   <div id="profile">
-    <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+    <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
   </div>
   <div id="toc_border"><div id="toc">
     <p class="toc-title">Content</p>
@@ -61,7 +61,7 @@
       <h2 id="init" name="init">Initializing the EOM</h2>
 <p>To initialize EOM:</p>
 <ol>
-<li>To use the functions and data types of the External Output Manager API, include the <span style="font-family: Courier New,Courier,monospace">&lt;eom.h&gt;</span> header file in your application:
+<li>To use the functions and data types of the External Output Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__EOM__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;eom.h&gt;</span> header file in your application:
 <pre class="prettyprint">#include &lt;eom.h&gt;</pre>
 </li>
 <li>Initialize the application with the <span style="font-family: Courier New,Courier,monospace">eom_init()</span> function.</li>
diff --git a/org.tizen.tutorials/html/native/ui/minicontrol_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/minicontrol_tutorial_n.htm
new file mode 100644
index 0000000..54537d6
--- /dev/null
+++ b/org.tizen.tutorials/html/native/ui/minicontrol_tutorial_n.htm
@@ -0,0 +1,145 @@
+<!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>Minicontrol: Creating a Minicontrol</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#create">Creating a Minicontrol on the Quick Panel</a></li>
+			<li><a href="#hide">Hiding the Quick Panel</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.guides/html/native/ui/minicontrol_n.htm">Minicontrol Guide</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Minicontrol: Creating a Minicontrol</h1>
+
+  
+<p>This tutorial demonstrates how you can create minicontrols on the quick panel or the lock screen, and hide a minicontrol viewer.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Minicontrol API basics by learning about:</p>
+	<ul>
+		<li><a href="#create">Creating a Minicontrol on the Quick Panel</a>
+		<p>Create a minicontrol on the quick panel.</p></li>
+	</ul>
+	<ul>
+		<li><a href="#hide">Hiding the Quick Panel</a>
+		<p>Send a request for hiding the quick panel.</p></li>
+	</ul>
+
+<h2 id="create" name="create">Creating a Minicontrol on the Quick Panel</h2>
+
+<p>To create a minicontrol of your application:</p>
+
+<ol>
+<li><p>To use the functions and data types of the Minicontrol API (in <a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__LIBRARY.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__MINICONTROL__LIBRARY.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;minicontrol_provider.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;minicontrol_provider.h&gt;
+</pre>
+</li>
+<li><p>To create a minicontrol, use the <span style="font-family: Courier New,Courier,monospace">minicontrol_create_window()</span> function:</p>
+
+<pre class="prettyprint">
+Evas_Object *win;
+
+win = minicontrol_create_window(&quot;mini-sample&quot;, MINICONTROL_TARGET_VIEWER_QUICK_PANEL, NULL);
+evas_object_resize(win, 480, 140);
+evas_object_show(win);
+</pre>
+
+<p>To create a minicontrol on the quick panel, the <span style="font-family: Courier New,Courier,monospace">target_viewer</span> parameter must be set to <span style="font-family: Courier New,Courier,monospace">MINICONTROL_TARGET_VIEWER_QUICK_PANEL</span>.</p></li>
+
+<li>Add a text label on the minicontrol using the <span style="font-family: Courier New,Courier,monospace">elm_label_add()</span> function:
+
+<pre class="prettyprint">
+label = elm_label_add(win);
+elm_object_text_set(label, &quot;mini-sample&quot;);
+evas_object_resize(label, 480, 140);
+evas_object_show(label);
+</pre></li>
+</ol>
+
+<h2 id="hide" name="hide">Hiding the Quick Panel</h2>
+<p>To hide the quick panel:</p>
+<ol>
+<li>
+<p>Add a button on the minicontrol:</p>
+
+<pre class="prettyprint">
+button = elm_button_add(win);
+elm_object_text_set(button, &quot;Click to hide.&quot;);
+evas_object_move(button, 0, 50);
+evas_object_resize(button, 200, 50);
+evas_object_show(button);
+</pre></li>
+<li>
+<p>Add an event handler callback function:</p>
+
+<pre class="prettyprint">
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked_cb, win);
+</pre></li>
+<li>
+<p>Define the callback function for hiding the quick panel:</p>
+
+<pre class="prettyprint">
+static void 
+_button_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = data;
+&nbsp;&nbsp;&nbsp;minicontrol_send_event(win, MINICONTROL_PROVIDER_EVENT_REQUEST_HIDE, NULL);
+}
+</pre></li>
+</ol>
+
+<p class="figure">Figure: Minicontrol button for hiding the quick panel</p> 
+<p align="center"><img alt="Minicontrol button for hiding the quick panel" src="../../images/minicontrol.png" /></p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm
index e427f65..4e789f5 100644
--- a/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm
@@ -18,7 +18,7 @@
 	
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 	
@@ -35,10 +35,11 @@
 <h1>UI Framework: Creating the Application UI</h1>
 	<p>The UI framework tutorials demonstrate how to create a visual outlook for your application to ensure the best possible user experience:</p> 
   <ul> 
-	<li><a href="eom_tutorial_n.htm">External Output Manager: Using External Output Devices</a> <p>Demonstrates how you can use external output devices.</p></li>         
+	<li><a href="eom_tutorial_n.htm">External Output Manager: Using External Output Devices</a> <p>Demonstrates how you can use external output devices.</p></li>       
+    <li><a href="minicontrol_tutorial_n.htm">Minicontrol: Creating a Minicontrol</a> <p>Demonstrates how you can create minicontrols on the quick panel or the lock screen, and hide a minicontrol viewer.</p></li>  	
   </ul>
 
-<p>For more information about implementing the UI for your application using the EFL features, see <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a>.</p>
+<p>For more information about implementing the UI for your application using the EFL features, see <a href="../../../../org.tizen.ui.practices/html/native/efl/guides_efl_n.htm">EFL</a>.</p>
   
 <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.tutorials/html/native/uix/ime_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/ime_tutorial_n.htm
index 482ce28..4ec2452 100644
--- a/org.tizen.tutorials/html/native/uix/ime_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/uix/ime_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
   <div id="profile">
-    <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+    <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
   </div>
   <div id="toc_border"><div id="toc">
     <p class="toc-title">Content</p>
@@ -311,7 +311,7 @@ option_window_destroyed(Evas_Object *window, void *user_data)
 <p>To launch the IME list menu to show the installed IMEs:</p>
 
 <ol>
-<li>To use the functions and data types of the Input Method Manager API, include the <span style="font-family: Courier New,Courier,monospace">&lt;inputmethod_manager.h&gt;</span> header file in your application:
+<li>To use the functions and data types of the Input Method Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;inputmethod_manager.h&gt;</span> header file in your application:
 <pre class="prettyprint">#include &lt;inputmethod_manager.h&gt;</pre>
 </li>
 <li>Add the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/imemanager</span> privilege to the application manifest file.</li>
@@ -336,7 +336,7 @@ void show_ime_list()
 <p>To launch the IME selector menu to allow the user to select the default keyboard:</p>
 
 <ol>
-<li>To use the functions and data types of the Input Method Manager API, include the <span style="font-family: Courier New,Courier,monospace">&lt;inputmethod_manager.h&gt;</span> header file in your application:
+<li>To use the functions and data types of the Input Method Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;inputmethod_manager.h&gt;</span> header file in your application:
 <pre class="prettyprint">#include &lt;inputmethod_manager.h&gt;</pre>
 </li>
 <li>Add the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/imemanager</span> privilege to the application manifest file.</li>
diff --git a/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm
index a95b3ea..3895696 100644
--- a/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm
index 5be326b..0a51b54 100644
--- a/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm b/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm
index 2c3b317..e7b9993 100644
--- a/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/native/uix/voicecontrol_elm_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/voicecontrol_elm_tutorial_n.htm
index c7c4c74..b858dac 100644
--- a/org.tizen.tutorials/html/native/uix/voicecontrol_elm_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/uix/voicecontrol_elm_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
   <div id="profile">
-    <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+    <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
   </div>
   <div id="toc_border"><div id="toc">
     <p class="toc-title">Content</p>
@@ -58,7 +58,7 @@
       <h2 id="init" name="init">Initializing the Voice Control</h2>
 <p>To initialize the Voice control elementary library and create a handle:</p>
 <ol>
-<li>To use the functions and data types of the Voice control elementary API, include the <span style="font-family: Courier New,Courier,monospace">&lt;voice_control_elm.h&gt;</span> header file in your application:
+<li>To use the functions and data types of the Voice control elementary API (in <a href="../../../../org.tizen.native.mobile.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;voice_control_elm.h&gt;</span> header file in your application:
 <pre class="prettyprint">#include &lt;voice_control_elm.h&gt;</pre>
 </li>
 <li>Initialize the Voice control elementary library with the <span style="font-family: Courier New,Courier,monospace">vc_elm_initialize()</span> function:
diff --git a/org.tizen.tutorials/html/native/uix/voicecontrol_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/voicecontrol_tutorial_n.htm
index cb61c4a..630384a 100644
--- a/org.tizen.tutorials/html/native/uix/voicecontrol_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/uix/voicecontrol_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
   <div id="profile">
-    <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+    <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
   </div>
   <div id="toc_border"><div id="toc">
     <p class="toc-title">Content</p>
@@ -58,7 +58,7 @@
       <h2 id="init" name="init">Initializing the Voice Control</h2>
 <p>To initialize and prepare the voice control for use:</p>
 <ol>
-<li>To use the functions and data types of the Voice control API, include the <span style="font-family: Courier New,Courier,monospace">&lt;voice_control.h&gt;</span> header file in your application:
+<li>To use the functions and data types of the Voice control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;voice_control.h&gt;</span> header file in your application:
 <pre class="prettyprint">#include &lt;voice_control.h&gt;</pre>
 </li>
 <li>Initialize the voice control with the <span style="font-family: Courier New,Courier,monospace">vc_initialize()</span> function:
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 4b38bcb..ed1e4f9 100644
--- a/org.tizen.tutorials/html/native/uix/voicecontrol_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/uix/voicecontrol_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/native/web/web_tutorials_n.htm b/org.tizen.tutorials/html/native/web/web_tutorials_n.htm
index 9ee1f2c..8e1c00f 100644
--- a/org.tizen.tutorials/html/native/web/web_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/web/web_tutorials_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
     		<p class="toc-title">Content</p>
@@ -195,10 +195,10 @@ static Browser_Window *window_create(Evas_Object *opener, int width, int height,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &quot;ERROR: could not create browser window.&quot;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;// If you want to use gpu acceleration, just use below function.
-&nbsp;&nbsp;&nbsp;// elm_config_accel_preference_set("opengl:depth24:stencil8");
-&nbsp;&nbsp;&nbsp;
+
+&nbsp;&nbsp;&nbsp;// If you want to use gpu acceleration, use the following function
+&nbsp;&nbsp;&nbsp;// elm_config_accel_preference_set(&quot;opengl:depth24:stencil8&quot;);
+
 &nbsp;&nbsp;&nbsp;// Create window
 &nbsp;&nbsp;&nbsp;window-&gt;elm_window = elm_win_add(NULL, &quot;minibrowser-window&quot;, ELM_WIN_BASIC);
 &nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(window-&gt;elm_window, &quot;delete,request&quot;, on_window_deletion, &amp;window);
@@ -395,7 +395,7 @@ window_create()
 
 <p>The <span style="font-family: Courier New,Courier,monospace">void evas_object_show (Evas_Object *obj)</span> function makes the given <span style="font-family: Courier New,Courier,monospace">Evas</span> object visible.</p>
 
- <h2 id="helper" name="helper">Finding a Window</h2>
+<h2 id="helper" name="helper">Finding a Window</h2>
  
 <p>This example uses 2 helper functions for finding window structures. The first one, the <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> function, takes <span style="font-family: Courier New,Courier,monospace">elm_window</span> as an argument and returns a pointer to the <span style="font-family: Courier New,Courier,monospace">Browser_Window</span> object that the window is part of. The second one, the <span style="font-family: Courier New,Courier,monospace">window_find_with_ewk_view()</span> function, does the same for <span style="font-family: Courier New,Courier,monospace">ewk_view</span>. Both of them use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro to iterate over the windows list.</p>
 
diff --git a/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm
index 074458c..7d1c808 100644
--- a/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 	<p class="toc-title">Content</p>
@@ -42,17 +42,7 @@
 
 <p>This tutorial demonstrates how you can manage alarms in the device to automatically launch applications when an alarm is triggered.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Alarm API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Alarm API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
  
   <h2>Warm-up</h2>
   <p>Become familiar with the Alarm API basics by learning about:</p>
@@ -106,7 +96,7 @@ console.log(alarms.length + &quot; alarms present in the storage.&quot;);
 </pre></li> 
    <li><p>To delete an alarm, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method with the alarm ID:</p> <pre class="prettyprint">
 /* First add created alarm to the device */
-tizen.alarm.add(alarm1, &quot;tizen.internet&quot;); /*Tizen Alias ID is deprecated since Tizen 2.3.1.*/
+tizen.alarm.add(alarm1, &quot;tizen.internet&quot;); /* Tizen alias ID is deprecated since Tizen 2.3.1 */
 /* Then remove it */
 tizen.alarm.remove(alarm1.id);
 </pre> <p>To delete all alarms at once, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method.</p></li> 
@@ -119,7 +109,7 @@ tizen.alarm.remove(alarm1.id);
    <li> <p>To launch an application when an alarm is triggered, you must define the application as a parameter in the <span style="font-family: Courier New,Courier,monospace">add()</span> method used to add the created alarm to the system:</p> <pre class="prettyprint">
 /* Run the browser */
 var alarm = new tizen.AlarmAbsolute(new Date(2012, 10, 4, 8, 0));
-tizen.alarm.add(alarm, &quot;tizen.internet&quot;); /*Tizen Alias ID is deprecated since Tizen 2.3.1.*/
+tizen.alarm.add(alarm, &quot;tizen.internet&quot;); /* Tizen alias ID is deprecated since Tizen 2.3.1 */
 </pre> </li> 
    <li> <p>To launch an application with additional information when an alarm is triggered, you must use the application control and define the required arguments as a parameter in the <span style="font-family: Courier New,Courier,monospace">add()</span> method used to add the created alarm to the system:</p> <pre class="prettyprint">
 /* Run the browser and open the defined browser page with the operation/view application control */
diff --git a/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm
index 62e4266..0bce714 100644
--- a/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
@@ -38,8 +38,8 @@
   <ul> 
     <li><a href="alarm_tutorial_w.htm">Alarm: Scheduling an Application to Be Launched at a Specific Time</a> <p>Demonstrates how you can manage alarms in the device.</p></li>
 	<li><a href="application_tutorial_w.htm">Application: Providing Information about Applications and Controlling Applications</a> <p>Demonstrates how you can retrieve application information, receive application notifications, and perform application management actions.</p></li>
+	<li><a href="appgroup_tutorial_w.htm">Application Group: Managing Groups</a> <p>Demonstrates how you can define the application launch mode and manage your applications in a group.</p></li> 
    <li><a href="package_tutorial_w.htm">Package: Providing Information about Package Installation and Installed Packages</a> <p>Demonstrates how you can retrieve package information, receive package notifications, and perform package management actions.</p></li> 
-   <li><a href="appgroup_tutorial_w.htm">Application Group: Managing Groups</a> <p>Demonstrates how you can define the application launch mode and manage your applications in a group.</p></li> 
   </ul> 
   
 <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>	
diff --git a/org.tizen.tutorials/html/web/tizen/application/appgroup_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/appgroup_tutorial_w.htm
index df8ce2f..7025ca4 100644
--- a/org.tizen.tutorials/html/web/tizen/application/appgroup_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/application/appgroup_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -42,7 +42,7 @@ This tutorial demonstrates how you can define the application launch mode and ma
 </p>
 
 <h2>Warm-up</h2>
-<p>Become familiar with the Application Group API basics by learning about:</p>
+<p>Become familiar with the Application API basics by learning about:</p>
 <ul>
   <li><a href="#mode">Controlling the Launch Mode</a>
     <p>Set the launch mode when calling an application through an app control.</p></li>
@@ -52,48 +52,40 @@ This tutorial demonstrates how you can define the application launch mode and ma
 <h2 id="mode" name="mode">Controlling the Launch Mode</h2>
 
 
-
-
-
-
-<p>To launch an application in a <span style="font-family: Courier New,Courier,monospace">GROUP</span> mode you must learn how to define the application control object and next how to launch the application:</p>
+<p>To launch an application in a <span style="font-family: Courier New,Courier,monospace">GROUP</span> mode, you must learn how to define the application control object and launch the application:</p>
 
 <ol>
-<li>Define the application control object with the mode <span style="font-family: Courier New,Courier,monospace">GROUP</span>:
+<li>Define the application control object with the <span style="font-family: Courier New,Courier,monospace">GROUP</span> mode:
 <pre class="prettyprint">
-var appControl = new tizen.ApplicationControl(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"http://tizen.org/appcontrol/operation/view",
-&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,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"image/jpeg",
-&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,
-&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;"GROUP");
+var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
+&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;null, &quot;image/jpeg&quot;, null, [], &quot;GROUP&quot;);
 </pre>
 </li>
 
-<li>Define an array with callback functions for <span style="font-family: Courier New,Courier,monospace">tizen.application.launchAppControl()</span> method:
+<li>Define an array with callback functions for the <span style="font-family: Courier New,Courier,monospace">tizen.application.launchAppControl()</span> method:
 <pre class="prettyprint">
-var appControlReplyCallback = {
-&nbsp;&nbsp;// callee sent a reply 
-&nbsp;&nbsp;onsuccess: function(data) {
-&nbsp;&nbsp;&nbsp;&nbsp;console.log("onsuccess");
-&nbsp;&nbsp;},
-&nbsp;&nbsp;// callee returned failure
-&nbsp;&nbsp;onfailure: function() {
-&nbsp;&nbsp;&nbsp;&nbsp;console.log("onfailure");
-&nbsp;&nbsp;}
+var appControlReplyCallback = 
+{
+&nbsp;&nbsp;&nbsp;/* Callee sent a reply  */
+&nbsp;&nbsp;&nbsp;onsuccess: function(data) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;onsuccess&quot;);
+&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;/* Callee returned failure */
+&nbsp;&nbsp;&nbsp;onfailure: function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;onfailure&quot;);
+&nbsp;&nbsp;&nbsp;}
 }
 </pre>
 
 </li>
 <li>Launch the application in the <span style="font-family: Courier New,Courier,monospace">GROUP</span> mode with the previously defined application control object:
 <pre class="prettyprint">
-tizen.application.launchAppControl(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appControl,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function() { console.log("launch application control succeed"); },
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(e) { console.log("launch application control failed. reason: " + e.message); },
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appControlReplyCallback);
+tizen.application.launchAppControl(appControl, 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function() {console.log(&quot;launch application control succeed&quot;);},
+&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;function(e) {console.log(&quot;launch application control failed. reason: &quot; + e.message);},
+&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;appControlReplyCallback);
 </pre>
 
 </li>
diff --git a/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm
index 4539ab4..d88ca54 100644
--- a/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm
@@ -18,8 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
-		<img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -50,17 +49,7 @@
 
 <p>This tutorial demonstrates how you can manage and launch applications.</p> 
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
  
   <h2 id="warmup" name="warmup">Warm-up</h2> 
   <p>Become familiar with the Application API basics by learning about:</p> 
@@ -77,22 +66,35 @@
 				
                 <p>Learning how to retrieve information about installed and running applications allows you to manage all the device applications from your application: </p>
   <ol>
-   <li><p>To retrieve a list of installed applications, use the <span style="font-family: Courier New,Courier,monospace">getAppsInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications):</p> <pre class="prettyprint">function onListInstalledApplications(applications)
+   <li><p>To retrieve a list of installed applications, use the <span style="font-family: Courier New,Courier,monospace">getAppsInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications):</p> 
+<pre class="prettyprint">
+function onListInstalledApplications(applications)
 {
 &nbsp;&nbsp;&nbsp;console.log(&quot;The number of installed applications is &quot; + applications.length);
 }
-tizen.application.getAppsInfo(onListInstalledApplications);</pre> <p>The list of applications is returned to the <span style="font-family: Courier New,Courier,monospace">ApplicationInformationArraySuccessCallback</span> event handler as an array of <span style="font-family: Courier New,Courier,monospace">ApplicationInformation</span> objects (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformation">wearable</a> applications).</p> </li>
-   <li><p>To retrieve a list of running applications, use the <span style="font-family: Courier New,Courier,monospace">getAppsContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface:</p> <pre class="prettyprint">function onRunningApplicationContexts(contexts)
+tizen.application.getAppsInfo(onListInstalledApplications);
+</pre> 
+<p>The list of applications is returned to the <span style="font-family: Courier New,Courier,monospace">ApplicationInformationArraySuccessCallback</span> event handler as an array of <span style="font-family: Courier New,Courier,monospace">ApplicationInformation</span> objects (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformation">wearable</a> applications).</p> </li>
+   <li><p>To retrieve a list of running applications, use the <span style="font-family: Courier New,Courier,monospace">getAppsContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface:</p> 
+<pre class="prettyprint">
+function onRunningApplicationContexts(contexts)
 {
 &nbsp;&nbsp;&nbsp;console.log(&quot;The number of running applications is &quot; + contexts.length);
 }
-tizen.application.getAppsContext(onRunningApplicationContexts);</pre> <p>The list of application contexts is returned to the given event handler as an array of the <span style="font-family: Courier New,Courier,monospace">ApplicationContext</span> objects.</p></li>
-   <li><p>To retrieve basic application information, use the <span style="font-family: Courier New,Courier,monospace">getAppInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface.</p> <p>Provide the application ID of the application whose information you want as a parameter for the method. If no application ID is set, the method retrieves the information about the application calling the method.</p> <pre class="prettyprint">var appinfo = tizen.application.getAppInfo(&quot;org.tizen.application&quot;);
+tizen.application.getAppsContext(onRunningApplicationContexts);
+</pre> 
+<p>The list of application contexts is returned to the given event handler as an array of the <span style="font-family: Courier New,Courier,monospace">ApplicationContext</span> objects.</p></li>
+   <li><p>To retrieve basic application information, use the <span style="font-family: Courier New,Courier,monospace">getAppInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface.</p> <p>Provide the application ID of the application whose information you want as a parameter for the method. If no application ID is set, the method retrieves the information about the application calling the method.</p> 
+<pre class="prettyprint">
+var appinfo = tizen.application.getAppInfo(&quot;org.tizen.application&quot;);
 console.log(&quot;The application icon path :&quot; + appinfo.iconPath);
 console.log(&quot;The application name :&quot; + appinfo.name);
 </pre> </li>
-   <li><p>To retrieve application context information, use the <span style="font-family: Courier New,Courier,monospace">getAppContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface.</p> <p>Provide the context ID of the application whose context information you want as a parameter for the method. If no context ID is set, the method retrieves the information about the application calling the method.</p> <pre class="prettyprint">var appContext = tizen.application.getAppContext();
-console.log(&quot;Application context retrieved for app &quot; + appContext.id);</pre> </li>
+   <li><p>To retrieve application context information, use the <span style="font-family: Courier New,Courier,monospace">getAppContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface.</p> <p>Provide the context ID of the application whose context information you want as a parameter for the method. If no context ID is set, the method retrieves the information about the application calling the method.</p> 
+<pre class="prettyprint">
+var appContext = tizen.application.getAppContext();
+console.log(&quot;Application context retrieved for app &quot; + appContext.id);
+</pre> </li>
   </ol>
           
                 <h2 id="manage" name="manage">Managing Applications</h2>
@@ -118,12 +120,18 @@ function onGetAppsContextSuccess(appcontexts)
 }
 
 tizen.application.getAppsContext(onGetAppsContextSuccess);
-</pre> <p></p>You can also <a href="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm#launch">launch an application using the application control</a>.<p></p> </li>
-   <li><p>To retrieve the current application, use the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method:</p> <pre class="prettyprint">var currApp = tizen.application.getCurrentApplication();</pre> </li>
-   <li><p>To hide the current application, use the <span style="font-family: Courier New,Courier,monospace">hide()</span> method:</p> <pre class="prettyprint">
+</pre> 
+<p>You can also <a href="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm#launch">launch an application using the application control</a>.</p> </li>
+   <li><p>To retrieve the current application, use the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method:</p> 
+<pre class="prettyprint">
+var currApp = tizen.application.getCurrentApplication();
+</pre> </li>
+   <li><p>To hide the current application, use the <span style="font-family: Courier New,Courier,monospace">hide()</span> method:</p> 
+<pre class="prettyprint">
 currApp.hide();
 </pre> </li>
-   <li><p>To exit the current application, use the <span style="font-family: Courier New,Courier,monospace">exit()</span> method:</p> <pre class="prettyprint">
+   <li><p>To exit the current application, use the <span style="font-family: Courier New,Courier,monospace">exit()</span> method:</p> 
+<pre class="prettyprint">
 currApp.exit();
 </pre> </li>
   </ol>
@@ -134,7 +142,8 @@ currApp.exit();
   <ol>
    <li> <p>Define the event handlers for different notifications by implementing the <span style="font-family: Courier New,Courier,monospace">ApplicationInformationEventCallback</span> listener interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformationEventCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformationEventCallback">wearable</a> applications):</p>
 
-<pre class="prettyprint">var appEventCB =
+<pre class="prettyprint">
+var appEventCB =
 {
 &nbsp;&nbsp;&nbsp;/* When a new application is installed */
 &nbsp;&nbsp;&nbsp;oninstalled: function(appInfo)
@@ -153,20 +162,34 @@ currApp.exit();
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Application &quot; + appId + &quot; uninstalled&quot;);
 &nbsp;&nbsp;&nbsp;}
-} </pre> </li>
-   <li> <p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">var listenerID = tizen.application.addAppInfoEventListener(appEventCB);</pre> </li>
-   <li> <p>To stop receiving the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeAppInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications):</p> <pre class="prettyprint">
-tizen.application.removeAppInfoEventListener(listenerID);</pre> </li>
+} 
+</pre>
+ </li>
+   <li> <p>Register the listener to use the defined event handlers:</p> 
+<pre class="prettyprint">
+var listenerID = tizen.application.addAppInfoEventListener(appEventCB);
+</pre> 
+</li>
+   <li> <p>To stop receiving the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeAppInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications):</p> 
+<pre class="prettyprint">
+tizen.application.removeAppInfoEventListener(listenerID);
+</pre>
+ </li>
   </ol>
          
                 <h2 id="launch" name="launch">Launching Applications with the Application Control</h2>
 				
  <p>Learning to use the application controls to launch applications allows you to take advantage of all the device applications from your application:</p>
 
- <p>An installed application can provide a service which is identified by the operation name. Other applications can request it and use the provided feature of the service application (an optionally passing some data to the service). The service application then responds with an <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> instance (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a> applications) (which can contain some data as well).</p>
+ <p>An installed application can provide a service which is identified by the operation name. Other applications can request it and use the provided feature of the service application (and optionally passing some data to the service). The service application then responds with an <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> instance (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a> applications) (which can contain some data as well).</p>
   <ol>
-   <li><p>To use the application control to pick image files from a list of images, create an <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications).</p> <p>Define the desired functionality required from the application to be launched. The application needs to have an operation type suitable for selecting images, with URI as <span style="font-family: Courier New,Courier,monospace">null</span>, and the MIME type as <span style="font-family: Courier New,Courier,monospace">image/*</span>.</p> <pre class="prettyprint">var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/pick&quot;, null, &quot;image/*&quot;);</pre> </li>
-   <li> Define the format of the reply you want to receive from the application control: <pre class="prettyprint">var appControlReplyCB =
+   <li><p>To use the application control to pick image files from a list of images, create an <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications).</p> <p>Define the desired functionality required from the application to be launched. The application needs to have an operation type suitable for selecting images, with URI as <span style="font-family: Courier New,Courier,monospace">null</span>, and the MIME type as <span style="font-family: Courier New,Courier,monospace">image/*</span>.</p> 
+<pre class="prettyprint">
+var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/pick&quot;, null, &quot;image/*&quot;);
+</pre> </li>
+   <li>Define the format of the reply you want to receive from the application control: 
+<pre class="prettyprint">
+var appControlReplyCB =
 {
 &nbsp;&nbsp;&nbsp;/* Reply is sent if the requested operation is successfully delivered */
 &nbsp;&nbsp;&nbsp;onsuccess: function(reply)
@@ -179,26 +202,26 @@ tizen.application.removeAppInfoEventListener(listenerID);</pre> </li>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
-}</pre> </li>
-   <li>Call the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method to find a suitable application to select the images: <pre class="prettyprint">tizen.application.launchAppControl(appControl, null,
+}
+</pre> </li>
+   <li>Call the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method to find a suitable application to select the images: 
+<pre class="prettyprint">
+tizen.application.launchAppControl(appControl, 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(){console.log(&quot;launch appControl succeeded&quot;);},
 &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;function(e){/* Error handling */},
-&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;appControlReplyCB);</pre> </li>
+&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;appControlReplyCB);
+</pre> </li>
   </ol>
            
                 <h2 id="handle" name="handle">Handling Application Control Requests</h2>
 				
   <p>Learning how to handle requests from other applications allows you to create Web applications that can be called from other applications to perform specific actions.</p>
-    <p>Web applications can provide a service which is identified by the operation name. Other applications can request it and use the provided feature of the service application
-    (optionally passing some data to the service). The service application gets the request, performs some actions, and sends the result to caller application with
-    an <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> array (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a> applications).</p>
+    <p>Web applications can provide a service which is identified by the operation name. Other applications can request it and use the provided feature of the service application (optionally passing some data to the service). The service application gets the request, performs some actions, and sends the result to caller application with an <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> array (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a> applications).</p>
 
 
   <ol>
-   <li><p>To enable the application to receive Application Control requests, open the <a href="../../../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#set_widget">Web application configuration editor</a> and
-   add an operation in the <span style="font-family: Courier New,Courier,monospace">app-control</span> section.</p>
-   <p>In this example, the name of the operation is <span style="font-family: Courier New,Courier,monospace">http://example.tizen.org/operation/get_time</span>.
-   The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file contains a <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_appcontrol">&lt;tizen:app-control&gt;</a> element:</p>
+   <li><p>To enable the application to receive Application Control requests, open the <a href="../../../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#set_widget">Web application configuration editor</a> and add an operation in the <span style="font-family: Courier New,Courier,monospace">app-control</span> section.</p>
+   <p>In this example, the name of the operation is <span style="font-family: Courier New,Courier,monospace">http://example.tizen.org/operation/get_time</span>. The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file contains a <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_appcontrol">&lt;tizen:app-control&gt;</a> element:</p>
 <pre class="prettyprint lang-xml">
 &lt;tizen:app-control&gt;
 &nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;index.html&quot;/&gt;
@@ -207,11 +230,7 @@ tizen.application.removeAppInfoEventListener(listenerID);</pre> </li>
 </pre>
    <p>For more information, see <a href="../../../../../org.tizen.guides/html/web/tizen/application/application_w.htm#exporting">Exporting Application Control Functionality</a>.</p>
    </li>
-   <li><p>To retrieve an object of the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a> applications),
-   use the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of
-   the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications) and
-   the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of
-   the <span style="font-family: Courier New,Courier,monospace">Application</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#Application">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#Application">wearable</a> applications):</p>
+   <li><p>To retrieve an object of the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a> applications), use the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of  the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications) and the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> method of the <span style="font-family: Courier New,Courier,monospace">Application</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#Application">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#Application">wearable</a> applications):</p>
 <pre class="prettyprint">
 var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
 
@@ -224,8 +243,7 @@ else
 &nbsp;&nbsp;&nbsp;console.log(&quot;The application was not launched with Application Control.&quot;);
 }
 </pre></li>
-   <li><p>To send a reply to the caller application, use the <span style="font-family: Courier New,Courier,monospace">replyResult()</span> method of
-   the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface:</p>
+   <li><p>To send a reply to the caller application, use the <span style="font-family: Courier New,Courier,monospace">replyResult()</span> method of the <span style="font-family: Courier New,Courier,monospace">RequestedApplicationControl</span> interface:</p>
 <pre class="prettyprint">
 try
 {
diff --git a/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm
index 3e06c1b..e0f4b94 100644
--- a/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -40,16 +40,7 @@
 
   <p>This tutorial demonstrates how you can share data between applications.</p>
   
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
   <h2>Warm-up</h2>
   <p>Become familiar with the Data Control API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm
index 7be5286..400325d 100644
--- a/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm
@@ -18,8 +18,8 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
-		<img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/>
+		<img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -49,17 +49,8 @@
 
 <p>This tutorial demonstrates how you can manage packages and retrieve information about them.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Package API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Package API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
+
   <h2 id="warmup" name="warmup">Warm-up</h2> 
   <p>Become familiar with the Package API basics by learning about:</p> 
   <ul> 
diff --git a/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm
index e7e86f8..1c129fe 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -56,18 +56,7 @@
 	
  <p>This tutorial demonstrates how you can manage Bluetooth and exchange data with a peer device.</p>
  
-   <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Bluetooth API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
-	 <p>The Bluetooth API is not supported on any Tizen Emulators.</p>
-</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Bluetooth API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Bluetooth API is not supported on any Tizen Emulators.</p> 
   
       <h2 id="warm_up" name="warm_up">Warm-up</h2>
       <p>Become familiar with the Bluetooth API basics by learning about:</p>
@@ -351,12 +340,9 @@ healthChannel.close();
    <li>Define a scan event handler by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEScanCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEScanCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEScanCallback">wearable</a> applications).
     <p>The callback is invoked when a remote device has been detected.</p>
 <pre class="prettyprint">
-var callbacks = 
+function successcallback(device)
 {
-&nbsp;&nbsp;&nbsp;onsuccess: function(device)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Found device: &quot;  device.name  &quot; [&quot;  device.address  &quot;]&quot;);
-&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;console.log(&quot;Found device: &quot; + device.name + &quot; [&quot; + device.address + &quot;]&quot;);
 };
 </pre>
     <table class="note">
@@ -375,7 +361,7 @@ var callbacks =
    </li>
 
    <li><p>To search for remote devices, use the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">adapter.startScan(callbacks);</pre>
+<pre class="prettyprint">adapter.startScan(successcallback);</pre>
    </li>
    <li><p>When you find the right remote device or the user cancels the scanning, disable the scan using the <span style="font-family: Courier New,Courier,monospace">stopScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
 <pre class="prettyprint">adapter.stopScan();</pre>
@@ -470,7 +456,7 @@ function onDeviceFound(device)
    </li>
 
    <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan using the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> adapter:</p>
-<pre class="prettyprint">adapter.startScan({onsuccess: onDeviceFound});</pre></li>
+<pre class="prettyprint">adapter.startScan(onDeviceFound);</pre></li>
 
    <li><p>When the connection to the remote device is no longer required, disconnect from the device by calling the <span style="font-family: Courier New,Courier,monospace">disconnect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
 <pre class="prettyprint">remoteDevice.disconnect();</pre></li>
@@ -525,7 +511,7 @@ function onDeviceFound(device)
    </li>
 
    <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan:</p>
-<pre class="prettyprint">adapter.startScan({onsuccess: onDeviceFound});</pre></li>
+<pre class="prettyprint">adapter.startScan(onDeviceFound);</pre></li>
 
    <li><p>When the notifications about the connection are no longer required, unregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
 <pre class="prettyprint">remoteDevice.removeConnectStateChangeListener(watchId);</pre></li>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm
index a82293d..e951a6e 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm
index 74d12bf..334ec40 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -46,16 +46,7 @@
  
  <p>This tutorial demonstrates how you can create, send, and read messages as well as manage messages in the message storage.</p>
  
-    <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
      
   <h2>Warm-up</h2>
       <p>Become familiar with the Messaging API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm
index 846a35d..8aa79fa 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -48,17 +48,7 @@
   
  <p>This tutorial demonstrates how you can use NFC connectivity to detect NFC tags and exchange data with NFC-enabled devices.</p>
  
-    <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The NFC API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
-	 <p>The NFC API is supported on all Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The NFC API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The NFC API is supported on all Tizen Emulators.</p> 
      
       <h2 id="warm_up" name="warm_up">Warm-up</h2>
       <p>Become familiar with the NFC API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm
index 979d00c..18f0655 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -40,18 +40,7 @@
   
  <p>This tutorial demonstrates how you can register your application, connect to the push service, and start receiving push notifications.</p>
  
-     <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Push API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
-	 <p>The Push API is supported on all Tizen Emulators.</p>
-	</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Push API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Push API is supported on all Tizen Emulators.</p> 
     
       <h2>Warm-up</h2>
       <p>Become familiar with the Push API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm
index e8e40b5..0ca00de 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm
@@ -18,8 +18,8 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/>
-		<img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/>
+		<img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -43,17 +43,7 @@
  
  <p>This tutorial demonstrates how you can access and manage secure elements in a device.</p>
  
-    <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Secure Element API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
-	 <p>The Secure Element API is supported on all Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Secure Element API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Secure Element API is supported on all Tizen Emulators.</p> 
      
   <h2>Warm-up</h2>
           <p>Become familiar with the Secure Element API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm b/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm
index 4e61ced..8c07cc3 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm b/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm
index 34398f5..0d8bb72 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm b/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm
index df10837..3b4eb95 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm
index 113b828..ccabff5 100644
--- a/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 	 <p class="toc-title">Content</p>
@@ -51,17 +51,7 @@
 
 <p>This tutorial demonstrates how you can retrieve content and manage items in your device local storage.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Content API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Content API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
 
   <h2 id="warm_up" name="warm_up">Warm-up</h2>
   <p>Become familiar with the Content API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm
index 288e265..62b9454 100644
--- a/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm
index aa5aa77..876ce6c 100644
--- a/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 	<p class="toc-title">Content</p>
@@ -42,17 +42,7 @@
 
 <p>This tutorial demonstrates how you can manage and monitor downloads.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Download API is mandatory for the Tizen mobile profile, but optional for the wearable profile. This means that it is supported in all mobile devices, but may not be supported in all wearable devices. 
-		<p>The Download API is supported on all Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Download API is mandatory for the Tizen mobile profile, but optional for the wearable profile. This means that it is supported in all mobile devices, but may not be supported in all wearable devices. The Download API is supported on all Tizen Emulators.</p> 
   
   
   <h2>Warm-up</h2>
diff --git a/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm
index b45e11d..6dc64ef 100644
--- a/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -42,17 +42,7 @@
 	
 <p>This tutorial demonstrates how you can use EXIF (exchangeable image format) information stored in JPEG files.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-<p>The Exif API is supported on all Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. The Exif API is supported on all Tizen Emulators.</p> 
   
 <h2>Warm-up</h2>
 <p>Become familiar with the Exif API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm b/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm
index 97d938f..b9de649 100644
--- a/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm b/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm
index 5f7bfd0..3a5733a 100644
--- a/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm
index 44b3fbd..144e452 100644
--- a/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -41,17 +41,7 @@
 
 <p>This tutorial demonstrates how you can create, browse, and extract ZIP archives.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-<p>The Archive API is supported on all Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. The Archive API is supported on all Tizen Emulators.</p> 
 
 <h2>Warm-up</h2>
 <p>Become familiar with the Archive API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm
index cca6685..a539a08 100644
--- a/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -46,17 +46,7 @@
 
 <p>This tutorial demonstrates how you can control files and directories on the device.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Filesystem API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Filesystem API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
 
 <h2>Warm-up</h2>
 <p>Become familiar with the Filesystem API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm
index ddb317a..0c778e3 100644
--- a/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm
index 3278803..f4e4173 100644
--- a/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -40,17 +40,7 @@
 
  <p>This tutorial demonstrates how you can send and receive messages through message ports.</p>
  
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Message Port API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Message Port API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
      
       <h2>Warm-up</h2>
       <p>Become familiar with the Message Port API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm
index 8dfd641..595b4ae 100644
--- a/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -148,7 +148,7 @@ passThruModifiers: function(tplHtml, tplParam, content)
 
 &nbsp;&nbsp;&nbsp;if (content &amp;&amp; (typeof content === &#39;string&#39;))
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content = content.replace(specRegExp, &#39;$$$$&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content = content.replace(specRegExp, &#39;$$$$&#39;);
 &nbsp;&nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;if (regModOn.test(tplHtml))
@@ -163,7 +163,7 @@ passThruModifiers: function(tplHtml, tplParam, content)
 &nbsp;&nbsp;&nbsp;} 
 &nbsp;&nbsp;&nbsp;else
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplHtml = tplHtml.replace(regModOff, content);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplHtml = tplHtml.replace(regModOff, content);
 &nbsp;&nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;return tplHtml;
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm
index 791e957..8efa45f 100644
--- a/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -43,17 +43,7 @@
 <p>
 This tutorial demonstrates how you can to develop server and client applications for controlling various media functions of the device.</p>
 
-<table class="note">
-<tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The Media Controller API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
-     <p>All mandatory APIs are supported on the Tizen Emulators.</p></td>
-    </tr>
-   </tbody>
-  </table>
+<p>The Media Controller API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
 
 <h2>Warm-up</h2>
 <p>Become familiar with the Media Controller API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm
index 8a6d68a..2a32b6c 100644
--- a/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -40,17 +40,7 @@
   
 <p>This tutorial demonstrates how you can control multimedia playback.</p>
 
-   <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Media Key API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
-		<p>The Media Key API is not supported on any Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Media Key API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Media Key API is not supported on any Tizen Emulators.</p> 
 
 <h2>Warm-up</h2>
 <p>Become familiar with the Media Key API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
index fdde298..a71069c 100644
--- a/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm
index f5af960..f63c69c 100644
--- a/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -43,17 +43,7 @@
 
 <p>This tutorial demonstrates how you can manage the device volume levels and sound devices.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Sound API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Sound API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
 
 <h2>Warm-up</h2>
 <p>Become familiar with the Sound API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
index 4ae21e1..0d85495 100644
--- a/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -40,16 +40,7 @@
  
 <p>This tutorial demonstrates how you can create a service application and implement specific features within the service application.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p>This feature is supported in wearable applications only.</p>
 
 <h2>Warm-up</h2>
 
diff --git a/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
index 1cc4809..a3b1ddd 100644
--- a/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -41,16 +41,7 @@
 	
 <p>This tutorial demonstrates how you can manage accounts and retrieve account information.</p>
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
   
 <h2>Warm-up</h2>
 <p>Become familiar with the Account API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm
index 483c1e0..8111f82 100644
--- a/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -39,16 +39,7 @@
   
       <p>This tutorial demonstrates how you can manage Tizen Web browser bookmarks on the device.</p>
 	  
-	    <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
       
   <h2>Warm-up</h2>
       <p>Become familiar with the Bookmark API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm
index 36ef391..e1357ae 100644
--- a/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -55,16 +55,7 @@
 	 
       <p>This tutorial demonstrates how you can manage calendars in the device to access, modify, add, and remove calendar items within a specified calendar on the device.</p>
 	  
-	    <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>This feature is supported in mobile applications only.</p>
       
   <h2>Warm-up</h2>
       <p>Become familiar with the Calendar API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm
index aae5dc0..b179162 100644
--- a/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -39,16 +39,7 @@
 	
       <p>This tutorial demonstrates how you can manage and monitor the call history.</p>
 	  
-	     <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
    
       <h2>Warm-up</h2>
       <p>Become familiar with the Call History API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm
index c283388..20ea238 100644
--- a/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -63,16 +63,7 @@
    
       <p>This tutorial demonstrates how you can manage address books in the device to access, modify, add, and remove contacts within a specified address book on the device.</p>
 	  
-	    <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>This feature is supported in mobile applications only.</p>
 
   <h2>Warm-up</h2>
       <p>Become familiar with the Contact API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm
index dd624a5..70db294 100644
--- a/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -38,16 +38,7 @@
 	
       <p>This tutorial demonstrates how you can synchronize device data, such as contacts and calendar events, with the OMA DS server.</p>
 	  
-	     <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
     
   <h2>Warm-up</h2>
       <p>Become familiar with the Data Synchronization API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm
index 01267bc..d794111 100644
--- a/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
@@ -31,16 +31,7 @@
 
  <h1>Social: Managing Personal Data</h1>
 
-     <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Social API domain is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Social API domain is supported in mobile applications only.</p>
  
  <p>The social data tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
   <ul>
diff --git a/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm b/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm
index 9ad96c7..c0667fd 100644
--- a/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm b/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm
index d55c274..9d08f37 100644
--- a/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm
index 1c000e0..7423ac8 100644
--- a/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
@@ -40,16 +40,7 @@
 
 <p>This tutorial demonstrates how you can manage a FM radio on the device.</p>
 
-   <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
 <h2>Warm-up</h2>
 
diff --git a/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm
index 3d50159..91402d2 100644
--- a/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -41,17 +41,7 @@
 
 <p>This tutorial demonstrates how you can monitor user activity.</p>
 
-   <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Human Activity Monitor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
-		<p>The Human Activity Monitor API is partly supported on the Tizen Emulators (only heart-rate monitoring).</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Human Activity Monitor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Human Activity Monitor API is partly supported on the Tizen Emulators (only heart-rate monitoring).</p> 
 
 <h2>Warm-up</h2>
 
diff --git a/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm
index bf4d4cd..787ecc5 100644
--- a/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -41,17 +41,7 @@
 
 <p>This tutorial demonstrates how you can access the device power state.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Power API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Power API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
 
   <h2>Warm-up</h2>
   <p>Become familiar with the Power API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm
index a8264c4..872424f 100644
--- a/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w_optional.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		 <p class="toc-title">Content</p>
@@ -40,17 +40,7 @@
 
 <p>This tutorial demonstrates how you can use device sensors.</p>
 
-   <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Sensor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
-		<p>The Sensor API is supported on all Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Sensor API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. The Sensor API is supported on all Tizen Emulators.</p> 
 
 <h2>Warm-up</h2>
 
diff --git a/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm
index 71f06d4..07c445f 100644
--- a/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm
@@ -17,8 +17,8 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
-		<img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/>
+		<img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		   <p class="toc-title">Content</p>
@@ -44,17 +44,7 @@
 
 <p>This tutorial demonstrates how you can obtain information about the device properties.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The System Information API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The System Information API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <h2>Warm-up</h2>
   <p>Become familiar with the System Information API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm
index 38a4cd6..9146a12 100644
--- a/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 	<p class="toc-title">Content</p>
@@ -41,17 +41,7 @@
 
 <p>This tutorial demonstrates how you can access the device&#39;s settings for the home screen and lock screen wallpaper, incoming call ringtone, and email notification tone.</p>
 
-	    <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The System Setting API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>The System Setting API is supported on the Tizen mobile Emulator and partly supported on the Tizen wearable Emulator (only the home screen and incoming call features).</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The System Setting API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. The System Setting API is supported on the Tizen mobile Emulator and partly supported on the Tizen wearable Emulator (only the home screen and incoming call features).</p> 
   
 <h2>Warm-up</h2>
 <p>Become familiar with the System Setting API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
index 5f885ac..ffc94bb 100644
--- a/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/tizen/system/task_sensorball_w.htm b/org.tizen.tutorials/html/web/tizen/system/task_sensorball_w.htm
index 8d11437..bf10c00 100644
--- a/org.tizen.tutorials/html/web/tizen/system/task_sensorball_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/task_sensorball_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w_optional.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm b/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm
index 427f68c..5cbf375 100644
--- a/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm
index 43350bc..6818bca 100644
--- a/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm
@@ -17,8 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
-		<img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -43,17 +42,7 @@
 	
 	  <p>This tutorial demonstrates how you can manage date and time information and perform different calculations and other tasks related to date and time.</p> 
 	  
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Time API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Time API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <h2>Warm-up</h2> 
   <p>Become familiar with the Time API basics by learning about:</p> 
diff --git a/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm
index 098343f..e8d344c 100644
--- a/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -39,16 +39,7 @@
 
 <p>This tutorial demonstrates how you can manage Web view properties.</p>
 
-	    <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in mobile applications only.</p>
 
   <h2>Warm-up</h2>
   <p>Become familiar with the Web Setting API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm
index 93f599e..ba0d96e 100644
--- a/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 	 <p class="toc-title">Content</p>
@@ -51,17 +51,7 @@
  
 <p>This tutorial demonstrates how you can utilize generic Tizen Device API features, such as filters, sorting modes, and generic event handlers.</p>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p>The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.  All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <h2>Warm-up</h2>
   <p>Become familiar with the Tizen API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm b/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
index 32089c9..29cba39 100644
--- a/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 		<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
@@ -34,20 +34,6 @@
 
 <p>Tizen tutorials teach you how to incorporate Tizen features into your application. The tutorials cover detailed code snippets to help you see how to write the required code in practice.</p>
 
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note"> In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. 
-<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.</p>
-<p>To determine the availability of optional APIs, use the <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications).</p>
-<p>Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see <a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
-
 <p>Select the feature you are interested in and see how you can implement its various functionalities into your application.</p>
 <p>The following tutorials demonstrate features provided by the Tizen Web Device API: </p>
 
@@ -72,8 +58,21 @@
 	<p>Demonstrates how you can manage the user&#39;s personal data, such as contacts, calendars, location data, and call and browsing history, on the device.</p></li>		
 </ul>
 
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note"> In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. 
+<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.</p>
+<p>To determine the availability of optional APIs, use the <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications).</p>
+<p>Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see <a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></td> 
+    </tr> 
+   </tbody> 
+  </table>
 
-<p>For more information about implementing the UI for your application using the Advanced UI Framework (TAU) features, see <a href="../../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU</a>.</p>
+<p>For more information about implementing the UI for your application using the Advanced UI Framework (TAU) features, see <a href="../../../../org.tizen.ui.practices/html/web/tau/guides_tau_w.htm">TAU</a>.</p>
 
 <p>In addition to the Tizen Web Device API tutorials above, you can implement the following features:</p>
 <ul>	
diff --git a/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm
index 02226fc..0128da4 100644
--- a/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm
@@ -18,7 +18,7 @@
 	
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -40,17 +40,7 @@
 
 <p>This tutorial demonstrates how you can manage home screen badges.</p>
 
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Badge API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-		<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Badge API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.  All mandatory APIs are supported on the Tizen Emulators.</p> 
   
 <h2>Warm-up</h2>
 <p>Become familiar with the Badge API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm
index b7a5f14..c1b05dd 100644
--- a/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm
@@ -18,7 +18,7 @@
 	
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -41,17 +41,7 @@
 
 <p>This tutorial demonstrates how you can manage notifications created based on application events.</p>
 
-	    <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Notification API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
-<p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>The Notification API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
   
   <h2>Warm-up</h2>
   <p>Become familiar with the Notification API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm
index a4186dc..c36ff3a 100644
--- a/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm
@@ -18,7 +18,7 @@
 	
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/tutorials_w.htm b/org.tizen.tutorials/html/web/tutorials_w.htm
index 6359524..40f70eb 100644
--- a/org.tizen.tutorials/html/web/tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
 	</div>
 		<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
@@ -35,6 +35,16 @@
 
 <p>Tizen Web tutorials teach you how to incorporate Tizen features into your application. The tutorials cover detailed code snippets to help you see how to write the required code in practice.</p>
 
+
+<p>Select the feature you are interested in and see how you can implement its various functionalities into your application:</p>
+
+<ul>
+	<li><a href="tizen/tutorials_tizen_w.htm">Exploiting Tizen Features</a>
+	<p>Demonstrates how you can use Tizen features, such as alarms, calendars, and multimedia content, provided by the <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></li>
+		<li><a href="w3c/tutorials_w3c_w.htm">Exploiting W3C/HTML5 and Some Supplementary Features</a>
+	<p>Demonstrates how you can use the W3C, HTML5, and some supplementary features provided by the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>.</p></li>
+</ul>
+  
   <table class="note"> 
    <tbody> 
     <tr> 
@@ -45,16 +55,7 @@
     </tr> 
    </tbody> 
   </table> 
-
-<p>Select the feature you are interested in and see how you can implement its various functionalities into your application:</p>
-
-<ul>
-	<li><a href="tizen/tutorials_tizen_w.htm">Exploiting Tizen Features</a>
-	<p>Demonstrates how you can use Tizen features, such as alarms, calendars, and multimedia content, provided by the <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></li>
-		<li><a href="w3c/tutorials_w3c_w.htm">Exploiting W3C/HTML5 and Some Supplementary Features</a>
-	<p>Demonstrates how you can use the W3C, HTML5, and some supplementary features provided by the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>.</p></li>
-</ul>
-    
+  
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm
index aa7266a..62e5de2 100644
--- a/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
@@ -38,7 +38,7 @@
    <li><a href="web_messaging_tutorial_w.htm">HTML5 Web Messaging: Accessing Device-specific Information</a> <p>Demonstrates how you can send messages between documents and through the message channel ports.</p></li>
 
    <li><a href="websocket_tutorial_w.htm">WebSocket: Exchanging Data Using a Socket Server</a> <p>Demonstrates how you can manage the client-server communication.</p></li>
-   <li><a href="xmlhttprequest_tutorial_w.htm">XMLHttpRequest Level 1 and 2: Communicating with the Server</a> <p>Demonstrates how you can communicate with a Web server using HTTP requests.</p></li>
+   <li><a href="xmlhttprequest_tutorial_w.htm">XMLHttpRequest (Level 1 and 2): Communicating with the Server</a> <p>Demonstrates how you can communicate with a Web server using HTTP requests.</p></li>
   </ul>
 
   <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
diff --git a/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm
index d26ec30..c9414e6 100644
--- a/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/><br/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -39,16 +39,7 @@
   
       <p>This tutorial demonstrates how you can implement server push messaging.</p>
  
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p>This feature is supported in mobile applications only.</p>
  
   <h2>Warm-up</h2>
         <p>Become familiar with the Server-Sent Events API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm
index 78b599b..9d7cfba 100644
--- a/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm
index 503f642..59daf68 100644
--- a/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm
index 530df2e..71b1545 100644
--- a/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm
@@ -11,14 +11,14 @@
     <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-    <title>XMLHttpRequest Level 1 and 2: Communicating with the Server</title>
+    <title>XMLHttpRequest (Level 1 and 2): Communicating with the Server</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 	<p class="toc-title">Content</p>
@@ -42,7 +42,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>XMLHttpRequest Level 1 and 2: Communicating with the Server</h1>
+<h1>XMLHttpRequest (Level 1 and 2): Communicating with the Server</h1>
   
  <p>This tutorial demonstrates how you can communicate with a Web server using HTTP requests.</p>
       
diff --git a/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm
index ad90e97..0d15a6f 100644
--- a/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm
index 57a0414..4a8c118 100644
--- a/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -39,17 +39,9 @@
 
 
  <p>This tutorial demonstrates how you can access the browser connection state.</p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-        
+
+ <p>This feature is supported in mobile applications only.</p>
+ 
 <h2>Warm-up</h2>
         <p>Become familiar with the HTML5 Browser state API basics by learning about:</p>
         <ul>
diff --git a/org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm
index 48d08ca..f224b44 100644
--- a/org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm
index 211cdaf..0f77e1d 100644
--- a/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm
index d5f151e..d22052e 100644
--- a/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -38,16 +38,8 @@
 
 
 <p>This tutorial demonstrates how you can manage the screen orientation state.</p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+
+<p>This feature is supported in mobile applications only.</p>
 				
 
 <h2>Warm-up</h2>
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm b/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm
index 81e3254..1657542 100644
--- a/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -154,7 +154,7 @@ else
 angleMemory = angle;
 </pre></li>
 
-<li><p>The needle position is updated by rotating the needle with the <span style="font-family: Courier New,Courier,monospace">rotate()</span> method of the <a href="../../../../../org.tizen.ui.guides/html/web/w3c/transform_w.htm#twod">transform function</a>, based on the angle calculated above.</p>
+<li><p>The needle position is updated by rotating the needle with the <span style="font-family: Courier New,Courier,monospace">rotate()</span> method of the <a href="../../../../../org.tizen.ui.practices/html/web/w3c/transform_w.htm#twod">transform function</a>, based on the angle calculated above.</p>
 
 
 <pre class="prettyprint">$(&#39;#direction&#39;).text(text);
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm
index e0db8ee..5288fdd 100644
--- a/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm
index 03d00bb..be8e699 100644
--- a/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm
index 42ba4cf..5196fe7 100644
--- a/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm
index 9b6c7ad..a691d13 100644
--- a/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm
index 18f2d77..2df5db9 100644
--- a/org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/graphics/canvas_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm
index 73252fe..7ca29b8 100644
--- a/org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm
index 92218d7..a41dd8c 100644
--- a/org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/graphics/svg_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/graphics/task_basicwatch_w.htm b/org.tizen.tutorials/html/web/w3c/graphics/task_basicwatch_w.htm
index 8610251..c5a1b76 100644
--- a/org.tizen.tutorials/html/web/w3c/graphics/task_basicwatch_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/graphics/task_basicwatch_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm
index 410567a..6281811 100644
--- a/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm
index 3ffd3fb..a6826e9 100644
--- a/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm
@@ -16,7 +16,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm
index d5a7728..ddb899a 100644
--- a/org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm
index 7652634..0cd33de 100644
--- a/org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -38,16 +38,7 @@
 
  <p>This tutorial demonstrates how you can use the HTML media capture feature.</p>
  
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p>This feature is supported in mobile applications only.</p>
  
 
 <h2>Warm-up</h2>
diff --git a/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm
index def7baf..2ea94a4 100644
--- a/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/w3c/media/task_piano_w.htm b/org.tizen.tutorials/html/web/w3c/media/task_piano_w.htm
index 49f38f8..5da486d 100644
--- a/org.tizen.tutorials/html/web/w3c/media/task_piano_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/media/task_piano_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/w3c/media/task_selfcamera_w.htm b/org.tizen.tutorials/html/web/w3c/media/task_selfcamera_w.htm
index 4af1cc6..0b004fc 100644
--- a/org.tizen.tutorials/html/web/w3c/media/task_selfcamera_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/media/task_selfcamera_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm
index fd4627a..2f0cc35 100644
--- a/org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm
index c65629e..81054de 100644
--- a/org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -40,16 +40,7 @@
   
  <p>This tutorial demonstrates how you can play audio content using the Web audio.</p>
  
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p>This feature is supported in mobile applications only.</p>
 
 
 <h2>Warm-up</h2>
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm
index 409c54c..6005a1a 100644
--- a/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm
index 5562228..0d7f383 100644
--- a/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm
index 51431e9..f817308 100644
--- a/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm
index bbccb9b..8f05a48 100644
--- a/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm
index f1ad7cc..3df2a46 100644
--- a/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm
index 09c61bc..fff4c0a 100644
--- a/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm
index 86e7811..f93f96c 100644
--- a/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm
@@ -17,7 +17,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm
index 2e1048c..e22f834 100644
--- a/org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/storage/appcache_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -41,16 +41,7 @@
   
 <p>This tutorial demonstrates how you can use HTML5 application caches.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p>This feature is supported in mobile applications only.</p>
 
 <h2>Warm-up</h2>
 <p>Become familiar with the HTML5 Application caches API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm
index b9b17ba..7d7da0e 100644
--- a/org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/storage/file_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm
index c413cfd..e27b9b7 100644
--- a/org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/storage/indexdb_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm
index cb579f1..36d796f 100644
--- a/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm
index cae3fc4..b52ea15 100644
--- a/org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/storage/websql_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -52,16 +52,8 @@
 <h1>Web SQL Database: Creating and Querying Databases</h1>
   
 <p>This tutorial demonstrates how you can use SQL databases in Tizen applications.</p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 				
+
+<p>This feature is supported in mobile applications only.</p>			
 			
 
 <h2>Warm-up</h2>
diff --git a/org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm
index 8b927f4..e2df93d 100644
--- a/org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/storage/webstorage_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm
index c918a0b..0050eaf 100644
--- a/org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	<div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -40,16 +40,7 @@
    
 <p>This tutorial demonstrates how you can control the camera on a wearable device.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 				
+<p>This feature is supported in wearable applications only.</p>		
 
    <h2>Warm-up</h2>
   <p>Become familiar with the Camera API (Tizen Extension) API basics by learning about:</p>
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm
index 061924f..4828165 100644
--- a/org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
@@ -39,16 +39,7 @@
 
 <p>This tutorial demonstrates how you can display an element in the fullscreen mode.</p> 
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p>This feature is supported in mobile applications only.</p>
   
   <h2>Warm-up</h2> 
   <p>Become familiar with the FullScreen API - Mozilla API basics by learning about:</p> 
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm
index cde38c7..3db8c42 100644
--- a/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/task_camera_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/task_camera_w.htm
index 7916992..d604c6f 100644
--- a/org.tizen.tutorials/html/web/w3c/supplement/task_camera_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/supplement/task_camera_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm
index 458a11f..b18d312 100644
--- a/org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/supplement/typedarray_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm
index acaaf7d..63e0034 100644
--- a/org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/supplement/webgl_tutorial_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+        <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
 		<p class="toc-title">Content</p>
diff --git a/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm b/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm
index d89903d..0c5f2ce 100644
--- a/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
 	</div>
 		<div id="toc_border"><div id="toc">
 		<p class="toc-title">Related Info</p>
@@ -59,7 +59,7 @@
 	<p>Demonstrates how you can create and run a wearable watch face application using the Tizen IDE.</p></li>	
 </ul>
 
-<p>For more information about implementing the UI for your application using the W3C features, see <a href="../../../../org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm">W3C</a>.</p>
+<p>For more information about implementing the UI for your application using the W3C features, see <a href="../../../../org.tizen.ui.practices/html/web/w3c/guides_w3c_w.htm">W3C</a>.</p>
 
     
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.tutorials/html/web/w3c/watchface/developing_watch_app.htm b/org.tizen.tutorials/html/web/w3c/watchface/developing_watch_app.htm
index 151595f..9097626 100644
--- a/org.tizen.tutorials/html/web/w3c/watchface/developing_watch_app.htm
+++ b/org.tizen.tutorials/html/web/w3c/watchface/developing_watch_app.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
 	<div id="profile">
-		<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+		<p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
 	</div>
 	
 	<div id="toc_border"><div id="toc">
@@ -39,16 +39,7 @@
 
 <p>For more information on the sample functionality and the full source code, see <a href="../graphics/task_basicwatch_w.htm">Basic Watch task</a>.</p> 
 
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This feature is supported in wearable applications only.</p>
 
 <p>This article describes the main steps required to develop a watch face application using the Tizen IDE. For more detailed information about the application development process, see <a href="../../../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm">Web Application Development Process</a>. To learn how to design a watch face, see the Gear UI guides on the <a href="http://developer.samsung.com/technical-doc/list.do" target="_blank">Samsung Developers</a> site.</p>
 
diff --git a/org.tizen.tutorials/index.xml b/org.tizen.tutorials/index.xml
index 585f239..de5117f 100644
--- a/org.tizen.tutorials/index.xml
+++ b/org.tizen.tutorials/index.xml
@@ -9,6 +9,7 @@
 		<topic href="html/web/tizen/application/app_tutorials_w.htm" label="Application">			
 			<topic href="html/web/tizen/application/alarm_tutorial_w.htm" label="Alarm"></topic>
 			<topic href="html/web/tizen/application/application_tutorial_w.htm" label="Application"></topic>
+			<topic href="html/web/tizen/application/appgroup_tutorial_w.htm" label="Application Group"></topic>
 			<topic href="html/web/tizen/application/package_tutorial_w.htm" label="Package"></topic>			
 			<topic href="html/web/tizen/application/data_tutorial_w.htm" label="Data Control"></topic>
 		</topic>
@@ -111,7 +112,7 @@
 		<topic href="html/web/w3c/communication/comm_tutorials_w.htm" label="Communication">			
 			<topic href="html/web/w3c/communication/web_messaging_tutorial_w.htm" label="HTML5 Web Messaging"></topic>
 			<topic href="html/web/w3c/communication/websocket_tutorial_w.htm" label="WebSocket"></topic>
-			<topic href="html/web/w3c/communication/xmlhttprequest_tutorial_w.htm" label="XMLHttpRequest Level 1 and 2"></topic>	
+			<topic href="html/web/w3c/communication/xmlhttprequest_tutorial_w.htm" label="XMLHttpRequest (Level 1 and 2)"></topic>	
 			<topic href="html/web/w3c/communication/server_sent_tutorial_w.htm" label="Server-Sent Events"></topic>
 		</topic>
 		<topic href="html/web/w3c/storage/storage_tutorials_w.htm" label="Storage">
@@ -147,12 +148,17 @@
 
 <topic href="html/native/tutorials_n.htm" label="Native Application">
 	<topic href="html/native/account/account_tutorials_n.htm" label="Account">
-		<topic href="html/native/account/oauth2_tutorial_n.htm" label="oauth2"></topic>
+		<topic href="html/native/account/account_tutorial_n.htm" label="Account Manager"></topic>	
+		<topic href="html/native/account/oauth2_tutorial_n.htm" label="OAuth 2.0"></topic>
 		<topic href="html/native/account/sync_manager_tutorial_n.htm" label="Sync Manager"></topic>
 	</topic>
 	<topic href="html/native/app_framework/app_framework_tutorials_n.htm" label="Application Framework">
-		<topic href="html/native/app_framework/application_tutorial_n.htm" label="Application"></topic>
-		<topic href="html/native/app_framework/appgroup_tutorial_n.htm" label="Application Group"></topic>
+		<topic href="html/native/app_framework/application_tutorial_n.htm" label="Application">
+			<topic href="html/native/app_framework/alarm_tutorial_n.htm" label="Alarm"></topic>
+			<topic href="html/native/app_framework/appcontrol_tutorial_n.htm" label="App Control"></topic>
+			<topic href="html/native/app_framework/event_tutorial_n.htm" label="Event"></topic>
+			<topic href="html/native/app_framework/preference_tutorial_n.htm" label="Preference"></topic>			
+		</topic>
 		<topic href="html/native/app_framework/app_manager_tutorial_n.htm" label="Application Manager"></topic>
 		<topic href="html/native/app_framework/badge_tutorial_n.htm" label="Badge"></topic>
 		<topic href="html/native/app_framework/bundle_tutorial_n.htm" label="Bundle"></topic>
@@ -161,8 +167,8 @@
 		<topic href="html/native/app_framework/notification_tutorial_n.htm" label="Notification"></topic>
 		<topic href="html/native/app_framework/package_tutorial_n.htm" label="Package Manager"></topic>
 		<topic href="html/native/app_framework/service_app_tutorial_n.htm" label="Service Application"></topic>
-		<topic href="html/native/app_framework/widget_tutorial_n.htm" label="Widget Application"></topic>		
 		<topic href="html/native/app_framework/shortcut_tutorial_n.htm" label="Shortcut"></topic>
+		<topic href="html/native/app_framework/widget_tutorial_n.htm" label="Widget Application"></topic>		
 		<topic href="html/native/app_framework/watch_tutorial_n.htm" label="Watch Application"></topic>
 	</topic>
 	<topic href="html/native/base/base_tutorials_n.htm" label="Base">
@@ -188,8 +194,8 @@
 	</topic>
 	<topic href="html/native/location/location_tutorials_n.htm" label="Location">
 		<topic href="html/native/location/location_tutorial_n.htm" label="Location"></topic>
-		<topic href="html/native/location/geofence_tutorial_n.htm" label="Geofence"></topic>
 		<topic href="html/native/location/maps_tutorial_n.htm" label="Maps Service"></topic>
+		<topic href="html/native/location/geofence_tutorial_n.htm" label="Geofence"></topic>
 	</topic>
 	<topic href="html/native/messaging/messaging_tutorials_n.htm" label="Messaging">
 		<topic href="html/native/messaging/sms_mms_tutorial_n.htm" label="Messages"></topic>
@@ -213,14 +219,14 @@
 		<topic href="html/native/multimedia/tone_player_tutorial_n.htm" label="Tone Player"></topic>
 		<topic href="html/native/multimedia/wav_player_tutorial_n.htm" label="WAV Player"></topic>
 		<topic href="html/native/multimedia/sound_manager_tutorial_n.htm" label="Sound Manager"></topic>
-		<topic href="html/native/multimedia/screen_mirroring_tutorial_n.htm" label="Screen Mirroring Sink"></topic>
+		<topic href="html/native/multimedia/screen_mirroring_tutorial_n.htm" label="Screen Mirroring"></topic>
 		<topic href="html/native/multimedia/video_util_tutorial_n.htm" label="Video Util"></topic>
 	</topic>
 	<topic href="html/native/network/network_tutorials_n.htm" label="Network">
 		<topic href="html/native/network/connection_tutorial_n.htm" label="Connection"></topic>
 		<topic href="html/native/network/bluetooth_tutorial_n.htm" label="Bluetooth"></topic>
 		<topic href="html/native/network/nfc_tutorial_n.htm" label="NFC"></topic>
-		<topic href="html/native/network/smartcard_tutorial_n.htm" label="SmartCard"></topic>		
+		<topic href="html/native/network/smartcard_tutorial_n.htm" label="Smartcard"></topic>		
 		<topic href="html/native/network/wifi_tutorial_n.htm" label="Wi-Fi"></topic>
 		<topic href="html/native/network/wifi_direct_tutorial_n.htm" label="Wi-Fi Direct"></topic>	
 	</topic>
@@ -229,10 +235,9 @@
 		<topic href="html/native/security/privilege_tutorial_n.htm" label="Privilege Info"></topic>
 	</topic>
 	<topic href="html/native/social/social_tutorials_n.htm" label="Social">
-		<topic href="html/native/social/service_adaptor_tutorial_n.htm" label="Service Adaptor"></topic>
-		<topic href="html/native/social/account_tutorial_n.htm" label="Account Manager"></topic>
-		<topic href="html/native/social/calendar_tutorial_n.htm" label="Calendar"></topic>
 		<topic href="html/native/social/contact_tutorial_n.htm" label="Contacts"></topic>
+		<topic href="html/native/social/calendar_tutorial_n.htm" label="Calendar"></topic>
+		<topic href="html/native/social/service_adaptor_tutorial_n.htm" label="Service Adaptor"></topic>
 	</topic>	
 	<topic href="html/native/system/system_tutorials_n.htm" label="System">
 		<topic href="html/native/system/device_tutorial_n.htm" label="Device"></topic>
@@ -251,6 +256,7 @@
 	</topic>
 	<topic href="html/native/ui/ui_tutorials_n.htm" label="UI Framework">
 		<topic href="html/native/ui/eom_tutorial_n.htm" label="External Output Manager"></topic>
+		<topic href="html/native/ui/minicontrol_tutorial_n.htm" label="Minicontrol"></topic>
 	</topic>
 	<topic href="html/native/uix/uix_tutorials_n.htm" label="UIX">
 		<topic href="html/native/uix/tts_tutorial_n.htm" label="TTS"></topic>
diff --git a/org.tizen.ui.guides/.project b/org.tizen.ui.guides/.project
deleted file mode 100755
index 2c22bce..0000000
--- a/org.tizen.ui.guides/.project
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-	<name>org.tizen.ui.guides_2.4.0</name>
-	<comment></comment>
-	<projects>
-	</projects>
-	<buildSpec>
-		<buildCommand>
-			<name>org.eclipse.pde.ManifestBuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-		<buildCommand>
-			<name>org.eclipse.pde.SchemaBuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-	</buildSpec>
-	<natures>
-		<nature>org.eclipse.pde.PluginNature</nature>
-	</natures>
-</projectDescription>
diff --git a/org.tizen.ui.guides/META-INF/MANIFEST.MF b/org.tizen.ui.guides/META-INF/MANIFEST.MF
deleted file mode 100755
index 3ef5790..0000000
--- a/org.tizen.ui.guides/META-INF/MANIFEST.MF
+++ /dev/null
@@ -1,7 +0,0 @@
-Manifest-Version: 1.0
-Bundle-ManifestVersion: 1
-Bundle-Name: Tizen UI Guides
-Bundle-SymbolicName: org.tizen.ui.guides;singleton=true
-Bundle-Version: 2.4.0
-Bundle-Vendor: The Linux Foundation
-
diff --git a/org.tizen.ui.guides/build.properties b/org.tizen.ui.guides/build.properties
deleted file mode 100755
index 264c2a1..0000000
--- a/org.tizen.ui.guides/build.properties
+++ /dev/null
@@ -1,8 +0,0 @@
-bin.includes = plugin.xml,\
-               META-INF/,\
-               html/,\
-               build.properties,\
-               .project,\
-			   about.html,\
-               index.xml
-
diff --git a/org.tizen.ui.guides/html/cover_page.htm b/org.tizen.ui.guides/html/cover_page.htm
deleted file mode 100755
index 1d59870..0000000
--- a/org.tizen.ui.guides/html/cover_page.htm
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="css/snippet.css" />
-	<script type="text/javascript" src="scripts/snippet.js"></script>	
-	<script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
-
-	<title>Tizen UI Guides</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
-<font size="11">UI Guides</font></h1>
-
-<p>Click the application type you want:</p>
-<p><a href="web/guides_w.htm"><img alt="Web Application" src="images/w_division.png"/></a> <a href="native/guides_n.htm"><img alt="Native Application" src="images/n_division.png"/></a></p> 
-
-   
-<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="scripts/showhide.js"></script>
-
-<div 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>
-
diff --git a/org.tizen.ui.guides/html/css/snippet.css b/org.tizen.ui.guides/html/css/snippet.css
deleted file mode 100755
index 2be1b1f..0000000
--- a/org.tizen.ui.guides/html/css/snippet.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/* Pretty printing styles. Used with prettify.js. */
-
-/* SPAN elements with the classes below are added by prettyprint. */
-.pln { color: #000 }  /* plain text */
-
-@media screen {
-  .str { color: #793AFF }  /* string content */
-  .kwd { color: #7F0055 }  /* a keyword */
-  .com { color: green}  /* a comment */
-  .typ { color: #1C1C1C }  /* a type name */
-  .lit { color: black }  /* a literal value */
-  /* punctuation, lisp open bracket, lisp close bracket */
-  .pun, .opn, .clo { color: #1C1C1C}
-  .tag { color: #008 }  /* a markup tag name */
-  .atn { color: #606 }  /* a markup attribute name */
-  .atv { color: #080 }  /* a markup attribute value */
-  .dec, .var { color: #606 }  /* a declaration; a variable name */
-  .fun { color: red }  /* a function name */
-}
-
-/* Use higher contrast and text-weight for printable form. */
-@media print, projection {
-  .str { color: #060 }
-  .kwd { color: #006; font-weight: bold }
-  .com { color: #600; font-style: italic }
-  .typ { color: #404; font-weight: bold }
-  .lit { color: #044 }
-  .pun, .opn, .clo { color: #440 }
-  .tag { color: #006; font-weight: bold }
-  .atn { color: #404 }
-  .atv { color: #060 }
-}
-
-/* Put a border around prettyprinted code snippets. */
-pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
-li.L0,
-li.L1,
-li.L2,
-li.L3,
-li.L5,
-li.L6,
-li.L7,
-li.L8 { list-style-type: none }
-/* Alternate shading for lines */
-li.L1,
-li.L3,
-li.L5,
-li.L7,
-li.L9 { background: #eee }
diff --git a/org.tizen.ui.guides/html/css/styles.css b/org.tizen.ui.guides/html/css/styles.css
deleted file mode 100755
index ad7ebcb..0000000
--- a/org.tizen.ui.guides/html/css/styles.css
+++ /dev/null
@@ -1,756 +0,0 @@
-@charset "utf-8";
-
-body {
-	background: white;
-	color: #1C1C1C;
-	margin-right: 20px;
-	margin-left: 20px;
-	font-size: 9pt;
-	font-weight: normal;
-	font-family: Arial, Helvetica, sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
-	font-family: Arial, Verdana, Helvetica, sans-serif
-	}
-
-/* 	Set default font to 9 pt	*/
-table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
-	font-size: 9pt;
-}
-	
-pre, code { 
-	font-family: "Courier New", Courier, monospace;
-	border: 1px solid #719cc7;
-	margin: 6px 1.5px;
-	padding: 1px 1px 1px 1px;
-	font-weight: normal;
-	font-style: normal;
-}
-
-h1 {font-size: 24pt; color: #0E437D;}
-h2 {font-size: 18pt; color: #0E437D;}
-h3 {font-size: 14pt; color: #1C1C1C;}
-h4 {font-size: 12pt; color: #1C1C1C;}
-h5 {font-size: 10pt; color: #1C1C1C;}
-	
-h1, h2, h3, h4, h5 {
-	font-weight: bold;
-	font-style: normal; 
-	line-height: normal; 
-	margin-top: 16pt;
-}
-
-caption, p.caption { 
-	font-size: 9pt;
-	color: #1C1C1C;
-	font-weight: bold;
-	text-align: left;
-	margin-top: 20px;
-	margin-bottom: 0px;
-}
-
-ol  {
-	margin-bottom: 20px;
-}
-
-ul ul , ol ul, ul ol, ol ol{
-	margin-top: 10px;
-}
-
-ul li, ol li {
-	margin-bottom: 10px;
-}
-
-ol.tutorstep li {
-	border-top: 2px solid #719cc7;
-	list-style-position: inside;
-	font-weight: bold;
-	margin-top: 30px;
-	margin-left: -20px;
-	padding-top: 3px;
-	font-size: 12pt;
-}
-
-ol.tutorstep li p{
-	font-size: 9pt;
-	font-weight: normal;
-	margin-top: 10px;
-}
-
-ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
-	font-size: 9pt;
-	list-style-position: outside; 
-	margin-left: 0px;
-	font-weight: normal;
-}
-
-ol.tutorstep ol li p, ol.tutorstep ul li p {
-	font-size: 9pt;
-	font-weight: normal; 
-	margin-top: 5px;
-}
-
-ol li p, ul li p {
-	font-size: 9pt;
-	font-weight: normal;
-	margin-bottom: 2px;
-	margin-top: 2px;
-}
-
-ol ol , ol.tutorstep ol{
-	font-size: 9pt;
-	font-weight: normal;
-	list-style-type: lower-alpha;
-	color: #1C1C1C;	
-	border-style: none;
-	margin-top: 10px; 
-}
-
-ol.tutorstep ul {
-	margin-top: 10px;
-	font-size: 9pt;
-}
-
-ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
-	border-style: none;
-	margin-top: 5px;
-	font-size: 9pt;
-}
-
-ul {
-	font-size: 9pt;
-	font-weight: normal;
-	color: #1C1C1C;
-}
-
-
-/*	End of font face declarations	*/
-
-/*	Set table borders and heading row background	*/
-table {
-	border: 0px;
-	border-collapse: collapse;
-	width: 100%;
-	margin-top: 20px;
-	margin-bottom: 20px;
-	background: white;
-}
-
-th {
-	border-top: 2px solid #719cc7;
-	border-right: 1px solid #c6d9f1;
-	border-left: 1px solid #c6d9f1;
-	background-color: #f3f7fb;
-	padding: 4px;
-	color: #719cc7;
-	font-size: 9pt;
-	font-weight: bold;
-}	
-	
-td {
-	border: 1px solid #c6d9f1;
-	vertical-align:top;
-	padding: 3px 20px 5px 20px;
-	}
-
-td.middle {
-	border: 1px solid #c6d9f1;
-	vertical-align:middle;
-	padding: 3px 20px 5px 20px;
-	}	
-	
-/*	Notes stand out using a light top & bottom borders with yellow background	*/
-table.note {
-	border-top: 2px solid #719cc7;
-	border-left: 0px;
-	border-right: 0px;
-	width: 100%;
-}
-
-tr.note {
-	text-align: left;
-}
-
-th.note {
-	text-align: left;
-	background-color: #ddd9c3;
-	background-image: note.gif;
-	border-top: 2px solid #719cc7;
-	border-bottom:1px solid #719cc7;
-	border-right: none;
-
-}
-
-td.note, p.note {
-	background-color: #eeece1;
-	color: #1C1C1C;
-	padding: 5px;
-	margin-top:12px;
-	margin-bottom:12px;
-	border: none;
-}
-	
-/*	Figure titles are centered and bolded	*/
-p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
-	text-align: center;
-	font-weight: bold;
-}
-
-/*	Red background and white text for things that need fixing before release	*/
-.fix	{
-	background-color: red;
-	font-weight: bold;
-	color: white;
-	}
-
-/* Classes for creating collapsible content */
-#banner {
-	padding: 8px 4px 8px 4px;
-	/* top right bottom left */
-	border: 1px solid #7f7f7f;
-	width: 100%;
-	background-image: url("banner.png");
-	text-align: left;
-	font-weight: bold;
-	font-size: 9pt;
-	color: #ffffff;
-}
-
-#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
-#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
-#main {width: 75%; height: 90%;}
-#container {width:100%;}
-#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
-body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #toc-navigation {width: auto;}
-body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
-body.no-toc #profile {float: right;right: -32px;}
-body.no-toc #profile p {padding: 0; margin: 0;}
-#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
-	#container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
-	#container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
-
-.devicespecs-util {float:right; margin-top:25px;}
-	.devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
-	.devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-	.devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
-	.devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
-	.devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
-	.devicespecs-util ul.dutil li a:hover { color:#222; }
-	.devicespecs-util ul.dutil li a:active { color:#222; }
-
-ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
-ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
-ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
-ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
-	ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
-
-	ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
-	ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-	ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-
-	ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
-	ul.devicespecifications li div.devicespec-tit > span a.bt-arr 	{display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
-	ul.devicespecifications li div.devicespec-tit > span a.bt-arr em 	{display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
-	ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
-
-	ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
-	ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
-
-.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
-.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
-.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
-.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
-
-.static-cont {width:100%; margin-bottom:40px;}
-	
-.top {text-align: right;}
-.toc, ul.toc{
-	margin: 10px 0px 0px 0px;
-	padding-left: 13px;
-	list-style: disc;
-	font-size: 9pt;
-	line-height: 115%; 
-	}
-	
-.toc-title {
-	font-size: 12pt;
-	color: #0E437D;	
-	font-weight: bold;
-	font-style: normal; 
-	line-height: normal; 
-	margin-top: 16pt;
-}
-	
-a.top {
-	display:block; 
-	float: right; 
-	position:fixed;
-	width: 28px; 
-	height:89px; 
-	bottom:50px;
-	z-index: 101;
-	right: 19%;
-	}
-
-a img {border: 0;}
-	
-/*	Footer includes space and a gray line above		*/
-#footer {
-	position: fixed;
-	/* width: 100%; */
-    bottom: 0px;
-	text-align: center;
-	border-top: 1px solid #CCCCCC;
-	background-color: #FFFFFF;	
-	left: 21px;  right: 21px;
-}
-
-.footer {font-size: 8pt;}
-	
-caption { 
-	font-size: 9pt;
-	color: #1C1C1C;
-	font-weight: bold;
-	text-align: center;
-	margin-top: 20px;
-	margin-bottom: 0px;
-}
-
-div.qindex, div.navpath, div.navtab{
-	background-color: #e8eef2;
-	border: 1px solid #84b0c7;
-	text-align: center;
-	margin: 2px;
-	padding: 2px;
-}
-
-div.qindex, div.navpath {
-	width: 100%;
-	line-height: 140%;
-}
-
-div.navtab {
-	margin-right: 15px;
-}
-
-/* @group Link Styling */
-
-a:link {
-	color: #719cc7;
-	text-decoration: underline;
-	font-weight: bold;
-}
-
-a:hover { 
-	color: #0e437d;
-}
-
-a:visited {
-	text-decoration: underline;
-	color: #719cc7;
-	font-weight: bold;
-}
-
-a.qindex {
-       font-weight: bold;
-       padding: 2px;
-}
-
-a.qindex:hover {
-	text-decoration: underline;
-	color: #0e437d;
-	padding: 2px;
-}
-
-a.qindex:visited {
-       text-decoration: underline;
-       font-weight: bold;
-       color: #719cc7;
-       padding: 2px;
-}
-
-a.qindexHL {
-	text-decoration: underline;
-	font-weight: bold;
-	background-color: #6666cc;
-	color: #ffffff;
-	padding: 2px 6px;
-	border: 1px double #9295C2;
-}
-
-a.qindexHL:hover {
-	text-decoration: none;
-	background-color: #6666cc;
-	color: #ffffff;
-	padding: 2px 6px;
-}
-
-dl.el { 
-	margin-left: -1cm 
-}
-
-.fragment {
-	font-family: monospace, fixed;
-	font-size: 105%;
-}
-
-pre.fragment {
-	border: 1px solid #CCCCCC;
-	background-color: #f5f5f5;
-	padding: 4px 6px;
-	margin: 4px 8px 4px 2px;
-}
-
-div.fragment {
-	border: 1px solid #CCCCCC;
-	background-color: #f5f5f5;
-	padding: 6px;
-}
-
-div.ah { 
-	background-color: black; 
-	font-weight: bold; 
-	color: #ffffff; 
-	margin-bottom: 3px; 
-	margin-top: 3px 
-}
-
-td.md { 
-	background-color: #f5f5f5; 
-	font-weight: bold; 
-}
-
-td.mdname1 { 
-	background-color: #f5f5f5; 
-	font-weight: bold; 
-	color: #602020; 
-}
-
-td.mdname { 
-	background-color: #f5f5f5; 
-	font-weight: bold; 
-	color: #602020; 
-	width: 600px; 
-}
-
-div.groupHeader {
-	margin-left: 16px;
-	margin-top: 12px;
-	margin-bottom: 6px;
-	font-weight: bold;
-}
-
-div.groupText { 
-	margin-left: 16px; 
-	font-style: italic; 
-}
-
-td.indexkey {
-	background-color: #eeeeff;
-	font-weight: bold;
-	border: 1px solid #CCCCCC;
-	margin: 2px 0px 2px 0;
-	padding: 2px 10px;
-}
-
-td.indexvalue {
-	background-color: #eeeeff;
-	border: 1px solid #CCCCCC;
-	padding: 2px 10px;
-	margin: 2px 0px;
-}
-
-tr.memlist {
-   background-color: #f0f0f0; 
-}
-
-p.formulaDsp { 
-	text-align: center; 
-}
-
-img.formulaDsp { 
-}
-
-img.formulaInl { 
-	vertical-align: middle; 
-}
-
-/* @group Code Colorization */
-
-span.keyword       { color: #008000 }
-span.keywordtype   { color: #604020 }
-span.keywordflow   { color: #e08000 }
-span.comment       { color: #800000 }
-span.preprocessor  { color: #806020 }
-span.stringliteral { color: #002080 }
-span.charliteral   { color: #008080 }
-span.vhdldigit     { color: #ff00ff }
-span.vhdlchar      { color: #000000 }
-span.vhdlkeyword   { color: #700070 }
-span.vhdllogic     { color: #ff0000 }
-
-.mdTable {
-	border: 1px solid #868686;
-	background-color: #F4F4FB;
-}
-
-.mdRow {
-	padding: 8px 10px;
-}
-
-/* @group Member Descriptions */
-
-.mdescLeft, .mdescRight,
-.memItemLeft, .memItemRight,
-.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-	background-color: #F4F4F4A;
-	border: none;
-	margin: 4px;
-	padding: 3px 8px 4px 8px;
-}
-
-.mdescLeft, .mdescRight {
-	padding: 0px 8px 4px 8px;
-	color: #555;
-}
-
-.memItemLeft, .memItemRight, .memTemplParams {
-	border-top: 1px solid #DBDBDB;
-}
-
-.memTemplParams {
-	color: #606060;
-}
-
-/* @end */
-
-/* @group Member Details */
-
-/* Styles for detailed member documentation */
-
-.memtemplate {
-	font-size: 80%;
-	color: #606060;
-	font-weight: normal;
-	margin-left: 3px;
-}
-
-.memnav {
-	background-color: #eeeeff;
-	border: 1px solid #84b0c7;
-	text-align: center;
-	margin: 2px;
-	margin-right: 15px;
-	padding: 2px;
-}
-
-.memitem {
-	padding: 0;
-}
-
-.memname {
-	white-space: nowrap;
-	font-weight: bold;
-}
-
-.memproto, .memdoc {
-	border: 1px solid #9BBCDD;	
-}
-
-.memproto {
-	padding: 0;
-	background-color: #D5E2EF;
-	font-weight: bold;
-	-webkit-border-top-left-radius: 8px;
-	-webkit-border-top-right-radius: 8px;
-	-moz-border-radius-topleft: 8px;
-	-moz-border-radius-topright: 8px;
-}
-
-.memdoc {
-	padding: 2px 5px;
-	background-color: #eef3f5;
-	border-top-width: 0;
-	-webkit-border-bottom-left-radius: 8px;
-	-webkit-border-bottom-right-radius: 8px;
-	-moz-border-radius-bottomleft: 8px;
-	-moz-border-radius-bottomright: 8px;
-}
-
-.memdoc p, .memdoc dl, .memdoc ul {
-	margin: 6px 0;
-}
-
-.paramkey {
-	text-align: right;
-}
-
-.paramtype {
-	white-space: nowrap;
-}
-
-.paramname {
-	color: #853E0E;
-	white-space: nowrap;
-}
-.paramname em {
-	font-style: normal;
-}
-
-/* @end */
-
-.search     { color: #003399;
-              font-weight: bold;
-}
-
-form.search {
-              margin-bottom: 0px;
-              margin-top: 0px;
-}
-
-input.search { font-size: 75%;
-               color: #000080;
-               font-weight: normal;
-               background-color: #eeeeff;
-}
-
-td.tiny { 
-	font-size: 75%;
-}
-
-.highlight {
-        background-color:#E2E2FF;
-}
-
-/*---------- ide-eclipse Styles ---------*/
-.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
-	margin: 0px 0px;
-	padding: -30px -30px -30px -30px;
-	font-weight: normal;
-	font-style: normal;}
-.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
-/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
-.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
-
-.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
-
-/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
-.sh_styleFromXML{color:#800000;font-weight:bold;}
-/*-------------------------------------------------------*/
-
-/*-------- Snippet Base Styles ----------*/
-.snippet-wrap {position:relative;}
-*:first-child+html .snippet-wrap {display:inline-block;}
-* html .snippet-wrap {display:inline-block;}
-.snippet-reveal{text-decoration:underline;}
-.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
-.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
-*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
-* html .snippet-wrap .snippet-hide {bottom:1px;}
-.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
-.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
-.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
--moz-border-radius:0px;
--webkit-border-radius:0px;
-border-radius:0px;
-box-shadow: 1px 1px px #000;
--moz-box-shadow: 2px 2px 1px #000;
--webkit-box-shadow: 1px 1px 1px #000;}
-.snippet-wrap pre.snippet-textonly {padding:1em;}
-*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
-* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
-.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
-.snippet-wrap .snippet-num li{padding-left:2px;}
-.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
-.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
-.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
-.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
-.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
-.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
-*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
-.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
-.snippet-wrap li.box-mid {border-width:0 0px !important;}
-.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
-*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
-* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
-.snippet-wrap .snippet-no-num li.box {border:1px solid;}
-.snippet-wrap .snippet-no-num li .box-sp {display:none;}
-
-/* Layout fixing */
-.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-.clfix {display: inline-block;}
-.clfix {display: block;}
-* html .clfix {height: 1%;} /* Hides from IE-mac */
-.clfix {zoom:1;} /*for IE 5.5-7*/
-
-.fl {float:left !important;}
-.fr {float:right !important;}
-.cl {clear:both;}
-.rel {position:relative;}
-.abs {position:absolute;}
-.ac {text-align:center !important;}
-.ar {text-align:right !important;}
-.al {text-align:left !important;}
-.at {vertical-align:top !important;}
-.am {vertical-align:middle !important;}
-.ab {vertical-align:bottom;}
-.hand {cursor:pointer;}
-.bgnone {background:none !important;}
-.brnone {border:none !important;}
-.b {font-weight:bold !important;}
-.n {font-weight:normal !important;}
-.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
-.mt5 {margin-top:5px !important;} 
-/* //Layout fixing */
-
-@media print { .hide, .show { display: none; }}
-
-div#profile {
-    position: relative;
-}
-#profile p {
-	text-align: right;
-}
-
-div#toc_border {
-    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
-}
-
-#contents li {
-	padding-top: 3px;
-	margin-top: 5px;
-	/* overflow: auto; */
-}
-
-p {
-	/* overflow: auto; */
-}
-
-div.table {
-	/* overflow: auto; */
-}
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/images/after_resize.png b/org.tizen.ui.guides/html/images/after_resize.png
deleted file mode 100755
index e045c5e..0000000
Binary files a/org.tizen.ui.guides/html/images/after_resize.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/before_resize.png b/org.tizen.ui.guides/html/images/before_resize.png
deleted file mode 100755
index 476210f..0000000
Binary files a/org.tizen.ui.guides/html/images/before_resize.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/dali_threads.png b/org.tizen.ui.guides/html/images/dali_threads.png
deleted file mode 100644
index 997d238..0000000
Binary files a/org.tizen.ui.guides/html/images/dali_threads.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/mn_division.png b/org.tizen.ui.guides/html/images/mn_division.png
deleted file mode 100755
index 1f7e337..0000000
Binary files a/org.tizen.ui.guides/html/images/mn_division.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/mw_division.png b/org.tizen.ui.guides/html/images/mw_division.png
deleted file mode 100755
index 8fc3efa..0000000
Binary files a/org.tizen.ui.guides/html/images/mw_division.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/n_division.png b/org.tizen.ui.guides/html/images/n_division.png
deleted file mode 100755
index d687bc5..0000000
Binary files a/org.tizen.ui.guides/html/images/n_division.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/round_footer.png b/org.tizen.ui.guides/html/images/round_footer.png
deleted file mode 100644
index 6b677ec..0000000
Binary files a/org.tizen.ui.guides/html/images/round_footer.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/round_moreoption.png b/org.tizen.ui.guides/html/images/round_moreoption.png
deleted file mode 100644
index fe755d1..0000000
Binary files a/org.tizen.ui.guides/html/images/round_moreoption.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/round_multibtn.png b/org.tizen.ui.guides/html/images/round_multibtn.png
deleted file mode 100644
index d8dcd9d..0000000
Binary files a/org.tizen.ui.guides/html/images/round_multibtn.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/round_processing.png b/org.tizen.ui.guides/html/images/round_processing.png
deleted file mode 100644
index 030ef40..0000000
Binary files a/org.tizen.ui.guides/html/images/round_processing.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/tizen_project_dali.png b/org.tizen.ui.guides/html/images/tizen_project_dali.png
deleted file mode 100644
index 3be4125..0000000
Binary files a/org.tizen.ui.guides/html/images/tizen_project_dali.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/w_division.png b/org.tizen.ui.guides/html/images/w_division.png
deleted file mode 100755
index 88d9959..0000000
Binary files a/org.tizen.ui.guides/html/images/w_division.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/wn_division.png b/org.tizen.ui.guides/html/images/wn_division.png
deleted file mode 100755
index 11a7876..0000000
Binary files a/org.tizen.ui.guides/html/images/wn_division.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/images/ww_division.png b/org.tizen.ui.guides/html/images/ww_division.png
deleted file mode 100755
index 65e7ab7..0000000
Binary files a/org.tizen.ui.guides/html/images/ww_division.png and /dev/null differ
diff --git a/org.tizen.ui.guides/html/index.htm b/org.tizen.ui.guides/html/index.htm
deleted file mode 100755
index 99c8125..0000000
--- a/org.tizen.ui.guides/html/index.htm
+++ /dev/null
@@ -1,256 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="css/snippet.css" />
-    <script type="text/javascript" src="scripts/snippet.js"></script>
-    <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
-
-    <title>UI Guides</title>
-</head>
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1><a href="cover_page.htm">UI Guides</a></h1>
-
-<h2><a href="web/guides_w.htm">Web Application</a></h2>
-	<ul>
-		<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/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 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/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>
-				<li><a href="web/tau/globalization_w.htm">Globalization</a></li>
-			</ul>
-		</li>
-		<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>
-				<li><a href="web/w3c/color_w.htm">CSS Color Module Level 3</a></li>
-				<li><a href="web/w3c/background_w.htm">CSS Backgrounds and Borders Module Level 3</a></li>
-				<li><a href="web/w3c/flexible_w.htm">CSS Flexible Box Layout Module</a></li>
-				<li><a href="web/w3c/multi_mw.htm">CSS Multi-column Layout Module</a></li>
-				<li><a href="web/w3c/text_module_w.htm">CSS Text Module Level 3</a></li>
-				<li><a href="web/w3c/basic_ui_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI)</a></li>
-				<li><a href="web/w3c/font_w.htm">CSS Fonts Module Level 3</a></li>		
-				<li><a href="web/w3c/woff_w.htm">WOFF File Format 1.0</a></li>	
-			</ul>
-		</li>		
-	</ul>
-
-<h2><a href="native/guides_n.htm">Native Application</a></h2>
-	<ul>
-		<li><a href="native/efl/guides_efl_n.htm">EFL</a>
-			<ul>		
-				<li><a href="native/efl/efl_overview_n.htm">EFL Overview</a></li>
-				<li><a href="native/efl/ui_components_n.htm">UI Components</a>
-					<ul>
-						<li><a href="native/efl/ui_components_mn.htm">Mobile UI Components</a>
-						<ul>
-							<li><a href="native/efl/components_mn.htm">Using Mobile UI Components</a></li>
-							<li><a href="native/efl/basic_tutorial_mn.htm">Creating Basic Mobile Interactions</a></li>
-							<li><a href="native/efl/genlist_tutorial_mn.htm">Creating Mobile Genlists</a></li>
-							<li><a href="native/efl/menu_tutorial_mn.htm">Creating Mobile Menus</a></li>
-						</ul>
-						</li>
-						<li><a href="native/efl/ui_components_wn.htm">Wearable UI Components</a>
-						<ul>
-							<li><a href="native/efl/components_wn.htm">Using Wearable UI Components</a></li>
-							<li><a href="native/efl/button_tutorial_wn.htm">Creating Wearable Buttons</a></li>
-							<li><a href="native/efl/datetime_tutorial_wn.htm">Creating Wearable Datetimes</a></li>
-							<li><a href="native/efl/genlist_tutorial_wn.htm">Creating Wearable Genlists</a></li>
-							<li><a href="native/efl/popup_tutorial_wn.htm">Creating Wearable Popups</a></li>
-							<li><a href="native/efl/circle_components_wn.htm">Creating Wearable Circle Components</a></li>
-						</ul>
-						</li>
-					</ul>				
-				</li>
-				<li><a href="native/efl/component_infra_n.htm">UI Component Infrastructure Modules</a>
-					<ul>
-						<li><a href="native/efl/component_focus_n.htm">Managing Component Focus</a></li>
-						<li><a href="native/efl/component_custom_n.htm">Customizing Components</a></li>
-						<li><a href="native/efl/touch_gesture_n.htm">Handling Component Touch Gestures</a></li>
-					</ul>				
-				</li>
-				<li><a href="native/efl/ui_containers_n.htm">UI Containers</a>
-					<ul>
-						<li><a href="native/efl/containers_n.htm">Using Container UI Components</a></li>
-						<li><a href="native/efl/form_tutorial_n.htm">Creating a Form for a Basic Application Layout</a></li>
-						<li><a href="native/efl/naviframe_tutorial_n.htm">Creating a Naviframe for Navigation</a></li>
-						<li><a href="native/efl/layout_tutorial_n.htm">Creating UI Screen Layouts</a></li>
-						<li><a href="native/efl/panes_tutorial_mn.htm">Creating Panes</a></li>
-					</ul>				
-				</li>
-				<li><a href="native/efl/theme_n.htm">Themes</a>
-					<ul>
-						<li><a href="native/efl/edje_intro_n.htm">Introduction to EDC Programming</a></li>
-						<li><a href="native/efl/edc_positioning_n.htm">Positioning Parts with the EDC File</a></li>
-						<li><a href="native/efl/edc_part_block_n.htm">EDJE Data Collection Reference</a></li>
-						<li><a href="native/efl/edc_optimization_n.htm">Optimizing EDC</a></li>
-					</ul>				
-				</li>
-				<li><a href="native/efl/edje_objects_n.htm">Edje Objects</a>
-					<ul>
-						<li><a href="native/efl/edje_files_n.htm">Handling Edje Files</a></li>
-						<li><a href="native/efl/edje_scaling_n.htm">Scaling Edje Objects</a></li>
-						<li><a href="native/efl/edje_color_n.htm">Using Edje Color Classes</a></li>
-						<li><a href="native/efl/edje_text_n.htm">Using Edje Text Classes</a></li>
-						<li><a href="native/efl/edje_perspective_n.htm">Using Edje Perspective</a></li>
-						<li><a href="native/efl/edje_message_signal_n.htm">Managing Signals and Messages</a></li>
-						<li><a href="native/efl/edje_manage_animation_n.htm">Managing Edje Animations</a></li>
-					</ul>				
-				</li>
-				<li><a href="native/efl/font_setting_n.htm">Fonts</a></li>
-				<li><a href="native/efl/ui_scalability_n.htm">Scaling</a>
-					<ul>
-						<li><a href="native/efl/multiple_screens_n.htm">Multiple Screen Support</a></li>
-						<li><a href="native/efl/scalability_n.htm">Scalability Support</a></li>
-					</ul>				
-				</li>
-				<li><a href="native/efl/notification_window_n.htm">Notification Windows</a></li>
-				<li><a href="native/efl/core_loop_n.htm">Core Loop and OS Interfacing</a>
-					<ul>
-						<li><a href="native/efl/main_loop_n.htm">Handling the Main Loop</a></li>
-						<li><a href="native/efl/threads_n.htm">Using Threads</a></li>
-					</ul>				
-				</li>
-				<li><a href="native/efl/graphical_objects_n.htm">Graphical Objects</a>
-					<ul>
-						<li><a href="native/efl/evas_objects_n.htm">Evas Objects</a></li>
-						<li><a href="native/efl/evas_rendering_n.htm">Evas Rendering Concept and Method</a></li>
-						<li><a href="native/efl/evas_basic_objects_n.htm">Basic Manipulation of Evas Objects</a></li>
-						<li><a href="native/efl/evas_advanced_objects_n.htm">Advanced Manipulation of Evas Objects</a></li>
-						<li><a href="native/efl/evas_optimization_n.htm">Optimizing Evas</a></li>
-					</ul>				
-				</li>
-				<li><a href="native/efl/event_handling_n.htm">Event Handling</a>
-					<ul>
-						<li><a href="native/efl/event_types_n.htm">Event Types</a></li>
-						<li><a href="native/efl/multipoint_touch_n.htm">Tracking Multi-point Touch Events</a></li>
-					</ul>				
-				</li>
-				<li><a href="native/efl/animation_effects_n.htm">Animations and Effects</a>
-					<ul>
-						<li><a href="native/efl/ecore_animation_n.htm">Ecore Animations</a></li>
-						<li><a href="native/efl/ecore_animation_tutorial_n.htm">Creating Ecore Animations</a></li>
-						<li><a href="native/efl/edje_animation_n.htm">Edje Animations</a></li>
-						<li><a href="native/efl/edje_animation_tutorial_n.htm">Creating Edje Animations</a></li>
-						<li><a href="native/efl/elementary_animation_n.htm">Elementary Animations</a></li>
-						<li><a href="native/efl/elementary_animation_tutorial_n.htm">Creating Elementary Animations</a></li>
-						<li><a href="native/efl/elementary_transit_effect_tutorial_n.htm">Creating Elementary Transit Effects</a></li>
-						<li><a href="native/efl/evas_map_animation_n.htm">Evas Map Effects</a></li>
-						<li><a href="native/efl/evas_map_effects_n.htm">Creating Evas Map Effects</a></li>
-					</ul>				
-				</li>				
-				<li><a href="native/efl/data_types_tools_n.htm">Data Types and Tools</a>
-					<ul>
-						<li><a href="native/efl/data_types_n.htm">Data Types</a></li>
-						<li><a href="native/efl/tools_n.htm">Tools</a></li>
-					</ul>				
-				</li>	
-				<li><a href="native/efl/hw_input_n.htm">Hardware Input Handling: Managing Hardware Events with EFL Extension</a>
-					<ul>
-						<li><a href="native/efl/key_events_n.htm">Managing Menu and Back Key Events</a></li>
-						<li><a href="native/efl/rotary_events_n.htm">Managing Rotary Events</a></li>
-					</ul>				
-				</li>				
-			</ul>
-		</li>
-		<li><a href="native/dali/guides_dali_n.htm">DALi</a>
-			<ul>
-				<li><a href="native/dali/dali_overview_n.htm">DALi Overview</a></li>
-				<li><a href="native/dali/actors_n.htm">Actors</a></li>
-					<ul>
-						<li><a href="native/dali/layout_n.htm">Layout Management</a></li>
-					</ul>
-				<li><a href="native/dali/event_handling_n.htm">Event Handling</a></li>
-				<li><a href="native/dali/ui_components_n.htm">UI Components</a>
-					<ul>
-						<li><a href="native/dali/buttons_n.htm">Buttons</a></li>
-						<li><a href="native/dali/itemview_n.htm">ItemView</a></li>
-						<li><a href="native/dali/scrollview_n.htm">ScrollView</a></li>
-						<li><a href="native/dali/tableview_n.htm">TableView</a></li>
-						<li><a href="native/dali/textfield_n.htm">TextField</a></li>
-						<li><a href="native/dali/textlabel_n.htm">TextLabel</a></li>
-						<li><a href="native/dali/imageview_n.htm">ImageView</a></li>
-						<li><a href="native/dali/control_base_n.htm">Control</a></li>
-					</ul>
-				</li>
-				<li><a href="native/dali/animation_n.htm">Animations</a>
-					<ul>
-						<li><a href="native/dali/animation_types_n.htm">Animation Types</a></li>
-						<li><a href="native/dali/constraints_n.htm">Constraints</a></li>
-					</ul>
-				</li>
-				<li><a href="native/dali/resources_n.htm">Resources</a></li>
-				<li><a href="native/dali/rendering_effects_n.htm">Rendering and Effects</a></li>
-				<li><a href="native/dali/background_n.htm">Background Knowledge</a></li>
-					<ul>
-						<li><a href="native/dali/handle_n.htm">Handle/Body Pattern</a></li>
-						<li><a href="native/dali/properties_n.htm">Properties</a></li>
-						<li><a href="native/dali/multi_threaded_n.htm">Multi-Threaded Architecture</a></li>
-					</ul>
-			</ul>
-		</li>
-	</ul>
-
-<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="scripts/showhide.js"></script>
-</div></div></div>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/dali/actors_n.htm b/org.tizen.ui.guides/html/native/dali/actors_n.htm
deleted file mode 100755
index 72d24f1..0000000
--- a/org.tizen.ui.guides/html/native/dali/actors_n.htm
+++ /dev/null
@@ -1,211 +0,0 @@
-<!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>Actors: Working with Basic DALi Components</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#types">Types of Actors</a></li>
-			<li><a href="#actors">Actors and Stage</a></li>
-			<li><a href="#position">Positioning Actors</a></li>
-			<li><a href="#event">Event Handling for Actors</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>			
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Actors: Working with Basic DALi Components</h1>
-
-
-<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>
-<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>
-
-<h2 id="types" name="types">Types of Actors</h2>
-
-<p class="figure">Figure: Types of Actors</p>  
-	<p align="center"><img alt="Types of Actors" src="../../images/actor_types.png"/></p> 
-
-Actor has several concrete types as follows:
-
-<ul>
-<li><strong>UI Components</strong> are used to organize the appearance of applications. Please see <a href="ui_components_n.htm">UI Components: Creating the Application Layout</a> for more details.</li>
-<li><strong>Camera Actor</strong> determines which view of the whole virtual 3D world is rendered in the screen. By default, it is best suited for 2D applications so you don't need to care about it in this case. Please see API reference for <span style="font-family: Courier New,Courier,monospace;">Dali::CameraActor</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1CameraActor.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1CameraActor.html">wearable</a>) for more details.</li>
-<li><strong>Layer</strong> provides a mechanism for overlaying groups of actors on top of each other. Please see API reference for <span style="font-family: Courier New,Courier,monospace;">Dali::Layer</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a>) for more details.</li>
-</ul>
-
-<h2 id="actors" name="actors">Actors and Stage</h2>
-
-<p>Stage is a top-level object that represents the entire 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, which means an actor inherits a position relative to its parent, and can be moved in relation to this point.</p>
-
-The stage instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function.
-
-<p>To display the contents of an actor, it must be added to a stage. The following example shows how to connect a new actor to the stage:</p>
-
-<pre class="prettyprint">Actor actor = Actor::New();
-Stage::GetCurrent().Add(actor);
-</pre>
-
-	
-<h2 id="position" name="position">Positioning Actors</h2>
-<p>An actor inherits its parent&#39;s position. The relative position between the actor &amp; parent is determined by the following properties:</p>
-<ul>
-<li><strong>Parent origin</strong>
-<p>This Vector3 property defines a point within the parent actor&#39;s area.</p>
-
-<p class="figure">Figure: Parent origin</p>  
-	<p align="center"><img alt="Parent origin" src="../../images/parent_origin.png"/></p> 
- 
-<p>The default is top-left (<span style="font-family: Courier New,Courier,monospace;">Dali::ParentOrigin::TOP_LEFT</span>), which can be visualized in 2D as (0, 0), but is actually Vector3 (0, 0, 0.5) in the 3D DALi world. The actor position is relative to this point.</p>
-<p>Please see API reference for <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetParentOrigin()</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a>) for more details.</p>
-</li>
-
-<li><strong>Anchor point</strong>
-<p>This Vector3 property defines a point within the child actor area.</p>
-
-<p class="figure">Figure: Anchor point</p>  
-	<p align="center"><img alt="Anchor point" src="../../images/anchor_point.png"/></p> 
- 
-<p>The default is center (<span style="font-family: Courier New,Courier,monospace;">Dali::AnchorPoint::CENTER</span>), which can be visualized in 2D as (0.5, 0.5), but is actually Vector3 (0.5, 0.5, 0.5) in the 3D DALi world. The actor position is also relative to this point.</p>
-<p>Please see API reference for <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetAnchorPoint()</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a>) for more details.</p>
-</li>
-
-<li><strong>Position</strong>
-<p>This is the position vector between the parent origin and anchor point.</p>
-
-<p class="figure">Figure: Position</p>  
-	<p align="center"><img alt="Position" src="../../images/actor_position.png"/></p> 
- 
-<p>Therefore by default, an actor&#39;s position indicates the vector to its center from the top-left corner of its parent.</p>
-
-<p>For example (with the default camera),</p>
-<ul>
-	<li>An actor added directly to the stage with position (X = stageWidth*0.5, Y = stageHeight*0.5) appears in the center of the screen.</li>
-	<li>An actor with the position (X = actorWidth*0.5, Y = actorWidth*0.5) appears at the top-left corner of the screen.</li>
-</ul>
-
-<p>Please see API reference for <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetPosition()</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a>) for more details.</p>
-
-</li>
-</ul> 
-
-<h2 id="event" name="event">Event Handling for Actors</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class provides following event signals:</p> 
-
-<table>
-   <caption>
-     Table: Event signals
-   </caption>
-   <tbody>
-    <tr>
-     <th>Event signal</th>
-     <th>Description</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>
-     <td>This signal is emitted when a touch input is received.</td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
-     <td>This signal is emitted when a hover input is received.</td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">WheelEventSignal()</span></td>
-     <td>This signal is emitted when a wheel event is received.</td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">OnStageSignal()</span></td>
-     <td>This signal is emitted after the actor has been connected to the stage.</td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">OffStageSignal()</span></td>
-     <td>This signal is emitted after the actor has been disconnected from the stage.</td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">OnRelayoutSignal()</span></td>
-     <td>This signal is emitted after the size has been set on the actor during relayout.</td>
-    </tr>
-   </tbody>
-  </table>
-
-<p>For example, a touch event can be handled as follows:</p> 
-<pre class="prettyprint">
-bool OnTouch(Actor actor, const TouchEvent&amp; touch)
-{
-&nbsp;&nbsp;&nbsp;bool handled = false;
-
-&nbsp;&nbsp;&nbsp;switch(touch.GetPointCount())
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 1: // Single touch
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (touch.GetPoint(0).GetState == TouchPoint::Down)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do action when first touches the touch screen.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handled = true;
-&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;case 2: // Multi-touch event
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return handled;&nbsp;&nbsp;&nbsp;// true if the operation was successful
-}
-
-// Elsewhere
-Actor actor = Actor::New();
-actor.TouchedSignal().Connect(&amp;OnTouch);</pre>
-
-<p>For more information, see <a href="event_handling_n.htm">Event Handling</a>.</p> 
-
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/animation_n.htm b/org.tizen.ui.guides/html/native/dali/animation_n.htm
deleted file mode 100755
index b704de8..0000000
--- a/org.tizen.ui.guides/html/native/dali/animation_n.htm
+++ /dev/null
@@ -1,177 +0,0 @@
-<!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>Animations: Making Your Actors Alive</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#basic">Creating a Basic Animation</a></li>
-			<li><a href="#properties">Animating Properties</a></li>
-			<li><a href="#playback">Playback Control</a></li>
-			<li><a href="#notifications">Notifications</a></li>
-			<li><a href="#alpha">Alpha Functions</a></li>
-			<li><a href="#other">Other Actions</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">Dali::Animation API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/###.html">Dali::AlphaFunction API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">Dali::Animation API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/###.html">Dali::AlphaFunction API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Wearable Native</a></li>			
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Animations: Making Your Actors Alive</h1>
-
-<p>Animation allows your objects to move around / change their properties for a specified duration.</p>
-
-<p>DALi provides a rich and easy to use animation framework which allows you to create visually rich applications. <span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> can be used to animate the animatable properties of any number of objects (Please see <a href="properties_n.htm#attributes">Attributes of Properties</a> for more details).</p>
-
-<p>Animation components are shown in the following figure:</p>
-
-<p class="figure">Figure: DALi animation components</p>  
-	<p align="center"><img alt="DALi animation components" src="../../images/animation_components.png"/></p> 
-
-<p>DALi animations occur in a dedicated thread. This allows animations to run smoothly, regardless of the time taken to process inputs events and other factors in the application code. Please see <a href="multi_threaded_n.htm#animations">Animations with Multi-Threading</a></p>
-
-<h2 id="basic" name="basic">Creating a Basic Animation</h2>
-
-<p>Create an animation object that takes place over 3 seconds:</p>
-<pre class="prettyprint">
-Dali::Animation animation = Animation::New(3.0f);
-</pre>
-
-<h2 id="properties" name="properties">Animating Properties</h2>
-
-<p>There are two distinct methods to animate the properties within DALi:</p>
-<ul>
-	<li><span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span>: The property animates TO the value in the given time.</li>
-	<li><span style="font-family: Courier New,Courier,monospace;">AnimateBy()</span>: The property animates BY the value in the given time.</li>
-</ul>
-
-<p>In the following example, it is assumed that <span style="font-family: Courier New,Courier,monospace;">actor1</span> and <span style="font-family: Courier New,Courier,monospace;">actor2</span> are at position 10.0f, 10.0f, 0.0f at the start of the animation.</p>
-<pre class="prettyprint">
-// Animate the position of actor1 TO 10.0f, 50.0f, 0.0f
-animation.AnimateTo(Property(actor1, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f)); 
-// End Position: 10.0f, 50.0f, 0.0f
-
-// Animate the position of actor2 BY 10.0f, 50.0f, 0.0f
-animation.AnimateBy(Property(actor2, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f)); 
-// End Position: 20.0f, 60.0f, 0.0f
-</pre>
-
-<h2 id="playback" name="playback">Playback Control</h2>
-
-<p>When an animation is created, it can be played using the <span style="font-family: Courier New,Courier,monospace;">Play()</span> method.</p>
-<pre class="prettyprint">
-animation.Play();
-</pre>
-<p>This is not a synchronous method. The <span style="font-family: Courier New,Courier,monospace;">Play()</span> method returns after sending a message. After the message is processed in a separate thread, the animation starts. Blocking the application thread does not stop the animation from playing.</p>
-<p><span style="font-family: Courier New,Courier,monospace;">Stop()</span> and <span style="font-family: Courier New,Courier,monospace;">Pause()</span> methods are also supported.</p>
-<pre class="prettyprint">
-animation.Stop();
-animation.Pause();
-</pre> 
-
-<h2 id="notifications" name="notifications">Notifications</h2>
-<p>Using DALi&#39;s signal framework applications can be notified when the animation finishes. The Dali::Animation API supports &quot;fire and forget&quot; behavior, which means that an animation continues to play if the handle is discarded. In the following example, the Finished signal is emitted after 2 seconds:</p>
-
-<pre class="prettyprint">
-  // ... Assuming this code is in the HelloWorldController class
-  void Create( Application& application )
-  {
-    PushButton actor = PushButton::New();
-    Stage::GetCurrent().Add( actor );
-
-    Animation animation = Animation::New(2.0f); // Duration 2 seconds
-    animation.AnimateTo( Property( actor, Actor::Property::POSITION ), Vector3( 100.0f, 100.0f, 0.0f ) );
-    animation.FinishedSignal().Connect( this, &HelloWorldController::OnFinished );
-    animation.Play();  // Fire the animation and forget about it
-  }  // At this point the animation handle has gone out of scope
-
-  void OnFinished( Animation& animation )
-  {
-    // Do something when the animation is finished
-  }
-  // ...
-</pre>
-
-<h2 id="alpha" name="alpha">Alpha Functions</h2>
-
-<p>Alpha functions are used in animations to specify the rate of change of the animation parameter over time. This allows the animation to be, for example, accelerated, decelerated, repeated, or bounced. The built-in supported functions can be viewed in the <span style="font-family: Courier New,Courier,monospace;">Dali::AlphaFunction::BuiltinFunction</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/###.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/###.html">wearable</a> applications).</p>
-<pre class="prettyprint">
-animation.SetDefaultAlphaFunction(Dali::AlphaFunction::EASE_IN);
-</pre>
-<p>You can also create your own alpha function:</p>
-<pre class="prettyprint">
-float MyAlphaFunction(float progress)
-{
-&nbsp;&nbsp;&nbsp;return progress;
-}
-
-AlphaFunction alphaFunction(&amp;MyAlphaFunction);
-animation.SetDefaultAlphaFunction(alphaFunction);
-</pre>
-<p>It is possible to specify a different alpha function for each animate call in an Animation object.</p>
-<pre class="prettyprint">
-animation.AnimateTo(Property(actor1, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f), Dali::AlphaFunction::EASE_IN);
-</pre>
-
-<h2 id="other" name="other">Other Actions</h2>
-
-<p>An animation can be looped:</p>
-<pre class="prettyprint">
-animation.SetLooping(true);
-</pre>
-<p>By default, when an animation ends, the properties that it was animating are baked (saved). Using the following function, the property changes can be discarded when the animation ends or is stopped:</p>
-<pre class="prettyprint">
-animation.SetEndAction(Animation::Discard);
-</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/animation_types_n.htm b/org.tizen.ui.guides/html/native/dali/animation_types_n.htm
deleted file mode 100755
index 26c7f18..0000000
--- a/org.tizen.ui.guides/html/native/dali/animation_types_n.htm
+++ /dev/null
@@ -1,135 +0,0 @@
-<!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>Animations Types: Types of Animations Supported by DALi</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#frame">Key Frame Animation</a></li>
-			<li><a href="#path">Path Animation</a></li>
-			<li><a href="#shader">Shader Effect Animation</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1KeyFrames.html">Dali::KeyFrames API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">Dali::Path API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1KeyFrames.html">Dali::KeyFrames API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Path.html">Dali::Path API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Wearable Native</a></li>			
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Animations Types: Types of Animations Supported by DALi</h1>
-
-<p>DALi supports the key frame animation, path animation, and shader effect animation.</p>
-
-<h2 id="frame" name="frame">Key Frame Animation</h2>
-
-<p>DALi provides support for animating between several different values, or key frames. A key frame takes a progress value between 0.0f and 1.0f (0 and 100% respectively) and portrays the value of the property when the animation has progressed that much. You can create several key frames:</p>
-<pre class="prettyprint">
-Dali::KeyFrames keyFrames = Dali::KeyFrames::New();
-keyFrames.Add(0.0f, Vector3(10.0f, 10.0f, 10.0f));
-keyFrames.Add(0.7f, Vector3(200.0f, 200.0f, 200.0f));
-keyFrames.Add(1.0f, Vector3(100.0f, 100.0f, 100.0f));
-</pre>
-
-<p>Next, you can add them to your animation.</p>
-<pre class="prettyprint">
-animation.AnimateBetween(Property(actor1, Dali::Actor::Property::POSITION), keyFrames);
-</pre>
-<p>When you play the animation, DALi animates the position of <span style="font-family: Courier New,Courier,monospace;">actor1</span> between the key frames specified. The <span style="font-family: Courier New,Courier,monospace;">actor1</span> animates from (10.0f, 10.0f, 10.0f) to (200.0f, 200.f, 200.0f) by 70% of the animation time, and then spends the remaining time animating back to (100.0f, 100.0f, 100.0f).</p>
-<p>The advantage of specifying a key frame at 0% is that regardless of where the <span style="font-family: Courier New,Courier,monospace;">actor1</span> is, it starts from position (10.0f, 10.0f, 10.0f). If <span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span> is used, the start position is the <span style="font-family: Courier New,Courier,monospace;">actor1</span>&#39;s current position.</p>
-
-<h2 id="path" name="path">Path Animation</h2>
-<p>The Dali::Path API can be used to animate the position and orientation of actors.</p>
-
-<p>The black points in the following figure are points where the DALi logo travels to. The red points are the control points which express the curvature of the path on the black points.</p>
-
-<p class="figure">Figure: Path animation</p>  
-	<p align="center"><img alt="Path animation" src="../../images/path_animation.png"/></p> 
-	
-<p>In the code, this is represented as follows:</p>
-<pre class="prettyprint">
-Path path = Path::New();
-path.AddPoint(Vector3(50.0f, 10.0f, 0.0f));
-path.AddPoint(Vector3(90.0f, 50.0f, 0.0f));
-path.AddPoint(Vector3(10.0f, 90.0f, 0.0f));
-</pre>
-<p>The control points can be added manually using <span style="font-family: Courier New,Courier,monospace;">Dali::Path::AddControlPoint</span>. The Path API can also auto-generate the control points for you.</p>
-<pre class="prettyprint">
-path.GenerateControlPoints(0.25f);
-</pre>
-<p>Here 0.25f represents the curvature of the path you require. For more information, see the <span style="font-family: Courier New,Courier,monospace;">GenerateControlPoints()</span> function in <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Path.html">wearable</a> applications).</p>
-<p>To animate <span style="font-family: Courier New,Courier,monospace;">actor1</span> along this path, use the following function:</p>
-<pre class="prettyprint">
-animation.Animate(actor1, path, Vector3::ZERO);
-</pre>
-<p>The third parameter is the forward vector (in a local space coordinate system) that is oriented with the path&#39;s tangent direction.</p>
-
-
-<h2 id="shader" name="shader">Shader Effect Animation</h2>
-<p>Shader effects provide a visual effect for actors. In a shader, uniforms are set according to the purpose of applications. The uniforms of a shader can be animated using the <span style="font-family: Courier New,Courier,monospace;">Animation::AnimateTo()</span> functions.</p>
-<p>For example, to animate the center point of the Bendy shader effect:</p>
-<pre class="prettyprint">
-Dali::Animation animation = Dali::Animation::New(1.0f);
-
-Vector2 newPosition(0.0f, 0.0f);
-animation.AnimateTo(Property(shaderEffect, shaderEffect.GetPositionPropertyName()), newPosition);
-</pre>
-<p>To animate a uniform of a custom shader effect, you must use the name of the uniform:</p>
-<pre class="prettyprint">
-Dali::Animation animation = Dali::Animation::New(1.0f);
-
-// Set the initial value for the uniform
-shaderEffect.SetUniform(&quot;myUniform&quot;, -0.5f);
-
-// Animate the uniform to a value
-animation.AnimateTo(Property(shaderEffect, &quot;myUniform&quot;), 0.5f);
-</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/background_n.htm b/org.tizen.ui.guides/html/native/dali/background_n.htm
deleted file mode 100755
index 7e16d5e..0000000
--- a/org.tizen.ui.guides/html/native/dali/background_n.htm
+++ /dev/null
@@ -1,70 +0,0 @@
-<!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>Background Knowledge: Using DALi More Effectively</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Background Knowledge: Using DALi More Effectively</h1>
-
-<p>This section describes useful background knowledge that enables you to use DALi more effectively.</p>
-<p>Topics covered are:</p>
-
-	<ul>
-		<li><a href="handle_n.htm">Handle/Body Pattern: Basic Way of Using DALi Objects</a></li>
-		<li><a href="properties_n.htm">Properties: Accessing to Properties of DALi Objects</a></li>
-		<li><a href="multi_threaded_n.htm">Multi-Threaded Architecture: The Secret of High-Performance of DALi</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/buttons_n.htm b/org.tizen.ui.guides/html/native/dali/buttons_n.htm
deleted file mode 100755
index 484aa88..0000000
--- a/org.tizen.ui.guides/html/native/dali/buttons_n.htm
+++ /dev/null
@@ -1,217 +0,0 @@
-<!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>Buttons: Push, Check, Select!</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#PushButton">Push Button</a></li>
-			<li><a href="#CheckBoxButton">CheckBox Button</a></li>
-			<li><a href="#RadioButton">Radio Button</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Button.html">Dali::Toolkit::Button API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1CheckBoxButton.html">Dali::Toolkit::CheckBoxButton API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1PushButton.html">Dali::Toolkit::PushButton API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1RadioButton.html">Dali::Toolkit::RadioButton API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Button.html">Dali::Toolkit::Button API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1CheckBoxButton.html">Dali::Toolkit::CheckBoxButton API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1PushButton.html">Dali::Toolkit::PushButton API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1RadioButton.html">Dali::Toolkit::RadioButton API for Wearable Native</a></li>			
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Buttons: Push, Check, Select!</h1>
-
-<p>Button is a small object on UI that you press in order to operate it. DALi provides button controls, such as <span style="font-family: Courier New,Courier,monospace;">PushButton</span> , <span style="font-family: Courier New,Courier,monospace;">CheckBoxButton</span> , and <span style="font-family: Courier New,Courier,monospace;">RadioButton</span> . The base class for button controls is <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span>. The <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> class provides the <span style="font-family: Courier New,Courier,monospace;">disabled</span> property and the <span style="font-family: Courier New,Courier,monospace;">clicked</span> signal. Basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> class are listed in the following table.</p>
-
-<table>
-   <caption>
-     Table: <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> input signals
-   </caption>
-   <tbody>
-    <tr>
-     <th>Input signal</th>
-	 <th>Description</th>
-    </tr>
-    <tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">PressedSignal()</span></td>
-		<td>Emitted when the button is pressed.
-		</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">ReleasedSignal()</span></td>
-		<td>Emitted when the button is released.
-		</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">ClickedSignal()</span></td>
-		<td>Emitted when the button is clicked.
-		</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">StateChangedSignal()</span></td>
-		<td>Emitted when the button state is changed.
-		</td>
-	</tr>
-   </tbody>
-  </table>
-
-<h2 id="PushButton" name="PushButton">Push Button</h2>
- 
-<p>The <span style="font-family: Courier New,Courier,monospace;">PushButton</span> class provides a button that can be pressed to operate it. A push button changes its appearance when is pressed and returns to its original when is released.</p>
-
-<p class="figure">Figure: Push button</p>  
-	<p align="center"><img alt="Push button" src="../../images/push_button.png"/></p> 
-
-<p>A push button emits a <span style="font-family: Courier New,Courier,monospace;">Button::PressedSignal()</span> signal when the button is pressed, a <span style="font-family: Courier New,Courier,monospace;">Button::ClickedSignal()</span> signal when clicked, and a <span style="font-family: Courier New,Courier,monospace;">Button::ReleasedSignal()</span> signal when released, or of the touch point leaves the boundary of the button. A basic push button example is as follows:</p>
-
-<pre class="prettyprint">
-class ButtonController : public ConnectionTracker
-{
-public:
-  ButtonController( Application& application ): mApplication( application )
-  {
-    mApplication.InitSignal().Connect( this, &ButtonController::Create );
-  }
-  void Create( Application& application )
-  {
-    PushButton button = PushButton::New();
-    button.SetLabel( "Select" );
-    button.SetParentOrigin( ParentOrigin::CENTER );
-    button.ClickedSignal().Connect( this, &ButtonController::OnButtonClicked );
-    Stage::GetCurrent().Add( button );
-  }
-  bool OnButtonClicked( Toolkit::Button button )
-  {
-    cout << "OnButtonClicked" << endl;
-    return true;
-  }
-private:
-  Application&  mApplication;
-};
-
-int main( int argc, char **argv )
-{
-  Application application = Application::New( &argc, &argv );
-  ButtonController test( application );
-  application.MainLoop();
-  return 0;
-}
-</pre>
-
-<h2 id="CheckBoxButton" name="CheckBoxButton">CheckBox Button</h2>
- 
-<p>The <span style="font-family: Courier New,Courier,monospace;">CheckBoxButton</span> class provides check box button which can be checked or unchecked.</p>
-
-<p class="figure">Figure: Checkbox button</p>  
-	<p align="center"><img alt="Checkbox button" src="../../images/checkbox_button.png"/></p> 
-
-<p>A checkbox button emits all of four button input sinals, but usually you can just use <span style="font-family: Courier New,Courier,monospace;">Button::StateChangedSignal()</span> signal to check the button changes its state to selected or unselected. A basic checkbox button example is as follows:</p>
-
-<pre class="prettyprint">
-// ... same as the push button example
-  void Create( Application& application )
-  {
-    CheckBoxButton button = CheckBoxButton::New();
-    button.SetLabel( "Select" );
-    button.SetSize( 100,40 );
-    button.SetBackgroundColor( Vector4( 1,0,0,1 ) );
-    button.SetParentOrigin( ParentOrigin::CENTER );
-    button.StateChangedSignal().Connect( this, &ButtonController::OnButtonStateChanged );
-    Stage::GetCurrent().Add( button );
-  }
-  bool OnButtonStateChanged( Toolkit::Button button )
-  {
-    cout << "OnButtonStateChanged " << button.IsSelected() << endl;
-    return true;
-  }
-// ... same as the push button example
-</pre>
-
-<h2 id="RadioButton" name="RadioButton">Radio Button</h2>
- 
-<p>The <span style="font-family: Courier New,Courier,monospace;">RadioButton</span> class provides a radio button with 2 states: selected and unselected.</p>
-
-<p class="figure">Figure: Radio button</p>  
-	<p align="center"><img alt="Radio button" src="../../images/radio_button.png"/></p> 
-
-<p>Usually, radio buttons are grouped. Two or more radio buttons are in the same group when they have the same parent. In each group, only 1 radio button can be selected at a given time. You can use <span style="font-family: Courier New,Courier,monospace;">Button::StateChangedSignal()</span> signal to check which radio button is selected. A basic radio button example is as follows:</p>
-
-<pre class="prettyprint">
-// ... same as the push button example
-  void Create( Application& application )
-  {
-    Actor radioGroup = Actor::New();
-    radioGroup.SetParentOrigin( ParentOrigin::CENTER );
-    Stage::GetCurrent().Add(radioGroup);
-
-    RadioButton button1 = RadioButton::New();
-    button1.SetLabel( "button1" );
-    button1.SetBackgroundColor( Vector4(1,0,0,1) );
-    button1.SetPosition( 0, -40 );
-    radioGroup.Add( button1 );
-
-    RadioButton button2 = RadioButton::New();
-    button2.SetLabel( "button2" );
-    button2.SetBackgroundColor( Vector4(0,0,1,1) );
-    button2.SetPosition( 0, 40 );
-    radioGroup.Add( button2 );
-
-    button1.StateChangedSignal().Connect( this, &ButtonController::OnButtonStateChanged );
-    button2.StateChangedSignal().Connect( this, &ButtonController::OnButtonStateChanged );
-  }
-  bool OnButtonStateChanged( Toolkit::Button button )
-  {
-    cout << "OnButtonStateChanged " << button.GetLabel() << " " << button.IsSelected() << endl;
-    return true;
-  }
-// ... same as the push button example
-</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/constraints_n.htm b/org.tizen.ui.guides/html/native/dali/constraints_n.htm
deleted file mode 100755
index 15b9925..0000000
--- a/org.tizen.ui.guides/html/native/dali/constraints_n.htm
+++ /dev/null
@@ -1,294 +0,0 @@
-<!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>Constraints: Imposing Your Own Constraints on Actors</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#use">Using a Constraint</a></li>
-			<li><a href="#source">Constraint Sources</a></li>
-			<li><a href="#function">Constraint Function</a></li>
-			<li><a href="#create">Creating a Constraint</a></li>
-			<li><a href="#remove">Removing Constraints</a></li>
-			<li><a href="#equal">Equal To Constraint</a></li>
-			<li><a href="#relative">Relative To Constraint</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">DALi::Constraint API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">DALi::Constraint API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Constraints: Imposing Your Own Constraints on Actors</h1>
-
-<p>Constraints are used to modify the property of an actor, based on other properties of the same actor; properties of the actor&#39;s parent; or properties of another actor altogether, when the modification needs to be at run-time. Custom functions or functors can be supplied, where the desired value of the property can be calculated. These functions (or functors) are called in every frame, therefore they must be fast and not too complex, otherwise they can affect performance.</p>
-<p>Multiple constraints can be applied to the same actor at the same time. The order in which constraints are applied is important as this is the order in which they are processed in the update thread.</p>
-<p>Constraints are applied after animations have been applied. This means that Constraints override the values set by Animations. Constraints are not applied to off-stage actors.</p>
-<p>Not all properties can be used as a constraint input. For more details, see the <span style="font-family: Courier New,Courier,monospace;">IsPropertyAConstraintInput()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">wearable</a> applications).</p>
-
-<h2 id="use" name="use">Using a Constraint</h2>
-
-<p>Constraints are designed as a way of modifying properties that cannot be modified by any existing built-in functionality, such as animations, size negotiation, parent anchor, or origin settings. As they provide the ability for the application developer to execute their own code within the update thread, DALi can no longer guarantee the timeliness of this code, or how optimized it can be.</p>
-<p>Generally, you must not use constraints with the <span style="font-family: Courier New,Courier,monospace;">size</span> property as constraining the size and size negotiation are mutually exclusive. Consider the following use cases as an example of when and when not to use a constraint:</p>
-
-<table>
-   <caption>
-     Table: Examples of constraint use
-   </caption>
-   <tbody>
-    <tr>
-     <th>Requirement</th>
-	 <th>Solution</th>
-    </tr>
-    <tr>
-		<td>Need a child to be 50% the size of it&#39;s parent.</td>
-		<td>Use size negotiation.</td>
-	</tr>
-	<tr>
-		<td>Need to zoom an actor in to the screen using its scale property.</td>
-		<td>Use an animation.</td>
-	</tr>
-	<tr>
-		<td>Need an actor to appear centered around the bottom-right corner of its parent.</td>
-		<td>Use ParentOrigin and AnchorPoint.</td>
-	</tr>
-	<tr>
-		<td>Need to lay out a series of controls with various alignment requirements.</td>
-		<td>Use either Anchor and origin settings, or a TableView.</td>
-	</tr>
-	<tr>
-		<td>Need to automatically modify the position property of one actor based on the position property of another actor, that is neither a parent OR a child.</td>
-		<td>Use a constraint.</td>
-	</tr>
-	<tr>
-		<td>Need to position an actor relative to its parent actor in a NON-UNIFORM way, or a non-linear calculation needs to be performed that requires a functor.</td>
-		<td>Use a constraint.</td>
-	</tr>
-	<tr>
-		<td>Need to modify an actor&#39;s property in real time based on some calculations that require additional data to be stored in-between frames.</td>
-		<td>Use a constraint. The constraint functor can hold any variables within it that need to be preserved frame-to-frame.</td>
-	</tr>
-   </tbody>
-  </table>
-
-<p>For most general cases, the position and size requirements of a child or parent actor (from its child or parent) can be calculated with size negotiation.</p>
-
-<h2 id="source" name="source">Constraint Sources</h2>
-<p>These properties are used as input sources to the constraint. The constraint takes these values, optionally performs a calculation on them (if using a custom functor) and writes the result to the specified property of the target actor. The source actor is specified as either the same actor, its parent, or another actor.</p>
-<ul>
-<li>Local source
-<p>A local source is based on the local properties (such as size, position, scale, orientation, or color) of an actor. For example, the actor&#39;s orientation can be used as a constraint input source.</p>
-<pre class="prettyprint">
-Dali::ConstraintSource source(Dali::LocalSource(Dali::Actor::Property::ORIENTATION));
-</pre>
-</li>
-<li>Parent Source
-<p>A parent source is based on properties of the actor's parent. For example, a parent&#39;s position can be used as a constraint input source.</p>
-<pre class="prettyprint">
-Dali::ConstraintSource source(Dali::ParentSource(Dali::Actor::Property::POSITION));
-</pre>
-</li>
-<li>Other Handle Source
-<p>You can base your source on the properties of another handle altogether. For example, a sibling actor&#39;s color can be used as a constraint input source.</p>
-<pre class="prettyprint">
-Dali::ConstraintSource source(Dali::Source(anotherHandle, Dali::Actor::Property::COLOR));
-</pre>
-</li>
-</ul>
-
-<h2 id="function" name="function">Constraint Function</h2>
-
-<p>The signature of the constraint function is:</p>
-
-<pre class="prettyprint">
-void Function(PropertyType &amp;current, const Dali::PropertyInputContainer &amp;inputs);
-</pre>
-<p>In this function the <span style="font-family: Courier New,Courier,monospace;">current</span> parameter is a reference to the target property type, such as float, Vector2, or Vector3. This is an in or out parameter. It represents the current value of the property and the expectation is that it is modified by the function to the desired value.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">inputs</span> parameter holds all the constraint input sources. Each element is a pointer to the property-input and can be accessed using the indexing operator [ ]. The order in which the sources are added is the order in which the property-inputs are sorted in the container. For example:</p>
-<pre class="prettyprint">
-constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::POSITION));
-constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::SIZE));
-constraint.AddSource(Dali::ParentSource(Dali::Actor::Property::POSITION));
-constraint.AddSource(Dali::ParentSource(Dali::Actor::Property::SIZE));
-</pre>
-<p>In the constraint function this equals to:</p>
-<pre class="prettyprint">
-const Dali::Vector3&amp; position(inputs[0]-&gt;GetVector3());
-const Dali::Vector3&amp; size(inputs[1]-&gt;GetVector3());
-const Dali::Vector3&amp; parentPosition(inputs[2]-&gt;GetVector3());
-const Dali::Vector3&amp; parentSize(inputs[3]-&gt;GetVector3());
-</pre>
-
-
-<h2 id="create" name="create">Creating a Constraint</h2>
-<h3>Using C Functions</h3>
-<p>If you do not have any data that is changed at runtime, C functions must be used. For example, the color of an actor can be changed based on its position along the x-axis to a preset distance of 100, beyond which it is transparent.</p>
-<pre class="prettyprint">
-Dali::Actor actor = Actor::New();
-
-// Create a constraint that targets actor
-Dali::Constraint constraint = Dali::Constraint::New&lt; Vector4 &gt;(actor, Dali::Actor::Property::COLOR, MyConstraintFunction); 
-
-// Add the POSITION property as a constraint input
-constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::POSITION)); 
-
-// Apply the constraint
-constraint.Apply(); 
-</pre>
-
-<p>The following example shows the actual C function:</p>
-<pre class="prettyprint">
-void MyConstraintFunction(Dali::Vector4&amp; current, const Dali::PropertyInputContainer&amp; inputs)
-{
-&nbsp;&nbsp;&nbsp;const Dali::Vector3&amp; position(inputs[0]-&gt;GetVector3());
-
-&nbsp;&nbsp;&nbsp;float distance = fabs(position.x);
-
-&nbsp;&nbsp;&nbsp;// More than 100.0f away, opacity is 0.0f
-&nbsp;&nbsp;&nbsp;if (distance &gt; 100.0f)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = 0.0f;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Otherwise it blends between fully opaque and transparent
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = (100.0f - distance) / 100.0f;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">New()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications).</p>
-
-<h3>Using Functors</h3>
-
-<p>If you need to store some data in a struct or class, a functor can be used. Reusing the last example, the color of an actor is changed based on its position along the x-axis, but the distance when it is transparent is different for each applied constraint.</p>
-<pre class="prettyprint">
-Dali::Actor actor = Actor::New();
-
-// Create a constraint that targets actor, and uses MyFunctor with a distance of 200
-Dali::Constraint constraint = Dali::Constraint::New&lt; Vector4 &gt;(actor, Dali::Actor::Property::COLOR, MyFunctor(200)); 
-
-// Add the POSITION property as a constraint input
-constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::POSITION)); 
-
-// Apply the constraint
-constraint.Apply(); 
-</pre>
-<p>The following example shows the structure:</p>
-<pre class="prettyprint">
-struct MyFunctor
-{
-&nbsp;&nbsp;&nbsp;// Constructor which takes the distance at which the actor is fully transparent
-&nbsp;&nbsp;&nbsp;MyFunctor(float distance)
-&nbsp;&nbsp;&nbsp;: mDistance(distance)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// Functor
-&nbsp;&nbsp;&nbsp;void operator()(Dali::Vector4 &amp;current, const Dali::PropertyInputContainer &amp;inputs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const Dali::Vector3&amp; position(inputs[0]-&gt;GetVector3());
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float distance = fabs(position.x);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// More than mDistance away, opacity is 0.0f
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (distance &gt; mDistance)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = 0.0f;
-&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;// Otherwise it blends between fully opaque and transparent
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = (100.0f - mDistance) / 100.0f;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// Data
-&nbsp;&nbsp;&nbsp;const float mDistance;
-};
-</pre>
-<p><span style="font-family: Courier New,Courier,monospace;">MyFunctor()</span> can be used also with another constraint with a different distance.</p>
-<p>Instead of using the default functor, another method can be declared in the class or struct and used as the constraint function.</p>
-<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">New()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications).</p>
-
-
-<h2 id="remove" name="remove">Removing Constraints</h2>
-
-<p>The actor&#39;s constraints can later be removed in several ways:</p>
-<pre class="prettyprint">
-mConstraint.Remove(); // mConstraint is a base-handle to a constraint
-actor.RemoveConstraints(); // Removes ALL constraints applied to an actor
-actor.RemoveConstraint(tag); // All constraints with the tag are removed from the actor (tag can be set using SetTag)
-</pre> 
-
-
-<h2 id="equal" name="equal">Equal To Constraint</h2>
-
-<p>The built-in <span style="font-family: Courier New,Courier,monospace;">Dali::EqualToConstraint</span> function can be used if only setting a property equal to another property is required:</p>
-<pre class="prettyprint">
-Dali::Constraint constraint = Dali::Constraint::New&lt; Vector3 &gt;(actor, Dali::Actor::Property::POSITION, Dali::EqualToConstraint());
-constraint.AddSource(Dali::Source(anotherActor, Dali::Actor::Property::POSITION));
-constraint.Apply();
-</pre>
-<p>Here actor's position is set to equal the position of <span style="font-family: Courier New,Courier,monospace;">anotherActor</span>.</p>
-
-
-<h2 id="relative" name="relative">Relative To Constraint</h2>
-
-<p>The built in <span style="font-family: Courier New,Courier,monospace;">Dali::RelativeToConstraint</span> and <span style="font-family: Courier New,Courier,monospace;">Dali::RelativeToConstraintFloat</span> functions can be used if only setting a property relative to another property is required:</p>
-
-<pre class="prettyprint">
-Dali::Constraint constraint = Dali::Constraint::New&lt; Vector3 &gt;(actor, Dali::Actor::Property::POSITION, Dali::RelativeToConstraint(2.0f));
-constraint.AddSource(Dali::Source(anotherActor, Dali::Actor::Property::POSITION));
-constraint.Apply();
-</pre>
-<p>Here the actor&#39;s position is relative to the position of <span style="font-family: Courier New,Courier,monospace;">anotherActor</span>. If <span style="font-family: Courier New,Courier,monospace;">anotherActor</span> is at (10.0f, 20.0f, 30.0f), <span style="font-family: Courier New,Courier,monospace;">actor</span> is at (20.0f, 40.0f, 60.0f).</p>
-
-
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.ui.guides/html/native/dali/control_base_n.htm b/org.tizen.ui.guides/html/native/dali/control_base_n.htm
deleted file mode 100755
index cd7f49b..0000000
--- a/org.tizen.ui.guides/html/native/dali/control_base_n.htm
+++ /dev/null
@@ -1,115 +0,0 @@
-<!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>Control: Base Class of UI Components</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#background-color">Background Color</a></li>
-			<li><a href="#background-image">Background Image</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/###.html">Dali::Toolkit::Control API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/###.html">Dali::Toolkit::Control API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Control: Base Class of UI Components</h1>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> is the base class for all UI components in DALi. This section describes some useful tips for this class.</p>
-
-
-<h2 id="background-color" name="background-color">Background Color</h2>
-
-<p>It is possible to set a background color for a UI component. If you want to set a component with a red background:
-
-<pre class="prettyprint">
-Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
-control.SetSize( 200.0f, 200.0f );
-control.SetBackgroundColor( Dali::Color::RED );
-</pre>
-
-<p class="figure">Figure: A Control object with a red background</p>  
-	<p align="center"><img alt="A control with a red background" src="../../images/background_control_color.png"/></p> 
-
-<p>This can be used for all existing controls like TextLabel as well: </p>
-
-<pre class="prettyprint">
-Dali::Toolkit::TextLabel label = Dali::Toolkit::TextLabel::New( "Hello World" );
-label.SetBackgroundColor( Dali::Color::RED );
-</pre>
-
-<p class="figure">Figure: A TextLabel object with a red background</p>  
-	<p align="center"><img alt="A TextLabel object with a red background" src="../../images/background_textlabel.png"/></p> 
-
-
-<h2 id="background-image" name="background-image">Background Image</h2>
-
-<p>You can also set a background image of a control:</p>
-
-<pre class="prettyprint">
-Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
-Dali::Image image = Dali::Image::New( "image.png" );
-control.SetBackgroundImage( image );
-</pre>
-
-<p class="figure">Figure: A Control object with a background image</p>  
-	<p align="center"><img alt="A Control object with a background image" src="../../images/background_image.png"/></p> 
-
-<p>The background image is blended with the background color. If a red background color is set on the control:</p>
-  
-<pre class="prettyprint">
-control.SetBackgroundColor( Dali::Color::RED );
-</pre>
-
-<p>then the control object will look like:</p>
-
-<p class="figure">Figure: A Control object with a background image blended with a background color</p>  
-	<p align="center"><img alt="A Control object with a background image blended with a background color" src="../../images/background_image_color.png"/></p> 
-    
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.ui.guides/html/native/dali/dali_applications_n.htm b/org.tizen.ui.guides/html/native/dali/dali_applications_n.htm
deleted file mode 100755
index 6f841e7..0000000
--- a/org.tizen.ui.guides/html/native/dali/dali_applications_n.htm
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Application: Framework for DALi Application</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">DALi::Application API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">DALi::Application API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Application: Framework for DALi Application</h1>
-
-<p>The Adaptor framework provides the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class, which initializes and sets up DALi appropriately. The class provides many platform-related services.</p>
-
-<p>Several signals can be connected to keep you informed when certain platform-related activities occur. It also ensures that, upon system events, DALi is called in a thread-safe manner.</p>
-
-<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance and connect to its initialize signal, where the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> hierarchy is created:</p>
-
-<pre class="prettyprint">void CreateProgram(Application&amp; app)
-{
-&nbsp;&nbsp;&nbsp;// Create DALi components...
-&nbsp;&nbsp;&nbsp;Dali::Actor actor = Actor::New();
-&nbsp;&nbsp;&nbsp;...
-}
-int main (int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;Dali::Application app = Application::New(&amp;argc, &amp;argv);
-&nbsp;&nbsp;&nbsp;app.InitSignal().Connect(&amp;CreateProgram);
-&nbsp;&nbsp;&nbsp;app.MainLoop();
-}</pre>
-
-<h2 id="window" name="window">Window</h2>
-
-<p>DALi provides the <span style="font-family: Courier New,Courier,monospace;">Window</span> class to manage drawing to a default surface. The class is also responsible for drawing the Indicator bar if required. The <span style="font-family: Courier New,Courier,monospace;">Application</span> class automatically creates a <span style="font-family: Courier New,Courier,monospace;">Window</span> which the you can access after the <span style="font-family: Courier New,Courier,monospace;">SignalInit()</span> function has fired.</p>
-
-<pre class="prettyprint">void CreateProgram(Application&amp; app)
-{
-&nbsp;&nbsp;&nbsp;app.GetWindow().ShowIndicator(Dali::Window::VISIBLE);
-}
-int main (int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;Dali::Application app = Application::New(argc, argv);
-&nbsp;&nbsp;&nbsp;app.SignalInit().Connect(&amp;CreateProgram);
-&nbsp;&nbsp;&nbsp;app.MainLoop();
-}</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>
-
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
deleted file mode 100755
index 2e555c4..0000000
--- a/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm
+++ /dev/null
@@ -1,258 +0,0 @@
-<!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>DALi Overview: Getting Started with DALi UI Programming</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#dali">Dali Fundamentals</a></li>
-			<li><a href="#create">Creating a DALi Application</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/###.html">DALi API References for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/###.html">DALi API References for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>DALi Overview: Getting Started with DALi UI Programming</h1>
-
-<p>Dynamic Animation Library (DALi) internally defines a virtual 3D world (space) and maintains hierarchical objects in the 3D world. The hierarchical object tree is known as the <a href="http://en.wikipedia.org/wiki/Scene_graph" target="_blank">scene graph</a>. A node in the scene graph can have several children but often only a single parent, with the effect of a parent applied to all its child nodes; an operation performed on a group automatically propagates its effect to all of its members.</p>
-<p>There are various types of nodes, such as image, text, and buttons.</p>
-
-<h2 id="dali" name="dali">DALi Fundamentals</h2>
-
-<p>Before starting UI programming with DALi, familiarize yourself with the basic concepts.</p>
-
-<h3>Actor and Stage</h3>
-
-<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>
-<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>
-
-<h3>Signal and Slot</h3>
-
-<p><a href="http://doc.qt.io/qt-5/signalsandslots.html" target="_blank">Signals and slots</a> are used in the QT GUI library for communication between objects. Objects can send signals containing event information, which can be received by other objects using special functions known as slots. The DALi event system follows the signal and slot mechanism.</p>
-
-<p>Signal events are emitted when a certain action or event occurs. The application can connect using these signals. Standard C-style functions can be used to connect to these signals if no local data needs to be accessed, otherwise a class method can also be connected.</p>
-<p>Applications can manually disconnect from signals when required. However, DALi also provides safe signal disconnection. This means that when the connecting object is deleted, the signal is automatically disconnected.</p>
-
-<h3 id="coordinate" name="coordinate">Coordinate System</h3>
-
-<p>DALi uses a left-handed coordinate system with the origin at the top-left corner, with positive X to right, positive Y going downwards, and positive Z going outside the screen with default camera. This is convenient when creating 2D views.</p>
-<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>
-
-<p class="figure">Figure: DALi coordinate system</p>  
-	<p align="center"><img alt="DALi coordinate system" src="../../images/actor_coordinates.png"/></p> 
-	
-<h3>Camera</h3>
-
-<p> DALi has a concept of camera to display its virtual 3D world to a 2D screen. There are two ways of using the camera in DALi:</p>
-
-<ul>
-	<li>For <strong>2D</strong> applications, you don't need to care about the camera at all. The default camera is already best suited for 2D applications (configured to have the origin of coordinate system at the top-left corner of the screen, and unit 1 as 1 pixel of the screen). This is a typical way.</li>
-	<li>For <strong>3D</strong> applications, you might want to change the view by mapulating the camera. You can translate / rotate the camera in this case. Please note that the top-left corner of the screen and unit 1 no longer are (0,0,0) and 1 pixel after manipulating the camera.</li>
-</ul>
-
-<h3>DALi Internal Structure</h3>
-
-<p>DALi consists of the following modules:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">dali-core</span>
-<p>This module provides scene graph -based rendering, animation, and event handling. It is a base module and forms the biggest part of 
-DALi.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">dali-toolkit</span>
-<p>This module provides UI components and various effects on top of the dali-core.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span>
-<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>
-</ul>
-<p class="figure">Figure: DALi internal structure</p>
-<p align="center"><img alt="DALi internal structure" src="../../images/dali_component.png" /></p>
-
-<h2 id="create" name="create">Creating a DALi Application</h2>
-
-<p>To create a &#39;Hello World&#39; application with Dali:</p>
-<ol>
-<li><a href="#create">Create a DALi project</a></li>
-<li><a href="#initial">Initialize the DALi application</a></li>
-<li><a href="#actor">Create an actor and add it to a stage</a></li>
-<li><a href="#build">Build your DALi application</a></li>
-<li><a href="#run">Run your DALi application</a></li>
-</ol>
-
-<h3 id="create" name="create">Create a DALi project</h3>
-
-<ol>
-<li>Launch the <strong>Tizen IDE</strong>.</li>
-<li>Choose File &gt; New &gt; Tizen Native Project.
-<p>Press Finish button, then your project is created at the default location. If you want to change the location, uncheck 'Use default location' and set the new location.
-Please see <a href="../../../../org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm#creating">Creating the Application Project</a> for more information.</p>
-</li>
-
-<p class="figure">Figure: Create a DALi project</p>
-<p align="center"><img alt="Create a DALi project" src="../../images/tizen_project_dali.png" width="600"/></p>
-
-<li>The new project is shown in the Project Explorer view of the IDE. If you open src/basicdaliapplication.cpp, you can see the source code of basic DALi application as follows:
-<pre class="prettyprint">
-#include &lt;dali-toolkit/dali-toolkit.h&gt;
-
-using namespace Dali;
-using Dali::Toolkit::TextLabel;
-
-// This example shows how to create and display Hello World using a simple TextLabel
-//
-class HelloWorldController : public ConnectionTracker
-{
-public:
-
-  HelloWorldController( Application& application )
-  : mApplication( application )
-  {
-    // Connect to the Application's Init signal
-    mApplication.InitSignal().Connect( this, &HelloWorldController::Create );
-  }
-
-  ~HelloWorldController()
-  {
-    // Nothing to do here
-  }
-
-  // The Init signal is received once (only) during the Application lifetime
-  void Create( Application& application )
-  {
-    // Get a handle to the stage
-    Stage stage = Stage::GetCurrent();
-    stage.SetBackgroundColor( Color::WHITE );
-
-    TextLabel textLabel = TextLabel::New( "Hello World" );
-    textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    textLabel.SetName( "hello-world-label" );
-    stage.Add( textLabel );
-
-    // Respond to a click anywhere on the stage
-    stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldController::OnTouch );
-  }
-
-  bool OnTouch( Actor actor, const TouchEvent& touch )
-  {
-    // quit the application
-    mApplication.Quit();
-    return true;
-  }
-
-private:
-  Application&  mApplication;
-};
-
-// Entry point for Tizen applications
-//
-int main( int argc, char **argv )
-{
-  Application application = Application::New( &argc, &argv );
-  HelloWorldController test( application );
-  application.MainLoop();
-  return 0;
-}
-</pre>
-</li>
-</ol>
-
-<h3 id="initial" name="initial">Initialize the DALi Application</h3>
-
-<p>To use DALi APIs, include the <span style="font-family: Courier New,Courier,monospace;">dali-toolkit.h</span> header file. It includes the <span style="font-family: Courier New,Courier,monospace;">dali-core</span> and <span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span> modules.</p>
-
-<pre class="prettyprint">#include &lt;dali-toolkit/dali-toolkit.h&gt;</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">wearable</a> applications) initializes and sets up DALi.</p>
-<p>Several signals can be connected to keep you informed when certain platform related activities occur and ensure that, upon system events, DALi is called in a thread-safe manner. To manage signal connection safely, DALi provides <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span>. A typical way for starting DALi application is creating a class derived from <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> and using its member functions as callback functions for DALi signals (Please see <a href="event_handling_n.htm#automatic">Automatic Connection Management</a> for more information). This <span style="font-family: Courier New,Courier,monospace;">HelloWorldController</span> class will be used in other code samples in the remainder of this guide.</p>
-
-<p>Create a <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance:</p>
-
-<pre class="prettyprint">
-Application application = Application::New(&amp;argc, &amp;argv);</pre>
-  
-<p>After getting the initialized signal from the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance, you can the DALi APIs for building the scene graph. Connect the <span style="font-family: Courier New,Courier,monospace;">HelloWorldController::Create</span> callback to <span style="font-family: Courier New,Courier,monospace;">DALi::Application InitSignal()</span> function:</p>
-
-<pre class="prettyprint">
-mApplication.InitSignal().Connect(this, &amp;HelloWorldController::Create);</pre>
-
-<p>To run the application, start its main loop. This ensures that images are displayed and events as well as signals are dispatched and captured.</p>
-<pre class="prettyprint">
-application.MainLoop();</pre>
-  
-<h3 id="actor" name="actor">Create an Actor and Add It to a Stage</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> UI component renders a short text string. To display the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component, add it to a stage. The <span style="font-family: Courier New,Courier,monospace;">stage</span> instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function:</p>
-
-<pre class="prettyprint">
-Stage stage = Stage::GetCurrent();
-stage.SetBackgroundColor( Color::WHITE );
-
-TextLabel textLabel = TextLabel::New( "Hello World" );
-textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-textLabel.SetName( "hello-world-label" );
-stage.Add( textLabel );
-</pre>
-
-<p>This code additionally sets the background color of the <span style="font-family: Courier New,Courier,monospace;">stage</span> and the anchor point, a point defining a position of a child actor from its parent, of the <span style="font-family: Courier New,Courier,monospace;">textLabel</span>. The application stores actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Even if the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component is removed from the stage, it remains alive through the reference.</p>
-
-
-<h3 id="build" name="build">Build your DALi application</h3>
-
-<p>To build your application, choose Project &gt; Build Project or press F10.</p>
-<p>The Tizen IDE automatically packages the project after building. Please note that you need to register your certificate at the first time to build. Please see <a href="../../../../org.tizen.devtools/html/common_tools/certificate_registration.htm">Certificate Registration</a> and <a href="../../../../org.tizen.gettingstarted/html/native/process/building_app_n.htm">Building Applications</a> for more information.</p>
-
-
-<h3 id="run" name="run">Run your DALi application</h3>
-
-<p>To run your application, choose Run &gt; Run or press Ctrl+F11.</p>
-<p>Please see <a href="../../../../org.tizen.gettingstarted/html/native/process/running_app_n.htm">Running Applications</a> for more information.</p>
-
-<p class="figure">Figure: The first DALi application running on Tizen emulator</p>
-<p align="center"><img alt="The first DALi application" src="../../images/hello_world_dali.png" /></p>
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
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
deleted file mode 100755
index f720211..0000000
--- a/org.tizen.ui.guides/html/native/dali/event_handling_n.htm
+++ /dev/null
@@ -1,566 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Event Handling: Managing the Event Flow</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#touch">Example: Handling Touch Events</a></li>
-			<li><a href="#key">Example: Handling Key Events</a></li>
-			<li><a href="#input">Input Signals</a></li>
-			<li><a href="#gesture">Gestures</a></li>
-			<li><a href="#automatic">Automatic Connection Management</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1LongPressGestureDetector.html">Dali::LongPressGestureDetector API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1PanGestureDetector.html">Dali::PanGestureDetector API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1PinchGestureDetector.html">Dali::PinchGestureDetector API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Signal.html">Dali::Signal API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1TapGestureDetector.html">Dali::TapGestureDetector API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">Dali::Toolkit::KeyboardFocusManager API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1LongPressGestureDetector.html">Dali::LongPressGestureDetector API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1PanGestureDetector.html">Dali::PanGestureDetector API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1PinchGestureDetector.html">Dali::PinchGestureDetector API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Signal.html">Dali::Signal API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1TapGestureDetector.html">Dali::TapGestureDetector API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">Dali::Toolkit::KeyboardFocusManager API for Wearable Native</a></li>			
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Event Handling: Managing the Event Flow</h1>
-
-<p>DALi event handling system is composed of 2 major concepts:</p>
-
-<ul>
-<li>Signal
-<p>Notifications containing event information emitted by GUI components. Also known as events or notifications.</p></li>
-<li>Slot
-<p>Special functions receiving signals. Also known as event handlers, observer, listener, or callbacks.</p></li>
-</ul>
-<p>DALi emits various types of signals to an application to inform it of user actions and the application can handle them through slots.</p>
-
-<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>
-
-<p class="figure">Figure: A schematic example of signal-slot connections: Signal 1 is connected to slot 1, signal 2 is connected to slot 1 and slot 3, and signal 3 is connected to slot 2.</p>  
-	<p align="center"><img alt="Signal and slot event handling" src="../../images/signal_slot.png"/></p> 
- 
-<p>The signal and slot system has following advantages:</p>
-<ul>
-<li>Object-oriented: Support callbacks for C++ member functions</li>
-<li>Type safe: Compiler is able to check for type safety</li>
-<li>Non-coupling: No dependency between caller and callee</li>
-<li>Non-type-intrusive: No modification to caller or callee types</li>
-<li>Generic: Work for all types of callbacks</li>
-<li>Many-to-many relationship: For example, 1 slot can connect to many signals and 1 signal can be connected to many slots</li>
-</ul>
-
-<h2 id="touch" name="touch">Example: Handling Touch Events</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class provides the <span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span> function to inform the application that a user touches the actor. It is defined as follows:</p>
-
-<pre class="prettyprint">typedef Signal&lt; bool (Actor, const TouchEvent&amp;)&gt; TouchSignalType;
-TouchSignalType&amp;TouchedSignal();</pre>
-
-<p>This means that a slot of the following type can be connected to the <span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span> function:</p>
-
-<pre class="prettyprint">bool YourCallbackName(Actor actor, const TouchEvent&amp;event);</pre>
-
-<p>The return value <span style="font-family: Courier New,Courier,monospace;">true</span> indicates that the touch event should be consumed. Otherwise, the signal is emitted on the next sensitive parent of the actor. This meaning is valid for the <span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span>, and other types of signals may not have a return value.</p>
-
-<p>Each point on the screen being or having been touched is represented by the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchPoint</span> object. This object stores information about the state of the touch point (such as down, up, or motion.) and the coordinates of the touch.</p>
-
-<p>A collection of touch points at a specific moment in time is collated into the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchEvent</span> object. When a multi-touch event occurs, each touch point represents the points that are currently being touched or the points where touch has stopped.</p>
-
-<p>The following example shows how a connection to a touch event signal can be established:</p>
-
-<pre class="prettyprint">
-  // ... Assuming this code is in the HelloWorldController class
-  void Create( Application& application )
-  {
-    Control actor = Control::New(); // Control is one of the simplest types of Actor that has visible form
-    actor.SetParentOrigin( ParentOrigin::CENTER );
-    actor.SetSize( 100.0f, 100.0f );
-    actor.SetBackgroundColor( Vector4( 1.0f, 1.0f, 1.0f, 1.0f ) );
-    actor.TouchedSignal().Connect( this, &HelloWorldController::OnTouch );
-    Stage::GetCurrent().Add( actor );
-  }
-
-  bool OnTouch( Actor actor, const TouchEvent&touch )
-  {
-    bool handled = false;
-    unsigned int pointCount = touch.GetPointCount();
-    if( pointCount == 1)
-    {
-      // Do action when first touch on screen
-      handled = true;
-    }
-    else if( pointCount > 1)
-    {
-      // Do action when multi-touch on screen
-      handled = true;
-    }
-    return handled;   // true if we have handled the touch, false otherwise
-  }
-  // ...
-</pre>
-
-<p>The touch event is first emitted to the hit actor by the primary touch point, which is the first point that the user touches. If this hit actor does not handle the event, then the event is offered to the hit actor&#39;s parent. Again, if the parent does not handle this event, it is then offered to its parent and so on until the stage is reached or the event is consumed.</p>
-
-<p>If a parent and child actor both connect to the touch signal, the touch event is first offered to the child. If it is consumed by the child, then is not informed to the parent.</p>
-
-<h2 id="key" name="key">Example: Handling Key Events</h2>
-
-<p>The following example show how to handle key events received by the stage:</p>
-
-<pre class="prettyprint">
-  // ... Assuming this code is in the HelloWorldController class
-  void Create( Application& application )
-  {
-    Stage::GetCurrent().SetBackgroundColor( Vector4( 1.0f, 1.0f, 1.0f, 1.0f ) );
-    Stage::GetCurrent().KeyEventSignal().Connect( this, &HelloWorldController::OnKeyEvent );
-
-    PushButton button = PushButton::New();
-    Stage::GetCurrent().Add( button );
-  }
-
-  void OnKeyEvent(const KeyEvent& event)
-  {
-    if(event.state == KeyEvent::Down)
-    {
-      if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) )
-      {
-        mApplication.Quit();
-      }
-    }
-  }
-  // ...
-</pre>
-
-<p>The stage is the top-most root object, so can receive application-wide key events.</p>
-
-<p>DALi provides its own key codes for several special keys, such as <span style="font-family: Courier New,Courier,monospace;">DALI_KEY_ESCAPE</span> or <span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BACK</span>, for your convinience.
-
-<p>Available DALi key codes are listed as follows:</p>
-
-<table>
-	<caption>
-		Table: DALi key codes
-	</caption>
-	<tbody>
-	<tr>
-		<th>Key Codes</th>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_INVALID</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_ESCAPE</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BACKSPACE</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_UP</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_LEFT</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_RIGHT</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_DOWN</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BACK</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CAMERA</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CONFIG</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_POWER</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PAUSE</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CANCEL</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PLAY_CD</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_STOP_CD</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PAUSE_CD</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_NEXT_SONG</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PREVIOUS_SONG</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_REWIND</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_FASTFORWARD</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MEDIA</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PLAY_PAUSE</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MUTE</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MENU</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_HOME</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_HOMEPAGE</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_WEBPAGE</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MAIL</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_SCREENSAVER</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BRIGHTNESS_UP</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BRIGHTNESS_DOWN</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_SOFT_KBD</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_QUICK_PANEL</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_TASK_SWITCH</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_APPS</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_SEARCH</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_VOICE</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_LANGUAGE</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_VOLUME_UP</span></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_VOLUME_DOWN</span></td>
-	</tr>
-	</tbody>
-</table>
-
-<h2 id="input" name="input">Input Signals</h2>
-
-<p>Many DALi classes provide various signals to notify events to the application. Among them, the most basic type of signals would be input signals. This section briefly introduces these input signals in DALi.</p>
-
-<p>The basic DALi input signals are as follows:</p>
-
-<ul>
-<li><strong>Touched signal</strong> notifies screen touch or mouse click</li>
-<li><strong>Hovered signal</strong> notifies mouse hovering</li>
-<li><strong>Wheel event signal</strong> notifies mouse wheel rolling</li>
-<li><strong>Key event signal</strong> notifies keyboard input</li>
-<li><strong>Key input focus signals</strong> notifies that a control is ready to receive key event signals</li>
-<li><strong>Keyboard focus signals</strong> notifies moved focus by navigation keys (such as left or right)</li>
-</ul>
-<p>These signals are provided by the following classes:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>
-
-<table>
-   <caption>
-     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> input signals
-   </caption>
-   <tbody>
-    <tr>
-     <th>Input signals</th>
-	 <th>Description</th>
-    </tr>
-    <tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>
-		<td>Emitted when touch input is received.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Actor actor, const TouchEvent&amp; event);</span></p></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
-		<td>Emitted when hover input is received.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Actor actor, const HoverEvent&amp; event);</span></p></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">WheelEventSignal()</span></td>
-		<td>Emitted when wheel event is received.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Actor actor, const WheelEvent&amp; event);</span></p></td>
-	</tr>
-   </tbody>
-  </table>
-  
-  <p>The actor receiving events is passed to the callbacks.</p>
-</li>
-
-<li>
-<span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span>
-
-<table>
-   <caption>
-     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> input signals
-   </caption>
-   <tbody>
-    <tr>
-     <th>Input signals</th>
-	 <th>Description</th>
-    </tr>
-    <tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>
-		<td>Emitted when touch input is received.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(const TouchEvent&amp; event)</span></p></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
-		<td>Emitted when hover input is received.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(const TouchEvent&amp; event);</span></p></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">KeyEventSignal()</span></td>
-		<td>Emitted when a key event is received.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(const KeyEvent&amp; event);</span></p></td>
-	</tr>
-   </tbody>
-  </table>
-
-<p>Only events are passed to the callbacks since only a single stage instance can exist in DALi application. The callback return types are <span style="font-family: Courier New,Courier,monospace;">void</span> because the stage has no parent to pass events to, even though it does not consume the events.</p>
-</li>
-
-<li>
-<span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span>
-
-<table>
-   <caption>
-     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> input signals
-   </caption>
-   <tbody>
-    <tr>
-     <th>Input signals</th>
-	 <th>Description</th>
-    </tr>
-    <tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">KeyEventSignal()</span></td>
-		<td>Emitted when a key event is received.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Control control, const KeyEvent& event);</span></p></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">KeyInputFocusGainedSignal()</span></td>
-		<td>Emitted when the control gets key input focus.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Control control);</span></p></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">KeyInputFocusLostSignal()</span></td>
-		<td>Emitted when the control loses key input focus which could be due to it being gained by another Control or Actor or just cleared from this control as no longer required.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Control control);</span></p></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal(), HoveredSignal(), KeyEventSignal()</span></td>
-		<td>Same as the ones supported by <span style="font-family: Courier New,Courier,monospace;">Actor</span>
-		</td>
-	</tr>
-   </tbody>
-  </table>
-
-<p>The key event signal is provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> and <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> classes, not by the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>  class. The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>  class is not designed to get key events. To receive key events, an actor must be an instance of the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control </span> class or one of its subclasses.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control </span> class also can receive touch, hover, and wheel events as it inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>  class.</p>
-</li>
-
-<li>
-<span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> 
-
-<table>
-   <caption>
-     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span>  input signals
-   </caption>
-   <tbody>
-    <tr>
-     <th>Input signals</th>
-	 <th>Description</th>
-    </tr>
-    <tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">PreFocusChangeSignal()</span></td>
-		<td>Emitted before the focus is going to be changed.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">Actor YourCallbackName(Actor currentFocusedActor, Actor proposedActorToFocus, Control::KeyboardFocus::Direction direction);</span></p></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">FocusChangedSignal()</span></td>
-		<td>Emitted after the current focused actor has been changed.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(Actor originalFocusedActor, Actor currentFocusedActor);</span></p></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">FocusGroupChangedSignal()</span></td>
-		<td>Emitted when the focus group has been changed.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(Actor currentFocusedActor, bool forward);</span></p></td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">FocusedActorEnterKeySignal()</span></td>
-		<td>Emitted when the current focused actor has the enter key pressed on it.
-		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(Actor enterPressedActor);</span></p></td>
-		</td>
-	</tr>
-   </tbody>
-  </table>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> provides the functionality of handling keyboard navigation and maintaining the two dimensional keyboard focus chain. Disimilar to the key input focus, the keyboard focus is about the focus moving between actors, and that's why this signal is provided by the specific focus managing class.</p>
-
-</li>
-</ul>
-
-
-The following DALi classes provide signals:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Window</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Timer</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::LongPressGestureDetector</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::TapGestureDetector</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::PanGestureDetector</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::PinchGestureDetector</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::RenderTask</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::ObjectRegistry</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::PropertyNotification</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Button</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::View</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::GaussianBlurViewSignal</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::ScrollBar</span> </li> 
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Scrollable</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::AccessibilityFocusManager</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> </li>
-</ul>
-<p>For the signals of each class and their usage, see the API Reference.</p>
-
-<h2 id="gesture" name="gesture">Gestures</h2>
-<p>Gesture is a user-friendly high-level event produced from a stream of touch events. The <span style="font-family: Courier New,Courier,monospace;">Dali::GestureDetector </span> class analyzes a stream of touch events and attempts to determine the intention of the user. </p>
-<p>If an actor is attached to a gesture detector and the detector recognizes a user intention (detects a predefined pattern in a stream of touch events), the actor emits a detected gesture signal to the application.</p>
-
-<p>DALi currently supports following gesture detectors:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::LongPressGestureDetector</span> detects when the user does a long-press action.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::TapGestureDetector</span> detects when the user does a tap action.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::PinchGestureDetector</span> detects when the user moves two fingers towards or away from each other.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::PanGestureDetector</span> detects when the user moves one or more fingers in the same direction.</li>
-</ul>
-
-<p>The example below shows how an application can be notified of a pinch gesture:</p>
-
-<pre class="prettyprint">
-  // ... Assuming this code is in the HelloWorldController class
-  void Create( Application& application )
-  {
-    PushButton actor = PushButton::New();  // Another type of Actor
-    actor.SetParentOrigin( ParentOrigin::CENTER );
-    actor.SetSize( 100.0f, 100.0f );
-    Stage::GetCurrent().Add( actor );
-
-    PinchGestureDetector detector = PinchGestureDetector::New();
-    detector.Attach( actor );
-    detector.DetectedSignal().Connect( this, &HelloWorldController::OnPinch );
-  }
-
-  void OnPinch( Actor actor, const PinchGesture& pinch )
-  {
-     // Scale your actor according to the pinch scale
-     Vector3 newSize = actor.GetCurrentSize() * pinch.scale;
-     actor.SetSize( newSize );
-  }
-  // ...
-</pre>
-
-<h2 id="automatic" name="automatic">Automatic Connection Management</h2>
-
-<p>Let's say we have a pair of connected signal (for example, a button clicked signal) and slot (for example, a toolbar object having the callback for the signal).
-If one of them (the button or the toolbar) is deleted without any notification, then the application will crash when the signal is emitted or the slot tries to disconnect the signal.</p>
-
-<p>DALi provides the automatic connection management mechanism to prevent this kind of situation. The key is <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class. It tracks connections between signals and slots, performs automatic disconnection when either the singal or slot is deleted.</p>
-
-<p>That's why all the DALi sample codes start with a controller class derived from <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span>. This is a safe and typical way of DALi application. Of course you can think of another structure using <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span>.
-    
-<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>
-
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
deleted file mode 100755
index 1295fda..0000000
--- a/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm
+++ /dev/null
@@ -1,103 +0,0 @@
-<!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>DALi</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/###.html">DALi API Reference for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/###.html">DALi API Reference for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>DALi</h1>
-
-<p>DALi is a cross-platform 3D UI Toolkit for embedded systems. Its 3D user interface engine enables you to create rich and high-performance UI applications. DALi is based on OpenGL ES 2.0, but provides a clean cross-platform C++ framework. This means that you can use high-level DALi APIs instead of accessing low-level OpenGL APIs directly.</p>
-
-<p>When creating a DALi application, make sure you understand the following main features:</p>
-
-<ul>
-	<li><a href="dali_overview_n.htm">DALi Overview: Getting Started with DALi UI Programming</a>
-	<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>
-	</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>
-	<p>Enables you to handle DALi UI components.</p></li>
-	<ul>
-		<li><a href="buttons_n.htm">Buttons: Push, Check, Select!</a></li>
-		<li><a href="itemview_n.htm">ItemView: Item Container with Layouts</a></li>
-		<li><a href="scrollview_n.htm">ScrollView: Scrollable Container for Items</a></li>
-		<li><a href="tableview_n.htm">TableView: Container with Grid-like Layout</a></li>
-		<li><a href="textfield_n.htm">TextField: Typing Your Text</a></li>
-		<li><a href="textlabel_n.htm">TextLabel: Displaying Text Labels</a></li>
-		<li><a href="imageview_n.htm">ImageView: Displaying Images</a></li>
-		<li><a href="control_base_n.htm">Control: Base Class of UI Components</a></li>
-	</ul>
-	<li><a href="animation_n.htm">Animations: Making Your Actors Alive</a>
-	<p>Enables you to create animated effects.</p></li>
-	<ul>
-		<li><a href="animation_types_n.htm">Animations Types: Types of Animations Supported by DALi</a></li>
-		<li><a href="constraints_n.htm">Constraints: Imposing Your Own Constraints on Actors</a></li>
-	</ul>
-	<li><a href="resources_n.htm">Resources: Handling Images</a>
-	<p>Enables you to manage resource images.</p></li>
-	<li><a href="rendering_effects_n.htm">Rendering and Effects: Managing Viewing Modes and Shader Effects</a>
-	<p>Enables you to manage DALi viewing modes and create shade effects.</p></li>
-	<li><a href="background_n.htm">Background Knowledge: Using DALi More Effectively</a>
-	<p>Enables you to use DALi more effectively with background knowledge.</p></li>
-	<ul>
-		<li><a href="handle_n.htm">Handle/Body Pattern: Basic Way of Using DALi Objects</a></li>
-		<li><a href="properties_n.htm">Properties: Accessing to Properties of DALi Objects</a></li>
-		<li><a href="multi_threaded_n.htm">Multi-Threaded Architecture: The Secret of High-Performance of DALi</a></li>
-	</ul>
-</ul>
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/handle_n.htm b/org.tizen.ui.guides/html/native/dali/handle_n.htm
deleted file mode 100755
index 41da6eb..0000000
--- a/org.tizen.ui.guides/html/native/dali/handle_n.htm
+++ /dev/null
@@ -1,202 +0,0 @@
-<!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>Handle/Body Pattern: Basic Way of Using DALi Objects</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#guide">Guide for Handles</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">Dali::BaseHandle API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">Dali::BaseHandle API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Handle/Body Pattern: Basic Way of Using DALi Objects</h1>
-
-<p>DALi widely adopts the handle/body pattern (a.k.a. pimpl pattern) which seperates implementation details (the body classes) from their interfaces (the handle classes).</p>
-<p><span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a>) is a base class of these handle classes in DALi. It additionally provides smart-pointer semantics which manages internal objects with reference counts. Most of classes in DALi public API are handle classes, which means they inherit from <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span>.
-</p>
-
-<p>This structure is benificial for both users and developers of DALi:</p>
-<ul>
-	<li><strong>Easier memory management</strong>
-	<p>Each internal implementation class (the body class) contains a single reference count object which can be intitialized with the static "New" methods in the DALi public API. This means that C++ new/delete operators do not have to be used in the user code.
-(For your information, these internal body class inherit from <span style="font-family: Courier New,Courier,monospace;">Dali::BaseObject</span>, but you don't need to use this class directly).
-</p>
-	</li>
-	<li><strong>Better encapsulation</strong>
-	<p>The danger of API/ABI breaks is reduced since the implementation of a class can be changed without modifying the public API, thus without recompiling code using the public API. This also can reduce the build time.</p>
-	</li>
-</ul>
-
-<h2 id="guide" name="guide">Guide for Handles</h2>
-
-<ul>
-
-<li> No need to call destructors
-<pre class="prettyprint">
-class HandleTest
-{
-  HandleTest()
-  {
-    mActor = Actor::New();
-  }
-
-  ~HandleTest() {} // Actor object is destroyed automatically
-
-  Actor mActor;
-};
-</pre>
-</li>
-
-<li> Can be stored in STL containers
-<pre class="prettyprint">
-class HandleTest
-{
-  HandleTest()
-  {
-    mActors.push_back( Actor::New() );
-    mActors.push_back( Actor::New() );
-    ...
-  }
-
-  ~HandleTest() {} // Actors are destroyed automatically
-
-  std::vector&lt;Actor&gt; mActors;
-};
-</pre>
-</li>
-
-<li> Passing by value is encouraged
-<pre class="prettyprint">
-void SomeFunction( Actor actor )
-{
-  if( actor )
-  {
-    actor.SomeMethod();
-  }
-}
-</pre>
-</li>
-
-<li> Validity check
-<pre class="prettyprint">
-{
-  ...
-  Actor actor;  // Create a NULL object
-
-  // At this stage we cannot call any of the Actor methods
-  if( !actor )  // This test is will pass, since the actor is NULL
-  {
-    actor = Actor::New();
-    ...
-  }
-  ...
-}
-</pre>
-</li>
-
-<li> Equality operators
-<pre class="prettyprint">
-{
-  Actor handle1;
-  Actor handle2;
-  cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // "true", both handles are empty
-
-  handle2 = Actor::New();
-  cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // "false", one handle is empty
-
-  handle1 = Actor::New();
-  cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // "false", handles to different objects
-
-  handle1 = handle2;
-  cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // "true", handles to same object
-}
-</pre>
-</li>
-
-<li> Reference counting examples
-<pre class="prettyprint">
-class AnimationTest
-{
-...
-private:
-  Animation mAnimation; // animation handle
-};
-void AnimationTest::Initialize ()
-{
-  mAnimation = Animation::New( 10.0f ); // reference count will be 1, animation object stays alive when method returns
-  ...
-}
-void AnimationTest::SetAnimation( Animation anim )
-{
-  mAnimation = anim; // reference count of original animation decreased, 'anim' is referenced instead
-                     // if nobody else had a reference on the initial animation, the object is destroyed
-}
-</pre>
-
-<pre class="prettyprint">
-// At this point we own a Dali::Actor named "container"
-// Enter a code block
-{
-  // Create an text label
-  TextLabel actor = TextLabel::New("test");
-  // Add the text label to a container
-  container.Add(actor);
-}
-// Exit the code block
-// At this stage the text label is still alive
-// We don't keep the handle to the text label, but it can be retrieved from the container
-</pre>
-
-</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/imageview_n.htm b/org.tizen.ui.guides/html/native/dali/imageview_n.htm
deleted file mode 100644
index a00a060..0000000
--- a/org.tizen.ui.guides/html/native/dali/imageview_n.htm
+++ /dev/null
@@ -1,88 +0,0 @@
-<!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>ImageView: Displaying Images</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#construction">Creating an ImageView</a></li>
-			<li><a href="#initial">Changing the Image</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ImageActor.html">Dali::ImageView API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ImageActor.html">Dali::Image API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ImageActor.html">Dali::ImageView API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ImageActor.html">Dali::Image API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>ImageView: Displaying Images</h1>
-
-<p><span style="font-family: Courier New,Courier,monospace;">ImageView</span> is a control displying an image.</p>
-
-<h2 id="construction" name="construction">Creating an ImageView</h2>
-
-<p>The following example shows how to create an <span style="font-family: Courier New,Courier,monospace;">ImageView</span> object:
-
-<pre class="prettyprint">
-Image image = ResourceImage::New(myImageFilename);
-ImageView imageView = ImageView::New(image);
-</pre>
-
-<p>The image view 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 on an url. Please see <a href="resources_n.htm">Resources: Handling Images</a> for more information.</p> 
-
-
-<h2 id="initial" name="initial">Changing the Image</h2>
-
-<p>The image view 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;">ImageView::SetImage()</span> function.</p>
-
-<pre class="prettyprint">
-imageView.SetImage(newImage);
-</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/itemview_n.htm b/org.tizen.ui.guides/html/native/dali/itemview_n.htm
deleted file mode 100755
index 9260eb4..0000000
--- a/org.tizen.ui.guides/html/native/dali/itemview_n.htm
+++ /dev/null
@@ -1,147 +0,0 @@
-<!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>ItemView: Item Container with Layouts</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#factory">Item Factory</a></li>
-			<li><a href="#create">Creating an ItemView</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemFactory.html">Dali::Toolkit::ItemFactory API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemLayout.html">Dali::Toolkit::ItemLayout API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/structDali_1_1Toolkit_1_1ItemRange.html">Dali::Toolkit::ItemRange API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemView.html">Dali::Toolkit::ItemView API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemFactory.html">Dali::Toolkit::ItemFactory API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemLayout.html">Dali::Toolkit::ItemLayout API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/structDali_1_1Toolkit_1_1ItemRange.html">Dali::Toolkit::ItemRange API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemView.html">Dali::Toolkit::ItemView API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Wearable Native</a></li>		
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>ItemView: Item Container with Layouts</h1>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">ItemView</span> class is a scrollable container that can contain many items. It provides several scrollable layouts as illustranted in the following figure:</p>
-
-<p class="figure">Figure: ItemView layouts</p>  
-
-	<table>
-   <tbody>
-    <tr>
-     <td>Grid</td>
-     <td>Spiral</td>
-	 <td>Depth</td>
-    </tr>
-	<tr>
-     <td style="text-align:center;"><img alt="captured screen2" src="../../images/grid.png" /></td>
-     <td style="text-align:center;"><img alt="captured screen2" src="../../images/spiral.png" /></td>
-	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/depth.png" /></td>
-    </tr>
-   </tbody>
-  </table>
-<p>You can also create your own custom layout by inheriting from the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemLayout</span> class.</p>
-
-<h2 id="factory" name="factory">Item Factory</h2>
-
-<p>To create an <span style="font-family: Courier New,Courier,monospace;">ItemView</span> instance, you should create your own ItemFactory class by deriving from <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemFactory</span> and provide its instance to <span style="font-family: Courier New,Courier,monospace;">ItemView::New()</span>. <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> is an abstract class having two pure virtual member functions to create items and get the number of created items. The following is a basic example of implementing an <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span>:</p>
-
-<pre class="prettyprint">
-class MyFactory : public Dali::Toolkit::ItemFactory
-{
-public:  
-   virtual unsigned int GetNumberOfItems()  
-   {   
-      // Return the number of items   
-      return MY_ITEM_COUNT;  
-   }  
-
-   virtual Actor NewItem(unsigned int itemId)  
-   {   
-      // Create the actor representing the item based on the itemId 
-      std::ostringstream imageName;   
-      imageName << "my-image-folder/" << itemId << ".png"; 
-
-      // If item is 10, this results in my-image-folder/10.png
-      Dali::ResourceImage image = Dali::ResourceImage::New(imageName.str());
-
-      // Create an ImageView from the image
-      return Dali::ImageView::New(image);
-   }
-};
-</pre>
-
-<p>The overridden functions in the derived class are called by the <span style="font-family: Courier New,Courier,monospace;">ItemView</span> object.</p>
-
-<h2 id="create" name="create">Creating an ItemView</h2>
-
-<p>An example of <span style="font-family: Courier New,Courier,monospace;">ItemView</span> is as follows:</p>
-
-<pre class="prettyprint">// Store this as a member variable
-MyFactory factory; 
-
-// Pass in the factory
-Dali::Toolkit::ItemView itemView = Dali::Toolkit::ItemView::New(factory); 
-
-itemView.SetParentOrigin(ParentOrigin::CENTER);
-itemView.SetAnchorPoint(AnchorPoint::CENTER);
-
-// Create a layout
-Dali::Toolkit::ItemLayoutPtr spiralLayout = Dali::Toolkit::DefaultItemLayout::New(Dali::Toolkit::DefaultItemLayout::SPIRAL);
-
-// Add the layout to the ItemView
-itemView.AddLayout(spiralLayout);
-
-// More layouts can be created and added to the ItemView
-// Activate the layout
-itemView.ActivateLayout(0, Dali::Stage::GetCurrent().GetSize(), 0);
-
-Dali::Stage::GetCurrent().Add(itemView);</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>
-
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 100644
index c4c7d8e..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">
-<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>Actors: Working with Basic DALi Components</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#dimension">Dimensions</a></li>
-			<li><a href="#resize">Resize Policies</a></li>
-			<li><a href="#example">Example with Actors</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Layout Management: Allocating the Sizes of the Actors</h1>
-
-<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> 
-
-<h2 id="dimension" name="dimension">Dimensions</h2>
-<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>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span></li>
-</ul>
-<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> 
-
-<h2 id="resize" name="resize">Resize Policies</h2>
-
-<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>
-
-<table>
-   <caption>
-     Table: Resizing rules
-   </caption>
-   <tbody>
-    <tr>
-     <th>Resize policy</th>
-     <th>Description</th>
-	 <th>Illustration</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIXED</span></td>
-     <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>
-	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/fixed.png" /></td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::USE_NATURAL_SIZE</span></td>
-     <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>
-	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/use_natural_size.png" /></td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span></td>
-     <td>The size of the actor is similar to its parent&#39;s size with proportionate filling considered.</td>
-	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/fill_to_parent.png" /></td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_RELATIVE_TO_PARENT</span></td>
-     <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>
-	 <td style="text-align:center;"></td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT</span></td>
-     <td>The size of the actor is similar to its parent&#39;s size with a fixed offset using the SetSizeModeFactor function.</td>
-	 <td style="text-align:center;"></td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span></td>
-     <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>
-	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/fit_to_children.png" /></td>
-    </tr>
-	<tr>
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span></td>
-     <td>This option covers rules, such as width-for-height and height-for-width. You can specify that one dimension depends on another.</td>
-	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/dimension_dependency.png" /></td>
-	</tr>
-   </tbody>
-  </table>
-
-
-<h2 id="example" name="example">Example with Actors</h2>
-
-<p>This section describes a layout example with a actor.</p> 
-
-<h4>Enabling Size Negotiation</h4>
-
-<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> 
-
-<h4>Specifying Size Policies</h4>
-
-<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> 
-
-<p>You can specify how an actor is size-negotiated:</p> 
-
-<pre class="prettyprint">void SetResizePolicy(ResizePolicy::Type policy, Dimension::Type dimension) @endcode</pre>
-
-<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> 
-
-<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> 
-
-<pre class="prettyprint">Actor rootActor = Actor::New();
-rootActor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-rootActor.SetResizePolicy(ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT);
-ImageActor image = ImageActor::New(Image::New(MY_IMAGE_PATH));
-image.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
-rootActor.Add(image);</pre>
-
-<p>The following images show the before and after layouts for this code example.</p>
-
-<p class="figure">Figure: Before and after setting the resize policy</p>  
-	<p align="center"><img alt="Before and after setting the resize policy" src="../../images/before_resize.png"/></p>
-	<p align="center"><img alt="Before and after setting the resize policy" src="../../images/after_resize.png"/></p> 
-
-
-<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> 
-
-<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> 
-
-<pre class="prettyprint">TextLabel text = TextLabel::New(&quot;Example&quot;);
-text.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-text.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);</pre>
-
-<h4>Specifying Sizes and Size Limits</h4>
-
-<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>
-<p>To constrain the final negotiated size of an actor, set the following minimum and maximum sizes, respectively:</p> 
-
-<pre class="prettyprint">void SetMinimumSize(const Vector2&amp; size)
-void SetMaximumSize(const Vector2&amp; size)</pre>
-
-<h4>Adjusting the Negotiated Size</h4>
-
-<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>
-<p>You can use the following resize policies:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::USE_SIZE_SET</span>
-<p>This is the default policy.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FIT_WITH_ASPECT_RATIO</span>
-<p>Fits the actor within the bounds it has been allocated while maintaining the aspect ratio.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FILL_WITH_ASPECT_RATIO</span>
-<p>Fills all available space, potentially overflowing its bounds, while maintaining aspect ratio.</p></li>
-</ul>
-
-<pre class="prettyprint">void SetSizeScalePolicy(SizeScalePolicy::Type policy)</pre>
-
-<h4>Using Actors in Containers</h4>
-
-<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> 
-
-<pre class="prettyprint">void SetPadding(const Padding&amp; padding)</pre>
-
- <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note"><p>Beware of infinite dependency loops!</p>
-<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> 
-<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>
-<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>
-    </tr>
-   </tbody>
- </table>
-
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.ui.guides/html/native/dali/multi_threaded_n.htm b/org.tizen.ui.guides/html/native/dali/multi_threaded_n.htm
deleted file mode 100755
index 2972ebb..0000000
--- a/org.tizen.ui.guides/html/native/dali/multi_threaded_n.htm
+++ /dev/null
@@ -1,143 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Multi-Threaded Architecture: The Secret of High-Performance of DALi</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#animations">Animations with Multi-Threading</a></li>
-			<li><a href="#resource">Resource Loading with Multi-Threading</a></li>
-		</ul>
-		<!--
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">Dali::Handle API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">Dali::Handle API for Wearable Native</a></li>
--->
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Multi-Threaded Architecture: The Secret of High-Performance of DALi</h1>
-
-<p>DALi uses a multithreaded architecture in order to provide the best performance and scalability.</p>
-<ul>
-	<li><strong>Event Thread:</strong> The main thread in which application code and event handling runs.</li>
-	<li><strong>Update Thread:</strong> Updates the nodes on the scene as well as running animations and constraints.</li>
-	<li><strong>Render Thread:</strong> OpenGL drawing, texture and geometry uploading etc.</li>
-	<li><strong>Resource Thread:</strong> Loads images and decodes into bitmaps etc.</li>
-</ul>
-
-<p class="figure">Figure: DALi Thread Architecture</p>  
-	<p align="center"><img alt="Thread Architecture" src="../../images/dali_threads.png"/></p> 
-
-
-	<!-- dali todo GetCurrentPosition() -->
-
-
-<h2 id="animations" name="animations">Animations with Multi-Threading</h3>
-
-<h3 id="hierachy" name="hierachy">Multi-threaded Architecture</h3>
-
-<p>DALi animations and rendering occur in a dedicated rendering thread. This allows animations to run smoothly, regardless of the time taken to process inputs events in the application code.</p>
-
-<p>Internally, DALi contains the scene graph that mirrors the actor hierarchy. The scene graph objects perform the actual animation and rendering, while the actors provide thread-safe access. Actors and scene graph objects communicate through messaging.</p>
-
-<p>The following figure shows an actor hierarchy, in which one of the actors is being animated. The green objects in are created by the application code, while the blue private objects are used in the dedicated rendering thread.</p>
-
-<p class="figure">Figure: Actor hierarchy with an animation</p> 
-	<p align="center"><img alt="Actor hierarchy with an animation" src="../../images/multi_threading2.png"/></p> 
- 
-<h3 id="read" name="read">Reading an Animated Value</h3>
-
-<p>When a property is animatable, it can only be modified in the rendering thread. The value returned from a getter method is the value used when the previous frame was rendered.</p>
-
-<p>For example, the <span style="font-family: Courier New,Courier,monospace;">GetCurrentPosition()</span> function returns the position in which the actor was last rendered. Since the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function is asynchronous, a call to <span style="font-family: Courier New,Courier,monospace;">GetCurrentPosition()</span> function does not immediately return the same value.</p>
-
-<pre class="prettyprint">Actor actor = Actor::New();
-Stage::GetCurrent().Add(actor); // Initial position is 0,0,0
-
-actor.SetPosition(Vector3(10,10,10));
-
-Vector3 current;
-current = actor.GetCurrentPosition();
-std::cout &lt;&lt; &quot;Current position: &quot; &lt;&lt; current.x &lt;&lt; &quot;, &quot; &lt;&lt; current.y &lt;&lt; &quot;, &quot; &lt;&lt; current.z &lt;&lt; std::endl;
-
-std::cout &lt;&lt; &quot;...&quot; &lt;&lt; std::endl;
-
-// Handling another event
-
-current = actor.GetCurrentPosition();
-std::cout &lt;&lt; &quot;Current position: &quot; &lt;&lt; current.x &lt;&lt; &quot;, &quot; &lt;&lt; current.y &lt;&lt; &quot;, &quot; &lt;&lt; current.z &lt;&lt; std::endl;
-</pre>
-
-<p>The above code is likely to output:</p>
-<pre class="prettyprint">Actor actor = Actor::New();
-&quot;Current position: 0,0,0&quot;
-// Other positions
-&quot;Current position: 10,10,10&quot;</pre>
-
-<h3 id="set" name="set">Setting a Property during an Animation</h3>
-
-<p>When a property is being animated, the animation overrides all values set with other functions, such as the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function.</p>
-
-<p class="figure">Figure: Actor hierarchy with an animated property</p>  
-	<p align="center"><img alt="Actor hierarchy with an animated property" src="../../images/multi_threading.png"/></p> 
- 
-<p>The order of execution in the render thread is:</p>
-<ol>
-<li>Process message and call the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function</li>
-<li>Apply animation and call the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function</li>
-<li>Render frame</li>
-</ol>
-
-<h2 id="resource" name="resource">Resource Loading with Multi-Threading</h2>
-
-<p>DALi loads resources in seperate threads. Without using these resource threads, a large image file will cause block to process next operation in the main thread while reading data from file system or downloading from network.</p>
-
-<p>Currently, DALi creates one thread for loading local resources and another for loading remote resources if required.</p>
-
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.ui.guides/html/native/dali/properties_n.htm b/org.tizen.ui.guides/html/native/dali/properties_n.htm
deleted file mode 100755
index 5bd20dd..0000000
--- a/org.tizen.ui.guides/html/native/dali/properties_n.htm
+++ /dev/null
@@ -1,265 +0,0 @@
-<!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>Properties: Accessing to Properties of DALi Objects</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#access">Accessing to Property Values</a></li>
-			<li><a href="#usage">Usages of Properties</a></li>
-			<li><a href="#attributes">Attributes of Properties</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">Dali::Handle API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">Dali::Handle API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">Dali::Property API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">Dali::Property API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Properties: Accessing to Properties of DALi Objects</h1>
-
-<p>A property is a value used by an object that can be modified or read via <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::GetProperty()</span> / <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> API.</p>
-
-<p>The difference between properties and ordinary C++ member variables is that a property can be dynamically added to or removed from an existing object in runtime, which enables more flexible, script-like programming with DALi.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a>) provides methods to manage properties, thus the DALi classes that inherit from <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> (most of classes that users would use) have a number of predefined properties and can have any number of user-defined custom properties.
-</p>
-
-<h2 id="access" name="access">Accessing to Property Values</h2>
-
-	<p>Property values of an object usually can be accessed via two ways: by its class member functions or by property getters/setters (<span style="font-family: Courier New,Courier,monospace;">Dali::Handle::GetProperty()</span> / <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span>).</p>
-	<p>For example, <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> has following predefined properties:</p>
-
-	<table>
-		<caption>
-			Table: Properties of Dali::Actor
-		</caption>
-		<tbody>
-		<tr>
-			<th>Property Index (enumeration)</th>
-			<th>Member Functions</th>
-		</tr>
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::POSITION</span></td>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentPosition()</span> / <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span></td>
-		</tr>
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::ORIENTATION</span></td>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentOrientation()</span> / <span style="font-family: Courier New,Courier,monospace;">SetOrientation()</span></td>
-		</tr>
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SIZE</span></td>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentSize()</span> / <span style="font-family: Courier New,Courier,monospace;">SetSize()</span></td>
-		</tr>
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::COLOR</span></td>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentColor()</span> / <span style="font-family: Courier New,Courier,monospace;">SetColor()</span></td>
-		</tr>
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::NAME</span></td>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetName()</span> / <span style="font-family: Courier New,Courier,monospace;">SetName()</span></td>
-		</tr>
-		<tr>
-			<td>...</td>
-			<td>...</td>
-		</tr>
-		</tbody>
-	</table>
-
-	You can access them in both ways:
-
-	<pre class="prettyprint">
-Actor actor = Actor::New();
-actor.SetName("test actor");
-std::cout &lt;&lt; actor.GetName() &lt;&lt; std::endl;  // "test actor"
-</pre>
-
-	<pre class="prettyprint">
-Actor actor = Actor::New();
-actor.SetProperty( Actor::Property::NAME, "test actor" );
-std::cout &lt;&lt; actor.GetProperty( Actor::Property::NAME ) &lt;&lt; std::endl;  // "test actor"
-std::cout &lt;&lt; actor.GetProperty&lt;std::string&gt;( Actor::Property::NAME ) &lt;&lt; std::endl;  // "test actor"
-std::cout &lt;&lt; actor.GetProperty( Actor::Property::NAME ).Get&lt;std::string&gt;() &lt;&lt; std::endl;  // "test actor"
-</pre>
-
-<p>Please see API reference for <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a>) for more information.
-
-<h2 id="usage" name="usage">Usages of Properties</h2>
-
-<h3>Registering User-Defined Custom Properties to Objects</h3>
-
-<p>Properties can be registered / unregistered in runtime, which enables script-like programming of DALi application, for example, adding custom member data to an instance of a DALi class without subclassing the class or maintaining another pool of custom data.</p>
-<p>For example, you can set your own custom data to PushButton objects and use them later when the buttons are clicked like:</p>
-<pre class="prettyprint">
-void Create( Application&amp; application )
-{
-  for( int i=0; i&lt;5; ++i )
-  {
-    Toolkit::PushButton button = Toolkit::PushButton::New();
-    button.SetSize( 100, 100 );
-    button.SetPosition( 100*i+50, 50 );
-    button.ClickedSignal().Connect( this, OnButtonClicked );
-
-    // Register a custom property having button index.
-    // Store the property index so you can look it up later.
-    // Note: This is much faster than looking the property up by property name and should always be used if possible.
-    // As all control types are the same (PushButtons) the indices to the unique custom property are all same.
-    Property::Value data( i );
-    mCustomDataIndex = button.RegisterProperty( "custom-data", data );
-
-    Stage::GetCurrent().Add(button);
-  }
-}
-
-bool OnButtonClicked(Toolkit::Button button)
-{
-  // Look up the custom property by the stored property index.
-  // Note: If the property belongs to a control in another library, or we do not know the index, we can look the index up first with:
-  // Property::Index index = button.GetPropertyIndex( "custom-data" );
-  cout &lt;&lt; button.GetProperty( mCustomDataIndex ) &lt;&lt; endl;
-  return true;
-}
-</pre>
-
-<p>Please see API reference for <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a>) for more information.
-
-<h3>Animating Objects</h3>
-
-<p>DALi animation API is used to animate the properties of any number of objects.</p>
-
-<p>For example, following code animates the value of the <strong>POSITION</strong> property of a radio button to (100.0, 200.0, 0.0) for 2 seconds:</p>
-
-<pre class="prettyprint">
-RadioButton actor = RadioButton::New();
-Stage::GetCurrent().Add(actor);
-Animation animation = Animation::New(2.0f); // duration 2 seconds
-animation.AnimateTo(Property(actor, Actor::Property::POSITION), Vector3(100.0f, 200.0f, 0.0f));
-animation.Play();
-</pre>
-
-<p>Please see <a href="basic_framework_n.htm">Animation Basics</a> for more information.</p>
-
-<h3>Imposing Constraints on Objects</h3>
-
-<p>DALi constraint API is used to modify the property of an object based on other properties of other objects.</p>
-
-<p>For example, following code makes the value of the <strong>SIZE</strong> property of an actor same as the value of the <strong>SIZE</strong> property of its parent actor:</p>
-
-<pre class="prettyprint">
-Constraint constraint = Constraint::New<Vector3>( actor,
-                                                  Actor::Property::SIZE,
-                                                  EqualToConstraint() );
-constraint.AddSource( ParentSource( Actor::Property::SIZE ) );
-constraint.Apply();
-</pre>
-
-<p>Please see <a href="constraints_n.htm">Constraints</a> for more information.</p>
-
-<h2 id="attributes" name="attributes">Attributes of Properties</h2>
-
-<p>A property has following attributes:
-<ul>
-	<li>Index: An enumeration number indicating the property. Property index is usually used to access properties.</li>
-	<li>Type: Type of the property. Retrieved by <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::GetPropertyType()</span>.</li>
-	<li>Name: Name of the property. Retrieved by <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::GetPropertyName()</span>.</li>
-	<li>Writable: If true, the property value can be written. Retrieved by <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::IsPropertyWritable()</span>.</li>
-	<li>Animatable: If true, the property can be animated using <span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span>. Retrieved by <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::IsPropertyAnimatable()</span>.</li>
-	<li>Constraint-Input: If true, the property can be used as input of constraints. Retrieved by <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::IsPropertyAConstraintInput()</span>.</li>
-</ul>
-
-<p>For example, predefined properties of <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> has following attributes:</p>
-
-	<table>
-		<caption>
-			Table: Attributes of Properties of Dali::Actor
-		</caption>
-		<tbody>
-		<tr>
-			<th>Property Index (enumeration)</th>
-			<th>Property Type</th>
-			<th>Property Name</th>
-		</tr>
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::POSITION</span></td>
-			<td>Vector3</td>
-			<td>"position"</td>
-		</tr>
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::ORIENTATION</span></td>
-			<td>Quaternion</td>
-			<td>"orientation"</td>
-		</tr>
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SIZE</span></td>
-			<td>Vector3</td>
-			<td>"size"</td>
-		</tr>
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::COLOR</span></td>
-			<td>Vector4</td>
-			<td>"color"</td>
-		</tr>
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::NAME</span></td>
-			<td>std::string</td>
-			<td>"name"</td>
-		</tr>
-		<tr>
-			<td>...</td>
-			<td>...</td>
-			<td>...</td>
-		</tr>
-		</tbody>
-	</table>
-
-<p>You can see these information at API reference for property of each class. For example for <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>, please see <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::Property</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1CameraActor.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1CameraActor.html">wearable</a>).</p>
-
-<p>To check all kinds of supported property types, please see <span style="font-family: Courier New,Courier,monospace;">Dali::Property::Type</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1CameraActor.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1CameraActor.html">wearable</a>) and <span style="font-family: Courier New,Courier,monospace;">Dali::PropertyTypes</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1CameraActor.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1CameraActor.html">wearable</a>).</p>
-
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/rendering_effects_n.htm b/org.tizen.ui.guides/html/native/dali/rendering_effects_n.htm
deleted file mode 100755
index ba741e0..0000000
--- a/org.tizen.ui.guides/html/native/dali/rendering_effects_n.htm
+++ /dev/null
@@ -1,155 +0,0 @@
-<!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>Rendering and Effects: Managing Viewing Modes and Shader Effects</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#modes">Viewing Modes</a></li>
-			<li><a href="#shader">Shader Effects</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Rendering and Effects: Managing Viewing Modes and Shader Effects</h1>
-
-DALi provides stereoscopic viewing modes. It also provides a way to use user-defined custom shader effects.
-
-<h2 id="modes" name="modes">Viewing Modes</h2>
-
-<p>DALi supports the following viewing modes:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">MONO</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span></li>
-</ul>
-
-<p><span style="font-family: Courier New,Courier,monospace;">MONO</span> is the default viewing mode. When using the <span style="font-family: Courier New,Courier,monospace;">MONO</span> mode, only 1 image per scene is produced in every update. In this setup, DALi creates a default render task, which renders everything added to the stage root layer, and 1 default camera for that render task.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span> and <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span> modes allow the application to produce stereo images. Stereoscopy is a technique for creating or enhancing the illusion of depth in an image. Stereo rendering technique produces 2 images of the scene with an slight offset between them, which is presented to the left and the right eye independently. In this setup, DALi creates 2 additional render tasks, 1 for the right eye and 1 for the left, each with its own camera. Those cameras are parented to the default camera. The method to generate the projection transformation for each camera is known as &quot;parallel axis asymmetric frustum perspective projection&quot; and is illustrated in the following figure.</p>
-
-<p class="figure">Figure: Stereoscopic projection</p>  
-	<p align="center"><img alt="Stereoscopic projection" src="../../images/stereo_projection.png"/></p> 
- 
-<p>The separation between the 2 cameras is configurable but, typically, it ranges between 50 and 70 millimeters. Too large a separation can be hard to resolve and is known as hyperstereo. The convergence plane for both frustums is the 2D plane, so the projection of anything lying in the 2D plane is coincident for both left and right eye, resulting in no parallax. Objects that lie in front of the projection plane appear to be in front of the screen and objects behind the projection plane appear to be &quot;into&quot; the screen. Objects behind the projection plane (positive parallax) are easier to look at without straining the eyes.</p>
-
-<p>To view stereoscopic images correctly, each image must be presented to each eye independently. There are devices on the market for this, such as a head-mounted display, which is a display device worn in the head that has 2 small displays, one for each eye. A cheaper alternative to this often expensive device is the Google cardboard viewer.</p>
-
-<p class="figure">Figure: Google cardboard viewer</p>  
-	<p align="center"><img alt="Google cardboard viewer" src="../../images/google_cardboard.png"/></p> 
- 
-<p>With the Google cardboard viewer or a similar device, you can transform your phone into a basic virtual reality headset.</p>
-
-<h3 id="stereo" name="stereo">Stereoscopic Rendering in DALi</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span> mode presents the left image on the top half of the screen and the right image on the bottom half. It is intended to be used in landscape orientation, so the images are rotated 90 degrees counter-clockwise. The <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span> mode, on the other hand, renders the left image on the left half of the screen and the right image on the right half.</p>
-
-<p>To define the viewing mode to be used, use the <span style="font-family: Courier New,Courier,monospace;">SetViewMode()</span> function of the <span style="font-family: Courier New,Courier,monospace;">Application</span> class, passing the mode as a parameter. You can query the view mode being used by calling the <span style="font-family: Courier New,Courier,monospace;">GetViewMode()</span> function. To define the separation between the left and right cameras, use the <span style="font-family: Courier New,Courier,monospace;">SetStereoBase()</span> function, passing the distance in millimeters as a parameter. This distance can be queried using the <span style="font-family: Courier New,Courier,monospace;">GetStereoBase()</span> function. You can also set the viewing mode and offset at initialization time using 2 command line arguments for this purpose: <span style="font-family: Courier New,Courier,monospace;">-view-mode</span> (or <span style="font-family: Courier New,Courier,monospace;">-v</span>) and <span style="font-family: Courier New,Courier,monospace;">0</span> for <span style="font-family: Courier New,Courier,monospace;">MONO</span>, <span style="font-family: Courier New,Courier,monospace;">1</span> for <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span>, <span style="font-family: Courier New,Courier,monospace;">2</span> for <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span>, and <span style="font-family: Courier New,Courier,monospace;">-stereo-base</span> (or <span style="font-family: Courier New,Courier,monospace;">-s</span>) and the separation in millimeters.</p>
-
-<h3 id="restrictions" name="restrictions">Restrictions</h3>
-
-<p>There are certain restrictions when writing stereoscopic applications using DALi:</p>
-
-<ul>
-<li>When a stereo mode is selected, the default render task source actor is set to an uninitialized actor so it does not render anything. Changing the default render task source actor later on produces undesired results, as the user does not want to see anything rendered by the default camera when stereo mode is on.</li>
-<li>Stereo cameras are parented to the default camera, so if the application needs to change the camera position or orientation, it must change the default camera transformation. The handle to the default camera can be obtained from the default render task as follows:
-
-<pre class="prettyprint">Dali::RenderTask defaultRenderTask = Dali::Stage::GetCurrent().GetRenderTaskList().GetTask(0); Dali::CameraActor defaultCamera = defaultRenderTask.GetCameraActor();</pre>
-</li>
-<li>Stereo render tasks render everything added to the stage&#39;s root layer. If the application must render an object hierarchy to an off-screen buffer, it must set the exclusive flag on that render task so that the stereo tasks do not render that particular subtree. To set the exclusive flag in a render task, use the <span style="font-family: Courier New,Courier,monospace;">SetExclusive()</span> function defined in the render task.</li>
-</ul>
-
-<table class="note">
-	<tbody>
-	<tr>
-		<th class="note">Note</th>
-	</tr>
-	<tr>
-		<td class="note">
-			<p>DALi stereoscopic viewing mode is a developing feature rather than completed feature. Thus, it might not be enough for commercialized applications at this moment. For example, distortion correction is not supported yet. We are trying to improve this streoscopic mode to give our users chances to provide more exciting and immersive user experience to their clients.</p>
-		</td>
-	</tr>
-	</tbody>
-</table>
-
-
-
-<h2 id="shader" name="shader">Shader Effects</h2>
-<p>The shader effects allow the developer to apply visual deformations on the actors. They can affect the geometry, the colors and textures of the actor.</p>
-<ul>
-<li>Each actor has its own default shaders.</li>
-<li>Those default shaders can be overridden by modified shader effects.</li>
-<li>In an application, each actor might possess its own shader effect.</li>
-<li>In an application, multiple actors might apply the same effect.</li>
-</ul>
-
-<h3 id="custom" name="custom">Custom Shader Effects</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace;">ShaderEffect</span> enables you to create custom shader effects by specifying the vertex and pixel shaders. For a custom shader, you can provide the vertex and fragment shader code as strings. These shader snippets get concatenated with the default attributes and uniforms.</p>
-
-<p>Create a custom shader effect:</p>
-
-<pre class="prettyprint">std::string myVertexShader; // This variable would contain the code for a vertex shader.
-Dali::ShaderEffect myEffect = Dali::ShaderEffect::New(myVertexShader,
-   &quot;&quot; // use default pixel shader
-);</pre>
-
-<p>Set the value of a uniform:</p>
-
-<pre class="prettyprint">// if the uniform was declared like this in the shader: uniform float myUniform;
-myEffect.SetUniform(&quot;myUniform&quot;, 0.5f);</pre>
-
-<p>You can apply the custom shader effect to an actor like any other shader:</p>
-
-<pre class="prettyprint">actor.SetShaderEffect(myEffect);</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/resources_n.htm b/org.tizen.ui.guides/html/native/dali/resources_n.htm
deleted file mode 100755
index 12d0974..0000000
--- a/org.tizen.ui.guides/html/native/dali/resources_n.htm
+++ /dev/null
@@ -1,252 +0,0 @@
-<!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>Resources: Handling Images</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#image">Loading Image Files</a></li>
-			<li><a href="#patch">Nine-Patch Image</a></li>
-			<li><a href="#buffer">Buffer Image</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ResourceImage.html">DALi::ResourceImage API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1BufferImage.html">DALi::BufferImage API for Mobile Native</a></li>
-			<!--<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1NinePatchImage.html">DALi::NinePatchImage API for Mobile Native</a></li>-->
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ResourceImage.html">DALi::ResourceImage API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1BufferImage.html">DALi::BufferImage API for Wearable Native</a></li>
-			<!--<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1NinePatchImage.html">DALi::NinePatchImage API for Wearable Native</a></li>-->
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Resources: Handling Images</h1>
-
-<p>DALi provides several ways to handle resource images.</p>
-
-<h2 id="image" name="image">Loading Image Files</h2>
-
-<p>You can load an image file with <span style="font-family: Courier New,Courier,monospace;">ResourceImage</span> class by specifying its location as follows:
-
-<pre class="prettyprint">
-Dali::ResourceImage image = Dali::ResourceImage::New(&quot;/my-path/my-image.png&quot;);
-</pre>
-
-<p>The loaded image can be displayed using <span style="font-family: Courier New,Courier,monospace;">ImageView</span> as follows:</p>
-
-<pre class="prettyprint">
-ImageView imageView = ImageView::New(image);
-Stage::GetCurrent().Add(imageView);
-</pre>
-
-<p>Please see <a href="imageview_n.htm">ImageView: Displaying Images</a> for more details. 
-
-<h3>Supported Resource Types</h3>
-
-<p>The resource location can be a file path or a URL.</p>
-
-<p>Currently supported image types are:</p>
-<ul>
-<li>png</li>
-<li>jpeg</li>
-<li>gif</li>
-<li>bmp</li>
-<li>wbmp</li>
-<li>ico</li>
-<li>ktx</li>
-</ul>
-
-<p>Currently supported URL schemes are:</p>
-<ul>
-<li>http</li>
-<li>https</li>
-</ul>
-
-<h3>Asynchronous Loading</h3>
-
-<p>Resources are loaded in separate threads, which means when you call <span style="font-family: Courier New,Courier,monospace;">ResourceImage::New()</span>, it returns immediately.</p>
-
-<p>The application can connect to the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage::LoadingFinishedSignal()</span> signal to get notified when the image has loaded as follows:</p>
-
-
-<pre class="prettyprint">
-class ResourceImageController : public ConnectionTracker
-{
-public:
-  ResourceImageController( Application& application ) : mApplication( application )
-  {
-    mApplication.InitSignal().Connect( this, &ResourceImageController::Create );
-  }
-
-  void Create( Application& application )
-  {
-    ResourceImage image = ResourceImage::New("https://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-light.png");
-    image.LoadingFinishedSignal().Connect(this, &ResourceImageController::OnLoadFinished); 
-
-    ImageView imageView = ImageView::New(image);
-    imageView.SetSize(400,200);
-    imageView.SetParentOrigin(ParentOrigin::CENTER);
-    Stage::GetCurrent().Add(imageView);
-  }
-
-  void OnLoadFinished(ResourceImage image)
-  {
-    LoadingState state = image.GetLoadingState();
-    if(state == ResourceLoadingSucceeded)
-      cout << "Loading " << image.GetUrl() << " is succeeded" << endl;
-    else if(state == ResourceLoadingFailed)
-      cout << "Loading " << image.GetUrl() << " is failed" << endl;
-  }
-};
-</pre>
-
-<p>Please see <a href="multi_threaded_n.htm#resource">Resource Loading with Multi-Threading</a> for more information about the resource threads. 
-
-
-<h3>Load Policies & Release Policies</h3>
-
-<p>By default, resource images start loading immediately and the data is released only when the <span style="font-family: Courier New,Courier,monospace;">ResourceImage</span> handle is destroyed. To optimize the application&#39;s memory footprint, the application can ask resources to be loaded only when actually required and their data to be released automatically when they are no longer being used by actors.</p>
-
-<pre class="prettyprint">Dali::ResourceImage image = Dali::ResourceImage::New(&quot;/my-path/my-image.png&quot;, Dali::ResourceImage::ON_DEMAND, Dali::Image::UNUSED);</pre>
-
-<p>If the <span style="font-family: Courier New,Courier,monospace;">Dali::Image::UNUSED</span> property is used, when the image is used again, the resource data is reloaded automatically.</p>
-
-<h3>Resizing at Load Time</h3>
-
-<p>An application loading images from an external source will often want to display those images at a lower resolution than their native ones. To support this, DALi can resize an image at load time so that its in-memory copy uses less space and its visual quality benefits from being prefiltered. There are four algorithms which can be used to fit an image to a desired rectangle, a desired width or a desired height (see Dali::FittingMode).</p>
-
-<p>Here is an example doing rescaling:</p>
-
-<pre class="prettyprint">
-Dali::Image image = Dali::ResourceImage::New( filename, ImageDimensions( 240, 240 ), FittingMode::SCALE_TO_FILL );
-</pre>
-
-<p>This example sets the size and fitting mode appropriately for a large thumbnail during the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> object construction. In general, to enable scaling on load, pass a non-zero width or height and one of the four fitting modes to the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> creator function as shown above.</p>
-
-<p>The fitting modes and a suggested use-case for each are as follows:</p>
-
-<table>
-	<caption>
-		Table: Fitting Modes
-	</caption>
-	<tbody>
-	<tr>
-		<th>Fitting Mode</th>
-		<th>Suggested Usecase</th>
-	</tr>
-	<tr>
-		<td>Dali::FittingMode::SHRINK_TO_FIT</td>
-		<td>Full-screen image display: Limit loaded image resolution to device resolution but show all of image.</td>
-	</tr>
-	<tr>
-		<td>Dali::FittingMode::SCALE_TO_FILL</td>
-		<td>Thumbnail gallery grid: Limit loaded image resolution to screen tile, filling whole tile but losing a few pixels to match the tile shape.</td>
-	</tr>
-	<tr>
-		<td>Dali::FittingMode::FIT_WIDTH</td>
-		<td>Image columns: Limit loaded image resolution to column.</td>
-	</tr>
-	<tr>
-		<td>Dali::FittingMode::FIT_HEIGHT</td>
-		<td>Image rows: Limit loaded image resolution to row height.</td>
-	</tr>
-	</tbody>
-</table>
-
-
-<h3>Image Size</h3>
-
-<p>If the application requires the image dimensions immediately, they can be retrieved synchronously:</p>
-
-<pre class="prettyprint">Dali::ImageDimensions dimensions = Dali::ResourceImage::GetImageSize(&quot;/my-path/my-image.png&quot;);</pre>
-
-<p>This is a disk read which can be slow and block the event thread (This is currently not suppored for remote resources such as http or https URLs).</p>
-
-<h2 id="patch" name="patch">Nine-Patch Image</h2>
-
-<p>DALi provides support for Nine-patch images which are stretchable images while maintaining their corners.</p>
-
-<h3>Nine-Patch Image Format</h3>
-
-<p>A nine-patch image has nine sections. In the following figure, section 2, 4, 5, 6, 8 are stretched and section 1, 3, 7, 9 keep their size unchanged when the size of the image is changed:</p>
-
-<p class="figure">Figure: A nine-patch image</p>  
-	<p align="center"><img alt="A nine-patch image" src="../../images/nine_patch_dali.9.png"/></p> 
-
-<p class="figure">Figure: A nine-patch image explained</p>  
-	<p align="center"><img alt="A nine-patch image" src="../../images/nine_patch_explained.png"/></p> 
-
-<p>The black lines top and left side of the image determines the stretchable region.</p>
-
-<p>This format is compatible with the one used in Android. Therefore, you can easily make nine-patch images using existing tools such as <a href="https://romannurik.github.io/AndroidAssetStudio/nine-patches.html">Simple Nine-patch Generator</a>.</p>
-
-<h3>Loading Nine-Patch Images</h3>
-
-<p>A nine-patch image can be loaded by <span style="font-family: Courier New,Courier,monospace;">ResourceImage</span> just like other images. If a image file has .9.png or .9.jpg extension and proper nine-patch image contents as forementioned, the image loaded by <span style="font-family: Courier New,Courier,monospace;">ResourceImage</span> will be rendered in nine-patch way with <span style="font-family: Courier New,Courier,monospace;">ImageView</span> class.</p>
-
-<p>The following is an example of using a *.9.png image:</p>
-
-<pre class="prettyprint">
-  ResourceImage image = ResourceImage::New( "nine_patch_dali.9.png" );
-  ImageActor imageView = ImageActor::New(image);
-  imageView.SetSize(200,200);
-</pre>
-
-<p>The result is as follows:</p>
-<p class="figure">Figure: 200 x 200 image</p>  
-	<p align="center"><img alt="200 x 200 image" src="../../images/nine_patch_expanded.png"/></p> 
-
-<h2 id="buffer" name="buffer">Buffer Image</h2>
-
-<p>A <span style="font-family: Courier New,Courier,monospace;">BufferImage</span> represents an image resource in the form of a pixel buffer data. The application can write to this buffer as required and the image is updated on the screen.</p>
-
-<pre class="prettyprint">// Create a 200 by 200 pixel buffer with a color-depth of 32-bits (with alpha)
-Dali::BufferImage image = Dali::BufferImage::New(200, 200);</pre>
-
-<p>Please see API reference for <span style="font-family: Courier New,Courier,monospace;">Dali::BufferImage</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1CameraActor.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1CameraActor.html">wearable</a>) for more details.
-
-    
-<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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/scrollview_n.htm b/org.tizen.ui.guides/html/native/dali/scrollview_n.htm
deleted file mode 100755
index 0121500..0000000
--- a/org.tizen.ui.guides/html/native/dali/scrollview_n.htm
+++ /dev/null
@@ -1,198 +0,0 @@
-<!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>ScrollView: Scrollable Container for Items</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#create">Creating a ScrollView</a></li>
-			<li><a href="#ruler">Ruler, RulerDomain, and Wrap</a></li>
-		</ul>
-		<ul class="toc">
-		<p class="toc-title">Related Info</p>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1DefaultRuler.html">Dali::Toolkit::DefaultRuler API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1FixedRuler.html">Dali::Toolkit::FixedRuler API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Ruler.html">Dali::Toolkit::Ruler API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1RulerDomain.html">Dali::Toolkit::RulerDomain API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollView.html">Dali::Toolkit::ScrollView API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollViewEffect.html">Dali::Toolkit::ScrollViewEffect API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollViewPagePathEffect.html">Dali::Toolkit::ScrollViewPagePathEffect API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1DefaultRuler.html">Dali::Toolkit::DefaultRuler API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1FixedRuler.html">Dali::Toolkit::FixedRuler API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Ruler.html">Dali::Toolkit::Ruler API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1RulerDomain.html">Dali::Toolkit::RulerDomain API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollView.html">Dali::Toolkit::ScrollView API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollViewEffect.html">Dali::Toolkit::ScrollViewEffect API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollViewPagePathEffect.html">Dali::Toolkit::ScrollViewPagePathEffect API for Wearable Native</a></li>			
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>ScrollView: Scrollable Container for Items</h1>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> class provides scrollable view which contains actors and can be scrolled automatically or manually by panning. </p>
-
-<p>The following figure shows example layouts using the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span>.</p>
-
-<p class="figure">Figure: ScrollView</p>  
-	<p align="center"><img alt="ScrollView" src="../../images/scrollview.png"/></p>
-
-
-<p>A scroll view emits a <span style="font-family: Courier New,Courier,monospace;">SnapStartedSignal()</span> when the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> has started to snap or flick. The signal informs the target of the scroll position, scale, and rotation.</p>
-
-<h2 id="create" name="create">Creating a ScrollView</h2>
-
-<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">ScrollView</span>:</p>
-
-<pre class="prettyprint">Dali::Toolkit::ScrollView scrollView;
-
-// Create a ScrollView instance
-myScrollView = ScrollView::New();
-
-// Add it to the stage
-Stage::GetCurrent().Add(scrollView);
-
-// Set the size of stage; it covers the entire stage 
-Stage stage = Dali::Stage::GetCurrent();
-Size size = stage.GetSize();
-scrollView.SetSize(size);
-
-// Add actors to the ScrollView 
-Image image = Image::New(DALI_IMAGE_DIR &quot;button-background.png&quot;);
-ImageActor imageActor = ImageActor::New(image);
-scrollView.Add(imageActor);
-// The ScrollView contents are now draggable
-
-// To enforce horizontal-only scrolling, the Y-axis ruler can be disabled 
-RulerPtr rulerY = new DefaultRuler();
-rulerY-&gt;Disable();
-scrollView.SetRulerY(rulerY);
-
-// To enable snapping, a FixedRuler can be applied to the X-axis, with snap points spaced to the width of the stage. 
-Size size = stage.GetSize();
-RulerPtr rulerX = new FixedRuler(size.width);
-scrollView.SetRulerX(rulerX);
-
-// A domain can be applied to rulers to prevent scrolling beyond this boundary
-// In this case, to 4 times the width of the stage, allowing for 4 pages to be scrolled
-Size size = stage.GetSize();
-RulerPtr rulerX = new FixedRuler(size.width);
-rulerX-&gt;SetDomain(RulerDomain(0.0f, size.width*4.0f));
-scrollView.SetRulerX(rulerX);</pre>
-
-<h2 id="ruler" name="ruler">Ruler, RulerDomain, and Wrap</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">Ruler</span> abstract class defines the scroll axes. The <span style="font-family: Courier New,Courier,monospace;">RulerDomain</span> class specifies the minimum and maximum values of a ruler. The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> class provides a wrap mode for <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents. When enabled, the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents are wrapped over the x/y domain. The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> behavior depends on a combination of the Ruler, RulerDomain, and Wrap modes. The following table shows ScrollView behavior according to the combination.</p>
-
-<table>
-   <caption>
-     Table: Scrollview behavior in the Ruler, RulerDomain, and Wrap mode</caption>
-   <tbody>
-    <tr>
-     <th>Ruler</th>
-	 <th>Domain</th>
-     <th>Wrap</th>
-	 <th>Behavior</th>
-    </tr>
-    <tr>
-		<td>Disabled</td>
-		<td>Disabled</td>
-		<td>Wrap</td>
-		<td>No movement in axis</td>
-	</tr>
-	<tr>
-		<td>Disabled</td>
-		<td>Enabled</td>
-		<td>No wrap</td>
-		<td>No movement in axis</td>
-	</tr>
-	<tr>
-		<td>Disabled</td>
-		<td>Enabled</td>
-		<td>Wrap</td>
-		<td>No movement in axis</td>
-	</tr>
-	<tr>
-		<td>Enabled</td>
-		<td>Disabled</td>
-		<td>No wrap</td>
-		<td>Free movement in axis</td>
-	</tr>
-	<tr>
-		<td>Enabled</td>
-		<td>Disabled</td>
-		<td>Wrap</td>
-		<td>Free movement in axis, wrapped according to domain minimum and maximum</td>
-	</tr>
-	<tr>
-		<td>Enabled</td>
-		<td>Enabled</td>
-		<td>No wrap</td>
-		<td>Movement limited to domain minimum and maximum</td>
-	</tr>
-	<tr>
-		<td>Enabled</td>
-		<td>Enabled</td>
-		<td>Wrap</td>
-		<td>Movement limited to domain minimum and maximum</td>
-	</tr>
-   </tbody>
-  </table>
-  
- <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Actors within a <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> are controlled by constraints. If you apply constraints to these actors externally, undefined behavior can occur. Applying additional constraints can conflict with the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> constraints, so place the actors within container actors. The container actors are affected by the constraints.</td>
-    </tr>
-   </tbody>
- </table>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.ui.guides/html/native/dali/tableview_n.htm b/org.tizen.ui.guides/html/native/dali/tableview_n.htm
deleted file mode 100755
index 6de3ce8..0000000
--- a/org.tizen.ui.guides/html/native/dali/tableview_n.htm
+++ /dev/null
@@ -1,105 +0,0 @@
-<!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>TableView: Container with Grid-like Layout</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TableView.html">Dali::Toolkit::TableView API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TableView.html">Dali::Toolkit::TableView API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>TableView: Container with Grid-like Layout</h1>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">TableView</span> class is a layout container for aligning child actors in a grid like layout. <span style="font-family: Courier New,Courier,monospace;">TableView</span> constraints the x and y position and width and height of the child actors.</p>
-
-<p class="figure">Figure: TableView</p>  
-	<p align="center"><img alt="TableView" src="../../images/tableview.png"/></p>
-	
-<h2 id="create" name="create">Creating a TableView</h2>
-
-<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">TableView</span>:</p>
-
-<pre class="prettyprint">class ButtonsController: public ConnectionTracker
-{
-&nbsp;&nbsp;&nbsp;ButtonsController(Application&amp; application)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: mApplication(application)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ButtonsController::Create);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TableView tableView = TableView::New(4,4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableView.SetKeyboardFocusable(true);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableView.SetName(&quot;TableView&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int row = 0; row &lt; 4; ++row)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int col = 0; col &lt; 4; ++col)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Control control = Control::New();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;std::ostringstream str;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str &lt;&lt; row &lt;&lt; &quot;-&quot; &lt;&lt; col;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;control.SetName(str.str());
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;control.SetKeyboardFocusable(true);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableView.AddChild(control, TableView::CellPosition(row, col));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(tableView);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// Signal
-
-&nbsp;&nbsp;&nbsp;Application&amp; mApplication;
-}</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/textfield_n.htm b/org.tizen.ui.guides/html/native/dali/textfield_n.htm
deleted file mode 100755
index d45daf5..0000000
--- a/org.tizen.ui.guides/html/native/dali/textfield_n.htm
+++ /dev/null
@@ -1,290 +0,0 @@
-<!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>TextField: Type Your Text!</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#create">Creating a TextField</a></li>
-			<li><a href="#align">Text Alignment</a></li>
-			<li><a href="#decorations">Decorations</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextField.html">Dali::Toolkit::TextField API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextField.html">Dali::Toolkit::TextField API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>TextField: Type Your Text!</h1>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">TextField</span> class is a control providing a single-line editable text field.</p>
-
-<p class="figure">Figure: TextField</p>  
-	<p align="center"><img alt="TextField" src="../../images/textfield.png"/></p>
-	
-<h2 id="create" name="create">Creating a TextField</h2>
-
-<p>Before text has been entered, the <span style="font-family: Courier New,Courier,monospace;">TextField</span> can display a placeholder text. An alternative placeholder can be displayed when the <span style="font-family: Courier New,Courier,monospace;">TextField</span> has keyboard focus. For example, a <span style="font-family: Courier New,Courier,monospace;">TextField</span> used to enter a username can initially show the text <span style="font-family: Courier New,Courier,monospace;">Unknown Name</span>, and the text <span style="font-family: Courier New,Courier,monospace;">Enter Name.</span>when the cursor is visible.</p>
-
-<pre class="prettyprint">TextField field = TextField::New();
-field.SetProperty(TextField::Property::PLACEHOLDER_TEXT, &quot;Unnamed Name&quot;);
-field.SetProperty(TextField::Property::PLACEHOLDER_TEXT_FOCUSED, &quot;Enter Name.&quot;);
-Stage::GetCurrent().Add(field);
-</pre>
-
-<p>When the <span style="font-family: Courier New,Courier,monospace;">TextField</span> is tapped, it automatically gets the keyboard focus. Key events enter text, and the placeholder text is removed. After text has been entered, it can be retrieved from the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> property.</p>
-
-<pre class="prettyprint">Property::Value fieldText = field.GetProperty(TextField::Property::TEXT);
-std::cout &lt;&lt; &quot;Received text: &quot; &lt;&lt; fieldText.Get&lt; std::string &gt;() &lt;&lt; std::endl;</pre>
-
-<h2 id="align" name="align">Text Alignment</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">TextField</span> displays a single-line of text, which scrolls if there is not enough space for the text displayed. If there is enough space, the text can be aligned horizontally to the beginning, end, or center of the available area:</p>
-
-<pre class="prettyprint">field.SetProperty(TextField::Property::HORIZONTAL_ALIGNMENT, &quot;BEGIN&quot;); // &quot;CENTER&quot; or &quot;END&quot;</pre>
-
-<h2 id="decorations" name="decorations">Decorations</h2>
-
-<p>For text decorations, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> class provides the properties listed in the following table.</p>
-
-<table>
-   <caption>
-     Table: <span style="font-family: Courier New,Courier,monospace;">TextField</span> properties
-   </caption>
-   <tbody>
-    <tr>
-     <th>Property</th>
-	 <th>Type</th>
-	 <th>Writable</th>
-	 <th>Animatable</th>
-    </tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">RENDERING_BACKEND</span></td>
-		<td>Integer</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-    <tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">TEXT</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT_FOCUSED</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span></td>
-		<td>Float</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">MAX_LENGTH</span></td>
-		<td>Integer</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">EXCEED_POLICY</span></td>
-		<td>Integer</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL_ALIGNMENT</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">VERTICAL_ALIGNMENT</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">COLOR</span></td>
-		<td>Vector4</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span></td>
-		<td>Vector2</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span></td>
-		<td>Vector4</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">PRIMARY_CURSOR_COLOR</span></td>
-		<td>Vector4</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SECONDARY_CURSOR_COLOR</span></td>
-		<td>Vector4</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">ENABLE_CURSOR_BLINK</span></td>
-		<td>Boolean</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_INTERVAL</span></td>
-		<td>Float</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_DURATION</span></td>
-		<td>Float</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_IMAGE</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_PRESSED_IMAGE</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SCROLL_THRESHOLD</span></td>
-		<td>Float</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SCROLL_SPEED</span></td>
-		<td>Float</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_IMAGE_RIGHT</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_LEFT</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_RIGHT</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HIGHLIGHT_COLOR</span></td>
-		<td>Vector4</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">DECORATION_BOUNDING_BOX</span></td>
-		<td>Rectangle</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">INPUT_METHOD_SETTINGS</span></td>
-		<td>Map</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-   </tbody>
-  </table>
-
-<p>To change the color of the text, use the <span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span> property. An alternative color can be used for placeholder text by setting the <span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT_COLOR</span> property. Unlike the <span style="font-family: Courier New,Courier,monospace;">Actor::COLOR</span> property, these properties do not affect child actors added to the <span style="font-family: Courier New,Courier,monospace;">TextField</span>.</p>
-
-<pre class="prettyprint">field.SetProperty(TextField::Property::TEXT_COLOR, Color::CYAN);
-field.SetProperty(TextField::Property::PLACEHOLDER_TEXT_COLOR, Color::BLACK);</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/textlabel_n.htm b/org.tizen.ui.guides/html/native/dali/textlabel_n.htm
deleted file mode 100755
index 49e721c..0000000
--- a/org.tizen.ui.guides/html/native/dali/textlabel_n.htm
+++ /dev/null
@@ -1,298 +0,0 @@
-<!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>TextLabel: Displaying Text Labels</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#create">Creating a TextLabel</a></li>
-			<li><a href="#select">Font Selection</a></li>
-			<li><a href="#align">Text Alignment</a></li>
-			<li><a href="#size">Layout</a></li>
-			<li><a href="#decoration">Decorations</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">Dali::Toolkit::TextLabel API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">Dali::Toolkit::TextLabel API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>TextLabel: Displaying Text Labels</h1>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> class provides a control that renders a short text string. The text labels are lightweight, non-editable, and do not respond to user input.</p>
-
-<p class="figure">Figure: TextLabel</p>  
- 	<p align="center"><img alt="TextLabel" src="../../images/textlabel.png"/></p>
-
-<h2 id="create" name="create">Creating a TextLabel</h2>
-
-<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> instance:</p>
-
-<pre class="prettyprint">TextLabel label = TextLabel::New();
-label.SetProperty(TextLabel::Property::TEXT, &quot;Hello World&quot;);
-Stage::GetCurrent().Add(label);</pre>
-
-<h2 id="select" name="select">Font Selection</h2>
-
-<p>By default, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> automatically selects a suitable font from the platform. Please note that the selected font might not support all characters in your input text. For example, Latin fonts often do not provide Arabic glyphs.</p>
-
-<p>Alternatively, you can request a font using the <span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span>, <span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span>, and <span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span> properties:</p>
-
-<pre class="prettyprint">label.SetProperty(TextLabel::Property::FONT_FAMILY, &quot;HelveticaNue&quot;);
-label.SetProperty(TextLabel::Property::FONT_STYLE,  &quot;Regular&quot;);
-label.SetProperty(TextLabel::Property::POINT_SIZE,  12.0f);</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> falls back to using the default font if the requested font does not support the required scripts.</p>
-
-<h2 id="align" name="align">Text Alignment</h2>
-
-<p>Wrapping can be enabled using the <span style="font-family: Courier New,Courier,monospace;">MULTI_LINE</span> property:</p>
-
-<pre class="prettyprint">label.SetProperty(TextLabel::Property::MULTI_LINE, true);</pre>
-
-<p>The text can be aligned horizontally to the beginning, end, or center of the available area:</p>
-
-<pre class="prettyprint">label.SetProperty(TextLabel::Property::HORIZONTAL_ALIGNMENT, &quot;BEGIN&quot;); // &quot;CENTER&quot; or &quot;END&quot;</pre>
-
-<h2 id="size" name="size">Layout</h2>
-
-<p>There are several resize policies commonly used with <span style="font-family: Courier New,Courier,monospace;">TextLabels</span>.
-The following examples show the actual size by setting a colored background, whilst the black area represents the size of the parent control.</p>
-
-<h3 id="font" name="font">Natural Size Policy</h3>
-
-<p>In its natural size, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> is large enough to display the text without wrapping, and does not have extra space to align the text within. In the following example, the same result is displayed regardless of the alignment or multi-line properties:</p>
-
-<pre class="prettyprint">TextLabel label = TextLabel::New(&quot;Hello World&quot;);
-label.SetAnchorPoint(AnchorPoint::TOP_LEFT);
-label.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE,Dimension::ALL_DIMENSIONS);
-label.SetBackgroundColor(Color::BLUE);Stage::GetCurrent().Add(label);</pre>
-
-<h3 id="font" name="font">Height-for-width Policy</h3>
-
-<p>To lay out text labels vertically, a fixed (maximum) width must be provided by the parent control. Each <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> reports the desired height for the given width. The following example uses <span style="font-family: Courier New,Courier,monospace;">TableView</span> as the parent:</p>
-
-<pre class="prettyprint">TableView parent = TableView::New(3, 1);
-parent.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-parent.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
-parent.SetAnchorPoint(AnchorPoint::TOP_LEFT);
-
-Stage::GetCurrent().Add(parent);
-
-TextLabel label = TextLabel::New(&quot;Hello World&quot;);
-label.SetAnchorPoint(AnchorPoint::TOP_LEFT);
-label.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-label.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);
-label.SetBackgroundColor(Color::BLUE);
-
-parent.AddChild(label, TableView::CellPosition(0, 0));
-parent.SetFitHeight(0);
-
-label = TextLabel::New(&quot;A Quick Brown Fox Jumps Over The Lazy Dog&quot;);
-label.SetAnchorPoint(AnchorPoint::TOP_LEFT);
-label.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-label.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);
-label.SetBackgroundColor(Color::GREEN);
-label.SetProperty(TextLabel::Property::MULTI_LINE, true);
-
-parent.AddChild(label, TableView::CellPosition(1, 0));
-parent.SetFitHeight(1);
-
-label = TextLabel::New(&quot;لإعادة ترتيب الشاشات، يجب تغيير نوع العرض إلى شبكة قابلة للتخصيص&quot;);
-label.SetAnchorPoint(AnchorPoint::TOP_LEFT);
-label.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-label.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);
-label.SetBackgroundColor(Color::BLUE);
-label.SetProperty(TextLabel::Property::MULTI_LINE, true);
-
-parent.AddChild(label, TableView::CellPosition(2, 0));
-parent.SetFitHeight(2);</pre>
-
-<p>In the example, the &quot;Hello World&quot; text label has been given the full width, not the natural width.</p>
-
-<h2 id="decoration" name="decoration">Decorations</h2>
-
-<p>For text decorations, <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> provides several properties.</p>
-
-<table>
-   <caption>
-     Table: <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> properties
-   </caption>
-   <tbody>
-    <tr>
-     <th>Property</th>
-	 <th>Type</th>
-	 <th>Writable</th>
-	 <th>Animatable</th>
-    </tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">RENDERING_BACKEND</span></td>
-		<td>Integer</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-    <tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">TEXT</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span></td>
-		<td>Float</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">MULTI_LINE</span></td>
-		<td>Boolean</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL_ALIGNMENT</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">VERTICAL_ALIGNMENT</span></td>
-		<td>String</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span></td>
-		<td>Vector4</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span></td>
-		<td>Vector2</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span></td>
-		<td>Vector4</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_ENABLED</span></td>
-		<td>Boolean</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_COLOR</span></td>
-		<td>Vector4</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_HEIGHT</span></td>
-		<td>Float</td>
-		<td>Yes</td>
-		<td>No</td>
-	</tr>
-   </tbody>
-  </table>
-
-<h3 id="font" name="font">Color</h3>
-
-<p>To change the color of the text, use the <span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span> property. Unlike the <span style="font-family: Courier New,Courier,monospace;">Actor::COLOR</span> property, this does not affect child actors added to the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span>.</p>
-
-<pre class="prettyprint">label.SetProperty(TextLabel::Property::TEXT, &quot;Red Text&quot;);
-label.SetProperty(TextLabel::Property::TEXT_COLOR, Color::RED);</pre>
-
-<h3 id="drop" name="drop">Drop Shadow</h3>
-
-<p>To add a drop shadow to the text, set the <span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span> property with a non-zero values. The color can also be selected using the <span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span> property.</p>
-
-<pre class="prettyprint">stage.SetBackgroundColor(Color::BLUE);
-label1.SetProperty(TextLabel::Property::TEXT, &quot;Plain Text&quot;);
-label2.SetProperty(TextLabel::Property::TEXT, &quot;Text with Shadow&quot;);
-label2.SetProperty(TextLabel::Property::SHADOW_OFFSET, Vector2(1.0f, 1.0f));
-label2.SetProperty(TextLabel::Property::SHADOW_COLOR, Color::BLACK);
-label3.SetProperty(TextLabel::Property::TEXT, &quot;Text with Bigger Shadow&quot;);
-label3.SetProperty(TextLabel::Property::SHADOW_OFFSET, Vector2(2.0f, 2.0f));
-label3.SetProperty(TextLabel::Property::SHADOW_COLOR, Color::BLACK);
-label4.SetProperty(TextLabel::Property::TEXT, &quot;Text with Color Shadow&quot;);
-label4.SetProperty(TextLabel::Property::SHADOW_OFFSET, Vector2(1.0f, 1.0f));
-label4.SetProperty(TextLabel::Property::SHADOW_COLOR, Color::RED);</pre>
-
-<h3 id="underlining" name="underlining">Underlining</h3>
-
-<p>The text can be underlined by setting <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_ENABLED</span>. The color can also be selected using the <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_COLOR</span> property.</p>
-
-<pre class="prettyprint">label1.SetProperty(TextLabel::Property::TEXT, &quot;Text with Underline&quot;);
-label1.SetProperty(TextLabel::Property::UNDERLINE_ENABLED, true);
-label2.SetProperty(TextLabel::Property::TEXT, &quot;Text with Color Underline&quot;);
-label2.SetProperty(TextLabel::Property::UNDERLINE_ENABLED, true);
-label2.SetProperty(TextLabel::Property::UNDERLINE_COLOR, Color::GREEN); </pre>
-
-<p>By default, the underline height is based on the font metrics. This can be overridden using the <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_HEIGHT</span> property:</p>
-
-<pre class="prettyprint">label1.SetProperty(TextLabel::Property::UNDERLINE_HEIGHT, 1.0f);</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>
-
diff --git a/org.tizen.ui.guides/html/native/dali/ui_components_n.htm b/org.tizen.ui.guides/html/native/dali/ui_components_n.htm
deleted file mode 100755
index c7160c2..0000000
--- a/org.tizen.ui.guides/html/native/dali/ui_components_n.htm
+++ /dev/null
@@ -1,121 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>UI Components: Creating the Application Layout</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/###.html">Dali::Toolkit API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/###.html">Dali::Toolkit API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>UI Components: Creating the Application Layout</h1>
-
-<p>UI components are interactive components for layouting and scrolling the user interface. DALi provides UI components, such as buttons, item view, scroll view, table view, and text controls.</p>
-
-<p class="figure">Figure: DALi UI components</p>  
-	<p align="center"><img alt="DALi UI components" src="../../images/ui_controls.png"/></p>
-
-<p>The following table lists the available UI components.</p>
-
-<table>
-   <caption>
-     Table: DALi UI components
-   </caption>
-   <tbody>
-    <tr>
-     <th>Control</th>
-	 <th>Description</th>
-	 <th>Related classes</th>
-    </tr>
-    <tr>
-		<td><a href="buttons_n.htm">Buttons</a></td>
-		<td>A push button that can be pressed, a checkbox button that can be checked/unchecked,and a radio button that only one option can be selected.</td>
-		<td><span style="font-family: Courier New,Courier,monospace;">Button, PushButton, CheckBoxButton, RadioButton</span></td>
-	</tr>
-	<tr>
-		<td><a href="itemview_n.htm">ItemView</a></td>
-		<td>An item view that renders item sets in a scrollable layout.</td>
-		<td><span style="font-family: Courier New,Courier,monospace;">ItemView, ItemFactory, ItemLayout, Scrollable</span></td>
-	</tr>
-	<tr>
-		<td><a href="scrollview_n.htm">ScrollView</a></td>
-		<td>A scroll view to provide scrollable view.</td>
-		<td><span style="font-family: Courier New,Courier,monospace;">ScrollView, Scrollable, ScrollViewEffect, ScrollViewPagePathEffect</span></td>
-	</tr>
-	<tr>
-		<td><a href="tableview_n.htm">TableView</a></td>
-		<td>A table view that can align child actors in a grid like layout.</td>
-		<td><span style="font-family: Courier New,Courier,monospace;">TableView</span></td>
-	</tr>
-	<tr>
-		<td><a href="textfield_n.htm">TextField</a></td>
-		<td>A text field that provides a single-line editable text field.</td>
-		<td><span style="font-family: Courier New,Courier,monospace;">TextField</span></td>
-	</tr>
-	<tr>
-		<td><a href="textlabel_n.htm">TextLabel</a></td>
-		<td>A text label that renders a short text string.</td>
-		<td><span style="font-family: Courier New,Courier,monospace;">TextLabel</span></td>
-	</tr>
-	<tr>
-		<td><a href="imageview_n.htm">ImageView</a></td>
-		<td>An image view that renders an image.</td>
-		<td><span style="font-family: Courier New,Courier,monospace;">ImageView</span></td>
-	</tr>
-   </tbody>
-  </table>
-  
-<p>The base class for the components is <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">wearable</a> applications). This class can also be used to create your own custom UI components. Please find some tips for the base control class in <a href="control_base_n.htm">Control: Base Class of UI Components</a>. For remainder of this guide, the term "control" or "component" can be used to indicate UI component.</p>
- 
-<p>The following figure illustrates the hierarchy of the UI components.</p>
-
-<p class="figure">Figure: DALi UI control hierarchy</p>  
-	<p align="center"><img alt="DALi UI control hierarchy" src="../../images/ui_control_hierarchy.png"/></p> 
-	
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.ui.guides/html/native/efl/animation_effects_n.htm b/org.tizen.ui.guides/html/native/efl/animation_effects_n.htm
deleted file mode 100755
index c6ee375..0000000
--- a/org.tizen.ui.guides/html/native/efl/animation_effects_n.htm
+++ /dev/null
@@ -1,84 +0,0 @@
-<!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>Animations and Effects: Creating Transformations</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Mobile Wearable</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Animations and Effects: Creating Transformations</h1> 
-
-<p>EFL provides the following animation functionalities: Ecore animators, Elementary transitions, Edje animations, and Evas Map animations.</p>
-
-<p>The first option for creating animations with EFL is to use <a href="ecore_animation_n.htm">Ecore animators</a>. To create an Ecore animation, you must first determine the duration of the animation, and then define a callback function that performs the animation with that duration.</p>
-
-<p>You can also create animations using <a href="elementary_animation_n.htm">Elementary transitions</a>. Elementary transitions allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary transitions are mostly based on Ecore animators, but provide some transition methods at a higher level of abstraction. Elementary transitions provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
-
-<p>A third option for animating objects is to use <a href="edje_animation_n.htm">Edje animations</a>, which are based on a simple principle: transitioning from one state to another. To animate an object with Edje, you have to first define the start and end states of the animation, and then transition the object from the start state to the end state.</p>
-
-<p>Finally, <a href="evas_map_animation_n.htm">Evas Map animations</a> allow you to apply transformations to all types of objects by way of UV mapping. In UV mapping, you map points in the source object to 3D space positions in the target object. This allows for rotation, perspective, scale, and other transformation effects, depending on the map. In addition, each map point can carry a multiplier color, which, if properly calculated, can be used to apply 3D shading effects on the target object.</p> 
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/basic_tutorial_mn.htm b/org.tizen.ui.guides/html/native/efl/basic_tutorial_mn.htm
deleted file mode 100755
index 1e662b5..0000000
--- a/org.tizen.ui.guides/html/native/efl/basic_tutorial_mn.htm
+++ /dev/null
@@ -1,285 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Basic Mobile Interactions</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#button">Using Buttons</a></li>
-			<li><a href="#simple_text">Using Simple Text</a></li>
-			<li><a href="#simple_list">Using Simple Lists</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>		
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Basic Mobile Interactions</h1>
-
-  
-<p>This tutorial teaches the basics of UI components interactions. It builds upon the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
- <h2 id="button" name="button">Using Buttons</h2>
-
-<p>The basic application code is the same as in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
-
-<h3>Button Styles </h3>
-<h4>Basic Text Button</h4>
-
-<p>To create a text-only button, use the following code.</p>
-<pre class="prettyprint">Evas_Object* button;
-
-button = elm_button_add(box);
-elm_object_text_set(button, &quot;Click me&quot;);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button);
-evas_object_show(button);
-</pre>
-
-<h4>Basic Icon Button</h4>
-<p>Instead of a button with text, create a button with an icon.</p>
-<pre class="prettyprint">Evas_Object* button2;
-Evas_Object* icon2;
-
-button2 = elm_button_add(box);
-icon2 = elm_icon_add(box);
-elm_image_file_set(icon2, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(button2, &quot;icon&quot;, icon2);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button);
-evas_object_show(button);
-</pre>
-
-<h4>Icon and Text Button</h4>
-<p>Create buttons with both an icon and a text label.</p>
-<pre class="prettyprint">Evas_Object* button3;
-Evas_Object* icon3;
-button3 = elm_button_add(box);
-icon3 = elm_icon_add(box);
-elm_image_file_set(icon, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(button3, &quot;icon&quot;, icon3);
-elm_object_text_set(button3, &quot;Press me&quot;);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button);
-evas_object_show(button);
-</pre>
-
-<h4>Disabled Button</h4>
-<p>To disable a button so that it is not in use, only shown.</p>
-<pre class="prettyprint">elm_object_disabled_set(button2, EINA_TRUE);
-</pre>
-
-<h3>Callbacks </h3>
-<p>The Elementary buttons respond to user interactions with several events.</p>
-
-<h4>Click Event</h4>
-<p>The &quot;click&quot; event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.</p>
-<pre class="prettyprint">
-static void _button_click_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Clicked!&quot;);
-}
-evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_click_cb, NULL);
-</pre>
-
-<h4>Press/Unpress Events</h4>
-<p>The button can respond to the press and unpress events instead of the entire click event.</p>
-<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pressed!&quot;);
-}
-static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Unpressed!&quot;);
-}
-
-evas_object_smart_callback_add(button3, &quot;pressed&quot;, _button_press_cb, NULL);
-evas_object_smart_callback_add(button3, &quot;unpressed&quot;, _button_unpress_cb, NULL);
-</pre>
-
-<h4>Repeated Events</h4>
-<p>The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.</p>
-<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;static int count = 0;
-&nbsp;&nbsp;&nbsp;char buf[16];
-
-&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Repeat %d&quot;, count++);
-
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, buf);
-}
-
-elm_button_autorepeat_set(button3, EINA_TRUE);
-elm_button_autorepeat_initial_timeout_set(button3, 1.0);
-elm_button_autorepeat_gap_timeout_set(button3, 0.5);
-evas_object_smart_callback_add(button3, &quot;repeated&quot;, _button_repeat_cb, NULL);
-</pre>
-
- <h2 id="simple_text" name="simple_text">Using Simple Text</h2>
-
-<h3>Basic Text</h3>
-<p>To create a label object, use the following code.</p>
-<pre class="prettyprint">label = elm_label_add(ad-&gt;win);
-elm_object_text_set(label, &quot;My label&quot;);
-evas_object_show(label);
-</pre>
-
-<h3>Sliding Text</h3>
-<p>If your text is too long, set it to slide. The duration of the slide is set to five seconds in the following example. There are several styles available:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text stops at an edge, reverts to its initial position and slides again.</li>
-<li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text is originally empty. It slides in, all the way to the edge, continues sliding until the label is empty, and loops.</li>
-<li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text moves backwards after stopping at the edge. In the example, it is set to bounce.</li>
-</ul>
-
-<pre class="prettyprint">Evas_Object* label;
-label = elm_label_add(-&gt;win);
-elm_object_text_set(label, &quot;This text is supposed to be really long.&quot;);
-elm_label_slide_set(label, EINA_TRUE);
-elm_label_slide_duration_set(label, 5.);
-elm_object_style_set(label, &quot;slide_bounce&quot;);
-evas_object_show(label);
-</pre>
-
-<p>If needed, you can use the <span style="font-family: Courier New,Courier,monospace">slide,end</span> event to respond to the moment when the sliding text reaches its end.</p>
-
-<h3>Marker Text</h3>
-<p>A marker is a text that is centered and bold by default. As the default color is white, set the blue color in this example.</p>
-<pre class="prettyprint">elm_object_style_set(label, &quot;marker&quot;);
-evas_object_color_set(label, 0, 0, 255, 255);
-</pre>
-
-<h3>Styling the Text</h3>
-<p>You can apply basic styles to the text. For a bolded text, do as follows.</p>
-<pre class="prettyprint">elm_object_text_set(label, &quot;&lt;b&gt;This text is bold.&lt;/b&gt;&quot;);
-</pre>
-
- <h2 id="simple_list" name="simple_list">Using Simple Lists</h2>
-
-<h3>Basic List</h3>
-<p>A list is a scrollable container, whose children are selected.</p>
-<pre class="prettyprint">Evas_Object* list;
-Evas_Object* icon;
-list = elm_list_add(ad-&gt;win);
-elm_list_item_append(list, &quot;Text item&quot;, NULL, NULL, NULL, NULL);
-icon = elm_icon_add(ad-&gt;win);
-elm_icon_standard_set(icon, &quot;chat&quot;);
-elm_list_item_append(list, &quot;Second item&quot;, icon, NULL, NULL, NULL);
-Evas_Object* button;
-button = elm_button_add();
-elm_object_text_set(button, &quot;Button&quot;);
-elm_list_item_append(list, &quot;Fourth item&quot;, NULL, button, NULL, NULL);
-elm_list_go(list);
-</pre>
-
-<p>Any Evas Object can be added as an icon, either at the beginning (third parameter) or the end (fourth parameter).</p>
-
-<h3>List Orientation</h3>
-<p>By default, a list is set vertically. This is how to display it horizontally.</p>
-<pre class="prettyprint">elm_list_horizontal_set(list, EINA_TRUE);
-</pre>
-
-<h3>List Mode</h3>
-<p>There are several modes for the list item dimensions.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>: The list does not set any size measures to inform the container how to resize it. If the list is not created as a &quot;resize object&quot;, its dimensions are zeroed. The list respects the container&#39;s geometry and if any of the list items do not fit into the container transverse axis, the list does not scroll in that direction.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_SCROLL</span>: This is the default value. This list is the same as ELM_LIST_COMPRESS, with the exception that if any of the list items do not fit into the container transverse axis, the list still scrolls in that direction.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>: This list sets a minimum size measure on the list object, so that containers may respect it (and resize themselves to fit the child properly). More specifically, a minimum size measure is set for its transverse axis, so that the largest item in that direction fits well. This feature is bound by the list object&#39;s maximum size measures that are set externally.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_EXPAND</span>: Besides setting a minimum size on the transverse axis, as in <span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>, this list sets a minimum size on the longitudinal axis to reserve space for all its children to be visible at the same time. This feature is bound by the list object&#39;s maximum size measures that are set externally.</li>
-</ul>
-<pre class="prettyprint">elm_list_mode_set(list, ELM_LIST_COMPRESS);
-</pre>
-
-<h3>Scroller Policy</h3>
-<p>Several effects are shown on a list.</p>
-<p>For example, the scroller is set to bounce at the end on either direction.</p>
-<pre class="prettyprint">elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
-</pre>
-
-
-<p>This is how to control displaying scrollbars. The second argument is for the horizontal axis, the third one for the vertical axis.</p>
-<pre class="prettyprint">elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_ON);
-</pre>
-
-<p>As for the bounce preference, the second argument is for the horizontal axis, the third one for the vertical axis.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> hides the scrollbar</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span> shows the scrollbar</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> the scrollbar is  shown only when needed and stays hidden at other times</li>
-</ul>
-
-<h3>Events</h3>
-<p>A list responds to several events:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user clicks or presses an item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The user scrolls the list to the top edge.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The user scrolls the list to the bottom edge.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The user scrolls the list to the left edge.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The user scrolls the list to the right edge.</li>
-<li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: An item is pressed and highlighted.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The press and highlight is removed on an item.</li>
-</ul>
-	
-<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>
diff --git a/org.tizen.ui.guides/html/native/efl/button_tutorial_wn.htm b/org.tizen.ui.guides/html/native/efl/button_tutorial_wn.htm
deleted file mode 100755
index 09fbae2..0000000
--- a/org.tizen.ui.guides/html/native/efl/button_tutorial_wn.htm
+++ /dev/null
@@ -1,231 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Wearable Buttons</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#init">Initializing the Button Application</a></li>
-			<li><a href="#style">Using Button Styles</a></li>
-			<li><a href="#event">Managing Button Events</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Wearable Buttons</h1>
-
-  
-<p>This tutorial teaches the basics of the button component interactions.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-
-<h2 id="init" name="init">Initializing the Button Application</h2>
-	
-<p>This use case creates an application with a window entitled &quot;Button Basic Tutorial&quot;. The window consists of a box component, and a button is placed inside the box.</p>
-	
-<p>To create a typical elementary application:</p> 
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad) 
-{
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;Evas_Object *btn1, *btn2, *btn3;
-
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Button Basic Tutorial&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;box = elm_box_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;box);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;box);
-
-&nbsp;&nbsp;&nbsp;create_button(ad-&gt;box);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-
-static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;struct app_data ad = {0,};
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-
-&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
-}</pre>
-	
-	
- <h2 id="style" name="style">Using Button Styles</h2>
-
-<p>The basic application code is the same as in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
-
-<p>To use various button styles:</p>
-
-<ol><li><p>To create buttons using various styles:</p>
-
-<ul><li>Create a basic text-only button:
-
-<pre class="prettyprint">Evas_Object* button;
-
-button = elm_button_add(box);
-elm_object_text_set(button, &quot;Click me&quot;);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button);
-evas_object_show(button);
-</pre></li>
-
-<li>Create a basic icon button (no text, just an icon):
-<pre class="prettyprint">Evas_Object* button2;
-Evas_Object* icon2;
-
-button2 = elm_button_add(box);
-icon2 = elm_icon_add(box);
-elm_image_file_set(icon2, &quot;icon.png&quot;, NULL);
-elm_object_content_set(button2, icon2);
-evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button2, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button2);
-evas_object_show(button2);
-</pre></li>
-
-<li>Create a button with both an icon and a text label:
-<pre class="prettyprint">Evas_Object* button3;
-Evas_Object* icon3;
-button3 = elm_button_add(box);
-icon3 = elm_icon_add(box);
-elm_image_file_set(icon3, &quot;icon.png&quot;, NULL);
-elm_object_content_set(button3, icon3);
-elm_object_text_set(button3, &quot;Press me&quot;);
-evas_object_size_hint_weight_set(button3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button3, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button3);
-evas_object_show(button3);
-</pre></li>
-</ul></li>
-<li><p>To disable a button so that it is not in use, only shown:</p>
-<pre class="prettyprint">elm_object_disabled_set(button2, EINA_TRUE);
-</pre></li></ol>
-
- <h2 id="event" name="event">Managing Button Events</h2>
-<p>The Elementary buttons respond to user interactions with several events.</p>
-<p>To manage button events:</p>
-
-<ul> 
-<li>Handle click events:
-<p>The &quot;click&quot; event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.</p>
-<pre class="prettyprint">
-static void _button_click_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Clicked!&quot;);
-}
-evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_click_cb, NULL);
-</pre></li>
-
-<li>Handle press and unpress events:
-<p>The button can respond to the separate press and unpress events instead of the entire click event.</p>
-<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pressed!&quot;);
-}
-static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Unpressed!&quot;);
-}
-
-evas_object_smart_callback_add(button3, &quot;pressed&quot;, _button_press_cb, NULL);
-evas_object_smart_callback_add(button3, &quot;unpressed&quot;, _button_unpress_cb, NULL);
-</pre></li>
-
-<li>Handle repeated events:
-<p>The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.</p>
-<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;static int count = 0;
-&nbsp;&nbsp;&nbsp;char buf[16];
-
-&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Repeat %d&quot;, count++);
-
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, buf);
-}
-
-elm_button_autorepeat_set(button3, EINA_TRUE);
-elm_button_autorepeat_initial_timeout_set(button3, 1.0);
-elm_button_autorepeat_gap_timeout_set(button3, 0.5);
-evas_object_smart_callback_add(button3, &quot;repeated&quot;, _button_repeat_cb, NULL);
-</pre></li></ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/component_custom_n.htm b/org.tizen.ui.guides/html/native/efl/component_custom_n.htm
deleted file mode 100755
index d3f8043..0000000
--- a/org.tizen.ui.guides/html/native/efl/component_custom_n.htm
+++ /dev/null
@@ -1,557 +0,0 @@
-<!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>Customizing Components</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-				<li><a href="#elm_theme">Elementary Theme</a></li>
-				<li><a href="#customizing_style">Customizing a UI Component Style</a></li>
-				</ul>	
-	<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Customizing Components</h1> 
-  
-
-<p>Elementary UI components use the Edje library EDC themes to manage their look.</p>
-
-<h2 id="elm_theme" name="elm_theme">Elementary Theme</h2>
-
-<p>An Elementary theme is an Edje EDC file that contains groups composed of parts and programs. For more information about Edje, see <a href="theme_n.htm">Theme</a>.</p>
-
-<h3 id="use_theme_styles" name="use_theme_styles">Using Theme Styles</h3>
-
-<p>Elementary UI components provide a way to modify only some parts of the styles using the default theme. A style is a part of the EDC theme (a group) that concerns only one UI component. For example, you can create a new style for a button component to change its appearance without modifying the default theme.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">When creating a new style, knowledge of how each UI component is themed is required, because setting another style always replaces the entire group used by the UI component. Important signals and parts must be there for the object to behave properly.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>When several styles are loaded in the current theme, you can set a different style to a specific UI component using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. It is also possible to see the current style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function.</p>
-
-<p>The default theme specifies several styles for the button component. The code below shows how to set the &quot;anchor&quot; style of a newly created button component.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *button;
-
-// Create a button object 
-button = elm_button_add(parent);
-
-// Set its style to &quot;anchor"&quot;
-elm_object_style_set(button, &quot;anchor&quot;);
-</pre>
-
-<h3 id="load_theme_styles" name="load_theme_styles">Loading Theme Styles</h3>
-
-<p>Once written and compiled with Edje tools, the Elementary provides two methods to load the style in the application theme:</p>
-  <ul>
-   <li>overlays</li>
-   <li>extensions</li>
-  </ul>
-
-<p>When looking for a theme, the Elementary checks the list of overlays, if any are defined. Then it takes the default theme, and if it cannot find a theme for the UI component, it looks at the extensions list.</p>
-
-<h4 id="overlay_chapter" name="overlay_chapter">Overlay</h4>
-
-<p>An overlay can replace the look of all UI components by overriding the default style. If we create a new style called &quot;default&quot; for the button component and add it as an overlay, the Elementary uses the overlay for all button components overriding the default theme.</p>
-
-<p>Here is how to add an overlay to your application&#39;s theme.</p>
-
-<pre class="prettyprint">
-elm_theme_overlay_add(NULL, &quot;./theme_button.edj&quot;);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Here we assume that the &quot;theme_button.edj&quot; file only contains a new theme for the button component.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Doing this is not recommended. Adding a file as an overlay makes the Elementary use the new theme for all the button components defined in the application. You must make sure that the &quot;theme_button.edj&quot; file reimplements everything that was previously defined in the default theme concerning the button component.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p>This is how to remove the previously added overlay to return to the default theme.</p>
-
-<pre class="prettyprint">
-elm_theme_overlay_del(NULL, &quot;./theme_button.edj&quot;);
-</pre>
-
-<h4 id="extension" name="extension">Extension</h4>
-
-<p>With extensions, we can write styles that we can apply to some UI components (not all of them) by using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
-
-<p>The application adds a theme to the list of extensions with the following call.</p>
-
-<pre class="prettyprint">
-elm_theme_extension_add(NULL, &quot;./theme_button_style_custom.edj&quot;);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Here we assume that the &quot;theme_button_style_custom.edj&quot; file contains a new button style called &quot;custom&quot;.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>This is how to use the new &quot;custom&quot; style on a button component.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *button;
-
-// Create a button object 
-button = elm_button_add(parent);
-
-// Set its style to &quot;custom&quot; 
-elm_object_style_set(button, &quot;custom&quot;);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">When using <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add</span> or <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add</span> to add a new theme extension or overlay to a Theme object (here called the default theme), the Elementary calls the <span style="font-family: Courier New,Courier,monospace">elm_theme_flush</span> function to flush Elementary theme caches. Thus, the theme of all UI components that use the default theme is reloaded.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<h3 id="create_new_theme" name="create_new_theme">Creating a New Theme</h3>
-
-<p>This is how to create a new theme object.</p>
-
-<pre class="prettyprint">
-Elm_Theme *new_theme = elm_theme_new();
-</pre>
-
-<p>This function creates an empty specific theme that only uses the default theme. It has its own private set of extensions and overlays (which are empty by default). Specific themes do not fall back to the themes of parent objects. They are not intended for this use.</p>
-
-<p>This is how to apply this theme to a UI component and its children (a button, for example).</p>
-
-<pre class="prettyprint">
-// Create a button component 
-Evas_Object *button = elm_button_add();
-
-// Set the new theme to the button component 
-elm_object_theme_set(button, new_theme);
-</pre>
-
-<h2 id="customizing_style" name="customizing_style">Customizing a UI Component Style</h2>
-
-<p>UI component themes are written in Edje EDC source files (.edc). These files are compiled with Edje tools to make an .edj file that is used by the application. For more information on using the EDC language, see <a href="theme_n.htm">Theme</a>.</p>
-
-<p>A new Edje style can be added for a UI component. The best way is to copy the existing &quot;default&quot; style, rename it, and update it to your needs.</p>
-
-<h3 id="check_custom_style" name="check_custom_style">Creating a Customized Style for the Check Component</h3>
-
-<p>As an example, we show how to create a new style for the <span style="font-family: Courier New,Courier,monospace">check</span> component. The aim is to update the background and the main pictures of this UI component with custom pictures.</p>
-
-<p>The EDC source file concerning the check component (check.edc file) is composed of several groups.</p>
-
-<pre class="prettyprint">
-group 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/default&quot;;
-}
-
-group 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/toggle&quot;;
-}
-</pre>
-
-<p>Those two groups define two different styles for the check component (the &quot;default&quot; style and the &quot;toggle&quot; style).</p>
-
-<p>We copy the group corresponding to the &quot;default&quot; style in a new file to create a new style called &quot;custom&quot;. This new style is saved in the &quot;check_custom.edc&quot; file.</p>
-
-<pre class="prettyprint">
-group 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/custom&quot;;
-&nbsp;&nbsp;&nbsp;// Here is the copy of the content of &quot;default&quot; style 
-}
-</pre>
-
-<p>In the new group (&quot;elm/check/base/custom&quot;), we have to find the parts we want to modify. Here, the appropriate parts are &quot;bg&quot; and &quot;check&quot; parts.</p>
-
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;mouse_events: 0;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: 1 -2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 16 16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: VERTICAL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;check_base.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 5 5 5 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill.smooth: 0;
-&nbsp;&nbsp;&nbsp;}
-}
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;check&quot;;
-&nbsp;&nbsp;&nbsp;mouse_events: 0;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -2 -2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;check.png&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 128 128 128 128;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 128 128 128 128;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>We do not detail all the options that can be modified here, but assume that the user is familiar with <a href="theme_n.htm">Edje</a> and knows Edje basics.</p>
-
-<p>Our custom pictures filenames are:</p>
-  <ul>
-   <li>check_base_custom.png for the bg part</li>
-   <li>check_custom.png for the check part</li></ul>
-
-<p>We must update the image.normal attribute in both parts with our custom pictures filenames to modify the pictures of this style.</p>
-
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;   
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;check_base_custom.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 5 5 5 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-                
-&nbsp;&nbsp;&nbsp;}
-}
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;check&quot;;
-        
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-            
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;check_custom.png&quot;;
-&nbsp;&nbsp;&nbsp;}
-        
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Here, we assume that the custom images are the same size as the &quot;default&quot; images.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<h3 id="add_theme_to_project" name="add_theme_to_project">Adding the Theme File to Your Project</h3>
-
-<p>Once written, the check_custom.edc file is put in the <span style="font-family: Courier New,Courier,monospace">/res/edje/</span>. directory of the application project in the SDK.</p>
-
-<p>When building the application, the SDK calls the Edje tools automatically to build the final <span style="font-family: Courier New,Courier,monospace">check_custom.edj</span> file. This file can be loaded from our application.</p>
-
-<h3 id="use_new_style" name="use_new_style">Using the New Style</h3>
-
-<p>This is how to add the new theme file as an extension in the application.</p>
-
-<pre class="prettyprint">
-char edj_path[PATH_MAX] = {0, };
-
-// Get the full path of the edj file 
-app_get_resource(&quot;/edje/check_custom.edj&quot;, edj_path, (int)PATH_MAX);
-
-// Load check custom style as an extension 
-elm_theme_extension_add(NULL, edj_path);
-</pre>
-
-<p>Use the &quot;custom&quot; style on a new check component.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *check;
-
-// Create a check object 
-check = elm_check_add(parent);
-
-// Set its style to &quot;custom&quot; 
-elm_object_style_set(check, &quot;custom&quot;);
-</pre>
-
-<h3 id="special_theme_parts" name="special_theme_parts">Special Theme Parts</h3>
-
-<p>Some parts of the EDC file can be interacted with the Elementary. The content of parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span> are modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_set_text()</span> function. The content of <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts is updated using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function.</p>
-
-<h4 id="swallow_parts" name="swallow_parts">Swallow Parts</h4>
-
-<p>In the previous example (the check component &quot;default&quot; style), there is a part called &quot;elm.swallow.content&quot; that is of the type <span style="font-family: Courier New,Courier,monospace">SWALLOW</span>.</p>
-
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to_x: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to_x: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: 1 -2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 128;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 128;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>We can push content (Evas_Object) to this part from the application anytime. The size and position of the content pushed is controlled by the EDC theme.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *check1, *content;
-
-// Create a check object 
-check1 = elm_check_add(parent);
-
-// Set the content of the check object 
-elm_object_part_content_set(check1, &quot;elm.swallow.content&quot;, content);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">We can add new <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts when customizing a UI component&#39;s style, if we want to be able to control more content from the application. Note that removing existing <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts changes the UI component&#39;s behavior.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<h4 id="text_parts" name="text_parts">Text Parts</h4>
-
-<p>The same is done with parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span>. The check &quot;default&quot; style contains a part named &quot;elm.text&quot;.</p>
-
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;elm.text&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;mouse_events: 0;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to_x: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -2 -2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans,Edje-Vera&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: -1.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: "default" 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.min: 1 1;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 128;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 0 0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 128;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.min: 1 1;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>This is how to modify the content of the &quot;elm.text&quot; part from the application. The position of the text, its size, color, look and feel are managed by the EDC theme.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *check2;
-
-// Create a check object 
-check2 = elm_check_add(parent);
-
-// Set the text of the check object 
-elm_object_part_text_set(check2, &quot;elm.text&quot;, &quot;Test text&quot;);
-</pre>
-  
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/component_focus_n.htm b/org.tizen.ui.guides/html/native/efl/component_focus_n.htm
deleted file mode 100755
index ee8ae76..0000000
--- a/org.tizen.ui.guides/html/native/efl/component_focus_n.htm
+++ /dev/null
@@ -1,174 +0,0 @@
-<!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>Managing Component Focus</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-				<li><a href="#Movement">Moving Focus</a></li>
-				<li><a href="#Customization">Customizing Focus</a></li>
-				<li><a href="#On_Component">Focus on UI Component</a></li>
-		</ul>	
-	<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Managing Component Focus</h1> 
-  
-
-<p>Focus is a graphical user interface concept. A component, for example, a UI component, has a focus when it is selected to receive input from the user. The input can be an event, such as mouse button click or key press. A UI component application has, at all times, one (and only one) focused object. This is what determines where the input event goes to within the application window. Also, focused objects can be decorated differently, in order to signal to the user where the input is at any given moment.</p>
-
-<p>Focusing can be immediate (selected by the touchscreen or mouse) or relative (selected by a key press). There are mainly 2 ways to set focus on a graphical elements:</p>
-
-<ul>
-<li>Direct selection: this is done by clicking on the element.
-<p>Direct selection does not really need any kind of special treatment as the user explicitly selects the UI component to interact with.</p></li>
-<li>Relative selection: this is done by moving the selection from a UI component to another, such as going to the previous or next one; this is done with a keyboard.
-<p>Relative selection&#39; default order is the one in which the UI components have been added to the canvas. That may not be appropriate, if they are added programmatically in a different order than they appear on-screen.</p></li>
-</ul>
-
-  
-<h2 id="Movement" name="Movement">Moving Focus</h2>
-
-<h3>Concept of Focus Chain</h3>
-<p>The order the focus goes from a UI component to another is called the focus chain. As said before, the default focus chain is set to the order the UI components have been added to the canvas.</p>
-
-<h3>Focusable Objects</h3>
-<p>An object can be focused if the following conditions apply:</p>
-
-<ul>
-<li>object is visible</li>
-<li>object is enabled</li>
-<li>object accepts focus</li>
-<li>object&#39;s subtree (if any) is focusable</li>
-<li>all of object&#39;s parents have their subtrees focusable</li>
-</ul>
-
-<p>If any of these conditions do not apply, the object is unfocusable.</p>
-
-<h3>Handling Key Input</h3>
-
-<p>Handling of the keys is done automatically by Elementary. According to which key the user pressed, Elementary switches the focus in the selected direction. For example, using the <span style="font-family: Courier New,Courier,monospace;">Tab</span> key the focus goes to the next object in the natural order, whereas using the direction keys the focus goes to the next object in the requested direction.</p>
-
-<h3>Hiding, Deleting or Disabling a Focused Object</h3>
-
-<p>When a UI component is hidden, deleted, or disabled, it becomes unfocusable.</p>
-
-<p>When a focused object is unfocusable, the focus is moved to another object.</p>
-
-<h3>Selecting Next Object</h3>
-
-<p>When the user wants to switch the focus to the next object (i.e. cycle focus), Elementary searches the first object which is focusable.</p>
-
-<p>If there is a disabled or read-only object in the focus chain, the focus goes to the following object in the requested direction.</p>
-
-<h2 id="Customization" name="Customization">Customizing Focus</h2>
-
-<p>There are several reasons why to customize the focus chain of an application, for example:</p>
-
-<ul>
-<li>If you have created a form with labels and text entries next to them, the focus moves to the entry field when the user clicks on the associated label.</li>
-<li>If you have created an interface with several columns (table), set the focus chain as you wish, for example, going horizontally instead of going vertically, regardless whatever the order the UI components are added.</li>
-</ul>
-
-<h3>Customizing Object&#39;s Focus Exit Chain </h3>
-
-<p>Set the object to focus after other object in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_set(object, next, direction)</span>. Use the following directions:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_NEXT</span>: next UI component in natural order</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_PREVIOUS</span>: previous UI component in natural order</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_UP</span>: UI component to focus when going up</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_DOWN</span>: UI component to focus when going down</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_RIGHT</span>: UI component to focus when going right</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_LEFT</span>: UI component to focus when going left</li>
-</ul>
-
-<p>Set the object next to another in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_get(object, direction)</span>.</p>
-
-<h3>Customizing Whole Application&#39;s Focus Chain</h3>
-
-<p>To customize the application&#39;s custom chain:</p>
-
-<pre class="prettyprint">
-Evas_Object *main, obj1, obj2, obj3, obj4, obj5;
-
-Eina_List *focus_chain = NULL;
-focus_chain = eina_list_append(focus_chain, obj3);
-focus_chain = eina_list_append(focus_chain, obj2);
-// The chain is obj3, then obj2. Set the chain.
-elm_object_focus_custom_chain_set(main, focus_chain);
-// Prepend obj5 at the beginning of the chain
-elm_object_focus_chain_prepend(main, NULL, obj5);
-// Append obj1 after obj3
-elm_object_focus_chain_append(main, obj3, obj1);
-// Prepend obj4 before obj1
-elm_object_focus_chain_prepend(main, obj1, obj4);
-</pre>
-
-<p>The focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4, obj1, obj2</span>.</p>
-
-<p>This actually applies to any container: it is possible to set the focus chain of, for example, a box.</p>
-
-<h3>Customizing Collision of Both</h3>
-
-<p>If an object is part of a focus chain and has the next focused object defined, the next object takes precedence over the focus chain.</p>
-
-<p>Following on the previous example, if <span style="font-family: Courier New,Courier,monospace;">obj4</span> has <span style="font-family: Courier New,Courier,monospace;">obj5</span> defined as its next object, the actual focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4</span>, and loop back to <span style="font-family: Courier New,Courier,monospace;">obj5</span>.</p>
-
-<h2 id="On_Component" name="On_Component">Focus on UI Component</h2>
-
-<p>If your Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each UI component if applicable.</p>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_get(object)</span> to set whether a specific object has the focus. Set the focus to an object using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_set(object, set)</span>, where <span style="font-family: Courier New,Courier,monospace;">set</span> is a Boolean value. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the focus is set to that given object. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_False</span>, the focus is unset and passed back to the previous element in the focus chain. Set the focus only after the object is shown, that is, after <span style="font-family: Courier New,Courier,monospace;">evas_object_show(object)</span> has been called. Call the function back when the object receives or loses focus by registering on smart event &quot;focused&quot; or &quot;unfocused&quot;</p>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_set(object, focusable)</span> to tell Elementary whether an object and its children are focusable, where <span style="font-family: Courier New,Courier,monospace;">focusable</span> is a Boolean value. Get the current value using <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_get(object)</span>.</p>
-
-<p>The similar functions for a specific object are <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_set(object, focusable)</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_get(object)</span>. </p>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_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/native/efl/component_infra_n.htm b/org.tizen.ui.guides/html/native/efl/component_infra_n.htm
deleted file mode 100755
index 0c9a0ff..0000000
--- a/org.tizen.ui.guides/html/native/efl/component_infra_n.htm
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Component Infrastructure Modules: Managing Component Properties</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>UI Component Infrastructure Modules: Managing Component Properties</h1> 
-  
-<p>The Elementary library is composed of many UI components to support Tizen native applications. While using UI components, you must manage their common properties. To meet this requirement, Elementary creates some infrastructure modules in order to support many UI components. Currently, Elementary provides following infrastructure modules: </p>
-<ul><li><a href="component_focus_n.htm">Component focus</a>
-<p>A UI component application always has 1 focused object, which is selected to receive input from the user. The focus can change between objects, and the focused object can be decorated on the screen to make it easily visible.</p></li>
-<li><a href="touch_gesture_n.htm">Handling touch gestures for components</a>
-<p>UI components generally handle basic touch inputs, such as press, release and moving. However, in some use cases (for example, when the accessibility Assistive Technology (AT) client is working), handling for a variety of touch gesture events (such as tap, double-tap, triple-tap, double-tap and hold, and left/right/up/down swipe) is needed. Elementary can also create new touch gesture patterns according to application use cases.</p>
-</li>
-<li><a href="component_custom_n.htm">Customizing components</a>
-<p>Elementary provides basic UI components based on the Tizen UX styles which you can use. Usually, you can use the supported UI components themselves to make your application. However, if you need to use other styles than the basic ones, you must customize the UI component style.</p></li>
-<li>UI mirroring
-<p>Elementary provides UI mirroring, which allows you to set UI mirroring on specific UI components or the whole interface. This facility is very useful to support applications which need both right-to-left and left-to-right languages.</p></li></ul>
-
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/containers_n.htm b/org.tizen.ui.guides/html/native/efl/containers_n.htm
deleted file mode 100755
index f9ad56d..0000000
--- a/org.tizen.ui.guides/html/native/efl/containers_n.htm
+++ /dev/null
@@ -1,608 +0,0 @@
-<!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>Using Container UI Components</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#box">Box</a></li>
-			<li><a href="#conformant">Conformant</a></li>
-			<li><a href="#grid">Grid</a></li>
-			<li><a href="#layout">Layout</a></li>
-			<li><a href="#mapbuf">Mapbuf</a></li>
-			<li><a href="#naviframe">Naviframe</a></li>
-			<li><a href="#panes">Panes</a></li>
-			<li><a href="#scroller">Scroller</a></li>
-			<li><a href="#table">Table</a></li>
-			
-			</ul>
-		<p class="toc-title">Related Info</p>
-			<ul class="toc">
-				<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-				<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-				<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-				<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Using Container UI Components</h1>
-
-				<h2 id="box" name="box">Box</h2>
-				
-
-  <p class="figure">Figure: Box container</p>
-  <p align="center"><img alt="Box container" src="../../images/box.png" /></p>
-
-
-<p>Most of the time, you want to display UI components on the screen in a specific order. In a <a href="form_tutorial_n.htm">form container</a>, for example, the user information is arranged vertically. This basic container is called a box. There is no theme for a box layout. It is just a linear method of arranging UI components horizontally or vertically.</p>
-<h3>Creating a Box</h3>
-<p>To create a new horizontal box:</p>
-<pre class="prettyprint">Evas_Object *vbox;
-
-vbox = elm_box_add(parent);
-</pre>
-<p>By default, the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function creates a vertical box. If you want to create a horizontal box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function:</p>
-<pre class="prettyprint">Evas_Object *hbox;
-
-hbox = elm_box_add(parent);
-elm_box_horizontal_set(hbox, EINA_TRUE);
-</pre>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">A box is a non-graphical object. It adds no graphics to or around the objects it holds.</td>
-    </tr>
-   </tbody>
-  </table>
-
-<h3>Adding Objects to the Box</h3>
-<p>You can add any Evas object to the box. Here, we create 5 button components and add them to a box:</p>
-<pre class="prettyprint">int i;
-Evas_Object *bt;
-Evas_Object *vbox;
-
-vbox = elm_box_add(parent);
-
-for (i = 0; i &lt; 5; i++)
-{
-&nbsp;&nbsp;&nbsp;char tmp[16];
-&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Button %d&quot;, i);
-&nbsp;&nbsp;&nbsp;bt = elm_button_add(vbox);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(bt, tmp);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(vbox, bt);
-&nbsp;&nbsp;&nbsp;evas_object_show(bt);
-}
-evas_object_show(vbox);
-</pre>
-<p>The most important function in the above code is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span>, which is used to add the button component to the end of the box.</p>
-
-<h3>Setting the Padding</h3>
-<p>You can set the padding between the objects in a box by using the <span style="font-family: Courier New,Courier,monospace">elm_box_padding_set()</span> function. The padding values are the number of pixels horizontally and vertically.</p>
-<pre class="prettyprint">elm_box_padding_set(vbox, 16, 64);
-</pre>
-
-<h3>Handling Element Size</h3>
-<p>You can add different-size elements to a container. For example, to add an image with a size of 128x128 pixels as the first element in a box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function:</p>
-<pre class="prettyprint">ic = elm_icon_add(vbox);
-elm_image_file_set(ic, &quot;./c1.png&quot;, NULL);
-evas_object_size_hint_min_set(ic, 128, 128);
-evas_object_show(ic);
-elm_box_pack_start(vbox, ic);
-</pre>
-<p>We ask Evas to set the size hint for the icon object by using the <span style="font-family: Courier New,Courier,monospace">elm_object_size_hint_min_set()</span> function. Evas will try to set the minimum size of this object accordingly.</p>
-<p>If you want to create a homogeneous box, where all objects have the same height or width, depending on the orientation of the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_homogeneous_set()</span> function:</p>
-<pre class="prettyprint">elm_box_homogeneous_set(vbox, EINA_TRUE);
-</pre>
-<p>Elementary will set the height of the tallest object as the height of all objects, or the width of the widest element as the width of all objects.</p>
-<h3>Setting the Alignment</h3>
-<p>You can set the alignment of UI components inside a box using the <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> or <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.</p>
-
-<p class="figure">Figure: Alignment</p>
-<p align="center"><img alt="Alignment" src="../../images/align.png" /></p>
-
-<p>Here, we set an alignment of 0.8 vertically:</p>
-<pre class="prettyprint">elm_box_align_set(vbox, 0.0, 0.8);
-</pre>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The alignment only takes effect in the opposite direction than the one defined with the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function.</td>
-    </tr>
-   </tbody>
-  </table>
-
-
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_box_layout_transition()</span> function provides the ability to animate the motion of the objects in a box when switching from one layout to another.</p>
-<h3>Using Size Hints</h3>
-<p>Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas will honor these requests if it can. This is why they are called &quot;hints&quot;. The size hint functions are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_max_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span></li>
-</ul>
-<p>You can also use the respective get functions to get the current hint values.</p>
-<p>In case of the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span> function, you ask Evas to respect the minimum size you define for the object. For example, to set the minimum size of an icon to 64x46 pixels:</p>
-<pre class="prettyprint">evas_object_size_hint_min_set(ic, 64, 64);
-</pre>
-<p>You can also set a maximum size for the same icon:</p>
-<pre class="prettyprint">evas_object_size_hint_max_set(ic, 128, 128);
-</pre>
-<p>When you resize the parent of the icon, if there are no constraints to the parent, the minimum size of the parent will be the minimum hint size of the icon. If you increase the parent size, the icon will grow larger until its maximum hint size is reached. After this point, the icon will not grow any larger and there will be empty space around the icon within the parent.</p>
-<p>When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object. Here, the proportion of the icon is respected, and the width will be the same as the height:</p>
-<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
-</pre>
-<p>Here, the width will be twice the height:</p>
-<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2, 1);
-</pre>
-<p>If we want to change the alignment of the icon relative to the parent, we can use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align()</span> function. By default, the icon is centered, so it is aligned with a value of 0.5. You can change the alignment as follows:</p>
-<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
-</pre>
-<p>In the above case, the icon is aligned to the bottom left corner of the parent.</p>
-<p>We can also play with the size of the icon inside its container by using the weight size hint. By default, the weight is not set, so the size of the icon will be the minimum size. But if you set this value to 1, the icon will be expand as much as it can inside the container:</p>
-<pre class="prettyprint">evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-</pre>
-<p>You can also use the alignment and weight hints together. Here, we want the icon to take up all the space in its parent:</p>
-<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-</pre>
- 
-		
-				<h2 id="conformant" name="conformant">Conformant</h2>
-
-<p class="figure">Figure: Conformant container</p>
-<p align="center"><img alt="Conformant container" src="../../images/conformant.png" /></p>
-
-<p>A conformant is a container UI component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.</p>
-
-<h3>Creating a Conformant</h3>
-<p>To create a conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_conformant_add()</span> function:</p>
-<pre class="prettyprint">
-Evas_Object *conformant;
-
-conformant = elm_conformant_add(parent);
-</pre>
-
-<h3>Adding Content to the Conformant</h3>
-<p>To add content to the conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
-<pre class="prettyprint">elm_object_content_set(conformant, main_view);
-</pre>
-
-<h3>Signals</h3>
-<p>To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:</p>
-<ul>
-<li>&quot;virtualkeypad,state,on&quot;: The virtual keyboard has been switched on.</li>
-<li>&quot;virtualkeypad,state,off&quot;: The virtual keyboard has been switched off.</li>
-<li>&quot;virtualkeypad,size,changed&quot;: The virtual keyboard size has changed.</li>
-<li>&quot;clipboard,state,on&quot;: The clipboard has been switched on.</li>
-<li>&quot;clipboard,state,off&quot;: The clipboard has been switched off. </li>
-</ul>
-
-			
-				<h2 id="grid" name="grid">Grid</h2>
-
-<p>In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels.</p>
-
-<h3>Creating a Grid</h3>
-<p>To create a grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *grid;
-
-grid = elm_grid_add(parent);
-</pre><h3>Adding Items to the Grid</h3>
-<p>To add an item to the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. Provide the X and Y coordinates, and the width and height in the grid as parameters. The following code adds 12 icons in a circle formation:</p>
-<pre class="prettyprint">for (i = 0; i &lt; 12; i++)
-{
-&nbsp;&nbsp;&nbsp;ic = elm_icon_add(grid);
-&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(ic, 128, 128);
-&nbsp;&nbsp;&nbsp;evas_object_show(ic);
-&nbsp;&nbsp;&nbsp;x = 40 * cos(2.0 * M_PI / 12 * i);
-&nbsp;&nbsp;&nbsp;y = 40 * sin(2.0 * M_PI / 12 * i);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, ic,  40 + x,  40 + y,  20 , 20);
-}
-evas_object_show(grid);
-</pre>
-
-<h3>Changing Position and Size</h3>
-<p>To change the position of an item in the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. The first parameter is the item you want to move, and the following parameters are the same as for the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack()</span> function.</p>
-<p>To change the size of the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_size_set()</span> function. You can set the new width and height for the grid. The position and size of the items in the grid are changed accordingly.</p>
-<h3>Clearing the Grid</h3>
-<p>To clear the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_clear()</span> function. All items are removed from the grid. If you set the clear parameter, all the items are also deleted, with the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function called on each item.</p>
-
-
-				<h2 id="layout" name="layout">Layout</h2>
-
-<p>A layout is a container that takes a standard Edje design file and wraps it very thinly in a UI component. Layouts are the basis of a lot of graphics components used in Elementary.</p>
-
-<p>An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see <a href="theme_n.htm">Themes</a>.</p>
-
-<h3 id="container_layout_creating" name="container_layout_creating">Creating a Layout</h3>
-
-<p>To create a new layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *layout;
-
-layout = elm_layout_add(parent);
-</pre>
-<p>In Tizen, the layout component is extended to support different kinds of layouts. Rather than define layouts yourself, you can use the following predefined default layouts:</p>
-<ul>
-<li>application/default: This layout can be used to display content inside a window.</li>
-<li>drawer/panel: This layout can be used to create a 2-panel view.</li>
-<li>nocontents/default: This layout can be used when there is no content to display, such as in a contact or email.</li>
-</ul>
-<p>To use the application/default layout:</p>
-<pre class="prettyprint">Evas_Object *ly;
-
-ly = elm_layout_add(parent);
-elm_layout_theme_set(ly, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
-</pre>
-
-<h3 id="container_layout_inserting_objects" name="container_layout_inserting_objects">Adding Objects to the Layout</h3>
-<p>To add an Evas object to the layout:</p>
-<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot; view);
-</pre>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> is the swallow part of the application layout, and with this call you integrate the view inside the swallow object of the layout.</p>
-<p>The drawer/panel layout can display 2 different views, the background and the main content:</p>
-<pre class="prettyprint">Evas_Object *ly;
-
-ly = elm_layout_add(parent);
-elm_layout_theme_set(ly, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
-</pre>
-<p>To swallow an object inside the main content and background views:</p>
-<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot;, main_view);
-elm_object_part_content_set(ly, &quot;elm.swallow.background&quot;, background);
-</pre>
-<p>The nocontents/default layout is a special layout in that it does not contain any swallows. You can only set the text part. There are two different texts zones: <span style="font-family: Courier New,Courier,monospace">elm.text</span> and <span style="font-family: Courier New,Courier,monospace">elm.help.text</span>. To change the text:</p>
-<pre class="prettyprint">elm_object_part_text_set(ly, &quot;elm.text&quot;, &quot;Hi All :)&quot;);
-elm_object_part_text_set(ly, &quot;elm.help.text&quot;, &quot;Hi All :)&quot;);
-</pre>
-<h3 id="container_layout_styles" name="container_layout_styles">Using Layout Themes</h3>
-<p>The layout component supports the following predefined default themes:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">toolbar-content</span>: For applications with a toolbar and main content area.</li>
-<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back</span>: For applications with a toolbar, main content area (with a back button), and title area.</li>
-<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back-next</span>: For applications with a toolbar, main content area (with back and next buttons), and title area.</li>
-<li><span style="font-family: Courier New,Courier,monospace">content-back</span>: For applications with main content (with a back button) and title areas.</li>
-<li><span style="font-family: Courier New,Courier,monospace">content-back-next</span>: For applications with main content (with back and next buttons) and title areas.</li>
-<li><span style="font-family: Courier New,Courier,monospace">toolbar-vbox</span>: For applications with a toolbar and main content area as a vertical box.</li>
-<li><span style="font-family: Courier New,Courier,monospace">toolbar-table</span>: For applications with a toolbar and main content area as a table.</li>
-</ul>
-<p>To set a theme to the layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_theme_set()</span> function.</p>
-
-
-				<h2 id="mapbuf" name="mapbuf">Mapbuf</h2>
-
-<p class="figure">Figure: Mapbuf hierarchy</p>
-<p align="center"><img alt="Mapbuf hierarchy" src="../../images/mapbuf_tree.png" /></p>
-
-<p>A mapbuf component is a container UI component that uses an Evas map to hold a content object. This component is used to improve the moving and resizing performance of complex UI components.</p>
-
-<p>The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf component will be faster than frequently moving the content object.</p>
-
-<p>The mapbuf component inherits all the functions of the container class.</p>
-
-<h3>Creating a Mapbuf</h3>
-<p>To create a mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_mapbuf_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *mapbuf, *parent, *content;
-
-// Creating a mapbuf
-mapbuf = elm_mapbuf_add(parent);
-</pre>
-<h3>Adding Content to the Mapbuf</h3>
-<p>To add content to the mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function with the &quot;default&quot; part:</p>
-<pre class="prettyprint">elm_object_content_set(mapbuf, content);</pre>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Calling <span style="font-family: Courier New,Courier,monospace">elm_object_content_set(mapbuf, content)</span> is equivalent to calling <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(mapbuf, "default", content)</span>.</td>
-    </tr>
-   </tbody>
-  </table>
-
-
-<p>To activate smooth map rendering and alpha rendering for the mapbuf component:</p>
-<pre class="prettyprint">elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
-elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
-</pre>
-
-<h3>Activating the Mapbuf</h3>
-<p>Finally, to use the mapbuf component, you must activate it:</p>
-<pre class="prettyprint">elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);</pre>
-
-<h3>Signals</h3>
-<p>The mapbuf component does not emit any signals and therefore does not provide any callbacks that you can register.</p>
-
-			
-				<h2 id="naviframe" name="naviframe">Naviframe</h2>
-
-<p>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the UI component.</p>
-
-<h3>Creating a Naviframe</h3>
-<p>To create a naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *nav;
-
-nav = elm_naviframe_add(parent);
-</pre>
-<h3>Adding and Deleting Views</h3>
-<p>The naviframe is a stack of views. A new view is always pushed to the top of the stack. The top-most view is deleted by popping it.</p>
-<p>To add a new view to the naviframe:</p>
-<pre class="prettyprint">Elm_Object_Item *nav_it;
-
-nav_it = elm_naviframe_item_push(nav, NULL, NULL, NULL, view, NULL);
-// In Tizen 2.3, the back button is not supported in the naviframe 
-</pre>
-<p>When you push a new view to the stack, you receive an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> for the view. You can use this item to modify the view.</p>
-<p>To pop and delete the top-most view:</p>
-<pre class="prettyprint">elm_naviframe_item_pop(nav);
-</pre>
-
-<h3>Adding Fixed Content</h3>
-<p>The naviframe can also display fixed content on top of the current (top-most) view. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function to set this content. Use the following part names to specify the location of the content:</p>
-<ul>
-<li>&quot;default&quot;: The main content area of the current view.</li>
-<li>&quot;icon&quot;: An icon in the title area of the current view.</li>
-<li>&quot;title_left_btn&quot;: A button on the left side of the naviframe.</li>
-<li>&quot;title_right_btn&quot;: A button on the right side of the naviframe.</li>
-</ul>
-<p>For example, to add a button to the naviframe:</p>
-<pre class="prettyprint">btn = elm_button_add(nav);
-elm_object_style_set(btn, &quot;naviframe/title_cancel&quot;);
-elm_object_item_part_content_set(nav_it, &quot;title_left_btn&quot;, btn);
-</pre>
-<p>To set the title labels of the naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function and specify one of the following label locations:</p>
-<ul>
-<li>&quot;default&quot;: Sets the title label in the title area of the current view.</li>
-<li>&quot;subtitle&quot;: Sets the subtitle label in the title area of the current view.</li>
-</ul>
-<h3>Signals</h3>
-<p>The naviframe emits the following signals:</p>
-<ul>
-<li>&quot;transition,finished&quot;: The transition has finished changing the view.</li>
-<li>&quot;title,transition,finished&quot;: The title area transition has finished  changing the state of the title.</li>
-<li>&quot;title,clicked&quot;: The user has clicked the title area.</li>
-</ul>
-
-
-		
-				<h2 id="panes" name="panes">Panes in Mobile Applications</h2>
-
-<p class="figure">Figure: Panes component</p>
-<p align="center"><img alt="Panes component" src="../../images/panes.png" /></p>
-
-<p>A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</p>
-
-<h3>Creating Panes</h3>
-<p>To create a panes component, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *panes;
-
-panes = elm_panes_add(parent);
-</pre>
-
-<h3>Adding Content to the Panes</h3>
-<p>To add content to the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. The following code adds an object to the left pane:</p>
-<pre class="prettyprint">elm_object_part_content_set(panes, &quot;left&quot;, obj);
-</pre>
-
-<h3>Setting Panes Options</h3>
-<p>To set the orientation of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
-
-<p>To set the size of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions.</p>
-
-<h3>Signals</h3>
-<p>The panes component emits the following signals:</p>
-<ul>
-<li>&quot;press&quot;: The panes component has been pressed (but the press has not been released yet).</li>
-<li>&quot;unpress&quot;: The press has been released.</li>
-<li>&quot;clicked&quot;: The panes component has been clicked.</li>
-<li>&quot;clicked,double&quot;: The panes component has been double-clicked.</li>
-</ul>
-
-		
-				<h2 id="scroller" name="scroller">Scroller</h2>
-
-<p>A scroller holds (and clips) a single object and allows you to scroll across it. This means that the user can use a scroll bar or their finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. The scroller will always have a default minimum size that is not limited by its contents.</p>
-<p>The scroller component inherits all the functions of the <a href="#layout">Layout</a>.</p>
-<h3>Creating a Scroller</h3>
-<p>To create a scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span> function:</p>
-<pre class="prettyprint">
-Evas_Object *scroller;
-
-scroller = elm_scroller_add(parent);
-</pre>
-<h3>Adding Objects to the Scroller</h3>
-<p>To add an object to the scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
-<pre class="prettyprint">Evas_Object *image;
-
-image = elm_image_add(parent);
-elm_image_file_set(image, &quot;image.png&quot;, NULL);
-evas_object_show(image);
-evas_object_size_hint_min_set(image, 2560, 1600);
-elm_object_content_set(scroller, image);
-</pre>
-<p>In the above code, we set a minimum size of 2560 x 1600 pixels for the image. The scroller is smaller than the image, so you can scroll across the image.</p>
-<p>If you want to be informed when the user begins scrolling the image, use the following code:</p>
-<pre class="prettyprint">
-evas_object_smart_callback_add(scroller, &quot;scroll,drag,start&quot;, _scroll_start_cb, NULL);
-
-// Callback function for the &quot;animate,begin&quot; signal
-// This callback is called when the user begins scrolling the image
-void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;Scroll starts\n&quot;);
-}</pre>
-
-<h3>Managing the Properties of the Scroller</h3>
-<p>When scrolling content, the scroller may &quot;bounce&quot; when reaching the edge of the content. This is a visual way of indicating that there is no more content to scroll in that direction. Bounce is enabled by default for both axes. To enable or disable the bounce for either or both axes, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_bounce_set()</span> function. The following code disables the bounce for the horizontal axis and enables it for the vertical axis:</p>
-
-<pre class="prettyprint">elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
-</pre>
-<p>The scroller can limit the scrolling to &quot;pages&quot;. In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single "page" at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_size_set()</span> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
-
-<h3>Signals</h3>
-
-<p>The scroller emits the following signals, which you can catch in your application:</p>
-
-<ul>
-<li>&quot;edge,left&quot;: The left edge of the content has been reached.</li>
-<li>&quot;edge,right&quot;: The right edge of the content has been reached.</li>
-<li>&quot;edge,top&quot;: The top edge of the content has been reached.</li>
-<li>&quot;edge,bottom&quot;: The bottom edge of the content has been reached.</li>
-<li>&quot;scroll&quot;: The content has been scrolled (moved).</li>
-<li>&quot;scroll,anim,start&quot;: The scrolling animation has started.</li>
-<li>&quot;scroll,anim,stop&quot;: The scrolling animation has stopped.</li>
-<li>&quot;scroll,drag,start&quot;: Dragging the contents has started.</li>
-<li>&quot;scroll,drag,stop&quot;: Dragging the contents has stopped.</li>
-<li>&quot;vbar,drag&quot;: The vertical scroll bar has been dragged.</li>
-<li>&quot;vbar,press&quot;: The vertical scroll bar has been pressed.</li>
-<li>&quot;vbar,unpress&quot;: The vertical scroll bar has been unpressed.</li>
-<li>&quot;hbar,drag&quot;: The horizontal scroll bar has been dragged.</li>
-<li>&quot;hbar,press&quot;: The horizontal scroll bar has been pressed.</li>
-<li>&quot;hbar,unpress&quot;: The horizontal scroll bar has been unpressed.</li>
-<li>&quot;scroll,page,changed&quot;: The visible page has changed.</li>
-</ul>
-
-<h3>Example</h3>
-<p>A good example of the scroller is a picture slideshow: we add images to the scroller and limit the scrolling to pages (one picture at a time). In the following code, we disable the scroll bars for both axes, limit the scrolling to pages by using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_scroll_limit_set()</span> function, and lock the scrolling on the Y axis by using the <span style="font-family: Courier New,Courier,monospace">elm_object_scroll_lock_y_set()</span> function:</p>
-<pre class="prettyprint">elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
-elm_scroller_page_scroll_limit_set(scroller, 1, 0);
-elm_object_scroll_lock_y_set(scroller, EINA_TRUE);
-</pre>
-<p>We create a horizontal box, which will contain all the images, and which itself will be contained by the scroller:</p>
-<pre class="prettyprint">box = elm_box_add(scroller);
-elm_box_horizontal_set(box, EINA_TRUE);
-elm_object_content_set(scroller, box);
-evas_object_show(box);
-</pre>
-<p>We then create all the images and add them to the horizontal box:</p>
-<pre class="prettyprint">img = elm_image_add(scroller);
-snprintf(buf, sizeof(buf), IMAGE_DIR&quot;/%d.jpg&quot;, i);
-elm_image_file_set(img, buf, NULL);
-evas_object_show(img);
-pages = eina_list_append(pages, img);
-elm_box_pack_end(box, img);
-</pre>
-<p>We store references to the images in an <span style="font-family: Courier New,Courier,monospace">eina_list</span> for easy retrieval later.</p>
-<p>Finally, we display the first page of the scroller:</p>
-<pre class="prettyprint">elm_scroller_page_show(scroller, 0, 0);
-</pre>
-<p>The size of the scroller depends on the size of the parent. When the parent changes, for example when the window is resized or rotated, the scroller is also resized. Since we need to be informed when the scroller is resized, we add a callback on the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span> event for the scroller:</p>
-<pre class="prettyprint">evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE, _scroller_resize_cb, NULL);</pre>
-<p>The callback retrieves the new size of the scroller by using the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function on the object pointer. The pointer is relative to the object that has been resized, which in our case is the scroller itself. We can then iterate through the images of the scroller and set the minimum size to fit the scroller size:</p>
-<pre class="prettyprint">EINA_LIST_FOREACH(images, l, page)
-{
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(page, w, h);
-}
-</pre>
-<p>Finally, we set the page size of the scroller to match the scroller size and display the first page:</p>
-<pre class="prettyprint">elm_scroller_page_size_set(obj, w, h);
-elm_scroller_page_show(obj, 0, 0);</pre>
-
-				<h2 id="table" name="table">Table</h2>
-
-<p>A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap).</p>
-
-<h3>Creating a Table</h3>
-
-<p>To create a table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *table;
-table = elm_table_add(parent);</pre>
-
-<h3>Adding Items to the Table</h3>
-
-<p>Items are added to the table with the <span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span> function. This function takes as parameters the table, the item to add to the table, and the position where to add the item: column, row, and the size of the item in number of rows and columns (colspan and rowspan). If we want to create an icon that takes 3 columns and rows and a button that only takes 1 row and column, the code will look like this:</p>
-<pre class="prettyprint">ic = elm_icon_add(table);
-elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
-evas_object_show(ic);
-elm_table_pack(table, ic, 0, 0, 3, 3);
-
-btn = elm_button_add(table);
-elm_object_text_set(btn, &quot;Click me i'm famous&quot;);
-evas_object_show(btn);
-elm_table_pack(table, btn, 3, 1, 1, 1);
-evas_object_show(table);
-</pre>
-
-<h3>Managing the Items</h3>
-
-<p>If you want to change the position of the item after adding it, use the <span style="font-family: Courier New,Courier,monospace">elm_table_pack_set()</span> function. This function takes as parameters the item whose position to change, the new column, the new row, and the size of the item in number of rows and columns (colspan and rowspan).</p>
-
-<p>To add padding around the item, use the <span style="font-family: Courier New,Courier,monospace">elm_table_padding_set()</span> function. The second parameter is the padding between columns, and the third parameter is the padding between rows:</p>
-<pre class="prettyprint">elm_table_padding_set(table, 10, 10);</pre>
-
-<p>To change the alignment and size of an item, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint</span> parameters. They are used in the same way as with boxes. You can set the same size and weight to each item by using the homogeneous parameter:</p>
-<pre class="prettyprint">elm_table_homogeneous_set(table, EINA_TRUE);
-</pre>
-
-<h3>Clearing the Table</h3>
-
-<p>To clear the table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_clear()</span> function. If the clear parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the table items are deleted. The <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function will be called on each item.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table> 
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.ui.guides/html/native/efl/core_loop_n.htm b/org.tizen.ui.guides/html/native/efl/core_loop_n.htm
deleted file mode 100755
index fcd6f6d..0000000
--- a/org.tizen.ui.guides/html/native/efl/core_loop_n.htm
+++ /dev/null
@@ -1,87 +0,0 @@
-<!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>Core Loop and OS Interfacing: Handling the Main Loop and Threads</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-   
-   <h1>Core Loop and OS Interfacing: Handling the Main Loop and Threads</h1>
- <p>The Ecore library provides convenience functions, which allow you to manage the <a href="main_loop_n.htm">application main loop</a> and <a href="threads_n.htm">threading</a>.</p>
-  
-<p>Tizen applications developed with EFL use the EDA (Event-driven Architecture) pattern. In EDA, applications reiterate the routine that checks input events, processes the events, and then displays the outputs. The main loop is the entity handling this sequence. It is the heart of any GUI based on EDA.</p>
-
-<p>Most applications start and end the main loop, which is used in special situations, such as propagation of events to UI components for handling and updating application appearance and state. That guarantees the delivery of all events received from low-level input devices and provides the accurate and speedy render event loop for synchronizing the application UI with events.</p>
-
-<p>The Ecore library provides main loop abstraction with a clean and tiny event loop library. Applications mainly deal with file descriptors handling, event handling, and timer handling from the beginning of the main loop.</p>
-
-<p>In addition, Ecore provides several modules related to, for example, Audio, Cocoa, Connection, Drm, FrameBuffer, Input, IPC, Wayland, Win32, and X11 with convenient methods to communicate with underlying operating systems, such as Linux, Windows&reg;, or Mac OS&reg; X.</p>
-
-<p>There are 2 types of threads in Tizen applications:</p>
-<ul>
-<li>Main thread that contains the main loop</li>
-<li>Worker threads that support concurrent processing. In parallel processing, applications must keep the GUI updating while processing the data related to the UI.</li>
-</ul>
-
-<p>The Ecore library provides these concurrent processing mechanisms through Ecore threads. An Ecore thread is not a simple wrapper for standard POSIX threads. It is not meant to be used to run parallel tasks throughout the entire duration of the application, especially when these tasks are performance-critical. Ecore manages these tasks using a pool of threads based on system configuration, such as the number of processors the system has, and the maximum amount of concurrent threads set for the application.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
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
deleted file mode 100755
index 65bf805..0000000
--- a/org.tizen.ui.guides/html/native/efl/data_types_n.htm
+++ /dev/null
@@ -1,1696 +0,0 @@
-<!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>Data Types</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">      
-			 <li><a href="#iterate">Iterator Functions</a></li>
-			 <li><a href="#string">Strings</a></li>
-			 <li><a href="#array">Arrays</a></li>
-			 <li><a href="#hash">Hash Tables</a></li>
-			 <li><a href="#list">Lists</a></li>
-			 <li><a href="#generic">Generic Value</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-        <ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
-		</ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Data Types</h1>
-
-  <p>The Eina library is a central part of the EFL. It implements an API for data types, and allows you to create and manipulate several data types:</p>
-
-<ul>
-<li><a href="#inline">Inline Array</a>: standard array of inlined members</li>
-<li><a href="#array">Array</a>: standard array of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
-<li><a href="#hash">Hash Table</a>: standard hash of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
-<li><a href="#inlist">Inline List</a>: list with nodes inlined into the user type</li>
-<li>Compact List</li>
-<li><a href="#list">List</a>: standard list of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
-<li><a href="#iterate">Iterator Functions</a></li>
-<li>Sparse Matrix: sparse matrix of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
-<li>Red-Black tree: red-black tree with nodes inlined into the user type</li>
-<li><a href="#buffer">String Buffer</a>: mutable string to prepend, insert, or append strings to a buffer</li>
-<li><a href="#share">Stringshare</a>: shares read-only string references</li>
-<li>Tiler split: merges and navigates into 2D tiled regions</li>
-<li>Trash: container of unused but allocated data</li>
-<li><a href="#generic">Generic Value Storage</a>: container for generic value storage and access</li>
-<li>Data Model API: container for data with a user-defined hierarchy or structure</li>
-</ul>
-
-  
-<h2 id="iterate" name="iterate">Iterator Functions</h2>
-<p>Eina provides a set of iterator functions to manipulate data types, such as arrays.</p>
-<p>These functions allow access to container elements in a generic way, without knowing which container is used (similar to iterators in the C++ STL). Iterators only allow sequential access (that is, from one element to the next one). For random access, Eina provides accessor functions.</p>
-<p>Getting an iterator to access elements of a given container is done through the functions of that particular container. There is no function to create a generic iterator as iterators absolutely depend on the container. Note that all iterators, regardless of the container type, are always deleted with the same <span style="font-family: Courier New,Courier,monospace">eina_iterator_free()</span> function.</p>
-<p>To get the data and iterate, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_next()</span> function. To call a function on every single element of a container, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_foreach()</span> function.</p>
-<p>In addition to iterator functions, each data type also owns a set of macros that provide the iterators, such as <span style="font-family: Courier New,Courier,monospace">FOREACH</span> or <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p>
-
-<h2 id="string" name="string">Strings</h2>
-
-<h3 id="share" name="share">Stringshare</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> data type functions allow you to store a single copy of a string and use it in multiple places throughout your program. This way you can save a lot of strings with less memory. It improves string creation and destruction speed, reduces memory use, and decreases memory fragmentation.</p>
-<p>With this data type you can reduce the number of duplicated strings kept in memory. It is common for the same strings to be dynamically allocated repeatedly between applications and libraries, especially in circumstances where you can have multiple copies of a structure that allocates the string. Rather than duplicating and freeing these strings, request a read-only pointer to an existing string and only incur the overhead of a hash lookup. This can sound like micro-optimizing, but profiling has shown that this can have a significant impact as the number of copies grows.</p>
-
-<p>To manage stringshares:</p>
-<ol>
-<li>To create a stringshare, declare a string variable and call the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_add()</span> function:
-<pre class="prettyprint">
-const char *mystr;
-const char *prologue = &quot;Enlightenment is not just a window manager for Linux/X11 and others&quot;
-
-mystr = eina_stringshare_add(prologue);
-</pre></li>
-
-<li>To retrieve or modify the string data:
-<ul>
-<li>Retrieve a string for use in a program from a format string using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_printf()</span> function. If you have a &quot;format&quot; string to pass to a function like <span style="font-family: Courier New,Courier,monospace">printf</span>, you can store it as a stringshare as well.
-<p>The following example produces &quot;1 desktop manager to rule them all&quot;.</p>
-<pre class="prettyprint">
-const char *myfmtstr = &quot;%d desktop manager to rule them all&quot;;
-const char *str;
-
-str = eina_stringshare_printf(myfmtstr, 1);
-
-print(str)
-</pre>
-</li>
-
-<li>Replace the value of a stringshare with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_replace()</span> function. Pass the pointer address and the new value to the function.
-<pre class="prettyprint">
-eina_stringshare_replace(&amp;str,&quot;One desktop manager to rule them all&quot;);
-</pre>
-</li>
-
-<li>Retrieve the length of the stringshare value with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_strlen()</span> function.
-<pre class="prettyprint">
-printf(&quot;length: %d\n&quot;, eina_stringshare_strlen(str));
-</pre>
-</li>
-</ul>
-</li>
-<li>When the string is no longer needed, delete it using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_del()</span> function:
-<pre class="prettyprint">
-eina_stringshare_del(mystr);
-</pre>
-</li>
-</ol>
-
-
-
-<h3 id="buffer" name="buffer">String Buffer</h3>
-<p>The string buffer data type is designed to be a mutable string, allowing you to append, prepend or insert a string to a buffer. It allows easy handling of buffers in your applications.</p>
-<p>To manage string buffers:</p>
-<ol>
-<li>Initialize the <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> instance and create the buffer:
-<pre class="prettyprint">
-Eina_Strbuf *buf;
-mybuffer = eina_strbuf_new();
-</pre>
-</li>
-<li>Manage the buffer content:
-<ul>
-<li>To append characters to the buffer:
-<ul>
-<li>
-<p>For basic strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append()</span> function:</p>
-<pre class="prettyprint">
-eina_strbuf_append(mybuffer, &quot;This is my string.&quot;);
-</pre>
-</li>
-<li>To append 1 character to your buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_char()</span> function. You can also append a sized string to the buffer using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_length()</span> function.
-<pre class="prettyprint">
-eina_strbuf_append_length(mybuffer, &quot;Buffe&quot;, 5);
-eina_strbuf_append_char(mybuffer, &#39;r&#39;);
-</pre>
-</li>
-<li>To handle &quot;printf&quot; format strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_printf()</span> function to add formatted strings to the buffer:
-<pre class="prettyprint">
-eina_strbuf_append_printf(buf, &quot;%s%c&quot;, &quot;buffe&quot;, &#39;r&#39;);
-</pre>
-</li>
-</ul>
-</li>
-
-<li>To remove characters from one position to another, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_remove()</span> function. The first parameter is the buffer, the second is the start position of the characters you want to delete, and the last the end position.
-<p>This example removes the first 19 characters of the buffer:</p>
-<pre class="prettyprint">
-eina_strbuf_remove(buf, 0, 18);
-</pre>
-</li>
-
-<li>To replace characters: 
-
-<ul><li>
-<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace()</span> replaces a specific occurrence of a given string in the buffer with another string.</li>
-<li>
-<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace_all()</span> replaces all occurrences of a given string in the buffer with another string.
-</li>
-</ul>
-<pre class="prettyprint">
-eina_strbuf_append(mybuffer, &quot;buffer buffer buffer&quot;);
-
-// Replacing one occurrence of &quot;buffer&quot; by &quot;B-U-F-F-E-R&quot;
-eina_strbuf_replace(mybuffer, &quot;buffer&quot;, &quot;B-U-F-F-E-R&quot;, 1);
-
-// Replacing all the occurrences of &quot;buffer&quot; by &quot;B-U-F-F-E-R&quot;
-eina_strbuf_replace_all(mybuffer, &quot;buffer&quot;, &quot;B-U-F-F-E-R&quot;);
-
-// Replacing all the occurrences of &quot;B-U-F-F-E-R&quot; by &quot;Buffer&quot;
-eina_strbuf_replace_all(mybuffer, &quot;B-U-F-F-E-R&quot;, &quot;Buffer&quot;);
-</pre>
-</li>
-<li>To insert a string at the specified position, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert()</span> function. Use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert_printf()</span> function with formatted strings.
-<pre class="prettyprint">
-eina_strbuf_insert(mybuffer, &quot;More buffer&quot;, 10);
-
-// Using eina_strbuf_length_get to get the buffer length
-eina_strbuf_insert_printf(buf, &quot; %s: %d&quot;, 6, &quot;length&quot;, eina_strbuf_length_get(buf));
-</pre>
-</li>
-
-<li>To get the complete length of the string and the buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_get()</span> and <span style="font-family: Courier New,Courier,monospace">eina_strbuf_length_get()</span> functions:
-<pre class="prettyprint">
-printf(&quot;%s : %d\n&quot;, eina_strbuf_string_get(mybuffer), eina_strbuf_length_get(buf));
-</pre>
-</li>
-</ul>
-</li>
-
-<li>When no longer needed, free the buffer with the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_free()</span> function. You can also free the content of <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> without freeing the buffer itself using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_free()</span> function.
-<pre class="prettyprint">
-eina_strbuf_free(mybuffer);
-</pre>
-</li>
-</ol>
-
-<h2 id="array" name="array">Arrays</h2>
-<p>An array is a data type which describes an ordered collection of values. The values are accessed by their index. </p>
-<pre class="prettyprint">
-INDEX | VALUE
---------------
-0     | value0
-1     | value1
-2     | value2
-3     | value3
-4     | value4
-5     | value5
-6     | value6
-7     | value7
-</pre>
-<p>Eina provides 2 array types: the classic array and an inline array.</p>
-
-<h3>Creating and Destroying a Classic Array</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function creates a new array. You can store strings or objects in the created array. The function returns a new array, or if memory allocation fails, <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function defines the size of the array allocation step. For example, if you set it to 4, the function returns an array of 4 elements and the next time you grow the array it grows by 4 elements. Unless you have pushed 4 elements inside, it does not grow. But once you add the 5th element, it grows again and becomes an array of 8 elements. The allocation step feature is very useful for optimizing performance, and it also reduces memory fragmentation by having a size that fits the array usage. If you set the step to 0, the function sets a default safe value.</p>
-
-<p>To create an array to store strings:</p>
-<ol>
-<li>Create the array:
-<pre class="prettyprint">
-// Strings to store in the array 
-const char* strings[] = 
-{
-&nbsp;&nbsp;&nbsp;&quot;helo&quot;, &quot;hera&quot;, &quot;starbuck&quot;, &quot;kat&quot;, &quot;boomer&quot;,
-&nbsp;&nbsp;&nbsp;&quot;hotdog&quot;, &quot;longshot&quot;, &quot;jammer&quot;, &quot;crashdown&quot;, &quot;hardball&quot;,
-&nbsp;&nbsp;&nbsp;&quot;duck&quot;, &quot;racetrack&quot;, &quot;apolo&quot;, &quot;husker&quot;, &quot;freaker&quot;,
-&nbsp;&nbsp;&nbsp;&quot;skulls&quot;, &quot;bulldog&quot;, &quot;flat top&quot;, &quot;hammerhead&quot;, &quot;gonzo&quot;
-};
-// Declaring the array (type Eina_Array)
-Eina_Array *array;
-unsigned int i;
-
-// Creating the array
-array = eina_array_new(20);
-
-// Inserting elements in the array
-for (i = 0; i &lt; 20; i++)
-&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
-</pre>
-</li>
-<li>To change the allocation step, use the <span style="font-family: Courier New,Courier,monospace">eina_array_step_set()</span> function:
-<ul><li>The first parameter is the array you want to change.</li>
-<li>The second parameter is the size of that specific array (retrieved with the <span style="font-family: Courier New,Courier,monospace">sizeof()</span> function).</li>
-<li>The last parameter is the new step size.</li></ul>
-<p>In this example, the array step changes from 20 to 30.</p>
-<pre class="prettyprint">
-eina_array_step_set(array, sizeof(*array), 30);
-</pre>
-</li>
-<li>When no longer used, use the <span style="font-family: Courier New,Courier,monospace">eina_array_free()</span> function to free the array. It first calls the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function and frees the memory of the pointer. It does not free the memory allocated for the elements of the array. To free them, use a <span style="font-family: Courier New,Courier,monospace">while</span> statement with the <span style="font-family: Courier New,Courier,monospace">eina_array_pop</span> function.
-<pre class="prettyprint">
-// Freeing the array elements
-while (eina_array_count(array))
-&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
-
-// Freeing the array itself
-eina_array_free(array);
-</pre>
-</li>
-</ol>
-
-<h3>Modifying Classic Array Content</h3>
-
-<p>To modify classic array content:</p>
-<ul>
-<li>To set the data of an element, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_set()</span> function. The first parameter is the array, the second is the index of the element you want to set, and the last one is the data. You must first get the related pointer if you need to free it, as this function replaces the previously held data. Be careful, as there is no array or index check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the application can crash.
-<pre class="prettyprint">
-free(eina_array_data_get(array, 0));
-eina_array_data_set(array, 0, strdup(strings[3]);
-</pre>
-</li>
-<li>To add elements to the end of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_push()</span> function. The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The first parameter is the array to store the element, the second one is the data you want to store. If you store strings, remember to allocate the memory first. The example uses the <span style="font-family: Courier New,Courier,monospace">strdup</span> function to duplicate the string contained in <span style="font-family: Courier New,Courier,monospace">strings[]</span>. This function allocates the memory of the returned string, so you do not have to do it yourself.
-<pre class="prettyprint">
-for (i = 0; i &lt; 20; i++)
-&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
-</pre>
-</li>
-
-<li>To remove the last element of an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_pop()</span> function. It takes the array as a parameter, and if the operation is successful, returns a pointer to the data of the removed element.
-<pre class="prettyprint">
-while (eina_array_count(array))
-&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
-</pre>
-</li>
-
-<li>To rebuild the array by specifying the data to be kept, use the <span style="font-family: Courier New,Courier,monospace">eina_array_remove()</span> function:
-<ul><li>The first parameter is the array to be changed.</li>
-<li>The second parameter is the function which selects the data to keep in the rebuilt array.</li>
-<li>The last parameter is the data to pass to the selector function defined as the second parameter.</li></ul>
-<p>The selector function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the element stays, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it has to be removed.</p>
-<p>The following example shows how to remove all the elements of the array that are longer than 5.</p>
-<pre class="prettyprint">
-// Selector function 
-Eina_Bool keep(void *data, void *gdata)
-{
-&nbsp;&nbsp;&nbsp;if (strlen((const char*)data) &lt;= 5)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-
-int remove_array()
-{
-&nbsp;&nbsp;&nbsp;Eina_Array *array;
-&nbsp;&nbsp;&nbsp;Eina_Array_Iterator iterator;
-&nbsp;&nbsp;&nbsp;const char *item;
-&nbsp;&nbsp;&nbsp;unsigned int i;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating an array
-
-&nbsp;&nbsp;&nbsp;// Removing the undesired elements 
-&nbsp;&nbsp;&nbsp;eina_array_remove(array, keep, NULL);
-
-&nbsp;&nbsp;&nbsp;// Flushing and freeing the array
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-<li>To completely wipe an array out, use the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function. This function sets the count and total members of an array to 0, and frees and sets its data members to <span style="font-family: Courier New,Courier,monospace">NULL</span>. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash. The only parameter of this function is a pointer to the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> array you want to flush.
-<pre class="prettyprint">
-eina_array_flush(array);
-</pre>
-</li>
-<li>To empty an array quickly, use the <span style="font-family: Courier New,Courier,monospace">eina_array_clean()</span> function. This function sets the counting of members in the array to 0. It does not free any space so you have to use it carefully. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash.
-<pre class="prettyprint">
-eina_array_clean(array);
-</pre>
-</li>
-</ul>
-
-<h3>Accessing Classic Array Data</h3>
-
-<p>To access classic array data:</p>
-<ul>
-<li>To access the data in the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_get()</span> function with the array and the index of the element you want to get. The function returns a pointer to the data.
-<pre class="prettyprint">
-// Getting the data of the first element 
-char *mydata;
-mydata = eina_array_data_get(array, 0);
-</pre>
-</li>
-
-
-<li>To get the number of elements in an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_count()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function.
-<p>The function returns the number of elements.</p>
-<pre class="prettyprint">
-unsigned int nb_elm;
-nb_elm = eina_array_count(array);
-</pre>
-</li>
-
-<li>To iterate through an array, you can use various methods:
-<ul>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> iterator called <span style="font-family: Courier New,Courier,monospace">ITER_NEXT</span>.
-<p>You can use the iterator by calling the macro <span style="font-family: Courier New,Courier,monospace">EINA_ARRAY_ITER_NEXT()</span>. It takes the array to iterate as the first parameter, a counter for the current index during the iteration, and a variable of the same type as the item data and an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>. To use it, declare an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>, an <span style="font-family: Courier New,Courier,monospace">int</span> counter, and, for example, a <span style="font-family: Courier New,Courier,monospace">char *</span> item if your array contains any strings.</p>
-<pre class="prettyprint">
-Eina_Array_Iterator iterator;
-const char *item;
-unsigned int i;
-
-EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
-&nbsp;&nbsp;&nbsp;printf(&quot;item #%d: %s\n&quot;, i, item);
-</pre>
-</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function to iterate over the array.
-<p>The first parameter is the array to iterate, the second is a callback function which determines whether the iteration can continue,and the last is the data passed to the callback function.</p>
-<p>To iterate over the array and to print the data of each array element:</p>
-<pre class="prettyprint">
-// Callback function 
-static Eina_Bool
-elm_print(const void *container, void *data, void *fdata)
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char *)data);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-int iterating_array()
-{
-&nbsp;&nbsp;&nbsp;Eina_Array *array;
-&nbsp;&nbsp;&nbsp;unsigned int i;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating an array
-
-&nbsp;&nbsp;&nbsp;// Iterating over the array and calling elm_print on each element
-&nbsp;&nbsp;&nbsp;eina_array_foreach(array, elm_print, NULL);
-
-&nbsp;&nbsp;&nbsp;// Freeing the element data and array
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_iterator_new()</span> function to create an iterator for the array. <p>The function returns a newly allocated iterator associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the count of the array members is less than or equal to 0, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid iterator is returned.</p>
-<p>Pass to this function the array for which you want to create a new iterator. The iterator is used to run a sequential walk through the array, just like the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function.</p>
-<p>To create an iterator and use it to print the data of each array element:</p>
-<pre class="prettyprint">
-static Eina_Bool
-print_one(const void *container, void *data, void *fdata)
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)data);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-int new_iterator()
-{
-&nbsp;&nbsp;&nbsp;Eina_Array *arra;
-&nbsp;&nbsp;&nbsp;Eina_Iterator *it;
-&nbsp;&nbsp;&nbsp;unsigned short int i;
-&nbsp;&nbsp;&nbsp;void *uninteresting;
-&nbsp;&nbsp;&nbsp;Eina_Bool rt;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating an array
-
-&nbsp;&nbsp;&nbsp;it = eina_array_iterator_new(array);
-
-&nbsp;&nbsp;&nbsp;it = eina_iterator_next(it, &amp;uninteresting);
-&nbsp;&nbsp;&nbsp;eina_iterator_foreach(it, print_one, NULL);
-&nbsp;&nbsp;&nbsp;eina_iterator_free(it);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_accessor_new()</span> function to get random access to the array elements. 
-<p>The function returns a newly allocated accessor associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the counting of array members is less than or equal to 0, this function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid accessor is returned.</p>
-<p>To use the accessor to retrieve and print the data of every other array element:</p>
-<pre class="prettyprint">
-int random_access()
-{
-&nbsp;&nbsp;&nbsp;// Declaration of the array 
-&nbsp;&nbsp;&nbsp;Eina_Array *array;
-&nbsp;&nbsp;&nbsp;// Declaration of the accessor
-&nbsp;&nbsp;&nbsp;Eina_Accessor *acc;
-
-&nbsp;&nbsp;&nbsp;// Generic counter
-&nbsp;&nbsp;&nbsp;unsigned short int i;
-
-&nbsp;&nbsp;&nbsp;// Variable to put the data retrieved from an array element
-&nbsp;&nbsp;&nbsp;void *data;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating an array
-
-&nbsp;&nbsp;&nbsp;// Creating the array accessor
-&nbsp;&nbsp;&nbsp;acc = eina_array_accessor_new(array);
-
-&nbsp;&nbsp;&nbsp;// Random access to the data of the array elements
-&nbsp;&nbsp;&nbsp;for(i = 1; i &lt; 10; i += 2)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Putting the data in the variable &#39;data&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_accessor_data_get(acc, i, &amp;data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (const char *)data);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// Freeing the accessor
-&nbsp;&nbsp;&nbsp;eina_accessor_free(acc);
-
-&nbsp;&nbsp;&nbsp;// Freeing the array
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-</ul>
-</li>
-</ul>
-
-
-<h3 id="inline" name="inline">Creating and Destroying an Inline Array</h3>
-
-<p>An inline array is a container that stores the data itself, not the pointers to the data. This means there is no memory fragmentation, and for small data types, such as char, short, and int, it is more memory-efficient. This is because the data is stored in the cache and is faster to access. The bigger the data gets, however, the less likely it is and the less interesting it becomes.</p>
-<p>To create an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function:</p>
-<ul><li>The first parameter is the size of the value. In this example, only the characters are stored, and because of that, only <span style="font-family: Courier New,Courier,monospace">sizeof(char)</span> is passed to the function.</li>
-<li>The second parameter defines the size of the array allocation step. For example, if you set it to 4, the function returns an inline array of 4 elements, and the next time you grow the inline array, it grows by 4 elements and becomes an array of 8 elements. If you set the step to 0, the function sets a default safe value. 
-<p>The step can be changed later on using the <span style="font-family: Courier New,Courier,monospace">eina_inarray_step_set()</span> function.</p></li></ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function returns a pointer to the new <span style="font-family: Courier New,Courier,monospace">Eina_Inarray</span> variable.</p>
-<pre class="prettyprint">
-int inline_array() 
-{
-&nbsp;&nbsp;&nbsp;// Declare an inline array variable of the type Eina_Inarray
-&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-
-&nbsp;&nbsp;&nbsp;// Create an inline array of &quot;char&quot;
-&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 0);
-
-&nbsp;&nbsp;&nbsp;// When no longer needed, free the array memory
-&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-<h3>Modifying Inline Array Content</h3>
-
-<p>To modify inline array content:</p>
-<ul>
-<li>
-<p>To add data as the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_push()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to push to the inline array.</p>
-<p>If everything runs fine, the function returns the index of the new element. If something goes wrong, it returns <span style="font-family: Courier New,Courier,monospace">-1</span>.</p>
-<pre class="prettyprint">
-ch = &#39;a&#39;;
-eina_inarray_push(iarr, &amp;ch);
-</pre>
-</li>
-<li>
-<p>To insert data to a given position of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_at()</span> function:</p>
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The second parameter is the index of the element you want to add to the inline array.</li>
-<li>The last parameter is a pointer to the content to be added.</li></ul>
-<p>The content of the pointer is copied to the given position in the inline array. All the members from the position to the end of the array are shifted towards the end. If the position is equal to the end of the array, the member is appended. If the position is bigger than the array length, the function fails.</p>
-<pre class="prettyprint">
-ch = &#39;a&#39;;
-eina_inarray_push(iarr, &amp;ch);
-ch = &#39;b&#39;;
-eina_inarray_push(iarr, &amp;ch);
-ch = &#39;d&#39;;
-eina_inarray_push(iarr, &amp;ch);
-
-// Adding data on position 3
-ch = &#39;c&#39;;
-eina_inarray_insert_at(iarr, 2, &amp;ch)
-</pre>
-</li>
-<li>
-<p>To insert data with your own position criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function. The only difference between these functions is that the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function assumes that the array is already sorted and consequently optimizes the insertion position by doing a binary search.</p>
-<p>In both functions:</p>
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The second parameter is the data you want to push to the inline array.</li>
-<li>The last parameter is the callback comparison function. 
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback function compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function as the second parameter. If data1 is less than data2, -1 must be returned, if it is greater, 1 must be returned, and if they are equal, 0 must be returned.</p></li></ul>
-<p>The following example shows how to insert a value before a greater value:</p>
-<pre class="prettyprint">
-// Defining the comparison function with the position criteria
-Eina_Compare_Cb cmp(const void *a, const void *b)
-{
-&nbsp;&nbsp;&nbsp;return *(int*)a &gt; *(int*)b;
-}
-
-int inline_insert()
-{
-&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-&nbsp;&nbsp;&nbsp;char ch, *ch3;
-&nbsp;&nbsp;&nbsp;int a, *b;
-
-&nbsp;&nbsp;&nbsp;// Creating an inline array
-
-&nbsp;&nbsp;&nbsp;// Adding data to the inline array
-&nbsp;&nbsp;&nbsp;a = 97;
-&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
-&nbsp;&nbsp;&nbsp;a = 98;
-&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
-&nbsp;&nbsp;&nbsp;a = 100;
-&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
-
-&nbsp;&nbsp;&nbsp;// Inserting data with the criteria
-&nbsp;&nbsp;&nbsp;a = 99;
-&nbsp;&nbsp;&nbsp;eina_inarray_insert_sorted(iarr, &amp;a, cmp);
-
-&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
-}
-</pre>
-</li>
-<li>
-<p>To remove the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_pop()</span> function. The only parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. This function returns the data removed from the inline array.</p>
-<pre class="prettyprint">
-eina_inarray_pop(iarr);
-</pre>
-</li>
-<li>
-<p>To remove specific data from an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to remove from the inline array.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function finds the data and removes the matching members from the array. The data can be an existing member of an inline array for optimized usage. In other cases, the content is matched using the <span style="font-family: Courier New,Courier,monospace">memcmp()</span> function.</p>
-
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function returns the index of the removed member, or -1 if failed.</p>
-<pre class="prettyprint">
-iarr = eina_inarray_new(sizeof(char), 0);
-
-ch = &#39;a&#39;;
-eina_inarray_push(iarr, &amp;ch);
-
-// Removing data from the array
-eina_inarray_remove(iarr, &amp;ch);
-</pre>
-</li>
-
-<li>
-<p>To remove data from a defined position in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove_at()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the index of the element you want to remove from the inline array.</p>
-<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if something goes wrong. The member is removed from the inline array and any members after it are moved towards the array&#39;s head.</p>
-<pre class="prettyprint">
-// Removing data from position 2
-eina_inarray_remove_at(iarr, 2);
-</pre>
-</li>
-<li><p>To remove all the elements of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_flush()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function removes every member from the array.</p>
-<pre class="prettyprint">
-eina_inarray_flush(iarr);
-</pre>
-</li>
-
-<li>
-<p>To replace values in the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_replace_at()</span> function, which copies the data over the given position:</p>
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The second parameter is the index of the element you want to remove from the inline array.</li>
-<li>The last parameter is the data you want to copy in place of the current data.</li></ul>
-<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The given pointer content is copied to the given position in the array. The pointer is not referenced, instead its contents are copied to the member&#39;s array using the previously defined <span style="font-family: Courier New,Courier,monospace">member_size</span>. If the position does not exist, the function fails.</p>
-<pre class="prettyprint">
-// Replacing the member at position 3 
-ch = &#39;d&#39;;
-eina_inarray_replace_at(iarr, 3, &amp;ch);
-</pre>
-</li>
-
-<li>
-<p>To sort an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_sort()</span> function, which applies a quick sorting algorithm to the inline array:</p>
-<ul><li>The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2. 
-<p>data1 and data2 are values contained in the inline array. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
-<pre class="prettyprint">
-static int
-short_cmp(const void *pa, const void *pb)
-{
-&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
-
-&nbsp;&nbsp;&nbsp;return *a - *b;
-}
-
-int sorting_inline_array()
-{
-&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating the inline array
-
-&nbsp;&nbsp;&nbsp;eina_inarray_sort(array, short_cmp);
-&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
-}
-</pre>
-
-<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
-</li>
-</ul> 
-
-<h3>Accessing Inline Array Data</h3>
-
-<p>To access inline array data:</p>
-<ul>
-<li>
-<p>To search a member in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function that runs a linear walk looking for the given data:</p>
-
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The second parameter is the data used by the callback function to run the comparison.</li>
-<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2.
-<p>data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function as the second parameter. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
-<p>The function returns the member index, or -1 if not found.</p>
-<pre class="prettyprint">
-Eina_Compare_Cb
-compare(const void *pa, const void *pb)
-{
-&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
-&nbsp;&nbsp;&nbsp;if (*a == *b)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-
-int search_inline_array()
-{
-&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
-&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;int elm_index;
-&nbsp;&nbsp;&nbsp;int to_search = 3;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating the inline array
-
-&nbsp;&nbsp;&nbsp;elm_index = eina_inarray_search(array, &amp;to_search, compare);
-&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
-}
-</pre>
-
-<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_search_sorted()</span> function does exactly the same as <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span>, but uses a binary search for the given data.</p>
-</li>
-
-<li>
-<p>To get the number of elements in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_count()</span>. The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function returns an unsigned <span style="font-family: Courier New,Courier,monospace">int</span>, the number of elements.</p>
-<pre class="prettyprint">
-printf(&quot;Inline array of integers with %d elements:\n&quot;, eina_inarray_count(iarr));
-</pre>
-</li>
-
-<li>To iterate through an inline array, you can use various methods:
-<ul>
-<li><p>You can use the iterator macros for the inline arrays: <span style="font-family: Courier New,Courier,monospace">FOREACH</span> and <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p></li>
-<li>
-<p>To run a linear walk over an array of elements, use the <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_FOREACH()</span> macro. The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>, and the second parameter is the variable into which the current value is put during the walk. The <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_REVERSE_FOREACH()</span> macro does the same thing but starts from the last element.</p>
-
-<p>The following example illustrates the printing of each element and its pointer:</p>
-<pre class="prettyprint">
-iarr = eina_inarray_new(sizeof(char), 0);
-int a, *b;
-
-a = 97;
-eina_inarray_push(iarr, &amp;a);
-a = 98;
-eina_inarray_push(iarr, &amp;a);
-a = 99;
-eina_inarray_push(iarr, &amp;a);
-
-EINA_INARRAY_FOREACH(iarr, b)
-  printf(&quot;int: %d(pointer: %p)\n&quot;, *b, b);
-</pre>
-</li>
-<li>To process the array data, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function, which invokes the given function on each element of the array with the given data:
-<ul><li>The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>.</li>
-<li>The second parameter is the function to run on each element.
-<p>The function must return <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as long as you want to continue iterating. By returning <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, you stop the iteration and make the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function return <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
-<p>The data given to the function is the pointer to the member itself.</p></li>
-<li>The last parameter is the data passed to the function called on each element.</li></ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if it successfully iterates through all items of the array. Call the function for every given data in the array. This is a safe way to iterate over an array.</p>
-<pre class="prettyprint">
-static Eina_Bool
-array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;short *member = p;
-&nbsp;&nbsp;&nbsp;int *i = user_data;
-&nbsp;&nbsp;&nbsp;(*p)++;
-&nbsp;&nbsp;&nbsp;(*i)++;
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-int inline_array_foreach()
-{
-&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;i = 0;
-&nbsp;&nbsp;&nbsp;eina_inarray_foreach(iarr, array_foreach, &amp;i);
-
-&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-
-<li>To remove some elements based on your own criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach_remove()</span> function, which walks through the array and, if the value matches in the callback function, removes the element:
-<ul><li>The first parameter is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The second parameter is the callback function to run on each element.
-<p>The callback function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the value matches, or <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it does not match.</p></li>
-<li>The last parameter is the data passed to the callback function.</li></ul>
-<p>The function returns the number of removed entries or -1 if something goes wrong.</p>
-<pre class="prettyprint">
-static Eina_Bool
-array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;short *member = p;
-&nbsp;&nbsp;&nbsp;int *i = user_data;
-&nbsp;&nbsp;&nbsp;if (*i == *p) 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-
-int inline_array_foreach_remove()
-{
-&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;i = 6;
-&nbsp;&nbsp;&nbsp;eina_inarray_foreach_remove(iarr, array_foreach, &amp;i);
-
-&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-</li>
-</ul>
-</li>
-</ul>
-
-
-<h2 id="hash" name="hash">Hash Tables</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> provides a way to store values in association with a key. For example, if you want to store some tuples into a table, you can do it using the <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span>.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> is implemented using an array of &quot;buckets&quot; where each bucket is a pointer to a structure that is the head of a red-black tree. This implementation makes it very robust against week keys as in the worst case scenario, you can still depend on an efficient binary tree implementation.</p>
-
-<h3 id="hash_create" name="hash_create">Creating a Hash Table</h3>
-
-<p>To create the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_new()</span> function:</p>
-<ul>
-<li>The first parameter is the function called when getting the size of the key.</li>
-<li>The second parameter is the function called when comparing the keys.</li>
-<li>The third parameter is the function called when getting the values.</li>
-<li>The fourth parameter is the function called on each value when the hash table is freed, or when an item is deleted from it. <span style="font-family: Courier New,Courier,monospace">NULL</span> can be passed as the callback.</li>
-<li>The last parameter is the size of the buckets.</li>
-</ul>
-<p>When you create an <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> instance, you have to create 4 potentially long callback functions. To make the functions shorter, <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers some predefined functions to create the following kinds of hash tables:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_djb2_new()</span> creates a new hash table using the djb2 algorithm for strings.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> creates a new hash table for use with strings (better with long strings).</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_small_new()</span> creates a new hash table for use with strings with a small bucket size.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_int32_new()</span> and <span style="font-family: Courier New,Courier,monospace">eina_hash_int64_new()</span> create a new hash table for use with 32-bit and 64-bit integers.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_pointer_new()</span> creates a new hash table for use with pointers.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_stringshared_new()</span> creates a new hash table for use with shared strings.</li>
-</ul>
-<p>All these predefined functions require only one parameter, which is the function to free the data you store in the hash table.</p>
-<p>The following example shows how to manage a small phone book using the <span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> function to create the hash table.</p>
-<ol>
-<li><p>Create the phone book structure and some static data:</p>
-<pre class="prettyprint">
-struct _Phone_Entry 
-{
-&nbsp;&nbsp;&nbsp;const char *name; // Full name
-&nbsp;&nbsp;&nbsp;const char *number; // Phone number
-};
-
-typedef struct _Phone_Entry Phone_Entry;
-
-static Phone_Entry _start_entries[] = 
-{
-&nbsp;&nbsp;&nbsp;{ &quot;Wolfgang Amadeus Mozart&quot;, &quot;+01 23 456-78910&quot; },
-&nbsp;&nbsp;&nbsp;{ &quot;Ludwig van Beethoven&quot;, &quot;+12 34 567-89101&quot; },
-&nbsp;&nbsp;&nbsp;{ &quot;Richard Georg Strauss&quot;, &quot;+23 45 678-91012&quot; },
-&nbsp;&nbsp;&nbsp;{ &quot;Heitor Villa-Lobos&quot;, &quot;+34 56 789-10123&quot; },
-&nbsp;&nbsp;&nbsp;{ NULL, NULL }
-};
-</pre>
-</li>
-
-<li><p>Create the callback to free the data:</p>
-<pre class="prettyprint">
-static void
-_phone_entry_free_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;free(data);
-}
-</pre>
-<p>The free callback can be changed later using the <span style="font-family: Courier New,Courier,monospace">eina_hash_free_cb_set()</span> function. You need to pass the hash and the new callback function.</p>
-</li>
-
-<li><p>Create and destroy the hash table.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_free_buckets()</span> function frees all hash table buckets. It empties the hash but does not destroy it, and you can still use it for another purpose. When <span style="font-family: Courier New,Courier,monospace">eina_hash_free()</span> is called, the space allocated for the hash is freed.</p>
-<pre class="prettyprint">
-int free_data()
-{
-&nbsp;&nbsp;&nbsp;Eina_Hash *phone_book = NULL;
-&nbsp;&nbsp;&nbsp;phone_book = eina_hash_string_superfast_new(_phone_entry_free_cb);
-
-&nbsp;&nbsp;&nbsp;// Empty the phone book without destroying it
-&nbsp;&nbsp;&nbsp;eina_hash_free_buckets(phone_book);
-&nbsp;&nbsp;&nbsp;eina_hash_free(phone_book);
-}
-</pre>
-</li>
-</ol>
-
-
-
-
-<h3>Modifying Hash Table Content</h3>
-
-<p>To modify hash table content:</p>
-<ul>
-<li>
-<p>To add some data to a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_add()</span> function. This function takes the hash, the key to access the data, and the data as its parameters.</p>
-<p>The following example shows how to add the initial data declared earlier to the hash:</p>
-<pre class="prettyprint">
-for (i = 0; _start_entries[i].name != NULL; i++)
-{
-&nbsp;&nbsp;&nbsp;eina_hash_add(phone_book, _start_entries[i].name, strdup(_start_entries[i].number));
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers various ways to add elements to a hash, such as the <span style="font-family: Courier New,Courier,monospace">eina_hash_direct_add()</span> function, which adds the entry without duplicating the string key. The key is stored in the struct, so this function can be used with <span style="font-family: Courier New,Courier,monospace">eina_stringshare</span> to avoid key data duplication.</p>
-<pre class="prettyprint">
-for (i = 0; _start_entries[i].name != NULL; i++)
-{
-&nbsp;&nbsp;&nbsp;// Allocating memory for the phone entry
-&nbsp;&nbsp;&nbsp;Phone_Entry *e = malloc(sizeof(Phone_Entry));
-
-&nbsp;&nbsp;&nbsp;// Creating an eina_stringshare for the name and the phone number
-&nbsp;&nbsp;&nbsp;e-&gt;name = eina_stringshare_add(_start_entries[i].name);
-&nbsp;&nbsp;&nbsp;e-&gt;number = eina_stringshare_add(_start_entries[i].number);
-
-&nbsp;&nbsp;&nbsp;// Adding the entry to the hash 
-&nbsp;&nbsp;&nbsp;eina_hash_direct_add(phone_book, e-&gt;name, e);
-}
-</pre>
-</li>
-<li>
-<p>To modify an entry, use <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span> function passing the hash, the key of the data to change, and the new data. The function returns the old data on success.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_set()</span> function does the same work as <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span>, but if the entry does not exist, the function creates a new one.</p>
-<pre class="prettyprint">
-char *old_phone = NULL;
-char *phone = NULL;
-// Replace the phone number of Richard Strauss
-old_phone = eina_hash_modify(phone_book, &quot;Richard Georg Strauss&quot;, strdup(&quot;+23 45 111-11111&quot;));
-phone = eina_hash_set(phone_book, &quot;Philippe de Magalhães&quot;, strdup(&quot;+33 6 111-11111&quot;));
-eina_hash_set(phone_book, &quot;Richard Georg Strauss&quot;, strdup(&quot;+23 45 111-117711&quot;));
-</pre>
-</li>
-<li>
-<p>To change the key associated with the data without freeing and creating a new entry, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_move()</span> function. You only have to pass the hash, the old key, and the new key. If the operation succeeds, the function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, if not, it returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
-<pre class="prettyprint">
-Eina_Bool res;
-res = eina_hash_move(phone_book, &quot;Philippe de Magalhães&quot;, &quot;Filipe de Magalhães&quot;);
-</pre>
-</li>
-<li>
-<p>To delete entries from a hash table:</p>
-<ul><li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del()</span> function to remove the entry identified by a key or data from the given hash table:
-<pre class="prettyprint">
-Eina_Bool r;
-const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
-r = eina_hash_del(phone_book, entry_name, NULL);
-</pre></li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_key()</span> function to remove an entry based on the key:
-<pre class="prettyprint">
-r = eina_hash_del_by_key(phone_book, &quot;Richard Georg Strauss&quot;);
-</pre>
-</li>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_data()</span> function to remove an entry based on the data:</p>
-<pre class="prettyprint">
-r = eina_hash_del_by_data(phone_book, &quot;+12 34 567-89101&quot;);
-</pre>
-</li>
-</ul></li></ul>
-
-<h3>Accessing Hash Table Data</h3>
-<p>To find hash table elements and get data based on the key name:</p>
-<ul>
-<li>
-<p>To retrieve an entry based on its key, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_find()</span> function by passing the hash and the key you are looking for:</p>
-<pre class="prettyprint">
-char *phone = NULL;
-const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
-
-// Look for a specific entry and get its phone number
-phone = eina_hash_find(phone_book, entry_name);
-</pre>
-</li>
-<li>
-<p>To get the number of entries in a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_population()</span> function. Pass the hash as the only argument.</p>
-<pre class="prettyprint">
-unsigned int nb_elm;
-nb_elm = eina_hash_population(phone_book);
-</pre>
-</li>
-
-<li>To iterate through a hash table, you can use various methods: 
-<ul>
-
-<li>to iterate over the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_foreach()</span> function:
-
-<ul><li>The first parameter is the hash.</li>
-<li>The second parameter is the callback function called on each iteration.
-<p>The callback function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the iteration has to continue and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if the iteration has to stop.</p></li>
-<li>The last parameter one is the data passed to the callback function.</li></ul>
-
-<p>The following example prints the key and the data of the hash entry (the name and the phone number):</p>
-
-<pre class="prettyprint">
-static Eina_Bool
-pb_foreach_cb(const Eina_Hash *phone_book, const void *key, void *data, void *fdata)
-{
-&nbsp;&nbsp;&nbsp;const char *name = key;
-&nbsp;&nbsp;&nbsp;const char *number = data;
-&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
-
-&nbsp;&nbsp;&nbsp;// Return EINA_FALSE to stop this callback from being called
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-printf(&quot;List of phones:\n&quot;);
-
-// Running the callback on the hash called phone_book 
-eina_hash_foreach(phone_book, pb_foreach_cb, NULL);
-printf(&quot;\n&quot;);
-</pre>
-</li>
-<li>To iterate over the keys, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span> function:
-<pre class="prettyprint">
-// Declaration of the Eina_Iterator
-Eina_Iterator *it;
-
-// Variable to handle the current iteration &quot;data&quot;
-void *data;
-
-// Iterate over the keys (names)
-printf(&quot;List of names in the phone book:\n&quot;);
-
-it = eina_hash_iterator_key_new(phone_book);
-
-// Use the generic eina_iterator_next()
-while (eina_iterator_next(it, &amp;data))
-{
-&nbsp;&nbsp;&nbsp;const char *name = data;
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, name);
-}
-
-// Free the iterator
-eina_iterator_free(it);
-</pre>
-</li>
-
-<li>To iterate over the hash data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_data_new()</span> function the same way as <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span>:
-<pre class="prettyprint">
-// Declaration of the Eina_Iterator
-Eina_Iterator *it;
-
-// Variable to handle the current iteration &quot;data&quot;
-void *data;
-
-// Iterate over hash data 
-printf(&quot;List of numbers in the phone book:\n&quot;);
-
-it = eina_hash_iterator_data_new(phone_book);
-while (eina_iterator_next(it, &amp;data))
-{
-&nbsp;&nbsp;&nbsp;const char *number = data;
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, number);
-}
-
-// Free the iterator
-eina_iterator_free(it);
-</pre>
-</li>
-<li>To iterate over a tuple composed of keys and data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_tuple_new()</span> function:
-<pre class="prettyprint">
-// Declaration of the Eina_Iterator
-Eina_Iterator *tit;
-
-// Variable to handle the current iteration &quot;data&quot;
-void *tuple;
-
-printf(&quot;List of phones:\n&quot;);
-tit = eina_hash_iterator_tuple_new(phone_book);
-while (eina_iterator_next(tit, &amp;tuple))
-{
-&nbsp;&nbsp;&nbsp;Eina_Hash_Tuple *t = tuple;
-&nbsp;&nbsp;&nbsp;const char *name = t-&gt;key;
-&nbsp;&nbsp;&nbsp;const char *number = t-&gt;data;
-&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
-}
-
-// Always free the iterator after its use
-eina_iterator_free(tit); 
-</pre>
-</li>
-</ul>
-</li>
-</ul>
-
-
-<h2 id="list" name="list">Lists</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_List</span> is a double-linked list that can store data of any type as void pointers. It provides a set of functions to create and manipulate the list to avoid the access to the struct&#39;s fields, similar to a self-made double-link list.</p>
-<p>In addition to the previous and next node and its data, the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> nodes keep a reference to an accounting structure. The accounting structure is used to improve the performance of some functions. The structure is private and must not be modified.</p>
-
-<p>In an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a &quot;list&quot;: the list itself is a list where each node is a list as well.</p>
-
-<p>Eina provides 2 list types: the classic list (<span style="font-family: Courier New,Courier,monospace">Eina_List</span>) and an inline list (<span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span>).</p>
-
-<h3>Creating and Destroying a List</h3>
-<p>To use an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
-
-<ol><li>Declare the list with <span style="font-family: Courier New,Courier,monospace">NULL</span> as the default value:
-<pre class="prettyprint">
-int list()
-{
-&nbsp;&nbsp;&nbsp;// Declaration of the Eina_List with NULL as default value;
-&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
-</pre></li>
-
-<li>Call the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function with the list and the data you want to append as parameters.
-<p>The list must be a pointer to the first element of the list (or <span style="font-family: Courier New,Courier,monospace">NULL</span>). The function returns a pointer to the list.</p>
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;// Creating the first element of the list 
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;watch&quot;);
-
-&nbsp;&nbsp;&nbsp;// Adding more elements
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;phone&quot;);
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;ivi&quot;);
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;notebook&quot;);
-</pre></li>
-
-<li>When you no longer need the list, free it:
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;// Free the Eina_List
-&nbsp;&nbsp;&nbsp;eina_list_free(list);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre></li>
-</ol>
-
-
-<h3>Modifying List Content</h3>
-
-<p>To modify list content:</p>
-<ul>
-<li>
-<p>To add data to a list:</p>
-
-<ul>
-<li>To add data at the end of the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function. To add data at the top of the list, use <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span>. The functions work in the same way, only adding the data to different places.
-<pre class="prettyprint">
-list = eina_list_prepend(list, &quot;set-top box&quot;);
-</pre>
-</li>
-
-<li>To insert data into the list after a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function. As the last parameter, define the element after which the data is added.
-<p>For example to append data after the &quot;phone&quot; element:</p>
-<pre class="prettyprint">
-list = eina_list_append_relative(list, &quot;single-board computer&quot;, &quot;phone&quot;);
-</pre>
-</li>
-
-<li>To add a new entry before a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_prepend_relative()</span> function. It is similar to the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function.
-<pre class="prettyprint">
-list = eina_list_prepend_relative(list, &quot;ultrabook&quot;, &quot;ivi&quot;);
-</pre>
-</li>
-
-<li>To append a list node to a linked list after a specified member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative_list()</span> function. To prepend a list node to a linked list before a specified member, use the <span style="font-family: Courier New,Courier,monospace">Eina_List * eina_list_prepend_relative_list()</span> function.
-</li>
-</ul>
-</li>
-
-<li>To set data in a list member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_set()</span> function. Pass the &quot;list&quot; (node) as the first argument and the data to set as the second.
-
-<p>The following example also shows the usage of the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span> function, which returns the last element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>.</p>
-
-<pre class="prettyprint">
-// Setting new data for the last element
-eina_list_data_set(eina_list_last(list), eina_stringshare_add(&quot;Boris&quot;));
-</pre>
-</li>
-
-<li id="remove_list">To remove a node from the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_remove()</span> function. This function removes the first instance of the specified data from the given list.
-<pre class="prettyprint">
-list = eina_list_remove(list, &quot;ultrabook&quot;);
-</pre>
-<p>You can also remove a &quot;list&quot; (node) from a list using the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function. Pass the list you want to delete an element from and a &#39;list&#39; (node) you want to delete.</p>
-<pre class="prettyprint">
-Eina_List *app_list = NULL;
-Eina_List *to_remove = NULL;
-
-// Adding some elements to the list (using stringshares)
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enna&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ebird&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;calaos&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;rage&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;terminology&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enlightenment&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;eyelight&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ephoto&quot;));
-
-// Finding the &quot;list&quot; to remove 
-to_remove = eina_list_data_find_list(list, eina_string_share_add(&quot;enlightenment&quot;));
-
-list = eina_list_remove_list(list, to_remove);
-</pre>
-</li>
-
-<li>To move elements in a list, you can use various function, such as <span style="font-family: Courier New,Courier,monospace">eina_list_promote_list()</span> that promotes an element to the top of the list or <span style="font-family: Courier New,Courier,monospace">eina_list_demote_list()</span> that puts the specified element at the end of the list. Remember that everything is a list so the second parameter represents the &quot;list&quot; (node) you want to move. Use the functions just like the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function.
-<pre class="prettyprint">
-list = eina_list_promote_list(list, eina_list_data_find_list(list, &quot;ivi&quot;));
-</pre>
-</li>
-<li>To reverse all the elements of a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse()</span> function. To obtain a reversed copy of the list while keeping the initial list unchanged, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse_clone()</span> function.
-<pre class="prettyprint">
-Eina_List *rev_copy;
-
-app_list = eina_list_reverse(app_list);
-rev_copy = eina_list_reverse_clone(app_list);
-</pre>
-</li>
-<li>To sort a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_sort()</span> function. This function takes a list which needs to be sorted, the maximum number of elements to be sorted, and a callback function that compares data. To sort all list elements, set the maximum number of elements to 0.
-<pre class="prettyprint">
-int sort_cb(const void *d1, const void *d2)
-{
-&nbsp;&nbsp;&nbsp;const char *txt = d1;
-&nbsp;&nbsp;&nbsp;const char *txt2 = d2;
-&nbsp;&nbsp;&nbsp;if(!txt) return(1);
-&nbsp;&nbsp;&nbsp;if(!txt2) return(-1);
-
-&nbsp;&nbsp;&nbsp;return(strcmp(txt, txt2));
-}
-
-extern Eina_List *list;
-list = eina_list_sort(list, 0, sort_cb);
-</pre>
-</li>
-<li>To merge 2 list into 1, use the <span style="font-family: Courier New,Courier,monospace">eina_list_merge()</span> function. The <span style="font-family: Courier New,Courier,monospace">eina_list_sorted_merge()</span> function merges 2 sorted lists according to the ordering function that you pass as the last argument.
-<pre class="prettyprint">
-int sort_cb(void *d1, void *d2)
-{
-&nbsp;&nbsp;&nbsp;const char *txt = NULL;
-&nbsp;&nbsp;&nbsp;const char *txt2 = NULL;
-&nbsp;&nbsp;&nbsp;if(!d1) return(1);
-&nbsp;&nbsp;&nbsp;if(!d2) return(-1);
-
-&nbsp;&nbsp;&nbsp;return(strcmp((const char*)d1, (const char*)d2));
-}
-
-Eina_List *sorted1;
-Eina_List *sorted2;
-Eina_List *newlist;
-
-// Insert some values and sort your lists
-
-// Simply merge 2 lists without any process
-newlist = eina_list_merge(sorted1, sorted2);
-
-newlist = eina_list_sorted_merge(sorted1, sorted2, sort_cb);
-</pre>
-</li>
-<li>To split a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_split_list()</span> function:
-<ul><li>The first parameter is the list to split.</li>
-<li>The second parameter is the &quot;list&quot; (element) after which the list is split.</li>
-<li>The last parameter is the head of the second list.</li></ul>
-<pre class="prettyprint">
-// Original list (left list)
-Eina_List *list = NULL;
-
-// New list (right list)
-Eina_List *other_list = NULL;
-
-// Eina_List (element)
-Eina_List *l;
-
-list = eina_list_append(list, &quot;super tux&quot;);
-list = eina_list_append(list, &quot;frozen bubble&quot;);
-list = eina_list_append(list, &quot;lincity-ng&quot;);
-
-// Sorting the list (just for fun)
-list = eina_list_sort(list, 0, cmp_func);
-
-// Looking for the &#39;split&#39; element
-l = eina_list_search_sorted_list(list, cmp_func, &quot;frozen bubble&quot;);
-
-// Splitting the list
-list = eina_list_split_list(list, l, &amp;other_list);
-</pre>
-</li>
-<li>To copy a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_clone()</span> function. The function copies all the elements in the list in the exact same order.
-<pre class="prettyprint">
-Eina_List *app_list_copy;
-
-app_list_copy = eina_list_clone(app_list);
-</pre>
-</li>
-
-</ul>
-
-
-<h3>Accessing List Data</h3>
-<p>To access list data:</p>
-<ul>
-<li>To find some data on your list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function. Pass the list containing your data as the first parameter and the data you are looking for as the last one. The function returns the found member data pointer if found, <span style="font-family: Courier New,Courier,monospace">NULL</span> otherwise.
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function searches the list from the beginning to the end for the first member for which the data pointer is data. If it is found, the data is returned, otherwise <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned. The function only compares pointers, which is why using <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> is very useful with lists, because it always returns the same pointer for the same string.</p>
-<pre class="prettyprint">
-Eina_List *app_list = NULL;
-const char *res_str;
-
-// Adding some elements to the list (using stringshares)
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enna&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ebird&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;calaos&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;rage&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;terminology&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enlightenment&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;eyelight&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ephoto&quot;));
-
-// Finding the data
-res_str = eina_list_data_find(list, eina_string_share_add(&quot;enlightenment&quot;));
-if (res_str == eina_stringshare_add(&quot;enlightenment&quot;))
-&nbsp;&nbsp;&nbsp;printf(&quot;Data is present&quot;);
-else
-&nbsp;&nbsp;&nbsp;printf(&quot;Data not present&quot;);
-</pre>
-
-<p>The above example returns &quot;Data is present&quot;.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find_list()</span> function does the same thing as <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span>, but returns an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>. For an example, see the <a href="#remove_list"><span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function</a>.</p>
-<p>You can access the data or a &quot;list&quot; (node) of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span> using the <span style="font-family: Courier New,Courier,monospace">eina_list_nth()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_nth_list()</span> functions. The first one returns a pointer to the data of the &quot;n&quot; element and the second a pointer to the &quot;list&quot;. To access the data of the 3rd element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
-<pre class="prettyprint">
-const char *res;
-Eina_List *res_lst;
-
-res = eina_list_nth(app_list, 2);
-res_lst = eina_list_nth_list(app_list, 2);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">res</span> variable contains the pointer to the string &quot;calaos&quot;. The <span style="font-family: Courier New,Courier,monospace">res_lst</span> variable is the list containing &quot;calaos&quot;.</p>
-</li>
-
-<li>To search for data in a list, select your function based on whether the list is sorted or unsorted.
-<ul>
-<li>To search in an unsorted list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function:
-<ul><li>The first parameter is the list.</li>
-<li>The second parameter is a callback function for comparison.</li>
-<li>The last parameter is the data you are looking for.</li></ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> function does the same but returns an &quot;Eina_List&quot;.</p>
-
-
-<p>The following example shows 2 searches using both the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> functions:</p>
-<pre class="prettyprint">
-int search_list()
-{
-&nbsp;&nbsp;&nbsp;// Declaring the list
-&nbsp;&nbsp;&nbsp;Eina_List *list = NULL; 
-&nbsp;&nbsp;&nbsp;Eina_List *l;
-&nbsp;&nbsp;&nbsp;// Little trick to use strcmp as Eina_Compare_Cb 
-&nbsp;&nbsp;&nbsp;Eina_Compare_Cb cmp_func = (Eina_Compare_Cb)strcmp;
-
-&nbsp;&nbsp;&nbsp;void *data;
-&nbsp;&nbsp;&nbsp;int cmp_result;
-
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;debian&quot;);
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;archlinux&quot;);
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;centos&quot;);
-
-&nbsp;&nbsp;&nbsp;data = eina_list_search_unsorted(list, cmp_func, &quot;archlinux&quot;);
-&nbsp;&nbsp;&nbsp;l = eina_list_search_unsorted_list(list, cmp_func, &quot;archlinux&quot;);
-&nbsp;&nbsp;&nbsp;if (l-&gt;data != data)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_list_free(list);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;eina_list_free(list);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-</li>
-<li>To search in sorted lists, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted_list()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted()</span> functions. They work similarly as the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function.
-</li>
-</ul>
-</li>
-
-
-<li>To get data from a list element, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_get()</span> function. The function returns the data contained in the given list.
-
-<p>The following example uses the <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span> function to move through the list in a statement.</p>
-<pre class="prettyprint">
-int list_data_set()
-{
-&nbsp;&nbsp;&nbsp;// Declaring the list
-&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
-&nbsp;&nbsp;&nbsp;// Eina_List in which to place the elements or lists
-&nbsp;&nbsp;&nbsp;Eina_List *l;
-
-&nbsp;&nbsp;&nbsp;void *list_data;
-
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Bertrand&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Cedric&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Nicolas&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Vincent&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Raoul&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Fabien&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Philippe&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;billiob&quot;));
-
-&nbsp;&nbsp;&nbsp;for(l = list; l; l = eina_list_next(l))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Printing the data returned by eina_list_data_get
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
-
-&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(list, list_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_stringshare_del(list_data);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-
-<li>To move in a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span>, <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">eina_list_prev()</span> functions to move to the last, next, or previous element in the list.
-<p>The following example scrolls backwards starting from the end of the list:</p>
-<pre class="prettyprint">
-for(l = eina_list_last(list); l; l = eina_list_prev(l))
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
-</pre>
-
-</li>
-
-<li>To count the list elements, use the <span style="font-family: Courier New,Courier,monospace">eina_list_count()</span> function. The function returns the number of items in a list.
-<pre class="prettyprint">
-printf(&quot;List size: %d\n&quot;, eina_list_count(list));
-</pre>
-</li>
-<li>To iterate through an array, you can use various iterators: 
-<ul>
-<li>To iterate over a list from the beginning to the end, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro:
-<ul><li>The first parameter is the list to iterate.</li>
-<li>The second parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_List *</span> to hold the current &quot;List&quot; (node).</li>
-<li>The last parameter receives the current data during the run.</li></ul>
-
-<p>The following example prints the data of each &quot;List&quot; (node) of the list:</p>
-<pre class="prettyprint">
-Eina_List *list = NULL;
-Eina_List *l;
-void *list_data;
-
-list = eina_list_append(list, &quot;ls&quot;);
-list = eina_list_append(list, &quot;top&quot;);
-list = eina_list_append(list, &quot;rmdir&quot;);
-list = eina_list_append(list, &quot;uname&quot;);
-
-EINA_LIST_FOREACH(list, l, list_data)
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)list_data);
-
-eina_list_free(list);
-</pre>
-</li>
-<li>To iterate from the last element to the first, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_REVERSE_FOREACH</span> macro. It works similarly as <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH()</span>.
-</li>
-<li>To iterate over a list from the beginning to the end, you can also use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH_SAFE</span> macro. It is called safe, because it stores the next &quot;List&quot; (node), so you can safely remove the current &quot;List&quot; (node) and continue the iteration.
-<pre class="prettyprint">
-Eina_List *list;
-Eina_List *l;
-Eina_List *l_next;
-char *data;
-
-list = eina_list_append(list, &quot;tizen&quot;);
-list = eina_list_append(list, &quot;tizen&quot;);
-list = eina_list_append(list, &quot;tizen&quot;);
-list = eina_list_append(list, &quot;tizen&quot;);
-
-// Using EINA_LIST_FOREACH_SAFE to free the elements that match &quot;tizen&quot;
-
-EINA_LIST_FOREACH_SAFE(list, l, l_next, data)
-&nbsp;&nbsp;&nbsp;if (strcmp(data, &quot;tizen&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_remove_list(list, l);
-&nbsp;&nbsp;&nbsp;}
-</pre>
-</li>
-
-
-<li>To remove each list element while having access to the node&#39;s data, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FREE</span> macro. Pass the list and a pointer to hold the current data.
-<pre class="prettyprint">
-Eina_List *list;
-char *data;
-
-// List is filled
-
-EINA_LIST_FREE(list, data)
-&nbsp;&nbsp;&nbsp;free(data);
-</pre>
-</li>
-</ul>
-</li>
-</ul>
-
-<h3 id="inlist" name="inlist">Using an Inline List</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> is a special data type drawn to store nodes pointers in the same memory as data. This way the memory is less fragmented, but operations, such as sort and count, are slower. The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> has its own purpose, but if you do not understand what the purpose is, use the regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span> instead.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> nodes can be part of a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, simply added with the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> or <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span> functions.</p>
-
-<p>To use the inline list:</p>
-<ol>
-<li>Define the structure of the data before creating the inline list:
-<pre class="prettyprint">
-struct my_struct 
-{
-&nbsp;&nbsp;&nbsp;EINA_INLIST;
-&nbsp;&nbsp;&nbsp;int a, b;
-};
-</pre>
-
-<p>The structure is composed of 2 integers, the real data, and the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> type which is composed of 3 pointers defining the inline list structure:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * next</span>: next node</li>
-<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * prev</span>: previous node</li>
-<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * last</span>: last node</li>
-</ul></li>
-
-<li>
-<p>To create the inlist nodes, allocate the memory and use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_append()</span> function:</p>
-<ul><li>The first parameter is the existing list head or <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list. 
-<p>The following example passes <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list.</p></li>
-<li>The second parameter is the new list node, and it must not be <span style="font-family: Courier New,Courier,monospace">NULL</span>. 
-<p>You must use the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_GET()</span> macro to get the inlist object of the datastruct.</p></li></ul>
-<pre class="prettyprint">
-struct my_struct *d, *cur;
-Eina_Inlist *list, *itr, *tmp;
-
-d = malloc(sizeof(*d));
-d-&gt;a = 1;
-d-&gt;b = 10;
-
-list = eina_inlist_append(NULL, EINA_INLIST_GET(d));
-</pre>
-
-<p>Repeat this operation for every new node:</p>
-<pre class="prettyprint">
-d = malloc(sizeof(*d));
-d-&gt;a = 2;
-d-&gt;b = 20;
-list = eina_inlist_append(list, EINA_INLIST_GET(d));
-</pre>
-</li>
-
-<li>To add data to the inline list:
-<ul><li>Put data at the end of the inline list with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend()</span> function:
-<pre class="prettyprint">
-d = malloc(sizeof(*d));
-d-&gt;a = 3;
-d-&gt;b = 30;
-list = eina_inlist_prepend(list, EINA_INLIST_GET(d));
-</pre>
-</li>
-
-<li>Add a node before or after a given node with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend_relative()</span> and <span style="font-family: Courier New,Courier,monospace">eina_inlist_append_relative()</span> functions. 
-<p>In both functions, the first parameter is the target list, the second is the element you want to add, and the last is the reference element to place data after (in this case). Similarly as in a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a list, so the last parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> typed variable.</p>
-<pre class="prettyprint">d = malloc(sizeof(*d));
-d-&gt;a = 4;
-d-&gt;b = 40;
-list = eina_inlist_append_relative(list, EINA_INLIST_GET(d), list);
-</pre>
-</li></ul></li>
-
-<li>To sort and iterate an inline list, to find and move list elements, and to perform other inline list operations, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Inline__List__Group.html">Inline List</a> API.</li>
-
-<li>When the inline list is no longer needed, destroy it by looping over the list to free each <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> structure and the data using allocated memory. Use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_remove()</span> function on each node.
-
-<p>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)
-{
-&nbsp;&nbsp;&nbsp;struct my_struct *aux = EINA_INLIST_CONTAINER_GET(list, struct my_struct);
-
-&nbsp;&nbsp;&nbsp;// Remove the current list element 
-&nbsp;&nbsp;&nbsp;list = eina_inlist_remove(list, list);
-&nbsp;&nbsp;&nbsp;free(aux);
-}
-</pre>
-</li>
-
-
-</ol>
-
-<h2 id="generic" name="generic">Generic Value</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> object provides generic data storage and access, allowing you to store what you want in one single type of <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>. It is meant for simple data types, providing uniform access and release functions, useful to exchange data preserving their types. The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> comes with predefined types for numbers, array, list, hash, blob, and structs, and it can convert between data types, including string.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> can handle the following types:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UCHAR</span>: unsigned char</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_USHORT</span>: unsigned short</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT</span>: unsigned int</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ULONG</span>: unsigned long</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMESTAMP</span>: unsigned long used for timestamps</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT64</span>: unsigned integer of 64 bits</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_CHAR</span>: char</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_SHORT</span>: short</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT</span>: int</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LONG</span>: long</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT64</span>: integer of 64 bits</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_FLOAT</span>: float</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_DOUBLE</span>: double</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRINGSHARE</span>: stringshared string</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRING</span>: string</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ARRAY</span>: array</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span>: list</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_HASH</span>: hash</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMEVAL</span>: &#39;struct timeval&#39;</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_BLOB</span>: blob of bytes</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRUCT</span>: struct</li>
-</ul>
-
-
-<p>To set up a generic value:</p>
-<ol>
-<li>Declare the necessary variables:
-<pre class="prettyprint">
-// The Eina_Value itself
-Eina_Value v;
-// An integer 
-int i;
-// And a char *
-char *newstr;
-</pre>
-</li>
-
-<li>To set up an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> for an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_setup()</span> function. The first argument is the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> and the second is the type.
-<pre class="prettyprint">
-eina_value_setup(&amp;v, EINA_VALUE_TYPE_INT);
-</pre>
-</li>
-</ol>
-<p>To manage the generic value:</p>
-<ul>
-<li>To set an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_set()</span> function:
-<pre class="prettyprint">
-eina_value_set(&amp;v, 123);
-</pre>
-</li>
-
-<li>To get the value, use the <span style="font-family: Courier New,Courier,monospace">eina_value_get()</span> function. Pass the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> as the first argument, and a pointer to a variable to store the value (the target variable must have the same type as the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>).
-<pre class="prettyprint">
-eina_value_get(&amp;v, &amp;i);
-printf(&quot;v=%d\n&quot;, i);
-</pre>
-<p>The above example prints &quot;v=123&quot;.</p>
-</li>
-
-
-<li>To store an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> that corresponds to the <span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span> type.
-</li>
-<li>To create an <span style="font-family: Courier New,Courier,monospace">Eina_Value_List</span>, use the <span style="font-family: Courier New,Courier,monospace">eina_value_list_setup()</span> function. The function initializes a generic value storage of the list type. The first parameter is the &quot;object&quot; value, and the second one is the type (how to manage the stored list members).
-</li>
-</ul>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table> 
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/data_types_tools_n.htm b/org.tizen.ui.guides/html/native/efl/data_types_tools_n.htm
deleted file mode 100755
index a5bca4a..0000000
--- a/org.tizen.ui.guides/html/native/efl/data_types_tools_n.htm
+++ /dev/null
@@ -1,78 +0,0 @@
-<!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>Data Types and Tools: Using Eina Resources</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-		<li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-		<li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-   
-   <h1>Data Types and Tools: Using Eina Resources</h1>
-
-<p>UI toolkits, such as Qt and Gtk, generally support their own data types, structures, functions, and macros in order for you to easily and efficiently make their applications. EFL, as one of Tizen native UI toolkits, provides data types and useful tools as well.</p>
-
-<p>The Eina library in EFL implements APIs for data types and structures easy to use and optimized in an efficient way. It also provides some useful tools, such as opening shared libraries, error management, type conversion, time accounting, and memory pool to help convenient application development.</p>  
-   
-<p>The main features of Eina are:</p>
-<ul>
-<li><a href="data_types_n.htm">Data Types</a> <p>The Eina library is a central part of the EFL. It implements an API for data types, and allows you to create and manipulate several data types.</p></li>
-<li><a href="tools_n.htm">Tools</a> <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding applications.</p></li>
-</ul>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table> 
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/datetime_tutorial_wn.htm b/org.tizen.ui.guides/html/native/efl/datetime_tutorial_wn.htm
deleted file mode 100755
index 2febe03..0000000
--- a/org.tizen.ui.guides/html/native/efl/datetime_tutorial_wn.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">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Wearable Datetimes</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#date">Creating a Date Picker</a></li>
-			<li><a href="#time">Creating a Time Picker</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>		
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Wearable Datetimes</h1>
-
-  
-<p>This tutorial explains how you can create UI components that allow the user to select a date or time.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-
- <h2 id="date" name="date">Creating a Date Picker</h2>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component to add a date picker style (Year : Month : Day).</p>
-<p>The following example creates the datepicker-styled Datetime and adds it in the conform.</p>
-
-<pre class="prettyprint">
-// Add a datepicker style Datetime component
-datetime = elm_datetime_add(ad-&gt;win);
-evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5);
-evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0);
-elm_object_style_set(datetime, &quot;datepicker_layout&quot;);
-evas_object_show(datetime);
-
-elm_object_content_set(ad-&gt;conform, datetime);
-</pre>
-
- <h2 id="time" name="time">Creating a Time Picker</h2>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component to add a time picker style (Hour(12) : Min : AM/PM, or Hour(24) : Min).</p>
-<p>The following example creates the timepicker-styled Datetime and adds it in the conform.</p>
-
-<pre class="prettyprint">
-// Add a timepicker style Datetime component
-datetime = elm_datetime_add(ad-&gt;win);
-evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5);
-evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0);
-elm_object_style_set(datetime, &quot;timepicker_layout&quot;);
-evas_object_show(datetime);
-
-elm_object_content_set(ad-&gt;conform, datetime);
-</pre>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/ecore_animation_n.htm b/org.tizen.ui.guides/html/native/efl/ecore_animation_n.htm
deleted file mode 100755
index 944e05c..0000000
--- a/org.tizen.ui.guides/html/native/efl/ecore_animation_n.htm
+++ /dev/null
@@ -1,451 +0,0 @@
-<!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>Ecore Animations</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-				<li><a href="#finite">Creating an Animation with a Finite Duration</a></li>
-				<li><a href="#position">Position Mappings</a></li>
-				<li><a href="#infinite">Creating an Infinite Animation</a></li>
-				<li><a href="#chain">Chaining Animations</a></li>
-				<li><a href="#pause">Pausing and Resuming Animations</a></li>
-				<li><a href="#free">Freeing Up Memory</a></li>
-				<li><a href="#frame">Frametime</a></li>
-				<li><a href="#custom">Custom Timer</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Ecore Animations</h1> 
-
-<p>Ecore provides a facility for animations called <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span>. Ecore animators use the Ecore main loop for creating animations, running a specific action on each tick of a timer in the main loop.</p>
-
-<p>To create an Ecore animation:</p>
-<ol>
-    <li>Determine the duration of the animation.</li>
-    <li>Define a callback function that performs the animation with that duration.</li>
-</ol>
-
-<p>To use Ecore animators in your application, you must include the <span style="font-family: Courier New,Courier,monospace;">&lt;Ecore.h&gt;</span> file. This file is included by default if you are already using the <span style="font-family: Courier New,Courier,monospace;">&lt;Elementary.h&gt;</span> file in your application. You then declare an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator*</span> variable and use the variable in the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_*</span> functions.</p>
-
-<p>The following example shows how to create a simple animation with a finite duration:</p>
-
-<pre class="prettyprint">
-static Eina_Bool
-_do_animation(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;evas_object_move(data, 100 * pos, 100 * pos);
-&nbsp;&nbsp;&nbsp;// Do some more animating...
-}
-ecore_animator_timeline_add(2, _do_animation, my_evas_object);
-</pre>
-
-<p>In the above example, we create a linear transition to move <span style="font-family: Courier New,Courier,monospace;">my_evas_object</span> from position (0,0) to position (100,100) in 2 seconds.</p>
-
-<h2 id="finite" name="finite">Creating an Animation with a Finite Duration</h2>
-
-<p>Most of the time, you will want to create animations that last for a predefined time.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function allows you to define an animator that is automatically deleted after the animation is finished:</p>
-
-<pre class="prettyprint">ecore_animator_timeline_add(double runtime, Ecore_Timeline_Cb func, const void *data)</pre>
-
-<ul>
-<li>The first argument is the duration of the animation in seconds. The duration is not affected by frame rate.</li>
-<li>The second argument is the callback function that performs the animation.</li>
-<li>The third argument is the parameter passed to the callback function. This is usually the Evas object to animate.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The callback function can return <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to keep the animator running or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to stop the animator and have it be deleted automatically at any time. The callback function is also passed a timeline position parameter with a value between 0.0 (start) to 1.0 (end) to indicate where along the timeline the animator is running.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example performs a linear horizontal translation of 500 pixels in 8 seconds:</p>
-<pre class="prettyprint">
-static Eina_Bool
-_my_animation(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; // Get the target object
-&nbsp;&nbsp;&nbsp;int x, y, w, h; // Target object geometry
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); // Get current object position and size attributes
-&nbsp;&nbsp;&nbsp;evas_object_move(obj, 500 * pos, y); // Linear translation of the Evas object
-}
-ecore_animator_timeline_add(8, _my_animation, my_evas_object);
-</pre>
-
-<h2 id="position" name="position">Position Mappings</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">Ecore_Pos_Map</span> position mappings are used to define the evolution of a given position in accordance with the desired effects. The value ranges from 0.0 to 1.0 on a given timeline. This position variation allows you to apply dynamic changes to any attribute of your Evas object, such as position, width, height, scale, angle, and color.</p>
-
-<p>Ecore supports the following position mappings (with the listed v1 and v2 parameters):</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear 0.0 - 1.0
-    <ul>
-        <li>v1: not used</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up
-    <ul>
-        <li>v1: not used</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down
-    <ul>
-        <li>v1: not used</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end
-    <ul>
-        <li>v1: not used</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up
-    <ul>
-        <li>v1: power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), 4.0 is cubed, and so on</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down
-    <ul>
-        <li>v1: power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), 3.0 is cubed, and so on</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end
-    <ul>
-        <li>v1: power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.1 is a much more pronounced sinusoidal (squared), 3.0 is cubed, and so on</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient * v1, interpolated via power of v2 curve
-    <ul>
-        <li>v1: multiplication factor for gradient</li>
-        <li>v2: curve value</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then &quot;drop&quot; like a ball bouncing to the ground at 1.0, and bounce v2 times, with a decay factor of v1
-    <ul>
-        <li>v1: bounce decay factor</li>
-        <li>v2: number of bounces</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then &quot;wobble&quot; like a spring until rest position at 1.0, and wobble v2 times, with a decay factor of v1
-    <ul>
-        <li>v1: wobble decay factor</li>
-        <li>v2: number of wobbles</li>
-    </ul>
-</li>
-</ul>
-
-<p class="figure">Figure: Position mappings</p>
-<p align="center"><img alt="Position mappings" src="../../images/pos_map_all.png" /></p>
-
-<h3>Using Position Mappings</h3>
-<p>When using the animation callback function, the animator passes a timeline position parameter with a value between 0.0 (start) and 1.0 (end) to indicate where along the timeline the animator is running.</p>
-
-<p>If you want to create a non-linear animation, map the position value to one of several curves and mappings:</p>
-<pre class="prettyprint">ecore_animator_pos_map(double pos, Ecore_Pos_Map map, double v1, double v2)</pre>
-<ul>
-<li>The first argument is the current position value, which ranges from 0.0 to 1.0.</li>
-<li>The second argument is the position mapping you want to apply.</li>
-<li>The third argument is the first parameter (v1) to pass to the position mapping.</li>
-<li>The fourth argument is the second parameter (v2) to pass to the position mapping.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The v1 and v2 arguments are specific to the chosen position mapping. For example, if you are using <span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>, v1 represents the bouncing level and v2 the number of bounces.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example performs a transition that bounces 7 times, diminishing by a factor of 1.8 over 5 seconds:</p>
-
-<pre class="prettyprint">static Eina_Bool
-_my_animation_callback(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; // Get the target object
-&nbsp;&nbsp;&nbsp;int x, y, w, h; // Target object geometry
-&nbsp;&nbsp;&nbsp;double frame = pos; // Actual position variation
-&nbsp;&nbsp;&nbsp;// Get frame relative position depending on desired effect
-&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); // Get current object position and size attributes
-&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame); // Move the Evas object according to desired effect
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-ecore_animator_timeline_add(5, _my_animation_callback, my_evas_object);</pre>
-
-<h2 id="infinite" name="infinite">Creating an Infinite Animation</h2>
-
-<p>If you want the animation to run for an unspecified amount of time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function. This function works the same way as the <span style="font-family: Courier New,Courier,monospace;">ecore_animation_timeline_add()</span> function, except its interval is based on frame rate. Using frame rate as the basis benefits performance, especially if you define multiple animations, since you may want to have a different timer for each callback function.</p>
-
-<pre class="prettyprint">
-ecore_animator_add(Ecore_Task_Cb func, const void *data)
-</pre>
-
-<ul>
-<li>The first argument is the callback function that performs the animation.</li>
-<li>The second argument is the parameter passed to the callback function. This is usually the Evas object to animate.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The function returns a pointer to an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object, which you can use to adjust the animation.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example creates a rectangle sliding from left to right and back again. When the rectangle hits one edge of the screen, it changes direction.</p>
-
-<pre class="prettyprint">static Eina_Bool
-_slide_back_and_forth(void *data)
-{
-&nbsp;&nbsp;&nbsp;typedef enum {LEFT, RIGHT} direction_t; // Direction datatype
-&nbsp;&nbsp;&nbsp;static int x = 0; // Initial position
-&nbsp;&nbsp;&nbsp;static direction_t direction = RIGHT; // Initial direction
-&nbsp;&nbsp;&nbsp;if (x &gt;= 250)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = LEFT; // Change direction
-&nbsp;&nbsp;&nbsp;else if (x &lt;= 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = RIGHT; // Change direction
-&nbsp;&nbsp;&nbsp;if (direction == RIGHT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, ++x, 350); // Slide to right
-&nbsp;&nbsp;&nbsp;else if (direction == LEFT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, --x, 350); // Slide to left
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;// Declarations
-
-&nbsp;&nbsp;&nbsp;// Ecore Evas init
-
-&nbsp;&nbsp;&nbsp;// Draw Evas objects
-
-&nbsp;&nbsp;&nbsp;// Animations go here
-&nbsp;&nbsp;&nbsp;anim = ecore_animator_add(_slide_back_and_forth, rectangle);
-&nbsp;&nbsp;&nbsp;// Ecore main loop
-
-&nbsp;&nbsp;&nbsp;// Free memory
-}</pre>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">To use this code, you have to merge it with the Ecore transition example above.</td>
-</tr>
-</tbody>
-</table>
-
-<h2 id="chain" name="chain">Chaining Animations</h2>
-
-<p>You may sometimes want to delay animating an object. This can be useful if, for example, you want to start an animation only after another one has finished.</p>
-
-<p>You can simply set a delay to the second animation equal to the duration of the first animation:</p>
-
-<pre class="prettyprint">
-static int runtime = 5;
-static int delay = runtime;
-static Eina_Bool
-_start_fold_animation(void *data)
-{
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _fold_animation, data);
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-static Eina_Bool
-_start_unfold_animation(void *data)
-{
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _unfold_animation, data);
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-_start_fold_animation(my_evas_object);
-ecore_timer_add(delay, _start_unfold_animation, my_evas_object);
-</pre>
-
-<h2 id="pause" name="pause">Pausing and Resuming Animations</h2>
-
-<p>You can pause and resume Ecore animations. To pause a running animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function:</p>
-
-<pre class="prettyprint">ecore_animator_freeze(Ecore_Animator *animator)</pre>
-
-<p>The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to pause.</p>
-
-<p>To resume the paused animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function:</p>
-
-<pre class="prettyprint">ecore_animation_thaw(Ecore_Animator *animator)</pre>
-
-<p>The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to resume.</p>
-
-<p>The following example pauses a transition after 5 seconds and resumes it after 5 more seconds:</p>
-
-<pre class="prettyprint">
-static Eina_Bool
-_freeze_animation(void *data)
-{
-&nbsp;&nbsp;&nbsp;ecore_animator_freeze(data);
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-static Eina_Bool
-_thaw_animation(void *data)
-{
-&nbsp;&nbsp;&nbsp;ecore_animator_thaw(data);
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-ecore_timer_add(5, _freeze_animation, animator);
-ecore_timer_add(10, _thaw_animation, animator);
-</pre>
-
-<h2 id="free" name="free">Freeing Up Memory</h2>
-
-<p>When you create an animation that does not have a timeout, you will have to manually free up the memory allocated to the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. By comparison, if the animation has a timeout, Ecore implements the mechanisms to automatically delete the animator from the list of pointers: When your animation callback returns 0 or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>, the animator manager takes care of freeing up the allocated memory.</p>
-
-<p>To manually free up the memory, delete the pointer by using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function:</p>
-
-<pre class="prettyprint">ecore_animator_del(Ecore_Animator *animator)</pre>
-
-<p>The argument is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> whose memory allocation to free up.</p>
-
-<p>Regardless of the type of animation, it is good practice to always ensure that the allocated memory is freed up before the program exits:</p>
-
-<pre class="prettyprint">if (animator != NULL)
-&nbsp;&nbsp;&nbsp;ecore_animator_del(animator);</pre>
-
-<h2 id="frame" name="frame">Frametime</h2>
-<p>In most cases, you will want to use the default timer <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_TIMER</span>. This timer ticks every &quot;frametime&quot; seconds and allows you to perform transitions within a predefined timeline. The timer uses the system clock to tick over every Nth second, with the default being 1/30th of a second.</p>
-
-<p>To tweak performance, you can change the frametime value:</p>
-
-<pre class="prettyprint">ecore_animator_frametime_set(double frametime)</pre>
-
-<p>The argument is the new frametime value.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Too small a value can cause performance issues, whereas too high a value can cause your animation to seem jerky.</td>
-</tr>
-</tbody>
-</table>
-
-<p>If you want to get the current frametime value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</p>
-
-<h2 id="custom" name="custom">Custom Timer</h2>
-
-<p>You may want to specify a custom timer to match your animation to third-party events. For example, the filling speed of a progress bar will mainly depend on the time it takes for a task to complete and the velocity at which the remaining time estimation evolves. This kind of animation requires you to use a custom timer.</p>
-
-<p>To use a custom timer, first set <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_CUSTOM</span> as the timer source, and then drive the timer based on an input tick source (such as another application via IPC or a vertical blanking interrupt):</p>
-
-<pre class="prettyprint">ecore_animator_custom_source_tick_begin_callback_set(Ecore_Cb func, const void *data)</pre>
-
-<p>The first argument is the callback function to call on the tick start. The second argument is the data to pass to the callback function.</p>
-
-<pre class="prettyprint">ecore_animator_custom_source_tick_end_callback_set(Ecore_Cb func, const void *data)</pre>
-
-<p>The first argument is the callback function to call on the tick end. The second argument is the data to pass to the callback function to set the functions that will be called to start and stop the ticking source.</p>
-
-<p>Next, trigger a tick over one frame:</p>
-
-<pre class="prettyprint">ecore_animator_custom_tick(void)</pre>
-
-<p>The following example supposes a progress bar that will be refreshed every time some progress occurs:</p>
-
-<pre class="prettyprint">ecore_animator_source_set(ECORE_ANIMATOR_SOURCE_CUSTOM);
-void _on_progress_update()
-{
-&nbsp;&nbsp;&nbsp;// Called when some progress occurs
-&nbsp;&nbsp;&nbsp;ecore_animator_custom_tick(); // Tick (next frame in progress bar animation)
-}</pre>
-
-<p>Finally, to get the current animator source, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_source_get()</span> function.</p>
-  
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/ecore_animation_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/ecore_animation_tutorial_n.htm
deleted file mode 100755
index dcd1204..0000000
--- a/org.tizen.ui.guides/html/native/efl/ecore_animation_tutorial_n.htm
+++ /dev/null
@@ -1,417 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Ecore Animations</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#setup">Setting Up the Application</a></li>
-			<li><a href="#rotate">Creating a Rotation Effect</a></li>
-			<li><a href="#zoom">Creating a Zoom Effect</a></li>
-			<li><a href="#3d_rotate">Creating a 3D Rotation Effect</a></li>
-			<li><a href="#drop_bounce">Creating Drop and Bounce Effects</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Ecore Animations</h1>
-
-  
-<p>This tutorial demonstrates how you can use Ecore animators to simplify the creation of animations. Using Ecore animators, you can manually create your own animations by changing and manipulating Evas object attributes. Ecore animators work like timers, running callback functions over a given duration (an animation timeline).</p>
-
- <h2 id="setup" name="setup">Setting Up the Application</h2>
-
-<p>In this part of the tutorial, we create a simple application that manipulates and animates an Evas object. We use a &quot;Basic UI Application&quot; as the basis for the application.</p>
-<p>First, we set up the UI components we are going to use in the application:</p>
-
-<pre class="prettyprint">typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;// Main window
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;// Application title
-&nbsp;&nbsp;&nbsp;Evas_Object *label;
-
-&nbsp;&nbsp;&nbsp;// Buttons
-&nbsp;&nbsp;&nbsp;Evas_Object *bt1;
-&nbsp;&nbsp;&nbsp;Evas_Object *bt2;
-&nbsp;&nbsp;&nbsp;Evas_Object *bt3;
-
-&nbsp;&nbsp;&nbsp;// Animation target
-&nbsp;&nbsp;&nbsp;Evas_Object *target;
-} appdata_s;
-</pre>
-
-<p>We then create the actual UI components in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, starting with the main window and application title:</p>
-
-<pre class="prettyprint">// Main window
-ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
-{
-&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
-&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-}
-
-evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-// Application title
-ad-&gt;label = elm_label_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;label, &quot;Ecore Animator Tutorial&quot;);
-evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
-evas_object_show(ad-&gt;label);
-</pre>
-
-<p>Next, we create the animation target, which is an Evas object of type <span style="font-family: Courier New,Courier,monospace">Elm_Image</span>. The image that is used in the source code is stored in the <span style="font-family: Courier New,Courier,monospace">res/images</span> folder of the application. The image that is used in the EDC file is stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> folder.</p>
-
-<pre class="prettyprint">// Animation target
-// Setting the image path
-char buf[PATH_MAX];
-snprintf(buf, sizeof(buf), &quot;/opt/usr/apps/%s/res/images/tizen-logo.png&quot;, PACKAGE);
-// Adding the image
-ad-&gt;target = elm_image_add(ad-&gt;win);
-// Setting the image path
-if (!elm_image_file_set(ad-&gt;target, buf, NULL))
-&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image \&quot;%s\&quot;\n&quot;, buf);
-evas_object_size_hint_weight_set(ad-&gt;target, EVAS_HINT_FILL, EVAS_HINT_FILL);
-// Moving the image
-evas_object_move(ad-&gt;target, 130, 100);
-// Resizing the image
-evas_object_resize(ad-&gt;target, 200, 100);
-// Showing the image
-evas_object_show(ad-&gt;target);
-</pre>
-
-<p>All images are available in the <span style="font-family: Courier New,Courier,monospace">/opt/usr/apps/&lt;PACKAGE_NAME&gt;/res/images</span> folder of the application. The package name is defined at the begin of the application code:</p>
-
-<pre class="prettyprint">#if !defined(PACKAGE)
-#define PACKAGE &quot;org.tizen.ecoreanimator&quot;
-#endif
-</pre>
-
-<p>The image path is set by calling the <span style="font-family: Courier New,Courier,monospace">elm_image_file_set()</span> function. This function takes as arguments the <span style="font-family: Courier New,Courier,monospace">ad-&gt;target</span> Evas object and the path of the image file, built with the <span style="font-family: Courier New,Courier,monospace">snprintf()</span> function and stored in a buffer.</p>
-
-<pre class="prettyprint">// Setting the image path
-char buf[PATH_MAX];
-snprintf(buf, sizeof(buf), &quot;/opt/usr/apps/%s/res/images/tizen-logo.png&quot;, PACKAGE);
-// Adding the image
-ad-&gt;target = elm_image_add(ad-&gt;win);
-// Setting the image path
-if (!elm_image_file_set(ad-&gt;target, buf, NULL))
-&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image \&quot;%s\&quot;\n&quot;, buf);
-evas_object_size_hint_weight_set(ad-&gt;target, EVAS_HINT_FILL, EVAS_HINT_FILL);
-</pre>
-
-<p>The remaining code moves and resizes the image:</p>
-
-<pre class="prettyprint">//Moving the image
-evas_object_move(ad-&gt;target, 130, 100);
-//Resizing the image
-evas_object_resize(ad-&gt;target, 200, 100);
-//Showing the image
-</pre>
-
- <h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
-
-<p>After the animation target is created, we can create the first button and the associated rotation animation:</p>
-
-<pre class="prettyprint">// Button 1
-ad-&gt;bt1 = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;bt1, &quot;Rotate&quot;);
-evas_object_size_hint_weight_set(ad-&gt;bt1, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_move(ad-&gt;bt1, 25, 0);
-evas_object_resize(ad-&gt;bt1, 90, 70);
-evas_object_smart_callback_add(ad-&gt;bt1, &quot;clicked&quot;, _btn_rotate_cb, ad);
-evas_object_show(ad-&gt;bt1);
-</pre>
-
-<p>We create the button for triggering the rotation effect. The button is placed and resized, and associated with the <span style="font-family: Courier New,Courier,monospace">_btn_rotate_cb()</span> callback function. This callback function calls the animation on the animation target.</p>
-
-<pre class="prettyprint">static void _btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_rotate, ad-&gt;target);
-}
-</pre>
-
-<p>In this callback function, we create an Ecore animator timeline using the <span style="font-family: Courier New,Courier,monospace">ecore_animator_timeline_add()</span> function. This function adds an animator that runs for a limited time: we run the <span style="font-family: Courier New,Courier,monospace">_do_rotate()</span> animation callback function for 1 second on the <span style="font-family: Courier New,Courier,monospace">ad-&gt;target</span> Evas object.</p>
-
-<p>Next, we write the animation callback function that actually runs the animation. This callback is an <span style="font-family: Courier New,Courier,monospace">Ecore_Timeline_Cb</span> function, meaning it returns an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span> value and takes as arguments some <span style="font-family: Courier New,Courier,monospace">data</span> and the current position along the animation timeline (<span style="font-family: Courier New,Courier,monospace">pos</span>).</p>
-
-<p>To create the rotation animation, we use an Evas Map. The map handles the necessary map points and allows you to manipulate the target Evas object on the X, Y, and Z axes.</p>
-
-<pre class="prettyprint">static Eina_Bool
-_do_rotate(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;// Get the animation target
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
-&nbsp;&nbsp;&nbsp;// Declaration of an `Evas_Map`
-&nbsp;&nbsp;&nbsp;Evas_Map *m;
-&nbsp;&nbsp;&nbsp;// Variables to store the target size and position
-&nbsp;&nbsp;&nbsp;int x, y, w, h;
-
-&nbsp;&nbsp;&nbsp;// Getting the size and position of the target
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;// Creation of an `Evas_Map` of 4 points
-&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
-&nbsp;&nbsp;&nbsp;// Populate source and destination map points to match exactly object.
-&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
-&nbsp;&nbsp;&nbsp;// Create a rotation of 360° with x+(w/2) &quot;x&quot; center and y +(h/2) &quot;y&quot; center.
-&nbsp;&nbsp;&nbsp;evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
-&nbsp;&nbsp;&nbsp;// Setting the object to &quot;animate&quot; in the `Evas_Map`
-&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
-&nbsp;&nbsp;&nbsp;// Starting the Animation
-&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;// Free used memory
-&nbsp;&nbsp;&nbsp;evas_map_free(m);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>In the animation callback function, we first declare the Evas Map. To implement the rotation, we need to set an X and Y center, so we create 4 integer variables to store the size and position of the target. This information is provided by the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function, which returns the X and Y coordinates and the weight and height of the target Evas object. Now we have all the required data to build the animation.</p>
-
-<p>We create an Evas Map consisting of four points, and we populate these points with the animation target:</p>
-
-<pre class="prettyprint">// Creation of an Evas_Map of 4 points
-m = evas_map_new(4);
-// Populate source and destination map points to match the object.
-evas_map_util_points_populate_from_object(m, obj);
-</pre>
-
-<p>Now we can define the rotation using the <span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate()</span> function:</p>
-
-<pre class="prettyprint">// Create a rotation of 360° with x+(w/2) &quot;x&quot; center and y +(h/2) &quot;y&quot; center.
-evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
-</pre>
-
-<p>The animation callback function will be called at several points along the timeline, which is why we multiply the rotation angle (360°) by the timeline position (<span style="font-family: Courier New,Courier,monospace">pos</span>) to get the actual animation angle. If we do not do this, we will never see the animation take place. We then join the target object to the map and run the animation: </p>
-
-<pre class="prettyprint">// Setting the object to &quot;animate&quot; in the Evas Map
-evas_object_map_set(obj, m);
-// Starting the Animation
-evas_object_map_enable_set(obj, EINA_TRUE);
-</pre>
-
-<p>Each call to the animation callback function will rotate the object (360 * timeline position) degrees.</p>
-
-<p>Finally, we free up the memory allocated to the Evas Map:</p>
-
-<pre class="prettyprint">// Free used memory
-evas_map_free(m);
-</pre>
-
- <h2 id="zoom" name="zoom">Creating a Zoom Effect</h2>
-
-<p>The next animation is a zoom, for which we also use an Evas Map.</p>
-
-<p>First, we create the button in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
-
-<pre class="prettyprint">// Button 2
-ad-&gt;bt2 = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;bt2, &quot;Zoom&quot;);
-evas_object_size_hint_weight_set(ad-&gt;bt2, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_move(ad-&gt;bt2, 315, 0);
-evas_object_resize(ad-&gt;bt2, 90, 70);
-evas_object_smart_callback_add(ad-&gt;bt2, &quot;clicked&quot;, _btn_zoom_cb, ad);
-evas_object_show(ad-&gt;bt2);
-</pre>
-
-<p>We then create the button callback function with a new timeline:</p>
-
-<pre class="prettyprint">static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_zoom, ad-&gt;target);
-}
-</pre>
-
-<p>Next, we create the <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> animation callback function, which is almost identical to the <span style="font-family: Courier New,Courier,monospace">_do_rotate()</span> callback function, except that we use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span> function to create the animation:</p>
-
-<pre class="prettyprint">static Eina_Bool
-_do_zoom(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
-&nbsp;&nbsp;&nbsp;Evas_Map *m;
-&nbsp;&nbsp;&nbsp;int x, y, w, h;
-
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
-&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
-&nbsp;&nbsp;&nbsp;evas_map_util_zoom(m, 2 * pos, 2 * pos, x , y);
-&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
-&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_map_free(m);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span> function takes the following arguments:</p>
-
-<ul>
-<li>The map to change</li>
-<li>The horizontal zoom factor</li>
-<li>The vertical zoom factor</li>
-<li>The horizontal position (X coordinate) of the zooming center</li>
-<li>The vertical position (Y coordinate) of the zooming center</li>
-</ul>
-
-<p>Here, we use a horizontal and vertical zoom factor of 2, and the X and Y coordinates of the target as the horizontal and vertical center coordinates.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> callback function is called at several points along the animation timeline, which is why we multiply the horizontal and vertical zoom factor values by the timeline position. Each call will zoom more than the previous one, thereby creating the animation effect.</p>
-
- <h2 id="3d_rotate" name="3d_rotate">Creating a 3D Rotation Effect</h2>
-
-<p>The last animation is a 3D rotation. For this one, we are going to rotate the Evas object on all three axes (X, Y, Z).</p>
-
-<p>First, we create the button and its callback function:</p>
-
-<pre class="prettyprint">// Button 3
-ad-&gt;bt3 = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;bt3, &quot;3D&quot;);
-evas_object_size_hint_weight_set(ad-&gt;bt3, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_move(ad-&gt;bt3, 170, 0);
-evas_object_resize(ad-&gt;bt3, 90, 70);
-evas_object_smart_callback_add(ad-&gt;bt3, &quot;clicked&quot;, _btn_3d_cb, ad);
-evas_object_show(ad-&gt;bt3);
-</pre>
-
-<pre class="prettyprint">static void _btn_3d_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_3d, ad-&gt;target);
-}
-</pre>
-
-<p>Next, we create the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> animation callback function, which is very similar to the rotate and zoom callback functions. To create the animation, we use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function, which allows you to rotate any Evas object on all three axes.</p>
-
-<pre class="prettyprint">static Eina_Bool
-_do_3d(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
-&nbsp;&nbsp;&nbsp;Evas_Map *m;
-&nbsp;&nbsp;&nbsp;int x, y, w, h;
-
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
-&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
-&nbsp;&nbsp;&nbsp;evas_map_util_3d_rotate(m, pos * 360, pos * 360, pos * 360, x + (w / 3), y + 60, 0);
-&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
-&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_map_free(m);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function takes the following arguments:</p>
-
-<ul>
-<li>The map to change</li>
-<li>The angle (0-360°) to rotate around the X axis</li>
-<li>The angle (0-360°) to rotate around the Y axis</li>
-<li>The angle (0-360°) to rotate around the Z axis</li>
-<li>The X coordinate of the rotation center</li>
-<li>The Y coordinate of the rotation center</li>
-<li>The Z coordinate of the rotation center</li>
-</ul>
-
-<p>Here, we rotate 360 degrees around each axis. The horizontal (X) rotation center is the X position of the target plus its width divided by 2. The vertical (Y) rotation center is the Y position of the target plus 60. The Z rotation center is 0.</p>
-
-<p>As with the rotation and zoom animations, we multiply the angles by the timeline position to gently rotate the target on each call to the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> callback function along the timeline.</p>
-
- <h2 id="drop_bounce" name="drop_bounce">Creating Drop and Bounce Effects</h2>
-
-<p>To finish, we add drop and bounce effects to our buttons at application start. To do this, we create one timeline per button after creating the buttons in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
-
-<pre class="prettyprint">ecore_animator_timeline_add(2, _do_drop, ad-&gt;bt1);
-ecore_animator_timeline_add(2.3, _do_drop, ad-&gt;bt2);
-ecore_animator_timeline_add(2.5, _do_drop, ad-&gt;bt3);
-</pre>
-
-<p>We call the same <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> animation callback function for each timeline. In this callback, instead of using an Evas Map, we simply change the position of the target using the <span style="font-family: Courier New,Courier,monospace">evas_object_move()</span> function:</p>
-
-<pre class="prettyprint">static Eina_Bool
-_do_drop(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
-&nbsp;&nbsp;&nbsp;int x, y, w, h;
-&nbsp;&nbsp;&nbsp;double frame = pos;
-&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
-
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>To get the bounce effect, we use the <span style="font-family: Courier New,Courier,monospace">ecore_animator_pos_map()</span> function, which maps an input position from 0.0 to 1.0 along the timeline to a position on a different curve. The curve can be of different types, such as <span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and <span style="font-family: Courier New,Courier,monospace">BOUNCE</span>. This function takes the following arguments:</p>
-
-<ul>
-<li>The input position to map</li>
-<li>The mapping to use (<span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and so on)</li>
-<li>v1, which is the first parameter used by the mapping</li>
-<li>v2, which is the second parameter used by the mapping</li>
-</ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">ECORE_POS_MAP_BOUNCE</span> map we use starts at 0.0, then drops like a ball bouncing to the ground at 1.0, bouncing v2 times with a decay factor of v1. Here, we bounce 4 times with a decay factor of 2:</p>
-
-<pre class="prettyprint">frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
-</pre>
-
-<p>This frame is used in the move function to create the animation. The value increases on each <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> call along the timeline, which produces a nice drop of the buttons from their initial position to 600 pixels on the vertical axis.</p>
-
-<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>
diff --git a/org.tizen.ui.guides/html/native/efl/edc_optimization_n.htm b/org.tizen.ui.guides/html/native/efl/edc_optimization_n.htm
deleted file mode 100755
index a7aa126..0000000
--- a/org.tizen.ui.guides/html/native/efl/edc_optimization_n.htm
+++ /dev/null
@@ -1,556 +0,0 @@
-<!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>Optimizing EDC</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#remove">Removing Unnecessary Parts</a></li>
-			<li><a href="#text">Using Text instead of Textblock</a></li>
-			<li><a href="#compress">Compressing Images and Embedding into EDC</a></li>
-			<li><a href="#spacer">Using a Spacer</a></li>
-			<li><a href="#border">Using the Image Border Feature</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li> 
-		 </ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Optimizing EDC</h1>
-
-
-<p>To optimize EDC:</p>
-<ul>
-<li><a href="#remove">Removing Unnecessary Parts</a></li>
-<li><a href="#text">Using Text instead of Textblock</a></li>
-<li><a href="#compress">Compressing Images and Embedding into EDC</a></li>
-<li><a href="#spacer">Using a Spacer</a></li>
-<li><a href="#border">Using the Image Border Feature</a></li>
-</ul>
-
-
-<h2 id="remove" name="remove">Removing Unnecessary Parts</h2>
-<p>When you create EDC, there can be obsolete and unnecessary parts. Since they have an effect on performance, remove them.</p>
-<table>
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="50%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-     <th>After</th> 
-    </tr> 
-	 <tr> 
-     <td rowspan="1" colspan="1"> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;new&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
-&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;<strong>part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;old&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> </td> 
-     <td rowspan="1" colspan="1">
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;new&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
-&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;}
-}
-</pre> </td> 
-	</tr>
-</tbody>
-</table>
-
-<h2 id="text" name="text">Using Text instead of Textblock</h2>
-
-<p>The following EDCs lead to the same result. However, use TEXT for the simple texts for high performance apart from using tags or multiple lines.</p>
-<table>
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="50%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-     <th>After</th> 
-    </tr> 
-	 <tr> 
-     <td rowspan="1" colspan="1">  
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;styles 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_style&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=&quot;Sans&quot; font_size=30 text_class=entry 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color=#0088AA style=shadow,bottom 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shadow_color=#00000080 valign=0.5 ellipsis=1.0 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wrap=none align=center&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;style: &quot;text_style&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&quot;;
-&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;}
-}
-</pre>  </td> 
-     <td rowspan="1" colspan="1"> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;simple&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: SHADOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;size: 30;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&quot;;
-&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;}
-}
-</pre>  </td> 
-	</tr>
-</tbody>
-</table>
-
-<h2 id="compress" name="compress">Compressing Images and Embedding into EDC</h2>
-
-<p>When you use a fixed image, it is more efficient to call an image within EDC. This save time in accessing the image data and is more suitable for the data size.</p>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;<strong>images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;logo.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}</strong>
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;logo&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;logo.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&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;}
-}
-</pre>
-
-<h2 id="spacer" name="spacer">Using a Spacer</h2>
-<p>When you use a part (such as Padding) which is invisible but has a size, using Spacer is more efficient. Since Spacer is invisible, it does not have the visible and color options.</p>
-
-<table>
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="50%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-     <th>After</th> 
-    </tr> 
-	 <tr> 
-     <td rowspan="1" colspan="1">
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_left_top&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>RECT</strong>;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>color: 0 0 0 0;</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;               
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;        
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_right_bottom&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>RECT</strong>;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>color: 0 0 0 0;</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;               
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;padding_left_top&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;padding_right_bottom&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&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;}
-}
-</pre> </td> 
-     <td rowspan="1" colspan="1"> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_left_top&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>SPACER</strong>;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;               
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_right_bottom&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>SPACER</strong>;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;               
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;padding_left_top&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;padding_right_bottom&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&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;}
-}
-</pre> </td> 
-	</tr>
-</tbody>
-</table>
-
-<h2 id="border" name="border">Using the Image Border Feature</h2>
-
-<p>When you use an image, you do not need to use a full size or larger size image. As you can see below, it is much more efficient to scale the image using a border option.</p>
-<table>
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="50%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-     <th>After</th> 
-    </tr> 
-	 <tr> 
-     <td rowspan="1" colspan="1"> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;test.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;test&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;test.png&quot;;
-
-&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;}
-}
-</pre> </td> 
-     <td rowspan="1" colspan="1"> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;test.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;test&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;test.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>image.border: 5 5 5 5</strong>;
-&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;}
-}
-</pre> </td> 
-	</tr>
-	 <tr> 
-     <td rowspan="1" colspan="1"> <p align="center"><img alt="Image before" src="../../images/image_before.png" /></p> </td> 
-     <td rowspan="1" colspan="1" class="middle"><p align="center"><img alt="Image after" src="../../images/image_after.png" /></p> </td> 
-	</tr>
-</tbody>
-</table>
-  
-<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/native/efl/edc_part_block_n.htm b/org.tizen.ui.guides/html/native/efl/edc_part_block_n.htm
deleted file mode 100755
index 4b2c935..0000000
--- a/org.tizen.ui.guides/html/native/efl/edc_part_block_n.htm
+++ /dev/null
@@ -1,2080 +0,0 @@
-<!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>EDJE Data Collection Reference</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-				<li><a href="#edje_block">Edje Blocks</a></li>
-				<li><a href="#group_block">Group Block</a></li>
-				<li><a href="#part_block">Part Block</a></li>
-				<li><a href="#program1">Program</a></li>
-				</ul>
-	<p class="toc-title">Related Info</p>
-		<ul class="toc">	
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>EDJE Data Collection Reference</h1> 
-  
-
-  
-  <h2 id="edje_block" name="edje_block">Edje Blocks</h2>
-
-<p>A typical Edje file starts with the following definitions:</p>
-
-<pre class="prettyprint">
-<a href="#Images">images</a> {}
-<a href="#Fonts">fonts</a> {}
-<a href="#Color_classes">color_classes</a> {}
-<a href="#Styles">styles</a> {}
-<a href="#Collections">collections</a> 
-{
-&nbsp;&nbsp;&nbsp;<a href="#Sounds">sounds</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Tone">tone</a>: &quot;tone-1&quot; 2300;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Tone">tone</a>: &quot;tone-2&quot; 2300;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sample">sample</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Name">name</a>: &quot;sound1&quot; RAW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sound_Source">source</a>: &quot;sound_file1.wav&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#group_block">group</a> {}
-&nbsp;&nbsp;&nbsp;<a href="#group_block">group</a> {}
-}
-</pre>
-
-<p>To get more details above each sub-block, click on the links inside the collections block above.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">This guide is based on original work from Andres Blanc (dresb) <a href="mailto:andresblanc@gmail.com">andresblanc@gmail.com</a>, it has been heavily expanded and edited since then.</td>
-</tr>
-</tbody>
-</table> 
-
-<h3 id="Images" name="Images">Images Block</h3>
-
-<pre class="prettyprint">
-images 
-{
-&nbsp;&nbsp;&nbsp;image: &quot;filename1.ext&quot; COMP;
-&nbsp;&nbsp;&nbsp;image: &quot;filename2.ext&quot; LOSSY 99;
-&nbsp;&nbsp;&nbsp;set {}
-&nbsp;&nbsp;&nbsp;set {}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">images</span> block is used to list each image file which are used in the theme. If any compression method is used, it is also defined here. Besides the document&#39;s root, additional <span style="font-family: Courier New,Courier,monospace;">images</span> blocks can be included inside other blocks, usually <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. This makes file list maintenance easier when the theme is split among multiple files.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
-<p>This is included in each image file. The full path to the directory holding the images can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s &quot;<span style="font-family: Courier New,Courier,monospace;">-id</span>&quot; option. Available compression methods are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
-<li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
-<li><span style="font-family: Courier New,Courier,monospace;">LOSSY [0-100]</span>: JPEG lossy compression with quality from 0 to 100</li>
-<li><span style="font-family: Courier New,Courier,monospace;">USER</span>: Not embedded to the file, refer to the external file instead</li>
-</ul>
-</li>
-</ul>
-
-<h4>Images.set Block</h4>
-
-<pre class="prettyprint">
-set 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;image_name_used&quot;;
-&nbsp;&nbsp;&nbsp;image {}
-&nbsp;&nbsp;&nbsp;image {}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">set</span> block is used to define an image with different content depending on their size. Besides the document&#39;s root, additional <span style="font-family: Courier New,Courier,monospace;">set</span> blocks can be included inside other blocks, normally <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. This makes file list maintenance easier when the theme is split among multiple files.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">name [image name]</span>
-<p>Defines the name that refer to this image description.</p>
-</li>
-</ul>
-
-<h4>Images.set.image Block</h4>
-
-<pre class="prettyprint">
-image 
-{
-&nbsp;&nbsp;&nbsp;image: &quot;filename4.ext&quot; COMP;
-&nbsp;&nbsp;&nbsp;size: 51 51 200 200;
-&nbsp;&nbsp;&nbsp;border: 0 0 0 0;
-&nbsp;&nbsp;&nbsp;border_scale_by: 0.0;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">image</span> block inside a <span style="font-family: Courier New,Courier,monospace;">set</span> block defines the characteristic of an image. Every block describes one image and the size rule to use it.</p>
-
-<p>For full documentation, see <a href="#description_image">Image</a>.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
-<p>This is included in each image file. The full path to the directory holding the images can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-id</span> option. Available compression methods are:</p>
-	<ul>
-		<li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
-		<li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
-		<li><span style="font-family: Courier New,Courier,monospace;">LOSSY [0-100]</span>: JPEG lossy compression with quality from 0 to 100</li>
-		<li><span style="font-family: Courier New,Courier,monospace;">USER</span>: Not embedded to the file, refer to the external file instead</li>
-	</ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">size [minw] [minh] [maxw] [maxh]</span>
-<p>Defines the minimum and maximum size that selects the specified image.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span>
-<p>If set, the area (in pixels) of each side of the image is displayed as a fixed size border, from the side to inwards, preventing the corners from being changed on a resize.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span>
-<p>If border scaling is enabled then normally the OUTPUT border sizes (e.g. if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always the exact 3 columns of output, or at scale 2.0 they will be 6 columns, or 0.33 they will merge into a single column). This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to make much higher resolution outputs possible by always using the highest resolution artwork and then runtime scaling it down. Valid values are: 0.0 or bigger (0.0 or 1.0 to turn it off).</p>
-</li>
-</ul>
-
-<h3 id="Fonts" name="Fonts">Fonts Block</h3>
-
-<pre class="prettyprint">
-fonts 
-{
-&nbsp;&nbsp;&nbsp;font: &quot;filename1.ext&quot; &quot;fontname&quot;;
-&nbsp;&nbsp;&nbsp;font: &quot;filename2.ext&quot; &quot;otherfontname&quot;;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">fonts</span> block is used to list each font file with an alias used later in the theme. As with the <span style="font-family: Courier New,Courier,monospace;">images</span> block, additional <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks can be included inside other blocks.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">font [font filename] [font alias]</span>
-<p>Defines each <span style="font-family: Courier New,Courier,monospace;">font file</span> and <span style="font-family: Courier New,Courier,monospace;">alias</span>, the full path to the directory containing the font files can be defined with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-fd</span> option.
-</p></li>
-</ul>
-
-<h3 id="Data" name="Data">Data Block</h3>
-
-<pre class="prettyprint">
-data 
-{
-&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
-&nbsp;&nbsp;&nbsp;file: &quot;otherkey&quot; &quot;filename.ext&quot;;
-}
-</pre>
-
-<p>This block behaves in the same way as the data block inside the parts, only the use-cases are different: this is useful for data that is for the whole theme, for instance license information, version, authors, and so on.</p>
-
-<h3 id="Color_classes" name="Color_classes">Color_classes Block</h3>
-
-<pre class="prettyprint">
-color_classes 
-{
-&nbsp;&nbsp;&nbsp;color_class 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;colorclassname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: [0-255] [0-255] [0-255] [0-255];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: [0-255] [0-255] [0-255] [0-255];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: [0-255] [0-255] [0-255] [0-255];
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">color_classes</span> block contains a list of one or more <span style="font-family: Courier New,Courier,monospace;">color_class</span> blocks. Each <span style="font-family: Courier New,Courier,monospace;">color_class</span> allows the designer to name an arbitrary group of colors to be used in the theme, the application can use that name to alter the color values at runtime.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">name [color class name]</span>
-<p>Sets the name for the color class, used as reference by both the theme and the application.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span>
-<p>The main color.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span>
-<p>Used as outline in text and textblock parts.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span>
-<p>Used as shadow in text and textblock parts.</p>
-</li>
-</ul>
-
-<h3 id="Styles" name="Styles">Styles Block</h3>
-
-<pre class="prettyprint">
-styles 
-{
-&nbsp;&nbsp;&nbsp;style 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;stylename&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;..default style properties..&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag: &quot;tagname&quot; &quot;..style properties..&quot;;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">styles</span> block contains a list of one or more <span style="font-family: Courier New,Courier,monospace;">style</span> blocks. A <span style="font-family: Courier New,Courier,monospace;">style</span> block is used to create style <span style="font-family: Courier New,Courier,monospace;">&lt;tags&gt;</span> for advanced TEXTBLOCK formatting.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">name [style name]</span>
-<p>The name of the style to be used as reference later in the theme.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">base [style properties string]</span>
-<p>The default style properties that is applied to the complete text. The available tags that can be used in the style property are the following:</p>
-   <ul>
-	  <li>font</li>
-	  <li>font_size
-        <table class="note">
-              <tbody>
-              <tr>
-                      <th class="note">Note</th>
-              </tr>
-              <tr>
-                      <td class="note">The font size is a point size, and the size of the rendered text is affected by the ppi information. The system basic ppi is 96, and you can change it on the Emulator menu.</td>
-              </tr>
-               </tbody>
-      </table>
-
-	  </li>
-	  <li>color</li>
-	  <li>color_class</li>
-	  <li>text_class</li>
-	  <li>ellipsis</li>
-      <li>wrap</li>
-      <li>style</li>
-      <li>valign</li>
-      <li>align</li>
-	  
-   </ul>
-
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">tag [tag name] [style properties string]</span>
-<p>Style to be applied only to text between style <span style="font-family: Courier New,Courier,monospace;">&lt;tags&gt;..&lt;/tags&gt;</span>. When creating paired tags, like <span style="font-family: Courier New,Courier,monospace;">&lt;bold&gt;</span><span style="font-family: Courier New,Courier,monospace;">&lt;/bold&gt;</span>, a &#39;+&#39; sign must be added at the start of the style properties of the first part (<span style="font-family: Courier New,Courier,monospace;">&lt;bold&gt;</span>). If the second part (<span style="font-family: Courier New,Courier,monospace;">&lt;/bold&gt;</span>) is also defined, a &#39;-&#39; sign must be added to its style properties. This applies only to paired tags; single tags, like <span style="font-family: Courier New,Courier,monospace;">&lt;tab&gt;</span>, must not have a starting &#39;+&#39;.</p>
-   <ul>
-	  <li>br</li>
-	  <li>tab</li>
-	  <li>b</li>
-	  <li>match</li>
-   </ul>
-
-</li>
-</ul>
-
-<p>The following code is the sample of a text style for the text style:</p>
-
-<pre class="prettyprint">
-style 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;list_text_main&quot;;
-&nbsp;&nbsp;&nbsp;base: &quot;font=Tizen:style=Regular font_size=30 color=#ffffff ellipsis=1.0&quot;;
-&nbsp;&nbsp;&nbsp;tag: &quot;br&quot; &quot;\n&quot;;\
-&nbsp;&nbsp;&nbsp;tag: &quot;ps&quot; &quot;ps&quot;;\
-&nbsp;&nbsp;&nbsp;tag: &quot;tab&quot; &quot;\t&quot;;\
-&nbsp;&nbsp;&nbsp;tag: &quot;b&quot; &quot;+ font_weight=Bold&quot;;
-}
-</pre>
-
-
-
-<h3 id="Collections" name="Collections">Collections Block</h3>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;base_scale: 1.8;
-&nbsp;&nbsp;&nbsp;sounds 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tone: &quot;tone-1&quot; 2300;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tone: &quot;tone-2&quot; 440;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sample 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;sound_file1&quot; RAW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;sound_file1.wav&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alias: &quot;anothername;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: width height;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: width height;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scripts {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limits {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">collections</span> block is used to list the groups that compose the theme. Additional <span style="font-family: Courier New,Courier,monospace;">collections</span> blocks do not prevent overriding group names.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">sounds</span> block contains a list of one or more sound sample and tone items.</p>
-
-<h4>Base Scale</h4>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">base_scale: [scale factor]</span>
-<p>Information about the scale factor in the edc file.</p>
-</li>
-</ul>
-
-<p>Object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of this application to show the application in a proper size in other devices. However, the scaling must be based on the scale 1.0 or, if the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the &quot;base scale&quot;.</p>
-
-<p>The size of a scalable object is multiplied with the device scale value. If the scalable object with the size 10 is created in a device with the scale 1.0, the size of the object is 20 in a device with the scale 2.0, and 40 in a device with the scale 4.0.</p>
-
-<p>For more information about supporting multiple screens in one edc, see the <a href="multiple_screens_n.htm">Multiple Screen Support</a> guide.</p>
-
-
-<h3 id="Sounds" name="Sounds">Sounds Block</h3>
-
-<p id="Tone"></p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">tone [tone name] [frequency]</span>
-<p>A sound of the given frequency.</p>
-</li>
-</ul>
-
-
-<h4 id="Sample" name="Sample">Sounds.sample Block</h4>
-
-<p>The sample block defines the sound sample.</p>
-
-<p id="Name"></p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">name [sample name] [compression type] (quality)</span>
-<p>Used to include each sound file. The full path to the directory holding the sounds can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-sd</span> option. Valid types are:</p>
-	<ul>
-    <li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
-    <li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
-    <li><span style="font-family: Courier New,Courier,monospace;">LOSSY [-0.1 - 1.0]</span>: Lossy compression with quality from 0.0 to 1.0</li>
-    <li><span style="font-family: Courier New,Courier,monospace;">AS_IS</span>: No compression or encoding, write the file information as it is</li>
-	</ul>
-</li>
-</ul>
-
-<p id="Sound_Source"></p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">source [file name]</span>
-<p>The sound source file name (source can be mono/stereo WAV file. Only files with 44.1 KHz sample rate are supported for now).</p>
-</li>
-</ul>
-
-
-  <h2 id="group_block" name="group_block">Group Block</h2>
-
-<pre class="prettyprint">
-<a href="#Group">group </a>
-{
-&nbsp;&nbsp;&nbsp;<a href="#Group_Name">name</a>: &quot;nameusedbytheapplication&quot;;
-&nbsp;&nbsp;&nbsp;<a href="#Alias">alias</a>: &quot;anothername&quot;;
-&nbsp;&nbsp;&nbsp;<a href="#Min">min</a>: width height;
-&nbsp;&nbsp;&nbsp;<a href="#Max">max</a>: width height;
-&nbsp;&nbsp;&nbsp;<a href="#Parts">parts</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;definitions of parts&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Script">script</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Limits">limits</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Vertical">vertical</a>: &quot;limit_name&quot; height_barrier;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Horizontal">horizontal</a>: &quot;limit_name&quot; width_barrier;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Group_Data">data</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Items">items</a>: &quot;key&quot; &quot;value&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#File">file</a>: &quot;key&quot; &quot;file&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Programs">programs</a> {}
-}
-</pre>
-
-<h3 id="Group" name="Group">Group</h3>
-
-<p>A <span style="font-family: Courier New,Courier,monospace;">group</span> block contains the list of parts and programs that compose a given Edje Object.</p>
-
-<ul>
-<li id="Group_Name"><span style="font-family: Courier New,Courier,monospace;">name [group name]</span>
-<p>The name that is used by the application to load the resulting Edje object and to identify the group to swallow in a GROUP part. If a group with the same name exists already it will be completely overridden by the new group.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">inherit_only [1 or 0]</span>
-<p>This flags the group as being used only for inheriting, which will inhibit <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> resolving of programs and parts that may not exist in this group, but are located in the group which is inheriting this group.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">inherit [parent group name]</span>
-<p>Parent group name for inheritance. Group <span style="font-family: Courier New,Courier,monospace;">inherit</span> is used to inherit any predefined group and change some property which belongs to <span style="font-family: Courier New,Courier,monospace;">part</span>, <span style="font-family: Courier New,Courier,monospace;">description</span>, <span style="font-family: Courier New,Courier,monospace;">items</span> or <span style="font-family: Courier New,Courier,monospace;">program</span>. The child group has the same properties as its parent group. If you specify the type again in an inherited part, it causes an error. </p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
-</tr>
-</tbody>
-</table> 
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">script_recursion [1/0]</span>
-<p>This flag (1 or 0) determines whether to error on unsafe calls when recursively running Embryo programs. For example, running an Embryo script which calls EDC that has a <span style="font-family: Courier New,Courier,monospace;">script{}</span> block is unsafe, and the outer-most (first) Embryo stack is corrupted. It is strongly unadvisable to use this flag.</p></li>
-
-<li id="Alias"><span style="font-family: Courier New,Courier,monospace;">alias [additional group name]</span>
-<p>Additional name to be used as an identifier. Defining multiple aliases is supported.</p>
-</li>
-
-<li id="Min"><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span>
-<p>The minimum size for the container defined by the composition of the parts. It is not enforced.</p>
-</li>
-
-<li id="Max"><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span>
-<p>The maximum size for the container defined by the totality of the parts. It is not enforced.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">broadcast_signal [on/off]</span>
-<p>Signal gets automatically broadcasted to all sub group parts. Default is &quot;true&quot;.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">orientation [AUTO/LTR/RTL]</span>
-<p>This defines GROUP orientation. It is useful if you want match interface orientation with language.</p>
-<ul>
-	<li><span style="font-family: Courier New,Courier,monospace;">AUTO</span>: Follow system defaults</li>
-	<li><span style="font-family: Courier New,Courier,monospace;">LTR</span>: Used in Left To Right Languages (Latin)</li>
-	<li><span style="font-family: Courier New,Courier,monospace;">RTL</span>: Used in Right To Left Languages (Hebrew, Arabic interface)</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span>
-<p>Changes the default value of <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> for every part in this group. Default is &quot;1&quot;, to maintain compatibility.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">program_source [source name]</span>
-<p>Change the default value of source for every program in the current group which is declared after this value is set. Defaults to an unset value to maintain compatibility. The name of source can be set on every program, but if the name can be defined in the group level, it reduces the effort to indicate it in every program.</p>
-</li>
-</ul>
-
-<h4 id="Parts" name="Parts">Group.parts</h4>
-
-<pre class="prettyprint">
-parts 
-{
-&nbsp;&nbsp;&nbsp;part {}
-&nbsp;&nbsp;&nbsp;part {}
-&nbsp;&nbsp;&nbsp;part {}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">parts</span> group contain one or more <span style="font-family: Courier New,Courier,monospace;">part</span>. Each part describes a visual element and has a type: <span style="font-family: Courier New,Courier,monospace;">text</span>, <span style="font-family: Courier New,Courier,monospace;">image</span>, <span style="font-family: Courier New,Courier,monospace;">table</span>, etc.</p>
-
-<p>For complete documentation, see the <a href="#part_block">Part Block</a> guide.</p>
-
-<h4 id="Script" name="Script">Group.script</h4>
-
-<pre class="prettyprint">
-group 
-{
-&nbsp;&nbsp;&nbsp;script 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>This block is used to inject embryo scripts to a given Edje theme and it functions in two modalities. When it is included inside a <span style="font-family: Courier New,Courier,monospace;">program</span> block, the script is executed every time the program is run, on the other hand, when included directly into a <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">part</span>, or <span style="font-family: Courier New,Courier,monospace;">description</span> block, it is executed once at the load time, in the load order.</p>
-
-<p>For more information, see the <a href="#program1">Program</a> guide.</p>
-
-<h4 id="Limits" name="Limits">Group.limits</h4>
-
-<pre class="prettyprint">
-limits 
-{
-&nbsp;&nbsp;&nbsp;vertical: &quot;limit_name&quot; height_barrier;
-&nbsp;&nbsp;&nbsp;horizontal: &quot;limit_name&quot; width_barrier;
-}
-</pre>
-
-<p>This block is used to trigger signals when the Edje object is resized.</p>
-<p id="Vertical"></p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">vertical [name] [height barrier]</span>
-<p>This sends a signal <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, signal <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> is sent. This limit is applied on the y axis and is given in pixels.</p>
-</li>
-</ul>
-
-<p id="Horizontal"></p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">horizontal [name] [width barrier]</span>
-<p>This sends a signal <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, signal <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> is sent. This limit is applied on the x axis and is given in pixels.</p>
-</li>
-</ul>
-
-<h4 id="Group_Data" name="Group_Data">Group.data</h4>
-
-<pre class="prettyprint">
-data 
-{
-&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
-&nbsp;&nbsp;&nbsp;file: &quot;key2&quot; &quot;somefile&quot;;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">data</span> block is used to pass arbitrary parameters from the theme to the application. Unlike the <span style="font-family: Courier New,Courier,monospace;">images</span> and <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks, additional <span style="font-family: Courier New,Courier,monospace;">data</span> blocks can only be included inside the <span style="font-family: Courier New,Courier,monospace;">group</span> block.</p>
-
-<ul>
-<li id="Items"><span style="font-family: Courier New,Courier,monospace;">items: &quot;key&quot; &quot;value&quot;;</span>
-<p>Defines a new parameter, the value is the string specified next to it.</p>
-</li>
-<li id="File"><span style="font-family: Courier New,Courier,monospace;">file: &quot;key&quot; &quot;file&quot;;</span>
-<p>Defines a new parameter, the value is the contents of the specified file formatted as a single string of text. This property only works with plain text files.</p>
-</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">For genlist item styles, keys must be texts and icons, respectively for text parts and swallow parts; values must the names of the parts, separated with spaces.</td>
-</tr>
-</tbody>
-</table> 
-
-<h4 id="Programs" name="Programs">Group.programs</h4>
-
-<pre class="prettyprint">
-programs 
-{
-&nbsp;&nbsp;&nbsp;program {}
-&nbsp;&nbsp;&nbsp;program {}
-&nbsp;&nbsp;&nbsp;program {}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">programs</span> group contain one or more <span style="font-family: Courier New,Courier,monospace;">program</span>.</p>
-
-<p>For more information about the program structure, see the <a href="#program1">Program</a> guide. </p>
-
-  
-  <h2 id="part_block" name="part_block">Part Block</h2> 
-  
-  <pre class="prettyprint">
-<a href="#part">part</a> 
-{
-&nbsp;&nbsp;&nbsp;// inherit all the fields of another part
-&nbsp;&nbsp;&nbsp;<a href="#inherit">inherit</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// name the part
-&nbsp;&nbsp;&nbsp;<a href="#part_name">name</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// set the part type
-&nbsp;&nbsp;&nbsp;<a href="#type">type</a>: IMAGE;
-&nbsp;&nbsp;&nbsp;// enable mouse events on the part
-&nbsp;&nbsp;&nbsp;<a href="#mouse_events">mouse_events</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// repeat mouse events to parts below the current one
-&nbsp;&nbsp;&nbsp;<a href="#repeat_events">repeat_events</a>: 0/1;
-&nbsp;&nbsp;&nbsp;<a href="#ignore_flags">ignore_flag</a>s: NONE;
-&nbsp;&nbsp;&nbsp;// whether the part sizes scale with the edje scaling factor
-&nbsp;&nbsp;&nbsp;<a href="#scale">scale</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// whether fully-transparent pixels are taken into account for collision detection
-&nbsp;&nbsp;&nbsp;<a href="#precise_is_inside">precise_is_inside</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// only render the area of the part that coincides with the given part
-&nbsp;&nbsp;&nbsp;<a href="#clip_to">clip_to</a>: &quot;anotherpart&quot;;
-&nbsp;&nbsp;&nbsp;// for group/textblock parts: swallow the given group (for textblock: goes below text)
-&nbsp;&nbsp;&nbsp;<a href="#source">source</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// same as source but goes on top of text
-&nbsp;&nbsp;&nbsp;<a href="#source2">source2</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// for textblock parts: swallow the given group below the mouse cursor when it hovers over the part
-&nbsp;&nbsp;&nbsp;<a href="#source3">source3</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// same as source3 but goes on top of the cursor
-&nbsp;&nbsp;&nbsp;<a href="#source4">source4</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// for textblock parts: swallow the given group below text anchors (&lt;a&gt;...&lt;/a&gt;)
-&nbsp;&nbsp;&nbsp;<a href="#source5">source5</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// same as source5 but goes on to top of the anchor
-&nbsp;&nbsp;&nbsp;<a href="#source6">source6</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// add a shadow effect to the part
-&nbsp;&nbsp;&nbsp;<a href="#effect">effect</a>: SOFT_SHADOW (BOTTOM_RIGHT);
-&nbsp;&nbsp;&nbsp;// for textblock parts: makes the text editable, possibly with a specific behavior
-&nbsp;&nbsp;&nbsp;<a href="#entry_mode">entry_mode</a>: PASSWORD;
-&nbsp;&nbsp;&nbsp;// for textblock parts: change how the tex selection is triggered
-&nbsp;&nbsp;&nbsp;<a href="#select_mode">select_mode</a>: EXPLICIT;
-&nbsp;&nbsp;&nbsp;// for editable textblock parts: where to draw the (blinking) cursor
-&nbsp;&nbsp;&nbsp;<a href="#cursor_mode">cursor_mode</a>: UNDER;
-&nbsp;&nbsp;&nbsp;// for editable textblock parts: allow multiple lines
-&nbsp;&nbsp;&nbsp;<a href="#multiline">multiline</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// for textblock parts: accessibility features will be used
-&nbsp;&nbsp;&nbsp;<a href="#access">access</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// no-one uses that
-&nbsp;&nbsp;&nbsp;<a href="#pointer_mode">pointer_mode</a>: AUTOGRAB;
-&nbsp;&nbsp;&nbsp;<a href="#use_alternate_font_metrics">use_alternate_font_metrics</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// remove the given program; useful when it was inherited
-&nbsp;&nbsp;&nbsp;<a href="#program_remove">program_remove</a>: &quot;programname&quot;;
-&nbsp;&nbsp;&nbsp;// remove the given part; useful when it was inherited
-&nbsp;&nbsp;&nbsp;<a href="#part_remove">part_remove</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// insert the current part below the given part, as if it were declared before
-&nbsp;&nbsp;&nbsp;<a href="#insert_before">insert_before</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// insert the current part above the given part, as if it were declared after
-&nbsp;&nbsp;&nbsp;<a href="#insert_after">insert_after</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// define a new part inside this one
-&nbsp;&nbsp;&nbsp;<a href="#part_part">part</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;part definition&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#dragable">draggable </a>
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// confine the current part to the given part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_confine">confine</a>: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// only start drag when it would have moved enough to be outside of the given part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_threshold">threshold</a>: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// forward drag events to the given part instead of handling them
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_events">events</a>: &quot;another draggable part&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// enable horizontal drag of the part with steps each step_size or with steps_count steps
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_x">x</a>: 0/1 &lt;step_size&gt; &lt;steps_count&gt;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// same as x but vertical
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_y">y</a>: 1 0 100;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;// for box or table parts
-&nbsp;&nbsp;&nbsp;<a href="#box_table">box/table</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// list of items
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items">items</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item">item</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// define item type, can only be GROUP
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_type">type</a>: GROUP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// name the item
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_name">name</a>: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the source for this item, i.e. its contents
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_source">source</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// minimum horizontal and vertical item sizes (-1 for expand)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_min">min</a>: -1 -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// maximum horizontal and vertical item sizes (-1 for ignore)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_max">max</a>: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the item padding in pixels
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_padding">padding</a>: 2 2 2 2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_spread">spread</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the item alignment
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set a weight hint in the box for the given object
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_weight">weight</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the aspect ratio hint
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_aspect">aspect</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_aspect_mode">aspect_mode</a>: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// number of columns and rows the item will take
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_span">span</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#description">description</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// inherit another description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_inherit">inherit</a>: &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// name the current description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_state">state</a>: &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// use another part as content of the current &quot;PROXY&quot; part (This description only works in the PROXY part and the current part mirrors the rendering content of the source part)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_source">source</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the part (in)visible (invisible parts emit no signals)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_visible">visible</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// emit a signal when the given dimension becomes zero or stops being zero
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_limit">limit</a>: WIDTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// horizontal and vertical alignment of the part inside its parent
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set that the part does not change size
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_fixed">fixed</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the minimum size for the part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_min">min</a>: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// forcibly multiply the minimum sizes by the given factors
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_minmul">minmul</a>: 1.2 1.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the maximum size for the part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_max">max</a>: 400 400;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make vertical and horizontal resizes happen in steps
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_step">step</a>: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// force aspect ratio to be kept between min and max between resizes
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_aspect">aspect</a>: 0.8 1.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the dimension to which the aspect ratio applies
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_aspect_preference">aspect_preference</a>: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// use the given color class which can be used to factor font colors
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color_class">color_class</a>: &quot;colorclassname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color">color</a>: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the color of the text&#39;s shadow
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color2">color2</a>: 0 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the color of the text&#39;s outline
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color3">color3</a>: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// define the positions of the top-left (rel1) and bottom-right (rel2) corners
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2">rel1/rel2</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make relative and offset use the given part for their positioning
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to">to</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// position the corner relative to the part given through to (0.0 being axis beginning, 1.0 being its end)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_relative">relative</a>: 0.1 0.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// add an absolute offset (in pixels) along each axis
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_offset">offset</a>: 10 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// same as to but only for the x axis
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to_x">to_x</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// same as to but only for the y axis
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to_y">to_y</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// settings specific to parts of type image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image">image</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// name (not path) of the regular image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_normal">normal</a>: &quot;imagename&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// image to use while transitioning to the normal image; use several times to create animations
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_tween">tween</a>: &quot;imagename2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the number of pixels that make up each border of the image, i.e. are not resized when the image is
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border">border</a>: 4 4 4 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// hide, strip from its alpha or show (default) the non-border part of the image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_middle">middle</a>: DEFAULT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border_scale_by">border_scale_by</a>: 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// whether to scale the border or not
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border_scale">border_scale</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_scale_hint">scale_hint</a>: STATIC;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set how the image is going to fill its part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill">fill</a>: 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// whether to smooth the image when scaling it
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_smooth">smooth</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_spread">spread</a>: ??;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// whether to scale or tile to fit when resizing the image is needed
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_type">type</a>: SCALE/TILE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// only display the part of the image that is below and to the right of the given point
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin">origin</a> 
-&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;// specify top-left point as relative coordinates
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin_relative">relative</a>: 0.1 0.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify top-left point as a pixel offset
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin_offset">offset</a>: 10 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify bottom-right point as relative coordinates
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size">size</a> 
-&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;<a href="#description_image_fill_size_relative">relative</a>: 0.1 0.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify bottom-right point as a pixel offset
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size_offset">offset</a>: 10 10;
-&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;// settings specific to parts of type text and textblock
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text">text</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the part&#39;s text
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text">text</a>: &quot;some text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text&#39;s font
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_font">font</a>: &quot;Tizen Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text&#39;s size
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_size">size</a>: 14;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text&#39;s class which can be used to factor font and font-size settings
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text_class">text_class</a>: &quot;classname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// use the styles defined in stylename
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_style">style</a>: &quot;stylename&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// for textblocks in password mode, replace characters to hide with this string
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_repch">repch</a>: &quot;*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the min and max font sizes allowed when resizing (default is 0 0, i.e. unrestricted)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_size_range">size_range</a>: 6 18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// increase font size as much as possible while still remaining in the container for both axis
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_fit">fit</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the min size of the container equal to the min size of the current text (0 0 by default)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_min">min</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the max size of the container equal to the max size of the current text (0 0 by default)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_max">max</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the vertical and horizontal alignments of the text
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// re-use the text of another part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text_source">text_source</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// when text is too long to fit, relative position at which to cut the text and put an ellipsis (&quot;...&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_ellipsis">ellipsis</a>: 0.9;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// settings specific to parts of type box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box">box</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set how children while be arranged in the box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_layout">layout</a>: horizontal_homogeneous;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the vertical and horizontal alignments of box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the padding between items of the box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_padding">padding</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the box&#39; min size be the min size of its elements (i.e. make it shrinkable as much as its items)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_min">min</a>: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table">table</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make items homogeneous
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_homogeneous">homogeneous</a>: NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the vertical and horizontal alignments of box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the padding between items of the box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_padding">padding</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the table&#39;s min size be the min size of its elements (i.e. make it shrinkable as much as its items)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_min">min</a>: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map">map</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective">perspective</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_light">light</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_on">on</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_smooth">smooth</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_alpha">alpha</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_backface_cull">backface_cull</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_on">perspective_on</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_color">color</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation">rotation</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_center">center</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_x">x</a>: 45;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_y">y</a>: 120;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_z">z</a>: 90;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective">perspective</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_zplane">zplane</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_focal">focal</a>: 20;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// simpler syntax to create transitions to the current part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_link">link</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_link_base">base</a>: &quot;edje,signal&quot; &quot;edje&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h3 id="part" name="part">Part</h3>
-
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;mouse_events:  1;
-&nbsp;&nbsp;&nbsp;repeat_events: 0;
-&nbsp;&nbsp;&nbsp;ignore_flags: NONE;
-&nbsp;&nbsp;&nbsp;clip_to: &quot;anotherpart&quot;;
-&nbsp;&nbsp;&nbsp;source:  &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;pointer_mode: AUTOGRAB;
-&nbsp;&nbsp;&nbsp;use_alternate_font_metrics: 0;
-
-&nbsp;&nbsp;&nbsp;dragable {}
-&nbsp;&nbsp;&nbsp;items {}
-&nbsp;&nbsp;&nbsp;description {}
-}
-</pre>
-
-<p>Parts are used to represent the most basic design elements of the theme, for example, a part can represent a line in a border or a label on a button.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">inherit [part name]</span><a class="anchor" id="inherit"></a>
-<p>Copies all attributes except part name from referenced part into current part. All existing attributes, except part name, are overwritten.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
-</tr>
-</tbody>
-</table> 
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">program_remove [program name] (program name) (program name) ...</span><a class="anchor" id="program_remove"></a>
-<p>Removes the listed programs from an inherited group. Removing non-existing programs is not allowed.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">This breaks program sequences if a program in the middle of the sequence is removed.</td>
-</tr>
-</tbody>
-</table> 
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">part_remove [part name] (part name) (part name) ...</span><a class="anchor" id="part_remove"></a>
-<p>Removes the listed parts from an inherited group. Removing non-existing parts is not allowed.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">name [part name]</span><a class="anchor" id="part_name"></a>
-<p>The part&#39;s name is used as reference in the theme&#39;s relative positioning system, by programs and in some cases by the application. It must be unique within the group.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">type [TYPE]</span><a class="anchor" id="type"></a>
-<p>Sets the type. This is set to IMAGE by default. Valid types are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">RECT</span>: Rectangle object in the screen</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TEXT</span>: Simple text</li>
-<li><span style="font-family: Courier New,Courier,monospace;">IMAGE</span>: Image area</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>: Area where you can add the object</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span>: Complex text with multiple lines, mark-up elements, and such.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">GROUP</span>: Part which can include other groups in the same group.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOX</span>: Container object as a container. It has a row or column.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: Container object as a container. It has a row and column.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">PROXY</span>: Clone of another part in the same group. It shares the memory of the source part.</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">SPACER</span>: Rectangle object, but invisible. Recommended to padding because it does not allocate any memory.</li>
-
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">part [part declaration]</span><a class="anchor" id="part_part"></a>
-<p>Nested parts adds hierarchy to Edje. Nested part inherits its location relatively to the parent part. To declare a nested part create a new part within current part declaration. Define parent part name before adding nested parts. </p>
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;parent_rect&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description {}
-&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;nested_rect&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">insert_before [another part&#39;s name]</span><a class="anchor" id="insert_before"></a>
-<p>The part&#39;s name which this part is inserted before. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer more than one by <span style="font-family: Courier New,Courier,monospace;">insert_before</span>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">insert_after [another part&#39;s name]</span><a class="anchor" id="insert_after"></a>
-<p>The part&#39;s name which this part is inserted after. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer more than one by <span style="font-family: Courier New,Courier,monospace;">insert_after</span>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span><a class="anchor" id="mouse_events"></a>
-<p>Specifies whether the part emits signals, although it is named <span style="font-family: Courier New,Courier,monospace;">mouse_events</span>. Disabling it (0) prevents the part from emitting signal. It is set to 1 by default, or to the value set to <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> at the group level, if any.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">repeat_events [1 or 0]</span><a class="anchor" id="repeat_events"></a>
-<p>Specifies whether a part echoes a mouse event to other parts below the pointer (1), or not (0). It is set to 0 by default.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">ignore_flags [FLAG] ...</span><a class="anchor" id="ignore_flags"></a>
-<p>Specifies whether events with the given flags are ignored, i.e., do not emit signals to the parts. Multiple flags must be separated by spaces, the effect is ignoring all events with one of the flags specified. Possible flags are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: Event is handled properly (default value)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ON_HOLD</span>: Event is not handled or passed in this part</li>
-
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">scale [1 or 0]</span><a class="anchor" id="scale"></a>
-<p>Specifies whether the part scales its size with an Edje scaling factor. By default scale is off (0) and the default scale factor is 1.0 which means no scaling. This is used to scale properties such as font size, min/max size of the part, and it can also be used to scale based on DPI of the target device. The reason to be selective is that some parts are scaled well, others are not, so choose what works best.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">pointer_mode [MODE]</span><a class="anchor" id="pointer_mode"></a>
-<p>Sets the mouse pointer behavior for a given part. The default value is AUTOGRAB. Available modes are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">AUTOGRAB</span>, when the part is clicked and the button remains pressed, the part is the source of all future mouse signals emitted, even outside the object, until the button is released.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">NOGRAB</span>, the effect is limited to the part&#39;s container.</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">precise_is_inside [1 or 0]</span><a class="anchor" id="precise_is_inside"></a>
-<p>Enables precise point collision detection for the part, which is more resource-intensive. It is disabled by default.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">use_alternate_font_metrics [1 or 0]</span><a class="anchor" id="use_alternate_font_metrics"></a>
-<p>Only affects text and textblock parts, when enabled Edje uses different size measurement functions. It is disabled by default.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">clip_to [another part&#39;s name]</span><a class="anchor" id="clip_to"></a>
-<p>Only renders the area of part that coincides with another part&#39;s container. Overflowing content is not displayed. Note that the part being clipped to can only be a rectangle part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source [another group&#39;s name]</span><a class="anchor" id="source"></a>
-<p>Only available to GROUP or TEXTBLOCK parts. Swallows the specified group into the part&#39;s container if it is a GROUP. If TEXTBLOCK it is used for the group to be loaded and used for selection display UNDER the selected text. <span style="font-family: Courier New,Courier,monospace;">source2</span> is used for on top of the selected text, if <span style="font-family: Courier New,Courier,monospace;">source2</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source2 [another group&#39;s name]</span><a class="anchor" id="source2"></a>
-<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for selection display OVER the selected text. <span style="font-family: Courier New,Courier,monospace;">source</span> is used for under of the selected text, if <span style="font-family: Courier New,Courier,monospace;">source</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source3 [another group&#39;s name]</span><a class="anchor" id="source3"></a>
-<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for cursor display UNDER the cursor position. <span style="font-family: Courier New,Courier,monospace;">source4</span> is used for over the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source4</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source4 [another group&#39;s name]</span><a class="anchor" id="source4"></a>
-<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for cursor display OVER the cursor position. <span style="font-family: Courier New,Courier,monospace;">source3</span> is used for under the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source4</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source5 [another group&#39;s name]</span><a class="anchor" id="source5"></a>
-<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for anchors display UNDER the anchor position. <span style="font-family: Courier New,Courier,monospace;">source6</span> is used for over the anchors text, if <span style="font-family: Courier New,Courier,monospace;">source6</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source6 [another group&#39;s name]</span><a class="anchor" id="source6"></a>
-<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for anchor display OVER the anchor position. <span style="font-family: Courier New,Courier,monospace;">source5</span> is used for under the anchor text, if <span style="font-family: Courier New,Courier,monospace;">source6</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">effect [effect] </span> (shadow direction)<a class="anchor" id="effect"></a>
-<p>Apply the selected outline, shadow, or glow effect to &quot;textblock&quot; (take care that this effect only works for the textblock). The available effects are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SOFT_OUTLINE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SOFT_SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SOFT_SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">FAR_SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">FAR_SOFT_SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">GLOW</span></li>
-</ul>
-
-<p>The available shadow directions definitions are (default is <span style="font-family: Courier New,Courier,monospace;">BOTTOM_RIGHT</span>):</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_RIGHT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_LEFT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">LEFT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TOP_LEFT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TOP</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TOP_RIGHT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">RIGHT</span></li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">entry_mode [mode]</span><a class="anchor" id="entry_mode"></a>
-<p>Sets the edit mode for a textblock part. The available modes are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>:
-<p>The textblock is non-editable.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span>:
-<p>The textblock is non-editable, but selectable.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EDITABLE</span>:
-<p>The textblock is editable.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">PASSWORD</span>:
-<p>The textblock is editable if the Edje object has the keyboard focus and the part has the Edje focus (or selectable always regardless of focus). In the event of password mode, not selectable and all text chars replaced with *&#39;s but editable and pastable.</p></li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">select_mode [mode]</span><a class="anchor" id="select_mode"></a>
-<p>Sets the selection mode for a textblock part. The available modes are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">DEFAULT</span>, selection mode is what you would expect on any desktop. Press mouse, drag and release to end.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EXPLICIT</span>, this mode requires the application controlling the Edje object has to explicitly begin and end selection modes, and the selection itself is draggable at both ends.</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">cursor_mode [mode]</span><a class="anchor" id="cursor_mode"></a>
-<p>Sets the cursor mode for a textblock part. The available modes are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">UNDER</span>, the cursor draws below the character pointed at. That is the default.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BEFORE</span>, the cursor is drawn as a vertical line before the current character, just like many other GUI toolkits handle it.</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">multiline [1 or 0]</span><a class="anchor" id="multiline"></a>
-<p>It causes a textblock that is editable to allow multiple lines for editing.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">access [1 or 0]</span><a class="anchor" id="access"></a>
-<p>Specifies whether the part uses accessibility feature (1), or not (0). It is set to 0 by default.</p>
-</li>
-</ul>
-
-<h3 id="dragable" name="dragable">Draggable</h3>
-
-<pre class="prettyprint">
-dragable 
-{
-&nbsp;&nbsp;&nbsp;confine: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;threshold: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;events:  &quot;another draggable part&quot;;
-&nbsp;&nbsp;&nbsp;x: 0 0 0;
-&nbsp;&nbsp;&nbsp;y: 0 0 0;
-}
-</pre>
-
-<p>When this block is used the part can be dragged around the interface, do not confuse with external drag and drop. By default Edje (and most applications) attempts to use the minimal size possible for a draggable part. If the min property is not set in the description the part is (most likely) set to 0px width and 0px height, thus invisible.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">x [enable/disable] [step] [count]</span><a class="anchor" id="dragable_x"></a>
-<p>Used to set up dragging events for the X axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits movement to values divisible by it, causing the part to jump from position to position. If step is set to 0 it is calculated as width of confine part divided by count.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">y [enable/disable] [step] [count]</span><a class="anchor" id="dragable_y"></a>
-<p>Used to set up dragging events for the Y axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits movement to values divisible by it, causing the part to jump from position to position. If step is set to 0 it is calculated as height of confine part divided by count.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">confine [another part&#39;s name]</span><a class="anchor" id="dragable_confine"></a>
-<p>Limits the movement of the dragged part to another part&#39;s container. Set a min size for the part, or the dragged object will not show up.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">threshold [another part&#39;s name]</span><a class="anchor" id="dragable_threshold"></a>
-<p>When set, the movement of the dragged part can only start when it get moved enough to be outside of the threshold part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">events [another draggable part&#39;s name]</span><a class="anchor" id="dragable_events"></a>
-<p>Causes the part to forward the drag events to another part, thus ignoring them for itself.</p>
-</li>
-
-</ul>
-
-<h3 id="box_table" name="box_table">Box/table</h3>
-
-<h4 id="box_table_items" name="box_table_items">Items</h4>
-
-<pre class="prettyprint">
-box/table 
-{
-&nbsp;&nbsp;&nbsp;items 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GROUP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;some source&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: -1 -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 1 1 2 2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GROUP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;some other source&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;some name&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>On a BOX part, this block is used to set other groups as elements of the box. These can be mixed with external objects set by the application through the <span style="font-family: Courier New,Courier,monospace;">edje_object_part_box*()</span> functions.</p>
-
-<h5 id="box_table_items_item" name="box_table_items_item">Item</h5>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">type [item type]</span><a class="anchor" id="box_table_items_item_type"></a>
-<p>Sets the type of the object this item holds. The supported type is: </p>
-	<ul>
-	<li><span style="font-family: Courier New,Courier,monospace;">GROUP</span> (default)</li>
-	</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">name [name for the object]</span><a class="anchor" id="box_table_items_item_name"></a>
-<p>Sets the name of the object via <span style="font-family: Courier New,Courier,monospace;">evas_object_name_set()</span>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source [another group&#39;s name]</span><a class="anchor" id="box_table_items_item_source"></a>
-<p>Sets the group this object is made of.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span><a class="anchor" id="box_table_items_item_min"></a>
-<p>Sets the minimum size hints for this object. </p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Must be -1 to get expand behavior.</td>
-</tr>
-</tbody>
-</table> 
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">spread [width] [height]</span><a class="anchor" id="box_table_items_item_spread"></a>
-<p>Replicates the item in a rectangle of size width x height box starting from the defined position of this item. The default value is 1 1;.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">prefer [width] [height]</span><a class="anchor" id="box_table_items_item_prefer"></a>
-<p>Sets the preferred size hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span><a class="anchor" id="box_table_items_item_max"></a>
-<p>Sets the maximum size hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">padding [left] [right] [top] [bottom]</span><a class="anchor" id="box_table_items_item_padding"></a>
-<p>Sets the padding hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">align [x] [y]</span><a class="anchor" id="box_table_items_item_align"></a>
-<p>Sets the alignment hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">weight [x] [y]</span><a class="anchor" id="box_table_items_item_weight"></a>
-<p>Sets the weight hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">aspect [w] [h]</span><a class="anchor" id="box_table_items_item_aspect"></a>
-<p>Sets the aspect width and height hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">aspect_mode [mode]</span><a class="anchor" id="box_table_items_item_aspect_mode"></a>
-<p>Sets the aspect control hints for this object. The available hints are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">NEITHER</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">options [extra options]</span><a class="anchor" id="box_table_items_item_options"></a>
-<p>Sets extra options for the object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">position [col] [row]</span><a class="anchor" id="box_table_items_item_position"></a>
-<p>Sets the position this item has in the table. This is required for parts of type TABLE.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">span [col] [row]</span><a class="anchor" id="box_table_items_item_span"></a>
-<p>Sets how many columns and rows this item uses. The default value is 1 1.</p>
-</li>
-
-</ul>
-
-<h3 id="description" name="description">Description</h3>
-
-<pre class="prettyprint">
-description 
-{
-&nbsp;&nbsp;&nbsp;inherit: &quot;another_description&quot; INDEX;
-&nbsp;&nbsp;&nbsp;state: &quot;description_name&quot; INDEX;
-&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;min: 0 0;
-&nbsp;&nbsp;&nbsp;max: -1 -1;
-&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;fixed: 0 0;
-&nbsp;&nbsp;&nbsp;step: 0 0;
-&nbsp;&nbsp;&nbsp;aspect: 1 1;
-
-&nbsp;&nbsp;&nbsp;rel1 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;rel2 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>Every part can have one or more description blocks. Each description is used to define style and layout properties of a part in a given &quot;state&quot;.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">inherit [another description&#39;s name] [another description&#39;s index]</span><a class="anchor" id="description_inherit"></a>
-<p>Thee description inherits all the properties from the named description. The properties defined in this part override the inherited properties, reducing the amount of necessary code for simple state changes. Note: inheritance in Edje is single level only.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source [another part&#39;s name]</span><a class="anchor" id="description_source"></a>
-<p>Causes the part to use another part&#39;s content as the content of this part. This works only with PROXY part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">state [name for the description] [index]</span><a class="anchor" id="description_state"></a>
-<p>Sets a name used to identify a description inside a given part. Multiple descriptions are used to declare different states of the same part, like &quot;clicked&quot; or &quot;invisible&quot;. All state declarations are also coupled with an index number between 0.0 and 1.0. All parts must have at least one description named &quot;default 0.0&quot;.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">visible [0 or 1]</span><a class="anchor" id="description_visible"></a>
-<p>Takes a Boolean value specifying whether part is visible (1) or not (0). Non-visible parts do not emit signals. The default value is 1.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">limit [mode]</span><a class="anchor" id="description_limit"></a>
-<p>Emits a signal when the part size changes from zero or to a zero (<span style="font-family: Courier New,Courier,monospace;">limit,width,over</span>, <span style="font-family: Courier New,Courier,monospace;">limit,width,zero</span>). By default no signal are emitted. Valid values are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">WIDTH</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">HEIGHT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">align [X axis] [Y axis]</span><a class="anchor" id="description_align"></a>
-<p>When the displayed object&#39;s size is smaller or bigger than its container, this property moves it relatively along both axis inside its container. &quot;0.0&quot; means left/top edges of the object touching container&#39;s respective ones, and &quot;1.0&quot; stands for right/bottom edges of the object (on horizontal/vertical axis, respectively). The default value is &quot;0.5 0.5&quot;. For a more detailed explanation, see the <a href="edc_positioning_n.htm#align_size_hint">Align Size Hint</a>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">fixed [width, 0 or 1] [height, 0 or 1]</span><a class="anchor" id="description_fixed"></a>
-<p>Sets the minimum size calculation. See <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_calc()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_restricted_calc()</span>. This tells the min size calculation routine that this part does not change size in width or height (1 for it does not, 0 for it does), so the routine does not try to expand or contract the part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">min [width] [height] or SOURCE</span><a class="anchor" id="description_min"></a>
-<p>Sets the minimum size of the state. When min is defined to SOURCE, it looks at the original image size and enforces its minimal size to match at least the original one. The part must be an IMAGE or a GROUP part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">minmul [width multiplier] [height multiplier]</span><a class="anchor" id="description_minmul"></a>
-<p>A multiplier forcibly applied to whatever minimum size is only during minimum size calculation.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">max [width] [height] or SOURCE</span><a class="anchor" id="description_max"></a>
-<p>The maximum size of the state. A size of -1.0 means that it is ignored in one direction. When max is set to SOURCE, Edje enforces the part to be not more than the original image size. The part must be an IMAGE part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">step [width] [height]</span><a class="anchor" id="description_step"></a>
-<p>Restricts resizing of each dimension to values divisible by its value. This causes the part to jump from value to value while resizing. The default value is &quot;0 0&quot; which disables stepping.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">aspect [min] [max]</span><a class="anchor" id="description_aspect"></a>
-<p>Normally width and height can be resized to any values independently. The aspect property forces the width to height ratio to be kept between the minimum and maximum set. For example, &quot;1.0 1.0&quot; increases the width a pixel for every pixel added to height. The default value is &quot;0.0 0.0&quot; which disables aspect. For a more detailed explanation, see the <a href="edc_positioning_n.htm#min_size_hint">Min Size Hint</a> .</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">aspect_preference [DIMENSION]</span><a class="anchor" id="description_aspect_preference"></a>
-<p>Set the dimensions to which the &quot;aspect&quot; property applies. Available options are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SOURCE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-</ul>
-<p>For a more detailed explanation, see <a href="edc_positioning_n.htm#min_size_hint">Min Size Hint</a>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color_class [color class name]</span><a class="anchor" id="description_color_class"></a>
-<p>The part uses the color values of the named <span style="font-family: Courier New,Courier,monospace;">color_class</span>, these values can be overridden by the &quot;color&quot;, &quot;color2&quot; and &quot;color3&quot; properties.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color"></a>
-<p>Sets the main color to the specified values (between 0 and 255).</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The textblock part is not affected by the color description. Set the color in the text style.</td>
-</tr>
-</tbody>
-</table> 
-
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color2"></a>
-<p>Sets the text shadow color to the specified values (0 to 255).</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color3"></a>
-<p>Sets the text outline color to the specified values (0 to 255).</p>
-</li>
-
-</ul>
-
-<h4 id="description_rel1_2" name="description_rel1_2">Rel1/rel2</h4>
-<pre class="prettyprint">
-description 
-{
-&nbsp;&nbsp;&nbsp;rel1 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:     0   0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;rel2 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:    -1  -1;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The rel1 and rel2 blocks are used to define the position of each corner of the part&#39;s container. With rel1 being the left-up corner and rel2 being the right-down corner.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span><a class="anchor" id="description_rel1_2_relative"></a>
-<p>Moves the corner to a relative position inside the container of the relative &quot;to&quot; part. Values from 0.0 (0%, beginning) to 1.0 (100%, end) of each axis.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_rel1_2_offset"></a>
-<p>Affects the corner position a fixed number of pixels along each axis.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">to [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to"></a>
-<p>Positions the corner relatively to another part&#39;s container. Setting to &quot;&quot; resets this value for inherited parts.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">to_x [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to_x"></a>
-<p>Positions the corner relatively to the X axis of another part&#39;s container. This affects the first parameter of &quot;relative&quot;. Setting to &quot;&quot; resets this value for inherited parts.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">to_y [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to_y"></a>
-<p>Positions the corner relatively to the Y axis of another part&#39;s container. This affects the second parameter of &quot;relative&quot;. Setting to &quot;&quot; resets this value for inherited parts.</p>
-</li>
-
-</ul>
-
-<h4 id="description_image" name="description_image">Image</h4>
-
-<pre class="prettyprint">
-description 
-{
-&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;filename.ext&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tween:  &quot;filename2.ext&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tween:  &quot;filenameN.ext&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:  left right top bottom;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle:  0/1/NONE/DEFAULT/SOLID;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill {}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">normal [image&#39;s filename]</span><a class="anchor" id="description_image_normal"></a>
-<p>Name of image to be used as previously declared in the images block. In an animation, this is the first and last image displayed. It is required in any image part</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">tween [image&#39;s filename]</span><a class="anchor" id="description_image_tween"></a>
-<p>Name of an image to be used in an animation loop, an image block can have none, one or multiple tween declarations. Images are displayed in the order they are listed, during the transition to the state they are declared in; the &quot;normal&quot; image is the final state.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span><a class="anchor" id="description_image_border"></a>
-<p>Sets the area (in pixels) of each side of the image is displayed as a fixed size border, from the side -&gt; inwards, preventing the corners from being changed on a resize.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">middle [mode]</span><a class="anchor" id="description_image_middle"></a>
-<p>If border is set, this value tells Edje if the rest of the image (not covered by the defined border) displayed or not or be assumed to be solid (without alpha). The default value is <span style="font-family: Courier New,Courier,monospace;">1/DEFAULT</span>. The available values are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">1</span> or <span style="font-family: Courier New,Courier,monospace;">DEFAULT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SOLID</span> (strip alpha from the image over the middle zone)</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span><a class="anchor" id="description_image_border_scale_by"></a>
-<p>If border scaling is enabled then normally the OUTPUT border sizes (e.g. if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always exactly 3 columns of output, or at scale 2.0 they are 6 columns, or 0.33 they merge into a single column). This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to make higher resolution outputs possible by always using the highest resolution artwork and then runtime scaling it down. Value can be: 0.0 or bigger (0.0 or 1.0 to turn it off)</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">border_scale [0/1]</span><a class="anchor" id="description_image_border_scale"></a>
-<p>Tells Edje if the border is scaled by the object/global Edje scale factors.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">scale_hint [mode]</span><a class="anchor" id="description_image_scale_hint"></a>
-<p>Sets the evas image scale hint letting the engine more effectively save cached copies of the scaled image if it makes sense. Valid values are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">DYNAMIC</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">STATIC</span></li>
-</ul>
-</li>
-
-</ul>
-
-<h5 id="description_image_fill" name="description_image_fill">Image.fill</h5>
-
-<pre class="prettyprint">
-image 
-{
-&nbsp;&nbsp;&nbsp;fill 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SCALE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 0-1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size {}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The fill method is an optional block that defines the way an IMAGE part is going to be displayed inside its container. It can be used for tiling (repeating the image) or displaying only part of an image. See <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> documentation for more details.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">smooth [0 or 1]</span><a class="anchor" id="description_image_fill_smooth"></a>
-<p>The smooth property takes a boolean value to decide if the image will be smoothed on scaling (1) or not (0). The default value is 1.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">spread</span><a class="anchor" id="description_image_fill_spread"></a>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">type [fill type]</span><a class="anchor" id="description_image_fill_type"></a>
-<p>Sets the image fill type. The part parameter &quot;min&quot; must be set, it is size of tiled image. If parameter &quot;max&quot; set tiled area has the size accordingly &quot;max&quot; values. SCALE is default type. Valid values are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">SCALE</span>, image is scaled accordingly the value of the parameters &quot;relative&quot; and &quot;offset&quot; from &quot;origin&quot; and &quot;size&quot; blocks.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TILE</span>, image is tiled accordingly parameters value &quot;relative&quot; and &quot;offset&quot; from &quot;origin&quot; and &quot;size&quot; blocks.</li>
-</ul>
-</li>
-
-</ul>
-
-<h6 id="description_image_fill_origin" name="description_image_fill_origin">Image.fill.origin</h6>
-
-<pre class="prettyprint">
-image 
-{
-&nbsp;&nbsp;&nbsp;fill 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The origin block is used to place the starting point, inside the displayed element, that is used to render the tile. By default, the origin is set at the element&#39;s left-up corner.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_origin_relative"></a>
-<p>Sets the starting point relatively to displayed element&#39;s content.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_origin_offset"></a>
-<p>Affects the starting point a fixed number of pixels along each axis.</p>
-</li>
-
-</ul>
-
-<h6 id="description_image_fill_size" name="description_image_fill_size">Image.fill.size</h6>
-
-<pre class="prettyprint">
-image 
-{
-&nbsp;&nbsp;&nbsp;fill 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -1 -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The size block defines the tile size of the content that are displayed.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">relative [width] [height]</span><a class="anchor" id="description_image_fill_size_relative"></a>
-<p>Takes a pair of decimal values that represent the percentage of the original size of the element. For example, &quot;0.5 0.5&quot; represents half the size, while &quot;2.0 2.0&quot; represents the double. The default value is &quot;1.0 1.0&quot;.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_size_offset"></a>
-<p>Affects the size of the tile a fixed number of pixels along each axis.</p>
-</li>
-
-</ul>
-
-<h4 id="description_text" name="description_text">Text</h4>
-
-<pre class="prettyprint">
-text 
-{
-&nbsp;&nbsp;&nbsp;text: &quot;some string of text to display&quot;;
-&nbsp;&nbsp;&nbsp;font: &quot;font_name&quot;;
-&nbsp;&nbsp;&nbsp;size: SIZE;
-&nbsp;&nbsp;&nbsp;text_class: &quot;class_name&quot;;
-&nbsp;&nbsp;&nbsp;fit: horizontal vertical;
-&nbsp;&nbsp;&nbsp;min: horizontal vertical;
-&nbsp;&nbsp;&nbsp;max: horizontal vertical;
-&nbsp;&nbsp;&nbsp;align: X-axis Y-axis;
-&nbsp;&nbsp;&nbsp;source: &quot;part_name&quot;;
-&nbsp;&nbsp;&nbsp;text_source: &quot;text_part_name&quot;;
-&nbsp;&nbsp;&nbsp;style: &quot;stylename&quot;;
-}
-</pre>
-
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">text [a string of text, or nothing]</span><a class="anchor" id="description_text_text"></a>
-<p>Sets the default content of a text part, normally the application is the one changing its value.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">text_class [text class name]</span><a class="anchor" id="description_text_text_class"></a>
-<p>Similar to <span style="font-family: Courier New,Courier,monospace;">color_class</span>, this is the name used by the application to alter the font family and size at runtime.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">font [font alias]</span><a class="anchor" id="description_text_font"></a>
-<p>This sets the font family to one of the aliases set up in the &quot;fonts&quot; block. Can be overridden by the application.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">style [the style name]</span><a class="anchor" id="description_text_style"></a>
-<p>Causes the part to use the default style and tags defined in the &quot;style&quot; block with the specified name.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">repch [the replacement character string]</span><a class="anchor" id="description_text_repch"></a>
-<p>If this is a textblock and is in PASSWORD mode this string is used to replace every character to hide the details of the entry. Normally * is used, but you can use anything you like.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">size [font size in points (pt)]</span><a class="anchor" id="description_text_size"></a>
-<p>Sets the default font size for the text part. Can be overridden by the application.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">size_range [font min size in points (pt)] [font max size in points (pt)]</span><a class="anchor" id="description_text_size_range"></a>
-<p>Sets the allowed font size for the text part. Setting min and max to 0 means that sizing is not restricted. This is also the default value.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">fit [horizontal] [vertical]</span><a class="anchor" id="description_text_fit"></a>
-<p>When any of the parameters is set to 1 Edje resizes the text for it to fit in its container. Both are disabled by default.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_text_min"></a>
-<p>When any of the parameters is enabled (1) it forces the minimum size of the container to be equal to the minimum size of the text. The default value is &quot;0 0&quot;.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">max [horizontal] [vertical]</span><a class="anchor" id="description_text_max"></a>
-<p>When any of the parameters is enabled (1) it forces the maximum size of the container to be equal to the maximum size of the text. The default value is &quot;0 0&quot;.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_text_align"></a>
-<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source [another TEXT part&#39;s name]</span><a class="anchor" id="description_text_source"></a>
-<p>Causes the part to use the text properties (like font and size) of another part and update them as they change.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">text_source [another TEXT part&#39;s name]</span><a class="anchor" id="description_text_text_source"></a>
-<p>Causes the part to display the text content of another part and update them as they change.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">ellipsis [point of balance]</span><a class="anchor" id="description_text_ellipsis"></a>
-<p>Balances the text in a relative point from 0.0 to 1.0, this point is the last section of the string to be cut out in case of a resize that is smaller than the text itself. The default value is 0.0.</p>
-</li>
-
-</ul>
-
-
-<h4 id="description_box" name="description_box">Box</h4>
-
-<pre class="prettyprint">
-box 
-{
-&nbsp;&nbsp;&nbsp;layout: &quot;vertical&quot;;
-&nbsp;&nbsp;&nbsp;padding: 0 2;
-&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;min: 0 0;
-}
-</pre>
-
-<p>A box block can contain other objects and display them in different layouts, any of the predefined set, or a custom one, set by the application.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">layout [primary layout] (fallback layout)</span><a class="anchor" id="description_box_layout"></a>
-<p>Sets the layout for the box:</p>
-<ul>
-<li>horizontal (default)</li>
-<li>vertical</li>
-<li>horizontal_homogeneous</li>
-<li>vertical_homogeneous</li>
-<li>horizontal_max (homogeneous to the max sized child)</li>
-<li>vertical_max</li>
-<li>horizontal_flow</li>
-<li>vertical_flow</li>
-<li>stack</li>
-<li><span style="font-family: Courier New,Courier,monospace;">some_other_custom_layout_set_by_the_application</span>
-<p>Set a custom layout as a fallback. For more information, see <span style="font-family: Courier New,Courier,monospace;">edje_box_layout_register()</span>. If an unregistered layout is used, it defaults to horizontal.</p></li>
-
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_box_align"></a>
-<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span><a class="anchor" id="description_box_padding"></a>
-<p>Sets the space between cells in pixels.  The default value is 0 0.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_box_min"></a>
-<p>When any of the parameters is enabled (1) it forces the minimum size of the box to be equal to the minimum size of the items. The default value is 0 0.</p>
-</li>
-
-</ul>
-
-<h4 id="description_table" name="description_table">Table</h4>
-
-<pre class="prettyprint">
-table 
-{
-&nbsp;&nbsp;&nbsp;homogeneous: TABLE;
-&nbsp;&nbsp;&nbsp;padding: 0 2;
-&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;min: 0 0;
-}
-</pre>
-
-<p>A table block can contain other objects packed in multiple columns and rows, and each item can span across more than one column and/or row.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">homogeneous [homogeneous mode]</span><a class="anchor" id="description_table_homogeneous"></a>
-<p>Sets the homogeneous mode for the table:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: default</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: available space is evenly divided between children (which overflows onto other children if too little space is available)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ITEM</span>: size of each item is the largest minimal size of all the items</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_table_align"></a>
-<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span><a class="anchor" id="description_table_padding"></a>
-<p>Sets the space between cells in pixels. The default value is 0 0.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_table_min"></a>
-<p>When any of the parameters is enabled (1), it forces the minimum size of the table to be equal to the minimum size of the items. The default value is 0 0.</p>
-</li>
-
-</ul>
-
-<h4 id="description_map" name="description_map">Map</h4>
-
-<pre class="prettyprint">
-map 
-{
-&nbsp;&nbsp;&nbsp;perspective: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;light: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;on: 1;
-&nbsp;&nbsp;&nbsp;smooth: 1;
-&nbsp;&nbsp;&nbsp;perspective_on: 1;
-&nbsp;&nbsp;&nbsp;backface_cull: 1;
-&nbsp;&nbsp;&nbsp;alpha: 1;
-
-&nbsp;&nbsp;&nbsp;rotation 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">perspective [another part&#39;s name]</span><a class="anchor" id="description_map_perspective"></a>
-<p>This sets the part that is used as the perspective point for giving a part a 3D look. The perspective point must have a perspective section that provides zplane and focal properties. The center of this part is used as the focal point, thus size, color and visibility are not relevant, just center point, zplane and focal are used. This also implicitly enables perspective transforms.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">light [another part&#39;s name]</span><a class="anchor" id="description_map_light"></a>
-<p>This sets the part that is used as the light for calculating the brightness (based on how directly the  part&#39;s surface is facing the light source point). Like the perspective point part, the center point is used and zplane is used for the z position (0 being the zero-plane where all 2D objects normally live) and positive values being further away into the distance. The light part color is used as the light color (alpha not used for light color). The color2 color is used for the ambient lighting when calculating brightness (alpha also not used).</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">on [1 or 0]</span><a class="anchor" id="description_map_on"></a>
-<p>This enables mapping for the part. Default is 0.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">smooth [1 or 0]</span><a class="anchor" id="description_map_smooth"></a>
-<p>This enables smooth map rendering. This may be linear interpolation, anisotropic filtering or anything the engine decides is smooth. This is a best-effort hint and may not produce precisely the same results in all engines and situations. The default value is 1.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">alpha [1 or 0]</span><a class="anchor" id="description_map_alpha"></a>
-<p>This enables alpha channel when map rendering. The default value is 1.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">backface_cull [1 or 0]</span><a class="anchor" id="description_map_backface_cull"></a>
-<p>This enables backface culling (when the rotated part that normally faces the camera is facing away after being rotated etc.). This means that the object are hidden when backface is culled.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">perspective_on [1 or 0]</span><a class="anchor" id="description_map_perspective_on"></a>
-<p>This enables perspective when rotating even without a perspective point object. This uses perspective set for the object itself or for the canvas as a whole as the global perspective with <span style="font-family: Courier New,Courier,monospace;">edje_perspective_set()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_perspective_global_set()</span>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color [point] [red] [green] [blue] [alpha]</span><a class="anchor" id="description_map_color"></a>
-<p>This sets the color of a vertex in the map. Colors are linearly interpolated between vertex points through the map. The default color of a vertex in a map is white solid (255, 255, 255, 255) which means it has no affect on modifying the part pixels. Currently only four points are supported: 0 - Left-Top point of a part. 1 - Right-Top point of a part. 2 - Left-Bottom point of a part. 3 - Right-Bottom point of a part.</p>
-</li>
-
-</ul>
-
-<h5 id="description_map_rotation" name="description_map_rotation">Map.rotation</h5>
-
-<pre class="prettyprint">
-rotation 
-{
-&nbsp;&nbsp;&nbsp;center: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;x: 45.0;
-&nbsp;&nbsp;&nbsp;y: 45.0;
-&nbsp;&nbsp;&nbsp;z: 45.0;
-}
-</pre>
-
-<p>Rotates the part, optionally with the center on another part.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">center [another part&#39;s name]</span><a class="anchor" id="description_map_rotation_center"></a>
-<p>This sets the part that is used as the center of rotation when rotating the part with this description. The part&#39;s center point is used as the rotation center when applying rotation around the x, y and z axes. If no center is given, the parts original center itself is used for the rotation center.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">x [X degrees]</span><a class="anchor" id="description_map_rotation_x"></a>
-<p>This sets the rotation around the x axis of the part considering the center set. The value is given in degrees.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">y [Y degrees]</span><a class="anchor" id="description_map_rotation_y"></a>
-<p>This sets the rotation around the y axis of the part considering the center set. The value is given in degrees.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">z [Z degrees]</span><a class="anchor" id="description_map_rotation_z"></a>
-<p>This sets the rotation around the z axis of the part considering the center set. The value is given in degrees.</p>
-</li>
-
-</ul>
-
-<h5 id="description_map_perspective2" name="description_map_perspective2">Perspective</h5>
-
-<pre class="prettyprint">
-perspective 
-{
-&nbsp;&nbsp;&nbsp;zplane: 0;
-&nbsp;&nbsp;&nbsp;focal: 1000;
-}
-</pre>
-
-<p>Adds focal and plane perspective to the part. Active if <span style="font-family: Courier New,Courier,monospace;">perspective_on</span> is true. Must be provided if the part is being used by other part as it is perspective target.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">zplane [unscaled Z value]</span><a class="anchor" id="description_map_perspective_zplane"></a>
-<p>This sets the z value that is not scaled. Normally this is 0 as that is the z distance.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">focal [distance]</span><a class="anchor" id="description_map_perspective_focal"></a>
-<p>This sets the distance from the focal z plane (zplane) and the camera - i.e. equating to focal length of the camera</p>
-</li>
-
-</ul>
-
-<h5 id="description_map_link" name="description_map_link">Link</h5>
-
-<pre class="prettyprint">
-link 
-{
-&nbsp;&nbsp;&nbsp;base: &quot;edje,signal&quot; &quot;edje&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-&nbsp;&nbsp;&nbsp;in: 0.5 0.1;
-&nbsp;&nbsp;&nbsp;after: &quot;some_program&quot;;
-}
-</pre>
-
-<p>The link block can be used to create transitions to the enclosing part description state. The result of the above block is identical to creating a program with </p>
-
-
-<pre class="prettyprint">
-action: STATE_SET &quot;default&quot;";
-signal: &quot;edje,signal&quot;;
-source: &quot;edje&quot;;
-</pre> 
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">base [signal] [source]</span><a class="anchor" id="description_map_link_base"></a>
-<p>Defines the signal and source which triggers the transition to this state. The source parameter is optional here and is filled with the current group&#39;s default value if it is not provided. </p>
-</li>
-</ul>
-  
-<h2 id="program1" name="program1">Program</h2>
-
-<pre class="prettyprint">
-<a href="#program">program</a>
-{
-&nbsp;&nbsp;&nbsp;// name of the program
-&nbsp;&nbsp;&nbsp;<a href="#program_name">name</a>: &quot;programname&quot;;
-&nbsp;&nbsp;&nbsp;// signals which trigger the program
-&nbsp;&nbsp;&nbsp;<a href="#signal">signal</a>: &quot;signalname&quot;;
-&nbsp;&nbsp;&nbsp;// filter incoming signals depending on the sender name
-&nbsp;&nbsp;&nbsp;<a href="#program_source">source</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// filter incoming signals depending on the part&#39;s state
-&nbsp;&nbsp;&nbsp;<a href="#filter">filter</a>: &quot;partname&quot; &quot;statename&quot;;
-&nbsp;&nbsp;&nbsp;// delay the program by X seconds plus a random time between 0 and Y
-&nbsp;&nbsp;&nbsp;<a href="#in">in</a>: 0.3 0.0;
-&nbsp;&nbsp;&nbsp;// action to perform
-&nbsp;&nbsp;&nbsp;<a href="#action">action</a>: STATE_SET &quot;statename&quot; state_value;
-&nbsp;&nbsp;&nbsp;// if action is STATE_SET, define a transition from the current to the target state
-&nbsp;&nbsp;&nbsp;<a href="#transition">transition</a>: LINEAR 0.5;
-&nbsp;&nbsp;&nbsp;// if action is SIGNAL_EMIT, the name of the part which will receive the signal
-&nbsp;&nbsp;&nbsp;<a href="#target">target</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// run another program after the current one is done
-&nbsp;&nbsp;&nbsp;<a href="#after">after</a>: &quot;programname&quot;;
-&nbsp;&nbsp;&nbsp;<a href="#after">after</a>: &quot;anotherprogram&quot;;
-}
-</pre>
-
-<h3 id="program" name="program">Program</h3>
-
-<p>Programs define how your interface reacts to events. Programs can change the state of parts or trigger other events.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">name [program name]</span><a class="anchor" id="program_name"></a>
-<p>Symbolic name of program as a unique identifier.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">signal [signal name]</span><a class="anchor" id="signal"></a>
-<p>Specifies signals that cause the program to run. The signal received must match the specified source to run. There may be several signals, but only one signal keyword per program can be used. Also, there are some predefined signals for touch event handling. The predefined signals are:</p>
-<ul>
-<li>&quot;hold,on&quot;: Holding on the mouse event matching the source that starts the program.</li>
-<li>&quot;hold,off&quot;: Holding off the mouse event matching the source that starts the program.</li>
-<li>&quot;focus,part,in&quot;: Focusing in the matching source that starts the program.</li>
-<li>&quot;focus,part,out&quot;: Focusing out of the matching source that starts the program.</li>
-<li>&quot;mouse,in&quot;: Moving the mouse into the matching source that starts the program.</li>
-<li>&quot;mouse,out&quot;: Moving the mouse out of the matching source that starts the program.</li>
-<li>&quot;mouse,move&quot;: Moving the mouse in the matching source that starts the program.</li>
-<li>&quot;mouse,down,*&quot;: Pressing the mouse button in the matching source that starts the program.</li>
-<li>&quot;mouse,up,*&quot;: Releasing the mouse button in the matching source that starts the program.</li>
-<li>&quot;mouse,clicked,*&quot;: Clicking any mouse button in the matching source that starts the program.</li>
-<li>&quot;mouse,wheel,0,*&quot;: Moving the mouse wheel in the matching source that starts the program. A positive number moves up and a negative number moves down.</li>
-<li>&quot;drag,start&quot;: Starting a drag of the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
-<li>&quot;drag,stop&quot;: Stopping a drag of the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
-<li>&quot;drag&quot;: Dragging the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source [source name]</span><a class="anchor" id="program_source"></a>
-<p>Source of accepted signal. There may be several signals, but only one source keyword per program can be used. For example, source: &quot;button-*&quot;; (signals from any part or program named &quot;button-*&quot; are accepted).</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">filter [part] [state]</span><a class="anchor" id="filter"></a>
-<p>Filter signals to be only accepted if the part is in state named <span style="font-family: Courier New,Courier,monospace;">[state]</span>. Only one filter per program can be used. If <span style="font-family: Courier New,Courier,monospace;">[state]</span> is not given, the source of the event is used instead.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">in [from] [range]</span><a class="anchor" id="in"></a>
-<p>Wait <span style="font-family: Courier New,Courier,monospace;">[from]</span> seconds before executing the program and add a random number of seconds (from 0 to <span style="font-family: Courier New,Courier,monospace;">[range]</span>) to the total waiting time.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">action [type] (param1) (param2) (param3) (param4)</span><a class="anchor" id="action"></a>
-<p> Action to be performed by the program. Valid actions (only one can be specified) are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">STATE_SET</span>: Set &quot;target part&quot; state as &quot;target state&quot;</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>: Stop the ongoing transition.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>: Emit a signal to the application level. The application can register a callback for handling actions based on the EDC state.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_SET</span>: Set a value for the dragable part (x, y values).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_STEP</span>: Set a step for the dragable part (x, y values).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_PAGE</span>: Set a page for the dragable part (x, y values).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">FOCUS_SET</span>: Set the focus to the target group.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE &quot;sample name&quot; speed (channel)</span>: Play a music sample clip.
-
-<p><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE</span>&#39;s (optional) channel can be one of:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EFFECT/FX</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BACKGROUND/BG</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">MUSIC/MUS</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">FOREGROUND/FG</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">INTERFACE/UI</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">INPUT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ALERT</span></li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">PLAY_TONE &quot;tone name&quot; duration_in_seconds (Range 0.1 to 10.0)</span>: Play a predefined tone of a specific duration. </li>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAY_VIBRATION &quot;sample name&quot; repeat (repeat count)</span></li>
-</ul></li>
-
-
-<li><span style="font-family: Courier New,Courier,monospace;">transition [type] [length] (interp val 1) (interp val 2) (option)</span><a class="anchor" id="transition"></a>
-<p>Defines how transitions occur using <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action. <span style="font-family: Courier New,Courier,monospace;">[type]</span> is the style of the transition and <span style="font-family: Courier New,Courier,monospace;">[length]</span> is a double specifying the number of seconds in which to preform the transition. Valid types are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace;">SPRING</span></li>
-</ul>
-
-<p><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span>, <span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> and <span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> need the extra optional &quot;interp val 1&quot; to determine the &quot;factor&quot; of curviness. 1.0 is the same as their non-factor counterparts and 0.0 is equal to linear. Numbers higher than 1.0 make the curve angles steeper with a more pronounced curve point.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">DIVIS</span>, <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> and <span style="font-family: Courier New,Courier,monospace;">SPRING</span> also require &quot;interp val 2&quot; in addition to &quot;interp val 1&quot;.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> as the initial gradient start (0.0 is horizontal, 1.0 is diagonal (linear), 2.0 is twice the gradient of linear, etc.). <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is interpreted as an integer factor defining how much the value swings outside the gradient before going back to the final resting spot at the end. 0.0 for <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is equivalent to linear interpolation. Note that <span style="font-family: Courier New,Courier,monospace;">DIVIS</span> can exceed 1.0.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> as the number of bounces (so it is rounded down to the nearest integer value), with <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> determining how much the bounce decays; 0.0 gives linear decay per bounce and higher values give much more decay.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">SPRING</span> is similar to bounce; <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> specifies the number of spring swings and <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> specifies the decay, but it can exceed 1.0 on the outer swings.</p>
-
-<p>Valid options are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">CURRENT</span> causes the object to move from its current position. Can be used as the last parameter of any transition type.</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">target [target]</span><a class="anchor" id="target"></a>
-<p>Program or part on which the specified action acts.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">after [after]</span><a class="anchor" id="after"></a>
-<p>Specifies a program that is run after the current program completes. The source and signal parameters of a program run as an <span style="font-family: Courier New,Courier,monospace;">after</span> are ignored. Multiple <span style="font-family: Courier New,Courier,monospace;">after</span> statements can be specified per program.</p>
-</li>
-
-</ul>
- 
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table> 
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edc_positioning_n.htm b/org.tizen.ui.guides/html/native/efl/edc_positioning_n.htm
deleted file mode 100755
index 57093ad..0000000
--- a/org.tizen.ui.guides/html/native/efl/edc_positioning_n.htm
+++ /dev/null
@@ -1,488 +0,0 @@
-<!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>Positioning Parts with the EDC File</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">	
-			<li><a href="#basic">Positioning Basic Parts</a></li>
-			<li><a href="#offset">Adding Offset to Relative Positioning</a></li>
-			<li><a href="#calc">Calculating Edje Object Total Size</a></li>
-			<li><a href="#hint">Using Edje Size Hints</a></li>			
-			<li><a href="#Swallow">Edje Swallow</a></li>
-			<li><a href="#Layout">ELM Layout</a></li>
-
-		</ul>
-		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Positioning Parts with the EDC File</h1> 
-
- 
-<h2 id="basic" name="basic">Positioning Basic Parts</h2>
-
-<p>Size of a part (in pixels) is set using the min and max parameters. The following code example sets the minimum and maximum size of the rectangle part to 200x200 px.</p>
-
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;blue&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the size to 200x200
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// blue color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>Position of the parts is defined in the <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks. <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks are used to define respectively the upper-left corner and the lower-right corner of the part. Position can be defined relatively to other parts (with the relative parameter) as an offset (offset parameter). When using relative positioning, the <span style="font-family: Courier New,Courier,monospace;">to</span>, <span style="font-family: Courier New,Courier,monospace;">to_x</span> and <span style="font-family: Courier New,Courier,monospace;">to_y</span> parameters are used to define to which part the relative positioning is done. If nothing else is specified, the positioning is relative to the parent&#39;s part.</p>
-
-<p>To demonstrate the relative positioning, here is a code example that creates another part and positions it under the first part (the upper-left corner of the new part will start at the lower-left corner of the previous one).</p>
-
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;rectangle2&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;green&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the size to 200x200
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// green color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the position
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// rel1 is relative to &quot;rectangle&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// rel2 is relative to the parent
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</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;">align</span> parameter defines how the parts align themselves in the main window if their size is smaller than the main window. If nothing is specified, the parts are aligned in the center of the window.</td>
-</tr>
-</tbody>
-</table> 
-
-<h2 id="offset" name="offset">Adding Offset to Relative Positioning</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> structures also support offset which is a complement to the relative positioning: the corners are first placed according to their relative parameters and then adjusted using the offsets.</p>
-
-<p>The picture below shows the pixel positions for a 4x4 rectangle. The indices start in the top-left corner at (0, 0) increase to the right and to the bottom. Since the indices have started at 0, the 4th pixel has an index of 3.</p>
-
-<p>Therefore, in order to create a 2x2 blue rectangle centered inside that green square, the top-left corner has to be (1, 1) and the bottom-right one has to be (2, 2).</p>
-
-<p class="figure">Figure: Offset indices</p> 
-<p align="center"><img alt="Offset indices" src="../../images/rel1_rel2_offsets.png" /></p> 
-
-<p>Edje needs the following things defined:</p>
-<ul>
-<li>the part coordinates depending on the size and position of the green rectangle</li>
-<li>the relative component of positions is the same: the top-left corner of the green rectangle</li>
-<li>the top-left pixel is (1, 1) and the bottom-right one is (2, 2)</li>
-</ul>
-
-<p>The following code example defines these things: </p>
-
-<pre class="prettyprint">
-name: &quot;blue rectangle&quot;;
-
-rel1.to: &quot;green rectangle&quot;;
-rel1.relative: 0 0;
-rel1.offset: 1 1;
-
-rel2.to: &quot;green rectangle&quot;;
-rel2.relative: 0 0;
-rel2.offset: 2 2;
-</pre>
-
-<p>For most tasks, relative positioning is simpler than using offsets. Offsets are usually left for fine-tuning and creating borders. </p>
-
-<p>The example below is similar to the previous one but uses relative positioning instead of offsets to achieve an equivalent at 4x4 but could scale to larger sizes. </p>
-
-<p>The blue square starts at 25% of the green square (both vertically and horizontally) and ends at 75% of it (again, both vertically and horizontally). </p>
-
-<p>Just like in the previous example, the blue rectangle is named and Edje is told what the object of reference is: </p>
-
-<pre class="prettyprint">
-name: &quot;blue rectangle&quot;;
-rel1.to: &quot;green rectangle&quot;;
-rel2.to: &quot;green rectangle&quot;;
-</pre>
-
-<p>The image below shows how to refer pixels using relative positioning when the offsets are (0, 0).</p>
-
-<p class="figure">Figure: Relative positioning</p> 
-<p align="center"><img alt="Relative positioning" src="../../images/rel1_rel2_offsets_and_relative.png" /></p> 
-
-<p>Note the addressing of pixels: (0, 0) is addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0 0; offset 0 0;</span> and each additional 0.25 in the relative field gives a 1-pixel move. With this, the pixel addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75; offset: 0 0;</span> is at (3, 3) and not (2, 2)!.</p>
-
-<p>This comes from a design choice in Evas and Edje which favor simplicity. In the examples shown in this guide, there are 4 pixels and therefore when the <span style="font-family: Courier New,Courier,monospace;">[0; 1)</span> range is divided in 4, the result is <span style="font-family: Courier New,Courier,monospace;">[0; 0.25), [0.25; 0.50), [0.50; 0.75), [0.75; 0.100)</span>. With Edje, the value used to refer to each segment is the left bound and therefore, 0.75 refers to <span style="font-family: Courier New,Courier,monospace;">[0.75; 0.100)</span>, i.e. the bottom-right pixel of the green rectangle and not the 3/4th one.</p>
-
-<p>The way to refer to the pixel right before is to set the <span style="font-family: Courier New,Courier,monospace;">rel2</span> bound to <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75;</span>, as would be expressed naturally, and <span style="font-family: Courier New,Courier,monospace;">offset: -1 -1;</span>. This can also be understood as extending the rectangle up to 75% of its parent with the upper bound excluded (as shown in the <span style="font-family: Courier New,Courier,monospace;">[0.50; 0.75)</span>).</p>
-
-<p>Since <span style="font-family: Courier New,Courier,monospace;">-1 -1</span> is the most common offset wanted for <span style="font-family: Courier New,Courier,monospace;">rel2</span>, it is the default value; i.e. the default behavior is practical.</p>
-
-<h2 id="calc" name="calc">Calculating Edje Object Total Size</h2>
-
-<p>When the EDC file is composed of a lot of parts, Edje calculates the size of the global Edje object, by taking all the parts and their parameters into account. Some parameters have an role in this calculation and affect the global size:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">min</span> and <span style="font-family: Courier New,Courier,monospace;">max</span>: these define the minimum and the maximum size of a part.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span>: these specify the relative position of a part.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">align</span>: this relates to the alignment of the part in the parent&#39;s object.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">fixed</span>: this defines if the part has a fixed size.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note"><span style="font-family: Courier New,Courier,monospace;">fixed</span> parameter can only be used on <span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span> type parts. Setting this parameter to <span style="font-family: Courier New,Courier,monospace;">fixed: 1 1</span> will not take into account the part for the calculation of the global size.</td>
-</tr>
-</tbody>
-</table> 
-
-<h2 id="hint" name="hint">Using Edje Size Hints</h2>
-
-<p>Any <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> can have hints, so that the object knows how to properly position and resize. Edje uses these hints when swallowing an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> to position and resize it in the <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part of the EDC file.</p>
-
-<p>Size hints are not a size enforcement, they just tell the parent object the desired size for this object. Then, the parent tries to get as close as possible to the hint.</p>
-
-<p>Hints are set in an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> using the <span style="font-family: Courier New,Courier,monospace;">evas_object_size_hint_*()</span> functions.</p>
-
-<h3 id="min_size_hint" name="min_size_hint">Min Size Hint</h3>
-
-<p>This sets the hints for the object&#39;s minimum size, given in pixels.</p>
-
-<p>Here the horizontal and vertical min size hints of an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> are set to 0 pixels.</p>
-
-<pre class="prettyprint">
-Evas_Object *object;
-evas_object_size_hint_min_set(object, 0, 0);
-</pre>
-
-<h3>Max Size Hint</h3>
-
-<p>This sets the hints for the object&#39;s maximum size, given in pixels.</p>
-
-<p>Here the horizontal and vertical max size hints of an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> are set to 200 pixels.</p>
-<pre class="prettyprint">evas_object_size_hint_max_set(object, 200, 200);</pre>
-
-<h3>Request Size Hint</h3>
-
-<p>This sets the hints for the object&#39;s optimum size.</p>
-
-<p>The following code example defines that the optimum size of a part is 200x200 pixels.</p>
-
-<h3>Aspect Size Hint</h3>
-
-<p>This sets the hints for the object&#39;s aspect ratio. Available aspect size hints are:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_HORIZONTAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_VERTICAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span></li>
-</ul>
-
-<p>The other parameters are aspect width and height ratio. These integers are used to calculate the proportions of the object. If aspect ratio terms are null, the object&#39;s container ignores the aspect and scale of the object and occupies the whole available area.</p>
-
-<p class="figure">Figure: Aspect control</p> 
-<p align="center"><img alt="Aspect control" src="../../images/aspect-control-none.png" /></p> 
- 
-<p align="center"><img alt="Aspect control" src="../../images/aspect-control-horizontal.png" /></p> 
-
-<p align="center"><img alt="Aspect control" src="../../images/aspect-control-both.png" /></p> 
-
-<p>The following code example sets the aspect size hint to <span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span> with a width of 100 and a height of 200. So aspect ratio should be 1/2.</p>
-
-<pre class="prettyprint">
-evas_object_size_hint_aspect_set(object, EVAS_ASPECT_CONTROL_BOTH, 100, 200);
-</pre>
-
-<h3 id="align_size_hint" name="align_size_hint">Align Size Hint</h3>
-<p>This sets the hints for the object&#39;s alignment. This hint is used when the object size is smaller than its parent&#39;s. The special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter uses maximum size hints with higher priority, if they are set. Also, any padding hints set on objects are added up to the alignment space on the final scene composition.</p>
-
-<p class="figure">Figure: Alignment</p> 
-<p align="center"><img alt="Alignment" src="../../images/align_hints.png" /></p> 
-
-<p>In the code below, the special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter is used.</p>
-
-<pre class="prettyprint">
-evas_object_size_hint_align_set(object, EVAS_HINT_FILL, EVAS_HINT_FILL);
-</pre>
-
-<h3>Weight Size Hint</h3>
-
-<p>This sets the hints for the object&#39;s weight. The weight tells to a container object how the given child is resized. Using <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_EXPAND</span> parameter asks to expand the child object&#39;s dimensions to fit the container&#39;s own.</p> 
-
-<p>When several child objects have different weights in a container object, the container distributes the space it has to layout them by those factors. Most weighted children get larger in this process than the least ones.</p> 
-
-<p>Here the container is asked to expand the object in both directions.</p> 
-
-<pre class="prettyprint">
-evas_object_size_hint_weight_set(object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-</pre>
-
-<h3>Padding Size Hint</h3>
-
-<p>This sets the hints for the object&#39;s padding space. Padding is extra space an object takes on each of its delimiting rectangle sides. The padding space is rendered transparent. Four hints can be defined, for the left, right, top, and bottom padding.</p>
-
-<p class="figure">Figure: Padding</p> 
-<p align="center"><img alt="Padding" src="../../images/padding-hints.png" /></p> 
-
-<p>Here the padding hints are set to 5 pixels on each side of the object.</p>
-
-<pre class="prettyprint">
-evas_object_size_hint_padding_set(object, 5, 5, 5, 5);
-</pre>
-
-
-<h2 id="Swallow" name="Swallow">Edje Swallow</h2>
-
-<p>The parent of all layout components is Edje. Edje as explained in the <a href="edc_part_block_n.htm#edje_block">Edje Blocks</a> is a library which convert edc files into Evas object. EDC is a description language. It means that the objects of interface are described by using text description. One of its main features is the possibility to create &quot;Swallows&quot; objects. When this kind of object is added in an Evas, it contains any other <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>. To create a swallow part, create first the EDC file: </p>
-
-<pre class="prettyprint">
-collections
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;container&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;part.swallow&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 31 31;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -32 -32;
-&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;}
-}
-</pre>
-
-<p>This EDC describes a group named &quot;container&quot;, with one part inside of type SWALLOW and with the name <span style="font-family: Courier New,Courier,monospace;">part.swallow</span>. This part is centered inside the parent (it is the default behavior) but there are 32 pixels free all around this part. Use <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> to compile the EDC file into a binary EDJ file: </p>
-
-<pre class="prettyprint">
-edje_cc -o container.edj container.edc
-</pre>
-
-<p>Create an Edje object and load this file: </p>
-
-<pre class="prettyprint">
-edje = edje_object_add(evas_object_evas_get(parent));
-edje_object_file_set(edje, &quot;container.edj&quot;, &quot;container&quot;);
-</pre>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note"><span style="font-family: Courier New,Courier,monospace;">edje_object_add</span> as opposed as all elementary object, does not take an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> as a parent. Give it the Evas on which the object is added. As the parent is already added on an Evas by elementary, retrieve a reference on it by using the <span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get()</span> function.</td>
-</tr>
-</tbody>
-</table> 
-
-<p><span style="font-family: Courier New,Courier,monospace;">edje_object_file_set</span> is used to set the Edje file from which the object is loaded. The object itself is the name of the group as defined in the EDC file, in this case it is &quot;container&quot;.</p>
-
-<p>Use the API <span style="font-family: Courier New,Courier,monospace;">edje_object_swallow</span> to swallow any kind of <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> inside. </p>
-
-<pre class="prettyprint">
-ic = elm_icon_add(parent);
-elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
-edje_object_part_swallow(edje, &quot;part.swallow&quot;, ic);
-</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;">elm_image_file_set()</span> function parameters are linked to Edje. The second argument in this example is a PNG file; however, it can also be an Edje file. In that case, the third argument must be the Edje group to load, exactly as previously shown with the <span style="font-family: Courier New,Courier,monospace;">edje_object_file_set()</span> function.</td>
-</tr>
-</tbody>
-</table> 
-
-<p>Create complex layout for your application with Edje. It is may not be the most easy way, but it is the most powerful. This Edje layout is used all around elementary and is the basis of the layout component.</p>
-
-<h2 id="Layout" name="Layout">ELM Layout</h2>
-
-<p>Layout is a container component. For the basic use of the <span style="font-family: Courier New,Courier,monospace;">elm_layout</span> with a default style, see <a href="containers_n.htm#layout">Layout</a>. Elm layout takes a standard Edje design file and wraps it in a UI component. Layouts are the basis of graphical UI components which are used in Elementary.</p>
-
-<h3>Adding Layout</h3>
-
-<p>Create a new elementary layout using <span style="font-family: Courier New,Courier,monospace;">elm_layout_add</span>:</p>
-
-<pre class="prettyprint">
-Evas_Object *layout;
-layout = elm_layout_add(parent);
-</pre>
-
-<p>As for Edje swallows, load an Edje file. Create first an Edje file, that contains a black rectangle and an icon in the center. </p>
-
-<pre class="prettyprint">
-images
-{
-&nbsp;&nbsp;&nbsp;image: &quot;c1.png&quot; COMP;
-}
-
-collections
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;my_layout&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;background&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT; description 
-&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;state: &quot;default&quot; 0.0; color: 0 0 0 255; 
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;background&quot;; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 31 31; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -32 -32; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default.image: &quot;c1.png&quot;; 
-&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;} 
-}
-</pre>
-<p>Compile it with <span style="font-family: Courier New,Courier,monospace;">edje_cc -o edje_example.edj edje_example.edc</span>.</p>
-<p>This file can be loaded with <span style="font-family: Courier New,Courier,monospace;">elm_layout_file_set</span>: </p>
-
-<pre class="prettyprint">
-elm_layout_file_set(layout, &quot;edje_example.edj&quot;, &quot;my_layout&quot;);
-</pre>
-
-<p>The layout component may contain as many parts/children as described in its theme file (EDC). Some of these children can have special types:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> (content holder)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOX</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span></li>
-</ul>
-
-<p>Only one object can be added to a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>. The <span style="font-family: Courier New,Courier,monospace;">elm_layout_content_set()/get/unset</span> functions are used to manage objects in a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part. After being set to this part, the object&#39;s size, position, visibility, clipping and other description properties are controlled by the description of the given part (inside the Edje theme file).</p>
-
-<p>The BOX layout can be used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_box_*()</span> set of functions. It is very similar to the <span style="font-family: Courier New,Courier,monospace;">elm_box</span> component but the BOX layout&#39;s behavior is completely controlled by the Edje theme. The TABLE layout is like the BOX layout, the difference is that it is used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_table_*()</span> set of functions.</p>
-
-<h3>Signals</h3>
-<p>Elm can send Edje signals to the EDC part by using the <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_emit</span>. You can also use <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_callback_add</span> to receive signals.</p>
-
-<p>Use the following code to listen to any signals sent by the layout: </p>
-
-<pre class="prettyprint">
-elm_layout_signal_callback_add(layout, &quot;*&quot;, &quot;*&quot;, _signal_cb, NULL);
-
-static void _signal_cb(void *data, Evas_Object *obj, const char *emission, const char *source)
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;Info received from layout : %s %s\n&quot;, emission, source);
-}
-</pre>
-
-<p>For more details on this, see the <a href="event_types_n.htm#events_guide_edje_with_layout">section on edje signals and layouts</a>.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/edje_animation_n.htm b/org.tizen.ui.guides/html/native/efl/edje_animation_n.htm
deleted file mode 100755
index 3a64886..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_animation_n.htm
+++ /dev/null
@@ -1,535 +0,0 @@
-<!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>Edje Animations</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-				<li><a href="#Animating_Rectangle">Animating a Rectangle</a></li>
-				<li><a href="#Actions">Actions</a></li>
-				<li><a href="#Transitions">Transitions</a></li>
-				<li><a href="#Chaining">Chaining Edje Programs</a></li>
-				<li><a href="#Playing_Signals">Playing on Signals</a></li>
-				<li><a href="#Rotate">Rotating with Edje</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Mobile Wearable</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Edje Animations</h1> 
-
-<p>One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> can create predefined animations, but you can also use the Edje library to create your own animations.</p>
-  
-<p>The Edje animations are based on a very simple principle: going from one state to another. If you want to animate something with Edje, you must define two states and move from the first state to the second.</p>
-
-<h2 id="Animating_Rectangle" name="Animating_Rectangle">Animating a Rectangle</h2>
-
-<p>This example shows how to animate a rectangle. It is positioned in the top left corner of the window and is moved to the bottom right corner in five seconds. To do that with Edje, define a <span style="font-family: Courier New,Courier,monospace;">part</span> called &quot;rectangle&quot; with the <span style="font-family: Courier New,Courier,monospace;">type RECT:</span> this part has two descriptions (or states). In the first state, the rectangle is in is the top left corner. In the second state, it is in is the bottom right corner. To create the transition, set this EDC code for Edje to switch the object from its current state to another.</p>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.3 0.1;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.7 0.9;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&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;programs 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The &quot;rectangle&quot; part has two descriptions that share the same name, but have a different &quot;version&quot;.</p>
-
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.5;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The program defines when and how to move from one state to another. A program is called upon reception of a signal from a source. Here the program is called when the signal load is received from any source.</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-}
-</pre>
-
-<p>An action is performed upon the signal reception. In this example, the state is changed.</p>
-
-<pre class="prettyprint">
-action: STATE_SET &quot;default&quot; 0.5;
-</pre>
-
-<p>The program has a target, here the &quot;rectangle&quot;.</p>
-
-<pre class="prettyprint">
-target: &quot;rectangle&quot;;
-</pre>
-
-<p>The program uses a transition to perform the action.</p>
-
-<pre class="prettyprint">
-transition: LINEAR 5;
-</pre>
-
-<p>This example produces a blue rectangle that moves from the upper left to the lower right corner with a linear transition in five seconds.</p>
-
-<h2 id="Actions" name="Actions">Actions</h2>
-
-<p>The Edje programs are not only for animations. There are different actions, for example <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> and <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>. You may also send signals with <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action changes the state of the &quot;target&quot;.</p>
-
-<p>In the following example, the state of the part named &quot;image&quot; changes to &quot;default&quot; &quot;0.0&quot;.</p>
-
-<pre class="prettyprint">
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;animate&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;animate&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 3.0;
-&nbsp;&nbsp;&nbsp;target: &quot;image&quot;;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span> stops the program specified by &quot;target&quot;.</p>
-
-<pre class="prettyprint">
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;animate_stop&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;animate_stop&quot;;
-&nbsp;&nbsp;&nbsp;action: ACTION_STOP;
-&nbsp;&nbsp;&nbsp;target: &quot;animate_loop&quot;;
-}
-</pre>
-
-<p>The previous example stops the program defined as &quot;target&quot; named <span style="font-family: Courier New,Courier,monospace;">animate_loop</span>. This program runs on the <span style="font-family: Courier New,Courier,monospace;">animate_stop</span> signal.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span> emits a signal that is used to communicate with the application directly from the theme.</p>
-
-<p>The following example emits a signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> &quot;start&quot; when it receives the signal <span style="font-family: Courier New,Courier,monospace;">mouse,down,*</span> from the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part. In other words, it sends the signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> &quot;start&quot; when the mouse is pressed in the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part.</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;video_move_start&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,down,*&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;video_mover&quot;;
-&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;frame_move&quot; &quot;start&quot;;
-}
-</pre>
-
-<h2 id="Transitions" name="Transitions">Transitions</h2>
-
-<p>The transitions available are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span>: makes a linear transition and takes the duration in seconds as the parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span>: makes a sinusoidal transition and takes the duration in seconds as the parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span>: makes an accelerated transition and takes the duration in seconds as the parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span>: makes a decelerated transition and takes the duration in seconds as the parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span>: makes an accelerated transition and takes the duration and the factor as the parameters</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span>: makes a decelerated transition and takes the duration and the factor as the parameters</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span>: makes a sinusoidal transition and takes the duration and the factor as the parameters</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span>: takes 3 parameters:
-	<ul>
-		<li>the duration</li>
-        <li>the initial gradient start (0.0 is horizontal, 1.0 is diagonal (linear), 2.0 is twice the gradient of linear, and so on)</li>
-        <li>an integer factor that defines how much the value swings outside the gradient to come back to the final resting spot at the end. 0.0 for the third parameter is equivalent to linear interpolation. Note that DIVIS may exceed 1.0.</li>
-	</ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>: makes a bounce transition and takes 3 parameters:
-	<ul>
-        <li>the duration</li>
-        <li>how much the bounce decays, with 0.0 giving linear decay per bounce, and higher values giving more decay</li>
-        <li>the number of bounces (rounded down to the nearest integer value)</li>
-	</ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SPRING</span>: makes a spring transition and takes 3 parameters:
-	<ul>
-        <li>the duration</li>
-        <li>the decay, with the level exceeding 1.0 on the outer swings</li>
-        <li>the number of spring swings</li>
-	</ul>
-</li>
-</ul>
-
-<p>There are graphical representations of these effects in the <span style="font-family: Courier New,Courier,monospace;">Ecore_Evas</span> section above.</p>
-
-<h2 id="Chaining" name="Chaining">Chaining Edje Programs</h2>
-
-<p>To define a couple of Edje programs and chain them, we can, for example, create a program to make the rectangle return to its initial state with another transition (such as <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>).</p>
-
-<p>Use the statement <span style="font-family: Courier New,Courier,monospace;">after</span> in the first <span style="font-family: Courier New,Courier,monospace;">program</span>. <span style="font-family: Courier New,Courier,monospace;">after</span> takes the name of the transition to run when the program is done.</p>
-
-<pre class="prettyprint">
-after: &quot;animation,state0&quot;;
-</pre>
-
-<p>This is how to add the bounce animation. To return the blue rectangle to its initial position with a <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> transition: it bounces with a factor of 1.8, six times. This program is only to be used at the end of the first one, so it does not have any signal statement.</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,state0&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;transition: BOUNCE 5 1.8 6;
-}
-</pre>
-
-<h2 id="Playing_Signals" name="Playing_Signals">Playing on Signals</h2>
-
-<p>The programs start when they receive a signal from a source. Edje handles many kind of signals, including mouse events.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">To show the signals, use <span style="font-family: Courier New,Courier,monospace;">edje_player -p myfile.edj</span>.</td>
-</tr>
-</tbody>
-</table> 
-
-<p>For example, in another transition the rectangle is left clicked. The corresponding signal name is <span style="font-family: Courier New,Courier,monospace;">mouse,clicked,1</span>.</p>
-
-<p>For this transition, define a new state. This state changes the color and the position of the rectangle.</p>
-
-<pre class="prettyprint">
-// To be placed in the &quot;part&quot; definition
-description 
-{ 
-&nbsp;&nbsp;&nbsp;state: &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.3;}
-&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.4;}
-&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-}
-</pre>
-
-<p>The program is as follows:</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;transition: SIN 2;
-}
-</pre>
-
-<p>This starts when the rectangle is left clicked.</p>
-
-<p>If you want to send a signal from your application when you use signals to start transitions, create a program waiting for your own special signal. For example:</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side,hide&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;hide,sidemenu&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-}
-</pre>
-
-<p>This program changes the state of the target named <span style="font-family: Courier New,Courier,monospace;">animation,menu_side,hide</span> to <span style="font-family: Courier New,Courier,monospace;">&quot;default&quot; 1.0</span>. It waits for the <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> signal emitted by a source called <span style="font-family: Courier New,Courier,monospace;">MenuButton</span>.</p>
-
-<pre class="prettyprint">
-edje_object_signal_emit(layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
-</pre>
-
-<p>This statement sends a signal named <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> with a source named <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> to the object called <span style="font-family: Courier New,Courier,monospace;">layout</span>.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit</span> function emits a signal on an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> part of the application.</p>
-
-<pre class="prettyprint">
-edje_object_signal_emit(Evas_Object *obj,
-&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 *emission,
-&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 *source)
-</pre>
-
-<ul>
-<li>The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>, which emits the signal (<span style="font-family: Courier New,Courier,monospace;">layout</span> in the example).</li>
-<li>The second parameter is the <span style="font-family: Courier New,Courier,monospace;">emission</span> string (the name of the signal <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> in the example).</li>
-<li>The third parameter is the <span style="font-family: Courier New,Courier,monospace;">source</span> of the signal (the name of the source, <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> in the example).</li>
-</ul>
-
-<p>If you use the Elementary in the application, you can use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span>. It functions exactly the same way as <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit</span> and takes the same parameters.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">To find a complete example, use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span> in <a href="menu_tutorial_mn.htm">Creating Mobile Menus</a>.</td>
-</tr>
-</tbody>
-</table> 
-
-<h2 id="Rotate" name="Rotate">Rotating with Edje</h2>
-
-<p>The Edje library allows you to rotate objects, using the <span style="font-family: Courier New,Courier,monospace;">map</span> statement. For example, if you want to rotate the blue rectangle on a right click, you must define a new rotate state. To enable the <span style="font-family: Courier New,Courier,monospace;">map</span> on you object you must add a <span style="font-family: Courier New,Courier,monospace;">map</span> part to your default state.</p>
-
-<pre class="prettyprint">
-map 
-{
-&nbsp;&nbsp;&nbsp;on: 1;
-&nbsp;&nbsp;&nbsp;smooth: 1;
-&nbsp;&nbsp;&nbsp;perspective_on: 1;
-&nbsp;&nbsp;&nbsp;rotation.x: 0;
-&nbsp;&nbsp;&nbsp;rotation.y: 0;
-&nbsp;&nbsp;&nbsp;rotation.z: 0;
-}
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">on</span>: 1; enables the map on the object</li>
-<li><span style="font-family: Courier New,Courier,monospace;">perspective_on</span>: 1, enables the perspective when rotating, even without a perspective point object</li>
-<li><span style="font-family: Courier New,Courier,monospace;">smooth</span>: 1; enables a smooth map rendering</li>
-<li>The rotation statements define the default rotation of the object on x, y, and z axes.</li>
-</ul>
-
-<p>To add a new rotate state with a rotation around any axis, do the following.</p>
-
-<pre class="prettyprint">
-description 
-{ 
-&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;map.rotation.z: 120;
-}
-</pre>
-
-<p>This rotate state inherits all the default state properties, but changes the value of <span style="font-family: Courier New,Courier,monospace;">map.rotation.z</span> from 0&deg; to 120&deg;.</p>
-
-<p>To set a program to run the rotate state, do the following.</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,rotate&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,3&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;transition: LIN 5;
-}
-</pre>
-
-<p>This program runs on a right click on the rectangle object.</p>
-
-<p>The complete code of this example is as follows.</p>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.3 0.1;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map 
-&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;on: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
-&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;z: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 0;
-&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;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.7 0.9;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.3;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.4;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map.rotation.z: 120;
-&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;programs 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,state0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: BOUNCE 2 1.8 26;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SIN 2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,rotate&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LIN 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edje_animation_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/edje_animation_tutorial_n.htm
deleted file mode 100755
index aa85f96..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_animation_tutorial_n.htm
+++ /dev/null
@@ -1,377 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Edje Animations</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#startup">Animating on Application Start-up</a>
-			</li>
-			<li><a href="#click">Animating Object on Click</a>
-			</li>
-		</ul>	
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">		
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Mobile Wearable</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Edje Animations</h1>
-
-  
-<p>One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> can create pre-defined animations, but you can also use the Edje library to create your own animations.</p>
-
- <h2 id="startup" name="startup">Animating on Application Start-up</h2>
-
-
-<p>The goal of this tutorial is to create an animation target and buttons to start animations, all this in an EDC (Edje Data Collection) file.</p>
-<p>First create an application using Basic EDC UI Application. This model provides a simple application just like the one used in the previous chapter, but with one more element: an <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
-<p>Animations can be run at application startup. By default the Basic EDC UI Application model produces an empty window with a title. In this example a Tizen logo is added to the window and the behavior of the window title is changed.</p>
-<p>The images used by the Edje file are stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> directory of the application. Copy the Tizen logo available in <span style="font-family: Courier New,Courier,monospace">shared/res/&lt;yourapplicationname&gt;.png</span> into the Edje image directory <span style="font-family: Courier New,Courier,monospace">edje/images</span>. Then add the image to the Edje images collection.</p>
-<pre class="prettyprint">images 
-{
-&nbsp;&nbsp;&nbsp;image: &quot;edceffects.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;image: &quot;tizen-logo.png&quot; COMP;
-}
-</pre>
-
-<p>Then add an Edje part using the small logo: this part has two states. This is the first important notion for animations. The <span style="font-family: Courier New,Courier,monospace">STATE</span> describes the appearance of a part: size, position, color, etc.</p>
-<p>In this example, the part has two states, default and down-state:</p>
-<pre class="prettyprint">// An image using the tizen logo
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;logo&quot;;
-&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 63 63;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 63 63;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image { normal: &quot;small-logo.png&quot;; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.1 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;down-state&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.1 0.92;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.05 1.0;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre><p>The logo part has the <span style="font-family: Courier New,Courier,monospace">IMAGE</span> type. The default state contains in the first description of the part sets:</p>
-<ul>
-<li>the maximum and minimum size using the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> statements</li>
-<li>the image to use in this <span style="font-family: Courier New,Courier,monospace">part</span></li>
-<li>the default position.</li>
-</ul>
-<p>The second state, down-state, inherits all of the default&#39;s attributes, and only changes the position to put the image at the bottom of the application window.</p>
-<p>These two states are the start and end states of the animation. To actually create the animation, add a <span style="font-family: Courier New,Courier,monospace">program</span> to the Edge <span style="font-family: Courier New,Courier,monospace">programs</span> collection.</p>
-<pre class="prettyprint">// Icon drop animation
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;down-state&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;logo&quot;;
-&nbsp;&nbsp;&nbsp;transition: BOUNCE 2.5 0.0 5.0;
-}
-</pre><p>This program is named <span style="font-family: Courier New,Courier,monospace">animation,state1</span> and is started when the application receives the <span style="font-family: Courier New,Courier,monospace">load</span> signal immediately on startup. It runs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action so it changes the object state from default to down-state. The target of the program is the logo <span style="font-family: Courier New,Courier,monospace">part</span>.</p>
-<p>In order to switch from one state to another, it uses a <span style="font-family: Courier New,Courier,monospace">transition</span> of the <span style="font-family: Courier New,Courier,monospace">BOUNCE</span> type with 3 parameters, the <span style="font-family: Courier New,Courier,monospace">bounce_decay</span>, the <span style="font-family: Courier New,Courier,monospace">number_of_bounces</span>, and the duration which here is set to five seconds.</p>
-<p>This produces an falling and bouncing effect.</p>
-<p>Also add an animation for the window title to make it move from the left to the right with a bounce effect while growing the font size.</p>
-<p>Create a new state on the part called &quot;txt_title&quot; inside which both the font size and position are changed.</p>
-<pre class="prettyprint">part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;txt_title&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;mouse_events: 0;
-
-&nbsp;&nbsp;&nbsp;// The default State
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.0 0.0; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.0 0.0; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 24;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// The &quot;Bigger&quot; state
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;Bigger&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.75 0.0; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.0 0.0; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 28;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p>Create a program to animate this part on startup, just like the small Tizen logo.</p>
-<pre class="prettyprint">// Make the title bigger
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,bigtitle&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;Bigger&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;txt_title&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 5.0;
-}
-</pre>
-<p>This program goes from the default state to the bigger state in five seconds with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> effect, automatically running on the application startup.</p>
-
- <h2 id="click" name="click">Animating Object on Click</h2>
-
-<p>All the previous animations are automatic and do not have any relation with the user&#39;s actions. Next animate a part by clicking on another one. Make the title restore its default aspect when clicking on the small logo.</p>
-<p>The parts and the states are already defined. The animation goes back to the default state, there is no need to add any parts or states: only add a program which makes the transition when clicking on logo part.</p>
-<pre class="prettyprint">// Make the title go back to normal
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;animation,normaltitle&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;logo&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;txt_title&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.5;
-}
-</pre><p>This program starts when the application receives the signal <span style="font-family: Courier New,Courier,monospace">mouse,clicked,*</span> (any button of the mouse is clicked) from the part called logo, (<span style="font-family: Courier New,Courier,monospace">source</span>). It performs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action and sets the default state on the target <span style="font-family: Courier New,Courier,monospace">txt_file</span> part with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> transition.</p>
-<p>When clicking any mouse button on the small logo, the title goes back to its original state.</p>
-<h3>Rotating Parts</h3>
-<p>Next add two more buttons to the application and create programs to animate a target.</p>
-<p>It is possible to create a button with Edje from scratch, but to save time, the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is used in this example to store Elementary UI components.</p>
-<p>First create the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts, and then the <span style="font-family: Courier New,Courier,monospace">Elementary</span> UI components in the <span style="font-family: Courier New,Courier,monospace">.c</span> file.</p>
-<pre class="prettyprint">// Container for the rotate button
-part 
-{
-&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;name: &quot;btn/rotate&quot;;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.10 0.80;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.30 0.90;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre><p>This part is called <span style="font-family: Courier New,Courier,monospace">btn/rotate</span>, it only has a <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> type and a default state with its position being on the bottom left of the screen.</p>
-<pre class="prettyprint">// Container for the grow button
-part 
-{
-&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;name: &quot;btn/grow&quot;;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.02 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;btn/rotate&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 2.02 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;btn/rotate&quot;;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre><p>This second <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is very similar to the first one. It is placed relatively to <span style="font-family: Courier New,Courier,monospace">btn/rotate</span>, in order to remain next to it.</p>
-<p>Next create the actual UI components. This is done in the <span style="font-family: Courier New,Courier,monospace">.c</span> file and is very similar to what is done for the buttons in the first chapter.</p>
-<p>This code is added to the <span style="font-family: Courier New,Courier,monospace">create_base_ui</span> function.</p>
-<pre class="prettyprint">// Creation button in the app window
-ad-&gt;button = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;button, &quot;Rotate&quot;);
-// Add the button to the edje layout container called &quot;btn/rotate&quot;
-elm_object_part_content_set(ad-&gt;layout, &quot;btn/rotate&quot;, ad-&gt;button);
-evas_object_show(ad-&gt;button);
-
-// Creation a up button in the app window
-ad-&gt;btn_up = elm_button_add(ad-&gt;win);
-// Add the button to the edje layout container called &quot;btn/grow&quot;
-elm_object_text_set(ad-&gt;btn_up, &quot;Grow&quot;);
-elm_object_part_content_set(ad-&gt;layout, &quot;btn/grow&quot;, ad-&gt;btn_up);
-evas_object_show(ad-&gt;btn_up);
-</pre><p>In the default Basic EDC UI Application, the Edje layout is loaded by default. Create two Elementary buttons and add them to the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> containers, without having to setup sizes or positions as this is done in the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> container.</p>
-<p>Note that the part name is very important because it is used to be merged the Elementary UI component and the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part.</p>
-<p>When the buttons placed and set, create the animation target. it is done in the EDC file.</p>
-<p>Add the animation target part.</p>
-<p>The part initialization and the default <span style="font-family: Courier New,Courier,monospace">state</span>:</p>
-<pre class="prettyprint">// The animation target
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;type: IMAGE;
-
-&nbsp;&nbsp;&nbsp;// Default state
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image { normal: &quot;tizen-logo.png&quot;; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255; // red
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.3 0.3; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.7 0.4; }
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p>This <span style="font-family: Courier New,Courier,monospace">part</span> is an image displaying a big Tizen logo, placed on the top of the screen more or less centered.</p>
-<p>Create a state to change the color and add the <span style="font-family: Courier New,Courier,monospace">map</span> statement.</p>
-<pre class="prettyprint">// The rotate state
-description 
-{
-&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-
-&nbsp;&nbsp;&nbsp;map 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable Map on the part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable smooth rendering
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable perspective
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Apply rotations on the part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.x: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.y: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.z: 0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;color: 0 255 0 255; // green
-}
-</pre><p>This part changes the color to green and defines the <span style="font-family: Courier New,Courier,monospace">map</span>. This statement makes rotations possible on an Edje <span style="font-family: Courier New,Courier,monospace">part</span>. Rotations are done around the x, y or z axes. In this example, the map is enabled and a 0&#176; rotation is applied around each axis.</p>
-<p>Add a state with a rotation around the z axis of 360&#176;.</p>
-<pre class="prettyprint">description 
-{
-&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 1.0;
-&nbsp;&nbsp;&nbsp;inherit: &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;map.rotation.z: 360;
-}
-</pre><p>This <span style="font-family: Courier New,Courier,monospace">state</span> inherits from the default state parameters and add a rotation around the z axis.</p>
-<p>Finally add a state to the other button animation grow. Change the size of the animation target and add an offset.</p>
-<pre class="prettyprint">// The grow state
-description 
-{
-&nbsp;&nbsp;&nbsp;state: &quot;grow&quot; 0.0;
-&nbsp;&nbsp;&nbsp;color: 0 0 255 255; // blue
-&nbsp;&nbsp;&nbsp;rel1 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0.3 0.3;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;rel2 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.7 0.4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0.3 0.3;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre><p>The last step is to create the programs to make all these states animate.</p>
-<p>To make the rotation animation smoother, create and chain several <span style="font-family: Courier New,Courier,monospace">programs</span> with different durations.</p>
-<p>First create the main one: it goes from the default state to the rotate 0.0 state in 0.2 seconds.</p>
-<p>Note that the states are all named the same way (rotate) but not with the same version. This version allows you to have more than one state with the same name, in fact the actual name of the state is the name plus the version.</p>
-<pre class="prettyprint">// Change the color of target to green
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;rotate,target&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;btn/rotate&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;transition: SIN 0.2;
-&nbsp;&nbsp;&nbsp;after: &quot;rotate,target,2&quot;;
-}
-</pre><p>The program starts when the <span style="font-family: Courier New,Courier,monospace">btn/rotate</span> part is clicked with any mouse button. When the animation ends, it calls the next one called <span style="font-family: Courier New,Courier,monospace">rotate,target,2</span>.</p>
-<pre class="prettyprint">// Rotate 360&#176;
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;rotate,target,2&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;transition: SIN 0.7;
-&nbsp;&nbsp;&nbsp;after: &quot;rotate,end&quot;;
-}
-</pre><p>This program sets the part state to <span style="font-family: Courier New,Courier,monospace">rotate 1.0</span> in 0.7 seconds, and when done calls the next one <span style="font-family: Courier New,Courier,monospace">rotate,end</span>.</p>
-<pre class="prettyprint">// Go back to the normal
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;rotate,end&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-}
-</pre><p><span style="font-family: Courier New,Courier,monospace">rotate,end</span> is the last program of the rotation effect: it sets the state to <span style="font-family: Courier New,Courier,monospace">rotate 0.0</span> very fast.</p>
-<p>The last program of this example is the grow effect, it switches from one state to another.</p>
-<pre class="prettyprint">// Grow the target and go back to normal state
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;grow,target&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;btn/grow&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;grow&quot; 1.0;
-&nbsp;&nbsp;&nbsp;after: &quot;go,default&quot;;
-&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
-}
-</pre><p>It starts when the <span style="font-family: Courier New,Courier,monospace">btn/grow</span> part is clicked, it goes from the current state to <span style="font-family: Courier New,Courier,monospace">grow 1.0</span> in one second. It then calls the <span style="font-family: Courier New,Courier,monospace">go,default</span> program. In this program, both size and color change during the transition.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">go,default</span> program sets the status back default for the animation target.</p>
-<pre class="prettyprint">// Go back to normal (default) state
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;go,default&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;transition: SIN 1.0;
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/edje_color_n.htm b/org.tizen.ui.guides/html/native/efl/edje_color_n.htm
deleted file mode 100755
index 48d272a..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_color_n.htm
+++ /dev/null
@@ -1,354 +0,0 @@
-<!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>Using Edje Color Classes</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Using Edje Color Classes</h1>
-
-<p>This tutorial demonstrates how you can change the color of 2 or more parts using Edje color classes.</p>
-<p>If a part is assigned with a color class, setting color values to this class causes all those parts to have their colors multiplied by the values. Setting the values to a color class affects all parts within that color class at process level, while at object level, it only affects the parts inside a specified object.</p>
-
-<p>Create a simple application with a menu and separate screens for each Edje Animation function:</p>
-
-<ol>
-<li>In the Tizen IDE, go to <strong>Tizen Native project &gt; UI application &gt; EDC</strong> and create a new project named <span style="font-family: Courier New,Courier,monospace">colorclass</span>.</li>
-
-<li>Open the <span style="font-family: Courier New,Courier,monospace">colorclass.edc</span> file and replace it with the following code:
-<pre class="prettyprint">color_classes 
-{
-&nbsp;&nbsp;&nbsp;color_class 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;A&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;color_class 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;B&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;color_class 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;C&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 125 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;}
-}
-
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textA&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: OUTLINE_SHADOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;A&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;A:&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 44;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textB&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: OUTLINE_SHADOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;B&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;B:&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 44;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textC&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: OUTLINE_SHADOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;C&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.6;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;C:&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 44;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;A&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.4 0.2;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;B&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.4 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.6 0.4;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;A&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.6 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.2;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect4&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;B&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.8 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.4;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect5&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 125 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;C&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.6 0.4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.6;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect6&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;C&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.8 0.4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.6;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.btn1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.45 1.0;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.btn2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.55 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&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;}
-}</pre>
-
-<p>Setting the color class of a part causes its colors to be multiplied by <span style="font-family: Courier New,Courier,monospace">color_class</span> <span style="font-family: Courier New,Courier,monospace">color</span> values. To see how the color class affects the shadow and outline colors, set those colors as white in the part:</p>
-
-<pre class="prettyprint">color2: 255 255 255 255;
-color3: 255 255 255 255;</pre>
-
-<p>Parts with <span style="font-family: Courier New,Courier,monospace">color_class &quot;C&quot;</span>  have different colors because their base colors are different.</p>
-</li>
-
-<li>Replace the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span>  function with the following code:
-
-<pre class="prettyprint">static void
-btn1_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;edje_color_class_set(&quot;A&quot;, rand()%255, rand()%255, rand()%255, 255,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255);
-}
-static void
-btn2_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;edje_color_class_set(&quot;B&quot;, rand()%255, rand()%255, rand()%255, 255,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255);
-}
-
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
-
-&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;// Base layout
-&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-&nbsp;&nbsp;&nbsp;ad-&gt;layout = elm_layout_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;layout, edj_path, GRP_MAIN);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;layout);
-
-&nbsp;&nbsp;&nbsp;// Buttons
-&nbsp;&nbsp;&nbsp;ad-&gt;btn1 = elm_button_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;swallow.btn1&quot;, ad-&gt;btn1);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;btn1, &quot;clicked&quot;, btn1_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;btn1, NULL, &quot;Change A&quot;);
-&nbsp;&nbsp;&nbsp;ad-&gt;btn2 = elm_button_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;swallow.btn2&quot;, ad-&gt;btn2);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;btn2, &quot;clicked&quot;, btn2_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;btn2, NULL, &quot;Change B&quot;);
-
-&nbsp;&nbsp;&nbsp;// Show the window
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}</pre>
-
-<p>Pressing the <strong>Change A</strong> button changes all colors of all parts with <span style="font-family: Courier New,Courier,monospace">color_class</span>  set as <span style="font-family: Courier New,Courier,monospace">&quot;A&quot; </span> but does not affect other parts. The actual <span style="font-family: Courier New,Courier,monospace">color</span>, <span style="font-family: Courier New,Courier,monospace">color2</span>, and <span style="font-family: Courier New,Courier,monospace">color3</span> values remain unchanged but they are multiplied by values from the color class.</p>
-<p>You can omit the color class declaration in the <span style="font-family: Courier New,Courier,monospace">.edc</span>  file and still use it in parts. There are no visual effects unless you change the color class in the code. For example, you can comment out the color class <span style="font-family: Courier New,Courier,monospace">&quot;B&quot;</span>  and see what happens when you press the <strong>Change B</strong> button.</p>
-</li>
-
-<p class="figure">Figure: Edje colorclass application</p> 
-<p align="center"><img alt="Edje colorclass application" src="../../images/edje_color.png" /></p>
-
-</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>
diff --git a/org.tizen.ui.guides/html/native/efl/edje_files_n.htm b/org.tizen.ui.guides/html/native/efl/edje_files_n.htm
deleted file mode 100755
index 55b54b3..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_files_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">
-<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>Handling Edje Files</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-		<li><a href="#init">Initializing the Application</a></li>
-		<li><a href="#load">Loading the Collection List from an EDJ File</a></li>
-		<li><a href="#create">Creating an Edje Object</a></li>
-		</ul>	
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Handling Edje Files</h1>
-
-<p>This tutorial demonstrates how you can manage EDJ files. An EDJ file is a specific eet file that collects layouts. The Edje layout is called <span style="font-family: Courier New,Courier,monospace">Style</span> and created using the <a href="edc_part_block_n.htm">EDC language</a>. The file that contains the layout collection called <span style="font-family: Courier New,Courier,monospace">Theme</span>. </p>
-
-<h2 id="init" name="init">Initializing the Application</h2>
-
-<p>The following example shows a typical Elementary application that creates a window entitled <span style="font-family: Courier New,Courier,monospace">Genlist Basic Tutorial</span>. It is consisted of a conformant widget that contains a naviframe widget. The genlist goes inside the naviframe.</p>
-
-<pre class="prettyprint">static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
-
-&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, ad);
-
-&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;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;navifr = elm_naviframe_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;navifr);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;navifr, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Genlist
-&nbsp;&nbsp;&nbsp;ad-&gt;itc = elm_genlist_item_class_new();
-&nbsp;&nbsp;&nbsp;ad-&gt;itc-&gt;func.text_get =_genlist_item_text_get;
-
-&nbsp;&nbsp;&nbsp;ad-&gt;genlist = elm_genlist_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;genlist);
-
-&nbsp;&nbsp;&nbsp;// Show window after base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-
-static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;// Initialize UI resources and application data
-&nbsp;&nbsp;&nbsp;// If this function returns true, the main loop of application starts
-&nbsp;&nbsp;&nbsp;// If this function returns false, the application is terminated
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}</pre>
-
-<p>Declare the <span style="font-family: Courier New,Courier,monospace">struct appdata</span>:</p>
-
-<pre class="prettyprint">typedef struct appdata
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;Evas_Object *navifr;
-&nbsp;&nbsp;&nbsp;Evas_Object *genlist;
-&nbsp;&nbsp;&nbsp;Eina_List *list;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
-} 
-appdata_s;</pre>
-
-<h2 id="load" name="load">Loading the Collection List from an EDJ File</h2>
-
-<p>Edje provides the functionality to manipulate the EDJ files. First, get the list of styles from EDJ file:</p>
- 
-<pre class="prettyprint">// Get the collection list from the EDJ file
-app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-ad-&gt;list = edje_file_collection_list(edj_path);</pre>
-
-<p>When you do not use the collection list, delete it:</p>
-
-<pre class="prettyprint">static void
-win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;// Free the collection list
-&nbsp;&nbsp;&nbsp;edje_file_collection_list_free(ad-&gt;list);
-&nbsp;&nbsp;&nbsp;ui_app_exit();
-}</pre>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The list returned after using the <span style="font-family: Courier New,Courier,monospace">edje_file_collection_list()</span> function must only be deleted using the <span style="font-family: Courier New,Courier,monospace">edje_file_collection_list_free()</span> function.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>Add the item in the genlist to display the list:</p>
-
-<pre class="prettyprint">EINA_LIST_FOREACH(ad-&gt;list, l, str)
-{
-&nbsp;&nbsp;&nbsp;elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, str, NULL, ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);
-}</pre>
-
-
-<h2 id="create" name="create">Creating an Edje Object</h2>
-
-<p>Implement callbacks for the clicked (tapped) event. Check that the required style exists using the <span style="font-family: Courier New,Courier,monospace">edje_file_group_exists()</span> function. The first argument is the path to EDJ file and style name. Create the Edje object and load the given style.</p>
-
-<pre class="prettyprint">static void
-_genlist_clicked(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL;
-&nbsp;&nbsp;&nbsp;const char *str;
-&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
-&nbsp;&nbsp;&nbsp;Evas_Object *edje_object;
-
-&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-&nbsp;&nbsp;&nbsp;eoi = elm_genlist_selected_item_get(obj);
-
-&nbsp;&nbsp;&nbsp;str = elm_object_item_part_text_get(eoi, &quot;elm.text&quot;);
-&nbsp;&nbsp;&nbsp;// Check whether a group matching glob exists in an edje file
-&nbsp;&nbsp;&nbsp;// If there is no matching group
-&nbsp;&nbsp;&nbsp;if (!edje_file_group_exists(edj_path, str)) return;
-
-&nbsp;&nbsp;&nbsp;// Load the given style to the object
-&nbsp;&nbsp;&nbsp;edje_object = edje_object_add(evas_object_evas_get(ad-&gt;win));
-&nbsp;&nbsp;&nbsp;edje_object_file_set(edje_object, edj_path, str);
-&nbsp;&nbsp;&nbsp;// Check object loading errors
-&nbsp;&nbsp;&nbsp;if (edje_object_load_error_get(edje_object) != EDJE_LOAD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(edje_object);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(edje_object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, edje_object);
-}</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>
diff --git a/org.tizen.ui.guides/html/native/efl/edje_intro_n.htm b/org.tizen.ui.guides/html/native/efl/edje_intro_n.htm
deleted file mode 100755
index dd8df7b..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_intro_n.htm
+++ /dev/null
@@ -1,285 +0,0 @@
-<!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>Introduction to EDC Programming</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">	
-			<li><a href="#what">What is an EDC File?</a></li>
-			<li><a href="#compile">Compiling the EDC File</a></li>
-			<li><a href="#simple_edc_file">Writing a Simple EDC File</a></li>
-			<li><a href="#Howtos">Quick How-tos</a></li>
-		</ul>
-		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Introduction to EDC Programming</h1> 
-
-   
-   
-<p>This programming guide shows you how to write an EDC file that can be used to theme a Tizen application. It describes concepts about parts positioning and resizing. It also explains part animations that can be done through programs.</p>
-
-<h2 id="what" name="what">What is an EDC File?</h2>
-
-<p>An EDC file stands for Edje data collection. It is a text file that contains special code format describing the position, size, and other parameters of graphical elements that compose the visual aspect of your application. In addition to graphical elements, it can also handle sounds.</p>
-
-<p>The syntax for the Edje data collection files follows a simple structure of &quot;blocks { .. }&quot; that can contain &quot;properties: ..&quot;, more blocks, or both.</p>
-
-<p>An EDC file has the &quot;.edc&quot; extension.</p>
-
-<h2 id="compile" name="compile">Compiling the EDC File</h2>
-<p>EDC file needs to be compiled into a &quot;.edj&quot; file using Edje library tools. After compiling the &quot;.edj&quot; file can be used by a native Tizen application.</p>
-
-<p>Here is an example about compiling <span style="font-family: Courier New,Courier,monospace;">helloworld.edc</span> to &quot;.edj&quot; file using <span style="font-family: Courier New,Courier,monospace;">edje_cc tool</span>: </p>
-
-<pre class="prettyprint">
-$ edje_cc helloworld.edc
-</pre>
-
-<p>This command creates a <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file.</p>
-
-<p>An EDC file can use external files such as sounds, images, or fonts. The path to these resources are passed to the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool so that they are included in the final &quot;.edj&quot; file. </p>
-
-<pre class="prettyprint">
-$ edje_cc -sd $SOUNDS_DIR -fd $FONTS_DIR -id $IMAGES_DIR
-</pre>
-
-<p><span style="font-family: Courier New,Courier,monospace;">SOUNDS_DIR</span>, <span style="font-family: Courier New,Courier,monospace;">FONTS_DIR</span>, and <span style="font-family: Courier New,Courier,monospace;">IMAGES_DIR</span> are the paths for sounds, fonts, and images resources respectively.</p>
-
-<p>Tizen SDK calls <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> during the project building if it finds an EDC source file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> directory.</p>
-
-<pre class="prettyprint">
-Building file: ../res/edje/helloworld.edc
-Invoking: EDC Resource Compiler
-edje_cc -sd ../edje/sounds -fd ../edje/fonts -id ../edje/images ../res/edje/helloworld.edc ../res/edje/helloworld.edj
-</pre>
-
-
-<p>The Tizen SDK compilation log extract shows you that if your EDC file uses pictures, they must be copied to the <span style="font-family: Courier New,Courier,monospace;">./edje/images</span> directory. Fonts and sounds go to the <span style="font-family: Courier New,Courier,monospace;">./edje/fonts</span> and <span style="font-family: Courier New,Courier,monospace;">./edje/sounds</span> directory respectively. The SDK builds the <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> folder.</p>
-
-<h2 id="simple_edc_file" name="simple_edc_file">Writing a Simple EDC File</h2>
-<p>The code example below shows you the structure of an EDC file. It is a collection of groups that contain parts and programs.</p>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;my_group&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>Groups are identified with a name, parts correspond to the graphical elements. Each one of them can have several states that describe a specific position, size, and visual aspect. Programs contain the program code, such as interaction with the main application through signals. Also animations are defined here (changing a part state using an animated transition).</p>
-
-<p>The description field is where the state of a part is written.</p>
-
-<pre class="prettyprint">
-part
-{
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state1&quot; 0.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>As an example, here is a simple EDC file that contains only one part and one program. The part is a rectangle with blue state and red state, the program changes the state from blue to red when user clicks on the rectangle.</p>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;example&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// create the part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the type to RECT (rectangle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// default state (blue color)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// blue color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// second state (red color)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;red&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// red color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&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;programs 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// create a program
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// program is triggered on mouse click
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the red state of the &quot;rectangle&quot; part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;red&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>A program is triggered when receiving a signal from a specific source (here all the sources are taken into account). When launched, it does the action (changing the state of a part) on the target (the rectangle).</p>
-
-<h2 id="Howtos" name="Howtos">Quick How-tos</h2>
-
-<ul><li>Adding an element on the screen
-<p>Add a new <a href="edc_part_block_n.htm#part_block">part</a> inside the <a href="edc_part_block_n.htm#Parts">parts block</a>.</p></li>
-<li>Using an image
-<p>List the image in the <a href="edc_part_block_n.htm#Images">images block</a>, make sure the <a href="edc_part_block_n.htm#part_block">part</a> has <a href="edc_part_block_n.htm#type">type</a> &quot;IMAGE&quot; and set the <a href="edc_part_block_n.htm#description_image_normal">normal</a> property inside <a href="edc_part_block_n.htm#description_image">description.image</a> of part.</p></li>
-<li>Using the same color definitions across multiple elements
-<p>Define a <a href="edc_part_block_n.htm#Color_classes">color class</a> and set the <a href="edc_part_block_n.htm#description_color_class">description.color_class</a> property.</p></li>
-<li>Positioning or resizing a part (relative and absolute positioning)
-<p>Fill in the <a href="edc_part_block_n.htm#description_rel1_2">rel1 and rel2</a> structures inside the <a href="edc_part_block_n.htm#description">description block</a>.</p></li>
-<li>Hiding a part
-<p>Set the <a href="edc_part_block_n.htm#description_visible">visible property</a> to 0.</p></li>
-<li>Animating a part
-<ol><li><p>Create several <a href="edc_part_block_n.htm#description">description blocks</a> inside your <a href="edc_part_block_n.htm#part_block">part</a> and give each of them a different value for <a href="edc_part_block_n.htm#description_state">state</a>. Set one description for the initial state and one for the end state.</p></li>
-<li><p>Create a <a href="edc_part_block_n.htm#program">program</a> with an <a href="edc_part_block_n.htm#action">action</a> that is <span style="font-family: Courier New,Courier,monospace;">STATE_SET &quot;end_state&quot; 0.0;</span> and with a <a href="edc_part_block_n.htm#target">target</a> that is the <a href="edc_part_block_n.htm#part_name">name</a> of the part. You can also set a non-default <a href="edc_part_block_n.htm#transition">transition</a>.</p></li>
-<li><p>When defining the second <a href="edc_part_block_n.htm#description">description</a>, <a href="edc_part_block_n.htm#description_inherit">inherit</a> from the first part in order to re-use the values which are already defined.</p></li>
-<li><p>The <a href="edc_part_block_n.htm#after">after</a> property of the <a href="edc_part_block_n.htm#program">program block</a> is used to trigger another program after the animation is done. It can be used to trigger another animation or to emit a signal to the C part of the program.</p></li></ol></li>
-<li>Making a genlist item theme
-<p>Create a <a href="edc_part_block_n.htm#group_block">group</a> with one <a href="edc_part_block_n.htm#part">part element</a> for each part that can be filed from the C code and set the <a href="edc_part_block_n.htm#Items">items properties</a> inside the <a href="edc_part_block_n.htm#group_block">group element</a>: </p>
-
-<pre class="prettyprint">
-items: &quot;texts&quot; &quot;text_part_1 text_part_2&quot;;
-items: &quot;icons&quot; &quot;image_part_1 image_part_2&quot;;
-</pre>
-<p>On the C side, the <span style="font-family: Courier New,Courier,monospace;">text_get</span> and <span style="font-family: Courier New,Courier,monospace;">content_get</span> callback are called respectively with <span style="font-family: Courier New,Courier,monospace;">text_part_1</span> and <span style="font-family: Courier New,Courier,monospace;">text_part_2</span>, and <span style="font-family: Courier New,Courier,monospace;">image_part_1</span> and <span style="font-family: Courier New,Courier,monospace;">image_part_2</span>. </p></li>
-
-<li>Using the image masking effect
-<p>EDC files support an image masking effect that applies the transparency of a mask image to a content object.</p>
-
-<p class="figure">Figure: Masking effect</p>
-<p align="center"><img alt="Masking effect" src="../../images/edc_masking.png" /></p>
-
-<p>To use the image masking effect, add 2 new <a href="edc_part_block_n.htm#part_block">parts</a> inside the <a href="edc_part_block_n.htm#Parts">parts block</a> used as a content and mask. Set the mask using the <span style="font-family: Courier New,Courier,monospace;">clip_to</span> keyword in the content part.</p>
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;}
-}
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
-&nbsp;&nbsp;&nbsp;clip_to: &quot;mask&quot;;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style: &quot;text_style&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&lt;br&gt;WITH&lt;br&gt;MASK&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;mask&quot;;
-&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;mask.png&quot;;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p>The content part is cropped off in the mask shape, which depends on the alpha value per pixel. The content part can be almost any <a href="edc_part_block_n.htm#type">type</a> in the EDC files, but the mask part can only be the <span style="font-family: Courier New,Courier,monospace;">IMAGE</span> type.</p>
-</li>
-</ul>
-
- <table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table> 
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edje_manage_animation_n.htm b/org.tizen.ui.guides/html/native/efl/edje_manage_animation_n.htm
deleted file mode 100755
index 23049bf..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_manage_animation_n.htm
+++ /dev/null
@@ -1,728 +0,0 @@
-<!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>Edje Animations</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-		<li><a href="#layout">Creating the Application Layout</a></li>
-		<li><a href="#logic">Creating the Application Logic</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Edje Animations</h1> 
-
-<p>This tutorial demonstrates how you can turn Edje animations on and off, pause, stop and resume them, and check the status of Edje parts.</p>
-
-
-<h2 id="layout" name="layout">Creating the Application Layout</h2>
-
-<p>Create a simple application with a menu and separate screens for each Edje Animation function:</p>
-
-<ol>
-<li>
-<p>Create a simple main layout with a swallow for demo animation and another for controls:</p>
-
-<pre class="prettyprint">collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;demo&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.demo&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.control&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.control&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.0 0.8;
-&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;}
-}
-</pre>
-</li>
-
-<li>
-<p>Create a group for the cycled animation:</p>
-<pre class="prettyprint">group 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;cycled_animation&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 100 100 100 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;clicked&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 200 100 100 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;a&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;relative: 0.3 0.3;
-&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;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;red&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.35 0.7;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;relative: 0.65 1.0;
-&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;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;blue&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.7 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;relative: 1.0 0.3;
-&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;programs 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg_click&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;clicked&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;step1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;red&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;a&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;step2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;step2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;blue&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;a&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;step3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;step3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;a&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;step1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-</li>
-
-<li>
-<p>Create another group for animation that can be activated by clicking:</p>
-<pre class="prettyprint">group 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;clickme&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 100 100 100 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;to: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;to: &quot;text&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;:-)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 42;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;:-D&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_bg2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 200 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;to: &quot;text2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;to: &quot;text2&quot;;
-&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;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 200 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;Click me&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 42;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;Click me&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 42;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;programs 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;clicked&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;text3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;state2&quot; 0.00;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 3.00000;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text_bg2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;return&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;text2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.00;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.00000;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text_bg2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-</li>
-</ol>
-
-<h2 id="logic" name="logic">Creating the Application Logic</h2>
-
-<ol>
-<li>Create new project named <span style="font-family: Courier New,Courier,monospace">test</span>.</li>
-
-<li>Add 2 new files to the application project:<span style="font-family: Courier New,Courier,monospace">edje_animation.h</span> and <span style="font-family: Courier New,Courier,monospace">edje_animation.c</span>.</li>
-<li>To access the application data from the newly created files, move the <span style="font-family: Courier New,Courier,monospace">appdata_s</span> structure from the <span style="font-family: Courier New,Courier,monospace">test.c</span> file to the <span style="font-family: Courier New,Courier,monospace">test.h</span> file and remove the <span style="font-family: Courier New,Courier,monospace">static</span> specifier.</li>
-
-<li>Add the following code to the <span style="font-family: Courier New,Courier,monospace">edje_animation.h</span> file:
-<pre class="prettyprint">#ifndef __edje_animation_H__
-#define __edje_animation_H__
-#include &quot;test.h&quot;
-
-typedef struct _edje_animation_item_s 
-{
-&nbsp;&nbsp;&nbsp;const char *name;
-&nbsp;&nbsp;&nbsp;Evas_Object* (*func)(appdata_s *ap);
-} 
-Edje_Animation_Menu_Item;
-
-#endif // __edje_animation_H__</pre>
-
-<p>This structure will define menu items and their callbacks.</p>
-</li>
-
-<li>
-<p>Create a global menu array in the <span style="font-family: Courier New,Courier,monospace">edje_animation.c</span> file and fill it with necessary items:</p>
-<pre class="prettyprint">Edje_Animation_Menu_Item edje_animation_items[] =
-{
-&nbsp;&nbsp;&nbsp;{&quot;test1&quot;, _test1_func },
-&nbsp;&nbsp;&nbsp;{&quot;test2&quot;, _test2_func },
-
-&nbsp;&nbsp;&nbsp;{NULL, NULL } // Do not delete
-};</pre>
-</li>
-
-<li>
-<p>Use the array to fill the  main menu:</p>
-<pre class="prettyprint">extern Edje_Animation_Menu_Item edje_animation_items[];
-
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Genlist
-&nbsp;&nbsp;&nbsp;ad-&gt;itc = elm_genlist_item_class_new();
-&nbsp;&nbsp;&nbsp;ad-&gt;itc-&gt;func.text_get =_genlist_item_text_get;
-&nbsp;&nbsp;&nbsp;ad-&gt;genlist = elm_genlist_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-
-&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; edje_animation_items[i].name; ++i)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, edje_animation_items[i].name, 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_item_data_set(eoi, (void *)&amp;edje_animation_items[i]);
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-</li>
-
-<li>All examples use the same basic layout:
-<pre class="prettyprint">static void
-app_get_resource(const char *edj_file_in, char *edj_path_out, int edj_path_max)
-{
-&nbsp;&nbsp;&nbsp;char *res_path = app_get_resource_path();
-&nbsp;&nbsp;&nbsp;if (res_path) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  snprintf(edj_path_out, edj_path_max, &quot;%s%s&quot;, res_path, edj_file_in);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  free(res_path);
-&nbsp;&nbsp;&nbsp;}
-}
-
-static void
-_example_layout_create(appdata_s *ad,
-&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 *layout_group,
-&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 *demo_group,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object **layout_out,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object **animation_out)
-{
-&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
-
-&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-
-&nbsp;&nbsp;&nbsp;*layout_out = elm_layout_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_layout_file_set(*layout_out, edj_path, layout_group);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(*layout_out, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-
-&nbsp;&nbsp;&nbsp;*animation_out = edje_object_add(evas_object_evas_get(ad-&gt;win));
-&nbsp;&nbsp;&nbsp;edje_object_file_set(*animation_out, edj_path, demo_group);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(*animation_out, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_layout_content_set(*layout_out, SWALLOW_DEMO, *animation_out);
-&nbsp;&nbsp;&nbsp;evas_object_show(*animation_out);
-}</pre>
-</li>
-
-<li>You can try out the following operations to see how the application works:
-
-<ul>
-<li>Check the time for each frame.
-
-<p>The <span style="font-family: Courier New,Courier,monospace">edje_frametime_get()</span> function allows you to check how much time is elapsed for single frame. This is a value of an internal parameter and not actual frame time. You can change it using the <span style="font-family: Courier New,Courier,monospace">edje_frametime_set()</span> function.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Changing the frame time affects all objects on the same canvas, not only on the given one.</td> 
-    </tr> 
-   </tbody> 
-  </table>
- 
-<p>Use the <span style="font-family: Courier New,Courier,monospace">edje_frametime_get()</span> function and <span style="font-family: Courier New,Courier,monospace">edje_frametime_set()</span> function in the <span style="font-family: Courier New,Courier,monospace">edje_animation.c</span> file:</p>
-<pre class="prettyprint">// edje_frametime_set/get
-static void
-_frametime_test_spinner_changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;edje_frametime_set(elm_spinner_value_get(obj));
-}
-
-Evas_Object *
-frametime_test(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *spinner;
-&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CYCLED_ANIM, &amp;layout, &amp;animation);
-
-&nbsp;&nbsp;&nbsp;spinner = elm_spinner_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_spinner_label_format_set(spinner, &quot;Frame_t: %1.3f&quot;);
-&nbsp;&nbsp;&nbsp;double framerate = edje_frametime_get();
-&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(spinner, 0.001, 2.0);
-&nbsp;&nbsp;&nbsp;elm_spinner_step_set(spinner, 0.005);
-&nbsp;&nbsp;&nbsp;elm_spinner_value_set(spinner, framerate);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(spinner, &quot;changed&quot;, _frametime_test_spinner_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, spinner);
-&nbsp;&nbsp;&nbsp;evas_object_show(spinner);
-
-&nbsp;&nbsp;&nbsp;return layout;
-}
-
-Edje_Animation_Menu_Item edje_animation_items[] =
-{
-&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},
-
-&nbsp;&nbsp;&nbsp;{NULL, NULL}
-};</pre>
-
-<p>The spinner displays the current frame time value and enables changing it. Extreme values (&gt; 0.9) are affecting animation.</p>
-
-<p class="figure">Figure: Displaying the frame time</p> 
-<p align="center"><img alt="Displaying the frame time" src="../../images/show_frametime.png" /></p>
-
-</li>
-
-<li>Pause and resume animation and check its status.
-
-<p>The <span style="font-family: Courier New,Courier,monospace">edje_object_play_set()</span> function allows you to pause or resume animation for a given object. A resumed animation starts from the same point.</p>
-<p>To check whether the animation is paused, use the <span style="font-family: Courier New,Courier,monospace">edje_object_play_get()</span> function.</p>
-
-<pre class="prettyprint">// edje_object_play_set/get
-static void
-_play_test_button_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;
-&nbsp;&nbsp;&nbsp;if (edje_object_play_get(anim))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_play_set(anim, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Play&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_play_set(anim, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Pause&quot;);
-&nbsp;&nbsp;&nbsp;}
-}
-
-Evas_Object *
-play_test(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;
-&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CYCLED_ANIM, &amp;layout, &amp;animation);
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pause&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _play_test_button_cb, animation);
-&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-
-&nbsp;&nbsp;&nbsp;return layout;
-}
-
-Edje_Animation_Menu_Item edje_animation_items[] =
-{
-&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},
-&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;{NULL, NULL}
-};</pre>
-</li>
-
-<li>Stop the animation.
-
-<p>The <span style="font-family: Courier New,Courier,monospace">edje_object_freeze()</span> function allows you to stop animation rendering. This function puts all changes on hold. Successive freezes are nested, requiring an equal number of thaws. Using the <span style="font-family: Courier New,Courier,monospace">edje_object_thaw()</span> function, you can apply all changes immediately.</p>
-
-<pre class="prettyprint">// edje_object_freeze/thaw
-static void
-_freeze_test_button_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;
-&nbsp;&nbsp;&nbsp;static int i = 0;
-&nbsp;&nbsp;&nbsp;if(!i)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = edje_object_freeze(anim);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Thaw&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = edje_object_thaw(anim);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Freeze&quot;);
-&nbsp;&nbsp;&nbsp;}
-}
-
-Evas_Object *
-freeze_test(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;
-&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CYCLED_ANIM, &amp;layout, &amp;animation);
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Freeze&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _freeze_test_button_cb, animation);
-&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-
-&nbsp;&nbsp;&nbsp;return layout;
-}
-
-Edje_Animation_Menu_Item edje_animation_items[] =
-{
-&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},
-&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},
-&nbsp;&nbsp;&nbsp;{&quot;freeze/thaw test&quot;, freeze_test},
-
-&nbsp;&nbsp;&nbsp;{NULL, NULL}
-};</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">edje_freeze()</span> function and <span style="font-family: Courier New,Courier,monospace">edje_thaw()</span> function freeze or thaw all objects in the entire application.</p>
-</li>
-
-<li>Enable and disable the animation.
-
-<p>All transitions in edje programs are ignored and parts go directly to their final states.</p>
-
-<pre class="prettyprint">// edje_object_animation_set/get
-static void
-_animation_test_button_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;
-&nbsp;&nbsp;&nbsp;if (edje_object_animation_get(anim))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_animation_set(anim, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Turn animation on&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_animation_set(anim, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Turn animation off&quot;);
-&nbsp;&nbsp;&nbsp;}
-}
-
-Evas_Object *
-animation_test(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;
-&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CLICKME, &amp;layout, &amp;animation);
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Turn animation off&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _animation_test_button_cb, animation);
-&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-
-&nbsp;&nbsp;&nbsp;return layout;
-}
-
-Edje_Animation_Menu_Item edje_animation_items[] =
-{
-&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},
-&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},
-&nbsp;&nbsp;&nbsp;{&quot;freeze/thaw test&quot;, freeze_test},
-&nbsp;&nbsp;&nbsp;{&quot;animation test&quot;, animation_test},
-
-&nbsp;&nbsp;&nbsp;{NULL, NULL}
-};</pre>
-</li>
-
-<li>Get the current state of given part.
-
-<p>Parts that are in transition return the transition&#39;s starting state.</p>
-
-<pre class="prettyprint">// edje_object_part_state_get
-static void
-_state_get_test_button_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;
-&nbsp;&nbsp;&nbsp;const char *state;
-&nbsp;&nbsp;&nbsp;double state_val = 0;
-&nbsp;&nbsp;&nbsp;state = edje_object_part_state_get(anim, &quot;text&quot;, &amp;state_val);
-&nbsp;&nbsp;&nbsp;edje_object_part_text_set(anim, &quot;text&quot;, state);
-}
-
-Evas_Object *
-state_get_test(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;
-&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CLICKME, &amp;layout, &amp;animation);
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Get state&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _state_get_test_button_cb, animation);
-&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-
-&nbsp;&nbsp;&nbsp;return layout;
-}
-
-Edje_Animation_Menu_Item edje_animation_items[] =
-{
-&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},
-&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},
-&nbsp;&nbsp;&nbsp;{&quot;freeze/thaw test&quot;, freeze_test},
-&nbsp;&nbsp;&nbsp;{&quot;animation test&quot;, animation_test},
-&nbsp;&nbsp;&nbsp;{&quot;part state get test&quot;, state_get_test},
-
-&nbsp;&nbsp;&nbsp;{NULL, 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.ui.guides/html/native/efl/edje_message_signal_n.htm b/org.tizen.ui.guides/html/native/efl/edje_message_signal_n.htm
deleted file mode 100755
index 958a3fe..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_message_signal_n.htm
+++ /dev/null
@@ -1,457 +0,0 @@
-<!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>Managing Signals and Messages</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">	
-			<li><a href="#signals">Signals</a></li>
-			<li><a href="#messages">Messages</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Managing Signals and Messages</h1> 
-
-   
-<p>Edje objects have 2 communication interfaces between the application logic (code) and GUI (theme). You can either emit a signal from the code to the theme, or create handles for the signals emitted from the theme. Signals are identified by strings. With Edje messages, you can communicate values, such as strings, float numbers, and integer numbers. Messages can also be identified by integer numbers.</p>
-
-  
- <h2 id="signals" name="signals">Signals</h2>
-   <p>You can emit signals from code to a theme, or create handles for the signals emitted from themes. Signals are identified by strings.</p>
-   
-   <p>Using signals in the EDC file is simple. Create a program and set the signal name to the <span style="font-family: Courier New,Courier,monospace;">signal</span> attribute.</p>
-   
-   <pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.check&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
-&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;programs 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.00;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.00;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-  
- <h3 id="emit" name="emit">Emitting Signals from the C Code</h3>
- 
-   <p>Create the Edje Object and widget check. When a <span style="font-family: Courier New,Courier,monospace;">changed</span>  event is triggered, a signal is emitted from the C code to the EDC file.</p>
-   
-   <pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
-&nbsp;&nbsp;&nbsp;
-&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;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&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;// Base layout
-&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-&nbsp;&nbsp;&nbsp;ad-&gt;edje_object = edje_object_add(evas_object_evas_get(ad-&gt;win));
-&nbsp;&nbsp;&nbsp;edje_object_file_set(ad-&gt;edje_object, edj_path, GRP_MAIN);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;ad-&gt;check = elm_check_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;edje_object_part_swallow(ad-&gt;edje_object, &quot;swallow.check&quot;, ad-&gt;check);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;check, &quot;changed&quot;, _check_toggled, ad);
-
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;edje_object);
-&nbsp;&nbsp;&nbsp;// Show the window
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-</pre>
-
-   <p>The following figure displays the result.</p>
-   
-	<p class="figure">Figure: Signal implemented on the screen</p> 
-	<p align="center"><img alt="Signal implemented on the screen" src="../../images/edje_signal1.png" /></p>
-	
-<p>The following example implements the callback for the <span style="font-family: Courier New,Courier,monospace;">changed</span> event from the widget check.</p>
-<pre class="prettyprint">
-static void
-_check_toggled(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;if (elm_check_state_get(obj))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_signal_emit(ad-&gt;edje_object, &quot;to,state,default,1&quot;, &quot;&quot;);
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_signal_emit(ad-&gt;edje_object, &quot;to,state,default,0&quot;, &quot;&quot;);
-}
-</pre>
-
-<p>The following figure displays the result.</p>
-
-	<p class="figure">Figure: Widget check status changed</p> 
-	<p align="center"><img alt="Widget check status changed" src="../../images/edje_signal2.png" /></p>
-	
-	
-<h2 id="messages" name="messages">Messages</h2>
- 
-<p>Edje messages are used for communication between code and a given Edje object&#39;s theme. With messages, you can communicate values, such as strings, float numbers, and integer numbers. Messages can also be identified by integer numbers.</p>
-	
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">rect1</span>  part is made draggable and 2 sliders added to change the part position.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;drag_area&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.check&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.slider_hor&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dragable 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 1 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 1 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;confine: &quot;drag_area&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description { state: &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.check&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.slider_ver&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.check&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.slider_hor&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.slider_hor&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
-&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;programs 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.00;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.00;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;drag&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Float:x, Float:y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get_drag(PART:&quot;rect1&quot;, x, y);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 2, x);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 3, y);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>  
-	
-	<p>Add the sliders:</p>
-	
-	<pre class="prettyprint">
-ad-&gt;slider_ver = elm_slider_add(ad-&gt;win);
-edje_object_part_swallow(ad-&gt;edje_object, &quot;swallow.slider_ver&quot;, ad-&gt;slider_ver);
-elm_slider_horizontal_set(ad-&gt;slider_ver, EINA_FALSE);
-evas_object_smart_callback_add(ad-&gt;slider_ver, &quot;changed&quot;, _slider_changed, ad);
-
-ad-&gt;slider_hor = elm_slider_add(ad-&gt;win);
-evas_object_smart_callback_add(ad-&gt;slider_hor, &quot;changed&quot;, _slider_changed, ad);
-</pre>
-
-	<p>The following figure displays the result.</p>
-	<p class="figure">Figure: Sliders added</p> 
-	<p align="center"><img alt="Sliders added" src="../../images/edje_message.png" /></p>
-	
-	<p>To handle the message in the Style, add the following script to the EDC file:</p>
-	
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;script 
-&nbsp;&nbsp;&nbsp;{      	
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public message(Msg_Type:type, id, ...) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((type == MSG_FLOAT_SET) &amp;&amp; (id == 1)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Float:x, Float: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;x = getfarg(2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y = getfarg(3);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set_drag(PART:&quot;rect1&quot;, x, y);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-	
-	<p>This script is called when an incoming message is detected.</p>
-
- <h3 id="send_message" name="send_message">Sending Messages</h3>
- 
-	<p>Add a callback for the <span style="font-family: Courier New,Courier,monospace;">changed</span>  event to send a message to the Style:</p>
-	
-	<pre class="prettyprint">
-static void
-_slider_changed(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Edje_Message_Float_Set *msg;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;msg = malloc(sizeof(*msg) + 1 * sizeof(float));
-&nbsp;&nbsp;&nbsp;msg-&gt;count = 2;
-&nbsp;&nbsp;&nbsp;msg-&gt;val[0] = elm_slider_value_get(ad-&gt;slider_hor);
-&nbsp;&nbsp;&nbsp;msg-&gt;val[1] = elm_slider_value_get(ad-&gt;slider_ver);
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;edje_object_message_send(ad-&gt;edje_object, EDJE_MESSAGE_FLOAT_SET, 1, msg);
-&nbsp;&nbsp;&nbsp;free(msg);
-}
-</pre>
-
-<p>The same message can be sent in the opposite direction. To send messages in EDC script (Embryo – link to Embryo), use the <span style="font-family: Courier New,Courier,monospace;">sent_message()</span>  function.</p>
-	
-	<pre class="prettyprint">
-program 
-{
-&nbsp;&nbsp;&nbsp;signal: &quot;drag&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;script 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Float:x, Float:y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get_drag(PART:&quot;rect1&quot;, x, y);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 2, x);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 3, y);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-	
-	<p>2 messages are sent using the <span style="font-family: Courier New,Courier,monospace;">drag</span> signal from the <span style="font-family: Courier New,Courier,monospace;">rect1</span> part.</p>
-	
-	<p>Add a message handler in the C code:</p>
-	
-	<pre class="prettyprint">
-edje_object_message_handler_set(ad-&gt;edje_object, _message_handle, ad);
-</pre>
-	
-	<p>Add a callback:</p>
-
-	<pre class="prettyprint">
-static void
-_message_handle(void *data, Evas_Object *obj, Edje_Message_Type type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int id, void *msg)
-{
-&nbsp;&nbsp;&nbsp;Edje_Message_Float *m;
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;if (type != EDJE_MESSAGE_FLOAT) return;
-&nbsp;&nbsp;&nbsp;m = msg;
-&nbsp;&nbsp;&nbsp;if (id == 2) elm_slider_value_set(ad-&gt;slider_hor, m-&gt;val);
-&nbsp;&nbsp;&nbsp;if (id == 3) elm_slider_value_set(ad-&gt;slider_ver, m-&gt;val);
-}
-</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/native/efl/edje_objects_n.htm b/org.tizen.ui.guides/html/native/efl/edje_objects_n.htm
deleted file mode 100755
index 0c0bb0b..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_objects_n.htm
+++ /dev/null
@@ -1,87 +0,0 @@
-<!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>Edje Objects: Managing Layouts and Layout Components</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Edje Objects: Managing Layouts and Layout Components</h1> 
-
-   
-<p>You can build and handle layouts using Edje objects. An Edje object is a type of Evas object for displaying units, such as rectangles, lines, polygons, text, and images. Edje objects are only used in Edje and provide functions that deal with Edje layouts and layout components. Namely, there is no Edje object type in the source code for implementing an application. The objects are mainly <a href="edc_part_block_n.htm">layouts or themes defined by groups and parts</a>, and declared in EDC files. </p> 
-<p>Edje provides functions for the following features:</p>
-
-  <ul>
- <li><a href="edje_files_n.htm">Handling Edje Files</a>
-   <p>Edje layouts are called themes and created using the EDC language. The EDC language is declarative and must be compiled before being used. The output of this compilation is an EDJ file, which can be loaded by Edje, and the result is an Edje object.</p></li>
-   
-   <li><a href="edje_scaling_n.htm">Scaling Edje Objects</a>
-   <p>Edje enables you to build scalable interfaces. There are 2 types of scaling factors, which are set to neutral (1.0) values by default (no scaling, actual sizes): global and individual. Scaling affects the minimum and maximum values of the part sizes, which are multiplied. Font sizes are scaled, too.</p></li>
-   
-   <li><a href="edje_color_n.htm">Using Edje Color Classes</a>
-   <p>To change the color and text of 2 or more parts simultaneously, you can use color classes. If parts are assigned with a color class, setting the color values to this class causes all the parts to have their colors multiplied by the values. Setting the values to a color class at a process level affects all parts with that color class, while at the object level, only the parts inside a specified object are affected.</p></li>
-   
-   <li><a href="edje_text_n.htm">Using Edje Text Classes</a>
-   <p>To change the text of 2 or more parts simultaneously, you can use text classes. If parts are assigned with a text class, setting the font attributes to this class updates all these parts with the new font attributes. Setting the values to a text class at a process level affects all parts with that text class, while at the object level, only the parts inside a specified object are affected.</p></li>
-   
-   <li><a href="edje_perspective_n.htm">Using Edje Perspective</a> 
-   <p>Perspective is a graphical tool that makes 2D objects appear as 3D. The perspective can be used with all Edje objects.</p></li>
-   
-   <li><a href="edje_message_signal_n.htm">Managing Signals and Messages</a>
-   <p>Edje objects have 2 communication interfaces between the logic and GUI. You can either emit a signal from the logic to the GUI, or create handles for the signals emitted from the GUI. Signals are identified by strings. With Edje messages, you can communicate values, such as strings, float numbers, and integer numbers. Messages can also be identified by integer numbers.</p></li> 
-   
-   <li><a href="edje_manage_animation_n.htm">Managing Edje Animations</a>
-   <p>Edje has the ability to animate their objects. You can start, stop, play, pause, freeze, and thaw Edje animations, and check their status.</p></li>
-  </ul>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edje_perspective_n.htm b/org.tizen.ui.guides/html/native/efl/edje_perspective_n.htm
deleted file mode 100755
index cb50901..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_perspective_n.htm
+++ /dev/null
@@ -1,486 +0,0 @@
-<!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>Using Edje Perspective</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">	
-			<li><a href="#application_skeleton">Creating the Basic Application</a></li>
-			<li><a href="#play">Playing with the Perspective</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Using Edje Perspective</h1> 
-
-   
-<p>This tutorial demonstrates how you can create a 3D projection of a 2D object.</p> 
-<p>Edje Perspective is a graphical tool that makes 2D objects appear like they have a 3D appearance.</p>
-<p>Edje Perspective can be used in all Edje objects to create and configure a perspective objects and to set the to an Edje object or a canvas, affecting all the objects within that have no specific perspective already defined.</p>
-
-  <h2 id="application_skeleton" name="application_skeleton">Creating the Basic Application</h2>
-  <p>The perspective application has buttons to move the Edje object and change its perspective. The Edje object is a 2D object that changes its position so that the perspective point can be applied.</p>
-  
- <table>
-  <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The loaded Edje object must have the perspective option enabled in its EDC source code.</td> 
-    </tr> 
-   </tbody> 
-  </table>
- 
-  <p>Create a simple Edje object that has 4 states: left-top, right-top, left-bottom, and right-bottom. Clicking a button emits signals into the object and makes the object move.</p>
-  
-  <ol>
-  <li>
-  
-  <p>The following example implements the Edje object:</p>
-  
-<pre class="prettyprint">
-group 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;example/group&quot;;
-&nbsp;&nbsp;&nbsp;min: 480 320;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;           
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}       
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 128;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;offset: -5 -5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;offset: 4 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map 
-&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;on: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
-&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;x: 45;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 15;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 200 200 200 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;Perspective example&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 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;map 
-&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;on: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
-&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;x: 45;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 15;
-&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;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;right&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;bottom&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;bottomright&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;programs 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,right&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,1,0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;right&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,bottom&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,0,1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;bottom&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,bottomright&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,1,1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;bottomright&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,default&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,0,0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,end&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;animation,end&quot; &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> 
-</li>
-
-<li>
-<p>Create the application. Create a basic window widget that is going to be loaded and created in the main starting function:</p>
-
-<pre class="prettyprint">
-// Window
-ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
-{
-&nbsp;&nbsp;&nbsp;int rots[4] = 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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);
-}
-</pre> 
-</li>
-
-<li>
-<p>Add a conformant and set the main layout of the application. </p>
-<p>The main layout is described in the EDC part and consists of 2 swallows. The first swallow has the Edje object loaded into it. The second contains a box of buttons to manipulate the perspective of the Edje object.</p>
-
-<pre class="prettyprint">
-// Conformant
-ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
-elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
-evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-evas_object_show(ad-&gt;conform);
-
-// Base layout
-app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-ad-&gt;layout = elm_layout_add(ad-&gt;win);
-elm_layout_file_set(ad-&gt;layout, edj_path, GRP_MAIN);
-evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
-eext_object_event_callback_add(ad-&gt;layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
-elm_object_content_set(ad-&gt;conform, ad-&gt;layout);
-</pre> 
-</li>
-
-<li>
-<p>Create the Edje object on Evas using the <span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get()</span> function. This function is very useful because you must operate on the canvas, but have only an object pointer to a window object.</p>
-
-<pre class="prettyprint">
-Evas *evas;
-evas = evas_object_evas_get(ad-&gt;win);
-ad-&gt;edje_obj = edje_object_add(evas);
-</pre> 
-</li>
-
-<li>
-<p>Instantiate a new Edje object by creating a new Edje smart object and returning its <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> handle:</p>
-
-<pre class="prettyprint">
-ad-&gt;edje_obj = edje_object_add(evas);
-</pre>
-</li>
-
-<li>
-<p>An Edje object is useless without a source file set to it, so use the <span style="font-family: Courier New,Courier,monospace;">edje_object_file_set()</span> function to set the object into the main layout:</p>
-
-<pre class="prettyprint">
-ad-&gt;edje_obj = edje_object_add(evas);
-edje_object_file_set(ad-&gt;edje_obj, edj_path, &quot;example/group&quot;);
-evas_object_move(ad-&gt;edje_obj, 0, 0);
-evas_object_show(ad-&gt;edje_obj);
-elm_object_part_content_set(ad-&gt;layout, &quot;swallow&quot;, ad-&gt;edje_obj);
-</pre>
-
-<p class="figure">Figure: Main layout with the swallow part highlighted</p> 
-<p align="center"><img alt="Main layout with the swallow part highlighted" src="../../images/perspective_swallow.png" /></p>  
-</li>
-
-<li>
-<p>Create the actual perspective object, define its position, focal distance and Z plane position, and set it as global:</p>
-
-<pre class="prettyprint">
-ad-&gt;ps = edje_perspective_new(evas);	
-edje_perspective_set(ad-&gt;ps, 160, 320, 0, ad-&gt;focal);
-edje_perspective_global_set(ad-&gt;ps, EINA_TRUE);
-</pre>
-
-<p>To set the perspective of the Edje object, instead of setting it as global to the entire canvas, you can use the <span style="font-family: Courier New,Courier,monospace">edje_object_perspective_set()</span> function.
-</p>
-</li>
-
-<li>
-<p>Create a new perspective in the canvas by setting up the transformation for the perspective object:</p>
-
-<pre class="prettyprint">
-void 
-edje_perspective_set(Edje_Perspective * ps, Evas_Coord px, Evas_Coord py, Evas_Coord z0, Evas_Coord foc)
-</pre>
-
-<p>This sets the parameters of the perspective transformation. X, Y, and Z values are used. The <span style="font-family: Courier New,Courier,monospace">px</span> and <span style="font-family: Courier New,Courier,monospace">py</span> points specify the infinite distance point in the 3D conversion, where all lines converge. The <span style="font-family: Courier New,Courier,monospace">z0</span> point specifies the Z value at which there is a 1:1 mapping between spatial coordinates and screen coordinates. Any points on the Z value do not have their X and Y values modified in the transformation. The points further away (with a higher Z value) shrink into the distance, and those that are closer expand and become bigger.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">foc</span> value determines the focal length of the camera. This is the distance between the camera lens plane and the <span style="font-family: Courier New,Courier,monospace">z0</span> Z value. This allows for some depth control. The <span style="font-family: Courier New,Courier,monospace">foc</span> value must be greater than 0.</p>
-</li>
-
-<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">Swallow buttons</span> layout part contains a box of buttons to manipulate the perspective of the loaded Edje object.</p>
-
-<p class="figure">Figure: Main layout with swallow buttons highlighted</p> 
-<p align="center"><img alt="Main layout with swallow buttons highlighted" src="../../images/perspective_buttons.png" /></p>  
-
-<p>Add the box and pack the buttons into it. Name the first button <strong>Global</strong> and register a callback for clicking:</p>
-
-<pre class="prettyprint">
-Evas_Object *box, *button;
-// Adding box
-box = elm_box_add(ad-&gt;layout);
-evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, 0.0);
-evas_object_size_hint_align_set(box, EVAS_HINT_FILL, 0.0);
-elm_box_horizontal_set(box, EINA_TRUE);
-evas_object_show(box);
-elm_object_part_content_set(ad-&gt;layout, &quot;swallow.buttons&quot;, box);
-
-button = elm_button_add(ad-&gt;layout);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(button, &quot;move&quot;);
-evas_object_show(button);
-elm_box_pack_end(box, button);
-evas_object_smart_callback_add(button, &quot;clicked&quot;, _on_btn_clicked, ad);
-
-button = elm_button_add(ad-&gt;layout);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(button, &quot;more&quot;);
-evas_object_show(button);
-elm_box_pack_end(box, button);
-evas_object_smart_callback_add(button, &quot;clicked&quot;, _on_btn_more_clicked, ad);
-
-button = elm_button_add(ad-&gt;layout);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(button, &quot;less&quot;);
-evas_object_show(button);
-elm_box_pack_end(box, button);
-evas_object_smart_callback_add(button, &quot;clicked&quot;, _on_btn_less_clicked, ad);
-
-ad-&gt;edje_obj = edje_object_add(evas);
-edje_object_file_set(ad-&gt;edje_obj, edj_path, &quot;example/group&quot;);
-evas_object_move(ad-&gt;edje_obj, 0, 0);
-evas_object_show(ad-&gt;edje_obj);
-elm_object_part_content_set(ad-&gt;layout, &quot;swallow&quot;, ad-&gt;edje_obj);
-</pre>
-</li>
-
-<li>
-<p>Show the main window:</p>
-
-<pre class="prettyprint">
-evas_object_show(ad-&gt;win);
-</pre>
-
-<p class="figure">Figure: Main screen</p> 
-<p align="center"><img alt="Figure: Main screen" src="../../images/perspective_screen.png" /> </p>
-
-</li>
-</ol>
-
-<h2 id="play" name="play">Playing with the Perspective</h2>
-
-<ol>
-<li>
-<p>The callback for a clicked button is converted to a signal determining where the text and rectangle must be moved:</p>
-
-<pre class="prettyprint">
-static void
-_part_move(appdata_s *ad, int dx, int dy)
-{
-&nbsp;&nbsp;&nbsp;char emission[64];
-
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, &quot;AAAA&quot;, &quot;x,y = %d, %d&quot;, dx, dy);
-&nbsp;&nbsp;&nbsp;snprintf(emission, sizeof(emission), &quot;move,%d,%d&quot;, dx, dy);
-&nbsp;&nbsp;&nbsp;edje_object_signal_emit(ad-&gt;edje_obj, emission, &quot;&quot;);
-}
-</pre>
-</li>
-
-<li>
-<p>The callback representing the Edje object move calls the <span style="font-family: Courier New,Courier,monospace">part_move()</span> function that directly sends a signal to the Edje part. The moving action is treated in the <span style="font-family: Courier New,Courier,monospace">program</span> according to the passed signal.</p>
-
-<pre class="prettyprint">
-static void
-_on_btn_clicked(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;static int i = 0;
-&nbsp;&nbsp;&nbsp;switch (i) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 0:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 1, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 1:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 1, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 2:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 3:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;i++;
-&nbsp;&nbsp;&nbsp;i = i%4;
-}
-</pre>
-
-<p class="figure">Figure: Moving process</p> 
-<p align="center">-><img alt="Figure: Moving process" src="../../images/moving1.png" /> <img alt="Figure: Moving process" src="../../images/moving2.png" /></p>
-</li>
-
-<li>
-<p>By clicking the <strong>More</strong> and <strong>Less</strong> buttons, you can increase or decrease the focal length of the camera:</p>
-
-<pre class="prettyprint">
-static void
-_on_btn_more_clicked(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ad-&gt;focal += 5;
-&nbsp;&nbsp;&nbsp;edje_perspective_set(ad-&gt;ps, 160, 320, 0, ad-&gt;focal);
-&nbsp;&nbsp;&nbsp;edje_perspective_global_set(ad-&gt;ps, EINA_TRUE);
-}
-
-static void
-_on_btn_less_clicked(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ad-&gt;focal -= 5;
-&nbsp;&nbsp;&nbsp;edje_perspective_set(ad-&gt;ps,160, 320, 0, ad-&gt;focal);
-&nbsp;&nbsp;&nbsp;edje_perspective_global_set(ad-&gt;ps, EINA_TRUE);
-}
-</pre>
-
-<p class="figure">Figure: Decreasing and increasing the focal length</p>
-
-<p align="center"><img alt="Decreasing and increasing the focal length" src="../../images/focal_length.png" /></p>
-</li>
-</ol>
- 
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(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/native/efl/edje_scaling_n.htm b/org.tizen.ui.guides/html/native/efl/edje_scaling_n.htm
deleted file mode 100755
index ff9b16e..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_scaling_n.htm
+++ /dev/null
@@ -1,794 +0,0 @@
-<!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>Scaling Edje Objects</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-		<li><a href="#init">Initializing the EDC File</a></li>
-		<li><a href="#init_app">Initializing the Application</a></li>
-		<li><a href="#global">Setting Global Scales</a></li>
-		<li><a href="#set">Setting Scales for Edje Objects</a></li>
-		<li><a href="#scales">Personal, Global, and Base Scales</a></li>
-		</ul>	
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Scaling Edje Objects</h1>
-
-<p>This demonstrates how you can scale Edje objects. Scalability is important when building user interfaces for different environments, such as mobile phones and laptops.</p>
-<p>The natural value of scale factors is 1.0. Scaling affects minimum and maximum part size and font size, and multiplies them.</p>
-
-<p>You can disable scaling of certain parts.</p>
-
-<h2 id="init" name="init">Initializing the EDC File</h2>
-
-<p>Set up and prepare the EDC source code for loading the Edje objects in your application:</p>
-
-<ol>
-<li>
-<p>To demonstrate Edje scale usability, set up 2 groups. The first group contains only one scalable part.</p>
-
-<pre class="prettyprint">group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;scale_group_1&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scalable_rect&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 16 16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-
-<p class="figure">Figure: First scalable group</p> 
-<p align="center"><img alt="First scalable group" src="../../images/scalable_group1.png" /></p>
-
-<p>For this example, the group is used for showing Edje&#39;s global scale.</p>
-
-<p>The other group is used for showing usability of the edje_object_scale function. The group has 2 non-scalable parts (<span style="font-family: Courier New,Courier,monospace">not_scalable_rect1</span> and <span style="font-family: Courier New,Courier,monospace">not scalable_rect2</span> ), which are related to the scalable parts. It can be seen that scalability actually changes the scalable parts and all UI can be changed according to new relatives.</p>
-
-<p>Scalability of certain parts is usually preset in the EDC source code with the <span style="font-family: Courier New,Courier,monospace">scale</span>  property:</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;scale_group_2&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;not_scalable_rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 40 40;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 40 40;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scalable_rect&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 25 19;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 25 19;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;not_scalable_rect1&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;not_scalable_rect2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 40 40;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 40 40;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;scalable_rect&quot;;
-&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;}
-}
-</pre>
-
-<p class="figure">Figure: Second scalable group</p> 
-<p align="center"><img alt="Second scalable group" src="../../images/scalable_group2.png" /></p>
-</li>
-
-<li>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">base_scale</span>  factor can be used when the whole collection in the EDC file contains it:</p>
-
-<pre class="prettyprint">collections 
-{
-&nbsp;&nbsp;&nbsp;base_scale: 1.2;
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_1&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_2&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main_layout&quot;;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-</li>
-
-<li>
-<p>An application must contain controls, such as a spinner, to change the scale and see the result.</p>
-
-<p>Add a box with 2 groups loaded as edje objects, and spinners for changing the scale values:</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;main_application&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 20;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title2&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 32;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;edje scale:&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 150 32;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;scale.swallow&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;edje object scale:&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;title2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;to_y: &quot;title1&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;to_y: &quot;title2&quot;;
-&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;}
-}
-</pre>
-
-<p class="figure">Figure: Main application layout</p> 
-<p align="center"><img alt="Main application layout" src="../../images/main_app_layout.png" /></p>
-
-<p>In the example, there are the following swallows:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">edje.swallow.content</span> is used for the box containing the Edje objects.</li>
-<li><span style="font-family: Courier New,Courier,monospace">scale.swallow</span> is used for the spinner that changes the scale value a loaded Edje object.</li>
-<li><span style="font-family: Courier New,Courier,monospace">scale.swallow2</span> is used for the spinner that changes the global scale, so changing this value changes the scale of all Edje objects  if they do not have their own scales set using the <span style="font-family: Courier New,Courier,monospace">edje_object_scale_set()</span> function.</li>
-</ul>
-</li>
-</ol>
-
-<h2 id="init_app" name="init_app">Initializing the Application</h2>
-
-<p>All application code lays in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function that creates and loads all objects and forms, and creates application&#39;s main look.</p>
-
-<ol>
-<li>
-<p>Create a window and get the path to the EDJ file:</p>
-
-<pre class="prettyprint">
-ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-if (elm_win_wm_rotation_supported_get(ad-&gt;win))
-{
-&nbsp;&nbsp;&nbsp;int rots[4] = 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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);
-}
-// Path to edj group with three groups
-app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-</pre>
-</li>
-
-<li>
-<p>Set the conformant containing the main layout into the window:</p>
-
-<pre class="prettyprint">
-ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
-elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
-evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-evas_object_show(ad-&gt;conform);
-// Main layout
-ad-&gt;main_layout = elm_layout_add(ad-&gt;win);
-evas_object_size_hint_weight_set(ad-&gt;main_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_layout_file_set(ad-&gt;main_layout, edj_path, &quot;main_application&quot;);
-elm_object_content_set(ad-&gt;conform, ad-&gt;main_layout);
-evas_object_show(ad-&gt;main_layout);
-app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-</pre>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">If you have layout for your window written in the EDC file, use and load it as Layout with Elementary layout API (using, for example, the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> , <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> , and <span style="font-family: Courier New,Courier,monospace">elm_layout_file_set()</span>  functions).</td> 
-    </tr> 
-   </tbody> 
-  </table>
-</li>
-
-<li>
-<p>Add the box and set it into the <span style="font-family: Courier New,Courier,monospace">edje.swallow.content</span>  main layout swallow:</p>
-
-<pre class="prettyprint">
-// Add the box
-ad-&gt;box = elm_box_add(ad-&gt;main_layout);
-evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, 0.0);
-evas_object_size_hint_align_set(ad-&gt;box, EVAS_HINT_FILL, 0.0);
-elm_box_horizontal_set(ad-&gt;box, EINA_TRUE);
-evas_object_show(ad-&gt;box);
-// Set the box into the main layout
-elm_object_part_content_set(ad-&gt;main_layout, &quot;edje.swallow.content&quot;, ad-&gt;box);</pre>
-</li>
-
-<li>
-<p>Load the Edje objects:</p>
-
-<pre class="prettyprint">
-// Add group1
-ad-&gt;edje_object_1 = edje_object_add(evas_object_evas_get(ad-&gt;win));
-evas_object_size_hint_weight_set(ad-&gt;edje_object_1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-edje_object_file_set(ad-&gt;edje_object_1, edj_path, &quot;scale_group_1&quot;);
-// Check object loading errors
-if (edje_object_load_error_get(ad-&gt;edje_object_1) != EDJE_LOAD_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;edje_object_1);
-
-&nbsp;&nbsp;&nbsp;return;
-}
-evas_object_show(ad-&gt;edje_object_1);</pre>
-</li>
-
-<li>
-<p>Pack the Edje objects into the box:</p>
-
-<pre class="prettyprint">
-elm_box_pack_end(ad-&gt;box, ad-&gt;edje_object_1);
-elm_box_pack_end(ad-&gt;box, ad-&gt;edje_object_2);</pre>
-</li>
-
-<li>
-<p>Add 2 spinners that change the scale values:</p>
-
-<pre class="prettyprint">
-ad-&gt;edje_scale = elm_spinner_add(ad-&gt;win);
-evas_object_size_hint_weight_set(ad-&gt;edje_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(ad-&gt;edje_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);
-elm_spinner_min_max_set(ad-&gt;edje_scale, 1, 300);
-elm_spinner_step_set(ad-&gt;edje_scale, 10);
-evas_object_show(ad-&gt;edje_scale);
-elm_spinner_value_set(ad-&gt;edje_scale, 100);
-elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow&quot;, ad-&gt;edje_scale);
-
-ad-&gt;edje_object_scale = elm_spinner_add(ad-&gt;win);
-evas_object_size_hint_weight_set(ad-&gt;edje_object_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(ad-&gt;edje_object_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);
-elm_spinner_min_max_set(ad-&gt;edje_object_scale, 1, 300);
-elm_spinner_step_set(ad-&gt;edje_object_scale, 10);
-evas_object_show(ad-&gt;edje_object_scale);
-elm_spinner_value_set(ad-&gt;edje_object_scale, 100);
-elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow2&quot;, ad-&gt;edje_scale);</pre>
-</li>
-
-<li><p>Display the window:</p>
-
-<pre class="prettyprint">
-evas_object_show(ad-&gt;win);</pre>
-
-<p class="figure">Figure: Scale testing application</p> 
-<p align="center"><img alt="Scale testing application" src="../../images/scale_testing_app.png" /></p>
-</li>
-</ol>
-
-
-<h2 id="global" name="global">Setting Global Scales</h2>
-
-<ol>
-<li>
-<p>Add a callback for the second spinner that changes Edje global scale value and, as a result, affects all loaded Edje objects:</p>
-
-<pre class="prettyprint">static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Add scale spinners
-&nbsp;&nbsp;&nbsp;ad-&gt;edje_object_scale = elm_spinner_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;edje_object_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(ad-&gt;edje_object_scale, 1, 300);
-&nbsp;&nbsp;&nbsp;elm_spinner_step_set(ad-&gt;edje_object_scale, 10);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_object_scale);
-&nbsp;&nbsp;&nbsp;elm_spinner_value_set(ad-&gt;edje_object_scale, 100);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow2&quot;, ad-&gt;edje_object_scale);
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;edje_object_scale, &quot;changed&quot;, _on_global_scale_change, ad);
-}</pre>
-</li>
-
-<li>
-
-<p>Set the scale using the <span style="font-family: Courier New,Courier,monospace">edje_scale_set()</span> function:</p>
-
-<pre class="prettyprint">static void
-_on_global_scale_change(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;edje_scale_set(elm_spinner_value_get(obj) / 100);
-}</pre>
-
-<p>By clicking the spinner buttons, you can change the scale of all loaded Edje objects. The Edje object on the right has its own scale values, so global scale values do not apply to it.</p>
-
-<p class="figure">Figure: Different global scales</p> 
-<p align="center"><img alt="Different global scales" src="../../images/global_scales.png" /></p>
-</li>
-
-</ol>
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Using the <span style="font-family: Courier New,Courier,monospace">edje_scale_set()</span>  function that changes the global scale values can affect your whole application and destroy the UI layout. Be careful with this function.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2 id="set" name="set">Setting Scales for Edje Objects</h2>
-
-<p>Add a callback to get the value of the first spinner and apply it to the Edje object on the right:</p>
-
-<pre class="prettyprint">static void
-_on_scale_change(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;edje_object_scale_set(ad-&gt;edje_object_2, elm_spinner_value_get(obj) / 100);
-}
-
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Add scale spinners
-&nbsp;&nbsp;&nbsp;ad-&gt;edje_scale = elm_spinner_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;edje_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(ad-&gt;edje_scale, 1, 300);
-&nbsp;&nbsp;&nbsp;elm_spinner_step_set(ad-&gt;edje_scale, 10);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_scale);
-&nbsp;&nbsp;&nbsp;elm_spinner_value_set(ad-&gt;edje_scale, 100);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow&quot;, ad-&gt;edje_scale);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;edje_scale, &quot;changed&quot;, _on_scale_change, ad);
-}</pre>
-
-
-<p>By clicking on spinner buttons, you can change the scale of the second Edje object in the box.</p>
-
-<p class="figure">Figure: Edje object scales</p> 
-<p align="center"><img alt="Edje object scales" src="../../images/edje_object_scales.png" /></p>
-
-
-<h2 id="scales" name="scales">Personal, Global, and Base Scales</h2>
-
-<p>Modify the main layout and add a swallow for the buttons. The buttons are used for showing the current scale:</p>
-
-<ol>
-<li>
-<p>Modify the main layout EDC code by creating another swallow part, <span style="font-family: Courier New,Courier,monospace">swallow.buttons</span> , and modifying the <span style="font-family: Courier New,Courier,monospace">edje.swallow.content</span>  part:</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;main_application&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 20;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.buttons&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 32;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;edje scale:&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 150 32;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;scale.swallow&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;edje object scale:&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;title2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;to_y: &quot;title1&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&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;to_y: &quot;title2&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.buttons&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 60;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: -1 60;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-
-<li>
-<p>Add a box with buttons and set it into the main layout:</p>
-
-<pre class="prettyprint">static void
-_edje_object_scale_get(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;char title[PATH_MAX] = {0, };
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;snprintf(title, (int)PATH_MAX, &quot;object %.2f&quot;, edje_object_scale_get(ad-&gt;edje_object_2));
-&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, title);
-}
-static void
-_edje_scale_get(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;char title[PATH_MAX] = {0, };
-&nbsp;&nbsp;&nbsp;snprintf(title, (int)PATH_MAX, &quot;global %.2f&quot;, edje_scale_get());
-&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, title);
-}
-static void
-_edje_object_base_scale_get(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;char title[PATH_MAX] = {0, };
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;snprintf(title, (int)PATH_MAX, &quot;base %.2f&quot;, edje_object_base_scale_get(ad-&gt;edje_object_2));
-&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, title);
-}
-
-static void
-create_base_gui(appdata_s *ad) 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box, *button;
-&nbsp;&nbsp;&nbsp;// Add the box
-&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;main_layout);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, 0.0);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, 0.0);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_show(box);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;main_layout, &quot;swallow.buttons&quot;, box);
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;main_layout);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;object &quot;);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_scale_get, ad);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;main_layout);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;global &quot;);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_scale_get, ad);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;main_layout);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;base &quot;);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_base_scale_get, ad);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-}</pre>
-
-
-<p>Clicking a button gets a specific scale and prints its value on the button. For example, clicking the <strong>Global</strong> button shows the global scale value.</p>
-
-<p class="figure">Figure: Scale values</p> 
-<p align="center"><img alt="Scale values" src="../../images/scale_values.png" /></p>
-</li>
-
-<li>
-<p>The loaded Edje object does not have its own scale value (0.00), so it uses the global scale value defined in the EFL configuration based on the device. A mobile device that is being used here, has the global scale ~1.8). The base scale is set to 1.2.</p>
-
-<pre class="prettyprint">collections 
-{
-&nbsp;&nbsp;&nbsp;base_scale: 1.2;
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_1&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_2&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main_layout&quot;;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-
-<p class="figure">Figure: Scale values after changing the Edle object scale</p> 
-<p align="center"><img alt="Figure: Scale values after changing the Edle object scale" src="../../images/scale_values2.png" /></p>
-
-<p>After applying the scale of the new object, the global scale does not apply to this Edje object anymore. While all other objects have the scale value 1.8, the new object has the scale value 1.37.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The default base scale value is 1.0. All scale values in Edje objects, either set with the global scale value using the <span style="font-family: Courier New,Courier,monospace">edje_scale_set()</span> function or with a personal scale factor using the <span style="font-family: Courier New,Courier,monospace">edje_object_scale_set()</span> function are divided by base scale.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p class="figure">Figure: Base scale</p> 
-<p align="center"><img alt="Base scale" src="../../images/base_scales.png" /></p>
-
-<p>Setting a scale value that is same as the base scale makes the layout appear as if it had the scale value 1.0.</p>
-</li>
-</ol>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/edje_text_n.htm b/org.tizen.ui.guides/html/native/efl/edje_text_n.htm
deleted file mode 100755
index 47ca76f..0000000
--- a/org.tizen.ui.guides/html/native/efl/edje_text_n.htm
+++ /dev/null
@@ -1,712 +0,0 @@
-<!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>Using Edje Text Classes</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-		<li><a href="#create">Creating the Basic Application</a></li>
-		<li><a href="#display">Getting, Deleting, and Displaying Text Classes</a></li>
-		<li><a href="#layout">Application Layout</a></li>
-		<li><a href="#all">Setting the Text Class for All Edje Objects</a></li>
-		<li><a href="#specific">Setting the Text Class of a Specific Object</a></li>
-		<li><a href="#get">Getting the Text Class of an Object</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Using Edje Text Classes</h1>
-
-<p>This tutorial demonstrates how you can change the text of 2 or more parts using Edje text classes.</p>
-<p>If a part is assigned with a text class, setting font attributes to this class updates all those parts with the new font attributes. Setting the values to a text class affects all parts in that text class at process level, while at the object level, it only affects the parts inside a specified object.</p>
-
-<h2 id="create" name="create">Creating the Basic Application</h2>
-
-<p>The example application has 2 screen with different UIs. The screens demonstrate different text class APIs. The screen contains a genlist with 2 items set into a naviframe. Clicking an item opens displays a screen. Pressing the hardware <strong>Back</strong> button displays the main screen with the genlist.</p>
-
-<ol>
-<li>Create the basic application:
-
-<pre class="prettyprint">static void
-win_back_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_pop(ad-&gt;navifr);
-}</pre>
-</li>
-
-<li>
-<p>Get the path to the EDC file that contains the main layout and the Edje object to load:</p>
-
-<pre class="prettyprint">static void
-app_get_resource(const char *edj_file_in, char *edj_path_out, int edj_path_max)
-{
-&nbsp;&nbsp;&nbsp;char *res_path = app_get_resource_path();
-&nbsp;&nbsp;&nbsp;if (res_path) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(edj_path_out, edj_path_max, &quot;%s%s&quot;, res_path, edj_file_in);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(res_path);
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-
-<p>Create a window and register an event callback that calls the <span style="font-family: Courier New,Courier,monospace">win_back_cb()</span> function after pressing the <strong>Back</strong> button on the device:</p>
-
-<pre class="prettyprint">static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = 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;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-}
-</pre>
-</li>
-
-<li>
-<p>Add a conformant that contains the naviframe and genlist. Add item selection callbacks for the genlist items to show different screens:</p>
-
-<pre class="prettyprint">static char *
-_genlist_item_text_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;Eina_Stringshare *text_class = (Eina_Stringshare *)data;
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(text_class);
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-}
-
-static void
-create_base_gui(appdata_s *ad)
-{
-&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;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;navifr = elm_naviframe_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;navifr);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;navifr, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Genlist
-&nbsp;&nbsp;&nbsp;ad-&gt;itc = elm_genlist_item_class_new();
-&nbsp;&nbsp;&nbsp;ad-&gt;itc-&gt;func.text_get =_genlist_item_text_get;
-
-&nbsp;&nbsp;&nbsp;ad-&gt;genlist = elm_genlist_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-
-&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Text Class List&quot;), 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, NULL, ad);
-&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Object Text Class API&quot;), 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, NULL, ad);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;genlist);
-
-&nbsp;&nbsp;&nbsp;// Show the window
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}</pre>
-
-
-<p>The following figure shows the result.</p>
-
-<p class="figure">Figure: Main screen</p> 
-<p align="center"><img alt="Main screen" src="../../images/edje_text_main.png" /></p></li>
-</ol>
-
-<h2 id="display" name="display">Getting, Deleting, and Displaying Text Classes</h2>
-
-<p>The first screen of the application shows an example of the <span style="font-family: Courier New,Courier,monospace">edje_text_class_del()</span>, <span style="font-family: Courier New,Courier,monospace">edje_text_class_list()</span>, and <span style="font-family: Courier New,Courier,monospace">edje_text_class_get()</span> functions.</p>
-
-<p>The following code implements the layout:</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;class_list_application&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_view&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;text part number 3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 20;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.list&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;text_view&quot;;
-&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;}
-}
-</pre>
-
-<p class="figure">Figure: First screen EDC layout</p> 
-<p align="center"><img alt="First screen EDC layout" src="../../images/first_screen_edc.png" /></p>
-
-<p>The first part (<span style="font-family: Courier New,Courier,monospace">text_view</span>) shows the properties of the selected text class. Clicking a text class in the genlist shows its properties, such as font, size, and name in the text part.</p>
-
-<ol>
-<li>
-<p>Add the base genlist:</p>
-
-<pre class="prettyprint">
-ad-&gt;genlist = elm_genlist_add(ad-&gt;win);
-evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Text Class List&quot;), 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;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, _create_class_list_gui, ad);
-eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Object Text Class API&quot;), 
-&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, ELM_GENLIST_ITEM_NONE, NULL, ad);
-elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;genlist);
-</pre>
-</li>
-
-<li>
-<p>Load the layout:</p>
-
-<pre class="prettyprint">static void
-_create_class_list_gui(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data; // Get application&#39;s data
-&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, }; // path to edc file
-&nbsp;&nbsp;&nbsp;Eina_List *l;  //  Used later
-&nbsp;&nbsp;&nbsp;const char *str; // Used later
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL; // Used later
-&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-
-&nbsp;&nbsp;&nbsp;// Main layout
-&nbsp;&nbsp;&nbsp;ad-&gt;gui1_layout = elm_layout_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;gui1_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;gui1_layout, edj_path, &quot;class_list_application&quot;);
-}
-</pre>
-</li>
-
-<li>
-<p>Get a list of all text classes loaded into the system.In the following example, the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> list is a field in application data.</p>
-
-<pre class="prettyprint">ad-&gt;list = edje_text_class_list();</pre>
-</li>
-
-<li>
-<p>Create the genlist:</p>
-
-<pre class="prettyprint">// Genlist
-ad-&gt;itc_text_classes = elm_genlist_item_class_new();
-ad-&gt;itc_text_classes-&gt;func.text_get =_genlist_item_text_get;
-
-ad-&gt;genlist_text_classes = elm_genlist_add(ad-&gt;win);
-evas_object_size_hint_weight_set(ad-&gt;genlist_text_classes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-</pre>
-</li>
-
-<li>
-<p>Go through the text class list and insert each text class to the genlist. Set the genlist into the main layout of the current screen and show it in the naviframe:</p>
-
-<pre class="prettyprint">
-EINA_LIST_FOREACH(ad-&gt;list, l, str)
-{
-&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist_text_classes, ad-&gt;itc_text_classes, str, NULL, ELM_GENLIST_ITEM_NONE, NULL, ad);
-&nbsp;&nbsp;&nbsp;elm_object_item_data_set(eoi, (void *)str);
-}
-elm_object_part_content_set(ad-&gt;gui1_layout, &quot;edje.swallow.list&quot;, ad-&gt;genlist_text_classes);
-evas_object_show(ad-&gt;genlist_text_classes);
-elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui1_layout);
-</pre>
-
-
-<p>Clicking <strong>Text Class List</strong> displays the screen with a genlist of text classes.</p>
-
-<p class="figure">Figure: Text class list</p> 
-<p align="center"><img alt="Text class list" src="../../images/text_class_list.png" /></p>
-</li>
-
-<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">edje_text_class_del()</span> function deletes a text class (in the following example, <span style="font-family: Courier New,Courier,monospace">T094</span>):</p>
-
-<pre class="prettyprint">
-// Main layout
-ad-&gt;gui1_layout = elm_layout_add(ad-&gt;win);
-evas_object_size_hint_weight_set(ad-&gt;gui1_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_layout_file_set(ad-&gt;gui1_layout, edj_path, &quot;class_list_application&quot;);
-evas_object_show(ad-&gt;gui1_layout);
-
-// Get the collection list
-app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-edje_text_class_del(&quot;T094&quot;);
-ad-&gt;list = edje_text_class_list();
-
-// Genlist
-ad-&gt;itc_text_classes = elm_genlist_item_class_new();
-ad-&gt;itc_text_classes-&gt;func.text_get =_genlist_item_text_get;
-</pre>
-
-<p class="figure">Figure: Text class list after deleting a class</p> 
-<p align="center"><img alt="Text class list after deleting a class" src="../../images/text_class_list_del.png" /></p>
-</li>
-
-<li>
-<p>Every text class contains specific information, such as the font name, font size, and text class name. To show the properties when the text class name is clicked, create a callback that uses the <span style="font-family: Courier New,Courier,monospace">edje_text_class_get()</span> function:</p>
-
-<pre class="prettyprint">static void
-_genlist_clicked(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;char text_class[PATH_MAX] = {0, };
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL;
-&nbsp;&nbsp;&nbsp;const char *str;
-&nbsp;&nbsp;&nbsp;char *font;
-&nbsp;&nbsp;&nbsp;Evas_Font_Size size;
-
-&nbsp;&nbsp;&nbsp;eoi = elm_genlist_selected_item_get(obj);
-&nbsp;&nbsp;&nbsp;str = elm_object_item_data_get(eoi);
-&nbsp;&nbsp;&nbsp;edje_text_class_get(str, &amp;font, &amp;size);
-&nbsp;&nbsp;&nbsp;snprintf(text_class, PATH_MAX, &quot;%s font{%s} size{%d}&quot;, str, font, size);
-&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;gui1_layout, &quot;text_view&quot;, text_class);
-}</pre>
-</li>
-
-<li>
-<p>Register the added callback function in the genlist:</p>
-
-<pre class="prettyprint">
-EINA_LIST_FOREACH(ad-&gt;list, l, str)
-{
-&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist_text_classes, ad-&gt;itc_text_classes, str, NULL, ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);
-&nbsp;&nbsp;&nbsp;elm_object_item_data_set(eoi, (void *)str);
-}
-elm_object_part_content_set(ad-&gt;gui1_layout, &quot;edje.swallow.list&quot;, ad-&gt;genlist_text_classes);
-
-evas_object_show(ad-&gt;genlist_text_classes);
-elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui1_layout);
-</pre>
-
-<p class="figure">Figure: Displaying text class properties</p> 
-<p align="center"><img alt="Displaying text class properties" src="../../images/text_class_properties.png" /></p>
-</li>
-</ol>
-
-
-<h2 id="layout" name="layout">Application Layout</h2>
-
-<p>The second screen contains 2 Edje object with text parts containing the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class. When a text class is modified, all text parts assigned to it are changed as well.</p>
-
-<p>The following example shows a simple Edje object layout:</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;edje_example&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_example&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;text part number 3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;custom_text_class&quot;;
-&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;}
-}</pre>
-
-<ol>
-<li>
-<p>After loading the Edje objects, add a spinner for changing the font size.</p>
-
-<p>Add 2 buttons for changing the text class of a specific object or setting the font size of the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class. The <strong>Set1</strong> button sets a new size for the text class of the first Edje object and the <strong>Set2</strong> button for the second object, respectively.</p>
-
-<p>The <strong>Get1</strong> and <strong>Get2</strong> buttons get the text class properties and display them on the screen.</p>
-<p>The <strong>Global</strong> button changes the text class globally, causing all Edje object parts to be changed in case they contain the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;class_list_application&quot;;
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_view&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;text part number 3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 20;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.list&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&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;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;text_view&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-
-<li>
-<p>Create a view for the new screen:</p>
-
-<pre class="prettyprint">static void
-_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
-
-&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-
-&nbsp;&nbsp;&nbsp;// Main Layout
-&nbsp;&nbsp;&nbsp;ad-&gt;gui2_layout = elm_layout_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;gui2_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;gui2_layout, edj_path, &quot;object_text_class_application&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;gui2_layout);
-
-&nbsp;&nbsp;&nbsp;// Add group1
-&nbsp;&nbsp;&nbsp;ad-&gt;edje_object_1 = edje_object_add(evas_object_evas_get(ad-&gt;win));
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object_1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;edje_object_file_set(ad-&gt;edje_object_1, edj_path, &quot;edje_example&quot;);
-&nbsp;&nbsp;&nbsp;// Check the object loading error
-&nbsp;&nbsp;&nbsp;if (edje_object_load_error_get(ad-&gt;edje_object_1) != EDJE_LOAD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;edje_object_1);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_object_1);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.group1&quot;, ad-&gt;edje_object_1);
-
-&nbsp;&nbsp;&nbsp;// Addgroup2
-&nbsp;&nbsp;&nbsp;ad-&gt;edje_object_2 = edje_object_add(evas_object_evas_get(ad-&gt;win));
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object_2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;edje_object_file_set(ad-&gt;edje_object_2, edj_path, &quot;edje_example&quot;);
-&nbsp;&nbsp;&nbsp;// Check object loading errors
-&nbsp;&nbsp;&nbsp;if (edje_object_load_error_get(ad-&gt;edje_object_2) != EDJE_LOAD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;edje_object_2);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_object_2);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.group2&quot;, ad-&gt;edje_object_2);
-
-&nbsp;&nbsp;&nbsp;// Add spinner
-&nbsp;&nbsp;&nbsp;ad-&gt;spinner = elm_spinner_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;spinner, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;spinner, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(ad-&gt;spinner, 1, 64);
-&nbsp;&nbsp;&nbsp;elm_spinner_step_set(ad-&gt;spinner, 1);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;spinner);
-&nbsp;&nbsp;&nbsp;elm_spinner_value_set(ad-&gt;spinner, 10);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.spinner&quot;, ad-&gt;spinner);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui2_layout);
-}</pre>
-
-
-<p class="figure">Figure: Second application screen</p> 
-<p align="center"><img alt="Second application screen" src="../../images/text_screen_2.png" /></p></li>
-</ol>
-
-<h2 id="all" name="all">Setting the Text Class for All Edje Objects</h2>
-
-<p>To set the text class globally, use the <span style="font-family: Courier New,Courier,monospace">edje_test_class_set()</span> function:</p>
-
-<ol>
-<li>
-<p>Add a box and pack the buttons into it. Add the <strong>Global</strong> button and register a callback for clicking:</p>
-
-<pre class="prettyprint">static void
-_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box, *button;
-&nbsp;&nbsp;&nbsp;// Add the box
-&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;gui2_layout);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, 0.0);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, 0.0);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_show(box);
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Global&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_text_class_set, ad);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.buttons&quot;, box);
-
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui2_layout);
-}</pre>
-</li>
-
-<li>
-<p>The callback contains functions for setting the text class globally:</p>
-
-<pre class="prettyprint">static void
-_edje_text_class_set(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;edje_text_class_set(&quot;custom_text_class&quot;, &quot;Sans&quot;, elm_spinner_value_get(ad-&gt;spinner));
-}</pre>
-
-<p>Clicking the <strong>Global</strong> button recalculates all text parts in every Edje object that contains the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class and changes their size.</p>
-
-
-<p class="figure">Figure: Changing the text class globally</p> 
-<p align="center"><img alt="Changing the text class globally" src="../../images/change_text_globally.png" /></p></li>
-
-</ol>
-
-<h2 id="specific" name="specific">Setting the Text Class of a Specific Object</h2>
-
-<p>To set the text class of a specific Edje object, use the <span style="font-family: Courier New,Courier,monospace">edje_object_test_class_set()</span> function.</p>
-
-<ol>
-<li>
-<p>Add 2 more buttons, <strong>Set1</strong> and <strong>Set2</strong>.</p>
- <p>The first button sets the text class of the first Edje object on the left, and the second sets the text class of the other object, respectively.</p>
-
-<pre class="prettyprint">static void
-_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Set1);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_set_1, ad);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Set2);
-&nbsp;&nbsp;&nbsp;evas_object_show(button); 
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_set_2, ad);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-}</pre>
-</li>
-
-<li>
-<p>Add callbacks:</p>
-
-<pre class="prettyprint">static void
-_edje_object_text_class_set_1(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;edje_object_text_class_set(ad-&gt;edje_object_1, &quot;custom_text_class&quot;, &quot;Sans&quot;, elm_spinner_value_get(ad-&gt;spinner));
-}
-
-static void
-_edje_object_text_class_set_2(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;edje_object_text_class_set(ad-&gt;edje_object_2, &quot;custom_text_class&quot;, &quot;Sans&quot;, elm_spinner_value_get(ad-&gt;spinner));
-}</pre>
-</li>
-
-<li>
-<p>Test the functionality:</p>
-
-<ol>
-<li>Set the size of the left object to 16.
-
-<p align="center"><img alt="Font size 16" src="../../images/object_size_16.png" /></p></li>
-
-<li>Set the size of the right object to 44.
-
-<p align="center"><img alt="Font size 44" src="../../images/object_size_44.png" /></p></li>
-
-<li>Set the size of the right object to 22.
-
-<p align="center"><img alt="Font size 22" src="../../images/object_size_22.png" /></p></li>
-</ol>
-</li>
-</ol>
-
-
-<h2 id="get" name="get">Getting the Text Class of an Object</h2>
-
-<p>To get the text class of a specific Edje object, use the <span style="font-family: Courier New,Courier,monospace">edje_object_test_class_get()</span> function.</p>
-
-<ol>
-<li>
-<p>Add 2 more buttons, <strong>Get1</strong> and <strong>Get2</strong>. The first gets the text class of the first Edje object on the left and sets into that object result, and the second gets the text class of the other object, respectively.</p>
-
-<pre class="prettyprint">static void
-_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Get1);
-&nbsp;&nbsp;&nbsp;evas_object_show(button); 
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_get_1, ad);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Get2);
-&nbsp;&nbsp;&nbsp;evas_object_show(button); 
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_get_2, ad);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-}</pre>
-</li>
-
-<li>
-<p>Add callbacks:</p>
-<pre class="prettyprint">static void
-_edje_object_text_class_get_1(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;char *font;
-&nbsp;&nbsp;&nbsp;Evas_Font_Size size;
-&nbsp;&nbsp;&nbsp;char text_class[PATH_MAX] = {0, };
-
-&nbsp;&nbsp;&nbsp;edje_object_text_class_get(ad-&gt;edje_object_1, &quot;custom_text_class&quot;, &amp;font, &amp;size);
-&nbsp;&nbsp;&nbsp;snprintf(text_class, PATH_MAX, &quot;font{%s} size{%d}&quot;, font, size);
-&nbsp;&nbsp;&nbsp;edje_object_part_text_set(ad-&gt;edje_object_1, &quot;text_example&quot;, text_class);
-}
-
-static void
-_edje_object_text_class_get_2(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;char *font;
-&nbsp;&nbsp;&nbsp;Evas_Font_Size size;
-&nbsp;&nbsp;&nbsp;char text_class[PATH_MAX] = {0, };
-
-&nbsp;&nbsp;&nbsp;edje_object_text_class_get(ad-&gt;edje_object_2, &quot;custom_text_class&quot;, &amp;font, &amp;size);
-&nbsp;&nbsp;&nbsp;snprintf(text_class, PATH_MAX, &quot;font{%s} size{%d}&quot;, font, size);
-&nbsp;&nbsp;&nbsp;edje_object_part_text_set(ad-&gt;edje_object_2, &quot;text_example&quot;, text_class);
-}</pre>
-
-
-<p>The following figure shows the result.</p>
-
-<p class="figure">Figure: Displaying text class changes</p> 
-<p align="center"><img alt="Displaying text class changes" src="../../images/display_text_classes.png" /></p>
-
-
-<p>Changing the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> for the first object changed its font size to 16 size, while changing the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> for the second object changes its font size to 22.</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>
diff --git a/org.tizen.ui.guides/html/native/efl/efl_overview_n.htm b/org.tizen.ui.guides/html/native/efl/efl_overview_n.htm
deleted file mode 100755
index 80a2aef..0000000
--- a/org.tizen.ui.guides/html/native/efl/efl_overview_n.htm
+++ /dev/null
@@ -1,135 +0,0 @@
-<!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>EFL Overview: Getting Started with EFL UI Programming</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-		  <li><a href="#features">EFL Features</a></li>	
-		  <li><a href="#characteristic">EFL Characteristics</a></li>
-		  <li><a href="#library">EFL Libraries</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">	
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>	
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>EFL Overview: Getting Started with EFL UI Programming</h1> 
-	
-<p>EFL stands for Enlightenment Foundation Libraries. Enlightenment is a project consisting of the Enlightenment window manager, EFL libraries, and various utilities and applications. The Enlightenment team needed powerful libraries to handle, among others, rendering, main loops, and events, so EFL was introduced during the development of the Enlightenment window manager to fill these gaps. EFL is now widely used outside of the Enlightenment window manager.</p>
-
-<h2 id="features" name="features">EFL Features</h2>
-
-<p>The general UI design features include:</p>	
-<ul>
-	<li>UI component support
-	<p>You can use basic core UI components, such as buttons, genlists, and sliders, and also create a layout for the Tizen native application by using container UI components.</p></li>
-	<li>Theme support
-	<p>You can create and change a theme that is a preset package containing graphical details. Tizen supports specifying the UI look and feel through a default theme.</p></li>
-	<li>Font settings
-	<p>Tizen supports various methods to <a href="font_setting_n.htm">change the font</a> of your application to another system default font or your own font.</p></li>
-	<li>Scalability
-	<p>Elementary provides a way to <a href="ui_components_n.htm#scalability">scale UI components</a> in order to be comfortably used with a finger and to make the text more readable.</p></li>
-	<li>Event handling and main loop
-	<p>The user interface relies on callbacks designed to react to EFL events generated by the system or the user. You can <a href="event_handling_n.htm">handle various events</a>, from low-level Ecore system events to Evas smart object events that happen on object collections.</p>
-	<p>The Ecore library provides a main loop abstraction that gets you data when it is available and sends you events. You can <a href="main_loop_n.htm">handle the main loop</a> and <a href="threads_n.htm">use threads</a> with the Ecore main loop.</p></li>
-	<li>UI animating with animators and effects
-	<p>Tizen supports various methods to <a href="animation_effects_n.htm">create animations and effects</a> in your application.</p></li>
-	<li>Data types and tools support
-	<p>Tizen supports a core library for data types and some useful tools.</p></li>
-	<li>Hardware input event support
-	<p>Tizen supports the <a href="hw_input_n.htm">handling of hardware input events</a>.</p></li> 
-</ul>
-
-<h2 id="characteristic" name="characteristic">EFL Characteristics</h2>
-
-<p>EFL is aimed at not only desktop computers but also touch-screen and embedded devices, making EFL applications portable to many different types of devices. Applications do not need to care about the types of devices and profiles they run on. Instead of changing the code, it is typically enough to simply configure the applications for different devices.</p>
-
-<p>The key characteristics of EFL include:</p>
-
-<ul>
- <li><strong>Performance</strong>
-  <p>The main reason Tizen adopted EFL as its native toolkit is its speed. EFL is highly optimized by using a scene graph and retained-mode rendering. EFL is fast even in software rendering.</p></li>
- <li><strong>Small memory footprint</strong>
-  <p>Despite its fast performance, EFL's memory footprint is smaller than that of other toolkits with similar features. A small memory footprint is useful in the embedded world, since embedded devices do not normally have much memory.</p></li>
- <li><strong>Back-end engine support</strong>
-  <p>EFL supports several back-end engines, such as X11 (OpenGL, Xlib, Xcb), Wayland (OpenGL, SHM), Direct Framebuffer, DRM, memory buffers, PS3 native, Windows, and Mac OS. Applications do not need to deal with each back-end engine separately.</p></li>
- <li><strong>GUI and logic separation</strong>
-  <p>EFL supports GUI layout and logic separation by having the layout description in a plain text file and the logic code in the C or C++ source files.</p></li>
- <li><strong>Themeable</strong>
-  <p>An EFL theme can be changed at runtime without restarting the application. UI components are customizable so that each application can create its own customized theme to overlay above the default theme, adding customized versions of UI components to achieve a specific look and feel.</p></li>
- <li><strong>Scalable</strong>
-  <p>EFL supports a scale factor that affects the size of objects in the application at runtime. By configuring the scale factor, applications can scale up and down as needed. The scale factor also supports a default setting that allows applications to scale nicely out-of-the-box.</p></li>
- <li><strong>Animations</strong>
-  <p>EFL supports different types of animations. Evas supports Evas maps with low-level APIs for performing 2D, 2.5D, and 3D object transformations. Edje supports pre-defined transitions and wrapping of Evas maps. Elementary supports transit APIs for various types of animations, which can be combined.</p></li>
- <li><strong>Hardware acceleration</strong>
-  <p>EFL supports OpenGL&reg; and OpenGL-ES acceleration.</p></li>
-</ul>
-	
-	
-<h2 id="library" name="library">EFL Libraries</h2>
-	
-<p>The EFL are a set of layered libraries, as shown in the following diagram:</p>
-
-<p class="figure">Figure: EFL layers</p>
-<p align="center"><img alt="EFL layers" src="../../images/efllibs.png" /></p>
-
-<p>When you create a basic EFL application, you use the following main libraries as a basis:</p>
-
-<ul>
-    <li>Elementary is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life cycle of a view, and add UI components. The full list of UI components that can be used in Tizen can be found in <a href="ui_components_mn.htm">Mobile UI Components</a> and <a href="ui_components_wn.htm">Wearable UI Components</a>.</li>
-    <li>Edje is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application. You may also want to extend the default theme. You will find more information about Edje and the EDC format in <a href="theme_n.htm">Themes</a> and <a href="component_custom_n.htm">Customizing Components</a>.</li>
-    <li>Ecore is the library which manages the main loop of your application. The main loop is one of the most important concepts you need to know about to develop an application. The main loop is where events are handled, and where you interact with the user through the callback mechanism. The main loop mechanisms are explained in the <a href="main_loop_n.htm">Handling the Main Loop</a> guide.</li>
-    <li>Evas is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows the developer to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, calculate minimum drawing calls needed to get the job done, and so on.</li>
-    <li>Eina is the basis of all the EFL libraries. Eina is a toolbox that implements an API for data types in an efficient way. It contains all the functions needed to create lists and hashes, manage shared strings, open shared libraries, and manage errors and memory pools. Eina concepts are explained in <a href="data_types_tools_n.htm">Data Types and Tools</a>.</li>
-</ul>
-
-<p>The EFL include more than just the above libraries, but the above are the most important libraries to get started with. The other libraries, such as Eet, Embryo, and Emotion, will be explored later in the programming guides and the API Reference (in <a href="../../../../org.tizen.native.mobile.apireference/index.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/index.html">wearable</a> applications).</p>
-
-<p>The <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a> shows you how to develop your first application with the EFL.</p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/elementary_animation_n.htm b/org.tizen.ui.guides/html/native/efl/elementary_animation_n.htm
deleted file mode 100755
index f956971..0000000
--- a/org.tizen.ui.guides/html/native/efl/elementary_animation_n.htm
+++ /dev/null
@@ -1,872 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Elementary Animations</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-				<li><a href="#Getting_Started">Getting Started</a></li>
-				<li><a href="#Adding_Objects">Adding Objects to an Animation</a></li>
-				<li><a href="#Add_Image">Adding Images to an Animation</a></li>
-				<li><a href="#Animation_Duration">Animation Duration</a></li>
-				<li><a href="#Acceleration_Mode">Animation Acceleration Mode (&quot;Tween Mode&quot;)</a></li>
-				<li><a href="#Animation_Repeat">Animation Repeat</a></li>
-				<li><a href="#Auto_Reverse">Animation Auto-reverse</a></li>
-				<li><a href="#Transitions2">Transitions</a></li>
-				<li><a href="#Combine_Transitions">Combining Transitions</a></li>
-				<li><a href="#Animation_Chain">Animation Chain</a></li>
-				<li><a href="#Animation_Timeline">Animation Timeline</a></li>
-				<li><a href="#Custom_Transition">Custom Transitions</a></li>
-				
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Elementary Animations</h1> 
-
-<p>Elementary transitions (<span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>) allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary transitions are mostly based on Ecore animators, but provide some transition methods at a higher level of abstraction. Elementary transitions provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
-
-<p>To use Elementary transitions, you must create an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object and define the desired transitions using the methods of this object. After the transitions are registered, they will be automatically managed: their callback functions will be called for the set duration, and they will be deleted upon completion.</p>
-
-<p>Use Elementary transitions only when Edje animations are not sufficient. Edje animations are better at handling transitions, have more flexibility, and can be manipulated inside themes. The only drawback is that Edje animations have their own definition language. If you want to code with the C language, use Elementary transitions.</p>
-
-<h2 id="Getting_Started" name="Getting_Started">Getting Started</h2>
-<p>The first thing you need to do when creating an transition with <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> is to build your transit object using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_add()</span> function:</p>
-
-<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();</pre>
-
-<p>You now have an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that will allow you to perform transitions on one or more objects. The transit object holds the information about the target objects and the transition effects that will be used. The transit object also contains information about animation duration, number of repetitions, auto-reverse, and so on. The transit object starts playing as soon as the application enters the main loop.</p>
-
-<h2 id="Adding_Objects" name="Adding_Objects">Adding Objects to an Animation</h2>
-
-<p>You can add your Evas objects to your transition using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_object_add()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_object_add(Elm_Transit *transit, Evas_Object *obj)</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the Evas object to animate.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note"><p>The Evas object can be a low-level component, such as a rectangle, but also a UI component, such as a button, image, or calendar.</p>
-<p>If you want to animate an Evas object handled by a container, such as a box, you need to either unpack the object before the animation or animate the whole container.</p></td>
-</tr>
-</tbody>
-</table>
-
-<p>If you want to know which objects are currently in your transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_objects_get()</span> function. You will get a list of all the objects that are subject to the transition.</p>
-
-<p>At any time, you can remove objects from the transition:</p>
-
-<pre class="prettyprint">elm_transit_object_remove(Elm_Transit *transit, Evas_Object *obj)</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the Evas object to remove from the transition.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">After you have added at least one Evas object to your transition, if the list of objects gets emptied somehow, be it because the transition has been terminated or all objects have been deleted, the transition will be automatically deleted. Otherwise, you will have to delete the transition by yourself using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del()</span> function. If you delete the transit while the transition is running, the transition will stop.</td>
-</tr>
-</tbody>
-</table>
-
-<h2 id="Add_Image" name="Add_Image">Adding Images to an Animation</h2>
-
-<p>If you do not want to manage UI components for animating images, <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for directly manipulating images:</p>
-
-<pre class="prettyprint">
-elm_transit_effect_image_animation_add(Elm_Transit *transit, Eina_List *images)
-</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is a list of the image paths.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">This list and its contents will be deleted after the effect ends by the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_context_free()</span> function.</td>
-</tr>
-</tbody>
-</table>
-
-<p>You can now define your image transitions exactly the same way as with any Evas object.</p>
-
-<p>The following example shows how to use <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> with images:</p>
-
-<pre class="prettyprint">char buf[PATH_MAX];
-Eina_List *images = NULL;
-Elm_Transit *transit = elm_transit_add();
-snprintf(buf, sizeof(buf), &quot;%s/images/btn_default.png&quot;, PACKAGE_DATA_DIR);
-images = eina_list_append(images, eina_stringshare_add(buf));
-snprintf(buf, sizeof(buf), &quot;%s/images/btn_hover.png&quot;, PACKAGE_DATA_DIR);
-images = eina_list_append(images, eina_stringshare_add(buf));
-elm_transit_effect_image_animation_add(transit, images);</pre>
-
-<h2 id="Animation_Duration" name="Animation_Duration">Animation Duration</h2>
-
-<p>With <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, setting the transition duration is mandatory. To set the duration, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_set()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_duration_set(Elm_Transit *transit, double duration)</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the duration in seconds.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The purpose of <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> is to abstract the low-level details of object interpolation, so you cannot create an infinite transition by specifying the duration. However, you can make your transition last forever using the repeat function.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example shows how to make a complete revolution of the target Evas object in 2 seconds:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_rotation_add(transit, 0.0, 360);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_go(transit);
-</pre>
-
-<p>To get the duration of the transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_get()</span> function.</p>
-
-<h2 id="Acceleration_Mode" name="Acceleration_Mode">Animation Acceleration Mode (&quot;Tween Mode&quot;)</h2>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> supports a number of built-in interpolation methods. By default, all interpolations are linear. If you want to change the animation&#39;s dynamics, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_set()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_tween_mode_set(Elm_Transit *transit, Elm_Transit_Tween_Mode tween_mode)</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the tween mode of the transition, which can be one of the following:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_LINEAR</span>: The default mode.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_SINUSOIDAL</span>: The transition starts with acceleration and ends with deceleration.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_DECELERATE</span>: The transition decelerates over time.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_ACCELERATE</span>: The transition accelerates over time.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_BEZIER_CURVE</span>: The transition uses an interpolated cubic-bezier curve adjusted with parameters.</li>
-</ul>
-
-<p>To get the current tween mode, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_get()</span> function.</p>
-
-<h2 id="Animation_Repeat" name="Animation_Repeat">Animation Repeat</h2>
-
-<p>To set a transition to repeat, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_set()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_repeat_times_set(Elm_Transit *transit, int repeat)</pre>
-
-<p>The function takes the following arguments:</p>
-<ul>
-<li>The transition you want to repeat.</li>
-<li>The number of times the transition repeats.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">If the <span style="font-family: Courier New,Courier,monospace;">repeat</span> argument is set to 0, the transition will not loop at all. If set to 1, the transition will run twice. If set to a negative value, the transition will repeat forever.</td>
-</tr>
-</tbody>
-</table>
-
-<p>To get the repeat value, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_get()</span> function. The default value is 0.</p>
-
-<p>The following example shows how to make an Evas object spin for 3 complete revolutions in 6 seconds:</p>
-
-<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_rotation_add(transit, 0.0, 360);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_repeat_set(transit, 3.0);
-elm_transit_go(transit);</pre>
-
-<h2 id="Auto_Reverse" name="Auto_Reverse">Animation Auto-reverse</h2>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for automatically reversing the transition once it finishes:</p>
-
-<pre class="prettyprint">elm_transit_auto_reverse_set(Elm_Transit *transit, Eina_Bool reverse)</pre>
-
-<p>The first argument is the transition you want to reverse. The second argument is the reverse state. If the reverse state is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, this function will perform the same transition backwards as soon as the first transition is complete.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">
-    <p>Reversing the transition doubles the duration of the transition. Moreover, if the transition is set to repeat, the transition will run back and forth until the repeat count is finished.</p>
-    <p>You can calculate the duration as follows if both auto-reverse and repeat are set: 2 * duration * repeat.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example shows how to make an object perform half a turn and then reverse the animation to its original position in 4 seconds:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_rotation_add(transit, 0.0, 360);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_auto_reverse_set(transit, EINA_TRUE);
-elm_transit_go(transit);
-</pre>
-
-<p>To determine whether the auto-reverse mode is enabled, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_auto_reverse_get()</span> function.</p>
-
-<h2 id="Transitions2" name="Transitions2">Transitions</h2>
-
-<p>We distinguish two main transition types:</p>
-<ul>
-<li>Transitions that are applied to the properties of objects, such as position, size, angle, and color.</li>
-<li>Transitions from one object to another, where the first object is hidden to let the second one appear.</li>
-</ul>
-<p>All transitions are based on the same principle: we set the starting and the ending values for the properties we want to animate, we then set the lifespan of the animation, and finally we inquire the preferred interpolation method (such as linear, acceleration, or bounce).</p>
-
-<p>You must declare the transitions after the parent window has been created, since the transition effects make use of the geometric properties of the parent window. If the parent window does not yet exist when calculating the interpolation, the interpolation may end up being based on wrong information.</p>
-
-<h3 id="Built-in_Transitions" name="Built-in_Transitions">Built-in Transitions</h3>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides several built-in transition definitions that are useful for the most common cases, so you that will not have to code them from scratch.</p>
-
-<p>All these built-in effects are implemented as follows:</p>
-
-<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();
-elm_transit_effect_add(transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_op,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_context_new(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_context_free);</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object that contains the target Evas objects and all the information needed to setup the transition.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_op</span>: The callback function that performs the transition (resizing interpolation in this example).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_context_new()</span>: The callback function that returns the context used in the transition for calculations. In this example, the context is the coordinates of the before and after objects.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_context_free</span>: The callback function that frees up the memory once the transition is complete.</li>
-</ul>
-
-<p>All the definitions above can be rewritten as follows:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_effect_translation_add(transit, from_x, from_y, to_x, to_y);
-</pre>
-
-<h3>Translation</h3>
-<p>To perform a translation on an Evas object, use the following method:</p>
-
-<pre class="prettyprint">
-elm_transit_effect_translation_add(Elm_Transit *transit,
-&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;Evas_Coord from_dx,
-&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;Evas_Coord from_dy,
-&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;Evas_Coord to_dx,
-&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;Evas_Coord to_dy)
-</pre>
-
-<ul>
-<li>The first argument is the transit object that contains (among other things) all the Evas objects subject to the translation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_dx</span>: The starting X coordinate (source).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_dy</span>: The starting Y coordinate (source).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_dx</span>: The ending X coordinate (destination).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_dy</span>: The ending Y coordinate (destination).</li>
-</ul>
-
-<p>The following example shows how to slide an Evas object (a rectangle) on a 45-degree diagonal, from bottom-left to top-right, at a constant speed, and in 1 second:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, rectangle);
-elm_transit_effect_translation_add(transit, 0, 0, 280, 280);
-elm_transit_duration_set(transit, 1);
-elm_transit_go(transit);
-</pre>
-
-<h3>Color Transition</h3>
-
-<p>Color transitions allow you to dynamically change the color of Evas objects. The first argument is the transit object, while the other arguments will be used to define the color transition using RGB colors. There is also an alpha channel that controls the opacity of the color (the background of the object, not the object itself).</p>
-
-<pre class="prettyprint">
-elm_transit_effect_color_add(Elm_Transit *transit,
-&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;unsigned int from_r,
-&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;unsigned int from_g,
-&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;unsigned int from_b,
-&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;unsigned int from_a,
-&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;unsigned int to_r,
-&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;unsigned int to_g,
-&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;unsigned int to_b,
-&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;unsigned int to_a)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_r</span>: The start value for &quot;Red&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_g</span>: The start value for &quot;Green&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_b</span>: The start value for &quot;Blue&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_a</span>: The start value for &quot;Alpha&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_r</span>: The end value for &quot;Red&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_g</span>: The end value for &quot;Green&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_b</span>: The end value for &quot;Blue&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_a</span>: The end value for &quot;Alpha&quot;.</li>
-</ul>
-
-<p>The following example shows how to transit a rectangle from red to blue in 3 seconds:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, rectangle);
-elm_transit_effect_color_add(transit, // Target object
-&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;255, 0, 0, 255, // From color
-&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;0, 0, 255, 255); // To color
-elm_transit_duration_set(transit, 3);
-elm_transit_go(transit);
-</pre>
-
-<h3>Rotation</h3>
-
-<pre class="prettyprint">elm_transit_effect_rotation_add(Elm_Transit *transit, float from_degree, float to_degree)</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_degree</span>: The start degree of rotation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_degree</span>: The end degree of rotation.</li>
-</ul>
-
-<p>This function can be used to perform a rotation on any Evas object. It works the same way as the other transit effects and takes two arguments for the starting and ending angles. Note that if you apply a rotation on multiple objects, they will individually mill around and not act as a group. If you want several objects to revolve around a common point, you must encapsulate the objects into a single parent object and apply the rotation to the parent object. The following example shows how to achieve this:</p>
-
-<pre class="prettyprint">
-// Parent container
-Evas_Object *parent = elm_box_add(my_window);
-evas_object_show(parent);
-elm_box_horizontal_set(parent, EINA_TRUE);
-elm_box_homogeneous_set(parent, EINA_TRUE);
-
-// Button 1
-Evas_Object *btn1 = elm_button_add(parent);
-elm_object_text_set(btn1, &quot;Btn1&quot;);
-elm_box_pack_start(parent, btn1);
-evas_object_show(btn1);
-
-// Button 2
-Evas_Object *btn2 = elm_button_add(parent);
-elm_object_text_set(btn2, &quot;Btn2&quot;);
-elm_box_pack_end(parent, btn2);
-evas_object_show(btn2);
-
-// Make the parent container do a 360 degrees spin
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, parent);
-elm_transit_effect_rotation_add(transit, 0.0, 360);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_go(transit);
-</pre>
-
-<h3>Wipe Effect</h3>
-
-<p>The wipe effect is designed to dynamically hide or show any element on the scene.</p>
-
-<pre class="prettyprint">
-elm_transit_effect_wipe_add(Elm_Transit *transit,
-&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;Elm_Transit_Effect_Wipe_Type type,
-&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;Elm_Transit_Effect_Wipe_Dir dir)
-</pre>
-
-<p>In addition to the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance passed as the first argument, the function takes the following arguments:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">type</span>: The wipe type <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Effect_Wipe_Type</span> defines whether to show or hide the target elements. The value can be one of the following:
-    <ul>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span></li>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_TYPE_SHOW</span></li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">dir</span>: The wipe direction <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Effect_Wipe_Dir</span> defines in which direction the target will progressively appear or disappear. The value can be one of the following:
-    <ul>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_LEFT</span></li>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span></li>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_UP</span></li>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_DOWN</span></li>
-    </ul>
-</li>
-</ul>
-
-<p>The following example shows how to make an object disappear progressively from left to right:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_wipe_add(transit,
-&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;ELM_TRANSIT_EFFECT_TYPE_HIDE,
-&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;ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_go(transit);
-</pre>
-
-<h3>Zoom Effect</h3>
-<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a zoom function.</p>
-
-<pre class="prettyprint">
-elm_transit_effect_zoom_add(Elm_Transit *transit,
-&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;float from_rate,
-&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;float to_rate)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_rate</span>: The starting level of the zoom.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_rate</span>: The ending level of the zoom.</li>
-</ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">from_rate</span> argument defines the scale of the target objects at the beginning of the animation. A value of 1 represents the initial scale of the objects.</p>
-
-<p>Setting the value of the <span style="font-family: Courier New,Courier,monospace;">to_rate</span> argument to 2 will double the size of the target objects (double the width and double the height). When using this effect, the width and height of a target object will remain proportional to one another. If you want to customize the zoom effect, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizing_add()</span> function.</p>
-
-<p>The following example shows how to implement a zoom-out transition. At the end of the 2-secondstransition, the animated object will be half its original size.</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_zoom_add(transit, 1, 0.5);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_go(transit);
-</pre>
-
-<h3>Resizing Effect</h3>
-
-<p>The resizing effect allows you to design an interpolation of the width and height attributes of one or more target elements.</p>
-
-<pre class="prettyprint">
-elm_transit_effect_resizing_add(Elm_Transit *transit,
-&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;Evas_Coord from_w,
-&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;Evas_Coord from_h,
-&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;Evas_Coord to_w,
-&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;Evas_Coord to_h)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_w</span>: The starting width.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_h</span>: The starting height.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_w</span>: The ending width.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_h</span>: The ending height.</li>
-</ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">from_w</span> and <span style="font-family: Courier New,Courier,monospace;">from_h</span> arguments define the size at the beginning of the animation. The <span style="font-family: Courier New,Courier,monospace;">to_w</span> and <span style="font-family: Courier New,Courier,monospace;">to_h</span> arguments define the size at the end.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">If you are planning to use this method to hide an Evas object by setting one of the length attributes to zero, consider using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_wipe_add()</span> function instead.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example shows how to make a rectangle exchange its width and height properties in a 2-second transition:</p>
-
-<pre class="prettyprint">
-Evas_Coord w, h;
-evas_object_geometry_get(my_evas_object, NULL, NULL, &amp;w, &amp;h);
-
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_resize_add(transit, // Transition object
-&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;w, h, // Original sizing
-&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;h, w); // Target sizing
-elm_transit_duration_set(transit, 2.0);
-elm_transit_go(transit);
-</pre>
-
-<h3>Flip Effect</h3>
-<p>This transition combines the target Evas objects in pairs, so that one object will show up while the other one disappears. This association relates the even objects in the transit list of objects with the odd ones. The even objects are shown at the beginning of the animation, and the odd objects shown when the transition is complete. In other words, the effect applies to each pair of objects in the order in which they are listed in the transit list of objects.</p>
-
-<p>The flip effect itself is a pseudo-3D effect where the first object in the pair is the front object and the second one is the back object. When the transition launches, the front object rotates around a preferred axis in order to let the back object take its place.</p>
-
-<pre class="prettyprint">
-elm_transit_effect_flip_add(Elm_Transit *transit,
-&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;Elm_Transit_Effect_Flip_Axis axis,
-&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;Eina_Bool cw)
-</pre>
-
-<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_X</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_Y</span></li>
-</ul>
-
-<p>The third argument is the direction of the rotation:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counter-clockwise.</li>
-</ul>
-
-<p>The following example shows how to create a coin that flips indefinitely. Note that we use images as Elementary UI components for demonstration purposes. You can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_add()</span> function if you do not want to bother creating UI components.</p>
-
-<pre class="prettyprint">
-// Coin Heads
-Evas_Object *coin_heads = elm_image_add(ad-&gt;win);
-if (!elm_image_file_set(coin_heads, IMG_DIR&quot;/coin_heads.png&quot;, NULL))
-&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
-elm_win_resize_object_add(ad-&gt;win, coin_heads);
-
-// Coin Tails
-Evas_Object *coin_tails = elm_image_add(ad-&gt;win);
-if (!elm_image_file_set(coin_tails, IMG_DIR&quot;/coin_tails.png&quot;, NULL))
-&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
-elm_win_resize_object_add(ad-&gt;win, coin_tails);
-
-// Transition definition
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, coin_heads);
-elm_transit_object_add(transit, coin_tails);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_auto_reverse_set(transit, EINA_TRUE);
-elm_transit_repeat_times_set(transit, -1);
-elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
-elm_transit_go(transit);
-</pre>
-
-<p class="figure">Figure: Coin flip</p>
-<p align="center"><img alt="Coin flip" src="../../images/coin_flip_effect.png" /></p>
-
-<h3>Resizable Flip Effect</h3>
-<p>In the flip example above, we used two objects that have the same size. However, you may sometimes want to flip from one object to another object with different size attributes. The most common example would be using buttons with dimensions that depend on their contents (such as labels). If you decide to use the classic <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_flip_add()</span> function, the size of the object will change at the moment one object becomes completely hidden and the other one begins to show up. If you wish to interpolate the size attributes as well, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizable_flip_add()</span> function:</p>
-
-<pre class="prettyprint">
-elm_transit_effect_resizable_flip_add(Elm_Transit *transit,
-&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;Elm_Transit_Effect_Flip_Axis axis,
-&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;Eina_Bool cw)
-</pre>
-
-<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_X</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_Y</span></li>
-</ul>
-
-<p>The third argument is the direction of the rotation:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counter-clockwise.</li>
-</ul>
-
-<p>This function works the exact same way as the standard flip effect function.</p>
-
-<h3>Fade Effect</h3>
-
-<p>This effect is used to transition from one Evas object to another one using a fading effect: the first object will slowly disappear to let the second object take its place.</p>
-
-<pre class="prettyprint">elm_transit_effect_fade_add(Elm_Transit *transit)</pre>
-
-<p>This effect is applied to each pair of objects in the order in which they are listed in the transit list of objects. The first object in the pair will be the before object and the second one will be the after object.</p>
-
-<p>Building on the coin flip example, the following example shows how to fade out one face of the coin while fading in the other face:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, coin_heads);
-elm_transit_object_add(transit, coin_tails);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_effect_fade_add(transit);
-elm_transit_go(transit);
-</pre>
-
-<p>If you simply want to hide an object with a fade transition, consider using a transparent after object.</p>
-
-<h3>Blend Effect</h3>
-
-<p>Another transition involving at least two Evas objects is the blend effect. This transition makes the before object blurry before the after object appears.</p>
-
-<pre class="prettyprint">elm_transit_effect_blend_add(Elm_Transit *transit)</pre>
-
-<p>The argument is the transition target of the blend effect.</p>
-
-<p>Building on the coin flip example, the following example shows how to blur out one face of the coin while blurring in the other face:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, coin_heads);
-elm_transit_object_add(transit, coin_tails);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_effect_blend_add(transit);
-elm_transit_go(transit);
-</pre>
-
-<p>If you simply want to hide an object with a blur transition, consider using a transparent after object.</p>
-
-<h2 id="Combine_Transitions" name="Combine_Transitions">Combining Transitions</h2>
-
-<p>To use multiple transitions at the same time on the same objects, simply declare the transitions one after the other.</p>
-
-<p>Building on the coin flip example, the following example shows how to roll the coin on the ground using a rotation and a translation effect:</p>
-
-<pre class="prettyprint">
-Evas_Object *coin_heads = elm_image_add(ad-&gt;win);
-if (!elm_image_file_set(coin_heads, IMG_DIR&quot;/coin_heads.png&quot;, NULL))
-&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
-evas_object_resize(coin_heads, 100, 100);
-evas_object_show(coin_heads);
-
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, coin_heads);
-elm_transit_duration_set(transit, 5.0);
-elm_transit_effect_translation_add(transit, 0, 0, 3.1415 * 2 * 100, 0);
-elm_transit_effect_rotation_add(transit, 0, 360);
-elm_transit_go(transit);
-</pre>
-
-<h2 id="Animation_Chain" name="Animation_Chain">Animation Chain</h2>
-
-<p>Now that we have listed all the effects that can be implemented using <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, we will see how to chain transitions into sequences. To create complex, chained animations without worrying about synchronization between the transitions, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_add()</span> function. This function takes as arguments two <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> objects and will automatically take care of the chaining for you: the second transition will start as soon as the first transition is finished.</p>
-
-<p>The following example shows how to move a datetime component on a square trajectory:</p>
-
-<pre class="prettyprint">
-Evas_Object *dt = elm_datetime_add(ad-&gt;win);
-evas_object_resize(dt, 350, 50);
-evas_object_show(dt);
-
-// The first transition
-Elm_Transit *t1 = elm_transit_add();
-elm_transit_object_add(t1, dt);
-elm_transit_duration_set(t1, 2);
-elm_transit_effect_translation_add(t1, 0, 0, 100, 0);
-
-// The second transition
-Elm_Transit *t2 = elm_transit_add();
-elm_transit_object_add(t2, dt);
-elm_transit_duration_set(t2, 2);
-elm_transit_effect_translation_add(t2, 100, 0, 100, 100);
-
-// The third transition
-Elm_Transit *t3 = elm_transit_add();
-elm_transit_object_add(t3, dt);
-elm_transit_duration_set(t3, 2);
-elm_transit_effect_translation_add(t3, 100, 100, 0, 100);
-
-// The fourth transition
-Elm_Transit *t4 = elm_transit_add();
-elm_transit_object_add(t4, dt);
-elm_transit_duration_set(t4, 2);
-elm_transit_effect_translation_add(t4, 0, 100, 0, 0);
-
-// Chaining the transitions
-elm_transit_chain_transit_add(t1, t2);
-elm_transit_chain_transit_add(t2, t3);
-elm_transit_chain_transit_add(t3, t4);
-
-// Starting the transitions
-elm_transit_go(t1);
-</pre>
-
-<p>Note that we cannot use transition chaining to make a loop animation, since the transit object is automatically destroyed as soon as the transition completes. Therefore, you cannot do something like this:</p>
-
-<pre class="prettyprint">elm_transit_chain_transit_add(t4, t1);</pre>
-
-<p>To create a looped animation chain, you have to use low-level components provided by the Ecore and Evas transition libraries, or you can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del_cb_set()</span> function to define a callback function for when a transition gets deleted. This way, you could recreate your objects and reiterate the transition chain as soon as the last transition ends.</p>
-
-<pre class="prettyprint">
-elm_transit_del_cb_set(Elm_Transit *transit, Elm_Transit_Del_Cb cb, void *data)
-</pre>
-
-<p>The first argument is the transition object. The second argument is the callback function to run on transition delete. The third argument is the data to pass to the callback function.</p>
-
-<p>You can severe the chain relationship between two transits by using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_del()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_chain_transit_del(Elm_Transit *transit, Elm_Transit *chain_transit)</pre>
-
-<p>The first argument is the first transition in the chain. The second argument is the second transition in the chain.</p>
-
-<p>To get the current chain transit list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transits_get()</span> function.</p>
-
-<h2 id="Animation_Timeline" name="Animation_Timeline">Animation Timeline</h2>
-
-<p>After you have defined all the properties that define your transition, start the transition with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_go()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_go(Elm_Transit *transit)</pre>
-
-<p>You can maintain full control over the execution process even after the transition has started. You can pause the transition by setting the paused argument to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>:</p>
-
-<pre class="prettyprint">elm_transit_paused_set(Elm_Transit *transit, Eina_Bool paused)</pre>
-
-<p>You can resume the transition by using the same method but setting the paused argument to <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>. If you want to know whether the transition is currently paused, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_paused_get()</span> function.</p>
-
-<p>You can remain informed about the present transition flow and get the current frame by using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_progress_value_get()</span> function. This function will return the timeline position of the animation, ranging between 0.0 (start) and 1.0 (end).</p>
-
-<h2 id="Custom_Transition" name="Custom_Transition">Custom Transitions</h2>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a standard function for defining any effect of your choosing that will be applied to some context data:</p>
-
-<pre class="prettyprint">
-elm_transit_effect_add(Elm_Transit *transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Transition_Cb transition_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect *effect,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_End_Cb end_cb)
-</pre>
-
-<p>The first argument is the transition target of the new effect. The second argument is the transition callback function. The third argument is the new effect. The fourth argument is the callback function to call at the end of the effect.</p>
-
-<p>As described earlier in this programming guide, this function embraces three callbacks that will allow you to define every aspects of your transition from its creation to its deletion. The following is an example of how to build a custom resizing animation.</p>
-
-<p>First, we define a structure capable of holding the context information about resizing an Evas object:</p>
-
-<pre class="prettyprint">
-typedef struct
-{
-&nbsp;&nbsp;&nbsp;struct _size
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;from, to;
-}
-Custom_Effect;
-</pre>
-
-<p>We can now implement our custom resizing callback function. This function takes the following arguments:</p>
-
-<ul>
-<li>The context data that holds the custom properties of our transition, which are used as parameters to calculate the interpolation.</li>
-<li>The transit object that contains the list of our Evas objects to animate and all the information about duration, auto-reverse, looping, and so on.</li>
-<li>The progress (position along the animation timeline) that ranges from 0.0 to 1.0 and allows us to calculate the desired interpolation for each frame.</li>
-</ul>
-
-<pre class="prettyprint">
-static void
-_custom_op(void *data, Elm_Transit *transit, double progress)
-{
-&nbsp;&nbsp;&nbsp;if (!data) return;
-&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
-&nbsp;&nbsp;&nbsp;Evas_Object *obj;
-&nbsp;&nbsp;&nbsp;const Eina_List *elist;
-&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect = data;
-&nbsp;&nbsp;&nbsp;const Eina_List *objs = elm_transit_objects_get(transit);
-&nbsp;&nbsp;&nbsp;if (progress &lt; 0.5)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = custom_effect-&gt;from.h + (custom_effect-&gt;to.h * progress * 2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = custom_effect-&gt;from.w;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = custom_effect-&gt;from.h + custom_effect-&gt;to.h;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = custom_effect-&gt;from.w + (custom_effect-&gt;to.w * (progress - 0.5) * 2);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;EINA_LIST_FOREACH(objs, elist, obj)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(obj, w, h);
-}
-</pre>
-
-<p>The callback function above resizes our Evas objects in two steps. During the first half of the transition, only the height changes, while the width remains the same. During the second half, it is the other way around until we get to the desired size.</p>
-
-<p>You must then define the context used by your animation:</p>
-
-<pre class="prettyprint">
-static void*
-_custom_context_new(Evas_Coord from_w, Evas_Coord from_h, Evas_Coord to_w, Evas_Coord to_h)
-{
-&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect;
-
-&nbsp;&nbsp;&nbsp;custom_effect = calloc(1, sizeof(Custom_Effect));
-&nbsp;&nbsp;&nbsp;if (!custom_effect) return NULL;
-
-&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.w = from_w;
-&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.h = from_h;
-&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.w = to_w - from_w;
-&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.h = to_h - from_h;
-
-&nbsp;&nbsp;&nbsp;return custom_effect;
-}
-</pre>
-
-<p>You must define the function that will take care of deleting all the context objects used by your custom transition and free up the allocated memory:</p>
-
-<pre class="prettyprint">
-static void
-_custom_context_free(void *data, Elm_Transit *transit __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;free(data);
-}
-</pre>
-
-<p>Finally, apply your custom transition to your <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_effect_add(transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_op,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_context_new(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_context_free);
-</pre>
-
-<p>If you want to delete an effect from your effects list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_del()</span> function.</p>
-  
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/elementary_animation_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/elementary_animation_tutorial_n.htm
deleted file mode 100755
index 5f21d4c..0000000
--- a/org.tizen.ui.guides/html/native/efl/elementary_animation_tutorial_n.htm
+++ /dev/null
@@ -1,628 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Elementary Animations</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#setup">Setting Up the Application</a></li>
-			<li><a href="#rotate">Creating a Rotation Effect</a></li>
-			<li><a href="#zoom">Creating a Zoom Effect</a></li>
-			<li><a href="#flip">Creating a Flip Effect</a></li>
-			<li><a href="#blend">Creating a Blend Transition</a></li>
-			<li><a href="#fade">Creating a Fade Effect</a></li>
-			<li><a href="#flip_y">Creating a Flip on y Axis</a></li>
-			<li><a href="#wipe">Creating a Wipe Effect</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">		
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Elementary Animations</h1>
-
-  
-<p>This tutorial demonstrates how you can use Elm Transit to create animated transitions effects, such as rotation, wiping, zooming, resizing, and fading, to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
-
-	
- <h2 id="setup" name="setup">Setting Up the Application</h2>
-
-<p>First create a basic application like explained in <a href="basic_tutorial_mn.htm">Creating Basic Mobile Interactions</a>.</p>
-
-<p>When the application is ready, create Evas objects and animate them. In this example, one single object is animated with different type of animations.</p>
-
-<p>Create the structure of our application represented by a struct named <span style="font-family: Courier New,Courier,monospace">appdata</span></p>
-
-<pre class="prettyprint">typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *label;
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-&nbsp;&nbsp;&nbsp;Evas_Object *buttonbck;
-&nbsp;&nbsp;&nbsp;Evas_Object *hbox;
-&nbsp;&nbsp;&nbsp;Evas_Object *left_vbox;
-&nbsp;&nbsp;&nbsp;Evas_Object *center_vbox;
-&nbsp;&nbsp;&nbsp;Evas_Object *right_vbox;
-&nbsp;&nbsp;&nbsp;float rt_angle, zto, zfrom;
-} appdata_s;
-</pre>
-
-<p>This structure holds the main UI components of the application:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">win</span>: the main window</li>
-<li><span style="font-family: Courier New,Courier,monospace">label</span>: the title label</li>
-<li><span style="font-family: Courier New,Courier,monospace">button</span>: a button object, the target of the animations</li>
-<li><span style="font-family: Courier New,Courier,monospace">buttonbck</span>: a button representing the back of the target button</li>
-<li><span style="font-family: Courier New,Courier,monospace">left_vbox</span>: a vertical box to place the first buttons column</li>
-<li><span style="font-family: Courier New,Courier,monospace">center_vbox</span>: a vertical box to store the second buttons column</li>
-<li><span style="font-family: Courier New,Courier,monospace">right_vbox</span>: a vertical box to store the last buttons column</li>
-<li><span style="font-family: Courier New,Courier,monospace">hbox</span>: a horizontal box to store the vertical boxes</li>
-<li><span style="font-family: Courier New,Courier,monospace">rt_angle</span>, <span style="font-family: Courier New,Courier,monospace">zto</span>, <span style="font-family: Courier New,Courier,monospace">zfrom</span>: these variables are used to store values for animations</li>
-</ul>
-
-<p>Place the UI components on the application&#39;s canvas. To make things easier, the UI component creation is split into two functions.</p>
-
-<p>The first function creates UI components on the main window, and the second in the boxes.</p>
-
-<pre class="prettyprint">create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;ad-&gt;rt_angle = 360.0;
-&nbsp;&nbsp;&nbsp;ad-&gt;zfrom = 1.0;
-&nbsp;&nbsp;&nbsp;ad-&gt;zto = 2.0;
-
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&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;// Label
-&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Effects Tutorial&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Creation a button in the app window
-&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;// Moving the button to x=50 y=100
-&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;button, 50, 100);
-
-&nbsp;&nbsp;&nbsp;// Resizing the button 100x50
-&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;button, 200, 50);
-
-&nbsp;&nbsp;&nbsp;// Showing the button
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;button);
-
-&nbsp;&nbsp;&nbsp;// Creation a back button in the app window
-&nbsp;&nbsp;&nbsp;ad-&gt;buttonbck = elm_button_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;buttonbck, &quot;Button back&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;buttonbck, 50, 100);
-&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;buttonbck, 200, 50);
-
-&nbsp;&nbsp;&nbsp;_create_btn_box(ad);
-
-} // End of create_base_gui
-</pre>
-
-<p>This function takes <span style="font-family: Courier New,Courier,monospace">appdata_s *ad</span> as its only parameter. This function is called by the creation callback <span style="font-family: Courier New,Courier,monospace">app_create</span> of the Tizen application (<span style="font-family: Courier New,Courier,monospace">event_callback.create = app_create;</span>) in the <span style="font-family: Courier New,Courier,monospace">main</span> function of the application.</p>
-
-<p>Set up the needed values like the rotation angle, the original zoom value (<span style="font-family: Courier New,Courier,monospace">zfrom</span>), and the destination zoom value (<span style="font-family: Courier New,Courier,monospace">zto</span>).</p>
-
-<pre class="prettyprint">ad-&gt;rt_angle = 360.0;
-ad-&gt;zfrom = 1.0;
-ad-&gt;zto = 2.0;
-</pre>
-
-<p>Create the main window with a title and add the <span style="font-family: Courier New,Courier,monospace">delete</span> callback:</p>
-
-<pre class="prettyprint">// Window
-ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
-{
-&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
-&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-}
-
-evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-// Label
-ad-&gt;label = elm_label_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;label, &quot;Effects Tutorial&quot;);
-evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
-evas_object_show(ad-&gt;label);
-
-// Show the window after the base GUI is set up
-evas_object_show(ad-&gt;win);
-
-ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
-</pre>
-
-<p>Next create the animation target button and the back button. Call the button box creation function with the application data as its parameter.</p>
-
-<pre class="prettyprint">_create_btn_box(ad);
-</pre>
-
-<p>Add a set of buttons to this box that starts animations on the animation target.</p>
-
-<p>Create the structure of the buttons box with three columns (vertical boxes) and one horizontal for the main container.</p>
-
-<pre class="prettyprint">// Creation of the main container box
-ad-&gt;hbox = elm_box_add(ad-&gt;win);
-elm_box_horizontal_set(ad-&gt;hbox, EINA_TRUE);
-elm_box_homogeneous_set(ad-&gt;hbox, EINA_TRUE);
-evas_object_move(ad-&gt;hbox, 10, 500);
-evas_object_show(ad-&gt;hbox);
-
-// Creation of the first column
-ad-&gt;left_vbox = elm_box_add(ad-&gt;hbox);
-elm_box_horizontal_set(ad-&gt;left_vbox, EINA_FALSE);
-elm_box_homogeneous_set(ad-&gt;left_vbox, EINA_TRUE);
-evas_object_show(ad-&gt;left_vbox);
-elm_box_pack_start(ad-&gt;hbox, ad-&gt;left_vbox);
-
-// Creation of the second column
-ad-&gt;center_vbox = elm_box_add(ad-&gt;hbox);
-elm_box_horizontal_set(ad-&gt;center_vbox, EINA_FALSE);
-elm_box_homogeneous_set(ad-&gt;center_vbox, EINA_TRUE);
-evas_object_show(ad-&gt;center_vbox);
-elm_box_pack_end(ad-&gt;hbox, ad-&gt;center_vbox);
-
-// Creation of the last column
-ad-&gt;right_vbox = elm_box_add(ad-&gt;hbox);
-elm_box_horizontal_set(ad-&gt;right_vbox, EINA_FALSE);
-elm_box_homogeneous_set(ad-&gt;right_vbox, EINA_TRUE);
-evas_object_show(ad-&gt;right_vbox);
-elm_box_pack_end(ad-&gt;hbox, ad-&gt;right_vbox);
-</pre>
-
-<p>Then create the first action button for the resize effect.</p>
-
-<pre class="prettyprint">// Button creation
-btn_resize = elm_button_add(ad-&gt;win);
-// Setting the button text
-elm_object_text_set(btn_resize, &quot;Resize&quot;);
-// Setting the hint weight policy
-evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL);
-// Showing the button
-evas_object_show(btn_resize);
-// Setting the &quot;clicked&quot; callback
-evas_object_smart_callback_add(btn_resize, &quot;clicked&quot;, _btn_resize_cb, ad);
-// Adding the button to the first column
-elm_box_pack_end(ad-&gt;left_vbox, btn_resize);
-</pre>
-
-<p><span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> defines the callback function that is to be called when the button is clicked. In this example, set a <span style="font-family: Courier New,Courier,monospace">_btn_resize_cb</span> function and pass the application data <span style="font-family: Courier New,Courier,monospace">ad</span> to this callback function.</p>
-
-<p>The callback by itself only sets a new text for the animation target button, and calls a function which will actually animate the button.</p>
-
-<pre class="prettyprint">static void _btn_resize_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
-&nbsp;&nbsp;&nbsp;// evas_object_resize(ad-&gt;button, 100, 50);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Resize&quot;);
-&nbsp;&nbsp;&nbsp;_resize_effect(ad-&gt;button);
-
-}
-</pre>
-
-<p>This function is an <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback</span> and thus needs to have its specific prototype: it does not return anything and receives three parameters:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">data</span>: data to be passed</li>
-<li><span style="font-family: Courier New,Courier,monospace">btn</span>: the object the callback is being called about</li>
-<li><span style="font-family: Courier New,Courier,monospace">ev</span>: the actual event, seldom used</li>
-</ul>
-
-<p>In this case, use <span style="font-family: Courier New,Courier,monospace">data</span> to pass the application data to the callback. However, the parameter&#39;s type is <span style="font-family: Courier New,Courier,monospace">void *</span> and not <span style="font-family: Courier New,Courier,monospace">appdata_s *</span>. Initialize a variable of the correct type with the pointer.</p>
-<pre class="prettyprint">appdata_s *ad = data;
-</pre>
-
-<p>Then use the application data in the callback function. At this point create the animation directly in the callback function, but it is more straightforward to encapsulate the animation process into a dedicated function. <span style="font-family: Courier New,Courier,monospace">_resize_effect</span> implements the animation code:</p>
-
-<pre class="prettyprint">static void _resize_effect(Evas_Object *obj)
-{
-&nbsp;&nbsp;&nbsp;// Elementary Transition declaration and creation
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
-
-&nbsp;&nbsp;&nbsp;// Adding the transition target object
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-
-&nbsp;&nbsp;&nbsp;// Setting the resize effect
-&nbsp;&nbsp;&nbsp;elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
-
-&nbsp;&nbsp;&nbsp;// Setting the transition duration
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
-
-&nbsp;&nbsp;&nbsp;// Starting the transition
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
-<p>Create an <span style="font-family: Courier New,Courier,monospace">Elm_Transit *</span> object representing the transition.</p>
-
-<pre class="prettyprint">Elm_Transit *trans = elm_transit_add();
-</pre>
-
-<p>Then add the target object to the transition</p>
-
-<pre class="prettyprint">elm_transit_object_add(trans, obj);
-</pre>
-
-<p>Add a resizing transition to the object with the origin and destination width and height in pixels.</p>
-
-<pre class="prettyprint">elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
-</pre>
-<p>100 and 50 are respectively the object&#39;s width and height when the effect begins, whereas 300 and 150 are respectively the object&#39;s width and height when the effect ends: the object grows from 100×50 to 300×150.</p>
-
-<p>After that set the transition duration with <span style="font-family: Courier New,Courier,monospace">elm_transit_duration_set</span>.</p>
-<pre class="prettyprint">elm_transit_duration_set(trans, 3.0);
-</pre>
-
-<p>The animation lasts three seconds. The duration parameter is a double.</p>
-
-<p>Now start the animation by calling <span style="font-family: Courier New,Courier,monospace">elm_transit_go</span> with the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> object.</p>
-
-<pre class="prettyprint">elm_transit_go(trans);
-</pre>
-
-<p>When the resize button is clicked, the animation target button grows.</p>
-
-<p>All the action buttons are created exactly the same way as the resize button, with a callback and an animation function.</p>
-
- <h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
-
-<p>This effect rotates the animation target button with an angle of 360&deg;. This angle is stored in the application data as <span style="font-family: Courier New,Courier,monospace">ad-&gt;rt_angle</span>.</p>
-
-<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box</span> function.</p>
-
-<pre class="prettyprint">// The rotation button
-btn_rotate = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_rotate, &quot;Rotate&quot;);
-evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_rotate);
-evas_object_smart_callback_add(btn_rotate, &quot;clicked&quot;, _btn_rotate_cb, ad);
-elm_box_pack_end(ad-&gt;center_vbox, btn_rotate);
-</pre>
-
-<p>In the rotate button callback, call the effect function with the target button as first parameter and the rotation angle as the second one.</p>
-
-<pre class="prettyprint">static void _btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Rotate&quot;);
-&nbsp;&nbsp;&nbsp;_rotation_effect(ad-&gt;button, ad-&gt;rt_angle);
-}
-</pre>
-
-<p>The animation function rotates the animation target by adding a rotation effect with <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_rotation_add</span>. This function takes three parameters:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_Transit</span></li>
-<li>the rotation position at which the effect begins</li>
-<li>the rotation position at which the effect ends</li>
-</ul>
-
-<p>Rotation starts at 0&deg; to finish at 360&deg;. The animation lasts two seconds.</p>
-
-<pre class="prettyprint">static void _rotation_effect(Evas_Object *obj, float angle)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-
-&nbsp;&nbsp;&nbsp;// Rotates the object from its original angle to given degrees to the right
-&nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(trans, 0.0, angle);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 2.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
- <h2 id="zoom" name="zoom">Creating a Zoom Effect</h2>
-
-<p>The zoom effect zooms on the animation target to make it twice bigger. Store the source rate and the destination rate in the application data using <span style="font-family: Courier New,Courier,monospace">ad-&gt;zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad-&gt;zto</span>.</p>
-<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box</span> function.</p>
-
-<pre class="prettyprint">// The zoom button
-btn_zoom = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_zoom, &quot;Zoom&quot;);
-evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_zoom);
-evas_object_smart_callback_add(btn_zoom, &quot;clicked&quot;, _btn_zoom_cb, ad);
-elm_box_pack_end(ad-&gt;right_vbox, btn_zoom);
-</pre>
-
-<p>Then add a callback function in order to perform the animation.</p>
-
-<pre class="prettyprint">static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
-&nbsp;&nbsp;&nbsp;// evas_object_resize(ad-&gt;button, 100, 50);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Zoom&quot;);
-&nbsp;&nbsp;&nbsp;_zoom_effect(ad-&gt;button, ad-&gt;zfrom, ad-&gt;zto);
-}
-</pre>
-
-<p>To create the zoom effect, use <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_zoom_add</span> with the start rate and the destination rate stored in application data (<span style="font-family: Courier New,Courier,monospace">ad-&gt;zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad-&gt;zto</span>)</p>
-
-<pre class="prettyprint">static void _zoom_effect(Evas_Object *obj, float from, float to)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-
-&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(trans, from, to);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 2.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
-
- <h2 id="flip" name="flip">Creating a Flip Effect</h2>
- 
-<p>This effect is applied to a pair of objects, in the order they are added, to the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> transition. In this example, add the animation target button and the button called buttonbck which represents the back of the target button.</p>
-
-<p>Create the action button for the flip effect:</p>
-
-<pre class="prettyprint">// The flip button
-btn_flip = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_flip, &quot;Flip x&quot;);
-evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_flip);
-evas_object_smart_callback_add(btn_flip, &quot;clicked&quot;, _btn_flip_cb, ad);
-elm_box_pack_end(ad-&gt;left_vbox, btn_flip);
-</pre>
-
-<p>The corresponding callback to create and start the animation with the two objects (target button and back button) to animate is like follows.</p>
-
-<pre class="prettyprint">static void _btn_flip_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Flip&quot;);
-&nbsp;&nbsp;&nbsp;_flip_effect(ad-&gt;button, ad-&gt;buttonbck);
-}
-</pre>
-
-<p>Create the function which runs the animation. This flip animation is created using <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_flip_add</span>. The second parameter is the axis of the flip: in this example it is the X axis, so the button flips down to top to show the back button. The last parameter is the flip direction: <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> means clockwise.</p>
-
-<pre class="prettyprint">static void _flip_effect(Evas_Object *obj, Evas_Object *obj2)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
-
-&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
- <h2 id="blend" name="blend">Creating a Blend Transition</h2>
-
-<p>The blend effect also works the same way as the flip, but without the axes or direction information. Use the back button here as well. To create the blend effect button:</p>
-
-<pre class="prettyprint">// The blend button
-btn_blend = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_blend, &quot;Blend&quot;);
-evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_blend);
-evas_object_smart_callback_add(btn_blend, &quot;clicked&quot;, _btn_blend_cb, ad);
-elm_box_pack_end(ad-&gt;center_vbox, btn_blend);
-</pre>
-
-<p>The blend transition callback is:</p>
-
-<pre class="prettyprint">static void _btn_blend_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Blend&quot;);
-&nbsp;&nbsp;&nbsp;_blend_effect(ad-&gt;button, ad-&gt;buttonbck);
-}
-</pre>
-
-<p>Create and start the blend animation. This animation is created by adding it to and <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> with <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_blend_add</span>. Add two objects, as for the flip.</p>
-
-<pre class="prettyprint">static void _blend_effect(Evas_Object *obj, Evas_Object *obj2)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
-
-&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_blend_add(trans);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
- <h2 id="fade" name="fade">Creating a Fade Effect</h2>
-
-<p>The fade effect works exactly the same way as the blend effect. First create the button:</p>
-
-<pre class="prettyprint">// The fade button
-btn_fade = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_fade, &quot;Fade&quot;);
-evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_fade);
-evas_object_smart_callback_add(btn_fade, &quot;clicked&quot;, _btn_fade_cb, ad);
-elm_box_pack_end(ad-&gt;right_vbox, btn_fade);
-</pre>
-
-<p>Then add the button&#39;s callback:</p>
-
-<pre class="prettyprint">static void _btn_fade_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Fade&quot;);
-&nbsp;&nbsp;&nbsp;_fade_effect(ad-&gt;button, ad-&gt;buttonbck);
-}
-</pre>
-
-<p>The animation function calls <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_fade_add</span> instead of <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_blend_add</span>.</p>
-
-<pre class="prettyprint">static void _fade_effect(Evas_Object *obj, Evas_Object *obj2)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
-
-&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_fade_add(trans);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
- <h2 id="flip_y" name="flip_y">Creating a Flip on y Axis</h2>
-
-<p>This is same as the flip transition, but on y axis. To create a flip on y axis:</p>
-
-<pre class="prettyprint">// The flip y button
-btn_flip_y = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_flip_y, &quot;Flip y&quot;);
-evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_flip_y);
-evas_object_smart_callback_add(btn_flip_y, &quot;clicked&quot;, _btn_flip_y_cb, ad);
-elm_box_pack_end(ad-&gt;left_vbox, btn_flip_y);
-
-static void _btn_flip_y_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Flip 2&quot;);
-&nbsp;&nbsp;&nbsp;_flip_y_effect(ad-&gt;button, ad-&gt;buttonbck);
-}
-
-static void _flip_y_effect(Evas_Object *obj, Evas_Object *obj2)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
-
-&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
- <h2 id="wipe" name="wipe">Creating a Wipe Effect</h2>
-
-<p>The wipe transition is applied on an Evas object considering the wipe type and the direction. Use <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span> to hide the button, and <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span> to do it from left to right.</p>
-
-<p>The wipe animation button is as follows:</p>
-
-<pre class="prettyprint">// The wipe button
-btn_wipe = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_wipe, &quot;Wipe&quot;);
-evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_wipe);
-evas_object_smart_callback_add(btn_wipe, &quot;clicked&quot;, _btn_wipe_cb, ad);
-elm_box_pack_end(ad-&gt;right_vbox, btn_wipe);
-</pre>
-
-<p>The wipe button callback looks like:</p>
-
-<pre class="prettyprint">static void _btn_wipe_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
-&nbsp;&nbsp;&nbsp;// evas_object_resize(ad-&gt;button, 100, 50);
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Wipe&quot;);
-&nbsp;&nbsp;&nbsp;_wipe_effect(ad-&gt;button);
-}
-</pre>
-
-<p>The animation function calls <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_wipe_add</span> with <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span> as the second parameter to hide the button and <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span> as last parameter to set the direction (left to right).</p>
-
-<pre class="prettyprint">static void _wipe_effect(Evas_Object *obj)
-{
-&nbsp;&nbsp;&nbsp; Elm_Transit *trans;
-
-&nbsp;&nbsp;&nbsp; trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp; elm_transit_object_add(trans, obj);
-&nbsp;&nbsp;&nbsp; elm_transit_effect_wipe_add(trans, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
-&nbsp;&nbsp;&nbsp; elm_transit_duration_set(trans, 3.0);
-&nbsp;&nbsp;&nbsp; elm_transit_go(trans);
-}
-</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>
diff --git a/org.tizen.ui.guides/html/native/efl/elementary_transit_effect_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/elementary_transit_effect_tutorial_n.htm
deleted file mode 100755
index a4e7e9a..0000000
--- a/org.tizen.ui.guides/html/native/efl/elementary_transit_effect_tutorial_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">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Elementary Transit Effects</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#initial">Initializing the Application Layout</a></li>
-			<li><a href="#rotation">Implementing the Rotation Effect</a></li>
-			<li><a href="#zoom">Implementing the Zoom Effect</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Elementary Transit Effects</h1>
-
-<p>This tutorial demonstrates how you can implement a variety of EFL animation effects using the APIs available in the EFL library.</p>
-
- <h2 id="initial" name="initial">Initializing the Application Layout</h2>
-
-<p>The application uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> and <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> for view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_list</span> for the composition of the screen, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
-<p>The transit is designed to apply various animated transition effects to the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. The following transition effects are supported in the Tizen native applications:</p>
-<ul>
-<li>Blend</li>
-<li>Color</li>
-<li>Fade</li>
-<li>Flip</li>
-<li>Rotation</li>
-<li>Transition</li>
-<li>Wipe</li>
-<li>Zoom</li>
-</ul>
-
-<p>The application layout is created by the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function. First, a window is created and the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component is added to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component, which acts as a view manager for the window and provides the window title functionality.</p>
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&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;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;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;nf = create_main_view(ad);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
-
-&nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main content. It consists of a naviframe containing a list. This function returns a list of naviframe object pointers for the content set.</p>
-<pre class="prettyprint">
-static Evas_Object*
-create_main_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
-&nbsp;&nbsp;&nbsp;Evas_Object *navi, *list;
-
-&nbsp;&nbsp;&nbsp;navi = elm_naviframe_add(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;list = elm_list_add(navi);
-&nbsp;&nbsp;&nbsp;elm_list_mode_set(list, ELM_LIST_COMPRESS);
-
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Blend&quot;, NULL, NULL, blend_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Color&quot;, NULL, NULL, color_cb, navi
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Fade&quot;, NULL, NULL, fade_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Flip&quot;, NULL, NULL, flip_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Rotation&quot;, NULL, NULL, rotation_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;ResizableFlip&quot;, NULL, NULL, resizable_flip_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Translation&quot;, NULL, NULL, translation_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Wipe&quot;, NULL, NULL, wipe_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Zoom&quot;, NULL, NULL, zoom_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Custom&quot;, NULL, NULL, custom_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_go(list);
-
-&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(navi, &quot;Transit&quot;, NULL, NULL, list, NULL);
-
-&nbsp;&nbsp;&nbsp;return navi;
-}
-</pre>
-
-<p>This document describes only the rotation and zoom implementations. For more information about other effects, see the <span style="font-family: Courier New,Courier,monospace">transit.c</span> file and the <span style="font-family: Courier New,Courier,monospace">elm_transit</span> document. The following figure illustrates the rotation and zoom effects.</p>
-
-<p class="figure">Figure: Rotation and zoom</p>
-<p align="center"><img alt="Rotation and zoom" src="../../images/transit_rotation_zoom.png" /></p> 
-
- <h2 id="rotation" name="rotation">Implementing the Rotation Effect</h2>
-
-<p>If the list item named by rotation includes the touch event, the callback function for this event is called.</p>
-<p>The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This implements the animation effect.</p>
-<p>To implement the rotation effect:</p>
-<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">elm_transit</span> object with the <span style="font-family: Courier New,Courier,monospace">elm_transit_add()</span> function to add the transit effect.</li>
-<li>Set the transit rotation amount and duration.</li>
-<li>To start the transit animation, use the <span style="font-family: Courier New,Courier,monospace">elm_transit_go()</span> function.</li>
-</ol>
-<pre class="prettyprint">
-static void
-rotation_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *layout = (Evas_Object *) data;
-&nbsp;&nbsp;&nbsp;Elm_Transit *transit = elm_transit_add();
-
-&nbsp;&nbsp;&nbsp;// 360 degree rotation effect in the clock-wise direction
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(transit, 0, 360);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 1);
-&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit, transit_del_cb, NULL);
-&nbsp;&nbsp;&nbsp;elm_transit_go(transit);
-}
-</pre>
-
- <h2 id="zoom" name="zoom">Implementing the Zoom Effect</h2>
-
-<p>If the list item named by zoom includes the touch event, the callback function for this event is called.</p>
-<p>The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This implements the animation effect.</p>
-<p>There are 2 transit functions: one is for the zoom effect and the other is for returning to the original effect:</p>
-<ol>
-<li>After adding the transit object, add an <span style="font-family: Courier New,Courier,monospace">evas_object</span> to get the effect.</li>
-<li>Set the zoom from the original size (1.0) to 0.4 times the original size, and set the duration.</li>
-<li>Similarly, set the zoom size (0.4) back to the original size (1.0), and set the duration.</li>
-<li>Set both of effects to be applied in sequence.</li>
-</ol>
-<pre class="prettyprint">
-static void
-zoom_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *layout = (Evas_Object *) data;
-&nbsp;&nbsp;&nbsp;// Zoom out to scale 0.6
-&nbsp;&nbsp;&nbsp;Elm_Transit *transit = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_smooth_set(transit, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit, 1.0, 0.4);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 0.5);
-
-&nbsp;&nbsp;&nbsp;// Zoom in to the original size
-&nbsp;&nbsp;&nbsp;Elm_Transit *transit2 = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_smooth_set(transit2, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit2, layout);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit2, 0.5);
-&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit2, transit_del_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;elm_transit_chain_transit_add(transit, transit2);
-&nbsp;&nbsp;&nbsp;elm_transit_go(transit);
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/evas_advanced_objects_n.htm b/org.tizen.ui.guides/html/native/efl/evas_advanced_objects_n.htm
deleted file mode 100755
index fd8c475..0000000
--- a/org.tizen.ui.guides/html/native/efl/evas_advanced_objects_n.htm
+++ /dev/null
@@ -1,379 +0,0 @@
-<!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>Advanced Manipulation of Evas Objects</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-		<li><a href="#create">Creating the Basic Application</a></li>
-		<li><a href="#attach">Attaching Data to the Object</a></li>
-		<li><a href="#scale">Using Scale Functions</a></li>
-		<li><a href="#render">Configuring the Evas Object Render Mode</a></li>
-		</ul>	
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Advanced Manipulation of Evas Objects</h1>
-
-  
-<p>This tutorial demonstrates how you can use Evas object extra functions.</p>
-
-<p>This tutorial shows how to create an application that enables scaling of an Evas text object by clicking buttons. Data setter and getter functions are used to pass the scalable object through the clicked button object to a callback.</p>
-<p>The tutorial also shows how to change the Evas object rendering mode using the extra object manipulation API. </p>  
-
-<p class="figure">Figure: Advanced Evas application</p> 
-<p align="center"><img alt="Advanced Evas application" src="../../images/evas_advanced.png" /></p>
-
-
-<h2 id="create" name="create">Creating the Basic Application</h2>
-<p>To create the basic application:</p>
-<ol>
-<li>
-<p>To use the required APIs, include the following libraries:</p>
-
-<pre class="prettyprint">#include &lt;app.h&gt;
-#include &lt;Elementary.h&gt;
-#include &lt;system_settings.h&gt;
-#include &lt;efl_extension.h&gt;</pre>
-</li>
-
-<li>
-<p>Create objects for an Elementary window and buttons for scaling and changing the object render mode. Also create a text object and 2 rectangle objects to connect to the application data structure:</p>
-
-<pre class="prettyprint">typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *scale_incr_button;
-&nbsp;&nbsp;&nbsp;Evas_Object *scale_decr_button;
-
-&nbsp;&nbsp;&nbsp;Evas_Object *render_text;
-&nbsp;&nbsp;&nbsp;Evas_Object *blend_mode_button;
-&nbsp;&nbsp;&nbsp;Evas_Object *copy_mode_button;
-&nbsp;&nbsp;&nbsp;Evas_Object *render_rect1;
-&nbsp;&nbsp;&nbsp;Evas_Object *render_rect2;
-} 
-appdata_s;</pre>
-</li>
-</ol>
-
-<h3 id="window" name="window">Creating the Elementary Window</h3>
-<p>To create an elementary window:</p>
-<ol>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function and give there the name and title of the application. To set a callback for the Back hardware button, use the <span style="font-family: Courier New,Courier,monospace">eext_object_event_callback_add()</span> function. To display the Evas object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function.</p>
-
-<pre class="prettyprint">static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;Extra object function&quot;, &quot;Extra object function&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;// Window callbacks
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Show the window
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}</pre>
-</li>
-
-<li>
-
-<p>Implement callback functions to enable closing the application: </p>
-
-<pre class="prettyprint">static void
-back_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
-}
-
-static void
-win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;ui_app_exit();
-}</pre>
-</li>
-</ol>
-
-<h3 id="create_app" name="create_app">Creating an Application</h3>
-<p>Create an Elementary application with a GUI:</p>
-
-<pre class="prettyprint">static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Create the application UI
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-
-&nbsp;&nbsp;&nbsp;// Run the main loop
-&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-}</pre>
-
-<h3 id="button" name="button">Creating Buttons</h3>
-<p>To create buttons:</p>
-<ol>
-<li>
-<p>Create the scale buttons. The <span style="font-family: Courier New,Courier,monospace">move()</span> and <span style="font-family: Courier New,Courier,monospace">resize()</span> functions configure the buttons&#39; custom geometry.</p>
-
-<pre class="prettyprint">// Scale increasing button
-ad-&gt;scale_incr_button = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;scale_incr_button, &quot;Scale +&quot;);
-evas_object_resize(ad-&gt;scale_incr_button, 120, 50);
-evas_object_move(ad-&gt;scale_incr_button, 180, 20);
-evas_object_show(ad-&gt;scale_incr_button);
-
-// Scale decreasing button
-ad-&gt;scale_decr_button = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;scale_decr_button, &quot;Scale -&quot;);
-evas_object_resize(ad-&gt;scale_decr_button, 120, 50);
-evas_object_move(ad-&gt;scale_decr_button, 180, 170);
-evas_object_show(ad-&gt;scale_decr_button);</pre>
-</li>
-
-<li>
-<p>Create the render mode change buttons:</p>
-
-<pre class="prettyprint">// Blend render mode button
-ad-&gt;blend_mode_button = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;blend_mode_button, &quot;BLEND Mode&quot;);
-evas_object_resize(ad-&gt;blend_mode_button, 190, 50);
-evas_object_move(ad-&gt;blend_mode_button, 30, 280);
-evas_object_show(ad-&gt;blend_mode_button);
-
-// Copy render mode button
-ad-&gt;copy_mode_button = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;copy_mode_button, &quot;COPY Mode&quot;);
-evas_object_resize(ad-&gt;copy_mode_button, 190, 50);
-evas_object_move(ad-&gt;copy_mode_button, 260, 280);
-evas_object_show(ad-&gt;copy_mode_button);</pre>
-</li>
-</ol>
-
-<h3 id="callback" name="callback">Creating Callbacks for the Button Click Signal</h3>
-<p>To create the callbacks:</p>
-<ol>
-<li>
-<p>Create callbacks:</p>
-
-<pre class="prettyprint">
-evas_object_smart_callback_add(ad-&gt;scale_incr_button, &quot;clicked&quot;, scale_incr_cb, NULL);
-evas_object_smart_callback_add(ad-&gt;scale_decr_button, &quot;clicked&quot;, scale_decr_cb, NULL);
-evas_object_smart_callback_add(ad-&gt;blend_mode_button, &quot;clicked&quot;, blend_mode_cb, ad);
-evas_object_smart_callback_add(ad-&gt;copy_mode_button, &quot;clicked&quot;, copy_mode_cb, ad);</pre>
-</li>
-
-<li>
-<p>Implement callback functions to enable changing the scale and render mode:</p>
-
-<pre class="prettyprint">static void
-scale_incr_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *evas_text = evas_object_data_get(obj, &quot;evas_text&quot;);
-&nbsp;&nbsp;&nbsp;if (!evas_text)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;double current_scale = evas_object_scale_get(evas_text);
-
-&nbsp;&nbsp;&nbsp;if (current_scale &gt;= 5.0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;evas_object_scale_set(evas_text, current_scale + 0.2);
-}
-
-static void
-scale_decr_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *evas_text = evas_object_data_get(obj, &quot;evas_text&quot;);
-&nbsp;&nbsp;&nbsp;if (!evas_text)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;double current_scale = evas_object_scale_get(evas_text);
-
-&nbsp;&nbsp;&nbsp;if (current_scale &lt;= 0.0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;evas_object_scale_set(evas_text, current_scale - 0.2);
-}
-
-static void
-blend_mode_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;evas_object_text_text_set(ad-&gt;render_text, &quot;EVAS_RENDER_BLEND: d = d * (1-sa) + s&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_render_op_set(ad-&gt;render_rect2, EVAS_RENDER_BLEND);
-}
-
-static void
-copy_mode_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;evas_object_text_text_set(ad-&gt;render_text, &quot;EVAS_RENDER_COPY: d = s&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_render_op_set(ad-&gt;render_rect2, EVAS_RENDER_COPY);
-}</pre>
-</li>
-</ol>
-
-<h2 id="attach" name="attach">Attaching Data to the Object</h2>
-<p>To attach data to the object:</p>
-<ol>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_set()</span> function. To create the keyword to get the data, use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_get()</span> function.</p>
-
-<p>Create the text object using the <span style="font-family: Courier New,Courier,monospace">evas_object_text_add()</span> function.</p>
-
-<pre class="prettyprint">
-evas = evas_object_evas_get(ad-&gt;win);</pre>
-</li>
-
-<li>
-<p>Create the Evas text object to be used as data attached to the button:</p>
-
-<pre class="prettyprint">
-evas_text = evas_object_text_add(evas);
-evas_object_text_text_set(evas_text, &quot;Scalable Text Object&quot;);
-evas_object_text_font_set(evas_text, &quot;Sans&quot;, 10);
-evas_object_color_set(evas_text, 50, 100, 200, 255);
-evas_object_move(evas_text, 10, 90);
-evas_object_show(evas_text);</pre>
-</li>
-</ol>
-
-<h3 id="atdata" name="atdata">Attaching Data</h3>
-
-<p>The data is passed to the function through buttons. Use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_set()</span> function for the button. Give a pointer to the attach data, and the key name to associate it with the data.</p>
-
-<pre class="prettyprint">
-evas_object_data_set(ad-&gt;scale_incr_button, &quot;evas_text&quot;, evas_text);
-evas_object_data_set(ad-&gt;scale_decr_button, &quot;evas_text&quot;, evas_text);</pre>
-
-<h3 id="getdata" name="detdata">Getting data</h3>
-
-<p>To get the file data attached to the object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_get()</span> function and give the data key name added when you attached this data:</p>
-
-<pre class="prettyprint">Evas_Object *evas_text = evas_object_data_get(obj, &quot;evas_text&quot;);</pre>
-
-<h3 id="deldata" name="deldata">Deleting data</h3>
-
-<p>To delete the data attached to the object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_del()</span> function and give the data key name added when you attached this data:</p>
-
-<pre class="prettyprint">evas_object_data_del(obj, &quot;evas_text&quot;);</pre>
-
-<h2 id="scale" name="scale">Using Scale Functions</h2>
-
-<p>To set the scale factor to a single Evas object instead of setting scale to the entire application, use the <span style="font-family: Courier New,Courier,monospace">evas_object_scale_set()</span> function. This is useful when you want scalable UI elements at runtime. However, only text and textblock objects have scaling change handlers. Other objects do not change visually on this call. In this application, the scale is defined in the button click callbacks.</p>
-
-<pre class="prettyprint">double current_scale = evas_object_scale_get(evas_text);
-
-if (current_scale &gt;= 5.0)
-&nbsp;&nbsp;&nbsp;return;
-
-evas_object_scale_set(evas_text, current_scale + 0.2);</pre>
-
-<p>Get the current scale of the Evas text object and check its maximum size. If the current size is smaller than the maximum size, the scale factor for the object is increased using the evas_object_scale_set function. The text object is updated on display and its size changes.</p>
-
-<h2 id="render" name="render">Configuring the Evas Object Render Mode</h2>
-
-<p>To change the render operation to be used for rendering the Evas object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_render_op_set()</span> function. To get the current render operation, use the <span style="font-family: Courier New,Courier,monospace">evas_object_render_op_get()</span> function.</p>
-
-<h3 id="rect" name="rect">Creating Rectangle Objects</h3>
-
-<p>Creates Evas rectangle objects to change the Evas rendering mode for them:</p>
-
-<pre class="prettyprint">// Rectangle with yellow background
-ad-&gt;render_rect1 = evas_object_rectangle_add(evas);
-evas_object_color_set(ad-&gt;render_rect1, 240, 220, 50, 191);
-evas_object_resize(ad-&gt;render_rect1, 260, 260);
-evas_object_move(ad-&gt;render_rect1, 60, 400);
-evas_object_show(ad-&gt;render_rect1);
-
-// Translucent rectangle with blue foreground
-ad-&gt;render_rect2 = evas_object_rectangle_add(evas);
-evas_object_color_set(ad-&gt;render_rect2, 25, 110, 220, 127);
-evas_object_resize(ad-&gt;render_rect2, 260, 260);
-evas_object_move(ad-&gt;render_rect2, 170, 500);
-evas_object_show(ad-&gt;render_rect2);</pre>
-
-<h3 id="change" name="change">Changing the Render Operation</h3>
-
-<p>To change the rendering mode, use the <span style="font-family: Courier New,Courier,monospace">evas_object_render_op_set()</span> function and give the render operation constant, which informs Evas of the function to use when drawing the eEvas object on canvas. By default, all evas objects use the <span style="font-family: Courier New,Courier,monospace">EVAS_RENDER_BLEND</span> mode and all colors are drawn using the &quot;d = d*(1-sa) + s&quot; formula, where &quot;d&quot; is destination color, &quot;sa&quot; is source alpha, and &quot;s&quot; is source color.</p>
-
-<p>Change the rendering mode to copy mode (d = s):</p>
-
-<pre class="prettyprint">evas_object_render_op_set(ad-&gt;render_rect2, EVAS_RENDER_COPY);</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>
diff --git a/org.tizen.ui.guides/html/native/efl/evas_basic_objects_n.htm b/org.tizen.ui.guides/html/native/efl/evas_basic_objects_n.htm
deleted file mode 100755
index 80d5933..0000000
--- a/org.tizen.ui.guides/html/native/efl/evas_basic_objects_n.htm
+++ /dev/null
@@ -1,349 +0,0 @@
-<!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>Basic Manipulation of Evas Objects</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-		<li><a href="#work">Working with Evas</a></li>
-		<li><a href="#clip">Clipping an Object</a></li>
-		<li><a href="#color">Changing Colors and Visibility</a></li>
-		<li><a href="#ref">Reference Counting</a></li>
-		<li><a href="#order">Changing the Object Order on Canvas</a></li>
-		</ul>	
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Basic Manipulation of Evas Objects</h1>
-
-  
-<p>Most Evas objects can be manipulated using generic functions.</p>
-
-<p>The list of available basic actions does not depend on the object&#39;s type. Evas implements functionality that allows performing basic manipulation, such as showing, hiding, setting, and getting geometry, bringing a layer up or down, managing color, clipping, and reference counting.</p>
-
-<p>This tutorial introduces the basic manipulations available for <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> object.</p>
-
-
-<h2 id="work" name="work">Working with Evas</h2>
-
-<ol>
-<li>
-<p>To start interacting with Evas, first create an Evas instance or get a reference to an already allocated Evas object:</p>
-
-<pre class="prettyprint">ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-Evas *evas = evas_object_evas_get(ad-&gt;win);</pre>
-</li>
-
-<li>
-<p>When an instance of Evas object exists, you can start creating basic Evas objects using obtained reference to Evas as a parent for child objects. The following example creates an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> with size 480x800, position on window at 0,0 by x and y axis, and set as a background:</p>
-
-<pre class="prettyprint">
-ad-&gt;bg = evas_object_rectangle_add(evas);
-evas_object_color_set(ad-&gt;bg, 255, 255, 255, 255);
-evas_object_resize(ad-&gt;bg, 480, 800);
-evas_object_move(ad-&gt;bg, 0, 0);
-evas_object_show(ad-&gt;bg);
-</pre>
-
-<p class="figure">Figure: Empty window</p> 
-<p align="center"><img alt="Empty window" src="../../images/empty_window.png" /></p>
-
-</li>
-</ol>
-
-
-<h2 id="clip" name="clip">Clipping an Object</h2>
-
-<p>You can set an Evas object as a clipper for another Evas object. To obtain a clipper object, create an Evas object, set its width and height parameters, and call the <span style="font-family: Courier New,Courier,monospace">evas_object_clip_set()</span> function to set the object as a clipper for other Evas objects:</p>
-
-<pre class="prettyprint">ad-&gt;img = evas_object_image_filled_add(evas);
-_app_get_resource(&quot;images/enlightenment.png&quot;, image_path, PATH_MAX);
-evas_object_image_file_set(ad-&gt;img, image_path, NULL);
-if (evas_object_image_load_error_get(ad-&gt;img) != EVAS_LOAD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;return;
-
-evas_object_geometry_get(ad-&gt;spacer, NULL, NULL, &amp;w, &amp;h);
-evas_object_name_set(ad-&gt;img, &quot;background&quot;);
-evas_object_resize(ad-&gt;img, WIDTH, HEIGHT);
-evas_object_move(ad-&gt;img, w, h);
-evas_object_show(ad-&gt;img);
-
-ad-&gt;clipper = evas_object_rectangle_add(evas);
-evas_object_geometry_get(ad-&gt;img, &amp;x, &amp;y, &amp;w, &amp;h);
-evas_object_move(ad-&gt;clipper, WIDTH / 4 + x, HEIGHT / 4 + y);
-evas_object_resize(ad-&gt;clipper, w / 2, h / 2);
-evas_object_clip_set(ad-&gt;img, ad-&gt;clipper);
-evas_object_show(ad-&gt;clipper);
-</pre>
-
-<p class="figure">Figure: Using the clipper</p> 
-<p align="center"><img alt="Using the clipper" src="../../images/using_clipper.png" /></p>
-
-
-<p>You can also unset the clipper object using the <span style="font-family: Courier New,Courier,monospace">evas_object_clip_unset()</span> function. As a result, there are 2 objects, an image and a rectangle. The rectangle is on top of the image object according to the creation order.</p>
-
-<pre class="prettyprint">static void
-_clipper_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;const char *object_name = evas_object_name_get(ad-&gt;img);
-&nbsp;&nbsp;&nbsp;if (strcmp(object_name, &quot;background&quot;) != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;if (evas_object_clip_get(ad-&gt;img) == ad-&gt;clipper)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_clip_unset(ad-&gt;img);
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_clip_set(ad-&gt;img, ad-&gt;clipper);
-}</pre>
-
-<p class="figure">Figure: Using the clipper</p> 
-<p align="center"><img alt="Using the clipper" src="../../images/using_clipper2.png" /></p>
-
-<h2 id="color" name="color">Changing Colors and Visibility</h2>
-
-<p>You can manage the object colors and visibility. To change a color of a valid <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>, use the <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span> and pass a color value:</p>
-
-<pre class="prettyprint">static void
-_color_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;int alpha, r, g, b;
-
-&nbsp;&nbsp;&nbsp;evas_object_color_get(ad-&gt;clipper, &amp;r, &amp;g, &amp;b, &amp;alpha);
-&nbsp;&nbsp;&nbsp;evas_color_argb_unpremul(alpha, &amp;r, &amp;g, &amp;b);
-
-&nbsp;&nbsp;&nbsp;if (g &gt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = b = 0;
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = b = 255;
-
-&nbsp;&nbsp;&nbsp;evas_color_argb_premul(alpha, &amp;r, &amp;g, &amp;b);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;clipper, r, g, b, alpha);
-}</pre>
-
-<p class="figure">Figure: Applying color</p> 
-<p align="center"><img alt="Applying color" src="../../images/applying_color.png" /></p>
-
-<p>You can also change the opacity of the object:</p>
-
-<pre class="prettyprint">static void
-_opacity_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;int alpha, r, g, b;
-
-&nbsp;&nbsp;&nbsp;evas_object_color_get(ad-&gt;clipper, &amp;r, &amp;g, &amp;b, &amp;alpha);
-&nbsp;&nbsp;&nbsp;evas_color_argb_unpremul(alpha, &amp;r, &amp;g, &amp;b);
-
-&nbsp;&nbsp;&nbsp;alpha -= 20;
-&nbsp;&nbsp;&nbsp;if (alpha &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alpha = 255;
-
-&nbsp;&nbsp;&nbsp;evas_color_argb_premul(alpha, &amp;r, &amp;g, &amp;b);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;clipper, r, g, b, alpha);
-}</pre>
-
-<p class="figure">Figure: Changing opacity</p> 
-<p align="center"><img alt="Changing opacity" src="../../images/changing_opacity.png" /></p>
-
-<p>You can also hide the object when it is not needed:</p>
-
-<pre class="prettyprint">static void
-_visibility_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;if (evas_object_visible_get(ad-&gt;clipper))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_hide(ad-&gt;clipper);
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;clipper);
-}</pre>
-
-<p class="figure">Figure: Changing visibility</p> 
-<p align="center"><img alt=" Changing visibility" src="../../images/applying_invisibility.png" /></p>
-
-<h2 id="ref" name="ref">Reference Counting</h2>
-
-<p>Evas has a simple reference counting mechanism that is useful for scenarios like inside a code block, callbacks exist which would possibly delete an object we are operating on afterwards.</p>
-<p>To increment the reference count of an object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_ref()</span> function. If the reference count is greater than 0, the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function is called until all references are released. References cannot go below 0 and are limited to 2&#94;32 - 1 for each object:</p>
-
-<pre class="prettyprint">ad-&gt;spacer = evas_object_rectangle_add(evas);
-evas_object_color_set(ad-&gt;spacer, 0, 255, 100, 255);
-evas_object_move(ad-&gt;spacer, 0, 0);
-evas_object_resize(ad-&gt;spacer, 120, 20);
-evas_object_show(ad-&gt;spacer);
-evas_object_ref(ad-&gt;spacer);
-
-static void
-_unref_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;if (!ad-&gt;spacer)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;if (evas_object_ref_get(ad-&gt;spacer) != 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_unref(ad-&gt;spacer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-
-int x, y, w, h;
-
-evas_object_geometry_get(ad-&gt;spacer, &amp;x, &amp;y, NULL, NULL);
-evas_object_move(ad-&gt;img, x, y);
-evas_object_geometry_get(ad-&gt;img, &amp;x, &amp;y, &amp;w, &amp;h);
-evas_object_move(ad-&gt;clipper, x + (w / 4), y + (h / 4));
-evas_object_move(ad-&gt;clipper_border, x + (w / 4) - 3, y + (h / 4) - 3);
-evas_object_del(ad-&gt;spacer);
-ad-&gt;spacer = NULL;
-}</pre>
-
-
-<p>A green rectangle is used as a padding and the clipper object calculates its x, y coordinates based on the rectangle position. The rectangle reference count is increased by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_ref()</span> function and now it is equal to 1. When the <span style="font-family: Courier New,Courier,monospace">_unref_cb</span> callback is triggered, the reference count value is higher than 0 and the <span style="font-family: Courier New,Courier,monospace">evas_object_del(ad-&gt;spacer)</span> function has no effect on the object. After the second callback call, the <span style="font-family: Courier New,Courier,monospace">evas_object_ref_get(ad-&gt;spacer)</span> function returns 0 and the <span style="font-family: Courier New,Courier,monospace">evas_object_del(ad-&gt;spacer)</span> function marks the rectangle object for deletion.</p>
-
-<p class="figure">Figure: Removing padding</p> 
-<p align="center"><img alt="Removing padding" src="../../images/removing_padding.png" /></p>
-
-<h2 id="order" name="order">Changing the Object Order on Canvas</h2>
-
-<p>By default, the placing of objects on canvas is based on their creation order.</p>
-
-<pre class="prettyprint">
-ad-&gt;order_rect1 = evas_object_rectangle_add(evas);
-evas_object_name_set(ad-&gt;order_rect1, &quot;red&quot;);
-evas_object_color_set(ad-&gt;order_rect1, 255, 0, 0, 255);
-evas_object_move(ad-&gt;order_rect1, 120, 310);
-evas_object_resize(ad-&gt;order_rect1, 200, 200);
-evas_object_show(ad-&gt;order_rect1);
-
-ad-&gt;order_rect2 = evas_object_rectangle_add(evas);
-evas_object_name_set(ad-&gt;order_rect2, &quot;blue&quot;);
-evas_object_color_set(ad-&gt;order_rect2, 0, 0, 255, 255);
-evas_object_move(ad-&gt;order_rect2, 180, 350);
-evas_object_resize(ad-&gt;order_rect2, 200, 200);
-evas_object_show(ad-&gt;order_rect2);
-</pre>
-
-<p class="figure">Figure: Default order of objects on canvas</p> 
-<p align="center"><img alt="Default order of objects on canvas" src="../../images/default_order.png" /></p>
- 
-<p>You can change the object triggering the <span style="font-family: Courier New,Courier,monospace">_object_order_cb()</span> callback, which switches the order of the rectangles.</p>
-
-<pre class="prettyprint">static void
-_object_order_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;Evas_Object *rect = evas_object_below_get(ad-&gt;order_rect2);
-&nbsp;&nbsp;&nbsp;if (!rect)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;const char *name = evas_object_name_get(rect);
-&nbsp;&nbsp;&nbsp;if (name)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(name, &quot;red&quot;) == 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_stack_below(ad-&gt;order_rect2, rect);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;rect = evas_object_below_get(ad-&gt;order_rect1);
-&nbsp;&nbsp;&nbsp;if (!rect)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;name = evas_object_name_get(rect);
-&nbsp;&nbsp;&nbsp;if (name)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(name, &quot;blue&quot;) == 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_stack_below(ad-&gt;order_rect1, rect);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-}</pre>
-
-<p class="figure">Figure: Changed order of objects on canvas</p> 
-<p align="center"><img alt="Changed order of objects on canvas" src="../../images/changed_order.png" /></p>
-
-<p>Evas allows placing an object to top and bottom layer of the canvas object stack. The <span style="font-family: Courier New,Courier,monospace">of _raise_cb</span> callback puts the canvas background on the top position of the screen. The <span style="font-family: Courier New,Courier,monospace">call of _lower_cb</span> callback puts the background to the bottom.</p>
-
-<pre class="prettyprint">static void
-_lower_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;evas_object_lower(ad-&gt;bg);
-}
-
-static void
-_raise_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;evas_object_raise(ad-&gt;bg);
-&nbsp;&nbsp;&nbsp;ad-&gt;isBgOnTop = EINA_TRUE;
-}</pre>
-
-<p class="figure">Figure: Canvas background by default and on top</p> 
-<p align="center"><img alt="Canvas background by default and on top" src="../../images/background_order.png" /></p>
-
-
-
-
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/evas_map_animation_n.htm b/org.tizen.ui.guides/html/native/efl/evas_map_animation_n.htm
deleted file mode 100755
index d265764..0000000
--- a/org.tizen.ui.guides/html/native/efl/evas_map_animation_n.htm
+++ /dev/null
@@ -1,389 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Evas Map Effects</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-				<li><a href="#Map_Points">Map Points</a></li>
-				<li><a href="#Utility_Functions">Utility Functions</a></li>
-				<li><a href="#Zoom">Zoom</a></li>
-				<li><a href="#threeD_Maps">3D Maps</a></li>
-				<li><a href="#threeD_Rotation">3D Rotation and Perspective</a></li>
-				<li><a href="#Color_Light">Color and Lighting</a></li>
-				<li><a href="#Mapping">Mapping</a></li>
-				<li><a href="#Lighting">Lighting</a></li>
-				<li><a href="#Alpha_Channel">Alpha Channel</a></li>
-				<li><a href="#Smoothing">Smoothing</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>	
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Evas Map Effects</h1> 
-
-<p>Evas Map animations allow you to apply transformations to all types of objects by way of UV mapping.</p>
-
-<p>In UV mapping, you map points in the source object to 3D space positions in the target object. This allows for rotation, perspective, scale, and other transformation effects, depending on the map. In addition, each map point can carry a multiplier color, which, if properly calculated, can be used to apply 3D shading effects on the target object.</p>
-
-<p>Evas provides both raw and easy-to-use functions for UV mapping. The raw functions allow you to create UV maps outside Evas and import them into your application, for example by loading them from an external file. The easy-to-use functions allow you to create UV maps directly in Evas by calculating the map points based on high-level parameters, such as rotation angle and ambient light.</p>
-
-<h2 id="Map_Points" name="Map_Points">Map Points</h2>
-
-<p>A map consists of a set of points. (Currently, only four points are supported.) Each point contains X and Y canvas coordinates that can be used to alter the geometry of the mapped object, and a Z coordinate that indicates the depth of the point. The Z coordinate does not normally affect the map, but several utility functions use it to calculate the right position of the point given the other parameters.</p>
-
-<p>First, create an <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object using the <span style="font-family: Courier New,Courier,monospace;">evas_map_new()</span> function. This function creates the specified number of map points (currently only up to four points). Each point is empty and ready to be modified with <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> functions.</p>
-
-<pre class="prettyprint">Evas_Map *m = evas_map_new(4);</pre>
-
-<p>If you want to get the size (number of points) of an existing map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_count_get()</span> function.</p>
-
-<p>To set the coordinates for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_set()</span> function:</p>
-
-<pre class="prettyprint">evas_map_point_coord_set(Evas_Map *m, int idx, Evas_Coord x, Evas_Coord y, Evas_Coord z)</pre>
-
-<p>The following example shows a common way to define a map that matches the geometry of a rectangle (a square in this case):</p>
-
-<pre class="prettyprint">
-evas_map_point_coord_set(m, 0, 100, 100, 0);
-evas_map_point_coord_set(m, 1, 300, 100, 0);
-evas_map_point_coord_set(m, 2, 300, 300, 0);
-evas_map_point_coord_set(m, 3, 100, 300, 0);
-</pre>
-
-<p class="figure">Figure: Map</p>
-<p align="center"><img alt="Map" src="../../images/evas_map_1.png" /></p>
-
-<p>The following examples all produce the same result as the above example, but with simpler code:</p>
-
-<ul>
-    <li>
-        <p>To create a rectangle map using the starting X and Y coordinates combined with width and height, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_geometry()</span> function:</p>
-        <pre class="prettyprint">evas_map_util_points_populate_from_geometry(Evas_Map *m, Evas_Coord x, Evas_Coord y, Evas_Coord w, Evas_Coord h, Evas_Coord z)</pre>
-        <p>The following example creates the same map as above:</p>
-        <pre class="prettyprint">evas_map_util_points_populate_from_geometry(m, 100, 100, 200, 200, 0);</pre>
-    </li>
-    <li>
-        <p>To create a map based on the geometry of a given object, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object()</span> or <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object_full()</span> function. The former sets the Z coordinate of all points to 0, whereas the latter allows you to define the same custom Z coordinate for all points:</p>
-        <pre class="prettyprint">evas_map_util_points_populate_from_object(Evas_Map *m, const Evas_Object *obj)</pre>
-        <pre class="prettyprint">evas_map_util_points_populate_from_object_full(Evas_Map *m, const Evas_Object *obj, Evas_Coord z)</pre>
-        <p>The following example creates the same map as above:</p>
-        <pre class="prettyprint">
-Evas_Object *o;
-evas_object_move(o, 100, 100);
-evas_object_resize(o, 200, 200);
-evas_map_util_points_populate_from_object(m, o);
-// OR
-evas_map_util_points_populate_from_object_full(m, o, 0);</pre>
-    </li>
-</ul>
-
-<p>You can apply several effects to an object by simply setting each point of the map to the appropriate coordinates. The following example shows how to create a simulated perspective:</p>
-
-<p class="figure">Figure: Simulated perspective</p>
-<p align="center"><img alt="Simulated perspective" src="../../images/evas_map_2.png" /></p>
-
-<pre class="prettyprint">
-evas_map_point_coord_set(m, 0, 100, 100, 0);
-evas_map_point_coord_set(m, 1, 250, 120, 0);
-evas_map_point_coord_set(m, 2, 250, 280, 0);
-evas_map_point_coord_set(m, 0, 100, 300, 0);
-</pre>
-
-<p>In the above example, the Z coordinate is unused: when setting points by hand, the Z coordinate is irrelevant.</p>
-
-<p>If you want to get the actual coordinates of a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_get()</span> function:</p>
-
-<pre class="prettyprint">evas_map_point_coord_get(const Evas_Map *m, int idx, Evas_Coord *x, Evas_Coord *y, Evas_Coord *z)</pre>
-
-<p>After you have defined the map points, apply them to your map for transformation:</p>
-
-<pre class="prettyprint">
-evas_object_map_set(o, m);
-evas_object_map_enable_set(o, EINA_TRUE);
-</pre>
-
-<p>Finally, after you are done with the map, release the memory allocated to it using the <span style="font-family: Courier New,Courier,monospace;">evas_map_free()</span> function:</p>
-
-<pre class="prettyprint">evas_map_free(m);</pre>
-
-<p>The utility functions described in the next section allow you to perform the above tasks with less coding work.</p>
-
-<h2 id="Utility_Functions" name="Utility_Functions">Utility Functions</h2>
-
-<p>Utility functions take an already configured map and allow you to easily modify it to produce specific effects. For example, to rotate an object around its center, you need the rotation angle and the coordinates of each corner of the object to perform the math required to get the new set of coordinates that needs to be set for the map. Evas provides a utility function that does the math for you:</p>
-
-<pre class="prettyprint">evas_map_util_rotate(Evas_Map *m, double degrees, Evas_Coord cx, Evas_Coord cy)</pre>
-
-<p>This function rotates the map based on the angle and the center coordinates of the rotation provided as arguments. A positive angle rotates the map clockwise, while a negative angle rotates the map counter-clockwise.</p>
-
-<p>The following example shows how to rotate an object around its center point by 45 degrees clockwise. In the following figure, the center of rotation is the red dot.</p>
-
-<pre class="prettyprint">
-evas_object_geometry_get(o, &amp;x, &amp;y, &amp;w, &amp;h);
-m = evas_map_new(4);
-evas_map_util_points_populate_from_object(m, o);
-evas_map_util_rotate(m, 45, x + (w / 2), y + (h / 2));
-evas_object_map_set(o, m);
-evas_object_map_enable_set(o, EINA_TRUE);
-evas_map_free(m);
-</pre>
-
-<p class="figure">Figure: Rotating around the center point</p>
-<p align="center"><img alt="Rotating around the center point" src="../../images/evas_map_3.png" /></p>
-
-<p>You can rotate the object around any other point simply by setting the last two arguments of the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_rotate()</span> function to the appropriate values:</p>
-
-<pre class="prettyprint">evas_map_util_rotate(m, 45, x + w - 20, y + h - 20);</pre>
-
-<p class="figure">Figure: Rotating around other points</p>
-<p align="center"><img alt="Rotating around other points" src="../../images/evas_map_4.png" /></p>
-
-<p>You can also set the center of the window as the center of the rotation using the appropriate coordinates of the Evas canvas:</p>
-
-<pre class="prettyprint">
-evas_output_size_get(evas, &amp;w, &amp;h);
-m = evas_map_new(4);
-evas_map_util_points_populate_from_object(m, o);
-evas_map_util_rotate(m, 45, w, h);
-evas_object_map_set(o, m);
-evas_object_map_enable_set(o, EINA_TRUE);
-evas_map_free(m);
-</pre>
-
-<h2 id="Zoom" name="Zoom">Zoom</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_zoom()</span> function zooms the points of the map from a center point, defined by <span style="font-family: Courier New,Courier,monospace;">cx</span> and <span style="font-family: Courier New,Courier,monospace;">cy</span>. The <span style="font-family: Courier New,Courier,monospace;">zoomx</span> and <span style="font-family: Courier New,Courier,monospace;">zoomy</span> arguments specify how much to zoom in on the X and Y axes. A value of 1.0 means no zoom, 2.0 means double the size, 0.5 means half the size, and so on. All the coordinates are global canvas coordinates.</p>
-
-<pre class="prettyprint">
-evas_map_util_zoom(Evas_Map *m, double zoomx, double zoomy, Evas_Coord cx, Evas_Coord cy)
-</pre>
-
-<h2 id="threeD_Maps" name="threeD_Maps">3D Maps</h2>
-
-<p>Maps can also be used to achieve a 3D effect. In a 3D effect, the Z coordinate of each point is meaningful: the higher the value, the further back the point is located. Smaller values (usually negative) mean that the point is closer to the user.</p>
-
-<p>3D also introduces the concept of the back face of an object. An object is said to be facing the user when all its points are placed in a clockwise formation, as shown in the left map in the following figure. Rotating the map around its Y axis swaps the order of the points into a counter-clockwise formation, making the object face away from the user, as shown in the right map in the following figure. The back face is especially relevant in lighting (see below).</p>
-
-<p class="figure">Figure: Rotating around the Y axis</p>
-<p align="center"><img alt="Rotating around the Y axis" src="../../images/evas_map_5.png" /></p>
-
-<p>To determine whether a map is facing the user, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_clockwise_get()</span> function. This function returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the map is facing the user and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if the map is facing away from the user. This is normally done after all the other operations are applied to the map.</p>
-
-<pre class="prettyprint">evas_map_util_clockwise_get(Evas_Map *m)</pre>
-
-<h2 id="threeD_Rotation" name="threeD_Rotation">3D Rotation and Perspective</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_rotate()</span> function transforms a map to apply a 3D rotation to the mapped object. You can apply the rotation around any point in the canvas (including a Z coordinate). You can also apply the rotation around any of the three axes.</p>
-
-<pre class="prettyprint">evas_map_util_3d_rotate(Evas_Map *m, double dx, double dy, double dz, Evas_Coord cx, Evas_Coord cy, Evas_Coord cz)</pre>
-
-<p>Starting from this simple setup, and setting the maps so that the blue square rotates around the Y axis, we get the following:</p>
-
-<p class="figure">Figure: 3D rotation</p>
-<p align="center"><img alt="3D rotation" src="../../images/evas_map_6.png" /></p>
-
-<p>A simple overlay over the image shows the original geometry of each object and the axis around which they are being rotated. The Z axis is not shown, since it is orthogonal to the screen. To show the Z axis, that is, to add 3D perspective to the transformation, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_perspective()</span> function on the map after its position has been set:</p>
-
-<pre class="prettyprint">evas_map_util_3d_perspective(Evas_Map *m, Evas_Coord px, Evas_Coord py, Evas_Coord z0, Evas_Coord foc)</pre>
-
-<p>The result makes the vanishing point the center of each object:</p>
-
-<p class="figure">Figure: Adding perspective</p>
-<p align="center"><img alt="Adding perspective" src="../../images/evas_map_7.png" /></p>
-
-<h2 id="Color_Light" name="Color_Light">Color and Lighting</h2>
-
-<p>Each point in a map can be set to a color, which will be multiplied with the object’s own color and linearly interpolated between adjacent points. To set the color separately for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_color_set()</span> function:</p>
-
-<pre class="prettyprint">evas_map_point_color_set(Evas_Map *m, int idx, int r, int g, int b, int a)</pre>
-
-<p>To set the same color for every point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_color_set()</span> function:</p>
-
-<pre class="prettyprint">evas_map_util_points_color_set(Evas_Map *m, int r, int g, int b, int a)</pre>
-
-<p>When using a 3D effect, colors can be used to improve its look by simulating a light source. The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_lighting()</span> function makes this task easier by taking the coordinates of the light source and its color, along with the color of the ambient light. Evas then sets the color of each point based on its distance to the light source, the angle at which the object is facing the light source, and the ambient light. Here, the orientation of each point is important.</p>
-
-<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
-
-<p>If the map points are defined counter-clockwise, the object faces away from the user and is therefore obscured, since no light is reflecting back from it.</p>
-
-<p class="figure">Figure: Obscured object</p>
-<p align="center"><img alt="Obscured object" src="../../images/evas_map_8.png" /></p>
-
-<h2 id="Mapping" name="Mapping">Mapping</h2>
-
-<p>Images need special handling when mapped. While Evas can easily handle objects, it is completely oblivious to the contents of images. This means that each point in a map needs to be mapped to a specific pixel in the source image. Failing to do this can result in unexpected behavior.</p>
-
-<p>Let's get started with the following three images, each sized at 200 × 200 pixels:</p>
-
-<p class="figure">Figure: Starting point</p>
-<p align="center"><img alt="Starting point" src="../../images/evas_map_9.png" /></p>
-
-<p>The following three images illustrate the case where a map is set to an image object without setting the right UV mapping for each map point. The objects themselves are mapped properly to their new geometries, but the images are not displayed correctly within the mapped objects.</p>
-
-<p class="figure">Figure: Questionable result</p>
-<p align="center"><img alt="Questionable result" src="../../images/evas_map_10.png" /></p>
-
-<p>To transform an image correctly, Evas needs to know how to handle the image within the map. You can do this using the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_image_uv_set()</span> function, which allows you to map a given point in a map to a given pixel in a source image:</p>
-
-<pre class="prettyprint">
-evas_map_point_image_uv_set(Evas_Map *m, int idx, double u, double v)
-</pre>
-
-<p>To match our example images to the maps above, all we need is the size of each image, which we can get using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_size_get()</span> function.</p>
-
-<pre class="prettyprint">
-// Tux 1: Some cropping and stretch up
-evas_map_point_image_uv_set(m, 0, 0, 20);
-evas_map_point_image_uv_set(m, 1, 200, 20);
-evas_map_point_image_uv_set(m, 2, 200, 180);
-evas_map_point_image_uv_set(m, 3, 0, 180);
-evas_object_map_set(tux1, m);
-evas_object_map_enable_set(tux1, EINA_TRUE);
-
-// Inverted texture for shadow:
-evas_map_point_image_uv_set(m, 0, 0, 180);
-evas_map_point_image_uv_set(m, 1, 200, 180);
-evas_map_point_image_uv_set(m, 2, 200, 20);
-evas_map_point_image_uv_set(m, 3, 0, 20);
-evas_object_map_set(tux1_shadow, m);
-evas_object_map_enable_set(tux1_shadow, EINA_TRUE);
-
-// Tux 2: Make it fit to the map:
-evas_map_point_image_uv_set(m, 0, 0, 0);
-evas_map_point_image_uv_set(m, 1, 200, 0);
-evas_map_point_image_uv_set(m, 2, 200, 200);
-evas_map_point_image_uv_set(m, 3, 0, 200);
-evas_object_map_set(tux2, m);
-evas_object_map_enable_set(tux2, EINA_TRUE);
-
-// Tux 3: Zoom and fit relatively to image size
-evas_object_image_size_get(evas_object_image_source_get(tux3), &amp;w, &amp;h);
-evas_map_point_image_uv_set(m, 0, 0.1 * w, 0.1 * h);
-evas_map_point_image_uv_set(m, 1, 0.9 * w, 0.1 * h);
-evas_map_point_image_uv_set(m, 2, 0.9 * w, 0.9 * h);
-evas_map_point_image_uv_set(m, 3, 0.1 * w, 0.9 * h);
-evas_object_map_set(tux3, m);
-evas_object_map_enable_set(tux3, EINA_TRUE);
-</pre>
-
-<p class="figure">Figure: Correct result</p>
-<p align="center"><img alt="Correct result" src="../../images/evas_map_11.png" /></p>
-
-<p>You can also set a map to use only part of an image, or you can even map the points in inverted order. Combined with the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_source_set()</span> function, you can achieve more interesting results still.</p>
-
-<h2 id="Lighting" name="Lighting">Lighting</h2>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> allows you to define an ambient light and a light source within the scene. Both of these light sources have their own colors.</p>
-
-<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
-
-<p>The above function is used to apply lighting calculations (from a single light source) to a given map. The red, green, and blue values of each vertex will be modified to reflect the lighting based on the light source coordinates, its color, the ambient color, and the angle at which the map faces the light source. The points of a surface should be defined in a clockwise formation if the surface is facing the user, since faces have a logical side for lighting.</p>
-
-<p>To get the reflections (gradient) in the shadow of our previous example, you have to define a source of light close enough to the user and a very bright ambient light, for example:</p>
-
-<pre class="prettyprint">
-evas_map_util_3d_lighting(m, // Evas_Map object
-&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;250/2, 150/2, -100, // Spot light coordinates
-&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;255, 255, 255, // Spot light color
-&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;200, 200, 200); // Ambient light color
-</pre>
-
-<h2 id="Alpha_Channel" name="Alpha_Channel">Alpha Channel</h2>
-
-<p>You can also use an alpha channel on your map by enabling the alpha channel feature:</p>
-
-<pre class="prettyprint">evas_map_alpha_set(Evas_Map *m, Eina_Bool enabled)</pre>
-
-<p>Next, set the alpha value separately for each map point:</p>
-
-<pre class="prettyprint">evas_map_point_color_set(Evas_Map *m, int idx, int r, int g, int b, int a)</pre>
-
-<p>Alternatively, you can set the same alpha value to all map points:</p>
-
-<pre class="prettyprint">evas_map_util_points_color_set(Evas_Map *m, int r, int g, int b, int a)</pre>
-
-<p>The following code sets the shadow transparency for the first image in the above three-image example:</p>
-
-<pre class="prettyprint">
-// Set object transparency to 50%:
-evas_map_util_points_color_set(m, 255, 255, 255, 127);
-
-// Tux&#39;s head is almost invisible in the shadow:
-evas_map_point_color_set(m, 3, 255, 255, 255, 15);
-evas_map_point_color_set(m, 4, 255, 255, 255, 15);
-</pre>
-
-<h2 id="Smoothing" name="Smoothing">Smoothing</h2>
-
-<p>To enable smoothing when rendering a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_set()</span> function:</p>
-
-<pre class="prettyprint">evas_map_smooth_set(Evas_Map *m, Eina_Bool enabled)</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object to apply smoothing to. The second argument sets whether to enable the smoothing:</p>
-
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>: Enable smoothing.</li>
-    <li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>: Disable smoothing.</li>
-</ul>
-
-<p>If the object is of a type that has its own smoothing settings, the smoothing settings must be disabled for both the object and the map. Map smoothing is enabled by default. To check whether map smoothing is enabled, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_get()</span> function.</p>
-  
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/evas_map_effects_n.htm b/org.tizen.ui.guides/html/native/efl/evas_map_effects_n.htm
deleted file mode 100755
index 3184eee..0000000
--- a/org.tizen.ui.guides/html/native/efl/evas_map_effects_n.htm
+++ /dev/null
@@ -1,253 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Evas Map Effects</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-		<li><a href="#create">Creating the Basic Application</a></li>
-		<li><a href="#data">Creating Map Data</a></li>
-		<li><a href="#apply">Applying the Map to the Evas Object</a></li>
-		<li><a href="#clear">Clearing Map Data and Enabling Map Features</a></li>
-		</ul>	
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Evas Map Effects</h1>
-
-  
-<p>This tutorial demonstrates how you can use Evas map functions to create an application in which you can change the map point coordinates of Evas objects. You can modify the map point U and V texture source point using Evas map mapping APIs. &quot;U&quot; and &quot;V&quot; denote the axes of the 2D texture.</p>
-
-<p class="figure">Figure: Evas map mapping application</p> 
-<p align="center"><img alt="Evas map mapping application" src="../../images/evas_map_effect.png" /></p>
- 
-<h2 id="create" name="create">Creating the Basic Application</h2>
-<p>To create a basic application:</p>
-<ol>
-<li>
-<p>To use the required APIs, include the following libraries:</p>
-
-<pre class="prettyprint">#include &lt;app.h&gt;
-#include &lt;Elementary.h&gt;
-#include &lt;system_settings.h&gt;
-#include &lt;efl_extension.h&gt;</pre>
-</li>
-
-<li>
-<p>Create an Evas object for an Elementary window and a button for mapping the map information:</p>
-
-<pre class="prettyprint">typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-Evas_Object *default_btn;
-} 
-appdata_s;</pre>
-</li>
-<li>
-<p>To create an Elementary window, use the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function and give the name and title of the application. To set a callback on hardware Back button, the use <span style="font-family: Courier New,Courier,monospace">eext_object_event_callback_add()</span> function. To display the Evas object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function.</p>
-
-<pre class="prettyprint">static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp; Evas_Object *evas_text = NULL;
-&nbsp;&nbsp;&nbsp; Evas *evas&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; = NULL;
-
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;Extra object function&quot;, &quot;Extra object function&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;// Window callbacks
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;evas = evas_object_evas_get(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;evas_text = evas_object_text_add(evas);
-&nbsp;&nbsp;&nbsp;evas_object_text_text_set(evas_text, &quot;Evas Map Mapping&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_text_font_set(evas_text, &quot;Sans&quot;, 18);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(evas_text, 50, 100, 200, 255);
-&nbsp;&nbsp;&nbsp;evas_object_move(evas_text, 10, 90);
-&nbsp;&nbsp;&nbsp;evas_object_show(evas_text);
-
-&nbsp;&nbsp;&nbsp;// Evas map source code
-
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}</pre>
-</li>
-
-<li>
-<p>Implement callback functions to enable closing the application:</p>
-
-<pre class="prettyprint">static void
-back_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
-}
-
-static void
-win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;ui_app_exit();
-}</pre>
-</li>
-
-<li>
-<p>Create an elementary application with a GUI:</p>
-
-<pre class="prettyprint">static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Create the application UI
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-
-&nbsp;&nbsp;&nbsp;// Run the main loop
-&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-}</pre>
-</li>
-
-<li>
-<p>Create the button for mapping. Use the move and resize functions to configure the button&#39;s custom geometry:</p>
-
-<pre class="prettyprint">// Create a button for mapping
-ad-&gt;button = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;button, &quot;Evas Map Mapping &quot;);
-evas_object_move(ad-&gt;button, 15, 100);
-evas_object_resize(ad-&gt;button, ELM_SCALE_SIZE(250), ELM_SCALE_SIZE(200));
-evas_object_show(ad-&gt;button);
-
-// Create a default button
-ad-&gt;default_btn = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;default_btn, &quot;Default Button &quot;);
-evas_object_move(ad-&gt;default_btn, 15, 300);
-evas_object_resize(ad-&gt;default_btn, ELM_SCALE_SIZE(250), ELM_SCALE_SIZE(200));
-evas_object_show(ad-&gt;default_btn);</pre>
-</li>
-</ol>
-
-<h2 id="data" name="data">Creating Map Data</h2>
-
-<p>By using the <span style="font-family: Courier New,Courier,monospace">evas_map_new()</span> and <span style="font-family: Courier New,Courier,monospace">evas_map_*()</span> functions, you can create map data to be attached to the button:</p>
-
-<ol>
-<li>
-<p>Get the <span style="font-family: Courier New,Courier,monospace">Evas_Map</span> object to create map data using the <span style="font-family: Courier New,Courier,monospace">evas_map_new()</span> function:</p>
-
-<pre class="prettyprint">
-Evas_Map *map;
-map = evas_map_new(4);</pre>
-
-<p>The map of transformation points is used later with an Evas object.</p>
-</li>
-
-<li>
-<p>Set the coordinates for each point using the <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set()</span> function. You can apply several effects to the Evas object by setting each point of the map to the right coordinates.</p>
-
-<pre class="prettyprint">// Set map coordinates
-evas_map_point_coord_set(map, 0, 15, 100, 0);
-evas_map_point_coord_set(map, 1, 265, 100, 0);
-evas_map_point_coord_set(map, 2, 265, 300, 0);
-evas_map_point_coord_set(map, 3, 15, 400, 0);</pre>
-</li>
-
-<li>
-<p>Set UV data using the <span style="font-family: Courier New,Courier,monospace">evas_map_point_image_uv_set()</span> function, which informs the map of the correct pixels in the image it is mapping:</p>
-
-<pre class="prettyprint">// Set image UV
-evas_map_point_image_uv_set(map, 0, 0, 0);
-evas_map_point_image_uv_set(map, 1, 500, 50);
-evas_map_point_image_uv_set(map, 2, 500, 400);
-evas_map_point_image_uv_set(map, 3, 0, 200);</pre>
-</li>
-</ol>
-
-
-<h2 id="apply" name="apply">Applying the Map to the Evas Object</h2>
-
-<p>To set the map on a given object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_map_set()</span> function for the object. A map contains 4 points, each having canvas x, y coordinates with an optional z point value for perspective correction, if available. Each point also has U an V coordinates.</p>
-
-<pre class="prettyprint">// Apply map to button evas object
-
-evas_object_map_set(ad-&gt;button, map);</pre>
-
-<h2 id="clear" name="clear">Clearing Map Data and Enabling Map Features</h2>
-
-<p>Free the map data and all memory associated with it when you no longer need it:</p>
-
-<pre class="prettyprint">// Free map resources
-
-evas_map_free(map);</pre>
-
-<p>You can enable or disable the map features for the object. When enabled, the object geometry is saved, and the new geometry changes its position and size to reflect the set map geometry.</p>
-
-<pre class="prettyprint">// Enable map features
-
-evas_object_map_enable_set(ad-&gt;button, EINA_TRUE);</pre>
-
-
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/evas_objects_n.htm b/org.tizen.ui.guides/html/native/efl/evas_objects_n.htm
deleted file mode 100755
index d0a4a7d..0000000
--- a/org.tizen.ui.guides/html/native/efl/evas_objects_n.htm
+++ /dev/null
@@ -1,824 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Evas Objects</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#renderable">Primitive Renderable Objects</a></li>
-            <li><a href="#smart">Primitive Smart Objects</a></li>
-			<li><a href="#container_objects">Primitive Container Objects</a></li>
-			<li><a href="#image">Image Objects</a></li>
-			<li><a href="#block">Textblock Objects</a></li>
-			<li><a href="#clip">Clipping Objects</a></li>
-			<li><a href="#map">Mapping Objects</a></li>
-        </ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
-		</ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Evas Objects</h1>
-  
-<p>An Evas object is the most basic visual entity used in Evas. Everything, be it a single line or a complex list of UI components, is an Evas object.</p>
-
-<h2 id="renderable" name="renderable">Primitive Renderable Objects</h2>
-<p>Primitive objects are the base upon which to build a complex interface: rectangles, lines, polygons, <a href="#image">images</a>, <a href="#block">textblocks</a>, and texts.</p>
-<h3>Rectangle</h3>
-<p>There is only one function to deal with rectangle objects. However, the rectangle is manipulated using the generic evas object functions.</p>
-<p>The evas rectangle serves a number of key functions when working on Evas programs.</p>
-<ul>
-<li>background</li>
-<li>debugging</li>
-<li>clipper</li>
-</ul>
-
-<h4>Background</h4>
-<p>A common requirement of Evas programs is to have a solid color background, which can be accomplished with the following code.</p>
-<pre class="prettyprint">Evas_Object *bg = evas_object_rectangle_add(evas_canvas);
-
-// Here we set the rectangles red, green, blue and opacity levels
-evas_object_color_set(bg, 255, 255, 255, 255); // opaque white background
-evas_object_resize(bg, WIDTH, HEIGHT); // covers full canvas
-evas_object_show(bg);
-</pre>
-
-<h4>Debugging</h4>
-<p>When debugging visual issues with evas programs, the rectangle is a useful tool. The rectangle&#39;s simplicity means that it is easier to pinpoint issues with it than with more complex objects. A common technique to use when writing an evas program and not getting the desired visual result is to replace an object for a solid color rectangle and seeing how it interacts with the other elements. This often allows us to notice clipping, parenting or positioning issues. Once the issues are identified and corrected, the rectangle can be replaced for the original object, and in all likelihood any remaining issues are specific to that object&#39;s type.</p>
-
-<h4>Clipping</h4>
-<p><a href="#clip">Clipping</a> serves two main functions:</p>
-<ul>
-<li>limiting visibility</li>
-<li>applying a layer of color to an object</li>
-</ul>
-
-
-<h3>Text</h3>
-<p>An Evas text object shows a basic single-line single-style text.</p>
-<pre class="prettyprint">Evas_Object *text = evas_object_text_add(evas_canvas);
-evas_object_text_text_set(text, &quot;some text&quot;);
-evas_object_color_set(text, 127, 0, 0, 127);
-evas_object_show(text);
-</pre>
-
-<p>To set the text, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_set(text, some_text)</span>. You can set the current text with <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_get(text)</span>.</p>
-<p>To set the font, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set(text, font, size)</span>:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">text</span>: The text object</li>
-<li><span style="font-family: Courier New,Courier,monospace">font</span>: The font name you want to use</li>
-<li><span style="font-family: Courier New,Courier,monospace">size</span>: The font size you want to use. To query the current font, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set(text, font, size)</span>.</li>
-</ul>
-<p>To set the text style, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_set(text, style)</span>. The following styles are supported:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_PLAIN</span>: Plain, standard text</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW</span>: Text with shadow underneath</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE</span>: Text with an outline</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SOFT_OUTLINE</span>: Text with a soft outline</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_GLOW</span>: Text with a glow effect</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE_SHADOW</span>: Text with both outline and shadow effects</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_FAR_SHADOW</span>: Text with (far) shadow underneath</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE_SOFT_SHADOW</span>: Text with outline and soft shadow effects combined</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SOFT_SHADOW</span>: Text with (soft) shadow underneath</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_FAR_SOFT_SHADOW</span>: Text with (far soft) shadow underneath</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM_RIGHT</span>: Shadow growing to bottom right</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM</span>: Shadow growing to the bottom</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM_LEFT</span>: Shadow growing to bottom left</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_LEFT</span>: Shadow growing to the left</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP_LEFT</span>: Shadow growing to top left</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP</span>: Shadow growing to the top</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP_RIGHT</span>: Shadow growing to top right</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_RIGHT</span>: Shadow growing to the right. To query the current style, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_get(text)</span>.</li>
-</ul>
-<p>If the text does not fit, make an ellipsis on it by using <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_set(text, ellipsis)</span>. The (float) value specifies, which part of the text is shown.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">0.0</span>: The beginning is shown and the end trimmed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">1.0</span>: The beginning is trimmed and the end shown.</li>
-<li>Any value in between means that both ends of the text have ellipsis and the set part is shown.</li>
-<li><span style="font-family: Courier New,Courier,monospace">-1.0</span>: Ellipsis is disabled. To query the current ellipsis value, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_get(text)</span>.</li>
-</ul>
-<p>When the text style is set to glow, set the glow color using <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. The effect is placed at a short distance from the text but not touching it. For glows set right at the text, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_set(text, r, g, b, a)</span>. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_get(text, r, g, b, a)</span>, respectively <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_get(text, r, g, b, a)</span>.</p>
-<p>If your text style is set to display a shadow, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_get(text, r, g, b, a)</span></p>
-<p>If your text style is set to display an outline, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_get(text, r, g, b, a)</span></p>
-
-
-<h2 id="smart" name="smart">Primitive Smart Objects</h2>
-<p>A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object&#39;s user. They could be, for example, a group of objects that move together, or implementations of whole complex UI components, providing some intelligence and extension to simple Evas objects.</p>
-
-<h2 id="container_objects" name="container_objects">Primitive Container Objects</h2>
-<p>A container is a Smart object that holds children Evas objects in a specific fashion.</p>
-<h3>Table</h3>
-<p>A table is a smart object that packs children using a tabular layout.</p>
-<pre class="prettyprint">table = evas_object_table_add(evas);
-evas_object_table_homogeneous_set(table, EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE);
-evas_object_table_padding_set(table, 0, 0);
-evas_object_resize(table, WIDTH, HEIGHT);
-evas_object_show(table);
-
-rect = evas_object_rectangle_add(evas);
-evas_object_color_set(rect, 255, 0, 0, 255);
-evas_object_size_hint_min_set(rect, 100, 50);
-evas_object_show(rect);
-evas_object_table_pack(table, rect, 1, 1, 2, 1);
-
-rect = evas_object_rectangle_add(d.evas);
-evas_object_color_set(rect, 0, 255, 0, 255);
-evas_object_size_hint_min_set(rect, 50, 100);
-evas_object_show(rect);
-evas_object_table_pack(table, rect, 1, 2, 1, 2);
-
-rect = evas_object_rectangle_add(d.evas);
-evas_object_color_set(rect, 0, 0, 255, 255);
-evas_object_size_hint_min_set(rect, 50, 50);
-evas_object_show(rect);
-evas_object_table_pack(table, rect, 2, 2, 1, 1);
-
-rect = evas_object_rectangle_add(d.evas);
-evas_object_color_set(rect, 255, 255, 0, 255);
-evas_object_size_hint_min_set(rect, 50, 50);
-evas_object_show(rect);
-evas_object_table_pack(table, rect, 2, 3, 1, 1);
-</pre>
-
-<p>In this example, we add a non-homogeneous table to the canvas with its padding set to 0.</p>
-<p>We then add four different colored rectangles with different properties.</p>
-<ul>
-<li>the first one, at the first column and first line, spans two columns and one line</li>
-<li>the second one, at the first column and second line, spans one columns and two lines</li>
-<li>the third one, at the second column and second line, fits in one cell</li>
-<li>the fourth one, at the second column and third line, also fits in one cell</li>
-</ul>
-<p>To create a table, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_add(evas)</span>.</p>
-<p>To set the table layout (the cells), use <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_set(table, homogeneous)</span>. The following values can be homogeneous:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE</span>: This default value has columns and rows calculated based on hints of individual cells. This is flexible, but much heavier on computations.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_TABLE</span>: The table size is divided equally among children, filling the whole table area. If the children have a minimum size that is larger than this (including padding), then the table overflows and is aligned respecting the alignment hint, possibly overlapping sibling cells.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_ITEM</span>: The greatest minimum cell size is used: if no element is set to expand, the contents of the table are the minimum size and the bounding box of all the children is aligned relatively to the table object using <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get()</span>. If the table area is too small to hold this minimum bounding box, then the objects keep their size and the bounding box overflows the box area, still respecting the alignment. To set the current mode, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_get(table)</span>.</li>
-</ul>
-<p>The table&#39;s content alignment is set using <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_set(table, horizontal, vertical)</span>, where <span style="font-family: Courier New,Courier,monospace">horizontal</span> and <span style="font-family: Courier New,Courier,monospace">vertical</span> are floating values. To see them, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get(table, horizontal, vertical)</span>.</p>
-<p>To set the padding, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_set(table, horizontal, vertical)</span>. To see the current value, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_get(table, horizontal, vertical)</span>.</p>
-<p>_To see the current column and row count, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_col_row_size_get(table, columns, rows)</span>.</p>
-
-<h3>Grid</h3>
-<p>A grid is a smart object that packs its children as with a regular grid layout.</p>
-<p>Grids are added to the canvas with <span style="font-family: Courier New,Courier,monospace">evas_object_grid_add(evas)</span>.</p>
-<p>To change a grid&#39;s virtual resolution, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_set(grid, width, height)</span>, to see it, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_get(grid, width, height)</span>.</p>
-<p>To add an object, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_pack(grid, child, x, y, w, h)</span>, where</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">x</span> is the virtual X coordinate of the child</li>
-<li><span style="font-family: Courier New,Courier,monospace">y</span> is the virtual y coordinate of the child</li>
-<li><span style="font-family: Courier New,Courier,monospace">w</span> is the virtual width of the child</li>
-<li><span style="font-family: Courier New,Courier,monospace">h</span> is the virtual height of the child</li>
-</ul>
-<h3>Box</h3>
-<p>A box is a simple container that sets its children objects linearly.</p>
-<p>To add a box to your canvas, use <span style="font-family: Courier New,Courier,monospace">evas_object_box_add(evas)</span>.</p>
-<p>To add a child to the box, use</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_append(box, child)</span>: The child is appended.</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_after(box, child, reference)</span>: The child is added after <span style="font-family: Courier New,Courier,monospace">reference</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_before(box, child, reference)</span>: The child is added before <span style="font-family: Courier New,Courier,monospace">reference</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_at(box, child, pos)</span>: The child is added at the specified position.</li>
-</ul>
-<p>To set the alignment, use <span style="font-family: Courier New,Courier,monospace">evas_object_box_align_set(box, horizontal, vertical)</span>.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">horizontal</span>: 0.0 means aligned to the left, 1.0 means to the right;</li>
-<li><span style="font-family: Courier New,Courier,monospace">vertical</span>: 0.0 means aligned to the top, 1.0 means to the bottom.</li>
-</ul>
-<p>Evas has predefined box layouts available:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_horizontal()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_vertical()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_horizontal()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_vertical()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_horizontal()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_vertical()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_horizontal()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_vertical()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_stack()</span>.</li>
-</ul>
-
-<h2 id="image" name="image">Image Objects</h2> 
-
-
-<p>Using Evas, you can create and manipulate image objects. Evas supports image loaders of various formats as plug-in modules.</p>
-<p>The image formats that Evas supports include <span style="font-family: Courier New,Courier,monospace">bmp</span>, <span style="font-family: Courier New,Courier,monospace">edj</span>, <span style="font-family: Courier New,Courier,monospace">gif</span>, <span style="font-family: Courier New,Courier,monospace">ico</span>, <span style="font-family: Courier New,Courier,monospace">jpeg</span>, <span style="font-family: Courier New,Courier,monospace">pmaps</span>, <span style="font-family: Courier New,Courier,monospace">png</span>, <span style="font-family: Courier New,Courier,monospace">psd</span>, <span style="font-family: Courier New,Courier,monospace">svg</span>, <span style="font-family: Courier New,Courier,monospace">tga</span>, <span style="font-family: Courier New,Courier,monospace">tiff</span>, <span style="font-family: Courier New,Courier,monospace">wbmp</span>, <span style="font-family: Courier New,Courier,monospace">webp</span>, and <span style="font-family: Courier New,Courier,monospace">xpm</span>.</p>
-
-	<p class="figure">Figure: Evas image loader</p> 
-	<p align="center"><img alt="Evas image loader" src="../../images/evas_image_loader.png" /></p>  
-
-<h3>Evas Object Image Functions</h3>
-
-<p>Evas has over 70 image object functions. The following functions are discussed in this document:</p>
-<pre class="prettyprint">
-Evas_Object *evas_object_image_add(Evas *e);
-void evas_object_image_file_set(Evas_Object *obj, const char *file, const char *key);
-void evas_object_image_fill_set(Evas_Object *obj, int x, int y, int w, int h);
-void evas_object_image_filled_set(Evas *e, Eina_Bool setting);
-Evas_Object *evas_object_image_filled_add(Evas *e);
-void evas_object_image_smooth_scale_set(Evas_Object *obj, Eina_Bool smoothscale);
-void evas_object_image_load_size_set(Evas_Object *obj, int w, int h);
-void evas_object_image_data_set(Evas_Object *obj, void *data);
-void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);
-void evas_object_image_size_set(Evas_Object *obj, int w, int h);
-void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);
-Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);
-</pre>
-
-<h3>Creating an Image Object and Setting the Image Data Source</h3>
-<p>A common use case of an image object is to set a file as the image data source. The process has 3 steps and each one involves the following API calls:</p>
-	<ul>
-	 <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> function creates an image object and returns the pointer.
-	 <pre class="prettyprint">Evas_Object *evas_object_image_add(Evas *e);</pre>
-	 </li>
-	 <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_file_set()</span> function sets a source file on the image object. The object fetches the image pixel data from the source file.
-	 <pre class="prettyprint">void evas_object_image_file_set(Evas_Object *obj, const char *file, const char *key);</pre>
-	 </li>
-	 <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> sets how to fill the image object's area with the given pixel data.
-	 <pre class="prettyprint">void evas_object_image_fill_set(Evas_Object *obj, int x, int y, int w, int h);</pre>
-	 </li>
-	</ul>
-
-<p>In the following code example, the <span style="font-family: Courier New,Courier,monospace">main()</span> function creates an image object and displays it on a window. The image object size is 300x300 and the source image resolution is 100x127. The image is scaled into 300 by 300 to fill the image object area using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
-
-&nbsp;&nbsp;&nbsp;// Create a window object
-&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 400);
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-
-&nbsp;&nbsp;&nbsp;// Return Evas handle from window
-&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
-
-&nbsp;&nbsp;&nbsp;// Create an image object
-&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);
-
-&nbsp;&nbsp;&nbsp;// Set a source file to fetch pixel data
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
-
-&nbsp;&nbsp;&nbsp;// Set the size and position of the image on the image object area
-&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(img, 0, 0, 300, 300);
-
-&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
-&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);
-&nbsp;&nbsp;&nbsp;evas_object_show(img);
-
-&nbsp;&nbsp;&nbsp;elm_run();
-
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-	<p class="figure">Figure: Image object display</p> 
-	<p align="center"><img alt="Image object display" src="../../images/evas_object_display.png" /></p>  
-  
-<h3 id="manage" name="manage">Managing Images</h3>
-
-<p>To manage image objects in Evas:</p>
-
-<h4>Limiting Visibility</h4>
-<p>Evas always supports the image file type it was compiled with. Check your software packager for the information and use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_extension_can_load_get()</span> function.</p>
-
-<p>Create the image object. Set a source file on it, so that the object knows where to fetch the image data.</p>
-<p>Define how to fill the image object area with the given pixel data. You can use a sub-region of the original image, or have it tiled repeatedly on the image object.</p>
-
-<pre class="prettyprint">
-img = evas_object_image_add(canvas);
-evas_object_image_file_set(img, &quot;path/to/img&quot;, NULL);
-evas_object_image_fill_set(img, 0, 0, w, h);
-</pre>
-
-
-<p>If the entire source image is to be displayed on the image object, stretched to the destination size, use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function helper that you can use instead of the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> function:</p>
-
-<pre class="prettyprint">
-evas_object_image_filled_set(img, EINA_TRUE);
-</pre>
-
-<h4>Scaling Images</h4>
-<p>Resizing image objects scales the source images to the image object size, if the source images are set to fill the object area using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function.</p>
-<p>Control the aspect ratio of an image for different sizes with functions to load images scaled up or down in memory.</p>
-
-<p>Evas has a scale cache, which caches scaled versions of images used often. You can also have Evas rescale the images smoothly, however, that is computationally expensive.</p>
-
-<p>Users can decide how to fill the image object area with the given image pixel data by setting the position, width, and height of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function. Without setting this information, the image is not displayed. If the size of the image is bigger than the image object area, only a sub-region of the original image is displayed. If the image is smaller than the area, images are tiled repeatedly to fill the object area.</p>
-
-	<p class="figure">Figure: Image scaling</p> 
-	<p align="center"><img alt="Image scaling" src="../../images/evas_image_scaling.png" /></p>  
-
-	<table>
-	<tbody>
-	<tr>
-	 <td><p align="center"><img alt="" src="../../images/evas_scaling1.png" /></p></td>
-	 <td><p align="center"><img alt="" src="../../images/evas_scaling2.png" /></p></td>
-	 <td><p align="center"><img alt="" src="../../images/evas_scaling3.png" /></p></td>
-	</tr>
-	<tr>
-     <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 50, 0, 300, 300)</span></td>
-	 <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 200, 200)</span></td>
-	 <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 100, 127)</span></td>
-	</tr>
-	</tbody>
-	</table>  
- 	
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> function scales the image to fit the object area. Resizing the image object automatically triggers an internal call to the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>
-<pre class="prettyprint">
-void evas_object_image_filled_set(Evas *e, Eina_Bool setting);</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_add()</span> function creates a new image object that automatically scales its bound image to the object area. This is a helper function around the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> functions.</p>
-
-<pre class="prettyprint">Evas_Object *evas_object_image_filled_add(Evas *e);</pre>
-
-<p>Scaled images&#39; quality can differ according to scaling algorithms. Smooth scaling improves the image quality in the process of size reducing or enlarging. Evas runs its own smooth scaling algorithm by default and provides an API so users can disable the function.</p>
-
-<pre class="prettyprint">
-void evas_object_image_smooth_scale_set(Evas_Object *obj, Eina_Bool smoothscale);</pre>
-
-<p>The algorithm is implemented using the SIMD (Single Instruction Multiple Data) vectorization in case of software rendering. It is optimized on Intel and ARM CPU through MMX and NEON command respectively.</p>
-
-<p>There is a trade-off between image smoothness and rendering performance. The load gets bigger as the image gets bigger. Users can avoid such scaling overload by using the same size of the image object and the source image.</p>
-
-<p>In the following code, 2 image objects are created to show the effects of smooth scaling. The one with smooth scaling applied appears softer on the screen.</p>
-
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
-
-&nbsp;&nbsp;&nbsp;// Create a window object
-&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-
-&nbsp;&nbsp;&nbsp;// Return Evas handle from window
-&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
-
-&nbsp;&nbsp;&nbsp;// Create an image object
-&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_move(img, 0, 0);
-&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(img);
-
-&nbsp;&nbsp;&nbsp;// Create another image object
-&nbsp;&nbsp;&nbsp;Evas_Object *img2 = evas_object_image_filled_add(e);
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img2, &quot;./logo.png&quot;, NULL);
-
-&nbsp;&nbsp;&nbsp;// Disable smooth scaling
-&nbsp;&nbsp;&nbsp;evas_object_image_smooth_scale_set(img2, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;evas_object_move(img2, 200, 0);
-&nbsp;&nbsp;&nbsp;evas_object_resize(img2, 200, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(img2);
-
-&nbsp;&nbsp;&nbsp;elm_run();
-
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-  <table>
-  <caption>Figure: Smooth scaling effects</caption>
-  <tbody>
-  <tr>
-   <td><p align="center"><img alt="Smooth scaling effects" src="../../images/evas_smooth_enabled.png" /></p></td>
-   <td><p align="center"><img alt="Smooth scaling effects" src="../../images/evas_smooth_disabled.png" /></p></td>
-  </tr>
-  <tr>
-   <td style="text-align:center;">Smooth scaling enabled</td>
-   <td style="text-align:center;">Smooth scaling disabled</td>
-  </tr>
-  </tbody></table>
-
-
-<p>Evas caches scaled image data and reuses them. Users can save the memory by loading the image in the scaled size to the memory at the beginning. This option is available only for <span style="font-family: Courier New,Courier,monospace">jpeg</span> format at the moment.</p>
-<pre class="prettyprint">
-void evas_object_image_load_size_set(Evas_Object *obj, int w, int h);</pre>
-
-<p>An example code is as follows.</p>
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
- 
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
- 
-&nbsp;&nbsp;&nbsp;// Create a window object
-&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
- 
-&nbsp;&nbsp;&nbsp;// Return Evas handle from window
-&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
- 
-&nbsp;&nbsp;&nbsp;// Create an image object
-&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e); 
- 
-&nbsp;&nbsp;&nbsp;// Load the image scaled into the object size 
-&nbsp;&nbsp;&nbsp;// before evas_object_image_file_set() is called
-&nbsp;&nbsp;&nbsp;evas_object_image_load_size_set(img, 300, 300);
- 
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL); 
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
-&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);
-&nbsp;&nbsp;&nbsp;evas_object_show(img); 
- 
-&nbsp;&nbsp;&nbsp;elm_run();
- 
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-<h3>Setting Raw Data to Image Object</h3>
-<p>Users can set raw data to the image object manually using  the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function instead of setting an image file as the data source. The image data should be in raw data form. In case of an 200x200 sized image with alpha channel enabled (32 bits per pixel), the size of the image data is 14000 (=200*200*4) bytes.</p>
-
-<pre class="prettyprint">void evas_object_image_data_set(Evas_Object *obj, void *data);</pre>
-
-<p>Image objects fetch metadata such as width or height from the header of the image files. Since the raw data does not have the metadata, users must set the size of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_size_set()</span> function.</p>
-
-<pre class="prettyprint">void evas_object_image_size_set(Evas_Object *obj, int w, int h);</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_get()</span> function returns the data pointer of an image object and requires a parameter to determine whether the data is modified or not. If users pass <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for <span style="font-family: Courier New,Courier,monospace">for_writing</span>, Evas updates the image pixels in the next rendering cycle.</p>
-
-<pre class="prettyprint">void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_update_add()</span> helps to mark the updated area for rendering efficiency.</p>
-
-<pre class="prettyprint">void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);</pre>
-
-<p>The following example code and figure show how to specify the area to update.</p>
-<pre class="prettyprint">
-evas_object_image_data_update_add(image, 100, 100, 50, 50);
-evas_object_image_data_update_add(image, 180, 100, 50, 50);
-evas_object_image_data_update_add(image, 85, 200, 160, 80);
-</pre>
- 
-  <p class="figure">Figure: Partial image update</p> 
-  <p align="center"><img alt="Partial image update" src="../../images/evas_partial_update.png" /></p>  
-
-<p>The following code creates an image object and sets a source file on it. Then it implements the blur effect to the pixel data and saves them using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_save()</span> function.</p>
-
-<pre class="prettyprint">Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);</pre>
-
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-
-void image_blur(Evas_Object *img)
-{
-&nbsp;&nbsp;&nbsp;unsigned char *img_src = evas_object_image_data_get(img, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;int w, h;
-&nbsp;&nbsp;&nbsp;evas_object_image_size_get(img, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;int blur_size = 4;
-&nbsp;&nbsp;&nbsp;int x, y, xx, yy;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; h; y++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; w; x++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int avg_color[3] = {0, 0, 0};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int blur_pixel_cnt = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++)
-&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;int idx = (yy * w * 4) + (xx * 4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[0] += img_src[idx + 0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] += img_src[idx + 1];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] += img_src[idx + 2];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++blur_pixel_cnt;
-&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;avg_color[0] /= blur_pixel_cnt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] /= blur_pixel_cnt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] /= blur_pixel_cnt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++)
-&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;int idx = (yy * w * 4) + (xx * 4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 0] = avg_color[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 1] = avg_color[1];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 2] = avg_color[2];
-&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;evas_object_image_data_update_add(img, 0, 0, w, h);
-}
-
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
-
-&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;evas_object_resize(win, 200, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-
-&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
-
-&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(img);
-
-&nbsp;&nbsp;&nbsp;image_blur(img);
-
-&nbsp;&nbsp;&nbsp;evas_object_image_save(img, &quot;logo2.png&quot;, NULL, &quot;quality=100 compress=8&quot;);
-
-&nbsp;&nbsp;&nbsp;elm_run();
-
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-  <table>
-  <caption>Figure: Blur effect</caption>
-  <tbody>
-  <tr>
-   <td><p align="center"><img alt="Blur effect" src="../../images/evas_blur1.png" /></p></td>
-   <td><p align="center"><img alt="Blur effect" src="../../images/evas_blur2.png" /></p></td>
-  </tr>
-  <tr>
-   <td style="text-align:center;">Before</td>
-   <td style="text-align:center;">After</td>
-  </tr>
-  </tbody></table>  
-
-<h4>Giving Performance Hints</h4>
-<p>In image viewer applications, you can display an image in full size. The navigation to the adjacent images on your album must be fluid and fast. Thus, while displaying a given image, the program can load the next and previous image in the background to be able to immediately repaint the screen with a new image.</p>
-
-<p>Evas addresses this issue with image preloading:</p>
-
-<pre class="prettyprint">
-prev = evas_object_image_filled_add(canvas);
-evas_object_image_file_set(prev, &quot;/path/to/prev&quot;, NULL);
-evas_object_image_preload(prev, EINA_TRUE);
-next = evas_object_image_filled_add(canvas);
-evas_object_image_file_set(next, &quot;/path/to/next&quot;, NULL);
-evas_object_image_preload(next, EINA_TRUE);
-</pre>
-
-<p>If you are loading an image which is too big, set its loading size smaller.</p>
-
-<p>Load a scaled down version of the image in the memory if that is the size you are displaying (this can speed up the loading considerably):</p>
-<pre class="prettyprint">evas_object_image_load_scale_down_set(img, zoom);</pre>
-<p>If you know you are showing a sub-set of the image pixels, you can avoid loading the complementary data:</p>
-<pre class="prettyprint">evas_object_image_load_region_set(img, x, y, w, h);
-</pre>
-
-<h4>Specifying Borders</h4>
-<p>With Evas, you can specify image margins to be treated as borders. The margins then maintain their aspects when the image is resized. This makes setting frames around other UI objects easier. The following figure illustrates the border behavior, when the image is resized.</p>
-
-<p class="figure">Figure: Borders in Evas</p> 
-<p align="center"><img alt="Borders in Evas" src="../../images/9patch.png" /></p> 
- 
-
- <h2 id="block" name="block">Textblock Objects</h2>
-
-<p>Unlike basic text objects, a textblock handles complex text, managing multiple styles and multiline text based on HTML-like tags. However, these extra features are heavier on memory and processing cost.</p>
-<p>The textblock objects is an object that shows big chunks of text. Textblock supports many features, including text formatting, automatic and manual text alignment, embedding items (icons, for example). Textblock has three important parts: the text paragraphs, the format nodes and the cursors.</p>
-<p>To set markup to format text, use for example <span style="font-family: Courier New,Courier,monospace">&lt;font_size=50&gt;Big!&lt;/font_size&gt;</span>. Set more than one style directive in one tag with <span style="font-family: Courier New,Courier,monospace">&lt;font_size=50 color=#F00&gt;Big and Red!&lt;/font_size&gt;</span>. Please note that we used <span style="font-family: Courier New,Courier,monospace">&lt;/font_size&gt;</span> although the format also included color. This is because the first format determines the matching closing tag&#39;s name. You can use anonymous tags, such as <span style="font-family: Courier New,Courier,monospace">&lt;font_size=30&gt;Big&lt;/&gt;</span>, which pop any type of format, but it is advisable to use the named alternatives instead.</p>
-<p>Textblock supports the following formats:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">font</span>: Font description in fontconfig such as format, for example &quot;Sans:style=Italic:lang=hi&quot;. or &quot;Serif:style=Bold&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_weight</span>: Overrides the weight defined in &quot;font&quot;. For example, &quot;font_weight=Bold&quot; is the same as &quot;font=:style=Bold&quot;. The supported weights are &quot;normal&quot;, &quot;thin&quot;, &quot;ultralight&quot;, &quot;light&quot;, &quot;book&quot;, &quot;medium&quot;, &quot;semibold&quot;, &quot;bold&quot;, &quot;ultrabold&quot;, &quot;black&quot;, and &quot;extrablack&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_style</span>: Overrides the style defined in &quot;font&quot;. For example, &quot;font_style=Italic&quot; is the same as &quot;font=:style=Italic&quot;. The supported styles are &quot;normal&quot;, &quot;oblique&quot;, and &quot;italic&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_width</span>: Overrides the width defined in &quot;font&quot;. For example, &quot;font_width=Condensed&quot; is the same as &quot;font=:style=Condensed&quot;. The supported widths are &quot;normal&quot;, &quot;ultracondensed&quot;, &quot;extracondensed&quot;, &quot;condensed&quot;, &quot;semicondensed&quot;, &quot;semiexpanded&quot;, &quot;expanded&quot;, &quot;extraexpanded&quot;, and &quot;ultraexpanded&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">lang</span>: Overrides the language defined in &quot;font&quot;. For example, &quot;lang=he&quot; is the same as &quot;font=:lang=he&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_fallbacks</span>: A comma delimited list of fonts to try if finding the main font fails.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_size</span>: The font size in points.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_source</span>: The source of the font, for example an eet file.</li>
-<li><span style="font-family: Courier New,Courier,monospace">color</span>: The text color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline2_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">outline_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">shadow_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">glow_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">glow2_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">strikethrough_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">align</span>: The text alignment in one of the following formats: &quot;auto&quot; (according to text direction), &quot;left&quot;, &quot;right&quot;, &quot;center&quot; or &quot;middle&quot;, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
-<li><span style="font-family: Courier New,Courier,monospace">valign</span>: The vertical text alignment in one of the following formats: &quot;top&quot;, &quot;bottom&quot;, &quot;middle&quot;, &quot;center&quot;, &quot;baseline&quot; or &quot;base&quot;, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The text wrap in one of the following formats: &quot;word&quot;, &quot;char&quot;, &quot;mixed&quot;, or &quot;none&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">left_margin</span>: Either &quot;reset&quot; or a pixel value indicating the margin.</li>
-<li><span style="font-family: Courier New,Courier,monospace">right_margin</span>: Either &quot;reset&quot; or a pixel value indicating the margin.</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline</span>: The style of underlining in one of the following formats: &quot;on&quot;, &quot;off&quot;, &quot;single&quot;, or &quot;double&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">strikethrough</span>: The style of text that is either &quot;on&quot; or &quot;off&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">backing_color</span>: The background color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">backing</span>: The background color enabled or disabled: &quot;on&quot; or &quot;off&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">style</span>: The style of the text in one of the following formats: &quot;off&quot;, &quot;none&quot;, &quot;plain&quot;, &quot;shadow&quot;, &quot;outline&quot;, &quot;soft_outline&quot;, &quot;outline_shadow&quot;, &quot;outline_soft_shadow&quot;, &quot;glow&quot;, &quot;far_shadow&quot;, &quot;soft_shadow&quot; or &quot;far_soft_shadow&quot;. The direction is selected by adding &quot;bottom_right&quot;, &quot;bottom&quot;, &quot;bottom_left&quot;, &quot;left&quot;, &quot;top_left&quot;, &quot;top&quot;, &quot;top_right&quot; or &quot;right&quot;. For example, &quot;style=shadow,bottom_right&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">tabstops</span>: The pixel value for tab width.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linesize</span>: To force a line size in pixels.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linerelsize</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linegap</span>: To force a line gap in pixels.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linerelgap</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
-<li><span style="font-family: Courier New,Courier,monospace">item</span>: Creates an empty space that is filled by an upper layer. Use &quot;size&quot;, &quot;abssize&quot;, or &quot;relsize&quot; to define the item&quot;s size, and an optional vsize = full/ascent to define the item&#39;s position in the line.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linefill</span>: Either a float value or percentage indicating how much to fill the line.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ellipsis</span>: A value between 0.0 and 1.0 to indicate the type of ellipsis, or -1.0 to indicate that an ellipsis is not wanted.</li>
-<li><span style="font-family: Courier New,Courier,monospace">password</span>: Either &quot;on&quot; or &quot;off&quot;, this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. </li>
-</ul>
-
-
-<h2 id="clip" name="clip">Clipping Objects</h2>
-
-<h3>Limiting Visibility </h3>
-<p>An Evas object can be clipped – in other words, its visible area is restricted with the clipper object.</p>
-
-<p>It is often necessary to show only parts of an object, and while it may be possible to create an object that corresponds only to the part that must be shown (which is not always possible), it is usually easier to use a clipper. A clipper is a rectangle that defines what is visible and what is not. The way to do this is to create a solid white rectangle (by default, so you need not use <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span>) and give it a position and size of what is wanted visible. The following code exemplifies showing the center half of my_evas_object: </p>
-<pre class="prettyprint">Evas_Object *clipper = evas_object_rectangle_add(evas_canvas);
-evas_object_move(clipper, my_evas_object_x / 4, my_evas_object_y / 4);
-evas_object_resize(clipper, my_evas_object_width / 2, my_evas_object_height / 2);
-evas_object_clip_set(my_evas_object, clipper);
-evas_object_show(clipper);
-</pre>
-
-<h3>Layer of Color </h3>
-<p>A solid white clipper does not produce a change in the color of the clipped object, only hides what is outside the clipper&#39;s area.  Changing the color of an object is accomplished by using a colored clipper. Clippers with color function by multiplying the colors of the clipped object. The following code shows how to remove all the red from an object.</p>
-<pre class="prettyprint">Evas_Object *clipper = evas_object_rectangle_add(evas);
-evas_object_move(clipper, my_evas_object_x, my_evas_object_y);
-evas_object_resize(clipper, my_evas_object_width, my_evas_object_height);
-evas_object_color_set(clipper, 0, 255, 255, 255);
-evas_object_clip_set(obj, clipper);
-evas_object_show(clipper);
-</pre> 
-
-
-<h2 id="map" name="map">Mapping Objects</h2>
-
-<p>Evas allows different transformations to be applied to all kinds of objects. These are applied by means of UV mapping. With UV mapping, one map points in the source object to a 3D space positioning at target. This allows rotation, perspective, scale, and many other effects depending on the map that is used.</p>
-
-<h3>Creating a Map </h3>
-<p>A map consists of a set of points, but currently only four are supported. Each of these points contains a set of canvas coordinates x and y that are used to alter the geometry of the mapped object, and a z coordinate that indicates the depth of that point. This last coordinate does not normally affect the map, but is used by several of the utility functions to calculate the right position of the point given other parameters.</p>
-<p>The coordinates for each point are set with <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set(map, index, x, y, z)</span>. In the example below, there is a rectangle whose coordinates are (100, 100) and (300, 300).</p>
-<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
-evas_object_move(object, 100, 100);
-evas_object_resize(object, 200, 200);
-Evas_Map map = evas_map_new(4);
-evas_map_point_coord_set(map, 0, 100, 100, 0);
-evas_map_point_coord_set(map, 1, 300, 100, 0);
-evas_map_point_coord_set(map, 2, 300, 300, 0);
-evas_map_point_coord_set(map, 3, 100, 300, 0);
-</pre>
-<p>There are functions to ease the process.</p>
-<p>Use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_geometry(map, x, y, w, h, z)</span>, where the map coordinates are set to the given rectangle, and <span style="font-family: Courier New,Courier,monospace">z</span> is the coordinate in the Z axis, which is the same for all points.</p>
-<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
-evas_object_move(object, 100, 100);
-evas_object_resize(object, 200, 200);
-Evas_Map map = evas_map_new(4);
-evas_map_util_points_populate_from_geometry(map, 100, 100, 200, 200, 0);
-</pre>
-
-<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object(map, object)</span>. </p>
-<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
-evas_object_move(object, 100, 100);
-evas_object_resize(object, 200, 200);
-Evas_Map map = evas_map_new(4);
-evas_map_util_points_populate_from_object(map, object);
-</pre>
-
-<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object_full(map, object, z)</span>, where <span style="font-family: Courier New,Courier,monospace">z</span> is the coordinate in the Z axis, which is the same for all points. </p>
-<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
-evas_object_move(object, 100, 100);
-evas_object_resize(object, 200, 200);
-Evas_Map map = evas_map_new(4);
-evas_map_util_points_populate_from_object_full(map, object, 0);
-</pre>
-
-<h3>Manual Point Setting</h3>
-<p>Several effects are applied to an object by setting each point of the map to the right coordinates. For example, a simulated perspective is achieved as follows.</p>
-<pre class="prettyprint">evas_map_point_coord_set(map, 0, 300, 100, 0);
-evas_map_point_coord_set(map, 1, 450, 120, 0);
-evas_map_point_coord_set(map, 2, 450, 260, 0);
-evas_map_point_coord_set(map, 3, 300, 300, 0);
-</pre>
-
-<p>The Z coordinate is not used when setting points by hand; thus its value is not important.</p>
-
-<h3>Applying a Map </h3>
-<p>Regardless of the specific way you create a map, to apply it to a specific object, use</p>
-<pre class="prettyprint">evas_object_map_set(object, map);
-evas_object_map_enable_set(object, EINA_TRUE);
-</pre>
-
-<h3>Basic Utility Functions </h3>
-<p>Evas provides utility functions for common transformations:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate(map, angle, cx, cy)</span>: This performs a rotation of the <span style="font-family: Courier New,Courier,monospace">angle</span> degrees around the center point with the coordinates (cx, cy).</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom(map, zoomx, zoomy, cx, cy)</span>: This performs a <span style="font-family: Courier New,Courier,monospace">zoomx</span> and <span style="font-family: Courier New,Courier,monospace">zoomy</span> zoom in the X and Y directions respectively, with the center point with the coordinates (cx, cy).</li>
-</ul>
-
-<p>For example, the following code rotates an object around its center.</p>
-<pre class="prettyprint">int x, y, w, h;
-evas_object_geometry_get(object, &amp;x, &amp;y, &amp;w, &amp;h);
-Evas_Map *map = evas_map_new(4);
-evas_map_util_points_populate_from_object(map, object);
-evas_map_util_rotate(map, 45, x + (w / 2), y + (h / 2));
-evas_object_map_set(object, map);
-evas_object_map_enable_set(object, EINA_TRUE);
-evas_map_free(m);
-</pre>
-
-<p>The following code rotates an object around the center of the window.</p>
-<pre class="prettyprint">int w, h;
-evas_output_size_get(evas, &amp;w, &amp;h);
-Evas_Map *map = evas_map_new(4);
-evas_map_util_points_populate_from_object(map, object);
-evas_map_util_rotate(map, 45, w / 2, h / 2);
-evas_object_map_set(object, map);
-evas_object_map_enable_set(object, EINA_TRUE);
-evas_map_free(m);
-</pre>
-
-<h3>3D Utility Functions </h3>
-<p>Evas provides utility functions for 3D transformations.</p>
-<p>To make a 3D rotation, use <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate(map, anglex, angley, anglez, cx, cy, cz)</span>. With this code, you can set the Z coordinate of the rotation center, and the angles to rotate through around all axes.</p>
-<p>Rotating in the 3D space does not look natural. A more natural look becomes by adding perspective to the transformation, which is done with <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_perspective(map, px, py, z0, focal)</span> on the map after its position has been set.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">px</span> and <span style="font-family: Courier New,Courier,monospace">py</span> specify the &quot;infinite distance&quot; point in the 3D conversion, where all lines converge to.</li>
-<li><span style="font-family: Courier New,Courier,monospace">z0</span> specifies the Z value at which there is a 1:1 mapping between spatial coordinates and screen coordinates: any points on this Z value do not have their X and Y coordinates modified in the transform, while those further away (Z value higher) shrink into the distance, and those less than this value expand.</li>
-<li><span style="font-family: Courier New,Courier,monospace">focal</span> determines the &quot;focal length&quot; of the camera: this is the distance in reality between the camera lens plane (the rendering results are undefined at or closer than this) and the <span style="font-family: Courier New,Courier,monospace">z0</span> value; this function allows for some &quot;depth&quot; control.</li>
-</ul>
-<h3>Color and Lighting </h3>
-<p>Each point in a map can be set to a color, which is multiplied with the object&#39;s own color and linearly interpolated in between adjacent points. To do this, use <span style="font-family: Courier New,Courier,monospace">evas_map_point_color_set(map, index, r, g, b, a)</span> for each point of the map, or <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_color_set(map, r, g, b, a)</span> to set every point into the same color.</p>
-<p>To add lighting for the objects, which is useful with 3D transforms, use <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_lighting(map, lightx, lighty, lightz, lightr, lightg, lightb, ambientr, ambientg, ambientb)</span>:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">lightx</span>, <span style="font-family: Courier New,Courier,monospace">lighty</span> and <span style="font-family: Courier New,Courier,monospace">lightz</span> are the local light source coordinates;</li>
-<li><span style="font-family: Courier New,Courier,monospace">lightr</span>, <span style="font-family: Courier New,Courier,monospace">lightg</span> and <span style="font-family: Courier New,Courier,monospace">lightb</span> are the local light source colors;</li>
-<li><span style="font-family: Courier New,Courier,monospace">ambientr</span>, <span style="font-family: Courier New,Courier,monospace">ambientg</span> and <span style="font-family: Courier New,Courier,monospace">ambientb</span> are the ambient light colors. Evas sets the color of each point based on the distance to the light source, the angle with which the object is facing the light and the ambient light. The orientation of each point is important. If the map is defined counter-clockwise, the object faces away from the user and becomes obscured, since no light does not reflect from it.</li>
-</ul>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/evas_optimization_n.htm b/org.tizen.ui.guides/html/native/efl/evas_optimization_n.htm
deleted file mode 100755
index 622b72f..0000000
--- a/org.tizen.ui.guides/html/native/efl/evas_optimization_n.htm
+++ /dev/null
@@ -1,227 +0,0 @@
-<!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>Optimizing Evas</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#rectangle">Using a Rectangle Object instead of a Solid Color Image</a></li>
-			<li><a href="#invisible">Making an Object Invisible instead of Setting Alpha as 0</a></li>
-			<li><a href="#image">Using evas_object_image for Maximum Optimization</a></li>
-			<li><a href="#parent">Setting the Parent to Avoid the Elementary Tree Reconstruction</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
-		 </ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Optimizing Evas</h1>
-
-<p>To optimize Evas:</p>
-
-<ul>
-<li><a href="#rectangle">Using a Rectangle Object instead of a Solid Color Image</a></li>
-<li><a href="#invisible">Making an Object Invisible instead of Setting Alpha as 0</a></li>
-<li><a href="#image">Using evas_object_image for Maximum Optimization</a></li>
-<li><a href="#parent">Setting the Parent to Avoid the Elementary Tree Reconstruction</a></li>
-</ul>
-
-<h2 id="rectangle" name="rectangle">Using a Rectangle Object instead of a Solid Color Image</h2>
-<p>When you need a solid color object, it is better (more efficient) to use a rectangle object than the image.</p>
-<table>
-   <colgroup> 
-    <col width="100%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-    </tr> 
-	 <tr> 
-     <td rowspan="1" colspan="1"> 
-<pre class="prettyprint">
-image = elm_image_add(win);
-snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
-elm_image_file_set(image, buf, NULL);
-evas_object_size_hint_weight_set(image, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(win, image);
-evas_object_show(image);
-</pre>  </td> 
-	</tr>
-    <tr> 
-     <th>After</th> 
-    </tr> 
-	 <tr> 
-     <td rowspan="1" colspan="1"> 
-<pre class="prettyprint">
-rect = evas_object_rectangle_add(evas_object_evas_get(win));
-evas_object_color_set(rect, 255, 255, 255, 255);
-evas_object_size_hint_weight_set(rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(win, rect);
-evas_object_show(rect);
-</pre></td> 
-	</tr>
-</tbody>
-</table>
-
-
-<h2 id="invisible" name="invisible">Making an Object Invisible instead of Setting Alpha as 0</h2>
-
-<p>To make an object invisible, it is more efficient to use <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span> instead of changing the alpha value to 0.</p>
-<table>
-   <colgroup> 
-    <col width="50%" /> 
-	<col width="50%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-	 <th>After</th>
-    </tr> 
-	 <tr> 
-     <td rowspan="1" colspan="1"> 
-<pre class="prettyprint">
-static void
-_invisible_cb(void *data, Evas_Object *obj, void *ev)
-{
-&nbsp;&nbsp;&nbsp;evas_object_color_set(obj, 0, 0, 0, 0);   
-}
-</pre>  </td>
-<td rowspan="1" colspan="1">
-<pre class="prettyprint">
-static void
-_invisible_cb(void *data, Evas_Object *obj, void *ev)
-{
-&nbsp;&nbsp;&nbsp;evas_object_hide(obj);   
-}
-</pre> </td>  
-	</tr>
-</tbody>
-</table>
-
-<h2 id="image" name="image">Using evas_object_image for Maximum Optimization</h2>
-
-<p>If you need maximum optimization, use <span style="font-family: Courier New,Courier,monospace">evas_object_image</span> instead of <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">elm_icon</span>.</p>
-<table>
-   <colgroup> 
-    <col width="100%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-    </tr> 
-	 <tr> 
-     <td rowspan="1" colspan="1">
-<pre class="prettyprint">
-img = elm_image_add((parent);
-snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
-elm_image_file_set(img, buf, NULL);
-evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(img);
-</pre> </td> 
-	</tr>
-    <tr> 
-     <th>After</th> 
-    </tr> 
-	 <tr> 
-     <td rowspan="1" colspan="1"> 
-<pre class="prettyprint">
-img = evas_object_image_add(evas_object_evas_get(parent));
-snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
-evas_object_image_file_set(img, buf, NULL);
-evas_object_image_filled_set(img, EINA_TRUE);
-evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(img);
-</pre> </td> 
-	</tr>
-</tbody>
-</table>
-
-
-<h2 id="parent" name="parent">Setting the Parent to Avoid the Elementary Tree Reconstruction</h2>
-<p>Before creating an object, make sure that the relationship between parent and child is set correctly to avoid having to reconstruct later. </p>
-<table>
-   <colgroup> 
-    <col width="50%" />
-    <col width="50%" />	
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-	  <th>After</th>
-    </tr> 
-	 <tr> 
-     <td rowspan="1" colspan="1">
-<pre class="prettyprint">
-win = elm_win_add();
-
-scroller = elm_scroller_add(win);
-
-box = elm_box_add(win);
-
-button = elm_button_add(win);
-</pre> </td> 
-<td rowspan="1" colspan="1">
-<pre class="prettyprint">
-win = elm_win_add();
-
-scroller = elm_scroller_add(win);
-
-box = elm_box_add(scroller);
-
-button = elm_button_add(box);
-</pre>  </td> 
-	</tr>
-</tbody>
-</table>
-
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script> 
-  
- </body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/evas_rendering_n.htm b/org.tizen.ui.guides/html/native/efl/evas_rendering_n.htm
deleted file mode 100755
index e265bf6..0000000
--- a/org.tizen.ui.guides/html/native/efl/evas_rendering_n.htm
+++ /dev/null
@@ -1,288 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Evas Rendering Concept and Method</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-			<li><a href="#engine">Evas Engines Concept</a></li>
-			<li><a href="#ui_rendering">UI Rendering Mode</a></li>
-        </ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>		
-		</ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Evas Rendering Concept and Method</h1>
- 
-<p>Evas is a canvas display library. It is markedly different from most display and windowing systems as the canvas is structural and is also a state engine, whereas most display and windowing systems are immediate mode display targets. Evas handles the logic between a structural display via its state engine, and controls the target windowing system in order to produce rendered results of the current canvas&#39; state on the display.</p>
-<p>Immediate mode display systems retain very little or no state. A program executes a series of commands, as in the following pseudo code.</p>
-<pre class="prettyprint">
-draw line from position (0, 0) to position (100, 200);
-
-draw rectangle from position (10, 30) to position (50, 500);
-
-bitmap_handle = create_bitmap();
-scale bitmap_handle to size 100 x 100;
-draw image bitmap_handle at position (10, 30);
-</pre>
-<p>The series of commands is executed by the windowing system and the results are typically displayed on the screen. Once the commands are executed, the display system does not know how to reproduce this image again, and has to be instructed by the application on how to redraw sections of the screen if needed. Each successive command is executed as instructed by the application and either emulated by software or sent to the graphics hardware on the device to be performed.</p>
-<p>The advantage of such a system is that it is simple and gives a program tight control over how something looks and is drawn. Given the increasing complexity of displays and demands by users to have better looking interfaces, more work needs to be done at this level by the internals of UI component sets, custom display components and other programs. This means that more logic and display rendering code needs to be written again each time the application needs to figure out how to minimize redraws so that display is fast and interactive, and keep track of redraw logic.</p>
-<p>For example, if in the scene below, the windowing system requires the application to redraw the area from 0, 0 to 50, 50 (also referred to as the &quot;expose event&quot;). Then the programmer calculates manually the updates and repaints it again.</p>
-<pre class="prettyprint">
-Redraw from position (0, 0) to position (50, 50):
-
-// What was in area (0, 0, 50, 50)?
-
-// 1. intersection part of line (0, 0) to (100, 200)?
-&nbsp;&nbsp;&nbsp;draw line from position (0, 0) to position (25, 50);
-
-// 2. intersection part of rectangle (10, 30) to (50, 500)?
-&nbsp;&nbsp;&nbsp;draw rectangle from position (10, 30) to position (50, 50)
-
-// 3. intersection part of image at (10, 30), size 100 x 100?
-&nbsp;&nbsp;&nbsp;bitmap_subimage = subregion from position (0, 0) to position (40, 20)
-&nbsp;&nbsp;&nbsp;draw image bitmap_subimage at position (10, 30);
-</pre>
-
-<p>If all elements in the above scene are opaque, the system is doing useless paints: part of the line is behind the rectangle, and part of the rectangle is behind the image. These useless paints tend to be very costly.</p>
-<p>Evas is a structural system in which the programmer creates and manages display objects and their properties, and as a result of this higher level state management, the canvas is able to redraw the set of objects when needed to represent the current state of the canvas.</p>
-<p>For example, see the following pseudo code.</p>
-<pre class="prettyprint">
-line_handle = create_line();
-set line_handle from position (0, 0) to position (100, 200);
-show line_handle;
-
-rectangle_handle = create_rectangle();
-move rectangle_handle to position (10, 30);
-resize rectangle_handle to size 40 x 470;
-show rectangle_handle;
-
-bitmap_handle = create_bitmap();
-scale bitmap_handle to size 100 x 100;
-move bitmap_handle to position (10, 30);
-show bitmap_handle;
-
-render scene;
-</pre>
-
-<p>This looks longer, but when the display needs to be refreshed or updated, the programmer only moves, resizes, shows, hides etc. the objects that need to change. The programmer thinks at the object logic level, and the canvas software does the rest of the work, figuring out what changed in the canvas since it was last drawn, how to most efficiently redraw the canvas and its contents to reflect the current state, and doing the actual drawing of the canvas.</p>
-<p>This allows the programmer think in a more natural way when dealing with a display, and saves time and effort of working out how to load and display images, to render given the current display system etc. Since Evas is portable across different display systems, this gives the programmer the ability to port and display the code on different display systems with little work.</p>
-<p>Evas is a display system somewhere between a UI component set and an immediate mode display system. It retains basic display logic, but does little high-level logic such as scrollbars, sliders, push buttons etc.</p>
-
-<p>For more information on the UI rendering modes (immediate and retained), see <a href="#ui_rendering">UI Rendering Mode</a>.</p>
-
-
-<h2 id="engine" name="engine">Evas Engines Concept </h2>
-<p>Evas delegates most of the actual rendering work to its engines. Engines are the backends that Evas uses to render (primitive) objects on a canvas. The canvas can be the screen, or a buffer in the memory.</p>
-<p>Evas can work with and provides multiple engines, such as (this list is non-exhaustive):</p>
-<ul>
-<li>buffer: all the rendering takes place in a buffer</li>
-<li>fb: the rendering takes place in the system&#39;s framebuffer</li>
-<li>software_x11: this is the most used, using X11</li>
-<li>gl_x11: this also renders to an X11 window, except that it uses OpenGL</li>
-</ul>
-<p>These implement the rendering of all the basic objects by themselves, because they often can be accelerated by the hardware or backend software libraries to provide fast rendering.</p>
-<p>If a particular engine does not have the provision for a certain primitive object, it reverts back to using a default software version. </p> 
-
-<h2 id="ui_rendering" name="ui_rendering">UI Rendering Mode</h2> 
-
-<p>Evas removes the need to know about the characteristics of your display system or what graphics calls are used to draw them and how. It deals on an object level where all you do is create and manipulate objects in a canvas, set their properties, and the rest is done for you. This rendering method is called the retained mode, whereas the immediate mode is an alternative rendering method.</p>
-
-<h3 id="immediate" name="immediate">Immediate Mode</h3>
-
-<p>The immediate mode is the most commonly used in graphics toolkit libraries, such as GTK+, GDI, and GDI+. The application is responsible for repainting the portion of the client area that is invalidated.</p>
-
-<p class="figure">Figure: Immediate mode</p> 
-<p align="center"><img alt="Immediate mode" src="../../images/immediate_mode.png" /></p> 
-
-<p>The application commands any drawing issues as it needs, and the display system draws some GUIs. After the drawing is done, it appears in the destination. This mode allows you to have a exact control over the render cycles. However, if the draw commands are misused, unnecessary drawing can be performed or drawing never happen at all.</p> 
-<p>The following example explains the common usage of the immediate mode:</p> 
-
-<pre class="prettyprint">
-void update()
-{
-&nbsp;&nbsp;&nbsp;Image *img = load_image(NEW_IMG);
-
-&nbsp;&nbsp;&nbsp;// Switch button image to new one
-&nbsp;&nbsp;&nbsp;update_button_image(img);
-
-&nbsp;&nbsp;&nbsp;// Issue the invalidate area (button area) to be redrawn on the screen
-&nbsp;&nbsp;&nbsp;invalidate_area(button_x, button_y, button_w, button_h);
-
-&nbsp;&nbsp;&nbsp;// Move rectangle from (200, 200) to (300, 300)
-&nbsp;&nbsp;&nbsp;int rect_prev_x = rect_x;
-&nbsp;&nbsp;&nbsp;int rect_prev_y = rect_y;
-&nbsp;&nbsp;&nbsp;rectangle_x = 300;
-&nbsp;&nbsp;&nbsp;rectangle_y = 300;
-&nbsp;&nbsp;&nbsp;set_rect_position(rect_x, rect_y);
-   
-&nbsp;&nbsp;&nbsp;// Issue the invalidate area (changed area) to be redrawn on the screen
-&nbsp;&nbsp;&nbsp;int diff_x = rect_x – rect_prev_x;
-&nbsp;&nbsp;&nbsp;int diff_y = rect_y – rect_prev_y;
-&nbsp;&nbsp;&nbsp;invalidate_area(rect_prev_x, rect_prev_y, (rect_w + diff_x), (rect_h + diff_y));
-
-
-&nbsp;&nbsp;&nbsp;// After setting the invalidate area, request rendering to update the screen
-&nbsp;&nbsp;&nbsp;render();
-
-&nbsp;&nbsp;&nbsp;// Now you can see how the button image and rectangle position are changed
-}
-</pre>
-
-<h3 id="retained" name="retained">Retained Mode</h3>
-
-<p>A graphics system adopting the retained mode is basically responsible for responding to all repaint requests for rendering the application objects. Clients do not directly cause actual rendering, but objects are redrawn when parts of them are updated.</p>
-
-<p class="figure">Figure: Retained mode</p> 
-<p align="center"><img alt="Retained mode" src="../../images/retained_mode.png" /></p> 
-
-<p>Since Evas works with the retained mode, there is no need to command any drawings. The following example shows how to write a GUI code with Evas for your application:</p>
-
-<pre class="prettyprint">
-void create_image()
-{
-&nbsp;&nbsp;&nbsp;// Initialize an image object to be displayed on the screen
-&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);
-
-&nbsp;&nbsp;&nbsp;// Set image resource
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, IMG, NULL);
-
-&nbsp;&nbsp;&nbsp;// Set image position 
-&nbsp;&nbsp;&nbsp;evas_object_move(img, 100, 100);
-
-&nbsp;&nbsp;&nbsp;// Set image size
-&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
-
-&nbsp;&nbsp;&nbsp;// Set image visibility (show or hide)
-&nbsp;&nbsp;&nbsp;evas_object_show(img);
-}
-
-void create_rectangle()
-{
-&nbsp;&nbsp;&nbsp;// Initialize an rectangle object to be displayed on the screen
-&nbsp;&nbsp;&nbsp;Evas_Object *rect = evas_object_rectangle_add(e);
-
-&nbsp;&nbsp;&nbsp;// Set rectangle color
-&nbsp;&nbsp;&nbsp;evas_object_color_set(rect, 255, 0, 0, 255);
-
-&nbsp;&nbsp;&nbsp;// Set rectangle position
-&nbsp;&nbsp;&nbsp;evas_object_move(rect, 200, 200);
-
-&nbsp;&nbsp;&nbsp;// Set rectangle size
-&nbsp;&nbsp;&nbsp;evas_object_resize(rect, 200, 200);
-
-&nbsp;&nbsp;&nbsp;// Set rectangle visibility (show or hide)
-&nbsp;&nbsp;&nbsp;evas_object_show(rect);
-}
-</pre>
-
-<p>A few main loops later you can replace the image with another one and move the rectangle. You only need to set a new image file to the image object and move the rectangle object. Evas computes the invalidate area and redraws the image and rectangle behind the application when it&#39;s on rendering time.</p>
-
-<pre class="prettyprint">
-void update()
-{
-&nbsp;&nbsp;&nbsp;// Set new image resource
-&nbsp;&nbsp;&nbsp;elm_image_file_set(img, NEW_IMG, NULL);
-
-&nbsp;&nbsp;&nbsp;// Set new rectangle position
-&nbsp;&nbsp;&nbsp;evas_object_move(rect, 300, 300);
-}
-</pre>
-
-<h3 id="evas_rendering" name="evas_rendering">Evas Rendering</h3>
-
-<p>Tizen Native applications work on the ecore main loop, and the loop goes on a few steps for every frame. Evas redraws some changes in the objects when the main loop goes to the idle enterer step. If there are no changes, Evas rendering is skipped. Otherwise, Evas calculates any changed portions of all display objects and redraws them.</p>
-
-<p class="figure">Figure: Evas rendering in the main loop</p> 
-<p align="center"><img alt="Evas rendering in the main loop" src="../../images/rendering1.png" /></p> 
-
-<p>To minimize the rendering, Evas tracks the states of all display objects, such as position, size, visibility, and color. Even if some of these states are changed but the object is hidden by other obscured objects, it is not redrawn. In other words, Evas draws only the necessary changes in the screen.</p>
-
-<p>The following figures illustrate how Evas redraws the changed area:</p>
-
-<ul><li><p>In the first example, there is a blue-color background object (a sky-blue color rectangle) and a partially hidden cloud image object. Above them, there are a red and green rectangle, and the &quot;Hello out there&quot; text is printed on the green rectangle.</p>
-
-<p class="figure">Figure: Evas redrawing example 1</p> 
-<p align="center"><img alt="Evas redrawing example 1" src="../../images/redrawing01.png" /></p> </li>
-
-<li><p>In the second example, some of the objects have moved (the cloud image is moved to right and the green rectangle is moved downwards).</p>
-
-<p class="figure">Figure: Evas redrawing example 2</p> 
-<p align="center"><img alt="Evas redrawing example 2" src="../../images/redrawing02.png" /></p> </li>
-
-<li><p>As a result, the third example illustrates some regions that require updates.</p>
-
-<p class="figure">Figure: Evas redrawing example 3</p> 
-<p align="center"><img alt="Evas redrawing example 3" src="../../images/redrawing03.png" /></p> </li>
-
-<li><p>Evas decides which portions are invalid and to be redrawn. The fourth example shows the cleaned portion of the screen, which is the redrawn area.</p>
-<p>Evas redraws the content only in the redrawn portions.</p> 
-<p class="figure">Figure: Evas redrawing example 4</p> 
-<p align="center"><img alt="Evas redrawing example 4" src="../../images/redrawing04.png" /></p></li> 
-
-<li><p>Finally, the fifth example shows how the screen is updated and the result is visible.</p> 
-
-<p class="figure">Figure: Evas redrawing example 5</p> 
-<p align="center"><img alt="Evas redrawing example 5" src="../../images/redrawing05.png" /></p>
-
-<p>If Evas worked in an immediate mode style, the application would need to calculate the changed areas themselves, adding extra work. With Evas, you can let Evas figure out the updates and you can yourself concentrate on the application and UI core and logic.</p></li></ul>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/event_handling_n.htm b/org.tizen.ui.guides/html/native/efl/event_handling_n.htm
deleted file mode 100755
index 03dc326..0000000
--- a/org.tizen.ui.guides/html/native/efl/event_handling_n.htm
+++ /dev/null
@@ -1,119 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Event Handling: Managing the Event Flow</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#events_types">EFL Event Types</a></li>
-			<li><a href="#basic_events_flow">Basic Event Flow</a></li>
-		</ul>
-		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>	
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>			
-			
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Event Handling: Managing the Event Flow</h1> 
-  
-<p>The EFLs rely on events and callbacks. In case of an event, (for example, a key press, mouse click or a battery running low), the mainloop calls the callback functions that are associated to that specific event. After the callbacks have finished, the mainloop takes over and waits for new events, upon which to trigger new callbacks.</p>
-<p>It is important to do light work in the callbacks and to return to the mainloop relatively quickly. If there is heavy work to do, it is best to use an asynchronous mechanism like Ecore_con for network I/O or threads for CPU-intensive tasks. Failure to return quickly to the mainloop blocks the application&#39;s UI and it appears frozen.</p>
-
-<h2 id="events_types" name="events_types">EFL Event Types</h2>
-<p>There are several event types in the EFLs, and their use depends on the level of the event. The event types from lower- to higher-level are:</p>
-<ul>
-<li><a href="event_types_n.htm#evas_smart_object">Evas smart events</a> are the most often used and take place on collections of evas objects (which are most typically handled). They are called &quot;smart&quot; because they have internal logic and can define their own events while other event types are fixed.</li>
-<li><a href="event_types_n.htm#ecore">Ecore events</a> are the lowest-level events and come directly from the system. Except for application-wide shortcuts, it is not advisable to use them.</li>
-<li><a href="event_types_n.htm#evas_object">Evas object events</a> concern the objects that are on the canvas.</li>
-<li><a href="event_types_n.htm#evas">Evas events</a> are events on the graphical canvas as a whole. They are fairly low-level and mostly useful when drawing directly on the canvas.</li>
-</ul>
-
-  <p class="figure">Figure: Event types in the EFLs: Inner boxes are more specific than outer ones</p> 
-  <p align="center"><img alt="Event types in the EFLs: Inner boxes are more specific than outer ones" src="../../images/events_scope.png" /></p>
-  
-       
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">There are also <a href="event_types_n.htm#edje">Edje signals</a>, which come from program sections in themes; they can be used from high-level Elementary APIs or a low-level Edje API.</td> 
-	 </tr>
-   </tbody> 
-  </table> 
-
-<h2 id="basic_events_flow" name="basic_events_flow">Basic Event Flow</h2>
-<p>A realistic scenario involving various types of events is an application showing a button, which triggers the download of a file to be processed. There are progress bars for the operations.</p>
-<p>Create the window, create a box, set it vertical and add a button and two progress bars. At first, only the button is fully visible.</p>
-<p>When the user clicks on the button, an evas smart object event named &quot;clicked&quot; is emitted. The callback then starts the download in Ecore_con, displays the first progress bar and adds a callback to monitor the download progress. When the download progress changes, the callback updates the progress bar.</p>
-<p>After the download is finished, the second progress bar is displayed and the file processing is offloaded to another thread through Ecore_thread. The processing function regularly updates the progress bar (wrapped in ecore_main_loop_thread_safe_call_async() because GUI operations are not thread-safe).</p>
-<p>Events enable operations taking more than a few milliseconds&#39; time to be executed outside of the mainloop, therefore not blocking UI redraws.</p>
-<p>Below is an illustration for the event flow that follows a click on the screen.</p>
-
-  <p class="figure">Figure: Event flow for a user click</p> 
-  <p align="center"><img alt="Event flow for a user click" src="../../images/events_flow.png" /></p>
-  
-  
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/event_types_n.htm b/org.tizen.ui.guides/html/native/efl/event_types_n.htm
deleted file mode 100755
index 31182d5..0000000
--- a/org.tizen.ui.guides/html/native/efl/event_types_n.htm
+++ /dev/null
@@ -1,461 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Event Types</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-				
-				<li><a href="#ecore">Ecore Events</a></li>
-				<li><a href="#edje">Edje Events</a></li>
-				<li><a href="#evas">Evas Events</a></li>
-				<li><a href="#evas_object">Evas Object Events</a></li>
-				<li><a href="#evas_smart_object">Evas Smart Object Events</a></li>
-		</ul>
-	<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>	
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>			
-			
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>			
-				
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Event Types</h1> 
-  
-<p>EFL provides various event types that you can use to monitor and react to user interactions and system events in the UI.</p>  
-  
-<h2 id="ecore" name="ecore">Ecore Events</h2>
-
-<p>Ecore events are used for low-level handling of events, such as key presses, network connections, and communication with sub-processes. In case of shortcuts, the low-level handling of key presses is particularly useful: instead of adding a signal handler to a specific graphical element, you can add one globally to guarantee that no matter which UI component is currently receiving events, the shortcut is caught correctly.</p>
-<p>Ecore events can also be used to implement new graphical back-ends. However, they are low-level and not useful for most applications.</p>
-
-<p>In addition to using predefined Ecore events, you can create your own events with the <span style="font-family: Courier New,Courier,monospace">ecore_event_type_new()</span> function. The function generates a new unique identifier, which you can use as the event type parameter when managing your events and event handlers.</p>
-
-
-<h3 id="ecore_events_useful_for_shortcuts">Shortcut Events</h3>
-
-<p>The following Ecore events are available for shortcuts. The event callbacks receive additional data through a <span style="font-family: Courier New,Courier,monospace">void *</span> object, whose type depends on the received event.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_UP</span> events: 
-<pre class="prettyprint">
-typedef struct _Ecore_Event_Key Ecore_Event_Key;
-
-struct _Ecore_Event_Key 
-{
-&nbsp;&nbsp;&nbsp;const char *keyname;
-&nbsp;&nbsp;&nbsp;const char *key;
-&nbsp;&nbsp;&nbsp;const char *string;
-&nbsp;&nbsp;&nbsp;const char *compose;
-&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-
-&nbsp;&nbsp;&nbsp;int same_screen;
-};
-</pre>
-
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_BUTTON_DOWN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_BUTTON_UP</span> events: 
-<pre class="prettyprint">typedef struct _Ecore_Event_Mouse_Button Ecore_Event_Mouse_Button;
-struct _Ecore_Event_Mouse_Button 
-{
-&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-&nbsp;&nbsp;&nbsp;unsigned int buttons;
-&nbsp;&nbsp;&nbsp;unsigned int double_click;
-&nbsp;&nbsp;&nbsp;unsigned int triple_click;
-&nbsp;&nbsp;&nbsp;int same_screen;
-
-&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;} root;
-
-&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 0 if normal mouse, 1+ for other mouse-devices (such as multi-touch - other fingers)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Radius of press point - radius_x and radius_y if it is an ellipse (radius is the average of the 2)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius, radius_x, radius_y; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Angle relative to perpendicular (0.0 == perpendicular), in degrees
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Same as x, y, root.x, root.y, but with sub-pixel precision, if available
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
-&nbsp;&nbsp;&nbsp;} multi;
-};
-</pre>
- 
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_MOVE</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_WHEEL</span> events: 
-<pre class="prettyprint">
-typedef struct _Ecore_Event_Mouse_Wheel Ecore_Event_Mouse_Wheel;
-struct _Ecore_Event_Mouse_Wheel 
-{
-&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-
-&nbsp;&nbsp;&nbsp;int same_screen;
-&nbsp;&nbsp;&nbsp;int direction;
-&nbsp;&nbsp;&nbsp;int z;
-
-&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;} root;
-};
-</pre>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_IN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_OUT</span> events: 
-<pre class="prettyprint">
-typedef struct _Ecore_Event_Mouse_Move Ecore_Event_Mouse_Move;
-struct _Ecore_Event_Mouse_Move 
-{
-&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-
-&nbsp;&nbsp;&nbsp;int same_screen;
-
-&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;} root;
-
-&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 0 if normal mouse, 1+ for other mouse-devices (such as multi-touch - other fingers)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Radius of press point - radius_x and radius_y if it is an ellipse (radius is the average of the 2)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius, radius_x, radius_y; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Angle relative to perpendicular (0.0 == perpendicular), in degrees
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Same as x, y, root.x, root.y, but with sub-pixel precision, if available
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
-&nbsp;&nbsp;&nbsp;} multi;
-};
-</pre>
-
-</li>
-</ul>
-<h3 id="ecore_event_handler" name="ecore_event_handler">Managing Ecore Event Handlers</h3>
-
-<p>To manage Ecore event handlers:</p>
-
-<ol><li>To add an Ecore event handler, register a callback for a specific event with the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function. 
-<p>The function takes as parameters the event type (such as <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> for key presses), callback function, and additional data delivered to the callback. The function returns an event handler pointer, which you can use to remove the handler later.</p></li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Handler_Cb()</span> callback function.
-<p>The function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function parameters, the event type, and the event object (<span style="font-family: Courier New,Courier,monospace">Ecore_Event_Key</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Button</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Wheel</span>, or <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Move</span>). The function returns <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_PASS_ON</span> to allow other callbacks for that event be called, or <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_DONE</span> to not call them.</p></li>
-
-<li>When no longer needed, remove the event handler with the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_del()</span> function, using the event handler pointer as a parameter.</li></ol>
-
-<p>The following example shows how you can set a global variable to <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> when the <strong>Ctrl</strong> key is pressed:</p>
-<pre class="prettyprint">
-Eina_Bool ctrl_pressed = EINA_FALSE;
-
-static Eina_Bool
-_key_down_cb(void *data __UNUSED__, int type __UNUSED__, void *ev)
-{
-&nbsp;&nbsp;&nbsp;// The callback is used with the ECORE_EVENT_KEY_DOWN signal: the
-&nbsp;&nbsp;&nbsp;// parameter &quot;void *ev&quot; is therefore of the actual type Ecore_Event_Key
-&nbsp;&nbsp;&nbsp;// The following renders its fields accessible
-&nbsp;&nbsp;&nbsp;Ecore_Event_Key *event = ev;
-
-&nbsp;&nbsp;&nbsp;// Test whether the key that is pressed is Ctrl.
-&nbsp;&nbsp;&nbsp;if (!strcmp(&quot;Control_L&quot;, event-&gt;key))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If it is, store that piece of information
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl_pressed = EINA_TRUE;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// Let the event continue to other callbacks which have not been called yet
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_PASS_ON;
-}
-
-ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, _key_down_cb, NULL);
-</pre>
-
-<h3 id="ecore_event_manage" name="ecore_event_manage">Sending Ecore Events to the Main Loop</h3>
-
-<p>You can send Ecore events to the main loop yourself to handle actions of various origins through the same codepath. This is a thread-safe operation.</p>
-<p>To send an event, use the <span style="font-family: Courier New,Courier,monospace">ecore_event_add()</span> function. The function takes as parameters the event type (such as <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> for key presses), additional data delivered to the callback, the <span style="font-family: Courier New,Courier,monospace">Ecore_End_Cb()</span> function used to free the additional data after it is deliver to the callback function, and the pointer to additional data delivered to the free function. The free function and the pointer to its additional data are optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need them.</p>
-
-  
-<h2 id="edje" name="edje">Edje Events</h2>
-
-<p>Edje <a href="theme_n.htm">themes</a> have small <span style="font-family: Courier New,Courier,monospace">program</span> sections, which are triggered upon the reception of a signal that can execute actions, such as changing the state of an Edje part and running another program.</p>
-
-<h3 id="events_guide_edje_without_layout" name="events_guide_edje_without_layout">Managing a Single Signal Emitter</h3>
-<p>The following example shoes a <span style="font-family: Courier New,Courier,monospace">program</span> section. The program is called &quot;change_color&quot;, it is triggered on mouse clicks on the current part, and it emits a &quot;got.a.click&quot; signal where the source is set to &quot;color_changer&quot;.</p>
-<pre class="prettyprint">program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
-&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;got.a.click&quot; &quot;color_changer&quot;;
-}
-</pre>
-
-<p>To catch the emitted signal from the C side, use either the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function. Their only difference is that the previous one operates on an Edje object and the latter one on an Elementary object. Unless you do not use the Elementary library at all, use the Elementary variant.</p>
-
-<p>Both the functions take as parameters the object emitting the signal, the signal name (&quot;*&quot; acts as a wildcard), the signal source, the <span style="font-family: Courier New,Courier,monospace">Edje_Signal_Cb()</span> callback function called when the signal name and source match, and additional data delivered to the callback. For the signal name and source, &quot;*&quot; acts as a wildcard. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
-
-<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function parameters, the object emitting the signal, the signal name, and the signal source.</p>
-
-
-<h3 id="events_guide_edje_with_layout" name="events_guide_edje_with_layout">Managing Multiple Signal Emitters in Layouts</h3>
-
-<p>Most of the time, Edje and Elementary are used together. In particular, you can define a group in Edje and use it as a <a href="containers_n.htm#layout">layout</a> (containing several parts) in Elementary. The layouts enable you to perform theming and object placement in Edje while benefiting from the higher-level functions of Elementary.</p>
-<p>Since the layout contains multiple parts, you cannot use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> functions, as they require a single emitter object. The solution is to use the dedicated <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> function.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> function works similarly as the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> functions. The only difference is the type of the object in the first parameter. For <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span>, it is a pointer to an Evas_Object, which is obtained through the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function. For more information, see <a href="containers_n.htm#layout">Layout</a>.</p>
-
-  
-<h2 id="evas" name="evas">Evas Events</h2>
-
-<p>Evas events happen on a canvas as a whole. These events are too low-level for writing applications and are mostly used when writing the graphical toolkit itself.</p>
-
-<p>The following Evas event types are available:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_PRE</span>: Rendering on the canvas is about to be updated.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_POST</span>: Rendering on the canvas is updated.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_IN</span>: Canvas receives focus.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_OUT</span>: Canvas loses focus.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_IN</span>: Any object on the canvas receives focus.
-<p>Instead of this event type, use the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span> type with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_OUT</span>: Any object on the canvas loses focus. 
-<p>Instead of this event type, use the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span> type with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_PRE</span>: Rendering on the canvas starts.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_POST</span>: Rendering on the canvas finishes.</li>
-</ul>
-
-<p>To register the event handler, use the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function. The function takes as parameters the Evas canvas on which the event happens (to obtain the canvas, use the Evas_Object through the <span style="font-family: Courier New,Courier,monospace">evas_object_evas_get()</span> function), the event type, the <span style="font-family: Courier New,Courier,monospace">Evas_Event_Cb</span> callback function, and the pointer to the additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
-
-<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function parameters, the canvas where the event happened, and the event info data, which depends on the object type and the event at play.</p>
-
-
-<h2 id="evas_object" name="evas_object">Evas Object Events</h2>
-
-<p>Each Evas object on a specific Evas canvas can be manipulated independently. Each object can send events, which you can handle by registering callback functions for them. The events all relate to single objects, not the whole canvas.</p>
-
-<p>The following Evas object event types are available:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span>: Pointer got over an object (with no other object between the 2). This takes place no matter how the pointer becomes directly above the object. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_OUT</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event, but when the pointer goes outside the object area. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Out</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: Mouse button is pressed while the object is receiving events (either because the pointer is on top of the object or because the object had focus). The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Down</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Up</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Move</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_WHEEL</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Wheel</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Down</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Up</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Move</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_DOWN</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Down</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_UP</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Up</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span>: Object gained focus. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span>: Object lost focus. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_SHOW</span>: Object is shown by a call to the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HIDE</span>: Object is hidden by a call to the <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span> function. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOVE</span>: Object origin was moved (origin is the top-left corner at the creation time of the object). The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span>: Object is resized. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESTACK</span>: Object is re-stacked by the <span style="font-family: Courier New,Courier,monospace">evas_object_stack_below()</span> or <span style="font-family: Courier New,Courier,monospace">evas_object_stack_above()</span> function, or other events. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_DEL</span>: Object is deleted.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FREE</span>: For internal use only. Do not use (the object resources are about to be freed). The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HOLD</span>: For internal use only. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Hold</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CHANGED_SIZE_HINTS</span>: Object size hints changed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_PRELOADED</span>: Image preloaded through the <span style="font-family: Courier New,Courier,monospace">evas_object_image_preload()</span> function is loaded. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_UNLOADED</span>: Image data is unloaded. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-</ul>
-
-<p>To register the callback, use the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function. The function takes as parameters the object to which the callback is attached, the event type, the <span style="font-family: Courier New,Courier,monospace">Evas_Object_Event_Cb</span> callback function, and the pointer to the additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
-
-<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function parameters, the canvas where the event happened, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
-
-<p>When no longer needed, remove the callback with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_del()</span> function.</p>
-
-
-<h2 id="evas_smart_object" name="evas_smart_object">Evas Smart Object Events</h2>
-
-<p>Evas smart object events are the most widely-used type of events in graphical applications, since they are used for signals, such as &quot;clicked&quot;, &quot;clicked,double&quot; (double-click), and &quot;pressed&quot;. They are identified by strings, and each smart object is able to define its own events (although the names follow conventions).</p>
-
-<h3 id="evas_object_smart_callback" name="evas_object_smart_callback">Managing Evas Smart Object Event Handlers</h3>
-
-<ol><li>To add an Evas Smart Object event handler, register a callback for a specific event to an object with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function. 
-<p>The function takes as parameters the object to which the callback is added, the event name, the callback function, and additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p></li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">Evas_Smart_Cb()</span> callback function.
-<p>The function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function parameters, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
-<p>If some of the parameters are not used by the callback function, the compiler can raise the &quot;unused parameter&quot; warning. To avoid it, annotate the parameter with the <span style="font-family: Courier New,Courier,monospace">__UNUSED__</span> macro, which is a compiler-independent way to let the compiler know that the parameter is unused willingly, rather than by a mistake:</p>
-<pre class="prettyprint">void cb(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__);</pre>
-</li>
-
-<li>When no longer needed, remove the event handler with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_del()</span> function.
-<p>The function removes the first match for the given event and callback, and returns the data pointer that was used in the corresponding call to the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function.</p></li></ol>
-
-<p>The following example shows the <span style="font-family: Courier New,Courier,monospace">_button_clicked()</span> function and sets it as the callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> event of an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> button:</p>
-
-<pre class="prettyprint">
-static void
-_button_clicked(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;// Insert function body here
-}
-
-static void
-some_function(void) 
-{
-&nbsp;&nbsp;&nbsp;// Code to build the window object
-&nbsp;&nbsp;&nbsp;Evas_Object *button = elm_button_add(window);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
-}
-</pre>
-
-<p>For a specific object and event, callbacks are called in the order they have been registered. The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function does not execute any special processing, if it is called several times with the same callback function or data. Callbacks are called as many times as they have been added and in the order they have been added.</p>
-
-
-
-<h3 id="evas_smart_objects_examples" name="evas_smart_objects_examples">Evas Smart Object Event Handling Examples</h3>
-
-<p>The following example shows a button with a callback for the &quot;clicked&quot; signal:</p>
-
-<pre class="prettyprint">static void
-_button_clicked(void *data __UNUSED__, Evas_Object *obj __UNUSED__, void *event_info __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
-&nbsp;&nbsp;&nbsp;fflush(stdout);
-&nbsp;&nbsp;&nbsp;elm_exit();
-}
-
-static void
-_add_button(Evas_Object *window) 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me To Exit!&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
-
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-}
-</pre>
-
-<p>The following example shows a button with a callback for the &quot;clicked&quot; signal. Clicking the button removes the callback:</p>
-
-<pre class="prettyprint">static void
-_button_clicked(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
-&nbsp;&nbsp;&nbsp;fflush(stdout);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_del(obj, &quot;clicked&quot;, _button_clicked);
-}
-
-static void
-_add_button(Evas_Object *window) 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me!&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
-
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-}
-</pre>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/font_setting_n.htm b/org.tizen.ui.guides/html/native/efl/font_setting_n.htm
deleted file mode 100755
index d78572f..0000000
--- a/org.tizen.ui.guides/html/native/efl/font_setting_n.htm
+++ /dev/null
@@ -1,440 +0,0 @@
-<!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>Fonts: Setting Application Text Fonts</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-			<ul class="toc">
-				<li><a href="#apply">Applying System Font Settings</a></li>
-				<li><a href="#supported">Supported Font Styles</a></li>
-				<li><a href="#component">Setting the Font for a UI Component</a></li>
-				<li><a href="#edc">Setting the Font Using EDC</a></li>
-				<li><a href="#edje">Using the Edje Text Class</a></li>
-				<li><a href="#own">Setting Your Own Font</a></li>				
-			</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Fonts: Setting Application Text Fonts</h1> 
-	
-
-<p>Tizen provides various methods for setting fonts of the application text. Basically, all UI components have a default font, which can be changed according to the system settings.</p>
-
-<p>The font handling methods include:</p>
-
-<ul> 
-   <li><a href="#component">Setting the font for a UI component</a> using the Elementary Fonts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications)</li> 
-   <li><a href="#edc">Setting the font using EDC</a></li>
-   <li><a href="#edje">Changing the font and text size</a> using the Edje Class: Text API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) 
-   
-<p>In the application, you can set a system-wide font and font size to text(textblock) parts with text classes (except <span style="font-family: Courier New,Courier,monospace;">tizen</span>). When the system applies a new system-wide font and font size to the application, the font size of text(textblock) parts with the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class are not affected. </p>
-<p>The following words in the <span style="font-family: Courier New,Courier,monospace;">text_class</span> definition are reserved for the system:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">button</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">label</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">entry</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">title_bar</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">list_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">grid_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">toolbar_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">menu_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">tizen</span></li>
-</ul>
-
-
-<p>Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.</p>
-<pre class="prettyprint">
-elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, -150);
-elm_config_font_overlay_apply();
-</pre>
-</li>
-</ul>
-
-
-<p>You can also <a href="#own">set your own font</a>.</p> 
-
-<h2 id="apply" name="apply">Applying System Font Settings</h2>
-
-<p>Tizen provides a special &quot;Tizen&quot; font name. The &quot;Tizen&quot; font name does not match with any specific font; it is just an alias for a system-defined font (system font). When you create a text(textblock) part with the &quot;Tizen&quot; font name in the application&#39;s EDC, the system font is loaded into the user application when those objects are created. Additionally, you can apply the system font to a text or textblock part by using the text class, as described above.</p>
-
-<p>The following EDC example shows how to apply the system font to a TEXT or TEXTBLOCK part by using the &quot;Tizen&quot; font name and the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class. As font name is &quot;Tizen&quot; and the font size is set to 36, the system font is loaded in size 36. If the system setting changes, this part loads the new system font. However, its font size is not changed, because the text class is <span style="font-family: Courier New,Courier,monospace;">tizen</span>.</p>
-
-<pre class="prettyprint">
-description 
-{
-&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=Regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 36;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;tizen&quot;;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-
-<p>If the part has a predefined text classes other than <span style="font-family: Courier New,Courier,monospace;">tizen</span>, its font size is resized as well.</p>
-
-<pre class="prettyprint">
-description 
-{
-&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=Regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 36;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;label&quot;;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-
-
-<h2 id="supported" name="supported">Supported Font Styles</h2>
-<p>The font styles supported by the EFL are listed in the following table.</p>
-
-<table>
-<caption>Table: Supported font styles</caption>
-<tbody>
- <tr>
-  <th>Font feature</th>
-  <th>Style attribute</th>
- </tr>
-<tr>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace;">font_style</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">oblique</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">italic</span></td>
-</tr>
-<tr>
- <td rowspan="9"><span style="font-family: Courier New,Courier,monospace;">font_width</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultracondensed</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">extracondensed</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">condensed</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">semicondensed</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">semiexpanded</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">expanded</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">extraexpanded</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultraexpanded</span></td>
-</tr>
-<tr>
- <td rowspan="11"><span style="font-family: Courier New,Courier,monospace;">font_weight</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">thin</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultralight</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">light</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">book</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">medium</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">semibold</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">bold</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultrabold</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">black</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">extrablack</span></td>
-</tr>
-</tbody>
-</table>
-	
-<p>The style attributes are not case-sensitive (however, the font feature names are).</p>
-<p>If you set the weight or width attribute to <span style="font-family: Courier New,Courier,monospace;">style=</span>, it is processed to the right attribute.</p>
-<pre class="prettyprint">
-font=TizenSans:style=Bold // Textblock
-&quot;TizenSans:style=Bold&quot;; // Text font
-&lt;font=TizenSans:style=Bold&gt; // Markup tag
-</pre>
-
-<p>You can also use each attribute separately:</p>
-
-<pre class="prettyprint">
-font=TizenSans font_style=Regular font_weight=Bold // Textblock
-&lt;font=TizenSans font_style=Regular font_weight=Bold&gt; // Markup tag
-</pre>
-
-
-<h2 name="component" id="component">Setting the Font for a UI Component</h2>
-
-<p>You can use the Elementary Fonts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications) to set the font for an application.</p>
-<p>To set a font for a UI component:</p>
-<ul>
-<li>Set the font for a common UI component:
-
- <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">You can set the font for a textblock in the code, but not in EDC (Edje Data Collection). If you add markup tags for the font inside the text, you can change the font of the text. However, you cannot set the font for a text part in this way because the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> type does not support markup tags.</td> 
-    </tr> 
-   </tbody>
-  </table>
-
-<pre class="prettyprint">
-char *buf = &quot;&lt;font=Sans:style=Regular font_size=50&gt;Hello&lt;/font/&gt;Font&quot;;
-elm_object_part_text_set(layout, &quot;textblock1&quot;, buf);
-</pre>
-</li>
-<li>Set the font for an entry component (in <a href="../../../../org.tizen.native.mobile.apireference/group__Entry.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Entry.html">wearable</a> applications) using the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. It overrides the default style of the entry component for each attribute.
-
- <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function only affects the main text of the UI component. To change the font of the guide text, you have to add markup tags.</td> 
-    </tr> 
-   </tbody>
-  </table>
-<pre class="prettyprint">
-char *user_style = &quot;DEFAULT=&#39;font=Sans:style=Regular font_size=40&#39;&quot;;
-elm_entry_text_style_user_push(entry, user_style);
-elm_object_part_text_set(entry, &quot;elm.guide&quot;,
-&nbsp;&nbsp;&nbsp;&quot;&lt;font=Sans:style=Regular font_size=40&gt;Guide Text&lt;/font&gt;&quot;);
-</pre>
-</li>
-</ul>
-
-<h2 name="edc" id="edc">Setting the Font Using EDC</h2>
-
-<p>To create a layout with text using the EDC, you can set the font for each text part or textblock:</p>
-<ul>
-<li id="TEXT">Set the font of a text part using the font family name and a specific style of the font family:
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans:style=Bold&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Enventor&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-
-<li>Add style information, which can be used for multiple textblock parts:
-<pre class="prettyprint">
-styles 
-{
-&nbsp;&nbsp;&nbsp;style 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textblock_style1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=Sans:style=Regular font_size=30&quot;;
-&nbsp;&nbsp;&nbsp;}
-}
-
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.style: &quot;textblock_style1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-</ul>
-
-<h2 name="edje" id="edje">Using the Edje Text Class</h2>
-
-<p>You can use the Edje Class: Text API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.</p>
-
- <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Note that the <span style="font-family: Courier New,Courier,monospace;">text_class</span> cannot be used in a UI component with markup text or the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. You must set the <span style="font-family: Courier New,Courier,monospace;">text_class</span> in EDC.</td> 
-    </tr> 
-   </tbody>
-  </table>
-
-
-<p>To set the text class, you can use reserved words for text class, but you can also make your own text class:</p>
-
-<ul>
-	<li>Set a class for a text part:
-
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans:style=Bold&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Enventor&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;my_class&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-<li>Set a class for a textblock:
-<pre class="prettyprint">
-styles 
-{
-&nbsp;&nbsp;&nbsp;style 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textblock_style1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=Sans:style=Regular font_size=30 ... text_class=my_class&quot;;
-&nbsp;&nbsp;&nbsp;}
-}
-
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.style: &quot;textblock_style1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-<li>
-<p>You can handle font and font style per <span style="font-family: Courier New,Courier,monospace;">text_class</span>. If you set your own <span style="font-family: Courier New,Courier,monospace;">text_class</span> in the EDC, you can change the font and font size:</p>
-
-<pre class="prettyprint">
-elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, 30);
-elm_config_font_overlay_apply();
-</pre>
-</li>
-<li>
-<p>Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.</p>
-<pre class="prettyprint">
-elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, -150);
-elm_config_font_overlay_apply();
-</pre>
-</li>
-</ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/form_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/form_tutorial_n.htm
deleted file mode 100755
index f4487a5..0000000
--- a/org.tizen.ui.guides/html/native/efl/form_tutorial_n.htm
+++ /dev/null
@@ -1,316 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating a Form for a Basic Application Layout</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#create">Creating the Basic Application</a></li>
-			<li><a href="#naviframe">Creating the Naviframe</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating a Form for a Basic Application Layout</h1>
-
-  
-<p>This tutorial explains how to create a basic application for displaying a list of contacts, and a form for displaying and editing contact information when an item is selected on the contact list.</p>
-
- <h2 id="create" name="create">Creating the Basic Application</h2>
-
-<p>To create an elementary application with a single window, use the following code.</p>
-<pre class="prettyprint">static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_gui(ad);
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;appdata_s ad = { 0 };
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-
-&nbsp;&nbsp;&nbsp;// Zero out the structure
-&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x0, sizeof(struct appdata));
-
-&nbsp;&nbsp;&nbsp;// Run the mainloop
-&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
-}
-</pre> 
-
- <h2 id="naviframe" name="naviframe">Creating the Naviframe</h2>
-
-<p>Use a naviframe in this application to switch between different views. The first view that is displayed is the list of contacts. When a user selects an item on this list, information on the contact is displayed in a form. Both the view list and the form are opened in a naviframe, which handles the animations between the views for you. It also manages creating a back button in the top bar and launching the back animation when you select it, deletes the form view, and shows the list of contacts again.</p>
-
-<h3>Naviframe</h3>
-<p>The naviframe is the main layout of the window, so it takes all the space available. To configure this, use the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add</span> function. The first parameter is the main window, the second is the naviframe object. The naviframe is to be resized along with the window. The object (the naviframe) fills its parent (the main window) by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_resize_hint_weight_set</span> function on the naviframe object. The naviframe object expands in both x and y directions. In the end, evas shows the naviframe object on the screen.</p>
-<pre class="prettyprint"> // Create the naviframe
-nav = elm_naviframe_add(win);
-evas_object_size_hint_weight_set(nav, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(win, nav);
-evas_object_show(nav);
-</pre> 
-
-<h3>Contact List</h3>
-<p>Handle the contact list with the <span style="font-family: Courier New,Courier,monospace">_create_contact_list</span> function. This function takes the parent object as the parameter (in this case the naviframe) and returns the genlist. To create the genlist, use the following code.</p>
-<pre class="prettyprint">static Evas_Object *
-_create_contact_list(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *list;
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;// Create a new genlist
-&nbsp;&nbsp;&nbsp;list = elm_genlist_add(parent);
-&nbsp;&nbsp;&nbsp;evas_object_show(list);
-
-&nbsp;&nbsp;&nbsp;// Create a new item class for the genlist
-&nbsp;&nbsp;&nbsp;itc = elm_genlist_item_class_new();
-&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;default&quot;;
-&nbsp;&nbsp;&nbsp;// Set the callback used when the genlist text is created
-&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = _genlist_text_get;
-&nbsp;&nbsp;&nbsp;// Set the callback be used when the content of the item is created
-&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get&nbsp;&nbsp;&nbsp;= _genlist_content_get;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.state_get = NULL;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.del = NULL;
-}
-</pre>
-
-<p>itc is a static variable containing the item class. The item class contains all functions that are called back when an item is created. In this case, create the callbacks <span style="font-family: Courier New,Courier,monospace">_genlist_text_get</span> (for labels) and <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> (for icons). These functions are called when labels and icons of the genlist item are created.</p>
-<p>The list of contacts is contained in an array of Contacts.</p>
-<pre class="prettyprint">typedef struct _Contact Contact;
-
-struct _Contact
-{
-&nbsp;&nbsp;&nbsp;const char *name;
-&nbsp;&nbsp;&nbsp;const char *mobile;
-&nbsp;&nbsp;&nbsp;const char *address;
-&nbsp;&nbsp;&nbsp;const char *email;
-&nbsp;&nbsp;&nbsp;const char *icon;
-};
-
-static Contact contacts[] = 
-{
-&nbsp;&nbsp;&nbsp;{&quot;Alexander Holmes&quot;, &quot;+1234567896&quot;, &quot;&quot;, &quot;alexander_holmes@tizen.org&quot;, &quot;c1.png&quot;},
-&nbsp;&nbsp;&nbsp;{&quot;Lara Alvaréz&quot;,&nbsp;&nbsp;&nbsp; &quot;+9876543216&quot;, &quot;&quot;, &quot;lara_alvares@tizen.org&quot;, &quot;c2.png&quot;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;{&quot;Aksel Møller&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;aksel_moller@tizen.org&quot;, &quot;c3.png&quot;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;{&quot;Anir Amghar&quot;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;+1679432846&quot;, &quot;&quot;, &quot;anir_amghar@tizen.org&quot;, &quot;c4.png&quot;&nbsp;&nbsp;&nbsp; },
-&nbsp;&nbsp;&nbsp;{&quot;Noémie Cordier&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;noemie_cordier@tizen.org&quot;, &quot;c5.png&quot;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;{&quot;Henry Thompson&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;henry_thompson@tizen.org&quot;, &quot;c6.png&quot;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;{&quot;Mai Phan&quot;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;mai_phan@tizen.org&quot;, &quot;c7.png&quot;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-};
-</pre>
-
-<p>Create a genlist item for each item of the array with the following code.</p>
-<pre class="prettyprint">
-// Create a genlist item for each item in the contacts array
-for (i = 0; i &lt; EINA_C_ARRAY_LENGTH(contacts); i++)
-{
-&nbsp;&nbsp;&nbsp;// Append the item, add a callback when the item is selected, and use the
-&nbsp;&nbsp;&nbsp;// current contact item as data pointer for the callbacks
-&nbsp;&nbsp;&nbsp;elm_genlist_item_append(list, itc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;contacts[i],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contact_selected_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;contacts[i]);
-}
-</pre>
-
-<p>Attach the <span style="font-family: Courier New,Courier,monospace">_contact_selected_cb</span> callback function to the genlist item. When an item is selected in the list, the data pointer passed as the argument calls this function. Here it is a pointer on the contact. Pass the contact in the array to all the Item Class callbacks.</p>
-<p>Push the list at the top of the naviframe with the following code.</p>
-<pre class="prettyprint">
-// Create the list of contacts
-list = _create_contact_list(win);
-
-// Push the list on top of the naviframe
-elm_naviframe_item_push(nav, NULL, NULL, NULL, list, NULL);
-</pre>
-
-<p>The Item class functions are called, the <span style="font-family: Courier New,Courier,monospace">_genlist_text_get</span> first.</p>
-<pre class="prettyprint">
-static char *
-_genlist_text_get(void *data, Evas_Object *obj EINA_UNUSED, const char *part)
-{
-&nbsp;&nbsp;&nbsp;Contact *contact = data;
-
-&nbsp;&nbsp;&nbsp;// Return a new allocated string for the contact name
-&nbsp;&nbsp;&nbsp;return strdup(contact-&gt;name);
-}
-</pre>
-
-<p>These functions show the index of the contact in the array and return a freshly allocated string with the name of the contact.</p>
-<p>When the user selects an item in the list, a callback registers on the select signal and calls the corresponding function; in this case, <span style="font-family: Courier New,Courier,monospace">_contact_selected_cb()</span>. The user retrieves the index of the array passed in the data and creates the form on contact information based on this index.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> function is called several times depending on the style of the created item. In this case, with the default style for the genlist item, there are two different swallow parts. A swallow part is a container in the edje file of the genlist item, which may contain an evas object. The following figure shows the layout of different parts in the theme.</p>
-
-
-<p class="figure">Figure: Genlist item</p> 
-<p align="center"><img alt="Genlist item" src="../../images/genlist_item.png" /></p>   
- 
-
-<p>There are two elm.swallow parts. When the callback function for the creation of icons is called, the part name is passed via the <span style="font-family: Courier New,Courier,monospace">part</span> variable. Compare this variable to <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> for the first object and to <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> for the icon at the end.</p>
-
-<h3>Icon</h3>
-<p>Create the icon when the callback is recognized. In this example, we use an <span style="font-family: Courier New,Courier,monospace">elm_icon</span> object.</p>
-<pre class="prettyprint">
-static Evas_Object *
-_genlist_content_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;Contact *contact = data;
-
-&nbsp;&nbsp;&nbsp;// Test which part is being created
-&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.swallow.icon&quot;))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char filename[PATH_MAX];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create a new icon
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ic = elm_icon_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the filename of the file which is to be loaded
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(filename, sizeof(filename), &quot;%s%s&quot;, ICON_PATH, contact-&gt;icon);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, filename, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Keep the ratio squared
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Return the icon
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ic;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return NULL;
-}
-</pre>
-
-<p>Note that in case of <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> the return is NULL, and no icon is added.</p>
-<p>The user may question the complexity of creating a genlist, and the benefits of callbacks for the creation of items. In a genlist with thousands of elements, graphical items are not created. Only the ones currently displayed on the screen are created with the callbacks in the Genlist Item Class. Otherwise, objects are created by calling the respective callback function when the user scrolls the list.</p>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">When the genlist is first created, the Elementary needs to know the height of the list. All elements in the list are not necessarily the same size due to different kind of styles. Thus, the Elementary creates all elements once to know the size, and displays the scroll bars correctly. If all your items have the same height, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set</span> to impose the same height to all items. The Elementary does not create the complete list as the global size is a multiple of the height of the first item. It saves you cpu time.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-  
-<h3>Contact Form</h3>
-<p>The contact list is created inside the <span style="font-family: Courier New,Courier,monospace">_create_contact_form</span> function. This function takes a parent Evas_Object and a contact item as parameters, and returns an Evas_Object. The parent is the naviframe object, and the contact item contains the information on the contact.</p>
-<p>To display the various information about the contact, we use boxes in this example.</p>
-
-   <p class="figure">Figure: Form contact layout</p> 
-   <p align="center"><img alt="Form contact layout" src="../../images/form_contact_layout.png" /></p>
-
-
-<p>The first box is an vertical box.</p>
-<pre class="prettyprint">vbox = elm_box_add(parent);
-elm_box_align_set(vbox, 0, 0);
-evas_object_show(vbox);
-</pre>
-
-<p><span style="font-family: Courier New,Courier,monospace">elm_box_align_set</span> keeps the box element aligned to the top left corner.</p>
-<p>To add an icon, use the <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> function to create the icon in the genlist item. For a bigger icon, set the minimum size of the icon object to 96x96 px.</p>
-<p>The most important function in this case is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end</span>. It adds the icon object at the end of the vbox. As the icon is the first object added, it is displayed on top of the box.</p>
-<pre class="prettyprint">
-ic = elm_icon_add(vbox);
-snprintf(filename, sizeof(filename), &quot;%s%s&quot;, ICON_PATH, contact-&gt;icon);
-elm_image_file_set(ic, filename, NULL);
-evas_object_size_hint_min_set(ic, 96, 96);
-evas_object_show(ic);
-elm_box_pack_end(vbox, ic);
-</pre>
-
-<p>In the following example, add the information on the contact: the name, the mobile phone number, the postal address and the e-mail address. For each information item, create a label and an edit line. The label contains the kind of the information, and the edit box, the information itself. To set the UI components in a horizontal layout, use a horizontal box.</p>
-<pre class="prettyprint">
-hbox = elm_box_add(vbox);
-elm_box_horizontal_set(hbox, EINA_TRUE);
-elm_box_padding_set(hbox, 32, 32);
-evas_object_size_hint_weight_set(hbox, EVAS_HINT_EXPAND, 0);
-evas_object_size_hint_align_set(hbox, EVAS_HINT_FILL, 0);
-evas_object_show(hbox);
-</pre>
-
-<p>Change the orientation of the box with <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set</span>. To get space between the elements of the vbox, set the padding to 32px. To set the item of the box not to expand vertically, use <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set</span>.</p>
-<p>Create the label object, which is an elm_label. Set its text, and do not align or expand it.</p>
-<pre class="prettyprint">
-label = elm_label_add(hbox);
-elm_object_text_set(label, form_items[i]);
-evas_object_size_hint_weight_set(label, 0, 0);
-evas_object_size_hint_align_set(label, 0, 0);
-evas_object_show(label);
-</pre>
-
-<p>Create the edit line, which is an elm_entry.</p>
-<pre class="prettyprint">
-edit = elm_entry_add(hbox);
-evas_object_size_hint_weight_set(edit, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(edit, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(edit);
-</pre>
-
-<p>Add the label and the edit inside the horizontal box and add the horizontal box to the vertical box.</p>
-<pre class="prettyprint">
-elm_box_pack_end(hbox, label);
-elm_box_pack_end(hbox, edit);
-
-elm_box_pack_end(vbox, hbox);
-</pre>
-
-	<p class="figure">Figure: Form tutorial: form</p> 
-    <p align="center"><img alt="Form tutorial: form" src="../../images/screenshot_1.png" /></p>
-
-   <p class="figure">Figure: Form tutorial: list</p> 
-   <p align="center"><img alt="Form tutorial: list" src="../../images/screenshot_2.png" /></p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</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>
diff --git a/org.tizen.ui.guides/html/native/efl/genlist_tutorial_mn.htm b/org.tizen.ui.guides/html/native/efl/genlist_tutorial_mn.htm
deleted file mode 100755
index 7e89479..0000000
--- a/org.tizen.ui.guides/html/native/efl/genlist_tutorial_mn.htm
+++ /dev/null
@@ -1,457 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Mobile Genlists</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li>Set-up
-				<ul class="toc">
-					<li><a href="#genlist_application_init">Initializing the Application</a></li>
-					<li><a href="#genlist_creation">Creating a Genlist</a></li>
-					<li><a href="#entries_creation">Adding New Entries</a></li>
-				</ul>
-			</li>
-			<li>Modifications
-				<ul class="toc">
-					<li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a></li>
-					<li><a href="#item_modes">Using Item Modes</a></li>
-					<li><a href="#other_apis">Using Other APIs</a></li>
-				</ul>
-			</li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Mobile Genlists</h1>
-
-  
-<p>This tutorial deals with genlists, a list component for large sets of elements. It uses callbacks to populate entries. The same UI component handles both flat lists and trees.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-
- <h2 id="genlist_application_init" name="genlist_application_init">Initializing the Application</h2>
-
-   <p class="figure">Figure: Example of a genlist</p> 
-   <p align="center"><img alt="Example of a genlist" src="../../images/genlist_1line.png" /></p>
-  <p>The code below shows a typical elementary application that creates a window entitled &quot;Genlist Basic Tutorial&quot;. It is consisted of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.</p>
-<pre class="prettyprint">static bool
-_app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *app = data;
-
-&nbsp;&nbsp;&nbsp;app-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Genlist Basic Tutorial&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(app-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_resize(app-&gt;win, 480, 800);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(app-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;app-&gt;conformant = elm_conformant_add(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;conformant);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;conformant);
-
-&nbsp;&nbsp;&nbsp;app-&gt;naviframe = elm_naviframe_add(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(app-&gt;conformant, app-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;_create_list(app);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(app-&gt;naviframe, NULL, NULL, NULL, app-&gt;list, NULL);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;// Declare a few structures and zero-initialize (C99 feature)
-&nbsp;&nbsp;&nbsp;struct app_data app = { 0 };
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
-
-&nbsp;&nbsp;&nbsp;event_callback.create = _app_create;
-
-&nbsp;&nbsp;&nbsp;// Run the mainloop
-&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
-}
-</pre>
-<p> The declaration of the <span style="font-family: Courier New,Courier,monospace">struct app_data</span> is shown below:</p>
-<pre class="prettyprint">struct app_data
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
-&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
-&nbsp;&nbsp;&nbsp;Evas_Object *list;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc2;
-};
-</pre>
-
- <h2 id="genlist_creation" name="genlist_creation">Creating a Genlist</h2>
-
-<p>Call <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.</p>
-<pre class="prettyprint">Evas_Object *list = elm_genlist_add(parent);
-</pre>
-
- <h2 id="entries_creation" name="entries_creation">Adding New Entries</h2>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>.</p>
-<h3 id="elm_genlist_item_class_new" name="elm_genlist_item_class_new">
-Building a Basic Item Class</h3>
-<p>The code for the minimal genlist item class is below: </p>
-
-<pre class="prettyprint">Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
-itc-&gt;item_style = &quot;default&quot;;
-itc-&gt;func.text_get = NULL;
-itc-&gt;func.content_get = NULL;
-itc-&gt;func.state_get = NULL;
-itc-&gt;func.del = NULL;
-</pre>
-
-<p>It creates a simple item class, sets the <span style="font-family: Courier New,Courier,monospace">item_style</span> to &quot;default&quot; and every other field to NULL. However, this leaves out the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> fields which are used to add text and an icon to the list entry. This is explained in another section.</p>
-<h3 id="elm_genlist_item_append" name="elm_genlist_item_append">Adding the Element</h3>
-<p>Once the genlist item class object is created, a new element is added to the list by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>. </p>
-<pre class="prettyprint">elm_genlist_item_append(list,
-&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;NULL,                    // Item data
-&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
-&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type; this is the common one
-&nbsp;&nbsp;&nbsp;NULL,                    // Callback on selection of the item
-&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
-);
-</pre>
-<p>With most parameters as NULL and <span style="font-family: Courier New,Courier,monospace">itc</span> having most of its members NULL, too, the elements of that list are blank and will not trigger anything when selected. This shows the APIs that are used.</p>
-<h3 id="text_get" name="text_get">Text in the List Elements</h3>
-<p> Use <span style="font-family: Courier New,Courier,monospace">text_get</span> callback to add text in the elements in the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure. These callbacks must have a prototype matching to the following: </p>
-
-<pre class="prettyprint">char * text_get(void *data, Evas_Object *obj, const char *part);
-</pre>
-<p>This callbacks returns a C string that is displayed in the part named after the <span style="font-family: Courier New,Courier,monospace">part</span> parameter. This callback is called for each user-settable text part according to the current theme.</p>
-<p>If you are not familiar with the concept of parts in the EFLs,  see <a href="edje_intro_n.htm#simple_edc_file">Writing a Simple EDC File</a>.</p>
-
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The value returned is freed by the EFLs: the value must be freshly-allocated, do not free it yourself and do not re-use it across list elements.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<p>For the default theme there is one part named <span style="font-family: Courier New,Courier,monospace">elm.text</span>. A possible implementation of the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is therefore: </p>
-<pre class="prettyprint">static char *
-_genlist_text_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;// Check this is text for the part we&#39;re expecting
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;Some text&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The names and positions of parts depends on the <span style="font-family: Courier New,Courier,monospace">item_style</span> chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. <a href="edje_intro_n.htm">Introduction to EDC Programming</a> explains how to do that.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to behave differently according to data that is given to the EFLs during the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, it is possible to get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
-<pre class="prettyprint">static char *
-_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
-{
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *buf = malloc(16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 16, &quot;Entry %d.&quot;, (int)(uintptr_t)data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return buf;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> 
-
-<h3 id="content_get" name="content_get">Evas_Objects in the List Elements</h3>
-<p>Icons are added in a similar fashion: there is a callback named <span style="font-family: Courier New,Courier,monospace">content_get</span> which returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and is called for each part which contents can be set.</p>
-<p>The prototype of the callback must match this one: </p>
-<pre class="prettyprint">Evas_Object * content_get(void *data, Evas_Object *obj, const char *part);
-</pre>
-
-<p>The only difference with the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is that it returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> rather than a <span style="font-family: Courier New,Courier,monospace">char *</span>.</p>
-<p>This leads to a fairly simple dummy implementation with colored rectangles in the parts that are to be set:</p>
-<pre class="prettyprint">
-static Evas_Object *
-_genlist_content_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;int i = (int) (uintptr_t) data;
-
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.swallow.icon&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (strcmp(part, &quot;elm.swallow.end&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p> For the default theme, this displays a red rectangle on the left of each list item and a green one on their right.</p>
-<h3 id="state_get" name="state_get">Events on Genlist Items</h3>
-<p>Genlist items triggers a callback when clicked. This callback is chosen when adding the new item (for example, when calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>):</p>
-<pre class="prettyprint">elm_genlist_item_append(list,
-&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;NULL,                    // Item data
-&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
-&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type, other values are used for trees
-&nbsp;&nbsp;&nbsp;_genlist_selected_cb,    // Callback on selection of the item
-&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
-);
-</pre>
-
-<p>This callback adheres to the following prototype: </p>
-<pre class="prettyprint">void _contact_selected_cb(void *data, Evas_Object *obj, void *event_info)
-</pre>
-
-<p>The implementation below changes the item style of items when they are selected:</p>
-<pre class="prettyprint">static void
-_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;struct app_data *app = data;
-
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-}
-</pre>
-
-	<h2 id="item_style" name="item_style">Choosing Another Item Style to Add or Remove Parts</h2>
- 
-<p>As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct: </p>
-<pre class="prettyprint">app-&gt;itc-&gt;item_style = &quot;default&quot;;
-</pre>
-<p>The <a href="components_mn.htm#genlist">Genlist</a> component lists all available item styles.</p>
-<p>Further customization is achieved by modifying the theme as explained in <a href="edje_intro_n.htm">Introduction to EDC Programming</a>.</p>
-<p>In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.</p>
-
- <h2 id="item_modes" name="item_modes">Using Item Modes</h2>
-
-<p>So far the genlist examples have all featured bare lists while the genlist component is able to display trees or even a &quot;group&quot; mode where scrolling keeps the item at the top of the UI component until another group comes and replaces it.</p>
-<h3 id="item_group" name="item_group">Group Mode</h3>
-<p>The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for &quot;title&quot; items.</p>
-<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
-<p>Since there are two kind of items, create two item classes. Give them different styles and callback functions. The callback functions are visible in the example, they have no functionalities:</p>
-<pre class="prettyprint">
-app-&gt;itc = elm_genlist_item_class_new();
-app-&gt;itc-&gt;item_style = &quot;default_style&quot;;
-app-&gt;itc-&gt;func.text_get = _genlist_text_get_size;
-app-&gt;itc-&gt;func.content_get = _genlist_content_get_bg;
-app-&gt;itc-&gt;func.state_get = NULL;
-app-&gt;itc-&gt;func.del = NULL; 
-
-app-&gt;itc2 = elm_genlist_item_class_new();
-app-&gt;itc2-&gt;item_style = &quot;icon_top_text_bottom&quot;;
-app-&gt;itc2-&gt;func.text_get = _genlist_text_get_nosize;
-app-&gt;itc2-&gt;func.content_get = _genlist_content_get_icon;
-app-&gt;itc2-&gt;func.state_get = NULL;
-app-&gt;itc2-&gt;func.del = NULL; 
-</pre>
-
-<p> Then add a group header and follow it with 10 children. This is repeated 1000 times.</p>
-<p>The parent has type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> while the children have type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span>.</p>
-<p>The other important point is that the value returned by <span style="font-family: Courier New,Courier,monospace">lm_genlist_item_append()</span> is stored in it and then sent to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> call that adds the children. This creates the parent-children relationship.</p>
-<pre class="prettyprint">
-for (i = 0; i &lt; 1000; i++) 
-{
-&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(app-&gt;list, app-&gt;itc2, (void *)(uintptr_t) (10 * i), 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP, NULL, NULL);
-&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; 10; j++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (10 * i + j), it,
-&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;ELM_GENLIST_ITEM_NONE, NULL, NULL);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h3 id="item_tree" name="item_tree">Tree Mode</h3>
-<p>Like group mode, tree mode uses the parenting relationship with other items. Unlike group mode, the child elements are created on-demand when their parent is expanded and deleted when it is contracted. This is done by using smart callbacks: <span style="font-family: Courier New,Courier,monospace">expand,request</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">contract,request</span>, and <span style="font-family: Courier New,Courier,monospace">contracted</span>. Like any smart callback, they are registered through <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> on the genlist object:</p>
-<pre class="prettyprint">evas_object_smart_callback_add(app-&gt;list, &quot;expand,request&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_expand_request, NULL);
-evas_object_smart_callback_add(app-&gt;list, &quot;expanded&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_expanded, NULL);
-
-evas_object_smart_callback_add(app-&gt;list, &quot;contract,request&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_contract_request, NULL);
-evas_object_smart_callback_add(app-&gt;list, &quot;contracted&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_contracted, NULL);
-</pre>
-
-<p> The callbacks <span style="font-family: Courier New,Courier,monospace">expand,request</span> and <span style="font-family: Courier New,Courier,monospace">contract,request</span> do only one thing: decide whether the element is expanded or contracted. This is done by using <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function; if it changes the expansion status of the item, the next callback is called (either <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span>, depending on whether it was an <span style="font-family: Courier New,Courier,monospace">expand,request</span> or <span style="font-family: Courier New,Courier,monospace">contract,request</span> event). A minimal implementation of these callbacks is therefore:</p>
-<pre class="prettyprint">
-static void
-_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The example above has an extra line: the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span>. It changes the item style and is explained in the <a href="#item_class_update">Changing the item class of an item after its creation</a> section.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<pre class="prettyprint">
-static void
-_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_FALSE);
-}
-</pre>
-
-<p> As said above, once the genlist item status is set to expanded, the <span style="font-family: Courier New,Courier,monospace">expanded</span> event is triggered and it is the duty of a callback for that event to populate the list with the item&#39;s children. This relies on the <span style="font-family: Courier New,Courier,monospace">parent</span> parameter of functions like <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>, like for the group mode.</p>
-<p>The function below is a callback implementation for the <span style="font-family: Courier New,Courier,monospace">expanded</span> event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not NULL. Conveniently, the parent <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> pointer that is passes to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is given in the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback and needs to be cast.</p>
-<pre class="prettyprint">static void
-_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
-&nbsp;&nbsp;&nbsp;int i_parent = (int)(uintptr_t) data;
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 10; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (i + i_parent), it_parent,
-&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;ELM_GENLIST_ITEM_NONE, NULL, NULL);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The following code has the callback function for the <span style="font-family: Courier New,Courier,monospace">contracted</span> event. It imply calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter to the callback.</p>
-<pre class="prettyprint">static void
-_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_subitems_clear(it_parent);
-}
-</pre>
-
-<h3 id="item_group_tree" name="item_group_tree">Mixing Group and Tree Modes</h3>
-<p>A common UI design is to mix group and tree modes. It allows for a tree behavior while also keeping the group header item. The EFLs do not do any magic here and the way to get such a behavior is to create an item of type group, an item of type tree which parent is the group item. Then add the callbacks to populate the children of the tree item in the regular way.</p>
-
- <h2 id="other_apis" name="other_apis">Using Other APIs</h2>
-
-<h3 id="homogeneous_set" name="homogeneous_set">Homogeneous Item Size</h3>
-<p>Because of the scroller, the actual height and/or width of the genlist must be computed. This means summing the sizes of all the items, the sizes must be computed. This obviously has a cost and slows down adding items to the genlist.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function alleviates this issue by assuming all the items are the same size as the first one of the list. It speeds up large insertions. However, it may lead to serious graphical issues if the items are not actually the same size. Use with care.</p>
-
-<h3 id="item_class_update" name="item_class_update">Changing the Item Class of an Item After Its Creation</h3>
-<p>Changing the item class of a UI component is an easy way to change its appearance upon selection or other actions of the user. This is done by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_update()</span>:</p>
-<pre class="prettyprint">static void
-_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;// Change the appearance and possibly content of the item being expanded.
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/genlist_tutorial_wn.htm b/org.tizen.ui.guides/html/native/efl/genlist_tutorial_wn.htm
deleted file mode 100755
index 7f9a993..0000000
--- a/org.tizen.ui.guides/html/native/efl/genlist_tutorial_wn.htm
+++ /dev/null
@@ -1,469 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Wearable Genlists</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li>Set-up
-				<ul class="toc">
-					<li><a href="#genlist_application_init">Initializing the Application</a></li>
-					<li><a href="#genlist_creation">Creating a Genlist</a></li>
-					<li><a href="#entries_creation">Adding New Entries</a></li>
-				</ul>
-			</li>
-			<li>Modifications
-				<ul class="toc">
-					<li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a></li>
-					<li><a href="#item_modes">Using Item Modes</a></li>
-					<li><a href="#other_apis">Using Other APIs</a></li>
-				</ul>
-			</li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>		
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Wearable Genlists</h1>
-
-<p>This tutorial deals with genlists, a list component for large sets of elements. It uses callbacks to populate entries. The same UI component handles both flat lists and trees.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-
- <h2 id="genlist_application_init" name="genlist_application_init">Initializing the Application</h2>
-
-   <p class="figure">Figure: Example of a genlist</p> 
-   <p align="center"><img alt="Example of a genlist" src="../../images/genlist_wn.png" /></p>
-  <p>The code below shows a typical elementary application that creates a window entitled &quot;Genlist Basic Tutorial&quot;. It is consisted of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.</p>
-<pre class="prettyprint">static bool
-_app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *app = data;
-
-&nbsp;&nbsp;&nbsp;app-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Genlist Basic Tutorial&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(app-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_resize(app-&gt;win, 480, 800);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(app-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;app-&gt;conformant = elm_conformant_add(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;conformant);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;conformant);
-
-&nbsp;&nbsp;&nbsp;app-&gt;naviframe = elm_naviframe_add(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(app-&gt;conformant, app-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;_create_list(app);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(app-&gt;naviframe, NULL, NULL, NULL, app-&gt;list, NULL);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;// Declare a few structures and zero-initialize (C99 feature)
-&nbsp;&nbsp;&nbsp;struct app_data app = { 0 };
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
-
-&nbsp;&nbsp;&nbsp;event_callback.create = _app_create;
-
-&nbsp;&nbsp;&nbsp;// Run the mainloop
-&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
-}
-</pre>
-<p> The declaration of the <span style="font-family: Courier New,Courier,monospace">struct app_data</span> is shown below:</p>
-<pre class="prettyprint">struct app_data
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
-&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
-&nbsp;&nbsp;&nbsp;Evas_Object *list;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc2;
-};
-</pre>
-
- <h2 id="genlist_creation" name="genlist_creation">Creating a Genlist</h2>
-
-<p>Call <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.</p>
-<pre class="prettyprint">Evas_Object *list = elm_genlist_add(parent);
-</pre>
-
- <h2 id="entries_creation" name="entries_creation">Adding New Entries</h2>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>.</p>
-<h3 id="elm_genlist_item_class_new" name="elm_genlist_item_class_new">
-Building a Basic Item Class</h3>
-<p>The code for the minimal genlist item class is below: </p>
-
-<pre class="prettyprint">Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
-itc-&gt;item_style = &quot;default&quot;;
-itc-&gt;func.text_get = NULL;
-itc-&gt;func.content_get = NULL;
-itc-&gt;func.state_get = NULL;
-itc-&gt;func.del = NULL;
-</pre>
-
-<p>It creates a simple item class, sets the <span style="font-family: Courier New,Courier,monospace">item_style</span> to &quot;default&quot; and every other field to NULL. However, this leaves out the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> fields which are used to add text and an icon to the list entry. This is explained in another section.</p>
-<h3 id="elm_genlist_item_append" name="elm_genlist_item_append">Adding the Element</h3>
-<p>Once the genlist item class object is created, a new element is added to the list by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>. </p>
-<pre class="prettyprint">elm_genlist_item_append(list,
-&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;NULL,                    // Item data
-&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
-&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type; this is the common one
-&nbsp;&nbsp;&nbsp;NULL,                    // Callback on selection of the item
-&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
-);
-</pre>
-<p>With most parameters as NULL and <span style="font-family: Courier New,Courier,monospace">itc</span> having most of its members NULL, too, the elements of that list are blank and will not trigger anything when selected. This shows the APIs that are used.</p>
-<h3 id="text_get" name="text_get">Text in the List Elements</h3>
-<p> Use <span style="font-family: Courier New,Courier,monospace">text_get</span> callback to add text in the elements in the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure. These callbacks must have a prototype matching to the following: </p>
-
-<pre class="prettyprint">char * text_get(void *data, Evas_Object *obj, const char *part);
-</pre>
-<p>This callbacks returns a C string that is displayed in the part named after the <span style="font-family: Courier New,Courier,monospace">part</span> parameter. This callback is called for each user-settable text part according to the current theme.</p>
-<p>If you are not familiar with the concept of parts in the EFLs, see <a href="edje_intro_n.htm#simple_edc_file">Writing a Simple EDC File</a>.</p>
-
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The value returned is freed by the EFLs: the value must be freshly-allocated, do not free it yourself and do not re-use it across list elements.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<p>For the default theme there is one part named <span style="font-family: Courier New,Courier,monospace">elm.text</span>. A possible implementation of the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is therefore: </p>
-<pre class="prettyprint">static char *
-_genlist_text_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;// Check this is text for the part we&#39;re expecting
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;Some text&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The names and positions of parts depends on the <span style="font-family: Courier New,Courier,monospace">item_style</span> chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. <a href="edje_intro_n.htm">Introduction to EDC Programming</a> explains how to do that.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to behave differently according to data that is given to the EFLs during the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, it is possible to get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
-<pre class="prettyprint">static char *
-_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
-{
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *buf = malloc(16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 16, &quot;Entry %d.&quot;, (int)(uintptr_t)data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return buf;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> 
-
-<h3 id="content_get" name="content_get">Evas_Objects in the List Elements</h3>
-<p>Icons are added in a similar fashion: there is a callback named <span style="font-family: Courier New,Courier,monospace">content_get</span> which returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and is called for each part which contents can be set.</p>
-<p>The prototype of the callback must match this one: </p>
-<pre class="prettyprint">Evas_Object * content_get(void *data, Evas_Object *obj, const char *part);
-</pre>
-
-<p>The only difference with the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is that it returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> rather than a <span style="font-family: Courier New,Courier,monospace">char *</span>.</p>
-<p>This leads to a fairly simple dummy implementation with colored rectangles in the parts that are to be set:</p>
-<pre class="prettyprint">
-static Evas_Object *
-_genlist_content_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;int i = (int) (uintptr_t) data;
-
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.swallow.icon&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (strcmp(part, &quot;elm.swallow.end&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p> For the default theme, this displays a red rectangle on the left of each list item and a green one on their right.</p>
-<h3 id="state_get" name="state_get">Events on Genlist Items</h3>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The swallow parts have no minimum size. This means that if you do not fix the minimum size, the part cannot be seen.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<p>Genlist items triggers a callback when clicked. This callback is chosen when adding the new item (for example, when calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>):</p>
-<pre class="prettyprint">elm_genlist_item_append(list,
-&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;NULL,                    // Item data
-&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
-&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type, other values are used for trees
-&nbsp;&nbsp;&nbsp;_genlist_selected_cb,    // Callback on selection of the item
-&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
-);
-</pre>
-
-<p>This callback adheres to the following prototype: </p>
-<pre class="prettyprint">void _contact_selected_cb(void *data, Evas_Object *obj, void *event_info)
-</pre>
-
-<p>The implementation below changes the item style of items when they are selected:</p>
-<pre class="prettyprint">static void
-_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *app = data;
-
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-}
-</pre>
-
-	<h2 id="item_style" name="item_style">Choosing Another Item Style to Add or Remove Parts</h2>
- 
-<p>As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct: </p>
-<pre class="prettyprint">app-&gt;itc-&gt;item_style = &quot;default&quot;;
-</pre>
-<p>The <a href="components_wn.htm#genlist">Genlist</a> component lists all available item styles.</p>
-<p>Further customization is achieved by modifying the theme as explained in <a href="edje_intro_n.htm">Introduction to EDC Programming</a>.</p>
-<p>In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.</p>
-
- <h2 id="item_modes" name="item_modes">Using Item Modes</h2>
-
-<p>So far the genlist examples have all featured bare lists while the genlist component is able to display trees or even a &quot;group&quot; mode where scrolling keeps the item at the top of the UI component until another group comes and replaces it.</p>
-<h3 id="item_group" name="item_group">Group Mode</h3>
-<p>The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for &quot;title&quot; items.</p>
-<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
-<p>Since there are two kind of items, create two item classes. Give them different styles and callback functions. The callback functions are visible in the example, they have no functionalities:</p>
-<pre class="prettyprint">
-app-&gt;itc = elm_genlist_item_class_new();
-app-&gt;itc-&gt;item_style = &quot;default&quot;;
-app-&gt;itc-&gt;func.text_get = _genlist_text_get_size;
-app-&gt;itc-&gt;func.content_get = _genlist_content_get_bg;
-app-&gt;itc-&gt;func.state_get = NULL;
-app-&gt;itc-&gt;func.del = NULL; 
-
-app-&gt;itc2 = elm_genlist_item_class_new();
-app-&gt;itc2-&gt;item_style = &quot;1text.1icon&quot;;
-app-&gt;itc2-&gt;func.text_get = _genlist_text_get_nosize;
-app-&gt;itc2-&gt;func.content_get = _genlist_content_get_icon;
-app-&gt;itc2-&gt;func.state_get = NULL;
-app-&gt;itc2-&gt;func.del = NULL; 
-</pre>
-
-<p> Then add a group header and follow it with 10 children. This is repeated 1000 times.</p>
-<p>The parent has type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> while the children have type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span>.</p>
-<p>The other important point is that the value returned by <span style="font-family: Courier New,Courier,monospace">lm_genlist_item_append()</span> is stored in it and then sent to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> call that adds the children. This creates the parent-children relationship.</p>
-<pre class="prettyprint">
-for (i = 0; i &lt; 1000; i++) 
-{
-&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(app-&gt;list, app-&gt;itc2, (void *)(uintptr_t) (10 * i), 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP, NULL, NULL);
-&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; 10; j++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (10 * i + j), it,
-&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;ELM_GENLIST_ITEM_NONE, NULL, NULL);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h3 id="item_tree" name="item_tree">Tree Mode</h3>
-<p>Like group mode, tree mode uses the parenting relationship with other items. Unlike group mode, the child elements are created on-demand when their parent is expanded and deleted when it is contracted. This is done by using smart callbacks: <span style="font-family: Courier New,Courier,monospace">expand,request</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">contract,request</span>, and <span style="font-family: Courier New,Courier,monospace">contracted</span>. Like any smart callback, they are registered through <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> on the genlist object:</p>
-<pre class="prettyprint">evas_object_smart_callback_add(app-&gt;list, &quot;expand,request&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_expand_request, NULL);
-evas_object_smart_callback_add(app-&gt;list, &quot;expanded&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_expanded, NULL);
-
-evas_object_smart_callback_add(app-&gt;list, &quot;contract,request&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_contract_request, NULL);
-evas_object_smart_callback_add(app-&gt;list, &quot;contracted&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_contracted, NULL);
-</pre>
-
-<p> The callbacks <span style="font-family: Courier New,Courier,monospace">expand,request</span> and <span style="font-family: Courier New,Courier,monospace">contract,request</span> do only one thing: decide whether the element is expanded or contracted. This is done by using <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function; if it changes the expansion status of the item, the next callback is called (either <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span>, depending on whether it was an <span style="font-family: Courier New,Courier,monospace">expand,request</span> or <span style="font-family: Courier New,Courier,monospace">contract,request</span> event). A minimal implementation of these callbacks is therefore:</p>
-<pre class="prettyprint">
-static void
-_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The example above has an extra line: the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span>. It changes the item style and is explained in the <a href="#item_class_update">Changing the item class of an item after its creation</a> section.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<pre class="prettyprint">
-static void
-_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_FALSE);
-}
-</pre>
-
-<p> As said above, once the genlist item status is set to expanded, the <span style="font-family: Courier New,Courier,monospace">expanded</span> event is triggered and it is the duty of a callback for that event to populate the list with the item&#39;s children. This relies on the <span style="font-family: Courier New,Courier,monospace">parent</span> parameter of functions like <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>, like for the group mode.</p>
-<p>The function below is a callback implementation for the <span style="font-family: Courier New,Courier,monospace">expanded</span> event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not NULL. Conveniently, the parent <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> pointer that is passes to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is given in the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback and needs to be cast.</p>
-<pre class="prettyprint">static void
-_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
-&nbsp;&nbsp;&nbsp;int i_parent = (int)(uintptr_t) data;
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 10; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (i + i_parent), it_parent,
-&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;ELM_GENLIST_ITEM_NONE, NULL, NULL);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The following code has the callback function for the <span style="font-family: Courier New,Courier,monospace">contracted</span> event. It imply calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter to the callback.</p>
-<pre class="prettyprint">static void
-_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_subitems_clear(it_parent);
-}
-</pre>
-
-<h3 id="item_group_tree" name="item_group_tree">Mixing Group and Tree Modes</h3>
-<p>A common UI design is to mix group and tree modes. It allows for a tree behavior while also keeping the group header item. The EFLs do not do any magic here and the way to get such a behavior is to create an item of type group, an item of type tree which parent is the group item. Then add the callbacks to populate the children of the tree item in the regular way.</p>
-
- <h2 id="other_apis" name="other_apis">Using Other APIs</h2>
-
-<h3 id="homogeneous_set" name="homogeneous_set">Homogeneous Item Size</h3>
-<p>Because of the scroller, the actual height and/or width of the genlist must be computed. This means summing the sizes of all the items, the sizes must be computed. This obviously has a cost and slows down adding items to the genlist.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function alleviates this issue by assuming all the items are the same size as the first one of the list. It speeds up large insertions. However, it may lead to serious graphical issues if the items are not actually the same size. Use with care.</p>
-
-<h3 id="item_class_update" name="item_class_update">Changing the Item Class of an Item After Its Creation</h3>
-<p>Changing the item class of a UI component is an easy way to change its appearance upon selection or other actions of the user. This is done by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_update()</span>:</p>
-<pre class="prettyprint">static void
-_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;// Change the appearance and possibly content of the item being expanded.
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/graphical_objects_n.htm b/org.tizen.ui.guides/html/native/efl/graphical_objects_n.htm
deleted file mode 100755
index 6f3c87f..0000000
--- a/org.tizen.ui.guides/html/native/efl/graphical_objects_n.htm
+++ /dev/null
@@ -1,78 +0,0 @@
-<!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>Graphical Objects: Managing and Rendering Evas Objects</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
-		</ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Graphical Objects: Managing and Rendering Evas Objects</h1>
-  
-<p>Evas is a clean display canvas API for several target display systems that can draw anti-aliased text, smooth super and sub-sampled scaled images, alpha-blend objects and much more.</p>
-<p>It abstracts any need to know much about what the characteristics of your display system are, what graphics calls are used to draw them, and how. It deals on an object level where all you do is create and manipulate objects in a canvas and set their properties.</p>
-<p>Evas optimizes the rendering pipeline to minimize effort in redrawing changes made to the canvas and so takes this work out of the programmers hand, saving a lot of time and energy.</p>
-<p>It is designed to work on embedded systems all the way to large and powerful multi-cpu workstations. It can be compiled to only have the features you need for your target platform if you so wish. It has several display back-ends, allowing it display on several display systems, making it portable for cross-device and cross-platform development.</p>
-
-<p>Evas is not a UI component set or a UI component toolkit, but it is their base. See Elementary for a toolkit based on Evas, Edje, Ecore and other Enlightenment technologies.</p>
-<p>It is not dependent or aware of main loops, input or output systems. Input must be polled from various sources and fed to Evas. It does not create windows or report windows updates to your system, but draws the pixels and reports to the user the areas that are changed. These operations are ready to be used in Ecore, particularly in Ecore_Evas wrapper/helper set of functions.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/guides_efl_n.htm b/org.tizen.ui.guides/html/native/efl/guides_efl_n.htm
deleted file mode 100755
index 2e2ae38..0000000
--- a/org.tizen.ui.guides/html/native/efl/guides_efl_n.htm
+++ /dev/null
@@ -1,95 +0,0 @@
-<!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>EFL</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>EFL</h1>
-
-<p>EFL is an open-source UI toolkit that provides a set of libraries that offer useful features to applications. EFL covers a number of areas from UI component sets to data structures. EFL is one of the Tizen native UI modules and is available in various Tizen profiles. In Tizen, EFL is commonly used for UI applications, although you can also use it for non-UI applications.</p>
-
-<p>When creating an EFL application, make sure you understand the following main features:</p>
-
-<ul>
-	<li><a href="efl_overview_n.htm">EFL Overview: Getting Started with EFL UI Programming</a>
-	<p>Enables you to get started with the EFL UI programming.</p></li>
-	<li><a href="ui_components_n.htm">UI Components: Handling Elementary UI Component Libraries</a>
-	<p>Enables you to handle Elementary UI components.</p></li>
-	<li><a href="component_infra_n.htm">UI Component Infrastructure Modules: Managing Component Properties</a>
-	<p>Enables you to handle infrastructure modules to manage the common properties of UI components.</p></li>
-	<li><a href="ui_containers_n.htm">UI Containers: Creating Layouts Using Container UI Components</a>
-	<p>Enables you to create layouts using container UI components.</p></li>
-	<li><a href="theme_n.htm">Themes: Specifying the UI Look and Feel</a>
-	<p>Enables you to specify the UI look and feel.</p></li>
-	<li><a href="edje_objects_n.htm">Edje Objects: Managing Layouts and Layout Components</a>
-	<p>Enables you to manage layouts and layout components.</p></li>
-	<li><a href="font_setting_n.htm">Fonts: Setting Application Text Fonts</a>
-	<p>Enables you get and set font information.</p></li>
-	<li><a href="ui_scalability_n.htm">Scaling: Handling Screen and Object Sizes</a>
-	<p>Enables you to manage various screen and object sizes.</p></li>
-	<li><a href="notification_window_n.htm">Notification Windows: Supporting Notification Levels, Screenshots, and Input Generators</a>
-	<p>Enables you to handle EFL utilities, such as notification windows, screenshots, and input generators.</p></li>
-	<li><a href="core_loop_n.htm">Core Loop and OS Interfacing: Handling the Main Loop and Threads</a>
-	<p>Enables you to use the main loop and handle threads.</p></li>
-	<li><a href="graphical_objects_n.htm">Graphical Objects: Managing and Rendering Evas Objects</a>
-	<p>Enables you to manage and render Evas objects.</p></li>
-	<li><a href="event_handling_n.htm">Event Handling: Managing the Event Flow</a>
-	<p>Enables you to manage polling, timers, events, and file descriptors.</p></li>
-	<li><a href="animation_effects_n.htm">Animations and Effects: Creating Transformations</a>
-	<p>Enables you to create physics-related animations and effects.</p></li>
-	<li><a href="data_types_tools_n.htm">Data Types and Tools: Using Eina Resources</a>
-	<p>Enables you to take advantage of data types and tools used in multiple places.</p></li>
-	<li><a href="hw_input_n.htm">Hardware Input Handling: Managing Hardware Events with EFL Extension</a>
-	<p>Enables you to use the EFL extension to manage hardware input events.</p></li>
-</ul>
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.ui.guides/html/native/efl/hw_input_n.htm b/org.tizen.ui.guides/html/native/efl/hw_input_n.htm
deleted file mode 100755
index 27f1a9f..0000000
--- a/org.tizen.ui.guides/html/native/efl/hw_input_n.htm
+++ /dev/null
@@ -1,64 +0,0 @@
-<!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>Hardware Input Handling: Managing Hardware Events with EFL Extension</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>		
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Hardware Input Handling: Managing Hardware Events with EFL Extension</h1> 
-
-   <p>The Tizen platform offers the <strong>Menu</strong>, <strong>Back</strong>, and <strong>Home</strong> keys as <a href="key_events_n.htm">physical hardware keys</a> for mobile devices and <a href="rotary_events_n.htm">rotary component parts</a> for wearable devices.</p>
-   
-   <p>Basically, EFL does not depend on any specific hardware input methods, such as hardware keys, to generate back and home events, or rotary component parts to generate rotary events. Instead these hardware input events have tightly related to the Tizen UX. As a result, EFL has created the EFL extension library to support common UX behavior between applications and hardware events.</p>
-   
-   <p>When the user presses the <strong>Menu</strong> or <strong>Back</strong> key, the key generates a signal with its key property. The Ecore library receives the signal and propagates it to application layers as an event. The EFL extension library consumes the events and handles the views of the application according to key properties. Otherwise, EFL extension manages the rotary events, which are generated from rotary components in wearable devices and delivered to application layers by defining an event callback or a handler function, and registering it.</p>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/layout_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/layout_tutorial_n.htm
deleted file mode 100755
index 5478634..0000000
--- a/org.tizen.ui.guides/html/native/efl/layout_tutorial_n.htm
+++ /dev/null
@@ -1,751 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating UI Screen Layouts</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#init">Creating the UI Layout</a></li>
-			<li><a href="#add_content">Adding Content to the Screen</a></li>
-			<li><a href="#layout">Using the Base Layout</a></li>
-			<li><a href="#base">Sample Applications with the Base Layout</a></li>
-			<li><a href="#custom">Sample Applications with a Custom Layout</a></li>			
-			<li><a href="#ClockSimple">Creating a Simple Clock View</a></li>
-			<li><a href="#ClockComplex">Creating a Complex Clock View</a></li>			
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Creating UI Screen Layouts</h1>
-
-  
-<p>This tutorial demonstrates how you can compose a UI screen using the layout classes available in the EFL UI component library. It also highlights the capabilities of the EFL layout classes in free style layouting as well as layouting in a particular sequence (such as linear or grid).</p>
-
-
- <h2 id="init" name="init">Creating the UI Layout</h2>
-
-<p>The sample application uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> and <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> for the view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_table</span>, <span style="font-family: Courier New,Courier,monospace">elm_box</span>, and <span style="font-family: Courier New,Courier,monospace">elm_grid</span> for the composition of the screen, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_label</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component which acts as a view manager for the window and provides the window title functionality. After this it creates the toolbar using the <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function and adds it to naviframe.</p>
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it, *tabbar_it;
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&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;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;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;UiLayout&quot;, NULL, NULL, NULL, &quot;tabbar/icon/notitle&quot;);
-
-&nbsp;&nbsp;&nbsp;// Tabbar
-&nbsp;&nbsp;&nbsp;ad-&gt;tabbar = create_toolbar(ad);
-&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, ad-&gt;tabbar);
-
-&nbsp;&nbsp;&nbsp;// Set the first view
-&nbsp;&nbsp;&nbsp;tabbar_it = elm_toolbar_first_item_get(ad-&gt;tabbar);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(tabbar_it, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, NULL);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function creates the toolbar which is then added to the naviframe.</p>
-<pre class="prettyprint">
-static Evas_Object*
-create_toolbar(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *tabbar;
-
-&nbsp;&nbsp;&nbsp;tabbar = elm_toolbar_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;elm_object_style_set(tabbar, &quot;tabbar&quot;);
-&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(tabbar, ELM_TOOLBAR_SHRINK_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(tabbar, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Box&quot;, tabbar_item_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Grid&quot;, tabbar_item_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Table&quot;, tabbar_item_cb, ad);
-
-&nbsp;&nbsp;&nbsp;return tabbar;
-}
-</pre>
-
-<p>The following figure illustrates the UI Layout.</p>
-
-  <p class="figure">Figure: UI Layout screen</p> 
-  <p align="center"><img alt="UI Layout screen" src="../../images/uilayout_view2.png" /></p> 
-
- <h2 id="add_content" name="add_content">Adding Content to the Screen</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_box_view()</span> function creates the screen using a recursive composition of the box layout.</p> 
-
-<pre class="prettyprint">static Evas_Object*
-create_box_view(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box, *box1, *box2, *box3;
-
-&nbsp;&nbsp;&nbsp;box = elm_box_add(parent);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(box, 10, 10);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
-
-&nbsp;&nbsp;&nbsp;box1 = elm_box_add(box);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box1, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(box1, 8, 8);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box1, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_show(box1);
-
-&nbsp;&nbsp;&nbsp;box2 = elm_box_add(box);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(box2, 6, 6);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box2, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_show(box2);
-
-&nbsp;&nbsp;&nbsp;box3 = elm_box_add(box);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(box3, 5, 5);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box3, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(box3, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;evas_object_show(box3);
-} 
-</pre>
-
-<p>Once the box layout is created, content or another box layout is added to the box. Box implements the size policy during the size calculation.</p> 
-
-<pre class="prettyprint">// Add an item to the box
-Evas_Object *item1 = create_content(box, &quot;Item 1&quot;);
-evas_object_size_hint_min_set(item1, 0, 40);
-elm_box_pack_end(box, item1);
-elm_box_pack_end(box, box1);
-elm_box_pack_end(box, box3);
-elm_box_pack_end(box, create_content(box, &quot;Item 4&quot;));
-
-// Add an item to the box1
-elm_box_pack_end(box1, create_content(box1, &quot;Item 2.1&quot;));
-elm_box_pack_end(box1, box2);
-elm_box_pack_end(box1, create_content(box1, &quot;Item 2.3&quot;));
-
-// Add an item to the box2
-elm_box_pack_end(box2, create_content(box2, &quot;Item 2.2.1&quot;));
-elm_box_pack_end(box2, create_content(box2, &quot;Item 2.2.2&quot;));
-
-// Add an item to the box3
-elm_box_pack_end(box3, create_content(box3, &quot;Item 3.1&quot;));
-elm_box_pack_end(box3, create_content(box3, &quot;Item 3.2&quot;));
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_table_view()</span> function creates the screen by composing table layout with content and grid view.</p>
-
-<pre class="prettyprint">static Evas_Object*
-create_table_view(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *table, *item;
-
-&nbsp;&nbsp;&nbsp;table = elm_table_add(parent);
-&nbsp;&nbsp;&nbsp;elm_table_padding_set(table, 10, 10);
-&nbsp;&nbsp;&nbsp;elm_table_homogeneous_set(table, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(table, EVAS_HINT_FILL, EVAS_HINT_FILL);
-
-&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 1&quot;);
-&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 0, 2, 1);
-
-&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 2&quot;);
-&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 2, 0, 1, 1);
-
-&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 3&quot;);
-&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 1, 3, 1);
-
-&nbsp;&nbsp;&nbsp;// Add a grid view item
-&nbsp;&nbsp;&nbsp;item = create_grid_view(table);
-&nbsp;&nbsp;&nbsp;evas_object_show(item);
-&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 2, 3, 10);
-
-&nbsp;&nbsp;&nbsp;return table;
-}
-</pre>
-
-<p>The table layout can be used for freestyle layouting, and for standard layouts, such as lists and grids. It does not consider the size policy of the child item during size calculation.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">create_grid_view()</span> function composes a screen using the grid layout and also uses box and table layout as a child item to pack inside a grid. It uses free style layouting, and during size evaluation of the child item, it does not take the size policy of the child item into consideration.</p>
-
-<pre class="prettyprint">static Evas_Object*
-create_grid_view(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *grid, *item;
-
-&nbsp;&nbsp;&nbsp;grid = elm_grid_add(parent);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
-
-&nbsp;&nbsp;&nbsp;// Red background for the grid
-&nbsp;&nbsp;&nbsp;item = create_bg(grid, 255, 0, 0);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 0, 0, 100, 100);
-
-&nbsp;&nbsp;&nbsp;// Add the item to the grid
-&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item1&quot;);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 1, 1, 98, 98);
-
-&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item2&quot;);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 2, 5, 20, 20);
-
-&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item3&quot;);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 23, 5, 76, 94);
-
-&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item4&quot;);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 2, 27, 20, 70);
-
-&nbsp;&nbsp;&nbsp;// Black background for the box view item
-&nbsp;&nbsp;&nbsp;item = create_bg(grid, 40, 40, 40);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 25, 10, 73, 87);
-
-&nbsp;&nbsp;&nbsp;// Add the box view item to the grid
-&nbsp;&nbsp;&nbsp;item = create_box_view(grid);
-&nbsp;&nbsp;&nbsp;evas_object_show(item);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 26, 11, 71, 85);
-
-&nbsp;&nbsp;&nbsp;return grid;
-}
-</pre>
-
- <h2 id="layout" name="layout">Using the Base Layout</h2>
-
-<p>When developing a Tizen native application, it is recommended that you base your application layout on the base layout. The base layout supports the indicator and view management. The following figure shows the wireframe and UI component hierarchy of the base layout:</p>
-
-<p class="figure">Figure: Base layout wireframe and UI component hierarchy</p>
-<p align="center"><img alt="Base layout wireframe and UI component hierarchy" src="../../images/base_layout.png"/></p>
-
-<p>The UI components have the following roles:</p>
-
-<ul>
- <li>Window (Elm_win): Every UI component from Elementary is rendered in a Window.</li>
- <li>Conformant (Elm_Conformant): The Conformant supports the indicator area and resizing the application due to rotation or the ISF (keypad).</li>
- <li>Naviframe (Elm_Naviframe): The Naviframe acts as a view manager and optionally provides the application title. The main layout of the application is added to the Naviframe's view area.</li>
-</ul>
-
-
-<h2 id="base" name="base">Sample Applications with the Base Layout</h2>
-
-<h3>Setting</h3>
-
-<p>The Setting application consists of a list to show as a menu. For organizing the application, create the application layout with a screen-size-list and place the layout into the Naviframe's view area.</p>
-
-<p class="figure">Figure: Setting UI and layout</p>
-<p align="center"><img alt="Settings UI and layout" src="../../images/setting_sd.png"/></p>
-
-<p>For more information, see the Setting sample application.</p>
-
-<h3>Application Store</h3>
-
-<p>For organizing the Application Store application, you need to add a scroller to the base layout, since the total height of the layout will be greater than the screen size, and you will therefore need to scroll the screen contents up and down. If the layout is larger than the screen, the scroller makes the view itself scrollable.</p>
-
-<p>You can use a list or grid if the same objects are shown repeatedly. In this sample application, however, the various items are shown in a layout.</p>
-
-<p class="figure">Figure: Application Store UI and layout</p>
-<p align="center"><img alt="Application Store UI and layout" src="../../images/application_store_sd.png"/></p>
-
-<p>For more information, see the Application Store sample application.</p>
-
-<h2 id="custom" name="custom">Sample Applications with a Custom Layout</h2>
-
-<h3>Calculator - No Naviframe</h3>
-
-<p>The Calculator is a good example of an exception to the base layout. The application has no view changes and no application title. As these are the two reasons why you should use a Naviframe, you do not need to add a Naviframe to the Calculator.</p>
-
-<p>You can organize the application layout with container components. Container components are used for arranging UI components, both basic UI components and other container components.</p>
-
-<p class="figure">Figure: Calculator UI and layout</p>
-<p align="center"><img alt="Calculator UI and layout" src="../../images/calculator_sd.png"/></p>
-
-<p>For more information, see the Calculator sample application.</p>
-
-<h3>Email - Drawer</h3>
-
-<p>The Email application shows information using a list. The main view is the same as in the Setting application, consisting of a screen-size-list for displaying emails. However, the Email application has an additional feature: the Drawer, which is used for displaying the menu with a hierarchy.</p>
-
-<p>To develop the application as a Tizen native application, add a layout on the Conformant, and add a Naviframe to the layout. This layout has a content area for the Drawer and Naviframe, and its style name is "layout/drawer/panel". To use this layout, use the following code:</p>
-
-<pre class="prettyprint">
-layout = elm_layout_add(parent);
-elm_layout_theme_set(layout, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
-</pre>
-
-<p>The style includes parts for locating the Drawer and the main view. In the Drawer area, you can add a list to indicate the menu. In the main view, you can add a Naviframe to organize the view of the layout.</p>
-
-<p class="figure">Figure: Email UI and layout</p>
-<p align="center"><img alt="Email UI and layout" src="../../images/email_sample.png"/></p>
-
-<p>For more information, see the Email sample application.</p>
-
- <h2 id="ClockSimple" name="ClockSimple">Creating a Simple Clock View</h2>
-
-<p>This sample creates a basic clock view that shows the time, current city, and date. This sample demonstrates how to use a box, container component, and label to create a basic layout. The application includes the following UI components:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support indicator area</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager component</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container component for layouting other UI components</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic UI component for showing text with a tag</li>
-</ul> 
-
-<p>The following figure illustrates the main view of the simple clock sample application and its wireframe structure.</p>
-  
-<p class="figure">Figure: Simple clock screen</p>
-<p align="center"><img alt="Simple clock screen" src="../../images/efl_simple_clock.png" /></p>
-
-<p>The basic clock is implemented in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file. In this application, the data structure for application is following:</p>
-
-<pre class="prettyprint">typedef struct appdata
-{
-&nbsp;&nbsp;&nbsp;// Save the window
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-} 
-appdata_s;
-</pre>
-
-<p>The information in <span style="font-family: Courier New,Courier,monospace">appdata</span> is used for the entire system. In this sample application, the information is related to handling the HW back key.</p> 
-
-<p>The  single callback function for application handling is <span style="font-family: Courier New,Courier,monospace">app_create</span>, and it only creates the basic GUI:</p>
-
-<pre class="prettyprint">int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
-&nbsp;&nbsp;&nbsp;app_event_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;int ret = 0;
-
-&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;ad);
-&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;ui_app_main() is failed. err = %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return ret;
-}
-
-static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function to create a basic layout with a window, conformant and naviframe. This is the basic layout in the Tizen mobile environment.</p>
-  
-<pre class="prettyprint">ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-// Conformant
-conform = elm_conformant_add(ad-&gt;win);
-elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(ad-&gt;win, conform);
-evas_object_show(conform);
-
-// Naviframe
-nf = elm_naviframe_add(conform);
-elm_object_content_set(conform, nf);
-evas_object_show(nf);
-</pre>
-
-<p>After creating a basic layout, create the main layout for the application. In this sample, it contains a box with 3 labels. The labels show the time, city and date. To add the labels to the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function.</p>
-  
-<p>After adding the labels, you must set their text. You can set or decorate the text in the labels using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function. You can modify the text size (<span style="font-family: Courier New,Courier,monospace">font_size</span>), color (<span style="font-family: Courier New,Courier,monospace">color</span>), and thickness (<span style="font-family: Courier New,Courier,monospace">b</span>).</p>
-  
-  <pre class="prettyprint">
-// Add the box
-box = elm_box_add(nf);
-// Create a label
-label1 = elm_label_add(box);
-// Set text to the label with a tag
-elm_object_text_set(label1, &quot;&lt;font_size=110&gt;&lt;color=#000000&gt;07:26&lt;/color&gt;&lt;/font_size&gt;&quot;);
-// Add the label to the box
-elm_box_pack_end(box, label1);
-// Change label visibility
-evas_object_show(label1);
-
-// Repeat with other labels
-
-evas_object_show(box);
-</pre>
-
-<p>After creating the box with labels, set the box as a new view. You can also set the title of the application. These operations are handled by the naviframe using the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_item_push()</span> function:</p>
-  
-  <pre class="prettyprint">elm_naviframe_item_push(nf, _(&quot;World Clock&quot;), NULL, NULL, box, &quot;basic&quot;);</pre>
-  
-<p>The parameters include the title, the name of the UI component added as a new view, and the naviframe style. The basic style is used for a simple view with normal title.</p>
-  
-  <p>The following figure illustrates the UI component hierarchy of the application.</p>
-
-<p class="figure">Figure: Simple clock components</p>
-<p align="center"><img alt="Simple clock components" src="../../images/efl_simple_clock_tree.png" /></p>
-  
-<p>Set the HW key handler. The Tizen mobile environment supports the <strong>More</strong> and back keys, but only the back key is handled in this sample. </p> 
-<pre class="prettyprint">eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-</pre> 
-
-<p>After setting the callback function, the <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback is invokes when a back key is pressed. The <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback will hide the window:</p> 
-<pre class="prettyprint">static void
-win_back_cb(void *data , int type , void *event)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
-}
-</pre>
-
- <h2 id="ClockComplex" name="ClockComplex">Creating a Complex Clock View</h2>
- 
-<p>This sample creates a complex clock view. The sample demonstrates how to organize a basic layout using boxes. The application includes the following UI components:</p>
-
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support indicator area</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager component</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container component for layouting other UI components</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic UI component for showing text with a tag</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_genlist</span>: List component</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_button</span>: Simple push button</li>
-</ul> 
-  
-<p>The following figure illustrates the main view of the complex clock sample application and its wireframe structure.</p>
-  
-<p class="figure">Figure: Complex clock screen</p>
-<p align="center"><img alt="Complex clock screen" src="../../images/efl_complex_clock.png" /></p>
-
-<h3>Basic GUI</h3> 
-
-<p>The basic clock is implemented in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file. In this application, the data structure for application is following:</p>
-
-<pre class="prettyprint">typedef struct appdata
-{
-&nbsp;&nbsp;&nbsp;// Save the window
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-} 
-appdata_s;
-</pre>
-
-<p>The information in <span style="font-family: Courier New,Courier,monospace">appdata</span> is used for the entire system. In this sample application, the information is related to handling the HW back key.</p> 
-
-<p>The  single callback function for application handling is <span style="font-family: Courier New,Courier,monospace">app_create</span>, and it only creates the basic GUI:</p>
-
-<pre class="prettyprint">int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
-&nbsp;&nbsp;&nbsp;app_event_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;int ret = 0;
-
-&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;ad);
-&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;ui_app_main() is failed. err = %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return ret;
-}
-
-static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-
-<p>The base GUI of the application contains the following elements:</p>
-
-<ul>
-<li>Clock</li>
-<li>List</li>
-<li>Main layout with buttons</li>
-</ul>
-
-<h3>Clock</h3> 
-
- <p>The clock element contains 3 labels. The labels are packed as a single box component, which is part of the main layout.</p> 
-<pre class="prettyprint">static Evas_Object *
-create_clock(Evas_Object *nf)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box, *label1, *label2, *label3;
-
-&nbsp;&nbsp;&nbsp;// Box
-&nbsp;&nbsp;&nbsp;box = elm_box_add(nf);
-
-&nbsp;&nbsp;&nbsp;label1 = elm_label_add(box);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(label1, &quot;&lt;font_size=110&gt;&lt;color=#000000&gt;07:26&lt;/color&gt;&lt;/font_size&gt;&quot;);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, label1);
-&nbsp;&nbsp;&nbsp;evas_object_show(label1);
-
-&nbsp;&nbsp;&nbsp;evas_object_show(box);
-
-&nbsp;&nbsp;&nbsp;return box;
-}
-</pre>
-
-<h3>List</h3> 
-
-<p>This element contains a list of cities. The UI component used is <span style="font-family: Courier New,Courier,monospace">genlist</span>, which is a complex list able to show information with various styles.</p> 
-<pre class="prettyprint">static Evas_Object *
-create_list(Evas_Object *nf)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object* list;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc = NULL;
-&nbsp;&nbsp;&nbsp;int i, num_of_item;
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;list = elm_genlist_add(nf);
-</pre> 
-  
-<p>To add items to the list, use the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> class. After adding a new class, set callback function to detect, when the item is rendered. </p> 
-<pre class="prettyprint">itc = elm_genlist_item_class_new();
-&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;2line.top.4&quot;;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = gl_text_get_cb;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get = NULL;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.del = NULL;
-</pre> 
-
-<p>In this application, all the list items are similar and use the same callback function (<span style="font-family: Courier New,Courier,monospace">gl_text_get_cb()</span>) for setting text, so only 1 item class is created:</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 = data;
-&nbsp;&nbsp;&nbsp;char buf[1024];
-
-&nbsp;&nbsp;&nbsp;if (id-&gt;index == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.text.main.left.top&quot;)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;07:26&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.right.top&quot;)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;Cardiff&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.left.bottom&quot;)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;Wen, Jan 1&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.right.bottom&quot;)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;wales&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return NULL;
-}
-</pre> 
-
-<p>Append items using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function. In this application, 3 items are added:</p> 
-<pre class="prettyprint">num_of_item = 3;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; num_of_item; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item_data_s *id = calloc(sizeof(item_data_s), 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;index = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itc,
-&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;id,
-&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,
-&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;ELM_GENLIST_ITEM_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;item = it;
-&nbsp;&nbsp;&nbsp;}
-</pre>
- 
- <h3>Main Layout with a Button</h3> 
- 
-<p>In the main layout, the other layout elements are merged together and a button added. The following example describes handling the main layout:</p>
-
-<pre class="prettyprint">static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *conform, *nf, *box, *clock, *layout, *rect, *button;
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;// Conformant
-&nbsp;&nbsp;&nbsp;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, conform);
-&nbsp;&nbsp;&nbsp;evas_object_show(conform);
-
-&nbsp;&nbsp;&nbsp;// Naviframe
-&nbsp;&nbsp;&nbsp;nf = elm_naviframe_add(conform);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(conform, nf);
-&nbsp;&nbsp;&nbsp;evas_object_show(nf);
-}
-</pre> 
-
-<p>The box component is used to organize the main layout. The box is expanded as much as possible to fill the entire view.</p> 
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Box
-&nbsp;&nbsp;&nbsp;box = elm_box_add(nf);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
-</pre> 
-
-<p>The box contains the following elements:</p> 
-
-<ul>
-
-<li><p>The clock element contains 3 labels. The parameter for the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function is 0.1 meaning that the height of the clock box occupies 30% of the available area. </p> 
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;clock = create_clock(nf);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(clock, EVAS_HINT_EXPAND, 0.3);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(clock, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, clock);
-</pre> 
-</li>
-
-<li><p>The list element is packed into the box. As the <span style="font-family: Courier New,Courier,monospace">genlist</span> elements does not have a determined size, its size depends on the <span style="font-family: Courier New,Courier,monospace">layout</span> parameter.</p> 
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;layout = elm_layout_add(box);
-&nbsp;&nbsp;&nbsp;elm_layout_theme_set(layout, &quot;layout&quot;, &quot;application&quot;, &quot;default&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, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;rect = create_list(nf);
-&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, &quot;elm.swallow.content&quot;, rect);
-&nbsp;&nbsp;&nbsp;evas_object_show(rect);
-&nbsp;&nbsp;&nbsp;evas_object_show(layout);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, layout);
-</pre> 
-</li>
-
-<li><p>The button element has a callback function to detect, when the button is clicked.</p> 
-<pre class="prettyprint">button = elm_button_add(box);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, btn_clicked_cb, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, 0.1);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Terminate&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-</pre> 
-</li>
-</ul>
-
-<p>The following figure illustrates the UI component hierarchy of the application.</p>
-
-<p class="figure">Figure: Complex clock components</p>
-<p align="center"><img alt="Complex clock components" src="../../images/efl_complex_clock_tree.png" /></p>
-
-<p>Add the main layout to the naviframe, and set the HW key handler:</p> 
-<pre class="prettyprint">eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-</pre> 
-
-<p>After setting the callback function, the <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback is invokes when a back key is pressed. The <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback will hide the window:</p> 
-<pre class="prettyprint">static void
-win_back_cb(void *data , int type , void *event)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
-}
-</pre> 
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/main_loop_n.htm b/org.tizen.ui.guides/html/native/efl/main_loop_n.htm
deleted file mode 100755
index 0b1eb5e..0000000
--- a/org.tizen.ui.guides/html/native/efl/main_loop_n.htm
+++ /dev/null
@@ -1,409 +0,0 @@
-<!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>Handling the Main Loop</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#start">Starting the Main Loop</a></li>
-			<li><a href="#Timers">Timers</a></li>
-			<li><a href="#Animators">Animators</a></li>
-			<li><a href="#Descriptors_Handling">File Descriptors</a></li>
-			<li><a href="#Threads">Threads</a></li>
-			<li><a href="#Idlers">Idlers</a></li>
-		</ul>
-		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Handling the Main Loop</h1> 
-  
-<p>The EFL is event-driven. This means that the application polls for data, and listens for events to interact with it.</p>
-
-<p>The Ecore library provides the main loop abstraction. It gets data when data is available and sends the events so that costly polling threads are not needed. Ecore manages polling, timers, events, and file descriptors. When there is no ongoing event, the main loop automatically enters an idle mode, minimizing the power consumption. The loop wakes up when needed.</p>
-  
- <h2 id="start" name="start">Starting the Main Loop</h2>
-
-<p>To start the Ecore main loop and move your application into the running state, call the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function. The Ecore main loop handles all general events, such as touch, mouse, key, and network events.</p>
-
-<pre class="prettyprint">
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-
-&nbsp;&nbsp;&nbsp;return ret;
-}
-</pre>  
-
-<p>When your application is running:</p> 
-<ol><li>Create a window and organize the UI components inside the window.</li>
-<li>Create the application logic code to be called when callbacks or timed events occurs (for example, animators for animations and timers for timeouts).</li></ol>
-
-  
-<h2 id="Timers" name="Timers">Timers</h2>
-
-<p>Ecore provides timers, which schedule events that are executed later at a specific time. The event can occur once or several times at specific intervals.</p>
-
-<p>A timer callback prototype looks like the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> callback function. This function receives data from the application, and returns a Boolean value to specify whether it is called again or completed. The following macros are also provided:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>: the function is called again after the timeout.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>: the function is not called again, Ecore destroys automatically everything associated with the timer.</li>
-</ul>
-
-<p>To create and destroy a timer:</p>
-
-<ul>
-<li>To create a timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add()</span> function. The interval, specified in seconds, indicates when the given function is called, and receives the specified data as a parameter. It returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Timer</span> object.
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> function is run after 2 seconds and it receives <span style="font-family: Courier New,Courier,monospace;">my_data</span>. It is renewed while its count variable value is under 5, and stops after that.</p>
-<pre class="prettyprint">
-Eina_Bool my_timed_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;static int count = 0;
-&nbsp;&nbsp;&nbsp;count++;
-
-&nbsp;&nbsp;&nbsp;if (count &lt; 5) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-}
-ecore_timer_add(2.0, my_timed_cb, my_data);
-</pre>
-</li>
-
-<li>To delete the timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_del()</span> function. The timer to delete must still be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the timer is not running, the function cannot be called.</li>
-</ul>
-
-<p>To manage a timer:</p>
-<ul>
-<li>To change the timer&#39;s interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_set()</span> function. The interval is specified in seconds. If set during a timer call, this affects the next interval. Use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_get()</span> function to get the timer&#39;s current interval.</li>
-
-<li>To get the timer&#39;s pending time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_pending_get()</span> function.</li>
-
-<li>To delay the timer&#39;s next occurrence, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_delay()</span> function. The function adds the specified time to the current interval. It does not change the future occurrences&#39; interval. You can also reset the current interval to its full value by using the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_reset()</span> function.</li>
-
-<li>To pause the currently running timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_freeze()</span> function. The remaining time is saved and used again when the timer is resumed with the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_thaw()</span> function.</li>
-
-<li>To query the current value of the defined timer infrastructure precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_get()</span> function. A higher delay means that more timers can be run together. It diminishes the need to use system wake-ups and thus lowers the power consumption.
-<p>To set the precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_set()</span> function. This sets the precision for all timers. For example, there are 2 timers, one that expires in 2.0 seconds and another that expires in 2.1 seconds. If the precision is set to 0.1 seconds, Ecore requests the next expiration to happen in 2.1 seconds and runs both callbacks at once, instead of one at 2.0 seconds and the other one 0.1 seconds later. However, if there is no timer expiring in 2.1 seconds, the timeout is at the minimum interval, 2 seconds.</p></li>
-</ul>
-
-<h2 id="Animators" name="Animators">Animators</h2>
-
-<p>Animators are a specific type of timer, specially designed for on-screen animation purposes:</p>
-
-<ul>
-<li>The time interval is usually known when they are created.</li>
-<li>They are called at each screen refresh and their interval can vary. The interval can depend on the system load, the target power consumption, and other factors. The exact interval is not relevant.</li>
-</ul>
-
-<p>To implement animators, Ecore provides the Ecore animator subsystem.</p>
-
-<h3>Forever-running Animator</h3>
-
-<p>To create an animation that runs for an indefinite time: </p>
-
-<pre class="prettyprint">
-Eina_Bool my_anim_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;static int count = 0;
-&nbsp;&nbsp;&nbsp;count++;
-&nbsp;&nbsp;&nbsp;if (count &lt; 5) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-}
-ecore_animator_add(my_anim_cb, my_data);
-</pre>
-
-<p>This example looks the same as the one using an Ecore timer. The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function takes the callback function and data to pass to it, and returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. The function is called at a system-defined interval until it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> instead of <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>.</p>
-
-<h3>Specific-duration Animator</h3>
-
-<p>An animator callback for an animator running a specific time has a different prototype than the forever running animator.</p>
-
-<p>This callback function receives both data and a position which represents the current time among the full timeline, 0 meaning the beginning of the animation, and 1 meaning the end of the animation, returning <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to abort, or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to continue.</p>
-
-<p>To create and destroy the animator:</p>
-<ul>
-<li>To create the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function. The first parameter specifies the animator duration, the second parameter is the callback function, and the third parameter is the data to pass to the callback. The data parameter is optional.
-<pre class="prettyprint">
-Eina_Bool my_anim_cb(void *data, double position)
-{
-&nbsp;&nbsp;&nbsp;if (position &lt; .5) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-}
-ecore_animator_timeline_add(5., my_anim_cb, my_data);
-</pre>
-
-<p>In this example, the animator is specified to run for five seconds. The function returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> as soon as the position among the timeline passes half of the duration, 2.5 seconds.</p>
-
-<p>Ecore can generate a virtual position from the original one using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map(position, map, v1, v2)</span>. Several maps are available:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear from 0.0 to 1.0.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), and 3.0 is cubed.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), and 3.0 is cubed.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.0 is a much more pronounced sinusoidal (squared), and 3.0 is cubed.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient <span style="font-family: Courier New,Courier,monospace;">* v1</span>, interpolated with the power of <span style="font-family: Courier New,Courier,monospace;">v2</span> curve.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then wobble like a spring to the rest position 1.0, and wobble <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
-</ul>
-
-<p class="figure">Figure: Position maps</p> 
-<p align="center"><img alt="Position maps" src="../../images/pos_map_all.png" /></p> 
-</li>
-
-<li>To destroy the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function. The animator to destroy must be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the animator is not running, the function cannot be called.</li>
-</ul>
-
-<p>To manage the animator:</p>
-<ul>
-<li>To pause the currently running animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function. Note that time continues ticking even if the animator is frozen, and that resuming the animation using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function does not actually resume, if the full runtime has been passed in the meanwhile.</li>
-
-<li>To query Ecore for the interval between 2 animator calls, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</li>
-
-<li>To change the interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set(interval)</span> function. Note that too small a value causes performance and power consumption issues, and too high a value makes the animation jerky.</li>
-</ul>
-
-<h2 id="Descriptors_Handling" name="Descriptors_Handling">File Descriptors</h2>
-
-<p>Ecore provides an infrastructure to monitor file descriptors, so that files do not have to be blocked or polled to read or write on them. Instead, monitor sockets, pipes, or other streams are used to get a file descriptor.</p>
-
-<p>To manage the file descriptors:</p>
-<ul>
-<li>To set a callback, use the <span style="font-family: Courier New,Courier,monospace;">_my_cb_func()</span> function. Its first parameter is the data passed to it (optional), and the second one is the Ecore file descriptor handler. Its return value is, as in most Ecore callbacks, <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>. It tells Ecore whether it wants to be called again or whether its treatment is finished.</li>
-
-<li>To listen to events, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_add()</span> function.</li>
-
-<li>To wait for incoming data (that is, to read data) on the <span style="font-family: Courier New,Courier,monospace;">my_fd</span> file descriptor, passing <span style="font-family: Courier New,Courier,monospace;">my_data</span>:
-
-<pre class="prettyprint">
-Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
-{
-&nbsp;&nbsp;&nbsp;int fd;
-&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
-&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); // This is guaranteed not to block
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-ecore_main_fd_handler_add(my_fd, ECORE_FD_READ, my_fd_cb, my_data, NULL, NULL);
-</pre>
-</li>
-
-<li>To delete a file descriptor handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_del()</span> function. This does not close the file descriptor. Always delete the handlers before closing the actual file descriptors.</li>
-
-<li>To get the handler&#39;s file descriptor, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_fd_get()</span> function.</li>
-
-<li>To select whether a flag is active on a handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_get()</span> function. For example, the handler is set to monitor both <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ</span> and <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_ERROR</span>. The following example finds out whether the function was called because of an error:
-
-<pre class="prettyprint">
-Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
-{
-&nbsp;&nbsp;&nbsp;int fd;
-&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
-&nbsp;&nbsp;&nbsp;if (ecore_main_fd_handler_active_get(handler, ECORE_FD_ERROR) == EINA_TRUE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// We have an error!
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); // This is guaranteed not to block
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-ecore_main_fd_handler_add(my_fd, ECORE_FD_READ | ECORE_FD_ERROR, my_fd_cb, my_data, NULL, NULL);
-</pre>
-</li>
-
-<li>To change the flags the handler is monitoring, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_set()</span> function.</li>
-</ul>
-
-<h2 id="Threads" name="Threads">Threads</h2>
-
-<p>EFL is not entirely thread-safe. This means that if a task is running in another thread and, for example, an Evas object shows the status progress of this task, the object cannot be updated from within the thread. Updating can only be done from the main thread that runs the main loop.</p>
-
-<p>Ecore provides a facility to perform tasks on separate worker threads. It is not a simple wrapper around standard threads provided by the operating system. With Ecore threads, it is easier to dispatch a worker function to perform some heavy tasks and get the result once it completes. It does not block the application UI. It is also easy to cancel and reschedule threads. Several threads can be launched simultaneously, since Ecore schedules them according to the number of processors the system has and the maximum amount of concurrent threads set for the application.</p>
-
-<p>Ecore has 2 kinds of threads:</p>
-<ul>
-<li>Short jobs do not give any kind of information on their status to the parent. They are best used for short computing-intensive snippets of code.</li>
-<li>Feedback jobs give information on their status to the parent. They are best used for longer snippets requiring a feedback loop, such as an ongoing file download.</li>
-</ul>
-
-<p>Ecore creates a pool of worker threads. The exact count is computed from the number of CPUs or cores, or it can be specified by the application itself.</p>
-
-<p>When a worker thread is idle, it picks a job to execute from the waiting list until there is none left. In the following example, there are 2 threads defined by <span style="font-family: Courier New,Courier,monospace;">my_short_job()</span> and <span style="font-family: Courier New,Courier,monospace;">my_feedback_job()</span>. Both threads take 2 parameters: some data passed to them, and the actual thread running. Call a callback when the jobs end, whether they are cancelled (<span style="font-family: Courier New,Courier,monospace;">my_job_cancel()</span>) or end normally (<span style="font-family: Courier New,Courier,monospace;">my_job_end()</span>).</p>
-
-<pre class="prettyprint">
-struct feedback_msg
-{
-&nbsp;&nbsp;&nbsp;int pos;
-};
-
-void my_short_job(void *data, Ecore_Thread *thread)
-{
-&nbsp;&nbsp;&nbsp;usleep(200000);
-}
-
-void my_feedback_job(void *data, Ecore_Thread *thread)
-{
-&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 100; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usleep(50000); // You can have some real computation done
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct feedback_msg *message = malloc(sizeof(struct feedback_msg));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (message) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message-&gt;pos = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ecore_thread_check(thread))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-}
-
-void my_feedback_job_notify(void *data, Ecore_Thread *thread, void *msg)
-{
-&nbsp;&nbsp;&nbsp;struct feedback_msg *message = msg;
-&nbsp;&nbsp;&nbsp;free(message);
-}
-
-void my_job_end(void *data, Ecore_Thread *thread)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has normally ended.\n&quot;);
-}
-
-void my_job_cancel(void *data, Ecore_Thread *thread)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has been cancelled.\n&quot;);
-}
-
-ecore_thread_run(my_short_job, my_job_end, my_job_cancel, my_data);
-ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end, 
-&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;my_job_cancel, my_data, EINA_FALSE);
-</pre>
-
-<p>To manage threads:</p>
-
-<ul>
-<li>To cancel a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_cancel()</span> function. However, note that this is done cooperatively: the thread continues to run until it exists. Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check()</span> function regularly to check whether the thread has been marked for cancellation and exit if <span style="font-family: Courier New,Courier,monospace;">true</span>.</li>
-
-<li>To run threads that are not accounted for in the worker thread pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function with the last parameter set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.
-
-<p>The feedback message a thread sends as notification can be any kind of data. In the above example, it is a simple integer, but it can be as complex as needed.</p>
-</li>
-
-<li>To execute a thread later, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_reschedule()</span> function. This function is added to the end of the pending tasks.</li>
-
-<li>To get the maximum number of concurrent threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function. If needed, set it by using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function, or reset the default value using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.</li>
-
-<li>To query the number of active threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span> function. To query the number of available worker threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function, which is basically the same as the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> - <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span>.</li>
-</ul>
-
-<h2 id="Idlers" name="Idlers">Idlers</h2>
-
-<p>When the rendering is done and all work is finished, the main loop enters its idle state until the next loop. You can get the functions of your application called back before the main loop enters or exits the idle state, or when it is in the idle state. They are respectively called <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Enterer</span>, <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Exiter</span>, and <span style="font-family: Courier New,Courier,monospace;">Ecore_Idler</span>.</p>
-
-<p class="figure">Figure: Idle loop</p> 
-<p align="center"><img alt="Idle loop" src="../../images/idlers.png" /></p> 
-
-<p>The idle enterers, exiters, and idlers all have the same prototype, <span style="font-family: Courier New,Courier,monospace;">my_idler()</span>, which receives data and returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to tell Ecore whether it wants to be called again or is finished.</p>
-
-<p>To manage the idlers:</p>
-<ul>
-<li>To add an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_add()</span> function.</li>
-<li>To delete an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> function.</li>
-
-<li>To add and delete idle exiters, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_del()</span> functions.</li>
-
-<li>To add and delete idle enterers, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_del()</span> functions. The <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_before_add()</span> function is also available, if you want your function to be added at the top of the list so that it is called before the others.</li>
-</ul>
-
-<pre class="prettyprint">
-Eina_Bool my_idle_enterer_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-
-Eina_Bool my_idle_exiter_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-}
-
-Eina_Bool my_idler(void *data)
-{
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-
-ecore_idle_enterer_add(my_idle_enterer_cb, my_data);
-ecore_idle_exiter_add(my_idle_exiter_cb, my_data);
-ecore_idler_add(my_idler_cb, my_data);
-</pre>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/menu_tutorial_mn.htm b/org.tizen.ui.guides/html/native/efl/menu_tutorial_mn.htm
deleted file mode 100755
index 2ea5471..0000000
--- a/org.tizen.ui.guides/html/native/efl/menu_tutorial_mn.htm
+++ /dev/null
@@ -1,541 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Mobile Menus</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#structure">Defining the Application &quot;Structure&quot;</a></li>
-			<li><a href="#theme">Defining the Application Theme</a></li>
-			<li><a href="#basic_ui">Creating the Basic UI</a></li>
-			<li><a href="#hidden_menu">Creating a Hidden Menu</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Mobile Menus</h1>
-
-  
-<p>This tutorial shows how to add menus to the application. The example code creates an application with 3 views, these views are showed by an interaction with a menu bar, placed on the top of the application. The application has also a hidden menu that appears only when the menu button is pressed.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-		
- <h2 id="structure" name="structure">Defining the Application &quot;Structure&quot;</h2>
- 
-<p>Define the structure of the application:</p>
- <pre class="prettyprint">typedef struct appdata
-{
-&nbsp;&nbsp;&nbsp;Evas_Object* win; // The main window
-&nbsp;&nbsp;&nbsp;Evas_Object* layout; // The Edje layout
-&nbsp;&nbsp;&nbsp;Evas_Object* conform; // The conform
-&nbsp;&nbsp;&nbsp;Evas_Object *nf; // The Naviframe to handle the views
-&nbsp;&nbsp;&nbsp;appmenu_s *menu; // The main menu
-&nbsp;&nbsp;&nbsp;appmenu_s *sidemenu; // The side menu
-&nbsp;&nbsp;&nbsp;mainview_s *main_view; // The main view (dayselector)
-&nbsp;&nbsp;&nbsp;calview_s *cal_view; // The calendar view
-&nbsp;&nbsp;&nbsp;dateview_s *date_view; // The date and time view
-&nbsp;&nbsp;&nbsp;settview_s *settings_view; // The settings view
-&nbsp;&nbsp;&nbsp;Eina_Bool sdmenu_up; // A Boolean variable to keep the side menu status
-} appdata_s;
-</pre>
-<p>This structure contains some specific variables for the views and the menus.</p>
-<p>Define the main view by using the structure <span style="font-family: Courier New,Courier,monospace">mainview</span>, it is composed of a <span style="font-family: Courier New,Courier,monospace">box</span> (the main container), a <span style="font-family: Courier New,Courier,monospace">dayselector</span>, an image <span style="font-family: Courier New,Courier,monospace">img</span>, and a label <span style="font-family: Courier New,Courier,monospace">lb_main</span>.</p>
- <pre class="prettyprint">typedef struct mainview
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box; // The main container of the view
-&nbsp;&nbsp;&nbsp;Evas_Object *colorselector; // A color selector
-&nbsp;&nbsp;&nbsp;Evas_Object *img; // An image 
-&nbsp;&nbsp;&nbsp;Evas_Object *lb_day; // A label
-} mainview_s;
-</pre>
-<p>The date view is very similar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">datetime</span> component and a label <span style="font-family: Courier New,Courier,monospace">lb_date</span>.</p>
- <pre class="prettyprint">typedef struct dateview
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box; // The main container of the view 
-&nbsp;&nbsp;&nbsp;Evas_Object *datetime; // A datetime component 
-&nbsp;&nbsp;&nbsp;Evas_Object *lb_date; // A label 
-} dateview_s;
-</pre>
-<p>The last view is the calendar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">calendar</span> and a label <span style="font-family: Courier New,Courier,monospace">lb_cal</span>.</p>
- <pre class="prettyprint">typedef struct calview
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box; // The main container of the view 
-&nbsp;&nbsp;&nbsp;Evas_Object *calendar; // A calendar component  
-&nbsp;&nbsp;&nbsp;Evas_Object *lb_cal; // A label component
-} calview_s;
-</pre>
-<p>The last members of the application structure are the 2 menus. The main menu is fixed and visible, and the side menu is hidden on application starts. These menus are represented by the <span style="font-family: Courier New,Courier,monospace">appmenu</span> structure.</p>
- <pre class="prettyprint">typedef struct appmenu
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *tb; // The toolbar
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *submenu; // The submenu item
-} appmenu_s;
-</pre>
-
- <h2 id="theme" name="theme">Defining the Application Theme</h2>
-
-<p>After the structure is defined, define the UI. In this tutorial, Basic EDC UI Application is used. </p>
-<p>This application structure is based on this skeleton:</p>
-
-<p class="figure">Figure: Menu skeleton</p> 
-<p align="center"><img alt="Menu skeleton" src="../../images/menu_skeleton.png" /></p>
-  
-
-<p>The window, the conformant and the layout are set by the Basic EDC UI Application skeleton. Setup the containers for UI components and views.</p>
-<p>Create the <span style="font-family: Courier New,Courier,monospace">main_menu</span> <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part in the <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
- <pre class="prettyprint">
-part
-{
-&nbsp;&nbsp;&nbsp;name: &quot;menu/main&quot;;
-&nbsp;&nbsp;&nbsp;type: SWALLOW;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.01;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;}
-} // End menu/main
-</pre>
-<p>This part has two descriptions, one for the real position named <span style="font-family: Courier New,Courier,monospace">up</span> and another out of the screen as the default position. Create these states to animate the menu on application start. The animation is run by <span style="font-family: Courier New,Courier,monospace">animation,menu_main</span>.</p>
- <pre class="prettyprint">program
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_main&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/main&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.5;
-} // END animation,menu_main
-</pre>
-<p>For more information about animations, see the Effects tutorial.</p>
-<p>Create another container for the views. This container is also a &quot;SWALLOW&quot; part.</p>
- <pre class="prettyprint">part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;view/main&quot;;
-&nbsp;&nbsp;&nbsp;type: SWALLOW;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;menu/main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255; 
-&nbsp;&nbsp;&nbsp;}
-} // END view/main 
-</pre>
-<p>This part has also two descriptions for animation purpose, like the <span style="font-family: Courier New,Courier,monospace">main_menu</span> part.</p>
-<p>The program:</p>
- <pre class="prettyprint">program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,view_main&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;view/main&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-} // END animation,view_main
-</pre>
-<p>The last container is the side menu called <span style="font-family: Courier New,Courier,monospace">menu/side</span>.</p>
- <pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: -0.3 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: -0.3 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255; 
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.01;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.3 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;}
-} // END menu/side
-</pre>
-<p>By default, this container is hidden. Clicking menu button makes it appear. The second description places the container on the left of the screen. Here is the program to run animation:</p>
- <pre class="prettyprint">
- program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;show,sidemenu&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-} // END animation,menu_side
-</pre>
-<p>This program runs when it receives an event called <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> from <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source.</p>
-<p>Create a program that does the opposite and starts when it receives a signal called <span style="font-family: Courier New,Courier,monospace">hide,menu_side</span> from <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source.</p>
- <pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side,hide&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;hide,sidemenu&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-} // END animation,menu_side,hide
-
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;show,sidemenu&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-} // END animation,menu_side
-</pre>
-
- <h2 id="basic_ui" name="basic_ui">Creating the Basic UI</h2>
-
-<p>The view container <span style="font-family: Courier New,Courier,monospace">view/main</span> is structured like this:</p>
-
-
-<p class="figure">Figure: Main view</p> 
-<p align="center"><img alt="Main view" src="../../images/view_main.png" /></p>
-
-<p>The naviframe contains and manages the boxes. For more information, see the Container programming guide. This UI component handle views. In this example each view is contained in a <span style="font-family: Courier New,Courier,monospace">box</span> and the <span style="font-family: Courier New,Courier,monospace">box</span> is contained in the naviframe.</p>
-<p>Create the naviframe in the <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function and allocate the memory to handle the views and menus of the application.</p>
- <pre class="prettyprint">
-// Memory allocation
-ad-&gt;main_view = calloc(1, sizeof(mainview_s)); // Allocating memory for the main view 
-ad-&gt;cal_view = calloc(1, sizeof(calview_s));   // Allocating memory for the calendar view 
-ad-&gt;date_view = calloc(1, sizeof(dateview_s)); // allocating memory for the date view 
-ad-&gt;settings_view = calloc(1, sizeof(settview_s)); // allocating memory for the Settings view
-// END of Memory allocation
-</pre>
-<p>Use <span style="font-family: Courier New,Courier,monospace">app_terminate</span> function to free the memory:</p>
- <pre class="prettyprint">app_terminate(void *data)
-{
-&nbsp;&nbsp;&nbsp;// Release all resources
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;free(ad-&gt;menu);
-&nbsp;&nbsp;&nbsp;free(ad-&gt;sidemenu);
-&nbsp;&nbsp;&nbsp;free(ad-&gt;main_view);
-&nbsp;&nbsp;&nbsp;free(ad-&gt;cal_view);
-&nbsp;&nbsp;&nbsp;free(ad-&gt;settings_view);
-} // END of app_terminate
-</pre>
-<p>Create the naviframe:</p>
-
-<p>Create the main menu after most of the containers are created. First create a new <span style="font-family: Courier New,Courier,monospace">_build_main_menu</span> function, it takes an <span style="font-family: Courier New,Courier,monospace">appdata_s</span> as a parameter. This function is called by <span style="font-family: Courier New,Courier,monospace">create_base_gui</span>.</p>
- <pre class="prettyprint">static void _build_main_menu(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Memory allocation for the main menu function
-&nbsp;&nbsp;&nbsp;appmenu_s *menu = calloc(1, sizeof(appmenu_s));
-&nbsp;&nbsp;&nbsp;// Putting the &quot;main&quot; menu in the application data
-&nbsp;&nbsp;&nbsp;ad-&gt;menu = menu;
-
-&nbsp;&nbsp;&nbsp;// Creation of the &quot;Menu&quot; toolbar
-&nbsp;&nbsp;&nbsp;menu-&gt;tb = elm_toolbar_add(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;// Setting the &quot;Menu&quot; Toolbar properties
-&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(menu-&gt;tb, ELM_TOOLBAR_SHRINK_NONE);
-&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(menu-&gt;tb, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_toolbar_homogeneous_set(menu-&gt;tb, EINA_FALSE);
-
-&nbsp;&nbsp;&nbsp;// Adding menu items to the &quot;Menu&quot; toolbar
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/home.png&quot;, &quot;Home&quot;, _menu_item_selected_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/calendar.png&quot;, &quot;Calendar&quot;, _menu_item_selected_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/clock.png&quot;, &quot;Date&quot;, _menu_item_selected_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/settings.png&quot;, &quot;Settings&quot;, _menu_item_selected_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Showing the UI component
-&nbsp;&nbsp;&nbsp;evas_object_show(menu-&gt;tb);
-
-&nbsp;&nbsp;&nbsp;// Adding the UI component to the &quot;menu/main&quot; SWALLOW container defined in the .edc theme file.
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;menu/main&quot;, menu-&gt;tb);
-
-&nbsp;&nbsp;&nbsp;// Set the default view 
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(elm_toolbar_first_item_get(menu-&gt;tb), EINA_TRUE);
-}
-</pre>
-<p>Create a toolbar with <span style="font-family: Courier New,Courier,monospace">elm_toolbar_add</span>. This toolbar is a child of the main window so set <span style="font-family: Courier New,Courier,monospace">ad-&gt;win</span> as parameter.</p>
-<p>Setup the behavior of the toolbar, the display mode is set by using <span style="font-family: Courier New,Courier,monospace">elm_toolbar_shrink_mode_set</span>. The toolbar does not scroll under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_NONE</span> mode, but it enforces a minimum size, so that all the items fit inside it. It does not scroll or show the items that do not fit under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_HIDE</span> mode. Finally, it scrolls under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_SCROLL</span> mode, and it creates a button to aggregate items which did not fit with the <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_MENU</span> mode.</p>
-
-<p>In this example, there is only a limited number of menu elements and thus <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span> is used.</p>
-
-<p>Expand the transverse length of the item according the transverse length of the toolbar, giving <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as second parameter of <span style="font-family: Courier New,Courier,monospace">elm_toolbar_transverse_expanded_set</span>.</p>
-
-<p>Make the menu items have the same size by setting <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> to <span style="font-family: Courier New,Courier,monospace">elm_toolbar_homogeneous_set</span>. This activates the homogeneous mode of the toolbar.</p>
-<p>Add menu items to the toolbar using <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append</span>. This function takes 4 parameters:</p>
-<ul>
-<li>the target toolbar</li>
-<li>the icon path for the menu item</li>
-<li>the item label</li>
-<li>the function to call when the item is clicked</li>
-<li>the data to associate with the item for related callbacks.</li>
-</ul>
-<p>For the icons, add some images in the resource directory of the application <span style="font-family: Courier New,Courier,monospace">res/images</span> and define a macro to contain this path in the application <span style="font-family: Courier New,Courier,monospace">.h</span> file. In this example it is <span style="font-family: Courier New,Courier,monospace">inc/menututorial.h</span>.</p>
-
-<pre class="prettyprint">#define ICON_DIR &quot;/opt/usr/apps/&quot;PACKAGE&quot;/res/images&quot;
-</pre>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">PACKAGE</span> macro to setup this <span style="font-family: Courier New,Courier,monospace">ICON_DIR</span> macro. This way you can add items to the toolbar using icon images placed in the resource directory of the application.</p>
-
-<p>The item label is very important, it is used in the item callback function.</p>
-
-<p>In this example, only one callback is created to manage all the items but there can be several callback functions. Pass the application data to the callback.</p>
-
-<p>This callback is an <span style="font-family: Courier New,Courier,monospace">Evas_Smart_Cb</span>, it must have this prototype:</p>
-<pre class="prettyprint">
-_mycallback(void *data, Evas_Object *obj, void *ev)
-</pre>
-
-<p>In this example, the aim of the callback is to create the view which the user has requested. It is named <span style="font-family: Courier New,Courier,monospace">_menu_item_selected_cb</span>, and in this function we recover the calling object text to call the correct view creation function.</p>
-<pre class="prettyprint">
-it = ev;
-
-// Get the menu item text
-str = elm_object_item_text_get(it);
-
-// Comparing with the possible view names
-if (!strcmp(str, &quot;Calendar&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;// Build the &quot;Calendar View&quot;
-&nbsp;&nbsp;&nbsp;_build_calendar_view(ad);
-&nbsp;&nbsp;&nbsp;// Set the view from the application data
-&nbsp;&nbsp;&nbsp;view = ad-&gt;cal_view-&gt;box;
-}
-else if (!strcmp(str, &quot;Date&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;// Build the &quot;Date View&quot;
-&nbsp;&nbsp;&nbsp;_build_date_view(ad);
-&nbsp;&nbsp;&nbsp;// Set the view from the application data
-&nbsp;&nbsp;&nbsp;view = ad-&gt;date_view-&gt;box;
-}
-else if (!strcmp(str, &quot;Home&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;// Build the &quot;Home or main View&quot;
-&nbsp;&nbsp;&nbsp;_build_main_view(ad);
-&nbsp;&nbsp;&nbsp;// Set the view from the application data
-&nbsp;&nbsp;&nbsp;view = ad-&gt;main_view-&gt;box;
-}
-else if (!strcmp(str, &quot;Settings&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;// Build the &quot;Settings&quot; view
-&nbsp;&nbsp;&nbsp;_build_settings_view(ad);
-&nbsp;&nbsp;&nbsp;// Set the view from the application data
-&nbsp;&nbsp;&nbsp;view = ad-&gt;settings_view-&gt;box;
-}
-else if (!strcmp(str, &quot;Clock&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;// Build the &quot;Date View&quot; 
-&nbsp;&nbsp;&nbsp;_build_date_view(ad);
-&nbsp;&nbsp;&nbsp;// Set the view from the application data
-&nbsp;&nbsp;&nbsp;view = ad-&gt;date_view-&gt;box;
-}
-
-// Show the view in the naviframe 
-elm_object_content_set(ad-&gt;nf, view);
-</pre>
-<p>The menu has views, Calendar, Date, Settings, and Home (main view). The view names are stored in the menu item label, to get the label compare the returned string with the view names. When the name matches, the view is built by calling the correct function. Store the view in the application data and set up a new content to the naviframe before exit.</p>
-<p>This way when the user clicks a menu item, the view changes. The naviframe component destroys its content on each call of <span style="font-family: Courier New,Courier,monospace">elm_object_content_set</span>. That is why the content must be built again on each item click.</p>
-<p>Create the functions which create the views.</p>
- <pre class="prettyprint">static void _build_main_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;mainview_s *view = ad-&gt;main_view;
-&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
-
-&nbsp;&nbsp;&nbsp;// Main box
-&nbsp;&nbsp;&nbsp;view-&gt;box = elm_box_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(view-&gt;box, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(view-&gt;box, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;view-&gt;colorselector = elm_colorselector_add(view-&gt;box);
-&nbsp;&nbsp;&nbsp;elm_colorselector_mode_set(view-&gt;colorselector, ELM_COLORSELECTOR_PALETTE);
-&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;colorselector);
-&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;colorselector);
-
-&nbsp;&nbsp;&nbsp;view-&gt;img = elm_image_add(view-&gt;box);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;img, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(view-&gt;img, 0.5, 0.5);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(view-&gt;img, 256, 256);
-&nbsp;&nbsp;&nbsp;;snprintf(buf, sizeof(buf), &quot;%s/%s&quot;, ICON_DIR, &quot;tizen-logo.png&quot;);
-&nbsp;&nbsp;&nbsp;if (!elm_image_file_set(view-&gt;img, buf, NULL))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_day, &quot;Problem loading image&quot;);
-&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;img);
-&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;img);
-
-&nbsp;&nbsp;&nbsp;view-&gt;lb_day = elm_label_add(view-&gt;box);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_day, &quot;Main view&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;lb_day, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(view-&gt;box, view-&gt;lb_day);
-&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;lb_day);
-}
-
-static void
-_build_calendar_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;calview_s *view = ad-&gt;cal_view;
-
-&nbsp;&nbsp;&nbsp;// Main box image = elm_image_add(win);
-
-&nbsp;&nbsp;&nbsp;view-&gt;box = elm_box_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(view-&gt;box, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(view-&gt;box, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;view-&gt;calendar = elm_image_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;calendar, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(view-&gt;calendar, 0.5, 0.5);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(view-&gt;calendar, 256, 256);
-&nbsp;&nbsp;&nbsp;elm_image_file_set(view-&gt;calendar, ICON_DIR&quot;/calendar.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;calendar);
-&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;calendar);
-
-&nbsp;&nbsp;&nbsp;view-&gt;lb_cal = elm_label_add(view-&gt;box);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_cal, &quot;The calendar view&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;lb_cal, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(view-&gt;box, view-&gt;lb_cal);
-&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;lb_cal);
-} // End of_build_calendar_view
-</pre>
-<p>Each function creates a view and stores it in the application data.</p>
-
- <h2 id="hidden_menu" name="hidden_menu">Creating a Hidden Menu</h2>
-
-<p>Add a new function called <span style="font-family: Courier New,Courier,monospace">_build_side_menu</span> to create the side Menu toolbar and add some items to it. This function takes the application data as parameter and stores the built menu in the sidemenu attribute of the structure.</p>
- <pre class="prettyprint">static void _build_side_menu(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;appmenu_s *sidemenu = calloc(1, sizeof(appmenu_s));
-&nbsp;&nbsp;&nbsp;ad-&gt;sidemenu = sidemenu;
-
-&nbsp;&nbsp;&nbsp;sidemenu-&gt;tb = elm_toolbar_add(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(sidemenu-&gt;tb, ELM_TOOLBAR_SHRINK_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(sidemenu-&gt;tb, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/home.png&quot;, &quot;Home&quot;, _menu_item_selected_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/account.png&quot;, &quot;Account&quot;, NULL, NULL);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/contacts.png&quot;, &quot;Friends&quot;, NULL, NULL);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/clock.png&quot;, &quot;Clock&quot;, _menu_item_selected_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_homogeneous_set(sidemenu-&gt;tb, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;evas_object_show(sidemenu-&gt;tb);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;menu/side&quot;, sidemenu-&gt;tb);
-&nbsp;&nbsp;&nbsp;elm_toolbar_horizontal_set(sidemenu-&gt;tb, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(elm_toolbar_first_item_get(sidemenu-&gt;tb), EINA_TRUE);
-}
-</pre>
-<p>The side menu is created but hidden by default, to make it appear the use must click Home button.</p>
-
-<p>By default the Basic EDC UI application creates a function <span style="font-family: Courier New,Courier,monospace">keydown_cb</span> to handle the key down events. In the <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function an <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add</span> function is called with the <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> macro and with <span style="font-family: Courier New,Courier,monospace">keydown_cb</span> as callback. In this callback, the <span style="font-family: Courier New,Courier,monospace">KEY_END</span> event puts the window on the lower state.</p>
- <pre class="prettyprint">keydown_cb(void *data , int type , void *event)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Ecore_Event_Key *ev = event;
-&nbsp;&nbsp;&nbsp;if (!strcmp(ev-&gt;keyname, KEY_END)) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Let window go to hide state
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_DONE;
-}
-</pre>
-<p>The key name of menu button is <span style="font-family: Courier New,Courier,monospace">XF86Send</span>. Add the menu button key press handling to the <span style="font-family: Courier New,Courier,monospace">keydown_cb</span>. The menu is shown on the first press and hidden it on the second press. Use <span style="font-family: Courier New,Courier,monospace">Eina_Bool sdmenu_up</span> on the application data to store the menu status during the application execution. If <span style="font-family: Courier New,Courier,monospace">ad-&gt;sdmenu_up</span> is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> the menu is visible.</p>
-
-<p>A program <span style="font-family: Courier New,Courier,monospace">animation,menu_side</span> is defined in the <span style="font-family: Courier New,Courier,monospace">.edc</span> theme file. This program is run when the signal <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> is received with the source MenuButton. Also the program who hides the side menu is defined and is called <span style="font-family: Courier New,Courier,monospace">animation,menu_side,hide</span> which start on signal <span style="font-family: Courier New,Courier,monospace">hide,sidemenu</span>.</p>
-
-<p>Test side menu status by sending the signals using <span style="font-family: Courier New,Courier,monospace">elm_object_signal_emit</span></p>
- <pre class="prettyprint">
-if (!strcmp(ev-&gt;keyname, &quot;XF86Send&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;if (ad-&gt;sdmenu_up == EINA_TRUE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If the menu is visible send a &quot;hide,sidemenu&quot; signal
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Store the new menu status (hidden)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sdmenu_up = EINA_FALSE;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p>Now the menu appears and disappears when the menu button is pressed.</p>
-<p>The first side menu button sends back to the main view:</p>
- <pre class="prettyprint">
-// Hide the side menu if it&#39;s visible
-if (ad-&gt;sdmenu_up == EINA_TRUE) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sdmenu_up = EINA_FALSE;
-}
-</pre>
-<p>This way the menu disappears when the view is selected by the user.</p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/multiple_screens_n.htm b/org.tizen.ui.guides/html/native/efl/multiple_screens_n.htm
deleted file mode 100755
index 5a93e29..0000000
--- a/org.tizen.ui.guides/html/native/efl/multiple_screens_n.htm
+++ /dev/null
@@ -1,257 +0,0 @@
-<!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>Multiple Screen Support</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">	
-			<li><a href="#key_concepts">Key Concepts</a></li>
-			<li><a href="#apply">Applying the Base Scale</a></li>
-			<li><a href="#without">Scaling without the Base Scale</a></li>			
-		</ul>
-	<p class="toc-title">Related Info</p>
-		<ul class="toc">	
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Multiple Screen Support</h1> 
-
-  <p>Tizen is available in various devices which support different screen sizes and resolutions. When developing Tizen applications, you must take this into account if you want your application to function well in various device models.</p> 
-  <p>Before <a href="#apply">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key_concepts">key concepts of multiple screen support</a>.</p> 
-  
-   <h2 id="key_concepts" name="key_concepts">Key Concepts</h2> 
-  <p>Before building a native application for multiple resolutions using Tizen native UI framework, make sure you are familiar with the following concepts:</p> 
-  <ul>
-  <li><a href="#multi">Multi-scale</a></li>
-  <li><a href="#base">Base scale</a></li>
-  </ul>
-
-  <h3 id="multi" name="multi">Multi-scale in Tizen Native UI Framework</h3> 
-  <p>Tizen native UI framework supports multiple scaling. If the application is implemented considering scalability, it is enough to change the <span style="font-family: Courier New,Courier,monospace;">elm_scale</span> value in different device environments without modifying the application code.</p> 
-  
-  <p>Scale 1.0 in Tizen native UI framework means that the application is displayed in a set size and is not scaled. Scale 1.0 is used in a display environment, such as a desktop. In the desktop environment, the monitor has a resolution between 1280 x 800 and 1920 x 1080, with a size between 20 and 27 inch, and the dpi between 80 and 100.</p>
-  
-  <p>If an application is scaled up or down after implementing it in a desktop environment, it can be used in another device without modifying the code. Each device has a proper scale value for adjusting the application size. Edje, which handles layout and themes in Tizen native UI framework, gets the size of an object by multiplying the size specified by an application using the scale value.</p> 
-  
-  <p>The following figure illustrates a 50 px wide object in a 1280 px wide monitor. If the same object is displayed with not scaling in mobile environment, it looks very small. To show the object in mobile environment in the similar size as in the monitor, define the scale is 2.0, so that the object size is 100 px instead of 50 px.</p>
-  
-  <p class="figure">Figure: Scaling from desktop to mobile</p> 
-  <p align="center"><img alt="Scaling from desktop to mobile" src="../../images/scaling.png" /> </p> 
-  
-  <h3 id="base" name="base">Base Scale</h3> 
-  <p>The object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of this application to show the application in a proper size in other devices. However, the scaling must be based on scale 1.0 or, if the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the &quot;base scale&quot;. </p> 
- 
-  <p>The size of a scalable object is multiplied with the device scale value, as illustrated in the following figure. If the scalable object (on the left) with the size 10 is created in a device with scale 1.0, the size of the object is 20 in a device with scale 2.0, and 40 in a device with scale 4.0.</p>
-  
-  <p class="figure">Figure: Base scale</p> 
-  <p align="center"><img alt="Base scale" src="../../images/base_scale.png" /> </p> 
-  
-  <p>The middle object has a base scale 2.0. The following example shows its scaling in a device with scale 4.0:</p>
-  
-  <table>
-<tbody>
-<tr>
- <td>Scale = Device scale (information in the target) / Base scale (information in the application)
-<p>For example: 2.0 = 4.0 / 2.0</p>
-</td>
-</tr>
-</tbody>
-</table>
-  
-  <h2 id="apply" name="apply">Applying the Base Scale</h2> 
-  <p>To create an application that supports multiple screen sizes, you must learn how to set the base scale in:</p> 
-  <ul> 
-   <li><a href="#set_edc">EDC</a></li> 
-   <li><a href="#set_c">C code</a></li> 
-  </ul> 
-  
-  <h3 id="calc_base" name="calc_base">Calculating the Base Scale</h3>
-
-<p>To get the base scale value of your own display, you must know the DPI of the display. Based on the display DPI, you can calculate the base scale, since it is basically proportional to the display DPI with the following formula:</p>
-
-<pre class="prettyprint">
-base_scale = (DPI / 90) * profile_factor</pre>
-
-<p>The profile factor is the value for fitting the object size as a profile. The distance between the user eye and the display differs for each profile. This means that the object size must be different if the device display is changed.</p>
-
-<p>The following table lists the profile factors for various profiles.</p>
-
-<table>
-<caption>Table: Profile factors</caption>
-<tbody>
-<tr>
- <th>Profile</th>
- <th>Profile factor</th>
-</tr>
- <tr>
- <td>Wearable</td>
- <td>0.4</td>
- </tr>
- <tr>
- <td>Mobile - Small Screen (~ 4.4 inch)</td>
- <td>0.7</td>
- </tr>
- <tr>
- <td>Mobile - Normal Screen (4.5 inch ~)</td>
- <td>0.8</td>
- </tr> 
- <tr>
- <td>Desktop</td>
- <td>1.0</td>
- </tr>
- </tbody></table>
-
-<p>For example, if your display has 233 dpi and the platform uses the mobile profile(small screen), the base scale is calculated like this:</p>
-<pre class="prettyprint">
-1.8 = (233 / 90) * 0.7</pre>
-
-<p>The base scale of the device is 1.8. If the application is made in the environment using 233 dpi and mobile profile, its base scale must be set to 1.8. For a desktop, the DPI is 90, and its base scale is 1.0.</p>
-
- 
-<h3 id="set_edc" name="set_edc">Setting the Base Scale in EDC</h3> 
-  <p>The application must specify the scale its base scale. The edje objects are scaled properly if the base scale is set in the collection of the edc file, as in the following example:</p> 
-  
-  <table class="note"><tbody>
-<tr>
-<th class="note">Note</th> 
-      </tr>
-<tr>
-<td class="note">The base scale for WVGA is 1.8, and for HD application, 2.4.</td> 
-      </tr>
-</tbody></table>
-<pre class="prettyprint">collections 
-{
-&nbsp;&nbsp;&nbsp;base_scale: 1.8; // This value is for WVGA application
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;box&quot;; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> 
-  <h3 id="set_c" name="set_c">Setting the Base Scale in C</h3> 
-  <p>The size of the object must be specified in EDC. However, sometimes it is better for an application to the object size in a C file. If the size is defined with no scaling in the C file, the application is displayed in the same size even if the scale changes. To avoid this, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro, as in the following example:</p> 
-
-<pre class="prettyprint">#define ELM_SCALE_SIZE(x) x / elm_app_base_scale_get() * elm_config_scale_get()</pre>
-
-  <p>in the definition, the size (<span style="font-family: Courier New,Courier,monospace;">x</span>) is changed to a size based on 1.0 (<span style="font-family: Courier New,Courier,monospace;">x/elm_app_base_scale_get()</span>) and it is multiplied with the scale of the current target (<span style="font-family: Courier New,Courier,monospace;">elm_config_scale_get()</span>).</p>
-  
-  <p>Set the base scale using the <span style="font-family: Courier New,Courier,monospace;">elm_app_base_scale_set()</span> function:</p>
-  
-<pre class="prettyprint">int app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;elm_app_base_scale_set(1.8); // This value is for WVGA application
-}
-</pre> 
-  <p>After setting the base scale, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro to set the size of an object in the application:</p> 
-
-<pre class="prettyprint">evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
-evas_object_resize(object, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
-</pre> 
- 
-  <p>You can use <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro in any API related with setting objects sizes in Tizen native applications.</p> 
-  
-  <h2 id="without" name="without">Scaling without the Base Scale</h2>   
-
-<p>In Tizen, each device has a scale value in proportion to the display. If scaling is enabled, the objects are drawn on the display by multiplying with the user-defined object size and the device scale. If the base scale is set, the objects are drawn by dividing the user-defined object size with the base scale and multiplying it by the device scale.</p>
-
-<p>If you use the scale feature without setting the base scale, the result is the same as if you set the base scale to 1.0. Then you do not need to care about the base scale variables, because the pixels roll like a virtual pixel. For example, if you set 1 pixel in 129 dpi without setting the base scale value, the 1 pixel before scaling is equivalent to 1 real physical pixel after scaling. In case of 233 dpi, it is the same with 1.8 pixels after scaling. </p>
-
-<p>Always consider the pixel before scaling when defining the application UI, in order to ensure a proper UI display on the screen with a diversity of densities.</p>
-
-<pre class="prettyprint">int app_create(void *data)
-[ Conversion Formula ]
-Real physical pixel = (a pixel before scaling) x (dpi / 90) x 0.7
-</pre> 
-<p>Where  90 is the default DPI on a desktop and 0.7 is the mobile profile factor.</p>
-
-<p>The following table shows some examples.</p>
-
-<table>
-<caption>Table: Pixel conversions</caption>
-<tbody>
-<tr>
- <th></th>
- <th>Base</th>
- <th>Low-density device (such as WVGA, 4 inch)</th>
- <th>High-density device (such as HD, 5 inch)</th>
-</tr>
- <tr>
- <td>DPI</td>
- <td>129</td>
- <td>233</td>
- <td>294</td>
- </tr>
- <tr>
- <td>A pixel before scaling</td>
- <td>100</td>
- <td>100</td>
- <td>100</td>
- </tr>
- <tr>
- <td>Real physical pixel</td>
- <td>100</td>
- <td>180</td>
- <td>260</td>
- </tr>
- <tr>
- <td>Actual base scale</td>
- <td>1.0</td>
- <td>1.8</td>
- <td>2.6</td>
- </tr> 
- </tbody></table>
-
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/multipoint_touch_n.htm b/org.tizen.ui.guides/html/native/efl/multipoint_touch_n.htm
deleted file mode 100755
index 3b15f01..0000000
--- a/org.tizen.ui.guides/html/native/efl/multipoint_touch_n.htm
+++ /dev/null
@@ -1,266 +0,0 @@
-<!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>Tracking Multi-point Touch Events</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#init">Initializing Multi-point Touch</a></li>
-			<li><a href="#canvas">Handling the Canvas</a></li>
-			<li><a href="#touch">Managing Touch Events</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>				
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>			
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Tracking Multi-point Touch Events</h1>
-
-  
-<p>This tutorial demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> to paint on a canvas and track touch events.</p>
-
- <h2 id="init" name="init">Initializing Multi-point Touch</h2>
-
-<p>This sample is a fully functional application able to track multiple simultaneous clicks. For every click, a black rectangle spot is drawn on the screen. This way it is easy to test the multi-point touch operation with the application.</p>
-
-<p>Initialization is implemented in the <span style="font-family: Courier New,Courier,monospace">multitouch.c</span> file.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">appdata</span> structure includes <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> pointers, a list, and a Boolean flag.</p>
-<pre class="prettyprint">
-typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;Evas_Object *nf;
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-&nbsp;&nbsp;&nbsp;Evas_Object *box;
-&nbsp;&nbsp;&nbsp;Evas_Object *rect;
-&nbsp;&nbsp;&nbsp;Evas_Object *label;
-
-&nbsp;&nbsp;&nbsp;// List of mouse spots
-&nbsp;&nbsp;&nbsp;Eina_List *spots;
-
-&nbsp;&nbsp;&nbsp;// Flag for checking the mouse down event
-&nbsp;&nbsp;&nbsp;Eina_Bool down; 
-} 
-appdata_s;
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">main()</span> function initializes event callbacks and calls the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function to start the EFL application.</p>
-<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;ad);
-&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;return ret;
-}
-</pre>
-
-
-<p>The following figure illustrates the Multi-point Touch.</p>
-
-  <p class="figure">Figure: Multi-point Touch screens</p> 
-  <p align="center"><img alt="Multi-point Touch screens" src="../../images/multipoint_touch.png" /></p> 
-
- <h2 id="canvas" name="canvas">Handling the Canvas</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates base GUI elements including Naviframe and the Naviframe button. Naviframe includes each view screen as an item, which in turn includes the title and a button which clears spots when clicked.</p> 
-
-<pre class="prettyprint">static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
-
-&nbsp;&nbsp;&nbsp;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
-
-&nbsp;&nbsp;&nbsp;// Button
-&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Clear&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, button_clicked_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Create main view
-&nbsp;&nbsp;&nbsp;ad-&gt;box = create_main_view(ad);
-&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;Multi-point Touch&quot;,
-&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, ad-&gt;box, NULL);
-&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_right_btn&quot;, ad-&gt;button);
-} 
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main view including the label and an event rectangle. </p> 
-<p>The label displays information on mouse event status and coordinates (x, y positions). The event rectangle is received completely through mouse (touch) events. To show 2 elements in a Naviframe content area, a container combining those elements is necessary. A box container functions in that role. The label and rectangle pack end the box and the box is embedded into the Naviframe content area.</p> 
-
-<pre class="prettyprint">static Evas_Object *
-create_main_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box;
-
-&nbsp;&nbsp;&nbsp;// Box
-&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_show(box);
-
-&nbsp;&nbsp;&nbsp;// Label
-&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(box);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;None&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, 0);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;label, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;label, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;label);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
-
-&nbsp;&nbsp;&nbsp;// Event Rect
-&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(box));
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
-&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;rect);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_spot()</span> function creates a rectangle, resizes the rectangle according to received size input, and moves the rectangle according to received coordinates (x, y positions) input.</p>
-
-<pre class="prettyprint">Evas_Object *
-create_spot(Evas_Object *parent, Evas_Coord x, Evas_Coord y, int size)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *spot;
-&nbsp;&nbsp;&nbsp;spot = evas_object_rectangle_add(evas_object_evas_get(parent));
-&nbsp;&nbsp;&nbsp;evas_object_resize(spot, size, size);
-&nbsp;&nbsp;&nbsp;// Adjust x, y positions to be center of object
-&nbsp;&nbsp;&nbsp;evas_object_move(spot, x - (size/2), y - (size/2));
-&nbsp;&nbsp;&nbsp;evas_object_show(spot);
-
-&nbsp;&nbsp;&nbsp;return spot;
-}
-</pre>
-
-<p>The rectangle object is stored in <span style="font-family: Courier New,Courier,monospace">Eina_List (ad-&gt;spots)</span> for managing other functions. The <span style="font-family: Courier New,Courier,monospace">button_clicked_cb()</span> function removes all <span style="font-family: Courier New,Courier,monospace">evas_objects</span> into the <span style="font-family: Courier New,Courier,monospace">ad-&gt;spots</span> list, meaning all spot rectangles are cleared.</p>
-
-<pre class="prettyprint">static void
-button_clicked_cb(void *data, Evas *evas, Evas_Object *object, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Evas_Object *spot;
-
-&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(ad-&gt;spots, spot)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(spot);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spot = NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Clear&quot;);
-}
-</pre>
-
- <h2 id="touch" name="touch">Managing Touch Events</h2>
-
-<p>On the bottom of the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function, event callbacks are added to the event rectangle. An event callback is added using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
-
-<p>The following touch event types are supported:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: This event is called when the given object receives the mouse down event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: This event is called when the given object receives the mouse up event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: This event is called when the given object receives the mouse move event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: This event is called when the given object has already received the mouse down event and receives the multi-mouse down event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: This event is called when the given object receives the multi-mouse up event. </li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: This event is called when the given object receives the multi-mouse move event.</li>
-</ul>
-<p>If the given object receives a mouse event, a callback function is called, and event information, such as coordinates (x, y positions) is passed. The <span style="font-family: Courier New,Courier,monospace">mousemove_cb()</span> function sets the mouse status, positions text in the label, and draws a spot rectangle. To distinguish down and up positions, set different colors for the down and up rectangles.</p>
-
-<pre class="prettyprint">
-static void
-mousemove_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Evas_Object *spot;
-&nbsp;&nbsp;&nbsp;char buf[1024];
-&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev = event_info;
-&nbsp;&nbsp;&nbsp;Evas_Coord x = ev-&gt;cur.canvas.x;
-&nbsp;&nbsp;&nbsp;Evas_Coord y = ev-&gt;cur.canvas.y;
-&nbsp;&nbsp;&nbsp;int size = (int) 5 * elm_config_scale_get();
-
-&nbsp;&nbsp;&nbsp;if (!ad-&gt;down)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Mouse Move, %d, %d&quot;, x, y);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
-
-&nbsp;&nbsp;&nbsp;// Draw spot on event position
-&nbsp;&nbsp;&nbsp;spot = create_spot(ad-&gt;rect, x, y, size);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(spot, 0, 0, 0, 255);
-&nbsp;&nbsp;&nbsp;ad-&gt;spots= eina_list_append(ad-&gt;spots, spot);
-}
-</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>
diff --git a/org.tizen.ui.guides/html/native/efl/naviframe_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/naviframe_tutorial_n.htm
deleted file mode 100755
index 206759b..0000000
--- a/org.tizen.ui.guides/html/native/efl/naviframe_tutorial_n.htm
+++ /dev/null
@@ -1,252 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating a Naviframe for Navigation</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">	
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating a Naviframe for Navigation</h1>
-
-  
-<p>Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.</p>
-
-
- <h2 id="create" name="create">Creating Naviframes</h2>
-
-<p>Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.</p>
-
-<p>This tutorial shows a UI with three naviframes. Each naviframe is made of 20 screens, each made up of a label with the text &quot;label
-&lt;n&gt;&quot;, a title with the same text, and previous and next buttons, which are used to navigate between the screens.</p>
-<p>TODO: screenshots of the staged interface</p>
-<p>The naviframe is &quot;one-way&quot;: elements are added, and when the user clicks on the &quot;previous&quot; button, they are removed; there is no &quot;next&quot; button by default. To add it, we define a structure that holds the naviframe object along with a stack of the elements that the user has popped by using the &quot;previous&quot; button.</p>
-<p>Note that it is possible to create the elements on-the-fly each time the &quot;next&quot; button is pressed. Both approaches are valid.</p>
-<pre class="prettyprint">// NOTE: A zipper is a datastructure for an ordered set of elements and a
-// cursor in this set, meaning there are elements before the cursor (which are
-// stored inside the naviframe) and after (which are stored in the &quot;popped&quot;
-// list.
-struct naviframe_zipper 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
-&nbsp;&nbsp;&nbsp;Eina_List *popped;
-};
-</pre>
-
-<p>To add several naviframes, create a function that factors their creation and initializes the naviframe_zipper structure defined above.</p>
-<pre class="prettyprint">static struct naviframe_zipper *
-_naviframe_add(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = malloc(sizeof(struct naviframe_zipper));
-&nbsp;&nbsp;&nbsp;z-&gt;naviframe = elm_naviframe_add(parent);
-&nbsp;&nbsp;&nbsp;z-&gt;popped = NULL;
-
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(z-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(z-&gt;naviframe, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_show(z-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;// By default, objects are destroyed when they are popped from the naviframe
-&nbsp;&nbsp;&nbsp;// To save and re-use them, enable &quot;preserve_on_pop&quot;
-&nbsp;&nbsp;&nbsp;elm_naviframe_content_preserve_on_pop_set(z-&gt;naviframe, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;return z;
-}
-</pre>
-<p>Create buttons that are at the top of the naviframe and allow the user to go back and forth between the screens. The naviframe component builds a button for &quot;previous&quot; by default, but allows the programmers to provide their own buttons. It has a specific slot for the &quot;next&quot; button.</p>
-<pre class="prettyprint">// Save the element that is popped from the naviframe
-static void
-_naviframe_prev(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = data;
-&nbsp;&nbsp;&nbsp;z-&gt;popped = eina_list_prepend(z-&gt;popped, elm_naviframe_item_pop(z-&gt;naviframe));
-}
-
-// Set the first element after the current one available and push it to the
-// naviframe
-static void
-_naviframe_next(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = data;
-&nbsp;&nbsp;&nbsp;Evas_Object *label, *prev, *next;
-&nbsp;&nbsp;&nbsp;const char *text;
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it;
-
-&nbsp;&nbsp;&nbsp;label = eina_list_data_get(z-&gt;popped);
-&nbsp;&nbsp;&nbsp;z-&gt;popped = eina_list_remove_list(z-&gt;popped, z-&gt;popped);
-&nbsp;&nbsp;&nbsp;if (label != NULL) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The UI component is saved inside the naviframe but nothing more; we need
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// to create new buttons and set the title text again (copy the one
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// from the label that is saved).
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text = elm_object_text_get(label);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The _button function creates a button which is either &quot;Previous&quot; (-1) or
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &quot;Next&quot; (1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prev = _button(z, -1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next = _button(z, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_naviframe_item_push(z-&gt;naviframe, text, prev, next, label, NULL);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p> When a naviframe and the pages that go inside it are built, populate it.</p>
-<p>Remember that three naviframes are created, each populated in a different way. The common bits have been factored out as a function and the specific parts are executed through a callback. The generic function is shown below.</p>
-<pre class="prettyprint">// Generic naviframe-populate function:
-// Its third (and last) parameter is a callback for customization, i.e. pushes
-// the new items to a specific position; it returns a &quot;context&quot; value that is
-// used between its calls and enables behaviors such as &quot;push after the
-// previously-pushed item&quot; 
-static struct naviframe_zipper*
-_naviframe_populate_gen(Evas_Object *parent, const char *id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void * (*populate_cb) (Evas_Object *nav, const char *title, Evas_Object
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*prev, Evas_Object *next, Evas_Object *label, Elm_Object_Item *context)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)
-{
-&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z;
-&nbsp;&nbsp;&nbsp;Evas_Object *label, *prev, *next;
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *context = NULL;
-&nbsp;&nbsp;&nbsp;char buf[256];
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;z = _naviframe_add(parent);
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 20; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label = elm_label_add(z-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s [%d]&quot;, id, i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(label, buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(label);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(label, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The _button function creates a button which is either &quot;Previous&quot; (-1) or
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &quot;Next&quot; (1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prev = _button(z, -1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next = _button(z, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Use the populate_cb callback to provide the customization of the way the
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// elements are added inside the naviframe
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context = populate_cb(z-&gt;naviframe, buf, prev, next, label, context);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return z;
-}
-</pre>
-<p>The prototype of the callbacks is fairly large, but that is because of the syntax for callbacks in C.</p>
-<pre class="prettyprint">// Push items one after the other
-static Elm_Object_Item *
-_populate_cb__push(Evas_Object *nav, const char *title,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
-{
-&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
-}
-
-// Push items one after the other but use insert_after for it
-static Elm_Object_Item *
-_populate_cb__push_then_insert_after(Evas_Object *nav, const char *title,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
-{
-&nbsp;&nbsp;&nbsp;if (context == NULL) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_insert_after(nav, context, title, prev, next, label, NULL);
-&nbsp;&nbsp;&nbsp;}
-}
-
-// Push one item and repeatedly insert new items before the last inserted
-// item
-static Elm_Object_Item *
-_populate_cb__push_then_insert_before(Evas_Object *nav, const char *title,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
-{
-&nbsp;&nbsp;&nbsp;if (context == NULL) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_insert_before(nav, context, title, prev, next, label, NULL);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p>Create a window with a vertical box, which holds the three naviframes from the Appcore&#39;s <span style="font-family: Courier New,Courier,monospace">app_create</span> callback.</p>
-
-<pre class="prettyprint">static bool
-_app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *w, *box;
-&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z;
-
-&nbsp;&nbsp;&nbsp;w = elm_win_util_standard_add(&quot;Naviframe Test&quot;, &quot;Naviframe Test&quot;);
-
-&nbsp;&nbsp;&nbsp;box = elm_box_add(w);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(box, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_show(box);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(w, box);
-
-&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;Before&quot;, _populate_cb__push_then_insert_before);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;After&quot;, _populate_cb__push_then_insert_after);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;Push&quot;, _populate_cb__push);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;evas_object_show(w);
-}
-</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>
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
deleted file mode 100755
index 4e26221..0000000
--- a/org.tizen.ui.guides/html/native/efl/notification_window_n.htm
+++ /dev/null
@@ -1,420 +0,0 @@
-<!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>Notification Windows: Supporting Notification Levels, Screenshots, and Input Generators</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-         <ul class="toc">
-			<li><a href="#noti">Notification Window</a></li>
-            <li><a href="#shot">Screenshot</a></li>
-            <li><a href="#input_gen">Input Generator</a></li>
-			<li><a href="#init">Initializing EFL Utility</a></li>			
-			<li><a href="#create">Creating a Notification Window and Setting a Notification Window Level</a></li>
-			<li><a href="#getting">Getting the Notification Window Level</a></li>
-            <li><a href="#screenshot">Getting a Screenshot</a></li>
-            <li><a href="#input_gen_key">Generating a Key Input Event </a></li>
-            <li><a href="#input_gen_touch">Generating a Touch Input Event </a></li>			
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Notification Windows: Supporting Notification Levels, Screenshots, and Input Generators</h1> 
- 
-<p>The EFL UTIL utility package supports the following EFL functionalities:</p>
-
-<ul><li><a href="#noti">Notification Window and Level</a>
-<p>You can <a href="#init">initialize the EFL Utility</a>, <a href="#create">create a notification window and set a window level</a>, and <a href="#getting">get the notification window level</a>.</p></li>
-    <li><a href="#shot">Screenshot</a>
-<p>You can <a href="#init">initialize the EFL Utility</a> and <a href="#screenshot">capture a screenshot</a>.</p></li>
-    <li><a href="#input_gen">Input Generator</a>
-<p>You can <a href="#init">initialize the EFL Utility</a>, and generate a <a href="#input_gen_key">key input event</a> and <a href="#input_gen_touch">touch input event</a>.</p></li></ul>
-
-	
-<h2 id="noti" name="noti">Notification Window and Level</h2>
-
-<p>The EFL UTIL API allows you to set and get the notification level of the notification window (which is of the EFL window type):</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span></li></ul>
-
-<p>To understand notification levels, you must first learn about the Tizen window layer hierarchy. Window layers are logical containers used to control the window stack order. Each window belongs to 1 layer and can change the stack order in the layer. Windows in same layer are always placed on or under a window in another layer. In addition to the default &quot;normal layer&quot;, there exists a &quot;notification layer&quot;, which is always placed above the normal layer.</p>
-
-
-<p class="figure">Figure: Window layers</p> 
-<p align="center"><img alt="Window layers" src="../../images/efl_windowlayer.png" /></p> 
-
-
-<p>Each window is set to  a specific layer according to its type or properties. Most application windows belong to the normal layer. However, in case of an important alarm or other information crucial to the user, you can set the window to belong to the notification layer. This ensures that the user notices the information immediately, because the window belonging to the notification layer is always shown above the windows in the normal layer.</p> 
-
-<h3>Using the Notification Windows</h3>
-
-<p>A window that belongs to the notification layer is called a &quot;notification window&quot;. To make a notification window:</p>
-
-<ol><li>Set the window type to <span style="font-family: Courier New,Courier,monospace;">NOTIFICATION</span>, by calling the <span style="font-family: Courier New,Courier,monospace;">elm_win_add()</span> function with the third parameter set to <span style="font-family: Courier New,Courier,monospace;">ELM_WIN_NOTIFICATION</span>.</li>
-<li>Set the notification level by calling the <span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span> function.
-<p>The notification level defines the priority of the window, and the notification layer contains 3 levels (<span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>, <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span>, and <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_3</span>).</p>
-<p>The default notification window level is <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>. Most of notification windows can be set to this level. The <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span> is a higher level than <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>, which means that the window set to <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span> is always on the <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span> level window. The <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_3</span> is the highest level in notification windows. Very few applications can use this level.</p>
-
-<p>If there are notification windows that have the same level, the most recently created notification window is placed on top of the other window. </p>
-
-</li></ol>
-
-<p class="figure">Figure: Notification levels</p> 
-<p align="center"><img alt="Notification levels" src="../../images/efl_notilevels.png" /></p> 
-
-
-<p>The following code snippets shown how to make a notification window with a higher level.</p>
-
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-#include &lt;efl_util.h&gt;
-#include &lt;dlog.h&gt;
-
-static Evas_Object *create_win(const char *name)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *eo;
-&nbsp;&nbsp;&nbsp;efl_util_error_e error;
-&nbsp;&nbsp;&nbsp;// Create the NOTIFICATION window object
-&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
-
-&nbsp;&nbsp;&nbsp;if (!eo) return NULL;
-
-&nbsp;&nbsp;&nbsp;// Set the NOTIFICATION level
-&nbsp;&nbsp;&nbsp;error = efl_util_set_notification_window_level(eo, EFL_UTIL_NOTIFICATION_LEVEL_1);
-
-&nbsp;&nbsp;&nbsp;elm_win_title_set(eo, name);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(eo, EINA_TRUE); 
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(eo, &quot;delete,request&quot;, _quit_cb, NULL); 
-	
-&nbsp;&nbsp;&nbsp;return eo;
-}</pre>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span> function to get the currently set notification level of a window. If the window is not of the notification type, the function returns the <span style="font-family: Courier New,Courier,monospace;">-EFL_UTIL_ERROR_NOT_SUPPORTED_WINDOW_TYPE</span> error.</p>
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-#include &lt;efl_util.h&gt;
-#include &lt;dlog.h&gt;
-
-void get_notification_level (Evas_Object *eo)
-{
-&nbsp;&nbsp;&nbsp;efl_util_error_e error;
-&nbsp;&nbsp;&nbsp;efl_util_notification_level_e  notification_level;
-
-&nbsp;&nbsp;&nbsp;if (!eo) return;
-
-&nbsp;&nbsp;&nbsp;// Get the window notification level
-&nbsp;&nbsp;&nbsp;error = efl_util_get_notification_window_level (eo, &amp;notification_level);
-
-&nbsp;&nbsp;&nbsp;// Check the return value
-&nbsp;&nbsp;&nbsp;if (error== EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (notification_level)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_1:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for level 1
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_2:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for level 2
-&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;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-  
-<h2 id="shot" name="shot">Screenshot</h2>
-
-<p>The EFL UTIL SCREENSHOT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__SCREENSHOT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__SCREENSHOT__MODULE.html">wearable</a> applications) allows you to get the screen image to the user.</p>
-
-<p>First you must make the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_h</span> structure and initialize the structure members with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_initialize()</span> function. To take the actual screenshot, create screen capture data and return it to the <span style="font-family: Courier New,Courier,monospace;">tbm_surface</span> handler with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_take_tbm_surface()</span> function.</p>
-<p>When no longer needed, remember to free the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_h</span> structure with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_deinitialize()</span> function.</p>
-
-
-<h2 id="input_gen" name="input_gen">Input Generator</h2>
-
-<p>The 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 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>
-
-
-
-
- <h2 id="init" name="init">Initializing EFL Utility</h2>
- 
- <p>To use the EFL UTIL API, the following header file has to be included:</p>
-  <pre class="prettyprint">#include &lt;efl_util.h&gt;</pre> 
-
- <h2 id="create" name="create">Creating a Notification Window and Setting a Notification Window Level</h2>
-
-<p>To create a notification window and set the window level, use the <span style="font-family: Courier New,Courier,monospace">efl_util_set_notification_window_level()</span> function. If the window type is not notification type, the function returns an error.</p> 
-<pre class="prettyprint">#include &lt;Elementary.h&gt;
-#include &lt;dlog.h&gt;
-
-void create_win() 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *eo;
-&nbsp;&nbsp;&nbsp;efl_util_error_e error;
-&nbsp;&nbsp;&nbsp;char *name = &quot;Notification window&quot;;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;// Create notification window
-&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
-&nbsp;&nbsp;&nbsp;if (!eo) return;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;// Set notification level
-&nbsp;&nbsp;&nbsp;error = efl_util_set_notification_window_level
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(eo, EFL_UTIL_NOTIFICATION_LEVEL_1);
-&nbsp;&nbsp;&nbsp;if (error != EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do error handling
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> 
-
- <h2 id="getting" name="getting">Getting the Notification Window Level</h2>
-
-<p>To get the notification window level, use the <span style="font-family: Courier New,Courier,monospace">efl_util_get_notification_window_level()</span> function:</p>
-
-<pre class="prettyprint">void create_win() 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *eo;
-&nbsp;&nbsp;&nbsp;efl_util_error_e error;
-&nbsp;&nbsp;&nbsp;efl_util_notification_level_e notification_level;
-&nbsp;&nbsp;&nbsp;char *name = &quot;Notification window&quot;;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;// Create notification window
-&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
-&nbsp;&nbsp;&nbsp;if (!eo) return;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;// Get notification level
-&nbsp;&nbsp;&nbsp;error = efl_util_get_notification_window_level
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(eo, &amp;notification_level);
-&nbsp;&nbsp;&nbsp;if (error == EFL_UTIL_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (notification_level) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_1:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for notification level 1
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_2:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for notification level 2
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-  
-<h2 id="screenshot" name="screenshot">Getting a Screenshot</h2>
-
- <p>To get a screenshot:</p>
- 
-<ol><li>Initialize with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_initialize()</span> function:
-  <pre class="prettyprint">
-#include &lt;tbm_surface.h&gt;
-#include &lt;X11/Xlib.h&gt;
-
-void capture()
-{
-&nbsp;&nbsp;&nbsp;efl_util_screenshot_h screenshot = NULL;
-&nbsp;&nbsp;&nbsp;tbm_surface_h tbm_surface = NULL;
-&nbsp;&nbsp;&nbsp;tbm_surface_info_s tsuri;
-
-&nbsp;&nbsp;&nbsp;screenshot = efl_util_screenshot_initialize(width, height);
-</pre></li>
-
-<li>After getting the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_h</span> structure, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_take_tbm_surface()</span> function to get the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> handler which has the screenshot data.
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;if (screenshot) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tbm_surface = efl_util_screenshot_take_tbm_surface(screenshot);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tbm_surface) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Treat tbm_surface handler (screenshot data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-</pre></li>
-
-<li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_deinitialize()</span> function:
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_screenshot_deinitialize(screenshot);
-&nbsp;&nbsp;&nbsp;}
-}</pre></li></ol>
-
- <h2 id="input_gen_key" name="input_gen_key">Generating a Key Input Event</h2>
-
-<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">
-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;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 the input generator system
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-</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;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(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;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;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>
-
-  <p>To generate touch 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">
-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;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 the input generator system
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-</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;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(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;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(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;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;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>
-</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/native/efl/panes_tutorial_mn.htm b/org.tizen.ui.guides/html/native/efl/panes_tutorial_mn.htm
deleted file mode 100755
index f53dd1f..0000000
--- a/org.tizen.ui.guides/html/native/efl/panes_tutorial_mn.htm
+++ /dev/null
@@ -1,324 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Panes</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#init">Initializing the Application</a></li>
-		<li><a href="#create">Creating a Panes Component</a></li>
-		<li><a href="#config">Configuring the Panes</a></li>
-		<li><a href="#signals">Handling Signals</a></li>
-		</ul>	
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Panes</h1>
-
-  
-<p>This tutorial explains how to use Panes in the application.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
- <h2 id="init" name="init">Initializing the Application</h2>
-
-<p>This is how to start an Appcore application.</p>
-<pre class="prettyprint">#include &lt;Elementary.h&gt;
-#include &lt;app.h&gt;
-
-struct _appdata 
-{
-&nbsp;&nbsp;&nbsp;const char *name;
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-};
-
-static void app_terminate(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;struct _appdata *ad;
-
-&nbsp;&nbsp;&nbsp;if (!user_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;ad = user_data;
-
-&nbsp;&nbsp;&nbsp;if (ad-&gt;win)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;win);
-}
-
-static bool app_create(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;struct _appdata *ad;
-&nbsp;&nbsp;&nbsp;Evas_Object *win, *conformant, *naviframe, *panes, *panes_h, *nav_it, *bt;
-
-&nbsp;&nbsp;&nbsp;if (!user_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;ad = user_data;
-
-&nbsp;&nbsp;&nbsp;// Create window 
-&nbsp;&nbsp;&nbsp;elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
-&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(&quot;panes&quot;, &quot;Panes tutorial&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;if (!win)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;ad-&gt;win = win;
-
-&nbsp;&nbsp;&nbsp;// Add elm_conformant 
-&nbsp;&nbsp;&nbsp;conformant = elm_conformant_add(win);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, conformant);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_show(conformant);
-
-&nbsp;&nbsp;&nbsp;// Add naviframe to conformant 
-&nbsp;&nbsp;&nbsp;naviframe = elm_naviframe_add(conformant);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(conformant, naviframe);
-&nbsp;&nbsp;&nbsp;evas_object_show(naviframe);
-
-&nbsp;&nbsp;&nbsp;evas_object_resize(win, 320, 400);
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-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;ad);
-&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;return ret;
-}
-</pre>
-<p>The code above creates a window entitled &quot;Panes tutorial&quot;, composed of a conformant component that contains a naviframe component. To add a new Panes object, use the <span style="font-family: Courier New,Courier,monospace">_create()</span> function.</p>
-
- <h2 id="create" name="create">Creating a Panes Component</h2>
-
-<p>The elm_panes component adds a draggable bar between two contents. When dragged, this bar resizes the contents&#39; size. To create a new Panes into an Elementary object, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
-<pre class="prettyprint">// Add an elm_panes 
-panes = elm_panes_add(naviframe);
-evas_object_size_hint_weight_set(panes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(win, panes);
-evas_object_show(panes);
-
-nav_it = elm_naviframe_item_push (naviframe, &quot;Panes view&quot;, NULL, NULL, panes, NULL);
-</pre>
-<p>Here the Panes is created and added in the naviframe.</p>
-
- <h2 id="config" name="config">Configuring the Panes</h2>
-
-<p>By default, the orientation of the Panes is vertical. To modify the orientation, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
-<pre class="prettyprint">// Add a horizontal elm_panes 
-panes_h = elm_panes_add(naviframe);
-elm_panes_horizontal_set(panes_h, EINA_TRUE);
-</pre>
-<p>The code above creates another Panes object and sets the horizontal orientation. To add content in a panes, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. Here we add the horizontal Panes (panes_h) to the &quot;left&quot; part of the first created Panes (panes).</p>
-<pre class="prettyprint">elm_object_part_content_set(panes, &quot;left&quot;, panes_h);
-</pre>
-
-<p>This is how to set a button object to the &quot;right&quot; side of our vertical Panes component.</p>
-<pre class="prettyprint">// Create a button object 
-bt = elm_button_add(naviframe);
-elm_object_text_set(bt, &quot;Right&quot;);
-evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(bt);
-
-// and set it to the &quot;right&quot; part of the vertical Panes 
-elm_object_part_content_set(panes, &quot;right&quot;, bt);
-</pre>
-
-<p>The content of the horizontal Panes is set with two button objects (up and down). When populating a vertically displayed Panes, the left content is placed at the top, and the right content is placed at the bottom.</p>
-<pre class="prettyprint">// Create a &quot;Up&quot; button 
-bt = elm_button_add(naviframe);
-elm_object_text_set(bt, &quot;Up&quot;);
-evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(bt);
-elm_object_part_content_set(panes_h, &quot;left&quot;, bt);
-
-// Create a &quot;Down&quot; button 
-bt = elm_button_add(naviframe);
-elm_object_text_set(bt, &quot;Down&quot;);
-evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(bt);
-elm_object_part_content_set(panes_h, &quot;right&quot;, bt);
-</pre>
-
-<p>The elm_panes can be dragged with the mouse but the proportion can also be set with the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions. As an example, this is how to set the left size of both panes to 80%.</p>
-<pre class="prettyprint">// Set the proportion of the panes to 80% 
-elm_panes_content_left_size_set(panes, 0.8);
-elm_panes_content_left_size_set(panes_h, 0.8);
-</pre>
-
-<p>The Panes proportions can also be fixed so that the user is not able to drag them. To do this, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_fixed_set()</span> function.</p>
-<pre class="prettyprint">// Fix the Panes proportion 
-elm_panes_fixed_set(panes_h, EINA_TRUE);
-</pre>
-
- <h2 id="signals" name="signals">Handling Signals</h2>
-
-<p>The Panes components emit four different signals, depending on the users&#39; interaction with the draggable bar.</p>
-<ul>
-<li>&quot;press&quot; - The pane is pressed.</li>
-<li>&quot;unpressed&quot; - The pane is released after being pressed.</li>
-<li>&quot;clicked&quot; - The pane is clicked.</li>
-<li>&quot;clicked,double&quot; - The pane is double clicked.</li>
-</ul>
-<p>We add a callback function for each of them.</p>
-
-<h3>&quot;clicked&quot; Signal </h3>
-
-<p>The callback function for the clicked signal prints &quot;Clicked&quot; to standard output.</p>
-<pre class="prettyprint">// clicked callback 
-static void
-_clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Clicked\n&quot;);
-}
-</pre>
-
-<p>This is how to register this callback function to the vertical panes.</p>
-<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;clicked&quot;, _clicked_cb, panes);
-</pre>
-
-<h3>&quot;press&quot; Signal </h3>
-
-<p>The callback function for the &quot;press&quot; signal prints &quot;Pressed&quot; to the standard output.</p>
-<pre class="prettyprint">// press callback 
-static void
-_press_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Pressed\n&quot;);
-}
-</pre>
-
-<p>This is how to register this callback function to the vertical panes.</p>
-<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;press&quot;, _press_cb, panes);
-</pre>
-
-<h3>&quot;unpress&quot; Signal </h3>
-
-<p>For the &quot;unpress&quot; signal, the proportion size of the left content of the Panes component is printed to the standard output. To do this, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> function.</p>
-<pre class="prettyprint">// unpress callback 
-static void
-_unpress_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Unpressed, size : %f\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_get(obj));
-}
-</pre>
-<p>This is how to register this callback function to the Panes.</p>
-<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;unpress&quot;, _unpress_cb, panes);
-</pre>
-
-<h3>&quot;clicked,double&quot; Signal </h3>
-
-<p>Hide the left part of the Panes component on the &quot;clicked,double&quot; signal and set the left proportion to 0.0. To restore the left part proportion with a double click on the hidden part of the Panes component, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> functions, and a variable to store the value of the current proportion.</p>
-
-<pre class="prettyprint">// double clicked callback 
-static void
-_clicked_double_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;static double size = 0.0;
-&nbsp;&nbsp;&nbsp;double tmp_size = 0.0;
-&nbsp;&nbsp;&nbsp;tmp_size = elm_panes_content_left_size_get(obj);
-&nbsp;&nbsp;&nbsp;if (tmp_size &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_set(obj, 0.0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Double clicked, hidden.\n&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_set(obj, size);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   &quot;Double clicked, restoring size.\n&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;size = tmp_size;
-}
-</pre>
-
-<p>This is how to register this callback function to the Panes.</p>
-<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;clicked,double&quot;, _clicked_double_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;panes);
-</pre>
-
-<p class="figure">Figure: Panes tutorial in action</p> 
-<p align="center"><img alt="Panes tutorial in action" src="../../images/pane_tuto.png" /></p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</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>
diff --git a/org.tizen.ui.guides/html/native/efl/popup_tutorial_wn.htm b/org.tizen.ui.guides/html/native/efl/popup_tutorial_wn.htm
deleted file mode 100755
index 37b4ad8..0000000
--- a/org.tizen.ui.guides/html/native/efl/popup_tutorial_wn.htm
+++ /dev/null
@@ -1,244 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-	<title>Creating Wearable Popups</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#init">Initializing the Popup Application</a></li>
-			<li><a href="#style">Using Popup Styles</a></li>
-			<li><a href="#event">Managing Popup Events</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Wearable Popups</h1>
-
-  
-<p>This tutorial teaches the basics of the popup component interactions.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2 id="init" name="init">Initializing the Popup Application</h2>
-	
-<p>This use case creates an application with a window entitled &quot;Popup Basic Tutorial&quot;. The window consists of a conformant component, and a popup is placed inside the conformant.</p>
-	
-<p>To create a typical elementary application:</p> 	
-	
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Popup Basic Tutorial&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&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;create_popup(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-
-static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;struct app_data ad = {0,};
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-
-&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
-}</pre>	
-	
- <h2 id="style" name="style">Using Popup Styles</h2>
-
-<p>To create popups using various styles:</p>
-
-<ul><li>Create a basic text-only popup:
-
-<pre class="prettyprint">
-Evas_Object *popup;
-struct appdata *ad;
-ad = (struct appdata *) data;
-
-popup = elm_popup_add(ad-&gt;win_main);
-evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
-eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-elm_object_text_set(popup, &quot;This has only texts&quot;);
-evas_object_show(popup);
-</pre></li>
-
-<li>Create a popup with a title and text. The <span style="font-family: Courier New,Courier,monospace">title,text</span> attribute is the title area text part that defines the title label.
-<pre class="prettyprint">
-Evas_Object *popup;
-struct appdata *ad;
-ad = (struct appdata *) data;
-
-popup = elm_popup_add(ad-&gt;win_main);
-evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
-elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
-elm_object_text_set(popup,&quot;This Popup has title area and text&quot;);
-eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-evas_object_show(popup);
-</pre></li>
-
-<li>Create a popup with a title, text, and 2 buttons:
-<pre class="prettyprint">
-Evas_Object *popup;
-Evas_Object *btn;
-struct appdata *ad = (struct appdata *) data;
-
-popup = elm_popup_add(ad-&gt;win_main);
-evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
-elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
-eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-elm_object_text_set(popup, &quot;This is title text 2button popup&quot;);
-
-btn = elm_button_add(popup);
-elm_object_style_set(btn, &quot;popup&quot;);
-evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(btn, &quot;Cancel&quot;);
-elm_object_part_content_set(popup, &quot;button1&quot;, btn);
-evas_object_smart_callback_add(btn, &quot;clicked&quot;, _response_cb, popup);
-
-btn = elm_button_add(popup);
-elm_object_style_set(btn, &quot;popup&quot;);
-evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(btn, &quot;OK&quot;);
-elm_object_part_content_set(popup, &quot;button2&quot;, btn);
-evas_object_smart_callback_add(btn, &quot;clicked&quot;, _response_cb, popup);
-
-evas_object_show(popup);
-</pre></li>
-
-<li>Create a toast popup:
-<pre class="prettyprint">
-Evas_Object *popup;
-struct appdata *ad = (struct appdata *) data;
-
-popup = elm_popup_add(ad-&gt;win_main);
-elm_object_style_set(popup, &quot;toast&quot;);
-elm_popup_orient_set(popup, ELM_POPUP_ORIENT_BOTTOM);
-evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
-eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-elm_object_part_text_set(popup,&quot;elm.text&quot;, &quot;Saving Contacts to sim&quot;);
-
-evas_object_smart_callback_add(popup, &quot;block,clicked&quot;, _block_clicked_cb, NULL);
-elm_popup_timeout_set(popup, 2.0);
-evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, NULL);
-
-evas_object_show(popup);
-</pre></li>
-</ul>
-
- <h2 id="event" name="event">Managing Popup Events</h2>
-<p>The Elementary popups respond to user interactions with several events.</p>
-<p>To manage popup events:</p>
-
-<ul> 
-<li>Handle timeout events:
-<p>The &quot;timeout&quot; event is triggered whenever a popup is closed as a result of timeout.</p>
-<pre class="prettyprint">
-static void _timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;evas_object_del(obj);
-}
-elm_popup_timeout_set(popup, 3.0);
-evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, NULL);
-</pre></li>
-
-<li>Handle the <span style="font-family: Courier New,Courier,monospace">block,clicked</span> events:
-<p>The &quot;block,clicked&quot; event is triggered whenever the user taps on a blocked event area.</p>
-<pre class="prettyprint">
-static void _block_clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;evas_object_del(obj);
-}
-evas_object_smart_callback_add(popup, &quot;block,clicked&quot;, _block_clicked_cb, NULL);
-</pre></li>
-
-</ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/scalability_n.htm b/org.tizen.ui.guides/html/native/efl/scalability_n.htm
deleted file mode 100755
index de81e0a..0000000
--- a/org.tizen.ui.guides/html/native/efl/scalability_n.htm
+++ /dev/null
@@ -1,762 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Scalability Support</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">	 
-		 <li><a href="#key">Key Concepts</a></li>	
-		 <li><a href="#elementary">Scalability Using Elementary UI Components</a></li>
-	     <li><a href="#edje">Scalability Using Edje</a></li>
-	     <li><a href="#aspect">Aspect Ratio</a></li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Scalability Support</h1> 
-  <p>To ensure that your application works well in diverse devices, you must consider scalability when designing the application layout:</p>
-  <ul>
-<li><a href="#key">Key concepts</a></li>
-<li><a href="#elementary">Scalability using Elementary UI components</a></li>
-<li><a href="#edje">Scalability using Edje</a></li>
-<li><a href="#aspect">Aspect ratio</a></li></ul>
-
-<h2 id="key" name="key">Key Concepts</h2>	
-
-<p>When designing the application layout to be scalable, you must pay attention to the following key concepts:</p>
-
-<ul><li>Understand the character of the relative position and the fixed position
-
-<p>In the <strong>relative position</strong>, the size is determined in proportion to the size of the referred object. For example, if an orange rectangle occupies 30% of the green rectangle, and the green rectangle is expanded, the orange rectangle is expanded accordingly. However, if the scaling value is changed and the green rectangle is not scaled, the orange rectangle remains unchanged too.</p>
-
-<p class="figure">Figure: Relative position</p> 
-<p align="center"> <img alt="Relative position" src="../../images/scale_relative.png" /> </p> 
- 
-<p>In the <strong>fixed position</strong>, the size is determined by a value set for the object. For example, the orange rectangle set to the size of 10. If the green rectangle is expanded, the orange rectangle does not change. However, if the scaling value is, for example, doubled, the size of the orange rectangle grows to 20.</p>
- 
-<p class="figure">Figure: Fixed position</p> 
-<p align="center"> <img alt="Fixed position" src="../../images/scale_fixed.png" /> </p>  </li>
-
-<li>Use the relative position
-<p>If you set the object size as a percentage, the ratio remains fixed regardless of the changes in the screen size or resolution. If you want the object size changed in proportion of the window size, use the relative position.</p>
-
-<p class="figure">Figure: Scaling relative position</p> 
-<p align="center"> <img alt="Scaling relative position" src="../../images/scale_relative_scaled.png" /> </p>  </li> 
-
-<li>Multiply the scaling value, if you use the fixed size
-<p>If you use the EDC file to set up the layout, you can set the scale in the <span style="font-family: Courier New,Courier,monospace">part</span> element:</p>
-<pre class="prettyprint">
-parts 
-{
-&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;box&quot;; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>If you set the fixed size in C code, you can use the <span style="font-family: Courier New,Courier,monospace">ELM_SCALE_SIZE</span> macro:</p>
-<pre class="prettyprint">evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));</pre>
-
-<p>For more information see <a href="multiple_screens_n.htm#apply">Applying the Base Scale</a>.</p></li>
-
-<li>Do not fill the width or height out with a fixed size only
-<p>If you fill the entire height out with a fixed size only and it is scaled, the end result can be larger than the screen size. </p>
- 
-<p class="figure">Figure: Height filled with a fixed size</p> 
-<p align="center"> <img alt="Height filled with a fixed size" src="../../images/scale_fixed_height.png" /> </p> 
-
-<p>If you set a partial width or height with a fixed size and leave the remaining area flexible, the layout does not expand outside the screen.</p> 
- 
-<p class="figure">Figure: Height with a flexible area</p> 
-<p align="center"> <img alt="Height with a flexible area" src="../../images/scale_flexible_height.png" /> </p> </li></ul>
-
-
-
-<h2 id="elementary" name="elementary">Scalability Using Elementary UI Components</h2>
-
-<p>The Tizen platform provides a UI component toolkit library, called Elementary, that includes an extensive set of UI components. You can use elementary UI components to compose your application user interface (UI). While creating the UI, you can set specific properties for the UI components to control the scalable behavior of the UI. Before you try to create a scalable UI using elementary UI components, make sure you understand the following core concepts on how scalability works with elementary UI components.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Elementary library provides 3 groups of APIs:
-	 <ul><li>Infrastructure: to control the behavior of elementary.</li>
-	 <li>Container: UI components that can contain other UI components.</li>
-	 <li>UI components: elementary UI components, such as buttons, lists, and check and radio boxes.</li></ul></td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<h3>Using Containers for Effective Layouts</h3>
-
-<p>The Elementary library provides several containers to display UI components in an effective layout. The containers have no visual identity of their own.</p>
-
-<ul><li>Box
-
-<p>The box container makes a layout where child UI components are stacked in either horizontal or vertical direction. The box size is the sum of its child UI components&#39; size:</p>
-<ul><li>A vertical box calculates its height as the sum of its children&#39;s height and its width as the width of the widest child.</li>
-<li>A horizontal box calculates its width as the sum of its children&#39;s width and its height as the height of the tallest child.</li></ul>
-
-<p class="figure">Figure: Box layout</p> 
-<p align="center"> <img alt="Box layout" src="../../images/scale_box.png" /> </p> 
- 
-<p>The box-based linear layout is the best solution to ensure a minimum size for the child UI components in any device or any orientation.</p></li>
-
-<li>Grid
-
-<p>The grid container makes a layout where child UI components set their position and size relative to the container position and size. You can define the virtual width and height of the grid (by default: 100 x 100). You then packs the child UI components into the grid while setting their position and size based on the virtual size of the grid.</p>
-
-<p class="figure">Figure: Grid layout</p> 
-<p align="center"> <img alt="Grid layout" src="../../images/scale_grid.png" /> </p> 
- 
-<p>The grid-based relative layout can always fill the full screen in any device or any orientation. However, the size of the child UI components is changed based on the screen size.</p></li></ul>
-
-
-<h3>Using Weight and Align Properties</h3>
-
-<p>To make a layout scalable with UI components, the UI components must be packed into a container using only the weight and align properties based on their minimum size. Do not resize the UI components directly using pixels.</p>
-
-<p>The weight and align properties are associated with every elementary UI component, and they serve as hints for the container they are in. They tell the container how the UI component wants to occupy the space and pack itself with other UI components in the container.</p>
-
-<h4>Weight</h4>
-
-<p>You can set the weight property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set(x_weight, y_weight)</span> function:</p>
-
-<ul><li>Containers use the weights of the child UI components by normalizing them across all child UI components along both X and Y directions.</li>
-<li>The parameter values can be 0 or positive values (default: 0.0).
-<p>0.0 means that the container allocates a minimum size of the UI component area.</p>
-<p>1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span>) means that the container allocates all of the remaining area to the UI component.</p></li>
-<li>If the container has several UI components, it allocates the UI component area relative to the weights of other UI components.</li></ul>
-
-<p class="figure">Figure: Weight hint</p> 
-<p align="center"> <img alt="Weight hint" src="../../images/scale_weight_hint.png" /> </p> 	
- 
-<p class="figure">Figure: Weight hint across multiple child UI components</p> 
-<p align="center"> <img alt="Weight hint across multiple child UI components" src="../../images/scale_weight_hint_multiple.png" /> </p> 
-
-<h4>Align</h4>
-
-<p>You can set the align property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set(x_align, y_align)</span> function:</p>
-
-<ul><li>UI components use the alignment for their position or size along both X and Y directions.</li>
-<li>The parameter values can be from 0.0 to 1.0 or -1.0 (default: 0.5).</li>
-<li>The values define positions as follows: left is (x=0.0), right is (x=1.0), top is (y=0.0), and bottom is (y=1.0). The center is (x=0.5, y=0.5).
-<p>-1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span>) means that the UI component fills all of the allocated area.</p></li></ul>
-
-<p class="figure">Figure: Alignment hint</p> 
-<p align="center"> <img alt="Alignment hint" src="../../images/scale_align_hint.png" /> </p> 	
-
-<h2 id="edje" name="edje">Scalability Using Edje</h2>
-
-<p>The Tizen platform provides a complex graphical design and layout library called Edje, which provides an abstraction layer between the application code and the interface. You can use Edje in your Tizen applications to create visual elements and control the layout, look, and feel.</p>
-<p>Internally, Edje holds a geometry state machine and a state graph that defines, for example, what is visible, where, at what size, and with what colors. These details are described to Edje using an Edje <span style="font-family: Courier New,Courier,monospace">.edj</span> file. The file can be produced by using <span style="font-family: Courier New,Courier,monospace">Edje_cc</span> to take a text file (a <span style="font-family: Courier New,Courier,monospace">.edc</span> file) and &quot;compile&quot; an output <span style="font-family: Courier New,Courier,monospace">.edj</span> file that contains the state graph information, images, and any other needed data.</p>
-
-<p>While creating Edje, you set specific element properties to control the scalable behavior of the UI. Before creating a scalable UI using Edje, you must be familiar with the following scalability properties and part types.</p>
-
-<h3>Part</h3>
-<p>Parts are used to represent the most basic layout elements, such as a line in a border or a text on an image.</p>
-<p>The parts can have the following property:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">scale</span>: 0-1
-<p>Specifies whether the part scales its size with the scaling factor (Tizen has a scaling factor to resize the application layout and object). This property is used to scale properties, such as font size or min/max size of the part.</p>
-<p>The default value is 0 (off) and the default scaling factor is 1.0. To make a part scalable, set the property to 1 (on).</p>
-</li></ul>
-
-<h3>Description</h3>
-<p>Every part can have one or more description blocks to define the layout properties of the part.</p>
-<p>The descriptions can have the following properties:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">min</span>/<span style="font-family: Courier New,Courier,monospace">max</span>: width height
-<p>Specifies the minimum or maximum size of the part in pixels. It has no effect on the container size.</p>
-<p>When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">fixed</span>: 0-1 0-1
-<p>When the <span style="font-family: Courier New,Courier,monospace">min</span> or <span style="font-family: Courier New,Courier,monospace">max</span> property is set, this property sets a boolean value for each dimension (horizontal and vertical, respectively) that tells the application whether it must be scaled when resized.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>. To fix a part size to its min or max, set the value to 1.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">align</span>: X-axis Y-axis
-<p>When the displayed object size is smaller than its container, this property moves it along both axes using the relative position.</p>
-<p>To move the property, use x = 0.0 to move to left, x = 1.0 to move to right, y = 0.0 to move to the top, and y = 1.0 to move to the bottom. The x = 0.5, y = 0.5 value sets the object at the center of its container.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.5 0.5</span>.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">rel1</span>/<span style="font-family: Courier New,Courier,monospace">rel2</span>
-<p>Specifies the position of the left-top and bottom-right corners of the part&#39;s container.</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">relative</span>: X-axis Y-axis
-<p>Specifies the relative position of the part&#39;s container.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span> for <span style="font-family: Courier New,Courier,monospace">rel1.relative</span> and <span style="font-family: Courier New,Courier,monospace">1.0 1.0</span> for <span style="font-family: Courier New,Courier,monospace">rel2.relative</span>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">to</span>/<span style="font-family: Courier New,Courier,monospace">to_x</span>/<span style="font-family: Courier New,Courier,monospace">to_y</span>
-<p>Specified that a corner must be positioned relatively to another part&#39;s container.</p>
-<p>By default, the corners of a part are placed to the whole interface.</p></li></ul>
-
-<table>
-<caption>Table: Edje part property example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-                                                                 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;panorama.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
-                                                                 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.4;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.6;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 127 255 255;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Height: 100 pixels (when the scaling factor is 1.0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Bottom-aligned
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 127 0 255;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Image size: 720 x 180 pixels (when the scaling factor is 1.0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 720 180;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Y-axis is positioned relative to &quot;rect2&quot; part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.5 0.0; to_y: &quot;rect2&quot;;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.5 0.0; to_y: &quot;rect2&quot;;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Bottom-aligned
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;panorama.png&quot;;
-&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;}
-}</pre>	 
-</td>
- <td><p align="center"> <img alt="Part example" src="../../images/scale_example_part.png" /> </p> </td>
- </tr>
- </tbody></table>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace">aspect</span>: min max
-<p>Specifies the width to height ratio to keep when the part is resized. When both values are the same, the ratio is fixed. When they differ, the part is forced to keep the ratio between the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> properties when resized.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span>.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">aspect_preference</span>: dimension
-<p>Specifies the scope of the <span style="font-family: Courier New,Courier,monospace">aspect</span> property to a given dimension.</p>
-<p>The possible values are	<span style="font-family: Courier New,Courier,monospace">BOTH</span>, <span style="font-family: Courier New,Courier,monospace">VERTICAL</span>, <span style="font-family: Courier New,Courier,monospace">HORIZONTAL</span>, and <span style="font-family: Courier New,Courier,monospace">NONE</span>. The default is <span style="font-family: Courier New,Courier,monospace">NONE</span>.</p>
-
-<table>
-<caption>Table: Edje part property aspect example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;island.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-   
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;island.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 8/5 8/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Keep the aspect ratio based on the part width
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: HORIZONTAL;
-&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;}
-}</pre>	 
-</td>
- <td><p align="center"> <img alt="Part aspect example" src="../../images/scale_example_part_aspect.png" /> </p> </td>
- </tr>
- </tbody></table>
-</li></ul>
-
-<h3>Text</h3>
-<p>The text elements are used to display text on the screen.</p>
-<p>The texts can have the following properties:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">size</span>: font-size
-<p>Specifies the font size for the text. When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
-	
-<li><span style="font-family: Courier New,Courier,monospace">min</span>: horizontal vertical
-<p>Specifies a pair of boolean values that define whether the container can be reduced further than the text size. The property is used to prevent the container from chopping the text.</p>
-<p>When <span style="font-family: Courier New,Courier,monospace">min</span> is set horizontally or vertically, the minimum height or width of the part is decided by the text size.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">max</span>: horizontal vertical
-<p>Specifies a pair of boolean values that define whether the container can be expanded further than the text size.</p>
-<p>When <span style="font-family: Courier New,Courier,monospace">max</span> is set horizontally or vertically, the maximum height or width of the part is decided by the text size.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
-
-<table>
-<caption>Table: Edje text property example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 108 108 108 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;font: &quot;TIZEN&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 80;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Minimum height of the part container is decided by the text size
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Test properties!!&quot;;
-&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;}
-}</pre>	 
-</td>
- <td><p align="center"> <img alt="Text example" src="../../images/scale_example_text.png" /> </p> </td>
- </tr>
- </tbody></table>
-
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">fit</span>: horizontal vertical
-<p>Specifies a pair of values that define whether the text is scaled to fill its container horizontally and/or vertically.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
-
-<table>
-<caption>Table: Edje text property fit example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.1;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 108 108 108 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;font: &quot;TIZEN&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Resize text to fill the container height
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fit: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Test properties!!&quot;;
-&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;}
-}</pre>	 
-</td>
- <td><p align="center"> <img alt="Text fit example" src="../../images/scale_example_text_fit.png" /> </p> </td>
- </tr>
- </tbody></table></li></ul>
-
- 
- <h3>Image</h3>
-<p>The image elements are used to display images on the screen.</p>
-<p>The images can have the following properties:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">border</span>: left right top bottom
-<p>Specifies the border size of the image in pixels. This property sets the area of each side of the image to be displayed as a fixed size border, preventing the corners from being changed on a resize.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">border_scale</span>
-<p>Specifies whether the border scales its size according to the scaling factor.</p>
-<p>The default value is 0 (off). To make the border scalable, the value must be set to 1 (on).</p>
-
-<table>
-<caption>Table: Edje image property example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;00_button_01_normal.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.6;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.7;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;00_button_01_normal.png&quot;;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;ninepatch_image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.9;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&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;normal: &quot;00_button_01_normal.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 4 4 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border_scale: 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;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>	 
-</td>
- <td><p align="center"> <img alt="Image example" src="../../images/scale_example_image.png" /> </p> </td>
- </tr>
- </tbody></table>
-
-</li></ul>
-<h3>Image Set</h3>
-<p>The image set elements are used to display a specific image on the screen based on the container size.</p>
-<p>The image sets can have the following properties:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">name</span>: image-name
-<p>Specifies the name of the image file.</p></li>
-	
-<li><span style="font-family: Courier New,Courier,monospace">size</span>: minw minh maxw maxh
-<p>Specifies the minimum and maximum size that causes a specified image to be selected and shown.</p>
-<p>The image set is used to control resource quality when the image part is scaled to multiple devices. According to the size of the part&#39;s container, an appropriate image is loaded.</p>
-
-<table>
-<caption>Table: Edje image set property example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&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;image: &quot;pig.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 640 800 1200 1500;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&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;image: &quot;monkey.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 400 500 639 799;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&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;image: &quot;cat.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 240 300 399 499;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&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;image: &quot;mouse.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 80 100 239 299;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&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;image: &quot;snail.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 79 99;
-&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;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.45;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.5;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.75;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&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;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&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;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&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;}
-}</pre>	
-</td>
- <td><p align="center"> <img alt="Image set example" src="../../images/scale_example_image_set.png" /> </p> </td>
- </tr>
- </tbody></table> 
-</li></ul>
-
-<h3>Part Types</h3>
-<p>You can use fixed and flexible parts:</p>
-
-<ul><li>Fixed parts
-
-<ul><li>Fixed parts have a minimum size (at least width or height).</li>
-<li>When the part <span style="font-family: Courier New,Courier,monospace">scale</span> property is set to 1 (on), the scaling factor has an effect on the minimum size.</li>
-<li>Fixed parts are used when the parts must keep a fixed size in any device or any orientation.</li></ul></li>
-<li>Flexible parts
-<ul><li>Flexible parts resize according to the container size and other fixed parts&#39; size.</li>
-<li>Flexible parts are used when the parts can be resized in any device or any orientation.</li></ul></li></ul>
-
-<p class="figure">Figure: Fixed and flexible parts</p> 
-<p align="center"> <img alt="Fixed and flexible parts" src="../../images/scale_fixed_flexible.png" /> </p> 
-
-
-<h2 id="aspect" name="aspect">Aspect Ratio</h2>
-
-<p>In Tizen, the application generally fills out the screen. However, sometimes you want the application to be shown in a specific aspect ratio, regardless of the screen size.</p>
-<p>As images are scaled in different devices, they are resized based on the container size. The images have specific properties that define the area to be shown when resized.</p>
-
-<p>For example, the following table illustrates what happens to the parts marked with yellow rectangles in the following figures, when scaling properties are applied.</p>
-  
-<p class="figure">Figure: Original image [1920x1280 (8:5)]</p> 
-<p align="center"> <img alt="Original image [1920x1280 (8:5)]" src="../../images/scale_original_image.png" /> </p> 
-
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To set the required aspect ratio, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span> function or the <span style="font-family: Courier New,Courier,monospace">aspect_preference</span> attribute in the EDC.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-<table>
-<caption>Table: Image resizing effects with a specific aspect ratio</caption>
-<col width="40%" />
-<tbody>
-<tr>
- <th rowspan="2">Aspect</th>
- <th colspan="2">Container area</th>
-</tr>
-<tr>
- <th>720x384 (15:8)</th>
- <th>720x640 (9:8)</th>
-</tr>
- <tr>
- <td>HORIZONTAL
-<p>Resizing based on the container width while keeping the image aspect ratio.</p>
-<p>Extra height goes outside the image area and is clipped.</p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_1.png" /></p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_2.png" /></p></td>
- </tr>
- <tr>
- <td>VERTICAL
-<p>Resizing based on the container height while keeping the image aspect ratio.</p> 
-<p>Extra width goes outside the image area and is clipped.</p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_3.png" /></p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_4.png" /></p></td>
- </tr>
- <tr>
- <td>BOTH
-<p>Resizing based on the container area while keeping the image aspect ratio.</p>
-<p>No extra width or height goes outside the image area, so the entire image is always shown.</p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_5.png" /></p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_6.png" /></p></td>
- </tr>
- <tr>
- <td>NONE
-<p>Resizing to fill the available area while keeping the image aspect ratio.</p> 
-<p>Extra width or height goes outside the image area and is clipped.</p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_7.png" /></p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_8.png" /></p></td>
- </tr> 
- </tbody></table>
-
-<h3>Setting the Image Aspect Ratio</h3>
-<p>In case of an image object, you can set its aspect ratio with additional APIs:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span>
-<p>If the function is set to <span style="font-family: Courier New,Courier,monospace">TRUE</span>, the image resizes to fill the entire area while keeping its aspect ratio. It lets the extra width or height go outside of the area (same result as with the aspect NONE in the above table).</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">elm_image_aspect_fixed_set()</span>
-
-<p>If the function is set to <span style="font-family: Courier New,Courier,monospace">FALSE</span>, the image resizes to fill the entire area without keeping its original aspect ratio. The image can be distorted to fit the area.</p>
-<table>
-<caption>Table: Image resizing without keeping the aspect ratio</caption>
-<tbody>
-<tr>
- <th colspan="2">Container area</th>
-</tr>
-<tr>
- <th>720x384 (15:8)</th>
- <th>720x640 (9:8)</th>
-</tr>
- <tr>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_9.png" /></p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_10.png" /></p></td>
- </tr>
- </tbody></table>
-</li></ul>
-
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/theme_n.htm b/org.tizen.ui.guides/html/native/efl/theme_n.htm
deleted file mode 100755
index 00ac2ce..0000000
--- a/org.tizen.ui.guides/html/native/efl/theme_n.htm
+++ /dev/null
@@ -1,72 +0,0 @@
-<!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>Themes: Specifying the UI Look and Feel</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Themes: Specifying the UI Look and Feel</h1> 
-
-   
-<p>Tizen provides powerful theme features you can use to easily change your applications&#39; UI look and feel. A theme is a collection of visual identities, which provide the graphical appearance of applications. A theme comprises a layout, shapes, fonts, and colors for the UI components.</p> 
-
-<p>The Tizen platform provides a default theme for UI components implemented based on the Tizen UX design concept (AIR – light and simple). To change the current look and feel, you can replace the default theme with a customized theme package.</p>
-
-<p>The Edje library used by Elementary provides themes. You can also use Edje to create your own objects to modify the application appearance with a unique GUI. The UI components are customizable so that each application can have its own customized theme to overlay the default theme.</p>
-
-<p>Edje supports separation between layout and logic. While it is possible to implement both GUI and logic in the C code, a loose coupling of GUI and logic is more convenient when you want to revise, add, or delete application UI components. In EFL, the GUI is handled by Edje, while application logic is handled in the C code.</p>
-
-<p>Edje was designed as a theme layer for moving the look, feel, and animation of objects into separate data files loaded at runtime. Using a plain text <a href="edje_intro_n.htm">EDC file</a> you can create your application&#39;s layout without writing a single line of code. EFL can even change the theme of application at runtime without restarting the application.</p>
-
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<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/native/efl/threads_n.htm b/org.tizen.ui.guides/html/native/efl/threads_n.htm
deleted file mode 100755
index 0e837b2..0000000
--- a/org.tizen.ui.guides/html/native/efl/threads_n.htm
+++ /dev/null
@@ -1,507 +0,0 @@
-<!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>Using Threads</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#Thread_safety">Thread Safety</a></li>
-			<li><a href="#Costs">Thread Pools</a></li> 
-			<li><a href="#Functions">Thread Management with Ecore</a></li>
-			<li><a href="#low_level">Low-level Functions</a></li>
-			<li><a href="#Examples">Thread Use Examples</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">	
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Using Threads</h1> 
-
-<p>Threads are concurrent execution environments that are lighter than full-blown processes because they share some operating system resources. Threads make it possible to do several things at the same time while using less resources and offering simpler synchronization and data exchange compared to processes.</p>
-
-<p>If you move a blocking operation to a separate thread, it cannot block the event loop and keeps the user interface reactive. Blocking the event loop and using long-running callbacks means the application cannot update its graphical user interface.</p>
-
-<p>While threads can be useful, they are not always the best choice:</p>
-
-<ul><li>The first rule to using threads is to avoid them as much as possible, as there are often better tools and approaches. For example, to do network transfers, use <span style="font-family: Courier New,Courier,monospace;">Ecore_Con</span> that integrates with the event loop to use a function based on callbacks. Being able to use such a function means that specific support work has been done in libraries. In some cases, using a function and libraries is impossible, and in those situations threads are required.</li>
-<li>Use threads in CPU-intensive tasks and disk IOs. For example, a thread is the appropriate way to apply filters to an image or to a video without blocking the interface.</li>
-<li>Use threads to take advantage of multiple available CPU cores, if the workload can be split into several units of work and spread across the cores. A typical example for an image processing application on a quad-core CPU is to process 4 images at once, each on 1 thread. For such tasks, the thread pool helps with the creation and scheduling of the threads, handling all the grunt work.</li></ul>
-
-<h2 id="Thread_safety" name="Thread_safety">Thread Safety</h2>
-
-<p>If several strings have to work on the same resources, conflicts can happen as the threads are run in parallel. For example, if thread A modifies several values while thread B is reading them, it is likely that some of the values read by B are outdated. Similar issues can happen if both threads are modifying data concurrently.</p>
-
-<p>These kinds of conflicts are called race-conditions: depending on which thread is faster, the output changes and can be incorrect. Avoiding such issues is called thread safety. Thread safety involves critical sections, which are blocks of code that operate on shared resources and must not be accessed concurrently by another thread.</p>
-
-<p>The usual solution for ensuring exclusive access to shared resources is mutual exclusion: only 1 thread can operate on the data at any given time. Mutual exclusion is often implemented through locks. Before attempting to operate on a shared resource, the thread waits until it can lock something called a mutex (stands for mutual exclusion), then operates on the resource, and unlocks the mutex. Operating systems guarantee that only 1 thread can lock a mutex at a given time: this ensures that only 1 thread operates on the shared resource at one time.</p>
-
-<p>For more information on thread safety, see <a href="#low_level">Low-level Functions</a>.</p>
-
-<h2 id="Costs" name="Costs">Thread Pools</h2>
-
-<p>Threads are operating system resources: while much lighter than processes, they still have a cost. Moreover, spawning a thousand threads means that each of them only gets 1/1000th of the total CPU time: each thread is progressed slowly and, in the worst case, the system wastes all of its time switching between threads without doing any actual work.</p>
-
-<p>Thread pools solve this problem. In thread pools, upto a maximum number of threads are created on-demand and used to execute tasks. When the tasks are finished, they are kept alive but sleeping. This avoids the cost of creating and destroying them.</p>
-
-<p>In EFL, the thread pool is controlled by a <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter, which defines the maximum number of threads running at the same time. Another control feature is the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback that runs from the main loop thread after a task has completed and is typically used to extract the data from the finished task and make it available to the main loop.</p>
-
-<p>To manage the maximum number of threads:</p>
-
-<ul>
-<li>To retrieve the current value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function.
-</li>
-
-<li>To set the value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function. The value has a maximum of 16 times the CPU count.
-</li>
-
-<li>To reset the maximum number of threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.
-
-</li>
-
-<li>To get the number of available threads in the pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function. The function returns the current maximum number of threads minus the number of running threads. The number can be a negative value, if the maximum number of threads has been lowered.
-</li>
-</ul>
-
-<p>The following figures illustrate the thread pool. The first figure shows the occupancy of a hypothetical thread pool. There are several tasks, of which 4 are running. The  <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter of the pool is 4, and the other tasks are waiting. There is no thread with its <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback currently called.</p>
-
-<p class="figure">Figure: Thread pool, step 1</p> 
-<p align="center"><img alt="Thread pool, step 1" src="../../images/thread_pool_lifecycle_1.png" /></p> 
-
-<p>When a task, applying the sepia filter on image1, finishes, the corresponding <span style="font-family: Courier New,Courier,monospace;">func_end()</span> function is invoked from the main loop.</p>
-
-<p class="figure">Figure: Thread pool, step 2</p> 
-<p align="center"><img alt="Thread pool, step 2" src="../../images/thread_pool_lifecycle_2.png" /></p> 
-
-<p>With the task done, one of the threads from the pool becomes available, and another thread, adding the reverberation effect on audio3, can run in it.</p>
-
-<p class="figure">Figure: Thread pool, step 3</p> 
-<p align="center"><img alt="Thread pool, step 3" src="../../images/thread_pool_lifecycle_3.png" /></p> 
-
-<p>As long as there are tasks to be done, the thread pool continues the same way, running tasks in its threads whenever a thread is available.</p>
-
-
-<h2 id="Functions" name="Functions">Thread Management with Ecore</h2>
-
-<p>Ecore offers a simplified API for managing threads in EFL applications. The Ecore API applies to a typical scenario where the main thread creates another thread, which in turn sends data back to the main thread or calls GUI-related functions. GUI-related functions are not thread-safe.</p>
-
-<h3>Creating Threads with Ecore</h3>
-
-<p>The threads created with Ecore are by default integrated with the thread pool and offer simple callback-based ways to interact with the main loop. New threads are created as needed until the maximum capacity of the thread pool is reached.</p>
-
-<ul><li>To return values to the main thread:
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to send intermediate feedback from the thread to the main loop.</p></li>
-
-<li>To return only the final value to the main thread:
-<p>To create and run a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function. It runs a function inside a thread from the thread pool and takes care of all the low-level work. It returns the corresponding thread handler or <span style="font-family: Courier New,Courier,monospace;">NULL</span> on failure.</p>
-
-<p>The most common way to return data from one thread to the main thread is to put a pointer to it in the data. When the thread is aborted or finishes, either <span style="font-family: Courier New,Courier,monospace;">func_cancel()</span> or <span style="font-family: Courier New,Courier,monospace;">func_end()</span> is called from the main loop. The functions are running in the simpler context of a single thread running at once and therefore avoid race-conditions.</p>
-
-<p>The data pointer approach can only be used when the data is shared between the one thread and the main thread only. However, this does not prevent you from using the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback to merge the results into a single data structure. For example, you can add all the values computed by the threads to an <span style="font-family: Courier New,Courier,monospace;">Eina_List</span>, as all the operations on the list happen from a single thread and therefore one after the other and not concurrently.</p></li></ul>
-
-
-<h3>Running Callbacks from the Main Loop</h3>
-
-<p>If you are performing operations in another thread and want to update a progress bar, the update operation must be done from the main thread. The simplest way is to use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span> function, which takes a function and some data as parameters and instructs the main loop to execute the given function with the given data.</p>
-
-<p>Depending on the kind of thread the function is called from, the process differs:</p>
-<ul>
-<li>If the function is called from a thread that is not the main one, the function sends a message to the main loop and returns quickly. The message is processed in order, similarly to others.</li>
-
-<li>If the function is called from the main thread, the function is called immediately as if it were a direct call.</li>
-</ul>
-
-<p>If you want to wait until the callback is called and returns, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function, which is similar but synchronous. Since it is synchronous, it can also return the value returned by the callback.</p>
-
-<h2 id="low_level" name="low_level">Low-level Functions</h2>
-
-<p>Eina offers low-level functions that are portable across the operating system, such as locks, conditions, semaphores, barriers, and spinlocks. The functions follow closely the logic of pthreads.</p>
-
-<p>While these functions are useful, they are building blocks and not usually useful in EFL applications considering the higher-level functions that are available in Ecore.</p>
-
-<p>For an introduction to threads and pthreads in particular, see:</p>
-
-<ul>
-<li><a href="http://www.ibm.com/developerworks/library/l-pthred/index.html" target="_blank">Basic use of pthreads</a> (IBM developerWorks)</li>
-<li><a href="https://computing.llnl.gov/tutorials/pthreads/" target="_blank">POSIX Threads Programming</a> (Lawrence Livermore National Laboratory)</li>
-<li><a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/pthread.h.html" target="_blank">POSIX 2003 specification</a> (opengroup)</li>
-</ul>
-
-<p>If you are already familiar with threads, see the standard pthreads documentation and the Eina reference documentation, or the following function lists. Remember that the Eina functions map very closely to the pthreads functions.</p>
-
-<table>
-<caption>Locks (mutual exclusions)</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_new()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_new()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_destroy()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_lock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_trylock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take_try()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_unlock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_release()</span></td> 
-</tr>
-<tr> 
-<td>none (prints debug information on the lock)</td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_debug()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<table>
-<caption>Conditions (notifications when condition objects change)</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_init()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_new()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_destroy </span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_wait()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_wait()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_timedwait()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_timedwait()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_broadcast()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_broadcast()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_signal()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_signal()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<table>
-<caption>RWLocks (Read-write locks, for multiple-readers/single-writer scenarios)</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_init()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_new() </span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_destroy()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_rwlock_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_rdlock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_take_read()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_wrlock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_take_write()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_unlock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_release()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<table>
-<caption>TLS (Thread-Local Storage)</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_create()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_new()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_delete()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_getspecific()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_get()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_setspecific</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_set()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<table>
-<caption>Semaphores (access restrictions for a set of resources)</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">sem_init()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_new()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">sem_destroy()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">sem_wait()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_lock()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">sem_post()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_release()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<table>
-<caption>Barriers</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_init()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_new()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_destroy()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_wait()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_wait()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<h2 id="Examples" name="Examples">Thread Use Examples</h2>
-
-<p>The following examples display a window with a label. An auxiliary thread semi-regularly changes the text of the label. If you want to display a regular animation, use the Ecore animators described in the <a href="main_loop_n.htm">Main Loop</a> guide.</p>
-
-<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function:</p>
-
-<ol>
-
-<li>Implement the GUI function that sets the text of a label and can be called from the main thread.
-
-<pre class="prettyprint">
-static void
-_set_label_text(void *data, Ecore_Thread *thread __UNUSED__, void *msgdata)
-{
-&nbsp;&nbsp;&nbsp;char buf[64];
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Tick %d&quot;, (int)(uintptr_t)msgdata);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
-}
-</pre>
-</li>
-<li>Send the feedback from the other thread using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function. The following function does nothing besides sending the feedback and sleeping.
-
-<pre class="prettyprint">
-static void
-_long_function(void *data __UNUSED__, Ecore_Thread *thread)
-{
-&nbsp;&nbsp;&nbsp;int iteration;
-&nbsp;&nbsp;&nbsp;// Change the text roughly every 1 second. This is only an example; if you
-&nbsp;&nbsp;&nbsp;// want regular animations, use Ecore animators!
-&nbsp;&nbsp;&nbsp;for (iteration = 0; ; iteration++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Since you are running from another thread, you need to take special
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// care and instead send data to the main thread and have it run the
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// feedback function given when creating the thread
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, (void*)(uintptr_t)iteration);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Sleep for roughly one second
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-
-<li>Create an end function that is called when the thread exits. In this example, the end function is called only right before the application exits. However, if the blocking function is more complex, it can trigger the end function.
-
-<pre class="prettyprint">
-static void
-_end_func(void *data, Ecore_Thread *thread __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Ticks over&quot;);
-}
-</pre>
-</li>
-
-<li>Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to start the thread:
-
-<pre class="prettyprint">
-ecore_thread_feedback_run(_long_function, _set_label_text, _end_func, NULL, ad, EINA_FALSE);
-</pre>
-</li>
-</ol>
-
-<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function:</p>
-
-<ol>
-<li>Implement the GUI function that sets the text of a label and can be called from the main thread. The function receives data as a structure and alternatively displays &quot;Tick d&quot; or &quot;Tock d&quot;.
-
-<pre class="prettyprint">
-struct thd 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad;
-&nbsp;&nbsp;&nbsp;Eina_Bool tick_not_tock;
-&nbsp;&nbsp;&nbsp;int iteration;
-};
-static void *
-_set_label_text_tick_tock(void *data)
-{
-&nbsp;&nbsp;&nbsp;char buf[64];
-&nbsp;&nbsp;&nbsp;struct thd *thd = data;
-&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s %d&quot;, (thd-&gt;tick_not_tock ? &quot;Tick&quot; : &quot;Tock&quot;), thd-&gt;iteration);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(thd-&gt;ad-&gt;label, buf);
-
-&nbsp;&nbsp;&nbsp;return NULL;
-}
-</pre>
-</li>
-
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function call the GUI function. Differentiate between the ticks and the tocks:
-
-<pre class="prettyprint">
-static void
-_long_function_tick_tock(void *data, Ecore_Thread *thread __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;struct thd *thd = malloc(sizeof(struct thd));
-&nbsp;&nbsp;&nbsp;thd-&gt;ad = data;
-&nbsp;&nbsp;&nbsp;for (thd-&gt;iteration = 0; ; (thd-&gt;iteration)++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_TRUE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;free(thd);
-}
-</pre>
-</li>
-
-<li>Start the thread through the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function:
-
-<pre class="prettyprint">
-ecore_thread_run(_long_function_tick_tock, _end_func, NULL, ad);
-</pre>
-</li>
-</ol>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/tools_n.htm b/org.tizen.ui.guides/html/native/efl/tools_n.htm
deleted file mode 100755
index eba7d01..0000000
--- a/org.tizen.ui.guides/html/native/efl/tools_n.htm
+++ /dev/null
@@ -1,243 +0,0 @@
-<!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>Tools</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">             
-			<li><a href="#string">String</a></li>
-			<li><a href="#memory">Memory Pool</a></li>
-			<li><a href="#safety">Safety Checks</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-		<li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-		<li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-   
-   <h1>Tools</h1>
- <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding applications:</p>
-
-<ul>
-<li>Convert fast: conversion from, for example, strings to integers and double</li>
-<li>Counter: measures the number of calls and their time</li>
-<li>Error: error identifiers</li>
-<li>File: file list and path split</li>
-<li>Lazy allocator: lazy allocator</li>
-<li>Log: full-featured logging system</li>
-<li>Magic: provides runtime type checking</li>
-<li><a href="#memory">Memory Pool</a>: abstraction for various memory allocators</li>
-<li>Module lists: loads and shares modules using the <span style="font-family: Courier New,Courier,monospace;">Eina_Module</span> standard</li>
-<li>Rectangle: rectangle structure and standard manipulation methods</li>
-<li><a href="#safety">Safety Checks</a>: extra checks that report unexpected conditions and can be disabled during compilation</li>
-<li><a href="#string">String</a>: set of functions that manage C strings</li>
-</ul>    
-  
-<h2 id="string" name="string">String</h2>
-
-<p>When creating applications, you always need to manipulate strings. Eina provides a very useful API for manipulating C strings:</p>
-
-<ul><li>
-
-<p>The most common string manipulation is the &quot;split&quot;. If you have a string, such as &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;, and you want to print it in an easily readable format, you can use the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function to split the string using a delimiter. The first parameter is the string to split, the second determines where to split the string, and the final parameter is the maximum number of strings to split the string into. If you set a number less than 1, it splits the string as many times as possible.</p>
-<p>The function returns a newly-allocated NULL-terminated array of strings, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>, if it fails to allocate the array. Always remember to free the memory allocated by the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function.</p>
-
-<pre class="prettyprint">
-char *nicks = &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;;
-char **result_arr;
-int i;
-
-// Splitting the string with &#39;:&#39; delimiter
-result_arr = eina_str_split(names, &quot;:&quot;, 0);
-// Printing the result
-for (i = 0; result_arr[i]; i++)
-&nbsp;&nbsp;&nbsp;printf(&quot;Nick : %s\n&quot;, result_arr[i]);
-// Remember to free memory
-free(arr[0]);
-free(arr);
-</pre></li>
-
-
-<li><p>To change the string to lowercase or uppercase, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_tolower()</span> and <span style="font-family: Courier New,Courier,monospace;">eina_str_toupper()</span> functions. They change the case for all characters of the given string. These functions modify the original strings.</p>
-
-<pre class="prettyprint">
-char *str;
-// Initialize the string
-str = malloc(sizeof(char) * 4);
-strcpy(str, &quot;bsd&quot;);
-// Change the string to uppercase
-eina_str_toupper((char **)&amp;str);
-printf(&quot;%s\n&quot;, str);
-// Change the string to lowercase
-eina_str_tolower(&amp;str);
-printf(&quot;%s\n&quot;, str);
-// Free the allocated memory
-free(str);
-</pre></li>
-<li><p>If you need to &quot;join&quot; 2 strings of known length, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_join()</span> function. The fist parameter is the buffer to store the result, the second is the size of the buffer, the third is the separator between the 2 strings, and the 2 final parameters are the stings to be joined.</p>
-
-<pre class="prettyprint">
-char *part1 = &quot;Tizen powered by&quot;;
-char *part2 = &quot;Enlightenment Foundation Libraries&quot;;
-char *res;
-size_t size;
-// Calculate the string size + 1 for the delimiter
-size = strlen(part1) + strlen(part2) + 1
-// Allocate memory for the result
-res = malloc(sizeof(char) * size);
-// Join the strings
-eina_str_join(res, size, &#39; &#39;, part1, part2);
-printf(&quot;%s\n&quot;, res);
-// Free the allocated memory
-free(res):
-</pre></li>
-<li><p>To check whether a string starts or ends with another string, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_prefix()</span> or <span style="font-family: Courier New,Courier,monospace;">eina_str_has_suffix()</span> function. You can also check whether a string has a particular extension with the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_extension()</span> function.</p>
-
-<p>These functions return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the given string contains the specified prefix, suffix, or extension, and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if it does not.</p>
-
-<pre class="prettyprint">
-char *names = &quot;Carsten;Cedric;Tom;Chidambar;Boris;Philippe&quot;
-if (eina_str_has_prefix(names, &quot;Carsten&quot;))
-&nbsp;&nbsp;&nbsp;printf(&quot;String starts with &#39;Carsten&#39;&quot;)
-if (eina_str_has_suffix(names, &quot;Philippe&quot;))
-&nbsp;&nbsp;&nbsp;printf(&quot;String ends with &#39;Philippe&#39;&quot;)
-if (eina_str_has_extension(names, &quot;philippe&quot;))
-&nbsp;&nbsp;&nbsp;printf(&quot;String has extension &#39;philippe&#39;&quot;)
-else
-&nbsp;&nbsp;&nbsp;printf(&quot;String does not have extension &quot;philippe)
-</pre></li></ul>
-
-<h2 id="memory" name="memory">Memory Pool</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">Eina_Mempool</span> tool provides memory pool functionality. With a memory pool, you can preallocate fixed-size memory spaces for easy memory management.</p>
-
-<p>The following mempools are available:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">buddy</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">chained_pool</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ememoa_fixed and ememoa_unknown</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">fixed_bitmap</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">pass_through</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">one_big</span></li>
-</ul>
-
-<h2 id="safety" name="safety">Safety Checks</h2>
-
-<p>Eina safety checks are a set of macros that can be used to check for parameters or values that must never occur. The concept is similar to the <span style="font-family: Courier New,Courier,monospace;">assert()</span> function, but safety checks log the parameter or value and return instead of aborting your program.</p>
-
-<p>The following safety checks are available:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN(exp)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL(exp, val)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO(exp, label)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN(exp)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN_VAL(exp, val)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_GOTO(exp, label)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN(exp)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN_VAL(exp, val)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_GOTO(exp, label)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_ARG_NONNULL(...)</span></li>
-</ul>
-
-<p>To return if a variable is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro calls return if the given parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
-
-<pre class="prettyprint">
-Eina_Bool myfunction(char *param) 
-{
-&nbsp;&nbsp;&nbsp;// If my param is NULL, EINA_SAFETY_ON_NULL_RETURN calls &quot;return&quot;
-&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN(param);
-
-&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-} 
-</pre>
-
-<p>To return a specific value, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL()</span> function instead of the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro returns the given value.</p>
-
-<pre class="prettyprint">
-Eina_Bool void myfunction(char *param)
-{
-&nbsp;&nbsp;&nbsp;// If the parameter is NULL, return EINA_FALSE;
-&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN_VAL(param, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>To call another function if a parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function. This macro works similarly to the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function except that it calls goto with the given function instead of return.</p>
-
-<pre class="prettyprint">
-static void isnullcb()
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;The parameter is NULL\n&quot;);
-}
-Eina_Bool void myfunction(char *param)
-{
-&nbsp;&nbsp;&nbsp;// If the parameter is NULL we return EINA_FALSE;
-&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_GOTO(param, isnullcb);
-&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>Eina also provides macros that check whether a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span> or <span style="font-family: Courier New,Courier,monospace;">FALSE</span>. For example, to call return if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN()</span> function. To call &quot;goto&quot; in a given function if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function.</p>
-
-  
-  <table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table> 
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/touch_gesture_n.htm b/org.tizen.ui.guides/html/native/efl/touch_gesture_n.htm
deleted file mode 100755
index e295894..0000000
--- a/org.tizen.ui.guides/html/native/efl/touch_gesture_n.htm
+++ /dev/null
@@ -1,265 +0,0 @@
-<!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>Handling Component Touch Gestures</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-	
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#init">Initializing Touch Gestures</a></li>
-			<li><a href="#touch">Implementing Touch Gestures</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Handling Component Touch Gestures</h1>
-
-  
-<p>This tutorial demonstrates how you can implement different types of gestures provided by the EFL library and instructions on how to use them.</p>
-
- <h2 id="init" name="init">Initializing Touch Gestures</h2>
-
-<p>The EFL library provides a wide range of touch gestures, such as tap, double tap, triple tap, long tap, momentum, line, zoom and rotate, which can be used by the application to build a dynamic user interface interaction which is simple to use as well as intuitive.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component which acts as a view manager for the window and provides the window title functionality. After this it creates a gesture view by using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function and adds it to naviframe.</p>
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it, *tabbar_it;
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-&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_conformant_set(ad-&gt;win, EINA_TRUE);
-&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;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;layout);
-&nbsp;&nbsp;&nbsp;// Calendar View
-&nbsp;&nbsp;&nbsp;create_main_view(ad);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;nf, &quot;Calendar&quot;, NULL, NULL, ad-&gt;calendar, NULL);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;elm.swallow.content&quot;, ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view</span> function creates the application layout by arranging the labels and rectangles by using recursive composition of the box layout:</p>
-<pre class="prettyprint">
-static void
-create_main_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Box
-&nbsp;&nbsp;&nbsp;ad-&gt;box = elm_box_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(ad-&gt;box, 0, 5 * elm_config_scale_get());
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;box);
-&nbsp;&nbsp;&nbsp;// Event Rect
-&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(ad-&gt;box));
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
-&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;gl = create_gesture_layer(ad);
-
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;box, ad-&gt;rect);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
-}
-</pre>
-
-<p>A gesture layer is added to the rectangle object. This layer is able to receive the gesture event:</p>
-<pre class="prettyprint">
-static Evas_Object *
-create_gesture_layer(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *g = elm_gesture_layer_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_gesture_layer_attach(g, ad-&gt;rect);
-}
-</pre>
-
-<p>The following figure illustrates the Gesture Detector.</p>
-
-  <p class="figure">Figure: Gesture Detector screen</p> 
-  <p align="center"><img alt="Gesture Detector screen" src="../../images/gesture_view2.png" /></p> 
-
- <h2 id="touch" name="touch">Implementing Touch Gestures</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_attach()</span> is the function to which a gesture layer for a particular object is attached.</p>
-<p>A gesture can have 4 different states:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_MOVE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span></li></ul>
-<p>Every gesture starts with the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span> state and finishes with either the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span> or <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span> state depending on whether the gesture is completed or aborted on that object. </p>
-<p>If an application only needs to track a finished gesture, it can listen for the finished state only. For a more complete control of the gesture, an application can listen for all state changes for that particular gesture.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function is used for registering state change callback for a particular gesture.</p>
-<p>For more information about the gestures, see the gesture documentation.</p>
-
-<p>To detect touch gestures:</p>
-<ul>
-<li><p>The following example adds callbacks for listening to the tap gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, n_finger_tap_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, n_finger_tap_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, n_finger_tap_abort, ad);
-</pre></li>
-<li><p>The following example adds callbacks for listening to the double tap gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, dbl_click_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, dbl_click_move, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, dbl_click_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, dbl_click_abort, ad);
-</pre></li>
-
-<li><p>The following example adds callbacks for listening to the triple tap gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, triple_click_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, triple_click_move, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, triple_click_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, triple_click_abort, ad);
-</pre></li>
-<li><p>The following example adds callbacks for listening to the long tap gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, momentum_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, momentum_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, momentum_move, ad);
-</pre></li>
-
-<li><p>The following example adds callbacks for listening to the momentum gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, momentum_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, momentum_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, momentum_move, ad);
-</pre></li>
-
-<li><p>The following example adds callbacks for listening to the line gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, line_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, line_move, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, line_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, line_abort, ad);
-</pre></li>
- 
-<li><p>The following examples add callbacks for listening to the flick gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, flick_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, flick_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, flick_abort, ad);
-</pre></li>
-
-<li><p>The following examples add callbacks for listening to the zoom gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, zoom_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, zoom_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, zoom_abort, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, zoom_move, ad);
-</pre></li>
- 
-<li><p>The following example adds callbacks for listening to the rotate gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, rotate_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, rotate_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, rotate_abort, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, rotate_move, ad);
-</pre></li>
-
-<li><p>The following example adds a callback for getting the tap gesture finishing notification:</p>
-<pre class="prettyprint">
-static Evas_Event_Flags
-n_finger_tap_end(void *data, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *) event_info;
-&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
-}
-</pre></li>
-</ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>	
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
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
deleted file mode 100755
index 4137e3d..0000000
--- a/org.tizen.ui.guides/html/native/efl/ui_components_mn.htm
+++ /dev/null
@@ -1,1092 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Mobile UI Components</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Mobile UI Components</h1> 
-  
-<p>The EFL Elementary is a set of fast, finger-friendly, scalable, and themeable UI component libraries. The number of supported UI components is around 80, including both containers and non-containers. Originally, the Elementary was developed as part of the Window Manager development on Desktop devices. For the mobile profile, Tizen reused the proper UI components and created new ones, and then enhanced and adjusted all of them for Tizen native applications.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p>The UI components are mobile-friendly: for example, the Naviframe component supports view-managing for multiple views, the Entry component supports many modes (such as Password, Single/Multi-line, Edit/No-Edit), the Index component supports fast access to another group of UI items, and the Toolbar component shows a menu when an item is selected.</p>
-<p>The mobile UI components were designed to allow the user to interact with touch screen-equipped mobile devices. Therefore, when developing mobile applications, you can easily use them through the mobile-related infrastructure in company with view managing and when reacting to touch events and the user finger size.</p>
-  
-  <table border="1"> 
-   <caption>
-     Table: Available UI components
-   </caption> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr> 	
-	<tr> 
-     <td><a href="components_mn.htm#background">Background</a></td> 
-     <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#button">Button</a></td> 
-     <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#check">Check</a></td> 
-     <td>The check component toggles the value of a Boolean between true and false.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#colorselector">Colorselector</a></td> 
-     <td>The colorselector component provides a color selection solution to the user. It has different modes available, each of them showing a different configuration of the color selection.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#ctxpopup">Ctxpopup</a></td> 
-     <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#datetime">Datetime</a></td> 
-     <td>The datetime component can display and input date and time values.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#entry">Entry</a></td> 
-     <td>The entry component is a box to which the user can enter text.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#flip">Flip</a></td> 
-     <td>The flip component can hold two Evas objects and let the user flip between these objects using a variety of predefined animations.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#gengrid">Gengrid</a></td> 
-     <td>The gengrid component displays objects on a grid layout and renders only the visible objects.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#genlist">Genlist</a></td> 
-     <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
-    </tr>
-		<tr> 
-     <td><a href="components_mn.htm#glview">GLView</a></td> 
-     <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#icon">Icon</a></td> 
-     <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#image">Image</a></td> 
-     <td>The image component can load and display an image from a file or from memory.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#index">Index</a></td> 
-     <td>The index component provides an index for fast access to another group of UI items.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#label">Label</a></td> 
-     <td>The label component displays text with simple HTML-like markup.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#list">List</a></td> 
-     <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#map">Map</a></td> 
-     <td>The map component can display a geographic map. The default map data is provided by the OpenStreetMap project (<a target="_blank" href="http://www.openstreetmap.org/">http://www.openstreetmap.org/</a>).</td>
-    </tr>
-		<tr> 
-     <td><a href="components_mn.htm#notify">Notify</a></td> 
-     <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#panel">Panel</a></td> 
-     <td>The panel component is an animated object that can contain child objects. It can be expanded or contracted by clicking on the button on its edge.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#photo">Photo</a></td> 
-     <td>The photo component can be used to display a photo, such as a contact image. If no photo is set, the UI component displays a person icon to show that it is a photo placeholder.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#photocam">Photocam</a></td> 
-     <td>The photocam component is designed to display high-resolution photos taken with a digital camera. It allows you to zoom photos, load photos fast, and fit photos. It is optimized for JPEG images and has a low memory footprint.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#plug">Plug</a></td> 
-     <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#popup">Popup</a></td> 
-     <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#progressbar">Progressbar</a></td> 
-     <td>The progressbar component can be used to display the progress status of a given job.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#radio">Radio</a></td> 
-     <td>The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#segmentcontrol">Segmentcontrol</a></td> 
-     <td>The segmentcontrol component is a horizontal control made of multiple segment items, each segment item functioning similar to discrete two state button.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#slider">Slider</a></td> 
-     <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#spinner">Spinner</a></td> 
-     <td>The spinner component enables the user to increase or decrease a numeric value by using arrow buttons.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#toolbar_component">Toolbar</a></td> 
-     <td>The toolbar component is a scrollable list of items. It can also show a menu when an item is selected. Only one item can be selected at a time.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#tooltip">Tooltip</a></td> 
-     <td>The tooltip component is a smart object used to show tips or information about a parent object when the mouse hovers over the parent object.</td>
-    </tr>
-	<tr> 
-     <td><a href="elementary_transit_effect_tutorial_n.htm">Transit</a></td> 
-     <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_mn.htm#win">Win</a></td> 
-     <td>The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
-    </tr>
-   </tbody> 
-  </table> 
- 
-<h2 id="styles" name="styles">Mobile UI Component Styles</h2> 
-  
-<p>EFL can separate the GUI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
-
-<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component. For more detailed information, see the <a href="theme_n.htm">Themes</a>.</p>
-
-<table>
-<caption>Table: Button styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/button/base/default</td>
- <td><img src="../../images/button_default.png" /> </td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/anchor</td>
- <td><img src="../../images/button_anchor.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/bottom</td>
- <td><img src="../../images/bottom.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>This style is used widely at the bottom of the screen.</td>
- </tr>
-  <tr>
- <td>elm/button/base/circle</td>
- <td><img src="../../images/button_circle.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/dropdown</td>
- <td><img src="../../images/button_dropdown.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/hoversel_horizontal/default</td>
- <td><img src="../../images/button_hoversel.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/hoversel_horizontal_entry/default</td>
- <td><img src="../../images/button_hoversel_entry.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/hoversel_vertical/default</td>
- <td><img src="../../images/button_hover_v.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/hoversel_vertical_entry/default</td>
- <td><img src="../../images/button_hover_v_entry.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/icon_reorder</td>
- <td><img src="../../images/button_recorder.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/naviframe/drawers</td>
- <td><img src="../../images/button_drawers.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/naviframe/title_cancel</td>
- <td><img src="../../images/button_title_cancel.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/naviframe/title_done</td>
- <td><img src="../../images/button_title_done.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/option</td>
- <td><img src="../../images/button_option.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Check styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>elm/check/base/default</td>
- <td><img src="../../images/check_default.png" /></td>
- </tr>
- <tr>
- <td>elm/check/base/favorite</td>
- <td><img src="../../images/check_favorite.png" /></td>
- </tr>
-  <tr>
- <td>elm/check/base/on&amp;off</td>
- <td><img src="../../images/check_on_off.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Colorselector styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/colorselector/item/color/colorplane</td>
- <td><img src="../../images/color_colorplane.png" /></td>
- <td>Use the following command: <span style="font-family: Courier New,Courier,monospace">elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);</span></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Progressbar styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/progressbar_default.png" /></td>
- </tr>
- <tr>
- <td>wheel</td>
- <td><img src="../../images/progressbar_wheel.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Radio styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/radio_default.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: List styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/styleguide_genlist_def.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Multi Button Entry styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/multibuttonentry/base/default</td>
- <td><img src="../../images/multi_button_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>, guide</td>
- <td>The guide text part is used when there is no item in the Multi Button Entry. It is removed automatically when an item is appended in the Multi Button Entry.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Toolbar styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/toolbar/base/default</td>
- <td><img src="../../images/toolbar_default.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/toolbar/base/navigationbar</td>
- <td><img src="../../images/toolbar_navigation.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/toolbar/base/tabbar_with_title</td>
- <td><img src="../../images/toolbar_tabbar.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/toolbar/item/default</td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td>This style is for the toolbar&#39;s item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
- </tr>
-  <tr>
- <td>elm/toolbar/item/navigationbar</td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td>This style is for the toolbar&#39;s item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Flipselector styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/flipsel_default.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<p>The style of the genlist&#39;s item is not set by external APIs. Check the guide of Genlist to check how to use the item class to set the item&#39;s style.</p>
-<table>
-<caption>Table: Genlist styles</caption>
-
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/styleguide_genlist_def.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
- <tr>
- <td>default_style</td>
- <td><img src="../../images/styleguide_genlist_defstyle.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>double_label</td>
- <td><img src="../../images/styleguide_genlist_doublelabel.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.sub</span>: for the sub text.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>end_icon</td>
- <td><img src="../../images/styleguide_genlist_end.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>full</td>
- <td><img src="../../images/styleguide_genlist_full.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>The swallow part is the full size of the item. There is no padding in the item.</td>
- </tr>
-  <tr>
- <td>group_index</td>
- <td><img src="../../images/styleguide_genlist_group.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>one_icon</td>
- <td><img src="../../images/styleguide_genlist_oneicon.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>message</td>
- <td><img src="../../images/styleguide_genlist_message.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the text on the top. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.title.1</span>: for the text in the middle.</p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.title.2</span>: for the text on the bottom.</p></td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<p>The style of the gengrid&#39;s item is not set by external APIs. For more information on using the item class to set the item&#39;s style, see the guide of gengrid.</p>
-<table>
-<caption>Table: Gengrid styles</caption>
-
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/gengrid_default.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
-</tr>
- <tr>
- <td>album-preview</td>
- <td><img src="../../images/gengrid_album_pre.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
-</tr>
- <tr>
- <td>block</td>
- <td><img src="../../images/gengrid_block.png" /></td>
- <td></td>
- <td></td>
- <td>This style is used to show an empty area.</td>
-</tr>
- <tr>
- <td>group_index</td>
- <td><img src="../../images/gengrid_grp_index.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
-</tr>
- <tr>
- <td>default_grid</td>
- <td><img src="../../images/gengrid_def.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
-<tr>
- <td>default_gridtext2</td>
- <td><img src="../../images/gengrid_def_gridtext2.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- <tr>
- <td>default_gridtext</td>
- <td><img src="../../images/gengrid_def_gridtext.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- <tr>
- <td>default_style</td>
- <td><img src="../../images/gengrid_def_style.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Segmentation Control styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/segm_control_default.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Index styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/index_default.png" /></td>
- <td>This style is for supporting the vertical style.</td>
- </tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/index_default02.png" /></td>
- <td>This style is for supporting the horizontal style. To set a horizontal index, use the <span style="font-family: Courier New,Courier,monospace">elm_index_horizontal_set</span>.</td>
- </tr>
-  <tr>
- <td>pagecontrol</td>
- <td><img src="../../images/index_pagecontrol.png" /></td>
- <td>This style is used for the &quot;page control&quot; layout. For more information, refer to the Core Control sample application.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Contextual Popup (Ctxpopup) styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/ctxpopup_default.png" /></td>
- <td></td>
- </tr>
- <tr>
- <td>dropdown/list</td>
- <td><img src="../../images/ctxpopup_dropdown.png" /></td>
- <td>The size of the item and the ctxpopup follow the size of the screen.</td>
- </tr>
-  <tr>
- <td>dropdown/label</td>
- <td><img src="../../images/ctxpopup_dropdown_label.png" /></td>
- <td>The size of the item and the ctxpopup follow the maximum length of the item.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Icon styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>apps</td>
- <td><img src="../../images/icon_apps.png" /></td>
- </tr>
- <tr>
- <td>arrow_down</td>
- <td><img src="../../images/icon_arrowdown.png" /></td>
- </tr>
-  <tr>
- <td>arrow_left</td>
- <td><img src="../../images/icon_arrowleft.png" /></td>
- </tr>
-  <tr>
- <td>arrow_right</td>
- <td><img src="../../images/icon_arrowright.png" /></td>
- </tr>
-  <tr>
- <td>arrow_up</td>
- <td><img src="../../images/icon_arrowup.png" /></td>
- </tr>
-  <tr>
- <td>chat</td>
- <td><img src="../../images/icon_chat.png" /></td>
- </tr>
- <tr>
- <td>clock</td>
- <td><img src="../../images/icon_clock.png" /></td>
- </tr>
- <tr>
- <td>close</td>
- <td><img src="../../images/icon_close.png" /></td>
- </tr>
- <tr>
- <td>delete</td>
- <td><img src="../../images/icon_delete.png" /></td>
- </tr>
- <tr>
- <td>edit</td>
- <td><img src="../../images/icon_edit.png" /></td>
- </tr>
- <tr>
- <td>file</td>
- <td><img src="../../images/icon_file.png" /></td>
- </tr>
- <tr>
- <td>home</td>
- <td><img src="../../images/icon_home.png" /></td>
- </tr>
- <tr>
- <td>media_player/forward</td>
- <td><img src="../../images/icon_forward.png" /></td>
- </tr>
- <tr>
- <td>media_player/info</td>
- <td><img src="../../images/icon_info.png" /></td>
- </tr>
- <tr>
- <td>media_player/next</td>
- <td><img src="../../images/icon_next.png" /></td>
- </tr>
- <tr>
- <td>media_player/pause</td>
- <td><img src="../../images/icon_pause.png" /></td>
- </tr>
- <tr>
- <td>media_player/play</td>
- <td><img src="../../images/icon_play.png" /></td>
- </tr>
- <tr>
- <td>media_player/prev</td>
- <td><img src="../../images/icon_prev.png" /></td>
- </tr>
- <tr>
- <td>media_player/rewind</td>
- <td><img src="../../images/icon_rewind.png" /></td>
- </tr>
- <tr>
- <td>media_player/stop</td>
- <td><img src="../../images/icon_stop.png" /></td>
- </tr>
- <tr>
- <td>menu/apps</td>
- <td><img src="../../images/icon_menu_apps.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_down</td>
- <td><img src="../../images/icon_menu_arrdown.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_left</td>
- <td><img src="../../images/icon_menu_arrleft.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_right</td>
- <td><img src="../../images/icon_menu_arrright.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_up</td>
- <td><img src="../../images/icon_menu_arrup.png" /></td>
- </tr>
- <tr>
- <td>menu/chat</td>
- <td><img src="../../images/icon_menu_chat.png" /></td>
- </tr>
- <tr>
- <td>menu/clock</td>
- <td><img src="../../images/icon_menu_clock.png" /></td>
- </tr>
- <tr>
- <td>menu/close</td>
- <td><img src="../../images/icon_menu_close.png" /></td>
- </tr>
- <tr>
- <td>menu/delete</td>
- <td><img src="../../images/icon_menu_delete.png" /></td>
- </tr>
- <tr>
- <td>menu/edit</td>
- <td><img src="../../images/icon_menu_edit.png" /></td>
- </tr>
- <tr>
- <td>menu/file</td>
- <td><img src="../../images/icon_menu_file.png" /></td>
- </tr>
- <tr>
- <td>menu/folder</td>
- <td><img src="../../images/icon_menu_folder.png" /></td>
- </tr>
- <tr>
- <td>menu/home</td>
- <td><img src="../../images/icon_menu_home.png" /></td>
- </tr>
- <tr>
- <td>menu/refresh</td>
- <td><img src="../../images/icon_menu_refresh.png" /></td>
- </tr>
- <tr>
- <td>no_photo</td>
- <td><img src="../../images/icon_menu_nophoto.png" /></td>
- </tr>
- <tr>
- <td>photo/no_photo</td>
- <td><img src="../../images/icon_photo_nophoto.png" /></td>
- </tr>
- <tr>
- <td>refresh</td>
- <td><img src="../../images/icon_refresh.png" /></td>
- </tr>
- <tr>
- <td>toolbar/apps</td>
- <td><img src="../../images/icon_toolbar_apps.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_down</td>
- <td><img src="../../images/icon_toolbar_arrdown.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_left</td>
- <td><img src="../../images/icon_toolbar_arrleft.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_right</td>
- <td><img src="../../images/icon_toolbar_arrright.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_up</td>
- <td><img src="../../images/icon_toolbar_arrup.png" /></td>
- </tr>
- <tr>
- <td>toolbar/chat</td>
- <td><img src="../../images/icon_toolbar_chat.png" /></td>
- </tr>
- <tr>
- <td>toolbar/clock</td>
- <td><img src="../../images/icon_toolbar_clock.png" /></td>
- </tr>
- <tr>
- <td>toolbar/close</td>
- <td><img src="../../images/icon_toolbar_close.png" /></td>
- </tr>
- <tr>
- <td>toolbar/delete</td>
- <td><img src="../../images/icon_toolbar_delete.png" /></td>
- </tr>
- <tr>
- <td>toolbar/edit</td>
- <td><img src="../../images/icon_toolbar_edit.png" /></td>
- </tr>
- <tr>
- <td>toolbar/file</td>
- <td><img src="../../images/icon_toolbar_file.png" /></td>
- </tr>
- <tr>
- <td>toolbar/folder</td>
- <td><img src="../../images/icon_toolbar_folder.png" /></td>
- </tr>
- <tr>
- <td>toolbar/home</td>
- <td><img src="../../images/icon_home.png" /></td>
- </tr>
- <tr>
- <td>toolbar/more_menu</td>
- <td><img src="../../images/icon_toolbar_moremenu.png" /></td>
- </tr>
- <tr>
- <td>toolbar/refresh</td>
- <td><img src="../../images/icon_toolbar_refresh.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Entry styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/entry_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
- <td></td>
- <td>The guide text is automatically erased when the main text is entered.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Datetime styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>date_layout</td>
- <td><img src="../../images/datetime_date_layout.png" /></td>
- </tr>
- <tr>
- <td>time_layout</td>
- <td><img src="../../images/datetime_time_layout.png" /></td>
- </tr>
-  <tr>
- <td>time_layout_24hr</td>
- <td><img src="../../images/datetime_time_24h.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Panel (drawer) styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/panel_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>For more information on the drawer, see the [UI Sample] Core Control guide.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Slider styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Swallow part</th>
-
-</tr>
- <tr>
- <td>horizontal/default</td>
- <td><img src="../../images/slider_hor.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- </tr>
- <tr>
- <td>horizontal/center_point</td>
- <td><img src="../../images/slider_hor_center.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- </tr>
-  <tr>
- <td>vertical/center_point</td>
- <td><img src="../../images/slider_ver_center.png" /></td>
- <td></td>
- </tr>
-  <tr>
- <td>vertical/default</td>
- <td><img src="../../images/slider_ver.png" /></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Popup styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/popup_default.png" /></td>
- </tr>
- <tr>
- <td>toast</td>
- <td><img src="../../images/popup_toast.png" /></td>
- </tr>
- </tbody>
-</table>
- 
- <table>
-<caption>Table: Spinner styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>horizontal</td>
- <td><img src="../../images/spinner_hor.png" /></td>
- </tr>
-  <tr>
- <td>vertical</td>
- <td><img src="../../images/spinner_ver.png" /></td>
- </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>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.ui.guides/html/native/efl/ui_components_n.htm b/org.tizen.ui.guides/html/native/efl/ui_components_n.htm
deleted file mode 100755
index c1a5317..0000000
--- a/org.tizen.ui.guides/html/native/efl/ui_components_n.htm
+++ /dev/null
@@ -1,694 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Components: Handling Elementary UI Component Libraries</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-				<li><a href="#components">Using UI Components</a></li>
-				<li><a href="#first">Getting Started with the Elementary Library</a></li>
-				<li><a href="#objects">Elementary Objects</a></li>
-				<li><a href="#callbacks">Elementary Callbacks</a></li>
-				<li><a href="#config">Managing Elementary Profiles</a></li>
-				<li><a href="#options">Configuring Elementary Options</a></li>
-				<li><a href="#scalability">Scaling UI Components</a></li>
-		</ul>		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>UI Components: Handling Elementary UI Component Libraries</h1> 
-
-<p>Before writing an application, you should already have an answer to the following question: What is an application? An application is a process launched by the user. Every application has at least one window for presenting its content. Users can interact with the content through events. Different sources of events can modify the life cycle of the application. The application may receive data from a network connection, and it may also receive touch and key events. From the computer&#39;s point of view, an application is a collection of code that reacts to events and displays content on the screen. Elementary bridges this divide between the user and the code.</p>
-
-<p>Elementary provides a variety of pre-built UI components, such as layout objects and components, that allow you to build rich graphical user interfaces for your applications. Every Elementary application has at least one window for presenting its content. The window provides the area in which to display the content and where the Evas canvas is placed.</p>
-
-<p>There are three main groups of objects provided by Elementary:</p>
-
-<ul>
-    <li>UI components: These are the components with which you build your application UI.</li>
-    <li>Containers: These are the containers that hold the components.</li>
-    <li>Infrastructure: These are the modules that deal with Elementary as a whole.</li>
-</ul>
-
-  <h2 id="components" name="components">Using UI Components</h2>
-  
-<p>The Elementary library is a simple toolkit. It provides several UI components than can be used to compose the user interface of your application. UI components allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. UI components will often generate signals that can be caught in the application when the user interacts with the UI components. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common UI components.</p>
-
-  <p class="figure">Figure: Elementary</p>
-<p align="center"><img alt="Elementary" src="../../images/elementary.png" /></p>
-
-
-<h2 id="first" name="first">Getting Started with the Elementary Library</h2>
-
-
-<p>Elementary UI components are built in a hierarchical fashion. The idea is to factorize as much code as possible between UI components that behave in a similar manner to facilitate the creation of new UI components. The Elementary UI components inherit a lot of their code from the container UI components and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). You can use the container and layout functions on the Elementary UI components, as well as the Elementary object functions, such as <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span>, <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_get()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_unset()</span>.</p>
-
-<p>To use the Elementary library:</p>
-
-<ol><li>Initialize the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function.</li>
-<li>Start the Elementary main loop with the <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function.
-<p>The function does not return, instead, it constantly loops and runs the event and the processing tasks.</p></li>
-<li>Add Elementary UI components in the main loop.
-<p>Generally, an Elementary UI component can be added with the <span style="font-family: Courier New,Courier,monospace">elm_&lt;UI component name&gt;_add()</span> function, which returns an Evas object (<span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>). The Evas object is passed to the functions that are used to configure the UI component.</p></li>
-<li>Stop the main loop and return to the <span style="font-family: Courier New,Courier,monospace">main()</span> function with the <span style="font-family: Courier New,Courier,monospace">elm_exit()</span> function.</li>
-<li>When your application terminates, shut down the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function.
-<p>The function frees the Elementary objects that were allocated in the main loop, so you do not need to separately deallocate them.</p></li></ol>
-
-
-<p>The following code snippet shows the <span style="font-family: Courier New,Courier,monospace">main()</span> function of a minimal Elementary application:</p>
-
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
-&nbsp;&nbsp;&nbsp;elm_run();
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}</pre>
-
-
-<h2 id="objects" name="objects">Elementary Objects</h2>
-
-<p>All objects created using Elementary are of the <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> type. This means that both Evas and Elementary functions can be used on an Elementary object. However, use Elementary functions on Elementary objects only when you do not know which API to use.</p>
-
-<p>Since an Elementary object can take up a lot of memory, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid component, and to save memory. Using the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type, an Elementary UI component can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> instance is bigger than expected, but can still help in saving memory.</p>
-
-<p>For more information, see <a href="evas_objects_n.htm">Evas Objects</a>.</p>
-
-<h2 id="callbacks" name="callbacks">Elementary Callbacks</h2>
-
-<p>Several callbacks can be registered to handle Elementary object events:</p>
-
-<ul>
-<li>Evas event callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function to add a callback for input events (key up, key down, mouse wheel) on an Evas object. In case of an Elementary object, the callback is registered on the underlying Evas object without considering the Elementary object infrastructure (no event propagation).</p>
-</li>
-
-<li>Evas smart callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function to add a callback for a smart event emitted by an Elementary object. Smart callbacks can only be registered on smart objects, and the &quot;smart event&quot; to register must be implemented by the corresponding smart object. Otherwise, the callback does nothing. The callback does not apply to input events (keyboard or mouse).</p>
-</li>
-
-<li>Edje signal callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> function to add a callback for a signal coming from an Edje object (a theme object).</p>
-</li>
-
-<li>Elementary signal callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function to add a callback for a signal coming from an Elementary UI component&#39;s theme. The callback does not apply to input events (keyboard or mouse).</p>
-</li>
-
-<li>Elementary event callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_event_callback_add()</span> function to add a callback for an input event (keyboard or mouse) coming from an Elementary object. In contrast to the Evas event callback, the Elementary event callback takes the hierarchy of the object into account: the event can be propagated to the parents of the object, and the parents can process the event.</p>
-</li>
-</ul>
-
-<p>For more information about events related to Elementary objects, see <a href="event_handling_n.htm">Event Handling</a>. For more information about Evas objects and smart objects, see <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>.</p>
-
- <h2 id="config" name="config">Managing Elementary Profiles</h2> 
-
-<p>An Elementary profile is a set of preconfigured options that affects the entire look and feel of an application. The options linked to a specific profile form an Elementary configuration, which can be used to store the desired set of options for use in multiple sessions. Once loaded, the Elementary profile configures all the options and sets the look and feel of your Elementary application.</p>
-
-<p>To manage Elementary profiles:</p>
-<ul>
-<li>List the existing profiles:
-<pre class="prettyprint">
-Eina_List *list = elm_config_profile_list_get();
-</pre>
-</li>
-<li>Set a particular profile:
-<pre class="prettyprint">
-elm_config_profile_set(&quot;myprofile&quot;);
-</pre>
-</li>
-<li>Get the current profile:
-<pre class="prettyprint">
-char *profile = elm_config_profile_get();
-</pre>
-</li>
-<li>To save the current option values as an Elementary configuration for later use, use the <span style="font-family: Courier New,Courier,monospace">Elementary Configuration Save</span> function:
-</li>
-<li>To reload the Elementary configuration saved for the current profile:
-<pre class="prettyprint">
-elm_config_reload();
-</pre>
-</li>
-</ul>
-
-<h2 id="options" name="options">Configuring Elementary Options</h2>
-
-<p>You can set the following options in the Elementary configuration. In addition, you can <a href="#customizing_themes">customize themes</a> and <a href="#config_focus">manage focus</a>.</p>
-<ul>
-
-<li>To scale UI components:
-<p>You can configure <a href="ui_components_n.htm#scalability">UI component scaling</a> in terms of both interactive and readable areas.</p>
-<ul>
-<li>Set the global scaling factor (for example, setting it to 2.0 doubles the size of all scalable UI components):
-<pre class="prettyprint">
-elm_config_scale_set(2.0);
-</pre>
-</li>
-
-<li>Set the finger size:
-<pre class="prettyprint">
-elm_config_finger_size_set(1.5);
-</pre>
-</li>
-</ul>
-</li>
-
-<li>To manage caches:
-<ul>
-<li>Enable the globally configured cache flush, and set the flush interval (in this example, to 60 seconds):
-<pre class="prettyprint">
-elm_config_cache_flush_enabled_set(EINA_TRUE);
-elm_config_cache_flush_interval_set(60);
-</pre>
-</li>
-
-<li>Configure the font and image cache sizes (to 500 and 5 000 000 bytes, respectively):
-<pre class="prettyprint">
-elm_config_cache_font_cache_size_set(500);
-elm_config_cache_image_cache_size_set(5000000);
-</pre>
-</li>
-
-<li>Set the Edje collection and Edje file cache sizes:
-<pre class="prettyprint">
-elm_config_cache_edje_file_cache_size_set(500);
-elm_config_cache_edje_collection_cache_size_set(500);
-</pre>
-</li>
-</ul>
-</li>
-
-
-<li>To configure the gesture layer:
-<p>You can set the duration of the long tap and double tap events on the gesture layer objects. The following example sets the duration to 500 ms.</p>
-
-<pre class="prettyprint">
-elm_config_glayer_long_tap_start_timeout_set(0.5);
-elm_config_glayer_double_tap_timeout_set(0.5);
-</pre>
-</li>
-<li>To manage scrolling:
-<ul>
-<li>Make the scroller bounce when it reaches its viewport&#39;s edge during scrolling by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_enabled_set()</span> function:
-<pre class="prettyprint">
-elm_config_scroll_bounce_enabled_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>Control the inertia of the bounce animation by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_friction_set()</span> function:
-<pre class="prettyprint">
-elm_config_scroll_bounce_friction_set(0.5);
-</pre>
-<p>You can also set the friction for a page scroll, include animations, and zoom animations.</p>
-</li>
-
-<li>Set the scroller to be draggable by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_thumbscroll_enabled_set()</span> function. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.
-
-<p>The following example sets the scroller to be draggable, defines that the number of pixels one must travel while dragging the scroller view to actually trigger  scrolling is 20 pixels.</p>
-<pre class="prettyprint">
-elm_config_scroll_thumbscroll_enabled_set(EINA_TRUE);
-elm_config_scroll_thumbscroll_threshold_set(20);
-</pre>
-</li>
-</ul>
-</li>
-
-<li>To configure long press events:
-<p>Get the current timeout before a long press event is retrieved, and modify it. The following example increases the timeout by 1 second.</p>
-<pre class="prettyprint">
-double lp_timeout = elm_config_longpress_timeout_get();
-elm_config_longpress_timeout_set(lp_timeout + 1.0);
-</pre>
-</li>
-
-<li>To configure tooltips:
-<p>Set the duration after which a tooltip is shown. The following example sets the delay to 2 seconds.</p>
-
-<pre class="prettyprint">
-elm_config_tooltip_delay_set(2.0);
-</pre>
-</li>
-
-<li>To configure the password show last feature:
-<p>The password show last feature enables the user to view the last input entered for a few seconds before it is masked.</p>
-
-<ul>
-<li>Enable the password show last feature:
-<pre class="prettyprint">
-elm_config_password_show_last_set(EINA_TRUE);
-</pre>
-</li>
-<li>Set the visibility timeout (how many seconds the input is visible): 
-<pre class="prettyprint">
-elm_config_password_show_last_timeout_set(5.0);
-</pre>
-</li>
-</ul>
-</li>
-<li>To set the Elementary engine:
-<p>You can define the rendering engine that Elementary uses to draw the windows. The following rendering engines are supported:</p>
-
-<ul>
-    <li>&quot;software_x11&quot;</li>
-    <li>&quot;fb&quot;</li>
-    <li>&quot;directfb&quot;</li>
-    <li>&quot;software_16_x11&quot;</li>
-    <li>&quot;software_8_x11&quot;</li>
-    <li>&quot;xrender_x11&quot;</li>
-    <li>&quot;opengl_x11&quot;</li>
-    <li>&quot;software_gdi&quot;</li>
-    <li>&quot;software_16_wince_gdi&quot;</li>
-    <li>&quot;sdl&quot;</li>
-    <li>&quot;software_16_sdl&quot;</li>
-    <li>&quot;opengl_sdl&quot;</li>
-    <li>&quot;buffer&quot;</li>
-    <li>&quot;ews&quot;</li>
-    <li>&quot;opengl_cocoa&quot;</li>
-    <li>&quot;psl1ght&quot;</li>
-</ul>
-
-<pre class="prettyprint">
-elm_config_engine_set(&quot;opengl_x11&quot;);
-</pre>
-</li>
-
-<li>To activate the access mode: 
-<p>Set the access mode as active, so that information about an Elementary object is read when the object receives an <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event:</p>
-
-</li>
-
-<li>To configure the selection mode: 
-<p>Set the selection mode so that the selection is cleared when the entry component is unfocused:</p>
-<pre class="prettyprint">
-elm_config_selection_unfocused_clear_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To enable mirroring: 
-<p>Elementary allows UI mirroring both on a single object and on the entire UI. If mirroring is enabled, an Elementary UI component displays as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the UI component are mirrored. Text is not mirrored.</p>
-
-<pre class="prettyprint">
-elm_config_mirrored_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To set the frame rate:
-<p>Define the frames per second (FPS) value for the <span style="font-family: Courier New,Courier,monospace">ecore_animator_frametime</span> and <span style="font-family: Courier New,Courier,monospace">edje_frametime</span> calculations. This example sets the FPS 60.</p>
-
-<pre class="prettyprint">
-elm_config_fps_set(60.0);
-</pre>
-</li>
-</ul>
-
-<h3 id="customizing_themes" name="customizing_themes">Customizing Themes</h3>
-
-<p>Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component in an application. You can change the theme using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable. You can also modify the theme globally with the <span style="font-family: Courier New,Courier,monospace">elementary_config</span> utility.</p>
-
-<p>For <a href="component_custom_n.htm">custom styles</a>, use extensions. Extensions allow you to write styles for specific UI components. Add a new extension to the list of Elementary themes with the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function, and apply the new style to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. Once set, the extension replaces the default theme of the UI component.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, you must know how the UI component is themed. If something is missing from the extension, it can break the UI component&#39;s behavior.</td>
-        </tr>
-    </tbody>
-</table>
-
-<p>To modify Elementary themes, you can also use overlays. An overlay can replace the look of all UI components by overriding the default styles. As with extensions, you must write the correct overlay theme for a UI component. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. To add or remove an overlay, use the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> and <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> functions.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">With overlays, you can replace the default view and affect every UI component. This is very similar to setting the theme for the whole application, and probably clashes with end user options. Using overlays also runs the risk of non-matching styles across the application. Unless you have a very good reason to use them, avoid overlays.</td>
-        </tr>
-    </tbody>
-</table>
-
-<h3 id="config_focus" name="config_focus">Managing Focus</h3>
-
-<p>When an Elementary object has the focus, input events are directly passed to that object in the application window. The focused object can also change its decoration to show the user where the focus is. In an Elementary application, only one object can have the focus at a time.</p>
-
-<p>To set the focus to a new Elementary object and take the focus away from the previous focused object, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function. You can make an object unfocusable with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_allow_set()</span> function.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Only visible objects can have the focus.</td>
-        </tr>
-    </tbody>
-</table>
-
-<p>Elementary supports focus chains that allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the UI components are added to the code. It is also possible to define custom focus chains, when needed.</p>
-
-<p>For more information on focus, see <a href="component_focus_n.htm">Component Focus</a>.</p>
-
-<p>To manage the focus:</p>
-
-<ul>
-<li>To define a custom focus chain, create an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, and add the Elementary objects to it in the desired focus order. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_set()</span> function to set the final list as the custom focus chain of the parent object (in the following example, <span style="font-family: Courier New,Courier,monospace">container_object</span> is the parent object).
-
-<pre class="prettyprint">Eina_List *obj_list = NULL;
-
-list = eina_list_append(list, obj1); 
-list = eina_list_append(list, obj4);
-list = eina_list_append(list, obj2); 
-list = eina_list_append(list, obj3);
-
-elm_object_focus_custom_chain_set(container_object, list);</pre>
-</li>
-
-<li>To remove the custom focus chain and use the default focus chain instead, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_unset()</span> function.
-</li>
-
-<li>To programmatically cycle through the focus chain, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_next()</span> function.
-</li>
-
-<li>To show a highlight on the focused object:
-
-<pre class="prettyprint">
-elm_config_focus_highlight_enabled_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To activate an animation when the focus shifts from one object to another:
-
-<pre class="prettyprint">
-elm_config_focus_highlight_animate_set(EINA_TRUE);
-</pre>
-</li>
-</ul>
-
- <h2 id="scalability" name="scalability">Scaling UI Components</h2> 
-  
-<p>Elementary, through its configuration API (<span style="font-family: Courier New,Courier,monospace;">elm_config</span>), provides a way to scale UI components with two different parameters. <span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter is used when the interactive zones (clickable, editable) of the UI components need to be scaled in order to be comfortably used with a finger. <span style="font-family: Courier New,Courier,monospace;">Scale</span> parameter is responsible for scaling readable parts of a UI component (text or icons for example), so that it is more visible in the user interface.</p>
-
-<h3 id="Finger_Size" name="Finger_Size">Finger Size</h3>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter scales UI components based on the user&#39;s finger size. This is useful when using a touchscreen with a finger rather than with a stylus. The finger size parameter is in pixels and determines the minimum size of a square on the screen that is reliably hittable with a finger. This parameter scales the input and interactive areas.</p>
-
-<p>The global finger size is set with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_set()</span> function. This adjusts the size and hit area of UI components so they are easy to hit with a finger. The current value is retrieved with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_get()</span> call. The finger size is always in pixel.</p>
-
-<p>To increase the current global finger size by 20px:</p>
-
-<pre class="prettyprint">
-Evas_Coord finger_size;
-
-// Get the current finger size
-finger_size = elm_config_finger_size_get();
-
-// Add 20px to finger size parameter and set it 
-// to the global Elementary configuration
-elm_config_finger_size_set(finger_size + 20);
-</pre>
-
-<h3 id="Scale" name="Scale">Scale</h3>
-
-<p>This parameter only scales the readable areas of the UI component (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">elm_config_scale_set()</span> function is used to set the global scaling factor, that affects to all the UI components. It is also possible to use <span style="font-family: Courier New,Courier,monospace;">elm_object_scale_set()</span> to set the scaling factor on a given Elementary UI component and all its children.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The scaling factor is multiplicative, if a child already has a scale size set, it is multiplied by its parent&#39;s scale size.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example sets the global scaling factor to 2.0. Then, the scaling factor of an existing Elementary object is set to 2.0, meaning that this object appears as if it had a 4.0 scale factor, the rest of the application is displayed with a 2.0 scaling factor:</p>
-
-<pre class="prettyprint">
-Evas_Object *button;
-
-// The button object is created and configured
-
-// Set the global scale factor to 2.0
-elm_config_scale_set(2.0);
-
-// Set the scaling factor of the button component to 2.0, this component
-// appears 4 times bigger than its initial size
-elm_object_scale_set(button, 2.0);
-</pre>
-
-<h3 id="Example" name="Example">Example</h3>
-
-<p>This chapter shows the visual result of finger size and scaling factors modification.</p>
-
-<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application</p> 
-<p align="center"><img alt="elementary_config application" src="../../images/scale_1_finger_50.png" /></p> 
-
-<p>The previous picture shows the <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application that enables the user to set global scale factor and finger size parameter. As the user drags the sliders, the UI is updated, directly showing the result of the new parameter value.</p>
-
-<p>The next picture shows the behavior when the finger size parameter has been increased to 1.30. The text of the sliders and the text of the items in the toolbar are bigger.</p>
-
-<p class="figure">Figure: Scale increased (1.30)</p> 
-<p align="center"><img alt="Scale increased (1.30)" src="../../images/scale_1.3_finger_50.png" /></p> 
-
-<p>A finger size increase is showed in the image below (increase from 50px to 90 px). Now, the buttons in the toolbar are bigger, so the user can more reliably hit them with a big finger.</p>
-
-<p class="figure">Figure: Finger size increased (90px)</p> 
-<p align="center"><img alt="Finger size increased (90px)" src="../../images/scale_1_finger_90.png" /></p> 
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">It is up to the theme (Edje file) to set the parts that are scalable. This is something that needs to be taken into account when developing a new Edje theme. This can be done in EDC with the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter. For more information on how to do that, see <a href="edje_intro_n.htm">Introduction to EDC Programming</a>.</td>
-</tr>
-</tbody>
-</table> 
-
-<h3 id="Scalable_EDC_Object" name="Scalable_EDC_Object">Creating Scalable EDC Objects</h3>
-
-<h4>Scale Parameter </h4>
-
-<p>This chapter explains how to make a scalable Edje object and give hints how to write an EDC file that is scalable. The example shows a basic button that is composed of a background image part and a swallow part that can receive some content.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>To have a scalable object, set the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter to 1 on the parts you want to be scalable. Here the <span style="font-family: Courier New,Courier,monospace;">bg</span> and <span style="font-family: Courier New,Courier,monospace;">elm.swallow.content</span> parts must be scalable.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h4>Image Set</h4>
-
-<p>If your application needs to be used at different resolutions it is recommended to have 2 images for the background image <span style="font-family: Courier New,Courier,monospace;">bg.png</span>. Here the <span style="font-family: Courier New,Courier,monospace;">bg_low.png</span> is added to the application. It is used when the size of the image is under 500 px, and a <span style="font-family: Courier New,Courier,monospace;">bg_high.png</span> image is for higher resolutions. Use a set on the <span style="font-family: Courier New,Courier,monospace;">bg.png</span> image.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_low.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 200 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_high.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 201 101 5000 5000;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The image below shows three buttons with only a background part visible (the SWALLOW part is empty).</p>
-
-<p class="figure">Figure: Image set example</p> 
-<p align="center"><img alt="Image set example" src="../../images/scale.png" /></p> 
-
-<p>The first button&#39;s size is 100x50 pixels, the background image (<span style="font-family: Courier New,Courier,monospace;">bg_low.png</span>) is the same size. The second button is twice bigger than the first one (200x100 pixels). The image is scaled and it does not render well, the borders are quite blurry.</p>
-
-<p>To prevent this, the image set has a bigger image to use when the size is bigger than 200x100 pixels (<span style="font-family: Courier New,Courier,monospace;">bg_high.png</span>). The third button size is 201x101 pixels and it uses the new image, which has a better quality than the scaled image.</p>
-
-<h4>Image Borders</h4>
-
-<p>When the button is resized, the image part is also resized because it is marked as scalable. To get the image resized but to keep the image border as it is, use the <span style="font-family: Courier New,Courier,monospace;">border</span> parameter. It specifies the border size which is not resized even if the image is.</p>
-
-<p>To add a 40 pixel border on the left and right part of the <span style="font-family: Courier New,Courier,monospace;">bg</span> image and a 20 pixel border on top and bottom borders:</p>
-
-<pre class="prettyprint">
-parts 
-{
-&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.border: 40 40 20 20;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The image below shows that when resizing the button, the corners keep their initial ratio. Only the middle part of the button is resized.</p>
-
-<p class="figure">Figure: Border example</p> 
-<p align="center"><img alt="Border example" src="../../images/border.png" /></p> 
-
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
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
deleted file mode 100755
index 36d62e9..0000000
--- a/org.tizen.ui.guides/html/native/efl/ui_components_wn.htm
+++ /dev/null
@@ -1,876 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Wearable UI Components</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-	<p class="toc-title">Content</p>
-		<ul class="toc">
-				<li><a href="#styles_r">Wearable Rectangular UI Component Styles</a></li>			
-				<li><a href="#styles_c">Wearable Circular UI Component Styles</a></li>
-		</ul>
-	<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>		
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Wearable UI Components</h1> 
-  
-<p>The EFL Elementary is a set of fast, finger-friendly, scalable, and themeable UI component libraries. The number of supported UI components is around 80, including both containers and non-containers. Originally, the Elementary was developed as part of the Window Manager development on Desktop devices. For the wearable profile, Tizen reused the proper UI components and created new UI styles for rectangular and circular wearable devices, and then enhanced and adjusted all of them for Tizen native applications.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p>The UI components are wearable-friendly: for example, the Circle Datetime component extends the <span style="font-family: Courier New,Courier,monospace">elm_date_time</span> by visualizing the selected field, the Circle Genlist component provides a scrollbar with circular movement, and the Circle progress bar/scroller/slider components are adjusted to the circular design.</p>
-<p>The wearable UI components were designed to allow the user to interact with small touch screen-equipped wearable devices with rotary component parts. Therefore, when developing wearable applications, you can easily use them through the wearable-related infrastructure in company with full notification and when reacting to touch and rotary events and the user finger size.</p>  
-  
-<table border="1"> 
-   <caption>
-     Table: Available UI components
-   </caption> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr> 	
-	<tr> 
-     <td><a href="components_wn.htm#background">Background</a></td> 
-     <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#button">Button</a></td> 
-     <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#check">Check</a></td> 
-     <td>The check component toggles the value of a Boolean between true and false.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#ctxpopup">Ctxpopup</a></td> 
-     <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#datetime">Datetime</a></td> 
-     <td>The datetime component can display and input date and time values.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#entry">Entry</a></td> 
-     <td>The entry component is a box to which the user can enter text.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#genlist">Genlist</a></td> 
-     <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
-    </tr>
-		<tr> 
-     <td><a href="components_wn.htm#glview">GLView</a></td> 
-     <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#icon">Icon</a></td> 
-     <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#image">Image</a></td> 
-     <td>The image component can load and display an image from a file or from memory.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#index">Index</a></td> 
-     <td>The index component provides an index for fast access to another group of UI items.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#label">Label</a></td> 
-     <td>The label component displays text with simple HTML-like markup.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#list">List</a></td> 
-     <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
-    </tr>
-		<tr> 
-     <td><a href="components_wn.htm#notify">Notify</a></td> 
-     <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#plug">Plug</a></td> 
-     <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#popup">Popup</a></td> 
-     <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#progressbar">Progressbar</a></td> 
-     <td>The progressbar component can be used to display the progress status of a given job.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#radio">Radio</a></td> 
-     <td>The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#slider">Slider</a></td> 
-     <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
-    </tr>
-	<tr> 
-     <td><a href="elementary_transit_effect_tutorial_n.htm">Transit</a></td> 
-     <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations. The use of the transit component is documented in the Creating Animations and Effects guide.</td>
-    </tr>
-	<tr> 
-     <td><a href="components_wn.htm#win">Win</a></td> 
-     <td>The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
-    </tr>
-   </tbody> 
-  </table>   
-
-<p>The following UI components were designed for specific circular wearable devices which have rotary component parts. In a circular device, you can draw round UI components, such as a slider, progressbar, and scroller. Generally, wearable UI components provide compatibility between the rectangular and circular wearable devices. However, use circular UI components for circular wearable devices only, because they have a dependency with the round UX and rotary events. For more information on the compatibility of the UI components between rectangular and circular, see the Wearable Design Guidelines.</p>
-  
-<table border="1"> 
-   <caption>
-     Table: Available circular UI components
-   </caption> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr>
-	<tr> 
-     <td><a href="circle_components_wn.htm#datetime">Circle Datetime</a></td> 
-     <td>The circle datetime extends <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by visualizing the selected field.</td>
-    </tr> 	
-	<tr> 
-     <td><a href="circle_components_wn.htm#genlist">Circle Genlist</a></td> 
-     <td>The circle genlist provides a scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</td>
-    </tr>
-	<tr>
-     <td><a href="circle_components_wn.htm#object">Circle Object</a></td> 
-     <td>The circle object extends elementary components in a form of circular design. Sometimes a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.</td>
-    </tr>
-	<tr> 
-     <td><a href="circle_components_wn.htm#progressbar">Circle Progressbar</a></td> 
-     <td>The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.</td>
-    </tr>
-	<tr> 
-     <td><a href="circle_components_wn.htm#scroller">Circle Scroller</a></td> 
-     <td>The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar.</td>
-    </tr>
-	<tr> 
-     <td><a href="circle_components_wn.htm#slider">Circle Slider</a></td> 
-     <td>The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span>, but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in a circular design.</td>
-    </tr>
-	<tr> 
-     <td><a href="circle_components_wn.htm#surface">Circle Surface</a></td> 
-     <td>The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered.</td>
-    </tr>
-   </tbody> 
-  </table>   
-  
-<h2 id="styles_r" name="styles_r">Wearable Rectangular UI Component Styles</h2> 
-  
-<p>EFL can separate the GUI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
-
-<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component. For more detailed information, see the <a href="theme_n.htm">Themes</a>.</p> 
-
-<table>
-<caption>Table: Button styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/button_default_wn.png" /> </td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>green</td>
- <td><img src="../../images/button_green_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>orange</td>
- <td><img src="../../images/button_orange_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>red</td>
- <td><img src="../../images/button_red_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>nextdepth</td>
- <td><img src="../../images/button_next_wn.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>naviframe/title_icon</td>
- <td><img src="../../images/button_titleicon_wn.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>The icon can be set with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(btn, &quot;icon&quot;, ic)</span> function.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Check styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/check_default_wn.png" /></td>
- </tr>
- <tr>
- <td>on&amp;off</td>
- <td><img src="../../images/check_onoff_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Contextual popup (Ctxpopup) styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/contextual_wn.png" /></td>
- <td>Use the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function to add both text and an icon to the list.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Datetime styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>datepicker_layout</td>
- <td><img src="../../images/datetime_date_wn.png" /></td>
- </tr>
- <tr>
- <td>timepicker_layout</td>
- <td><img src="../../images/datetime_time_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Entry styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/entry_default_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
- <td></td>
- <td>The guide text is automatically erased when the main text is entered.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Genlist styles</caption>
-
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/genlist_def_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>group_index</td>
- <td><img src="../../images/genlist_group_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr> 
- <tr>
- <td>1text</td>
- <td><img src="../../images/genlist_1text_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>1text.1icon</td>
- <td><img src="../../images/genlist_1text1icon_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>2text</td>
- <td><img src="../../images/genlist_2text_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>2text.1</td>
- <td><img src="../../images/genlist_2text1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
- <td></td>
-  <td></td>
- </tr>
-  <tr>
- <td>1text.1icon.divider</td>
- <td><img src="../../images/genlist_1text1icondivider_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
- <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>1text.1icon.1</td>
- <td><img src="../../images/genlist_1text1icon1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-   <tr>
- <td>2text.1icon.1</td>
- <td><img src="../../images/genlist_2text1icon1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
-<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-   <tr>
- <td>multiline/1text</td>
- <td><img src="../../images/genlist_multi1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the multi-line text.</td>
- <td></td>
- <td></td>
- </tr>
-   <tr>
- <td>multiline/2text</td>
- <td><img src="../../images/genlist_multi2_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the multi-line sub text.</p></td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-
-<table>
-<caption>Table: Index styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>thumbnail</td>
- <td><img src="../../images/index_thumb_wn.png" /></td>
- </tr>
- <tr>
- <td>tab</td>
- <td><img src="../../images/index_tab_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Popup styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/popup_default_wn.png" /></td>
- </tr>
- <tr>
- <td>toast</td>
- <td><img src="../../images/popup_toast_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Progressbar styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/progressbar_default_wn.png" /></td>
- </tr>
- <tr>
- <td>pending_list</td>
- <td><img src="../../images/progressbar_pending_wn.png" /></td>
- </tr>
- <tr>
- <td>process</td>
- <td><img src="../../images/progressbar_process_wn.png" /></td>
- </tr>
- <tr>
- <td>process/groupindex</td>
- <td><img src="../../images/progressbar_group_wn.png" /></td>
- </tr> 
- </tbody>
-</table>
-
-<table>
-<caption>Table: Radio styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/radio_default_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Slider styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Swallow part</th>
-
-</tr>
- <tr>
- <td>horizontal/default</td>
- <td><img src="../../images/slider_hor_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- </tr>
- </tbody>
-</table>
-
- 
-<h2 id="styles_c" name="styles_c">Wearable Circular UI Component Styles</h2> 
-  
-<p>EFL can separate the GUI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
-
-<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component.</p> 
-
-<table>
-<caption>Table: Button styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/button_default_wn.png" /> </td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>bottom</td>
- <td><img src="../../images/button_bottom_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Check styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/check_default_o_wn.png" /></td>
- </tr>
- <tr>
- <td>small</td>
- <td><img src="../../images/check_small_o_wn.png" /></td>
- </tr>
- <tr>
- <td>on&amp;off</td>
- <td><img src="../../images/check_onoff_o_wn.png" /></td>
- </tr> 
- </tbody>
-</table>
-
-<table>
-<caption>Table: Contextual popup (Ctxpopup) styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>select_mode</td>
- <td><img src="../../images/contextual_select_o_wn.png" /></td>
- <td></td>
- </tr>
-  <tr>
- <td>select_mode/top</td>
- <td><img src="../../images/contextual_top_o_wn.png" /></td>
- <td>Pair this style with select_mode/bottom.</td>
- </tr>
-  <tr>
- <td>select_mode/bottom</td>
- <td><img src="../../images/contextual_bottom_o_wn.png" /></td>
- <td>Pair this style with select_mode/top.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Datetime styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>datepicker/circle</td>
- <td><img src="../../images/datetime_date_o_wn.png" /></td>
- </tr>
- <tr>
- <td>timepicker/circle</td>
- <td><img src="../../images/datetime_time_o_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Entry styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/entry_default_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
- <td></td>
- <td>The guide text is automatically erased when the main text is entered.</td>
- </tr>
- </tbody>
-</table>
-
-
-<table>
-<caption>Table: Genlist styles</caption>
-
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/genlist_def_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
-<tr>
- <td>title</td>
- <td><img src="../../images/genlist_title_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr> 
-  <tr>
- <td>groupindex</td>
- <td><img src="../../images/genlist_group_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr> 
- <tr>
- <td>1text</td>
- <td><img src="../../images/genlist_1text_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>1text.1icon</td>
- <td><img src="../../images/genlist_1text1icon_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>2text</td>
- <td><img src="../../images/genlist_2text_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>1text.1icon.divider</td>
- <td><img src="../../images/genlist_1text1icondivider_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
- <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>1text.1icon.1</td>
- <td><img src="../../images/genlist_1text1icon1_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-   <tr>
- <td>2text.1icon.1</td>
- <td><img src="../../images/genlist_2text1icon1_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
-<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-   <tr>
- <td>editfield</td>
- <td><img src="../../images/genlist_edit_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-
-<table>
-<caption>Table: Index styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>thumbnail</td>
- <td><img src="../../images/index_thumb_o_wn.png" /></td>
- </tr>
- <tr>
- <td>circle</td>
- <td><img src="../../images/index_circle_o_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Popup styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>circle</td>
- <td><img src="../../images/popup_circle_o_wn.png" /></td>
- </tr>
- <tr>
- <td>toast/circle</td>
- <td><img src="../../images/popup_toast_o_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Progressbar styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>process</td>
- <td><img src="../../images/progressbar_process_o_wn.png" /></td>
- </tr>
- <tr>
- <td>process/small</td>
- <td><img src="../../images/progressbar_small_o_wn.png" /></td>
- </tr> 
- </tbody>
-</table>
-
-<table>
-<caption>Table: Radio styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/radio_default_o_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Slider styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Swallow part</th>
-
-</tr>
- <tr>
- <td>horizontal/default</td>
- <td><img src="../../images/slider_hor_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- </tr>
- </tbody>
-</table>
-
-<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>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
-        </tr>
-    </tbody>
-</table> 
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/ui_containers_n.htm b/org.tizen.ui.guides/html/native/efl/ui_containers_n.htm
deleted file mode 100755
index 5db93d6..0000000
--- a/org.tizen.ui.guides/html/native/efl/ui_containers_n.htm
+++ /dev/null
@@ -1,131 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Containers: Creating Layouts Using Container UI Components</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-
-		
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>UI Containers: Creating Layouts Using Container UI Components</h1> 
-	
-<p>All applications use containers to create the layout of the UI. The EFL and Elementary support several ways to create this layout. You can use predefined layouts or animated layouts, or you can create your own layouts. It is important to note that container UI components do not have their own visual identity - only logical structures for assignment or placement of the UI components.</p>
-
-<p>When you use container components, such as naviframe, conformant, button, and box, you need to understand certain APIs related to alignment, and EDC parts for, for example, the core layout and animated layout. For more information on the containers EDC parts, see <a href="edc_positioning_n.htm">Positioning and Laying out Parts Using the EDC File</a>. The use of the container UI components only differs from the use of the UI components through their absence of a visual identity.</p>
-
-<p>Most of the time, your application has to manage multiple views. The easiest way to handle them with the EFL is to create a naviframe object. This object is a container. At first, it is used to contain the pages your application is composed of. Every Tizen application can use this top-layer object to facilitate navigation. More details can be found in <a href="naviframe_tutorial_n.htm">Creating a Naviframe for Navigation</a>.</p>
-
-<p>Another interesting object that has to be present in every application is the conformant object. Conformant is a container component that accounts for the space taken up by the indicator, virtual keyboard, and softkey windows. The conformant content will be resized and positioned based on the space available. When the virtual keyboard is displayed, the content does not change.</p>
-
-<p class="figure">Figure: Basic EFL application structure</p>
-<p align="center"><img alt="Basic EFL application structure" src="../../images/elementary_app.png" /></p>
-
-<h2 id="containers" name="containers">Container Components</h2> 
-  
- <p>The following table lists the available UI container components.</p>
- 
-   <table border="1"> 
-   <caption>
-     Table: Available container components
-   </caption> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Container name</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr> 	
-	<tr> 
-     <td><a href="containers_n.htm#box">Box</a></td>  
-     <td>One of the most simple containers in the EFL is a box.</td>
-    </tr>
-	<tr> 
-     <td><a href="containers_n.htm#conformant">Conformant</a></td> 
-     <td>A conformant is a container component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.</td>
-    </tr>
-	<tr> 
-     <td><a href="containers_n.htm#grid">Grid</a></td>  
-     <td>In a grid, objects are placed at specific positions along a fixed grid.</td>
-    </tr>
-	<tr> 
-     <td><a href="containers_n.htm#layout">Layout</a></td> 	 
-     <td>A layout is a container component that takes a standard Edje design file and wraps it very thinly in a UI component.</td>
-    </tr>
-	<tr> 
-     <td><a href="containers_n.htm#mapbuf">Mapbuf</a></td> 	 
-     <td>A mapbuf is a container component that uses an Evas map to hold a content object. This UI component is used to improve the moving and resizing performance of complex UI components.</td>
-    </tr>
-	<tr> 
-     <td><a href="containers_n.htm#naviframe">Naviframe</a></td>  
-     <td>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.</td>
-    </tr>
-	<tr> 
-     <td><a href="containers_n.htm#panes">Panes</a><br/>(in <strong>mobile applications only</strong>)</td> 	 
-     <td>A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</td>
-    </tr>
-	<tr> 
-     <td><a href="containers_n.htm#scroller">Scroller</a></td> 	 
-     <td>A scroller holds (and clips) a single object and allows you to scroll across it.</td>
-    </tr>
-	<tr> 
-     <td><a href="containers_n.htm#table">Table</a></td> 	 
-     <td>A table is like a box but with 2 dimensions.</td>
-    </tr>
-	</tbody> 
-  </table> 
-
-
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_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/native/efl/ui_scalability_n.htm b/org.tizen.ui.guides/html/native/efl/ui_scalability_n.htm
deleted file mode 100755
index 483202a..0000000
--- a/org.tizen.ui.guides/html/native/efl/ui_scalability_n.htm
+++ /dev/null
@@ -1,69 +0,0 @@
-<!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>Scaling: Handling Screen and Object Sizes</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Scaling: Handling Screen and Object Sizes</h1> 
-  
-<p>Supporting UI scalability in a user interface toolkit means that container components and UI components are scaled properly when the resolution or screen size changes. The Elementary library allows you to manipulate scaling on a per-UI-component basis using a scale factor based on the screen resolution, size, and profile configurations.</p>
-
-<p>Tizen native applications can run on different types of devices, such as wearable, phone, tablets, and TVs. Tizen also supports various resolutions (WVGA - XQXGA) with the same layouts and resources. However, remember that you must always polish your work to create an optimal application for each device.</p>
-  
-<p>The main scalability features are:</p>
-<ul>
-<li><a href="multiple_screens_n.htm">Multiple Screen Support</a> <p>Enables you to design applications for different kinds of screens.</p></li>
-<li><a href="scalability_n.htm">Scalability Support</a> <p>Enables you to design applications so that their UI can be scaled for diverse devices without problems.</p></li>
-</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/native/guides_n.htm b/org.tizen.ui.guides/html/native/guides_n.htm
deleted file mode 100755
index b98fee6..0000000
--- a/org.tizen.ui.guides/html/native/guides_n.htm
+++ /dev/null
@@ -1,78 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-	<script type="text/javascript" src="../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-	<title>Tizen Native UI Guides</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-	</div>
-		<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
-			<li><a href="../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
-			<li><a href="../../../org.tizen.native.mobile.apireference/###.html">DALi API References for Mobile Native</a></li>
-			<li><a href="../../../org.tizen.native.wearable.apireference/###.html">DALi API References for Wearable Native</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
-<font size="11">Native UI Guides</font></h1>
-
-<p>The UI framework features include various aspects of creating a visual outlook for the user application to ensure the best possible user experience.</p>
-
-<p>The UI framework is a universal, reusable software environment that provides the essential building blocks as part of the Tizen platform to facilitate the development of Tizen native applications. The framework provides the window, UI components, and scene-based graphic rendering architecture needed to manage your application user interface. In addition, the framework provides animations and effects needed to make your application more fresh and vivid, event handling and the main loop to interact with the user and system, and more features, such as scalability, and font setting.</p>
-
-<p>The Tizen platform provides the following native UI toolkit frameworks for developing a native application:</p> 
-
-<ul>
-	<li><a href="efl/guides_efl_n.htm">EFL (Enlightenment Foundation Libraries)</a>
-	<p>EFL provides streamlined graphic core libraries you need to create powerful applications. EFL needs lower memory but provides high performance, and supports a retained mode graphics system and user-centric features, such as themes, 2D/3D effects, and accessibility. In addition, EFL supports various resolutions with the same layout, fast and small file systems, a variety of programming language bindings, and a separate UI and logic.</p>
-	<p>Generally, select the EFL UI toolkit if you are creating a 2D-based Tizen native application. However, EFL supports 2.5D and 3D effects and 3D objects as well.</p></li>
-	<li><a href="dali/guides_dali_n.htm">DALi (Dynamic Animation Library)</a>
-	<p>DALi is based on OpenGL ES 2.0 and 3.0; however it hides the complexity of the OpenGL ES API from you. DALi requires a GPU (Graphical Processing Unit) on the device.</p>
-	<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>
-</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>
-
diff --git a/org.tizen.ui.guides/html/scripts/common.js b/org.tizen.ui.guides/html/scripts/common.js
deleted file mode 100755
index d46479a..0000000
--- a/org.tizen.ui.guides/html/scripts/common.js
+++ /dev/null
@@ -1,1752 +0,0 @@
-$(document).ready(function(){
-	$('#contents table').each(function(){
-		if (!$(this).parent().hasClass('table')) {
-			$(this).wrap('<div class="table"></div>');
-		}
-	});
-
-	// Lnb Menu Initialize
-	if($('div#contents').find('.lnb').length){
-		if($("ul li.events_news").size() > 0) {
-			$("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
-		}
-		initLnb();
-		initScript(staticURL + "/js/fixednavbar.js", function(){});
-	}
-
-	//family site
-	if($('div#footer').find('dl#familySlider').length){
-		fn_rollToEx('familySlider', 'sliderBanner', 1, true);
-	}
-
-	// Svn Commit Test
-	
-	// Language Selection
-	if($('div#header').find('.util').length){
-		var $lang = $('div#header').find('.util');
-		$lang.find('a.lang').toggle(function(){
-				$(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
-			},function(){
-				$(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
-			});
-
-		$lang.bind('mouseleave',function(){
-			$(this).find('ul.language').hide();
-			$lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-		});
-
-		$lang.find('ul.language').children().last().on("keydown", function(e) {
-			if(e.which == 9 && e.shiftKey) {
-				return true;
-			}
-			
-			if(e.which == 9) {
-				e.preventDefault();
-				$lang.find('ul.language').hide();
-				$lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-				setTimeout(function() {
-					$("#searchTop").focus();
-				}, 1);
-			}
-		});
-	}
-
-	// Open the Sitemap
-	var $open = $('div#header').find('.bt-open');
-	$open.bind('click',function(){
-		var $self = $(this);
-		var $sitemap = $('div#wrapper').find('div#sitemap');
-		//var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
-
-		if($sitemap.is(':visible')){
-			var source = $self.css('background-image').replace('_.gif','.gif');
-			//if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
-
-			$self.attr('title','open sitemap');
-		}else{
-			var source = $self.css('background-image').replace('.gif','_.gif');
-			//if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
-
-			$self.attr('title','close sitemap');
-		}
-		
-		$self.css('background-image',source);
-		$sitemap.slideToggle('fast');
-		
-		$sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
-			var source = $self.css('background-image').replace('_.gif','.gif');
-			$self.css('background-image',source);
-			$sitemap.slideToggle('fast');
-		});
-
-	});
-
-	// Search Auto Complete
-	var $search = $('div#header').find('fieldset.search');
-	var $searchList = $search.find('#topAutocomplete>ul');
-
-	if($search.length){
-		$search.find('> input').each(function(){
-			$(this).bind({
-				keydown : function(e){
-			
-					if(e.type=='keydown'&& $(this).val().length!=0){
-						$search.find('#topAutocomplete').show();
-						var hei = $searchList.outerHeight();
-						if(hei>400){
-							$searchList.css({'height':'400px','overflow-y':'auto'});
-						}
-					}
-					if(e.keyCode==9){
-						$search.unbind('focusout.search');
-					}
-					if(e.keyCode==40){
-						$search.find('#topAutocomplete>ul').children(':first').find('a').focus();
-						//window.scrollTo(0,0);
-					}
-				},
-				focusin : function(e){
-					if($(this).val()==='Search'){
-						$(this).val('');
-					}
-				},
-				focusout : function(e){
-					if($(this).val().length==0) $(this).val('Search');
-				}
-			});
-		});
-
-		//$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
-		//	if(e.keyCode==40){
-		//		$(this).parent().next().css('border','1px solid red').find('a').focus();
-		//	}
-		//});
-
-		$search.find('#topAutocomplete').bind('mouseleave',function(e){
-			if($search.find('> input').val().length==0){
-				$search.find('> input').val('Search');
-			}
-			$search.find('#topAutocomplete').hide();
-		});
-
-		$search.find('#topAutocomplete>ul').children().last().focusout(function(){
-			$search.find('> input').val('Search');
-			$search.find('#topAutocomplete').hide();
-			
-			//$search.bind('focusout.search', function(){
-			//	$(this).find('> input').val('Search');
-			//	$(this).find('#topAutocomplete').hide();
-			//});
-		});
-	}
-});
-
-// 비차단 동적 스크립트 로딩
-function initScript(url, callback){
-	var script = document.createElement("script");
-	script.type = "text/javascript";
-
-	if(script.readyState){ // 인터넷 익스플로러
-		script.onreadystatechange = function(){
-			if(script.readyState=="loaded" || script.readyState=="complete"){
-				script.onreadystatechange = null;
-				callback();
-			}
-		};
-	}else{	// 다른  브라우저
-		script.onload = function(){
-			callback();
-		};
-	}
-
-	script.src = url;
-	document.getElementsByTagName("head")[0].appendChild(script);
-}
-
-
-// lnb
-function initLnb(){
-	var sMenu = $('.lnb');
-	var sItem = sMenu.find('>li');
-
-	sItem.each(function(){
-		if($(this).find('a').hasClass('more')){
-			if($(this).find('ul').is(":visible")) {
-				$('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0));	
-			} else {
-				$('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
-			}
-		}
-	});
-	
-	var setIcoArrText = function(obj) {
-		if(obj.next().is(":visible")) {
-			obj.text("close submenu");
-		} else {
-			obj.text("open submenu");
-		}
-	}
-	
-	sItem.find('.ico-arr').on("click", function() {
-		var $that = $(this);
-		var liBox = $that.parent();   
-		var ulBox = $that.next();
-		
-		sItem.not(liBox).not(".on").find("a.more").next().next().hide();
-		sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
-		
-		if(liBox.hasClass("on")) {
-			if(ulBox.is(":visible")) {
-				ulBox.hide();
-				$that.addClass("ico-on");
-			} else {
-				ulBox.show();
-				$that.removeClass("ico-on");
-			}
-			setIcoArrText($that);
-			return true;
-		}
-		
-		if(liBox.hasClass("active")) {
-			liBox.removeClass("active").find("a").eq(0).removeClass("bov");
-			ulBox.hide();
-		} else {
-			liBox.addClass("active").find("a").eq(0).addClass("bov");
-			ulBox.show();
-		}
-		setIcoArrText($that);
-	});
-
-	sItem.hover(function(){
-		if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-		$(this).find("a").eq(0).addClass("bov");
-	},function(){
-		if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-		 $(this).find("a").eq(0).removeClass("bov");
-
-	});
-}
-
-//footer rolling banner
-function fn_rollToEx(container,objectId,step,auto){
-
-	// 롤링할 객체를 변수에 담아둔다.
-	var el = $('#'+container).find('#'+objectId);
-	var lastChild;
-	var speed = 3000;
-	var timer = 0;
-	var autoplay = false;
-
-	el.data('prev', $('#'+container).find('.prev'));	//이전버튼을 data()메서드를 사용하여 저장한다.
-	el.data('next', $('#'+container).find('.next'));	//다음버튼을 data()메서드를 사용하여 저장한다.
-	el.data('size', el.children().outerWidth());		//롤링객체의 자식요소의 넓이를 저장한다.
-	el.data('len', el.children().length);				//롤링객체의 전체요소 개수
-	el.data('animating',false);
-	el.data('step', step);								//매개변수로 받은 step을 저장한다.
-	el.data('autoStart', false);								//매개변수로 받은 step을 저장한다.
-
-	el.css('width',el.data('size')*el.data('len'));		//롤링객체의 전체넓이 지정한다.
-
-	if(arguments.length==4){
-		el.data('autoStart', auto);
-	}
-
-	if(el.data('autoStart')){
-		if(timer==0){
-			timer = setInterval(moveNextSlide, speed);
-			autoplay = true;
-		}
-	}
-
-	el.bind({
-		mouseenter:function(){
-			if(!autoplay) return false;
-
-			if(timer!=0 && el.data('autoStart')){
-				clearInterval(timer);
-				timer=0;
-			}
-		},
-		mouseleave:function(){
-			if(!autoplay) return false;
-
-			if(timer==0 && el.data('autoStart')){
-				timer = setInterval(moveNextSlide, speed);
-			}
-		}
-	});
-
-
-	//el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
-	el.data('prev').bind({
-		click:function(e){
-			e.preventDefault();
-			movePrevSlide();
-		},
-		mouseenter:function(){
-
-			$(this).find('img').addClass('btnOn');
-
-			if(!autoplay) return false;
-
-			if(timer!=0 && el.data('autoStart')){
-				clearInterval(timer);
-				timer=0;
-			}
-		},
-		mouseleave:function(){
-
-			$(this).find('img').removeClass('btnOn');
-
-			if(!autoplay) return false;
-
-			if(timer==0 && el.data('autoStart')){
-				timer = setInterval(moveNextSlide, speed);
-			}
-		}
-	});
-
-	//el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
-	el.data('next').bind({
-		click:function(e){
-			e.preventDefault();
-			moveNextSlide();
-		},
-		mouseenter:function(){
-
-			$(this).find('img').addClass('btnOn');
-
-			if(!autoplay) return false;
-
-			if(timer!=0 && el.data('autoStart')){
-				clearInterval(timer);
-				timer=0;
-			}
-		},
-		mouseleave:function(){
-
-			$(this).find('img').removeClass('btnOn');
-
-			if(!autoplay) return false;
-
-			if(timer==0 && el.data('autoStart')){
-				timer = setInterval(moveNextSlide, speed);
-			}
-		}
-	});
-
-	function movePrevSlide(){
-		if(!el.data('animating')){
-			//전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
-			var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
-			lastItem.prependTo(el);		//복사된 요소를 롤링객체의 앞에 붙여놓는다.
-			el.children().eq(-(el.data('step')+1)).nextAll().remove();	//step개수만큼 선택된 요소를 끝에서 제거한다
-			el.css('left','-'+(el.data('size')*el.data('step'))+'px');	//롤링객체의 left위치값을 재설정한다.
-		
-			el.data('animating',true);	//애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
-
-			el.animate({'left': '0px'},'normal',function(){		//롤링객체를 left:0만큼 애니메이션 시킨다.
-				el.data('animating',false);
-			});
-		}
-		return false;
-	}
-
-    function moveNextSlide(){
-		if(!el.data('animating')){
-			el.data('animating',true);
-
-			el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){	//롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
-				//전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
-				var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
-				firstChild.appendTo(el);	//복사된 요소를 롤링객체의 끝에 붙여놓는다.
-				el.children().filter(':lt('+el.data('step')+')').remove();	//step개수만큼 선택된 요소를 앞에서 제거한다
-				el.css('left','0px');	////롤링객체의 left위치값을 재설정한다.
-
-				el.data('animating',false);
-			});
-		}
-		return false;
-	}
-
-}
-
-function fn_slide(options){
-
-	var opts = jQuery.extend({},options);
-
-	var $bt = $('#'+opts.container).find('#'+opts.bt).children();					//롤링버튼에 대한 선택자
-	var $obj = $('#'+opts.container).find('#'+opts.obj);								//objectId를 id로 갖는 롤링객체의 선택자
-	var $prev = $('#'+opts.container).find('#'+opts.prev).hide();					//이전버튼에 대한 선택자
-	var $next = $('#'+opts.container).find('#'+opts.next);							//다음버튼에 대한 선택자
-	var size = $obj.children().outerWidth();				//롤링객체의 각 이미지 넓이값
-	var len = $obj.children().length;						//롤링객체의 이미지 갯수
-	var effect = false;										//슬라이드효과를 위한 boolean변수
-	var auto = false;
-	var current = 0;										//현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
-	var time;
-
-
-	$obj.css('width',size*len);								//롤링객체의 전체넓이 지정
-	effect = opts.effect;
-	auto = opts.auto;
-
-	if(auto){
-		time = setTimeout('slideShow()',3000);
-	}
-
-	slideShow = function(){
-
-		if(current < len-1){
-			current++;
-		}else{
-			current=0;
-		}
-
-		controllStatus();
-
-		moveControl('next');
-
-		time = setTimeout('slideShow()',3000);
-	}
-
-	controllStatus = function(){
-		//이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
-		if(current>0||current<len-1){				
-			$prev.show();
-			$next.show();
-		}
-		if(current==0){
-			$prev.hide();
-			$next.show();
-		}
-		if(current>=len-1){
-			$prev.show();
-			$next.hide();
-		}
-	}
-
-	moveControl = function(msg){
-		if(opts.bt!=null){
-			msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
-							:$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));	//이전에 활성화된 롤링버튼을 비활성화
-			$bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));		//현재 인덱스값을 가지는 롤링버튼을 활성화
-		}
-
-		if(effect!=true){				//action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-			$obj.children().hide();
-			$obj.children().eq(current).show();
-		}else{							//action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-			$obj.animate({'left':'-'+size*current},'slow');
-		}
-	}
-
-	$obj.bind({
-		mouseenter:function(){
-			if(!auto) return false;
-			clearTimeout(time);
-		},
-		mouseleave:function(){
-			if(!auto) return false;
-			time = setTimeout('slideShow()',3000);
-		}
-	});
-
-	//롤링 버튼 클릭시
-	$bt.bind({
-		mouseenter:function(){
-			if(!auto) return false;
-			clearTimeout(time);
-		},
-		mouseleave:function(){
-			if(!auto) return false;
-			time = setTimeout('slideShow()',3000);
-		},
-		click:function(){
-			var idx = $bt.index(this);					//클릭한 롤링버튼의 인덱스값 저장
-
-			current = idx;								//롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
-
-			controllStatus();
-
-			if(effect!=true){				//action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-				$obj.children().hide();
-				$obj.children().eq(current).show();
-			}else{							//action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-				$obj.animate({'left':'-'+size*current},'slow');
-			}
-
-			// 모든 롤링 버튼을 비활성화
-			$bt.each(function(){
-				var source = $(this).find('img').attr('src').replace('_.png','.png');
-				 $(this).find('img').attr('src',source);
-			});
-
-			// 선택한 롤링버튼을 활성화
-			var source = $(this).find('img').attr('src').replace('.png','_.png');
-			$(this).find('img').attr('src',source);
-
-			return false;
-		}
-	});
-
-	//이전 버튼 클릭시
-	$prev.bind({
-		mouseenter:function(){
-			var source = $(this).find('img').attr('src').replace('.png','_.png');
-			$(this).find('img').attr('src',source);
-			if(!auto) return false;
-			clearTimeout(time);
-		},
-		mouseleave:function(){
-			var source = $(this).find('img').attr('src').replace('_.png','.png');
-			$(this).find('img').attr('src',source);
-			if(!auto) return false;
-			time = setTimeout('slideShow()',3000);
-		},
-		click:function(){
-			if(current==len-1) $next.show();	//이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화	
-			current--;							//이미지 인덱스값 1씩 감소
-
-			moveControl('prev');
-
-			if(current==0) $(this).hide();	//이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
-
-			return false;
-		}
-	});
-
-	//다음 버튼 클릭시
-	$next.bind({
-		mouseenter:function(){
-			var source = $(this).find('img').attr('src').replace('.png','_.png');
-			$(this).find('img').attr('src',source);
-			if(!auto) return false;
-			clearTimeout(time);
-		},
-		mouseleave:function(){
-			var source = $(this).find('img').attr('src').replace('_.png','.png');
-			$(this).find('img').attr('src',source);
-			if(!auto) return false;
-			time = setTimeout('slideShow()',3000);
-		},
-		click:function(){
-			current++;							//이미지 인덱스값 1씩 증가
-			
-			moveControl('next');
-
-			if(current>=len-1) $(this).hide();	//이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
-			if(current>0) $prev.show();			//이미지인덱스값이 0이 아닌경우 이전버튼 활성화
-
-			return false;
-		}
-	});
-
-}
-
-// main rolling banner
-function slideMotion1(){
-	var $banner = $('#rolling .motionview'),
-		//$nav = $('#rolling ul.nav'),
-		banner = {prev:null, next:null},
-		size = $banner.children().length;
-		index = 1,
-		speed = 3000,
-		timer = null,
-		auto = true,
-		width = parseInt(100/size),
-		rest = parseInt(100%size);
-
-	var $nav = $('<ul class="nav">').insertAfter($banner);
-
-	$banner.children().each(function(index){
-		index++;
-		(index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
-		if(index==size){
-			$nav.children().eq(-1).find('a').css('background-image','none');
-		}
-	});
-
-	if(rest>0){
-		width+=rest;
-		$nav.children().eq(-1).css('width',width+'%');
-	}
-
-	$nav.delegate("li",'click',function(){
-		var idx = $nav.children().index(this);
-		index = idx;
-		banner.prev = $banner.find('a.active');
-		banner.next = $banner.find('a').eq(index);
-
-		clearInterval(timer);
-		auto = false;
-		
-		$nav.trigger('change.banner',banner)
-			.trigger('change.tab',index);
-
-		return false;
-	});
-
-	$nav.bind('change.banner',function(event, banner){
-		aniMotion();
-	});
-
-	$nav.bind('change.tab',function(event, index){
-		$nav.children().find('a').removeClass('sel');
-		$nav.children().eq(index).find('a').addClass('sel');
-	});
-
-	timer = setInterval(autoMotion, speed);
-
-	function autoMotion(){
-		if(index > size-1) index = 0;
-
-		aniMotion();
-	}
-
-	function aniMotion(){
-		if(auto){
-			banner.prev = $banner.find('a.active');
-			banner.next = $banner.find('a').eq(index);
-
-			$nav.children().find('a').removeClass('sel');
-			$nav.children().eq(index).find('a').addClass('sel');
-		}
-		banner.prev.addClass('last-active');
-		banner.next.css({'opacity':0.0})
-			.addClass('active')
-			.animate({'opacity':1.0}, 1000, function(){
-				banner.prev.removeClass('active last-active');
-
-				if(auto){
-					index++;
-				}else{
-					index++;
-					timer = setInterval(autoMotion, speed*1.5);
-					auto = true;
-				}
-			});
-	}
-}
-
-// forum list show or hide function
-function toggleFunc(){
-	
-	var defaulNum = [2];
-
-	$('.forum-tit').each(function(){
-		var self = $(this);
-
-		var idx = $('.forum-tit').index(this);
-
-		for(i=0;i<=defaulNum.length;i++){
-			if(idx==defaulNum[i]){
-				var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
-				self.find('a.toggle').css('background-image',source);
-
-				self.find('a.toggle').text('Show');
-				self.addClass('mb35').next().hide();
-			}
-		}
-
-		self.find('a.toggle').click(function(){
-			
-			if(self.next().is(':visible')){
-				var source = $(this).css('background-image').replace('.gif','_.gif');
-				$(this).css('background-image',source);
-
-				$(this).text('Show');
-				self.addClass('mb35').next().hide();
-			}else{
-				var source = $(this).css('background-image').replace('_.gif','.gif');
-				$(this).css('background-image',source);
-
-				$(this).text('Hide');
-				self.removeClass('mb35').next().show();
-			}
-
-			return false;
-
-		});
-
-	});
-}
-
-// 파일 업로드
-function fileUpload( width ){
-	//var $img = $('.attach input[type=image]');
-	//var width = $img.attr('width');
-
-	// 2012-08-08 추가 : 파일 input 너비영역 셋팅
-	var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
-
-	var $file = $('.attach input.upload').css({
-		"position": "absolute",
-		"top": "0px",
-		"right": "0px",
-		"width": w,
-		"cursor": "pointer",
-		"opacity": "0.0",
-		"height": "23px"
-	});
-	$file.off('change');
-	$file.on('change',function(e){
-		if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
-			return;
-		}
-		var idx = $file.index(this);
-		var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
-		var fileErrMsg = {
-				limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
-			    ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
-			    ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
-			    ,ext_ko : "지원하지 않는 확장자 입니다."
-			    ,ext_zh : "不允许上传具有该扩展名的文件。"
-			    ,ext_en : "File extention not allowed for upload."
-		};
-		var initFileInput = function(obj) {
-			$(obj).parent().find('input.file').val("");
-			if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
-			else $(obj).val("");
-		};
-		
-		var filename = $(this).val();
-		
-		//CHK File ext
-		var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
-			              , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
-			              , "jpg", "png", "zip"];
-		var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
-		var findFlag = false;
-		for(var i = 0; i < imgExts.length; i++) {
-			if(imgExts[i] == fileExt) {
-				findFlag = true;
-				break;
-			}
-		}
-	
-		if(findFlag == false) {
-			alert( fileErrMsg["ext_" + localeCode] );
-			initFileInput(this);
-//			setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
-			return;
-		}
-		
-		//CHK File Size
-		if(
-				($.browser.msie && $.browser.version >= 10.0 ) //msie
-				|| $.browser.mozilla //FF
-				|| $.browser.safari //Chrome
-		)
-		{
-			var filesize = parseInt(this.files[0].size/1024/1024); //MB;
-			if( filesize > 200 ) {
-				alert( fileErrMsg["limit_" + localeCode] );
-				initFileInput(this);
-				return;
-			}
-		}
-		
-		$(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
-	});
-};
-
-
-// Show or Hide Toggle
-function showToEx(args){
-
-	if(!arguments.length) return false;
-	
-	var bt = $('#'+args.bt);
-	var obj = $('#'+args.obj);
-
-	var source = bt.css('background-image');
-	
-	if(obj.is(':visible')){
-		obj.hide();
-	}
-
-	bt.toggle(function(){
-		var src = source.replace('.gif','_.gif');
-		bt.css('background-image', src);
-		obj.show();
-		
-		return false;
-	},function(){
-		var src = source.replace('_.gif','.gif');
-		bt.css('background-image', src);
-		obj.hide();
-
-		return false;
-	});
-
-}
-
-
-// FAQ 20131016
-function faqToEx(){
-
- var $question = $('#contents').find('.question');
- var $answer = $('#contents').find('.answer');
-
- // All Answer Rows Hide
- $answer.hide().find('.conts').hide();
-
- $question.each(function(){
-  var $self = $(this);
-  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
-  
-  $self.find('a').bind('click',function(){
-   $("#selArea ul").hide();
-   /*
-   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
-
-   $answer.hide().find('.conts').hide();
-   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
-   */
-
-   /* 20120822 hjh modify*/
-   /* if ( this open )?  close : all close, e.target open */
-   var cutTtl  = $(this).parent().children("div").html();
-   var ttl     = $(this).parent().parent().children("td.real_question").html();
-   
-   if($(this).parents('tr').next().find('.answer').is(':visible')){
-    $(this).html(cutTtl);
-    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
-     $answer.hide();
-    });
-   }else{
-    titleInit();
-    $(this).html(ttl);
-    $answer.hide().find('.conts').hide();
-    //$answer.slideUp('normal').find('.conts').hide();
-    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
-   }   
-
-   return false;
-  });
- });
-
- $answer.each(function(){
-  var $self = $(this);
-
-  $(this).find('a.bt-close-faq').bind('click',function(){
-   var question_td = $(this).parent().parent().parent().prev().children("td.question");
-   var cutTtl      = question_td.children("div").html();
-   question_td.children("a").html(cutTtl);
-   
-   $self.find('.conts').slideUp('fast',function(){
-    $self.hide();
-   });
-
-   return false;
-  });
- });
- 
- var titleInit = function() {
-  $question.each(function(i) {
-   $(this).find("a").html($(this).find("div").html());
-  });
- }
-}
-
-
-
-/**
- *  쓰기페이지 Tab 영역 컨트롤
- *  @param	selector	텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
- */
-function setSwitchTab( selector ) {
-	var tabs = $('.tab-list').find("li");
-	var elements = $( selector );
-
-	$( elements ).each( function( i ) {
-		if( i != 0 )
-		{
-			$(this).hide();
-		}
-	})
-
-	// Control Tabs
-	$( tabs ).each( function( i ) {
-		$( this ).click( function(){
-			resetClass();
-
-			$( this ).find( 'a' ).addClass( "sel" );
-			$( elements[i] ).show();
-
-			return false;
-		});
-	});
-
-	// Class 리셋
-	function resetClass()
-	{
-		$( tabs ).each( function( i ) {
-			$( this ).find( 'a' ).removeClass( 'sel' );
-		});
-
-		$( elements ).each( function( i ) {
-			$( this ).hide();
-		});
-	}
-}
-
-var SET_ATTACH_LIMIT;
-var SET_ATTACH_WIDTH;
-var SET_ATTACH_BTNNAME;
-
-var firstAddAction = function(obj, limit, w, btnName) {
- var bn            = btnName || 'File';
- var fileAttachStr = "<li class='clfix no-first'>";
- fileAttachStr += '<div class="attach">';
- fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
- fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
- fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
- fileAttachStr += '</div>';
- fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
- fileAttachStr += '</li>';
- obj.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    $("a.remove-btn").eq(0).focus();
-   }, 1);
-  }
- });
- 
- obj.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- 
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-}
-
-var firstRemoveAction = function(id) {
- var obj = $("#" + id);
- var compFile    = $("input[type=file]");
- var compFileCnt = compFile.size();
- var ulObj       = compFile.eq(0).parent().parent().parent();
- if(compFileCnt <= 1) {
-  var firstCompFile = compFile.eq(0);
-  firstCompFile.prev().prev().val("");
-  if ($.browser.msie) {
-		$(obj).parent().find('input.file').val("");
-		firstCompFile.replaceWith( firstCompFile.clone(true) );
-	} else {
-		firstCompFile.val("");
-		firstCompFile.prev().prev().val("");
-  }
- } else {
-  obj.parent().remove();
-  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
-  
-  //add-btn event..
-  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
- }
- 
- ulObj
- .find("li")
- .eq(0)
- .removeClass("no-first")
- .find("a.remove-btn")
- .attr("id", id)
- .unbind("click");
- 
- setTimeout(function() {
-  $("#" + id).focus();
- }, 100);
- 
- $("#" + id).on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   var that = $(this);
-   setTimeout(function() {
-    that.prev().focus();
-   }, 1);
-  }
- });
- 
- $("#" + id).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-/** 
- * File 첨부컨트롤
- * @param limit 최대 파일 첨부 갯수
- * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
- */
-function setAttachFile( limit, width, btnName, removeBtnId )
-{
- var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
- var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
- var inputFile     = $( 'ul.file-att-form input[type=file]' );
- 
- SET_ATTACH_LIMIT = limit;
- SET_ATTACH_WIDTH = w;
- SET_ATTACH_BTNNAME = btnName;
- 
- inputFile.on("keydown", function(e) {
-  var that = $(this);
-  
-  if(e.which == 9 && e.shiftKey) {
-   return true;
-  }
-  
-  if(e.which === 9) {
-   e.preventDefault();
-   setTimeout(function() {
-    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
-   }, 1);
-  }
- });
- 
- inputFile.on("focusin", function(e) {
-  $(this).parent().css("outline", "1px dotted #2d2d2d");
- }).on("focusout", function(e) {
-  $(this).parent().css("outline", "");
- });
- 
- firstAddAction(btnFileAttach, limit, w, btnName);
- 
- /*
- btnFileAttach.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    inputFile.focus();
-   }, 1);
-  }
- });
- 
- btnFileAttach.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
-
- // File 제거 버튼
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- */
- /**
-  *  2012-08-08 전종호 추가
-  *  파일 Input Text 영역 너비를 잡아주는 메서드
-  */
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-
- updateFileField();
- fileUpload( w + 50 );
- 
- $("#" + removeBtnId).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-
-
-/** 
- * [PAGE] device speces list page
- * date : 20120808
- * id : hjh
- */
-function initDevicespecsList (){
-	var isCompareView=false;
-	$("#devicespecs-list > li").each( 
-		function(i){ 
-			$(".info", this).bind("click", devicespecsListInfoToggle);
-			$(".xx", this).bind("click", devicespecsListInfoToggle);
-			
-			//detail info layer toggle function
-			function devicespecsListInfoToggle (){
-				$("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
-				return false;
-			}
-	});
-
-
-	/* DEVICE COMPARE 열리는 부분
-	- defualt : close. 
-	- 최초 한번만 열림 
-	- 현재는 compare 버튼에 공통으로 함수 바인딩
-	*/
-	function devicespecsCompareOnOff (){
-		if ( isCompareView ) return;
-		var ww = ( isCompareView ) ? "30px":"207px";
-		$("#devicespecs-compare").animate({
-		    height: ww }, 300, "linear", function(){ });
-
-		isCompareView = ( isCompareView ) ? false:true;
-		return false;
-	}
-
-	//compare 버튼 공통으로 클릭 이벤트 걸림 
-	$(".compare").bind("click", function (){ devicespecsCompareOnOff() });
-}
-
-/** 
- * [PAGE] device speces view page
- * date : 20120808
- * id : hjh
- */
- function initDevicespecsView (){
-	var isImgView = false;
-	var isView = 0;
-	
-	//thumbnail overevent bind
-	$("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
-	focusDeviceDetail (1);
-	
-	$("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
-		if(e.which == 9 && e.shiftKey) {
-			return true;
-		}
-		
-		if(e.type === "keydown" && e.which == 9) {
-			setTimeout(function() {
-				$("#img-viewer-handle a").eq(0).focus();	
-			}, 1);
-		}
-	});
-	
-	//thumbnail viewarea controll handler bind
-	$("#img-viewer-handle").click(function () {
-		var ww;
-		var src = $("#img-viewer-handle img").attr("src");
-		if ( isImgView ){
-			ww = "300px";
-			src = src.replace(".gif", "_.gif");
-			$("#img-viewer-thumbnail").hide();
-			$("#device-info").show();
-		}else{
-			ww = "730px";
-			src = src.replace("_.gif", ".gif");
-			$("#img-viewer-thumbnail").show();
-			$("#device-info").hide();
-			focusDeviceDetail(1);
-		}
-		
-		$("#img-viewer-handle img").attr("src", src);
-    	$("#img-viewer").animate({
-		    width: ww
-			}, 300, "linear", function(){
-			if($.browser.msie)
-				$("#img-inner").css("width", ww);
-		});
-		
-    	isImgView = ( isImgView ) ? false:true;
-    });
-
-	//thumbnail overevent function (update date 2012.09.05 kangki)
-	function focusDeviceDetail ( id ) {
-		if ( isView == id ) return;
-
-		$("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
-		var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
-
-		$( "#img-viewer-bic > img").attr("src", imgSrc);
-		isView = (id);		
-	}
-
-	/*toggle devicespecs List*/
-	if($('div#contents').find('.devicespec-tit').length){
-		
-		$('.devicespec-tit').each(function(){
-			var self = $(this);
-			$('a', self).bind ("click", fnToggle);
-
-			function fnToggle(){
-
-				if ( $(this).parent().parent().next().is(':visible') ){
-					$(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-					self.find('em').text('Show');
-					self.next().hide();
-
-					return false;
-				}else{
-					$(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-					self.find('em').text('Hide');
-					self.next().show();
-
-					return false;
-				}
-			}
-							
-		});
-	}
-
-	/*all Show Hide devicespecs List*/
-	if($('div#contents').find('.devicespecs-util').length){
-		var self = $('div#contents').find('.devicespecs-util');
-
-		$('.showA', self).bind ("click", function (){
-			$('.devicespec-tit').each(function(){
-
-				var me = $(this);
-				if ( !me.next().is(':visible') ){
-					me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-					me.find('em').text('Hide');
-					me.next().show();
-				}
-			});
-			return false;
-		})
-		$('.hideA', self).bind ("click", function (){
-			
-			$('.devicespec-tit').each(function(){
-
-				var me = $(this);
-				if ( me.next().is(':visible') ){
-					me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-					me.find('em').text('Show');
-					me.next().hide();
-				}
-								
-			});
-			return false;
-		})
-	}	
-}
-
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
-function searchInit()
-{
-	var focusTarget = "input";
-
-	$("#searchInput").bind("keydown", checkSearchText);
-	$("#searchInput").focusout(function() {
-		if( focusTarget == "dropdown" )
-		{
-			return false;
-		}
-		else
-		{
-			//toggleClass( false );
-		}
-	});
-	
-	$( "#searchInput" ).focusin( function()	{
-		focusTarget = "input";
-	});
-
-	$("#btnDropdown").mousedown( function(){
-		focusTarget = "dropdown";
-	});
-
-	$(".autocomplete ul li").focusin( function() {
-		//
-	});
-
-	$(".autocomplete ul li:last-child").focusout( function() {
-		toggleClass( false );
-	})
-
-	$(".autocomplete").mouseleave(function(){
-		toggleClass( false );
-	});
-	
-	$("#btnDropdown").click( function(){
-		//alert("btn click");
-		if( $("#searchInput").val().length == 0 ){ 
-			return false;
-		}
-		else{
-			if( $("#btnDropdown").hasClass("dropdown") ){
-				toggleClass( true );
-			}
-			else{
-				toggleClass( false );
-			}
-		}
-
-		return false;
-	});
-
-	function checkSearchText(){
-		setTimeout(function(){
-			var txt = $("#searchInput").val();
-
-			if( txt.length > 0 ){
-				toggleClass( true );
-			}
-			else{
-				toggleClass( false );	
-			}
-		}, 1);
-	}
-
-	function toggleClass( bo ){
-		if( bo ){
-			$(".autocomplete").css("visibility", "visible");
-
-			$("#btnDropdown").removeClass("dropdown");
-			$("#btnDropdown").addClass("dropdownoff");
-
-			var hei = $(".autocomplete").find('>ul').outerHeight();
-			if(hei>400){
-				$(".autocomplete").css({'height':'400px','overflow-y':'auto'});
-			}
-		}
-		else{
-			$(".autocomplete").css("visibility", "hidden");
-			
-			$("#btnDropdown").removeClass("dropdownoff");
-			$("#btnDropdown").addClass("dropdown");
-		}
-	}
-}
- */
-
-function setTopScroll(selector) {
-	if ( !selector ) return false;
-	var btn = $( selector );
-	var w = $( window );
-	btn.css( "position", "absolute" );
-
-
-	btn.click( function(){ w.scrollTop( 0 ) } );
-
-	var wheight = w.innerHeight();
-	
-	$(window).resize( function() {
-		wheight = w.innerHeight();
-		redraw();
-	});
-
-	$(window).scroll( function() {
-		redraw();
-	})
-
-	/**
-	 *	Top 버튼의 재정렬 메서드
-	 */
-	function redraw()
-	{
-		var t = w.scrollTop() + wheight - 289;
-
-		if( t < wheight / 2 && w.scrollTop() == 0 )	{
-			t = wheight / 2;
-		}
-		
-		btn.clearQueue();
-
-		btn.animate({
-	    top: t
-	  	}, 500, function() {
-	    // Animation complete.
-	  	});
-		//btn.css( "top", t );
-		//console.log( "target : " + t );
-	}
-
-	redraw();
-	/*
-	obj.initTop = position;
-	obj.topLimit = topLimit;
-	obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
-
-	obj.style.position = "absolute";
-	obj.top = obj.initTop;
-	// obj.left = obj.initLeft;
-
-	if ( typeof( window.pageYOffset ) === "number" ) {	//WebKit
-		obj.getTop = function() {
-			return window.pageYOffset;
-		}
-	} else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
-		obj.getTop = function() {
-			return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
-		}
-	} else {
-		obj.getTop = function() {
-			return 0;
-		}
-	}
-
-	if ( self.innerHeight ) {	//WebKit
-		obj.getHeight = function() {
-			return self.innerHeight;
-		}
-	} else if( document.documentElement.clientHeight ) {
-		obj.getHeight = function() {
-			return document.documentElement.clientHeight;
-		}
-	} else {
-		obj.getHeight = function() {
-			return 500;
-		}
-	}
-
-	obj.move = setInterval( function() {
-		if ( obj.initTop > 0 ) {
-			pos = obj.getTop() + obj.initTop;
-		} else {
-			pos = obj.getTop() + obj.getHeight() + obj.initTop;
-		}
-
-		if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
-		if ( pos < obj.topLimit ) pos = obj.topLimit;
-
-		interval = obj.top - pos;
-		obj.top = obj.top - interval / 3;
-		obj.style.top = obj.top + "px";
-	}, 30 )
-	*/
-}
-
-
-//popup
-function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
-function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
-
-//popup 중앙에 띄우기
-function pop_center(){ 
-	var x,y; 
-	if (window.innerHeight) { // IE 외 모든 브라우저 
-		x = (screen.availWidth - self.innerWidth) / 2; 
-		y = (screen.availHeight - self.innerHeight) / 2; 
-	}else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
-		x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
-		y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
-	}else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
-		x = (screen.availWidth - document.body.clientWidth) / 2; 
-		y = (screen.availHeight - document.body.clientHeight) / 2; 
-	} 
-	window.moveTo(x,y); 
-}
-
-// Layer Popup Open
-function layer_open(el){
-	var temp = $('#' + el);
-
-	if(!temp.hasClass('sty2')){
-		$('.layer').fadeIn();
-	}
-
-	if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-	else temp.css('top', '0px');
-	if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-	else temp.css('left', '0px');
-
-	if(temp.hasClass('sty2')){
-		temp.fadeIn();
-
-		temp.find('a.cbtn').click(function(e){
-			temp.fadeOut();
-		});
-		temp.find('a.gbtn').click(function(e){
-			temp.fadeOut();
-		});
-
-		return false;
-	}
-	// 닫는 버튼 gbtn-c 추가 20130627
-	$('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
-		$('.layer').fadeOut();
-		return false;
-	});
-}
-
-// background dim - 2013-05-31
-function layer_open2(el){
-	var temp = $('#' + el);
-	$('input').attr('disabled', 'disabled');
-	$('.layerPop').fadeIn();
-	
-
-	if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-	else temp.css('top', '0px');
-	if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-	else temp.css('left', '0px');
-
-	$('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
-		$('.layerPop').fadeOut();
-		$('input').removeAttr('disabled');
-		return false;
-	});
-}
-
-
-function pop_account(url){
-	window.open(url,'account','width=619,height=591,scrollbars=yes')
-}
-
-function pop_loadDoc(url){
-	window.open(url,'online','width=850,height=600,scrollbars=yes')
-}
-
-/** 
- *  [PAGE] Tags
- *  date : 20120820
- *  author : 전종호
- */
-function initTags()
-{
-	// Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
-	// 마지막 아이템은 제외
-	var eleArr = $(".tag-list").find("li");
-
-	$( eleArr ).each( function( i ) {
-		if( i < eleArr.length - 1 )
-		{
-			var target = $(this).find("a")[0];
-			var content = $( target ).html();
-
-			$( target ).html( content + "," );
-		}
-	})
-}
-
-$(document).ready(function(){
-	$(".tip_info").css("cursor","pointer");
-	$(".tip_info > img").mouseover(function(){
-		$(".tip_cont").css("display","block");
-	});
-	$(".tip_info > img").mouseout(function(){
-		$(".tip_cont").css("display","none");
-	});
-});
-
-// new layer popup script by ygh 2013.11.14
-
-var isPopup = false ;
-
-function popupLayerView(id){
-
-	var $L = $("#" + id) ;
-	var $D  = $("#" + id + "down") ;
-
-	$T = $("#" + id) ;
-
-	$L.show();
-	isPopup = true ;
-
-	$('html, body').animate({ scrollTop: $L.offset().top }, 500);
-
-	$("#" + id + "agree").focus() ;
-
-	jQuery(":focusable").focusin(function(e){
-		if (isPopup) {
-			e.stopPropagation() ;
-			if ($L.find(jQuery(this)).length > 0) {
-			} else {
-				jQuery(this).blur() ;
-				jQuery("#" + id + " :focusable:first").focus() ;
-			}
-		}
-	}) ;
-
-	$L.find('.close').click(function(){
-		resetPopup(id) ;
-	});
-
-	$("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
-}
-
-function resetPopup(T) {
-	$("#" + T + "down").hide();
-	$("#" + T + "agree").attr("checked", false) ;
-	isPopup = false ;
-	$("#" + T).hide() ;
-	$("#" + T + "Btn").focus() ;
-}
-
-function getDownload(T, F, I) {
-	if ($("#" + T + "agree").is(':checked')) {
-		commonDownloadLog(F, I) ;
-		resetPopup(T) ;
-	}
-}
-
-function focusable( element, isTabIndexNotNaN ) {
-	var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
-	if ( "area" === nodeName ) {
-		map = element.parentNode;
-		mapName = map.name;
-		if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
-		img = $( "img[usemap=#" + mapName + "]" )[0];
-		return !!img && visible( img );
-	}
-	return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
-			visible( element ) ;
-}
-
-function visible( element ) {
-	return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
-		return $.css( this, "visibility" ) === "hidden";
-	}).length;
-}
-if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
-
-$.extend( $.expr[ ":" ], {
-	data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
-	focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
-	tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
-});
-// new layer popup script by ygh 2013.11.14
-
-// 2013-11-15 타이젠 썸네일 추가
-$(document).ready(function() {
-	$('.view_device1').hide();
-	
-	$('#thumb_view_btn').hover(function() {
-		$('.view_device1').show();
-	},function() {
-		$('.view_device1').hide();
-	});
-		
-});
-
-// 2014-04-22 타이젠 썸네일 추가
-$(document).ready(function() {
-	$('.view_device2').hide();
-	
-	$('#thumb_view_btn2').hover(function() {
-		$('.view_device2').show();
-	},function() {
-		$('.view_device2').hide();
-	});
-		
-});
-
-
-function beforePopupLayerView(popId, popId2, popContinue){
-	var $L = $("#" + popId) ;
-	$L.show(100);
-	$('html, body').animate({ scrollTop: $L.offset().top }, 500);
-	$L.find('.close').click(function(){
-		$L.hide();
-	});
-	$L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
-}
diff --git a/org.tizen.ui.guides/html/scripts/core.js b/org.tizen.ui.guides/html/scripts/core.js
deleted file mode 100755
index 31ad7ff..0000000
--- a/org.tizen.ui.guides/html/scripts/core.js
+++ /dev/null
@@ -1,899 +0,0 @@
-// /////////////////////////////////////////////////////////////////////////////////////////////////
-// # com.samsung.devloper common core javascript #
-// # Create Date : 2012.07.10. 
-// # Create By : kangki
-;(function ($) {
-/**
- * Samsung Developer Common JavaScript
- */
-$.SD = {};
-
-/*
- * Method Common
- */
-$.SD.message = function (msg) { if (msg) alert(msg); };
-$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
-$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
-$.SD.typeTest = function (data, datatype) {
-	if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
-	if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
-	if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
-	if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
-	if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
-	if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
-	if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
-
-	return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
-};
-
-$.SD.toDate = function (date, seperator) {
-	if (!seperator) seperator = '-';
-
-	date = $.SD.replaceAll(date, seperator, '');
-	date = $.SD.replaceAll(date, '/', '');
-
-	if (date.length !== 8) return null;
-	
-	date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
-
-	if (date.valueOf().toString() === 'NaN') return null;
-
-	return date;
-};
-
-$.SD.toDateString = function (date, seperator) {
-	if (!seperator) seperator = '/';
-	if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
-	if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
-
-	var str, dateString = date.getFullYear();
-
-	str 		= "0" + (date.getMonth()+1);
-	dateString 	= dateString + seperator + str.substring(str.length-2, str.length);
-	str 		= "0" + date.getDate();
-	dateString 	= dateString + seperator + str.substring(str.length-2, str.length);
-
-	return dateString;
-};
-
-$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
-$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
-$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
-
-$.SD.insertComma = function(num) {
-	var tnum    = num + "";
-	var tarr    = new Array();
-	var dot     = "";
-	var idxDot  = tnum.indexOf(".");
-	var sign    = "";
-	var tinx    = 0;
-	var fnum    = tnum;
-	 
-	
-	if(idxDot > -1) {
-		fnum = tnum.substring(0, idxDot);
-		dot  = tnum.substring(idxDot);
-		tnum = fnum;
-	} 
-	
-	if(tnum.indexOf("-") > -1) {
-		fnum = tnum.substring(1);
-		sign = tnum.substring(0, 1);
-	}
-	
-	for(var inx = fnum.length; inx > 0; ) {
-		tarr[tinx++] = fnum.substring(inx, inx - 3);
-		inx = inx - 3;
-	}
-	
-	return sign + tarr.reverse().join(",") + dot;
-}
-
-/**
- * Method Ajax
- */
-$.SD.ajax = {
-	doAjax : function (json) {
-		var param = {
-			async : json.async,
-			type : json.type,
-			dataType : json.dataType,
-			cache: json.cache,
-			timeout : json.timeout,
-			success : json.success,
-			error : json.error
-		};
-
-		if (param.dataType === 'jsonp') {
-			param.url = json.url + '?' + $.param(json.data) + '&callback=?';
-		} else {
-			param.url = json.url;
-			param.data = json.data;
-		}
-		$.ajax(param);
-	},
-	
-	get : function (json) {
-		$.SD.ajax.doAjax({ 
-			url:json.url,
-			cache:json.cache != null ? json.cache : false,
-			async:json.async != null ? json.async : true,
-			type:'get', 
-			dataType:'json',
-			data:json.data != null ? json.data : {}, 
-			timeout:10000, success:json.success, 
-			error: function(){ if(json.error != null)json.error(); }
-		});
-	},
-	
-	post : function (json) {
-		$.SD.ajax.doAjax({ url:json.url,
-			cache: json.cache != null ? json.cache : false,
-			async:json.async != null ? json.async : true,
-			type:'post', dataType:'json',
-			data:json.data != null ? json.data : {}, 
-			timeout:10000, success:json.success, 
-			error: function(){ if(json.error != null)json.error(); }
-		});
-	}
-};
-
-/**
- * SD20 password check
- */
-
-$.SD.isSD20Pwd = function(pwd) {
-	
-	if(/[a-zA-Z]{1,}/.test(pwd) == false) {
-		return false;
-	}
-	
-	if(/[0-9]{1,}/.test(pwd) == false) {
-		return false;
-	}
-	
-	if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
-		return false;
-	}
-	
-	return true;
-};
-
-$.SD.popupCenter = function(popObj) {
-	var scrollbars  = "no";
-	var resizeable  = "no";
-	
-	if(popObj.scrollbars) {
-		scrollbars = popObj.scrollbars; 
-	}
-	
-	if(popObj.resizeable) {
-		resizeable = popObj.resizeable;
-	}
-	
-	var width  = screen.width;
-	var height = screen.height;
-
-	var x = ( width / 2 ) - ( popObj.width / 2 );
-	var y = ( height / 2 ) - ( popObj.height / 2 );
-
-	var opt = "left=" + x +
-	          ",top=" + y +
-	          ",width=" + popObj.width +
-	          ",height=" + popObj.height +
-	          ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
-	          ",scrollbars=" + scrollbars +
-	          ",resizable=" + resizeable;
-	var pop = window.open(popObj.url, popObj.target, opt);
-	if(pop) {
-		pop.focus();
-	}
-}
-
-$.SD.isValidDate = function(val) {
-	if(val.length != 8) {
-		return false;
-	}
-	
-	var yyyy = Number(val.substring(0, 4)); 
-	var mm   = Number(val.substring(4, 6));
-	var dd   = Number(val.substring(6));
-	
-	if( mm < 1 || mm > 12 ) {
-		return false;
-	}
-	
-	var endDay  = 0;
-	
-	if( mm == 2 ) {
-		if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
-			endDay = 29;
-		} else {
-			endDay = 28;
-		}
-		
-	} else {
-		var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
-		endDay = endDays[mm - 1];
-	}
-	
-	if( dd <= 0 || dd > endDay ) {
-		return false;
-	} 
-	
-	return true;
-	
-}
-
-$.SD.boardDownload = function(option, func) {
-	var jsonData = {
-		url: "/board/ajaxDwnldProc.do",
-		async: false,
-		data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
-		success: function(data) {
-			if(data.existFileYn == "Y") {
-				location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
-				//location.href = $(obj).attr("href");
-				if(func) {
-					func(data);
-				}	
-			} else {
-				alert("File does not exist.");
-			}
-		}
-	}
-	
-	$.SD.ajax.get(jsonData);
-}
-
-$.SD.commonDownload = function(fileName, categoryId, func) {
-	var jsonData = {
-		url: "/common/ajaxCommonDwnldProc.do",
-		async: false,
-		data: {fileName: fileName, categoryId: categoryId},
-		success: function(data) {
-			if(data.existFileYn == "Y") {
-				location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-				if(func) {
-					func(data);
-				}	
-			} else {
-				alert("File does not exist.");
-			}
-		}
-	}
-	
-	$.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
-	var jsonData = {
-		url: "/common/ajaxCommonDownloadLogProc.do",
-		async: false,
-		data: {fileFullPath: fileFullPath, categoryId: categoryId},
-		success: function(data) {
-			if(data.existFileYn == "Y") {
-				//location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-				location.href = fileFullPath;
-				if(func) {
-					func(data);
-				}	
-			} else {
-				alert("File does not exist.");
-			}
-		}
-	}
-	
-	$.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
-	var jsonData = {
-		url: "/common/ajaxCommonDownloadLogProc.do",
-		async: false,
-		data: {fileFullPath: fileFullPath, categoryId: categoryId},
-		success: function(data) {
-			if(data.existFileYn == "Y") {
-				//location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-				if(target == 'new'){
-					window.open(fileFullPath, '');
-				}else{
-					location.href = fileFullPath;
-				}
-				
-				if(func) {
-					func(data);
-				}	
-			} else {
-				alert("File does not exist.");
-			}
-		}
-	}
-	
-	$.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
-	var jsonData = {
-		url: "/common/ajaxCommonAllShareClickCountProc.do",
-		async: false,
-		data: {fileFullPath: fileFullPath, categoryId: categoryId},
-		success: function(data) {}
-	}
-	
-	$.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonClickCount = function(categoryName, categoryId) {
-	var jsonData = {
-		url: "/common/ajaxCommonClickCountProc.do",
-		data: {categoryName: categoryName, categoryId: categoryId},
-		success: function(data) {}
-	}
-	
-	$.SD.ajax.get(jsonData);
-}
-
-$.SD.getByteLen = function(str) {
-	var resultSize = 0;
-	if(str == null){
-		return 0;
-	}
-	for(var i=0; i<str.length; i++){
-	  var c = escape(str.charAt(i));
-	  if(c.length == 1){
-		  resultSize ++;
-	  }	else if(c.indexOf("%u") != -1) {
-		  resultSize += 2;
-	  }	else if(c.indexOf("%") != -1) {
-		  resultSize += c.length/3;
-	  }
-	}
-	return resultSize;
-}
-
-$.SD.cutByte = function(str, limit) {
-	var tempStr = new String(str);
-	var len = 0;
-	for ( var i = 0; i < str.length; i++) {
-		var c = escape(str.charAt(i));
-		if (c.length == 1)
-			len++;
-		else if (c.indexOf("%u") != -1)
-			len += 2;
-		else if (c.indexOf("%") != -1)
-			len += c.length / 3;
-		if (len > limit) {
-			tempStr = tempStr.substring(0, i);
-			break;
-		}
-	}
-	return tempStr;
-}
-
-$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
-
-/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
-
-/** 
- * Method pagination 
- * */
-$.fn.frontPagination = function (pageInfo, func) {
-	var info = {
-			 prev : 1
-			,first : 1
-			,begin : pageInfo.begin - 0
-			,current : pageInfo.current - 0
-			,end : pageInfo.end - 0
-			,last : pageInfo.last - 0
-			,next : 1
-		},
-		target 	= this, 
-		page 	= $('<span class="page"></span>'),
-		prev 	= "", 
-		next 	= "", 
-		i 		= 0, 
-		n 		= 0;
-
-	info.begin 	 = info.begin < 1 ? 1 : info.begin;
-	info.current = info.current < 1 ? 1 : info.current;
-	info.end 	 = info.end < 1 ? 1 : info.end;
-	info.last 	 = info.last < 1 ? 1 : info.last;
-
-	info.prev = info.current - 1;
-	info.next = info.current + 1;
-
-	target.addClass("pageNumber");
-	target.addClass("mt20");
-	target.children().remove();
-
-	if (info.first < info.begin) {
-		target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
-			e.preventDefault();
-			func(info.first);
-		}));
-	}
-
-	if (info.prev >= info.first) {
-		target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
-			e.preventDefault();
-			func(info.prev);
-		}));
-	}
-
-	i = info.begin;
-	n = info.end;
-	for(; i <= n; i++) {
-		if (i === info.current) {
-			page.append('<strong>'+i+'</strong>');
-		} else {
-			(function(index){
-				page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
-					e.preventDefault();
-					func(index);
-				}));
-			})(i);
-		}
-	}
-
-	target.append(page);
-
-	if (info.next <= info.last) {
-		target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
-			e.preventDefault();
-			func(info.next);
-		}));
-	}
-	
-	if (info.last > info.end) {
-		target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
-			e.preventDefault();
-			func(info.last);
-		}));
-	}	
-};
-
-/**
- *  Method : popup Show Hide 
- */
-$.fn.popupShow = function(options) {
-	var opts = $.extend({}, $.fn.popupShow.defaults, options);
-	
-	if($("body div#" + opts.maskId).size() == 0) {
-		$("body").append("<div id='" + opts.maskId + "'></div>");
-		$("#" + opts.maskId).css({
-			"position" : "absolute",
-			"left"     : "0",
-			"top"      : "0",
-			"z-index"  : "9000",
-			"background-color" : "#000",
-			"display"  : "none"
-		});
-	}
-	
-	var mask_layer  = $("#" + opts.maskId);
-	var popup_layer = $(this);
-	
-	popup_layer.css("z-index", "9999");
-	
-	var maskHeight = $(document).height();
-	var maskWidth = $(window).width();
-	
-	mask_layer.css({'width':maskWidth,'height':maskHeight});
-	
-	mask_layer.fadeIn(opts.fadeSec);
-	mask_layer.fadeTo(opts.speed, opts.fadeLow);
-	
-	var winH = $(window).height();
-	var winW = $(window).width();
-	
-	popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-	popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-	
-	popup_layer.fadeIn(opts.fadeSec);
-	
-	var init_num = 0;
-	
-	if(init_num == 0) {
-		mask_layer.click(function() {
-			$(this).hide();
-			popup_layer.hide();
-		});
-		
-		
-		$("#" + opts.closeId).click( function(e) {
-			e.preventDefault();
-			popup_layer.popupHidden(opts.maskId);
-		});
-		
-		
-		$(window).resize( function() {
-			var maskHeight = $(document).height();
-			var maskWidth  = $(window).width();
-			var winH       = $(window).height();
-			var winW       = $(window).width();
-			
-			mask_layer.css({'width':maskWidth,'height':maskHeight});
-			
-			popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-			popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-		});
-		
-		init_num++;
-	}
-};
-
-$.fn.popupHidden = function(maskId) {
-	var id = "#";
-	
-	if(maskId) {
-		id = id + maskId;
-	} else {
-		id = id + $.fn.popupShow.defaults.maskId; 
-	}
-	
-	$(id).hide();
-	$(this).hide();
-};
-
-
-$.fn.popupShow.defaults = {
-	speed : "slow",
-	fadeLow : 0.8,
-	fadeSec : 100,
-	maskId  : "mask",
-	popupId : "layer-pop",
-	closeId : "layer-pop-close"
-};
-
-/**
- *  Method : validate File Ext
- */
-$.fn.isNotValidateFileExt = function(imgExts) {
-	imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
-	var that = this;
-	var target = null;
-
-	that.each(function (i, item) {
-		var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
-		if (filePath != "") {
-			var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
-			if (!imgExts[fileExt]) {
-				target = item;
-				return false;
-			}
-		}
-	});
-
-	return target;
-}	
-
-/**
- *  Method : validate SD20 Password
- */
-$.validator.addMethod("isSD20Pwd", function(value, element) {
-	return this.optional(element) 
-	       || $.SD.isSD20Pwd(value);
-}, "비밀번호를 다시 입력해 주세요.");
-
-$.SD.alterParent = function(options, event) {
-    var label = $(this).data('label');
-    
-    /*
-    if (event && event.type === 'focusin') {
-      label.hide();
-    } else if (event && event.type === 'focusout') {
-      label.css('opacity', options.placeholderOpacity);
-    }
-    */
-    
-    if (event && event.type !== 'keydown') {
-      toggleLabel(this, label);
-    } else {
-      // Use timeout to catch val() just after the key is pressed
-      // Using keyup is too slow.   
-      (function(input) {
-        setTimeout(function() {
-          toggleLabel(input, label);
-        }, 0);
-      })(this);
-    }
-    
-    if (event && event.type === 'focusin') {
-    	label.hide();
-    }
-  };
-  
-  var toggleLabel = function(input, label) {
-    if ($(input).val()) {
-      label.hide();
-    } else {
-      label.show();
-    }
-  };
-
-  $.fn.stickyPlaceholders = function(options) {
-    var defaults = {
-      wrapperClass: 'sticky-placeholder-wrapper',
-      wrapperDisplay: 'block',
-      labelClass: 'sticky-placeholder-label',
-      placeholderAttr: 'placeholder',
-      dataAttr: 'data-sticky-placeholder',
-      placeholderColor: '#000',
-      placeholderOpacity: 0.5,
-      placeholderFocusOpacity: 0.25
-    };
-    options = $.extend(defaults, options);
-
-    return this.each(function() {
-      var input       = $(this),
-          placeholder = input.attr(options.placeholderAttr),
-          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
-          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
-          labelStyle;
-
-      // store a reference to each input's label
-      input.data('label', label);
-
-      // remove the placeholder attribute to avoid conflcits
-      input.removeAttr('placeholder');
-      
-      // If the dataAttr is set and it's not equal to the placeholderAttr
-      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
-        input.attr('data-sticky-placeholder', placeholder);
-      }
-
-      labelStyle = {
-        'color': options.placeholderColor,
-        'cursor': 'text',
-        'font-family': input.css('font-family'),
-        'font-weight': input.css('font-weight'),
-        'font-size': input.css('font-size'),
-        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
-        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
-        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
-        'opacity': options.placeholderOpacity,
-        'padding-left': input.css('padding-left'),
-        'padding-top': input.css('padding-top'),
-        'position': 'absolute',
-        'text-transform': input.css('text-transform'),
-        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
-      };
-      label.css(labelStyle);
-      
-      // hide the placeholder if the input already has a value
-      if (input.val()) {
-        label.hide();
-      }
-
-      $(this).bind('keydown input focusin focusout', function(event) {
-        $.SD.alterParent.call(this, options, event);
-      });
-        
-      // prevent click/dblclick from selecting the label text
-      label.bind('mousedown', function(e) {
-        e.preventDefault();
-      });
-      
-      // call alterParent initially without an event to set up the wrapper elements
-      $.SD.alterParent.call(this, options);
-    });
-  };
- 
-$.SD.setInputFileKeyEvent = function(file_id, after_id) {
-	$("#" + file_id).on("keydown", function(e) {
-		var that = $(this);
-		if(e.which == 9 && e.shiftKey) {
-			return true;
-		}
-		
-		if(e.which === 9) {
-			e.preventDefault();
-			setTimeout(function() {
-				$("#" + after_id).focus();
-			}, 1);
-		}
-	});
-	
-	$("#" + after_id).on("keydown", function(e) {
-		if(e.which == 9 && e.shiftKey) {
-			e.preventDefault();
-			setTimeout(function() {
-				$("#" + file_id).focus();
-			}, 1);
-		}
-	});
-}  
-
-$.SD.closeWP = function() {
-	var Browser = navigator.appName;
-	var indexB = Browser.indexOf('Explorer');
-	if (indexB > 0) {
-	    var indexV = navigator.userAgent.indexOf('MSIE') + 5;
-	    var Version = navigator.userAgent.substring(indexV, indexV + 1);
-	    window.opener.focus();
-	    if (Version >= 7) {
-	        window.open('', '_self', '');
-	        window.close();
-	    }
-	    else if (Version == 6) {
-	        window.opener = null;
-	        window.close();
-	    }
-	    else {
-	        window.opener = '';
-	        window.close();
-	    }
-	}
-	else {
-	    window.close();
-	}
-}
-
-$.SD.profileFacebook = function() {
-	location.replace("http://facebook.com/profile.php");
-}
-
-/* ------------------------------ END --------------------------------------- */
-window.$SD = $.SD;
-
-})(jQuery);
-
-
-$(document).ready(function(){
-//document rady Start #########################################
-
-// Top menu action Start
-var onClickChangeEn 		= function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
-var onClickChangeZh 		= function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
-var onClickChangeKo 		= function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
-var onClickSignOut 			= function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
-var onClickSignUp 			= function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
-var onClickSignIn 			= function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
-var onClickUserInfoUpdate 	= function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
-var onClickSignOff 			= function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
-var onClickMyProfileUpdate 	= function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
-var onClickDeleteAccount 	= function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
-
-$("#wrapper").on('click', 'a', function(e) {
-	 switch($(this).attr('id')) {
-	 case 'changeEn': onClickChangeEn(e);  break;
-	 case 'changeZh': onClickChangeZh(e); break;
-	 case 'changeKo': onClickChangeKo(e); break;
-	 case 'signOut': onClickSignOut(e); break;
-	 case 'signUp': onClickSignUp(e); break;
-	 case 'signIn': onClickSignIn(e); break;
-	 case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
-	 case 'signOff': onClickSignOff(e); break;
-	 case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
-	 case 'deleteAccount' : onClickDeleteAccount(e); break;
-	 }
-});
- 
-//Top menu action End
-
-
-$("#sendFacebook, #sendTwitter").click(function(e) {
-	e.preventDefault();
-	var $this = $(this);
-	
-	if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
-		var sns = $this.attr("id").substring(4).toLowerCase();
-		switch(sns) {
-		case "facebook" :
-			var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
-			$("div.content img").each(function() {
-				var that = $(this);
-				if(that.width() > 200 && that.height() > 200) {
-					imgUrl = that.attr("src");
-					return false;
-				}
-			});
-			
-			var data = {
-				app_id : $("#sd_appId").text(),
-				link : copyUrl,
-				picture : imgUrl,
-				name : $("title").text(),
-				caption : "developer.samsung.com",
-				description : $("div.content p").eq(0).text(),
-				redirectUri : "http://" + location.host + "/board/sns.do"
-			};
-			var url = "https://www.facebook.com/dialog/feed?" ;
-			url += "app_id=" + data.app_id + "&" ;
-			url += "link=" + data.link + "&" ;
-			url += "picture=" + data.picture + "&" ;
-			url += "name=" + encodeURIComponent(data.name) + "&" ;
-			url += "caption=" + encodeURIComponent(data.caption) + "&" ;
-			url += "description=" + encodeURIComponent(data.description) + "&" ;
-			url += "redirect_uri=" + data.redirectUri ;
-			sendSNS(sns, url, 850, 600);
-			break;
-		case "twitter" :
-			sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
-			break;
-		}
-	}
-	
-	function sendSNS(sns, url, iWidth, iHeight) {
-		var popObj = { url : url
-				     , width : iWidth
-				     , height: iHeight
-				     , target: sns
-				     , scrollbars: "yes"
-				     , resizeable: "yes"};
-	
-		$SD.popupCenter(popObj);
-	}
-})
- 
-//document rady End #########################################
- });
-
-;(function(){
-	window.deviceImageError = function(el) {
-		var noImage = noImage || '/images/common/device_details_noimage.gif';
-		if (el.src === noImage) 
-			return;
-		el.src = noImage;
-	};
-})();
-
-function commonDownload(fileName, categoryId){
-	if (fileName == "" || categoryId == ""){
-		alert("필요한 인자값을 확인해주세요!!!!")
-		return;
-	}else{
-		$SD.commonDownload(fileName, categoryId, function(data) {
-		});
-	}
-}
-
-function commonDownloadLog(fileFullPath, categoryId){
-	if (fileFullPath == "" || categoryId == ""){
-		alert("필요한 인자값을 확인해주세요!!")
-		return;
-	}else{
-		$SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
-		});
-	}
-}
-
-function commonDownloadLogTarget(fileFullPath, categoryId, target){
-	if (fileFullPath == "" || categoryId == ""){
-		alert("필요한 인자값을 확인해주세요!!")
-		return;
-	}else{
-		$SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
-		});
-	}
-}
-
-function commonAllShareClickCount(fileFullPath, categoryId){
-	if (fileFullPath == "" || categoryId == ""){
-		alert("필요한 인자값을 확인해주세요!!")
-		return;
-	}else{
-		$SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
-		});
-	}
-}
-
-/*
-function layer_view(id){
-
-	var $layer = $('#'+id);
-	var $down  = $('.license-layer').find('a#down');
-
-	$layer.show();
-	$layer.find('.close, #down').click(function(){
-		$layer.hide();
-	});
-
-	function countChecked() {
-		$(":checkbox").is(':checked') ? $down.show() : $down.hide()
-	}
-
-	$(":checkbox").click(countChecked);
-}
-*/
diff --git a/org.tizen.ui.guides/html/scripts/jquery.util.js b/org.tizen.ui.guides/html/scripts/jquery.util.js
deleted file mode 100755
index a8516b0..0000000
--- a/org.tizen.ui.guides/html/scripts/jquery.util.js
+++ /dev/null
@@ -1,1441 +0,0 @@
-/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
-(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
-
-
-/*! jQuery v1.7.1 jquery.com | jquery.org/license */
-(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
-f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
-{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
-
-/*
- * Metadata - jQuery plugin for parsing metadata from elements
- *
- * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- *
- * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
- *
- */
-
-/**
- * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
- * in the JSON will become a property of the element itself.
- *
- * There are three supported types of metadata storage:
- *
- *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
- *          
- *   class: Inside the class attribute, wrapped in curly braces: { }
- *   
- *   elem:  Inside a child element (e.g. a script tag). The
- *          name parameter indicates *which* element.
- *          
- * The metadata for an element is loaded the first time the element is accessed via jQuery.
- *
- * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
- * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
- * 
- * @name $.metadata.setType
- *
- * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("class")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from the class attribute
- * 
- * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("attr", "data")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a "data" attribute
- * 
- * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
- * @before $.metadata.setType("elem", "script")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a nested script element
- * 
- * @param String type The encoding type
- * @param String name The name of the attribute to be used to get metadata (optional)
- * @cat Plugins/Metadata
- * @descr Sets the type of encoding to be used when loading metadata for the first time
- * @type undefined
- * @see metadata()
- */
-
-(function($) {
-
-$.extend({
-	metadata : {
-		defaults : {
-			type: 'class',
-			name: 'metadata',
-			cre: /({.*})/,
-			single: 'metadata'
-		},
-		setType: function( type, name ){
-			this.defaults.type = type;
-			this.defaults.name = name;
-		},
-		get: function( elem, opts ){
-			var settings = $.extend({},this.defaults,opts);
-			// check for empty string in single property
-			if ( !settings.single.length ) settings.single = 'metadata';
-			
-			var data = $.data(elem, settings.single);
-			// returned cached data if it already exists
-			if ( data ) return data;
-			
-			data = "{}";
-			
-			if ( settings.type == "class" ) {
-				var m = settings.cre.exec( elem.className );
-				if ( m )
-					data = m[1];
-			} else if ( settings.type == "elem" ) {
-				if( !elem.getElementsByTagName )
-					return undefined;
-				var e = elem.getElementsByTagName(settings.name);
-				if ( e.length )
-					data = $.trim(e[0].innerHTML);
-			} else if ( elem.getAttribute != undefined ) {
-				var attr = elem.getAttribute( settings.name );
-				if ( attr )
-					data = attr;
-			}
-			
-			if ( data.indexOf( '{' ) <0 )
-			data = "{" + data + "}";
-			
-			data = eval("(" + data + ")");
-			
-			$.data( elem, settings.single, data );
-			return data;
-		}
-	}
-});
-
-/**
- * Returns the metadata object for the first member of the jQuery object.
- *
- * @name metadata
- * @descr Returns element's metadata object
- * @param Object opts An object contianing settings to override the defaults
- * @type jQuery
- * @cat Plugins/Metadata
- */
-$.fn.metadata = function( opts ){
-	return $.metadata.get( this[0], opts );
-};
-
-})(jQuery);
-
-
-/**
- * jQuery Validation Plugin 1.9.0
-
- *
- * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- * http://docs.jquery.com/Plugins/Validation
- *
- * Copyright (c) 2006 - 2011 Jì² rn Zaefferer
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- */
-
-/**
- * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
- */
-
-(function($) {
-
-$.extend($.fn, {
-	// http://docs.jquery.com/Plugins/Validation/validate
-	validate: function( options ) {
-
-		// if nothing is selected, return nothing; can't chain anyway
-		if (!this.length) {
-			options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
-			return;
-		}
-
-		// check if a validator for this form was already created
-		var validator = $.data(this[0], 'validator');
-		if ( validator ) {
-			return validator;
-		}
-
-		// Add novalidate tag if HTML5.
-		this.attr('novalidate', 'novalidate');
-
-		validator = new $.validator( options, this[0] );
-		$.data(this[0], 'validator', validator);
-
-		if ( validator.settings.onsubmit ) {
-
-			var inputsAndButtons = this.find("input, button");
-
-			// allow suppresing validation by adding a cancel class to the submit button
-			inputsAndButtons.filter(".cancel").click(function () {
-				validator.cancelSubmit = true;
-			});
-
-			// when a submitHandler is used, capture the submitting button
-			if (validator.settings.submitHandler) {
-				inputsAndButtons.filter(":submit").click(function () {
-					validator.submitButton = this;
-				});
-			}
-
-			// validate the form on submit
-			this.submit( function( event ) {
-				if ( validator.settings.debug )
-					// prevent form submit to be able to see console output
-					event.preventDefault();
-
-				function handle() {
-					if ( validator.settings.submitHandler ) {
-						if (validator.submitButton) {
-							// insert a hidden input as a replacement for the missing submit button
-							var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
-						}
-						validator.settings.submitHandler.call( validator, validator.currentForm );
-						if (validator.submitButton) {
-							// and clean up afterwards; thanks to no-block-scope, hidden can be referenced
-							hidden.remove();
-						}
-						return false;
-					}
-					return true;
-				}
-
-				// prevent submit for invalid forms or custom submit handlers
-				if ( validator.cancelSubmit ) {
-					validator.cancelSubmit = false;
-					return handle();
-				}
-				if ( validator.form() ) {
-					if ( validator.pendingRequest ) {
-						validator.formSubmitted = true;
-						return false;
-					}
-					return handle();
-				} else {
-					validator.focusInvalid();
-					return false;
-				}
-			});
-		}
-
-		return validator;
-	},
-	// http://docs.jquery.com/Plugins/Validation/valid
-	valid: function() {
-        if ( $(this[0]).is('form')) {
-            return this.validate().form();
-        } else {
-            var valid = true;
-            var validator = $(this[0].form).validate();
-            this.each(function() {
-				valid &= validator.element(this);
-            });
-            return valid;
-        }
-    },
-	// attributes: space seperated list of attributes to retrieve and remove
-	removeAttrs: function(attributes) {
-		var result = {},
-			$element = this;
-		$.each(attributes.split(/\s/), function(index, value) {
-			result[value] = $element.attr(value);
-			$element.removeAttr(value);
-		});
-		return result;
-	},
-	// http://docs.jquery.com/Plugins/Validation/rules
-	rules: function(command, argument) {
-		var element = this[0];
-
-		if (command) {
-			var settings = $.data(element.form, 'validator').settings;
-			var staticRules = settings.rules;
-			var existingRules = $.validator.staticRules(element);
-			switch(command) {
-			case "add":
-				$.extend(existingRules, $.validator.normalizeRule(argument));
-				staticRules[element.name] = existingRules;
-				if (argument.messages)
-					settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
-				break;
-			case "remove":
-				if (!argument) {
-					delete staticRules[element.name];
-					return existingRules;
-				}
-				var filtered = {};
-				$.each(argument.split(/\s/), function(index, method) {
-					filtered[method] = existingRules[method];
-					delete existingRules[method];
-				});
-				return filtered;
-			}
-		}
-
-		var data = $.validator.normalizeRules(
-		$.extend(
-			{},
-			$.validator.metadataRules(element),
-			$.validator.classRules(element),
-			$.validator.attributeRules(element),
-			$.validator.staticRules(element)
-		), element);
-
-		// make sure required is at front
-		if (data.required) {
-			var param = data.required;
-			delete data.required;
-			data = $.extend({required: param}, data);
-		}
-
-		return data;
-	}
-});
-
-// Custom selectors
-$.extend($.expr[":"], {
-	// http://docs.jquery.com/Plugins/Validation/blank
-	blank: function(a) {return !$.trim("" + a.value);},
-	// http://docs.jquery.com/Plugins/Validation/filled
-	filled: function(a) {return !!$.trim("" + a.value);},
-	// http://docs.jquery.com/Plugins/Validation/unchecked
-	unchecked: function(a) {return !a.checked;}
-});
-
-// constructor for validator
-$.validator = function( options, form ) {
-	this.settings = $.extend( true, {}, $.validator.defaults, options );
-	this.currentForm = form;
-	this.init();
-};
-
-$.validator.format = function(source, params) {
-	if ( arguments.length == 1 )
-		return function() {
-			var args = $.makeArray(arguments);
-			args.unshift(source);
-			return $.validator.format.apply( this, args );
-		};
-	if ( arguments.length > 2 && params.constructor != Array  ) {
-		params = $.makeArray(arguments).slice(1);
-	}
-	if ( params.constructor != Array ) {
-		params = [ params ];
-	}
-	$.each(params, function(i, n) {
-		source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
-	});
-	return source;
-};
-
-$.extend($.validator, {
-
-	defaults: {
-		messages: {},
-		groups: {},
-		rules: {},
-		errorClass: "error",
-		validClass: "valid",
-		errorElement: "label",
-		focusInvalid: true,
-		errorContainer: $( [] ),
-		errorLabelContainer: $( [] ),
-		onsubmit: true,
-		ignore: ":hidden",
-		ignoreTitle: false,
-		onfocusin: function(element, event) {
-			this.lastActive = element;
-
-			// hide error label and remove error class on focus if enabled
-			if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
-				this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
-				this.addWrapper(this.errorsFor(element)).hide();
-			}
-		},
-		onfocusout: function(element, event) {
-			if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
-				this.element(element);
-			}
-		},
-		onkeyup: function(element, event) {
-			if ( element.name in this.submitted || element == this.lastElement ) {
-				this.element(element);
-			}
-		},
-		onclick: function(element, event) {
-			// click on selects, radiobuttons and checkboxes
-			if ( element.name in this.submitted )
-				this.element(element);
-			// or option elements, check parent select in that case
-			else if (element.parentNode.name in this.submitted)
-				this.element(element.parentNode);
-		},
-		highlight: function(element, errorClass, validClass) {
-			if (element.type === 'radio') {
-				this.findByName(element.name).addClass(errorClass).removeClass(validClass);
-			} else {
-				$(element).addClass(errorClass).removeClass(validClass);
-			}
-		},
-		unhighlight: function(element, errorClass, validClass) {
-			if (element.type === 'radio') {
-				this.findByName(element.name).removeClass(errorClass).addClass(validClass);
-			} else {
-				$(element).removeClass(errorClass).addClass(validClass);
-			}
-		}
-	},
-
-	// http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
-	setDefaults: function(settings) {
-		$.extend( $.validator.defaults, settings );
-	},
-
-	messages: {
-		required: "This field is required.",
-		remote: "Please fix this field.",
-		email: "Please enter a valid email address.",
-		url: "Please enter a valid URL.",
-		date: "Please enter a valid date.",
-		dateISO: "Please enter a valid date (ISO).",
-		number: "Please enter a valid number.",
-		digits: "Please enter only digits.",
-		creditcard: "Please enter a valid credit card number.",
-		equalTo: "Please enter the same value again.",
-		accept: "Please enter a value with a valid extension.",
-		maxlength: $.validator.format("Please enter no more than {0} characters."),
-		minlength: $.validator.format("Please enter at least {0} characters."),
-		rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
-		range: $.validator.format("Please enter a value between {0} and {1}."),
-		max: $.validator.format("Please enter a value less than or equal to {0}."),
-		min: $.validator.format("Please enter a value greater than or equal to {0}.")
-	},
-
-	autoCreateRanges: false,
-
-	prototype: {
-
-		init: function() {
-			this.labelContainer = $(this.settings.errorLabelContainer);
-			this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
-			this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
-			this.submitted = {};
-			this.valueCache = {};
-			this.pendingRequest = 0;
-			this.pending = {};
-			this.invalid = {};
-			this.reset();
-
-			var groups = (this.groups = {});
-			$.each(this.settings.groups, function(key, value) {
-				$.each(value.split(/\s/), function(index, name) {
-					groups[name] = key;
-				});
-			});
-			var rules = this.settings.rules;
-			$.each(rules, function(key, value) {
-				rules[key] = $.validator.normalizeRule(value);
-			});
-
-			function delegate(event) {
-				var validator = $.data(this[0].form, "validator"),
-					eventType = "on" + event.type.replace(/^validate/, "");
-				validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
-			}
-			$(this.currentForm)
-			       .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
-						"[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
-						"[type='email'], [type='datetime'], [type='date'], [type='month'], " +
-						"[type='week'], [type='time'], [type='datetime-local'], " +
-						"[type='range'], [type='color'] ",
-						"focusin focusout keyup", delegate)
-				.validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
-
-			if (this.settings.invalidHandler)
-				$(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Validator/form
-		form: function() {
-			this.checkForm();
-			$.extend(this.submitted, this.errorMap);
-			this.invalid = $.extend({}, this.errorMap);
-			if (!this.valid())
-				$(this.currentForm).triggerHandler("invalid-form", [this]);
-			this.showErrors();
-			return this.valid();
-		},
-
-		// 원본소스
-		/*
-		checkForm: function() {
-			this.prepareForm();
-			for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-				this.check( elements[i] );
-			}
-			return this.valid();
-		},
-		*/
-
-		// 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
-		checkForm: function() {
-			this.prepareForm();
-			for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-				if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
-					for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
-						this.check( this.findByName( elements[i].name )[cnt] );
-					}
-				} else {
-					this.check( elements[i] );
-				}
-			}
-			return this.valid();
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Validator/element
-		element: function( element ) {
-			element = this.validationTargetFor( this.clean( element ) );
-			this.lastElement = element;
-			this.prepareElement( element );
-			this.currentElements = $(element);
-			var result = this.check( element );
-			if ( result ) {
-				delete this.invalid[element.name];
-			} else {
-				this.invalid[element.name] = true;
-			}
-			if ( !this.numberOfInvalids() ) {
-				// Hide error containers on last error
-				this.toHide = this.toHide.add( this.containers );
-			}
-			this.showErrors();
-			return result;
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Validator/showErrors
-		showErrors: function(errors) {
-			if(errors) {
-				// add items to error list and map
-				$.extend( this.errorMap, errors );
-				this.errorList = [];
-				for ( var name in errors ) {
-					this.errorList.push({
-						message: errors[name],
-						element: this.findByName(name)[0]
-					});
-				}
-				// remove items from success list
-				this.successList = $.grep( this.successList, function(element) {
-					return !(element.name in errors);
-				});
-			}
-			this.settings.showErrors
-				? this.settings.showErrors.call( this, this.errorMap, this.errorList )
-				: this.defaultShowErrors();
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Validator/resetForm
-		resetForm: function() {
-			if ( $.fn.resetForm )
-				$( this.currentForm ).resetForm();
-			this.submitted = {};
-			this.lastElement = null;
-			this.prepareForm();
-			this.hideErrors();
-			this.elements().removeClass( this.settings.errorClass );
-		},
-
-		numberOfInvalids: function() {
-			return this.objectLength(this.invalid);
-		},
-
-		objectLength: function( obj ) {
-			var count = 0;
-			for ( var i in obj )
-				count++;
-			return count;
-		},
-
-		hideErrors: function() {
-			this.addWrapper( this.toHide ).hide();
-		},
-
-		valid: function() {
-			return this.size() == 0;
-		},
-
-		size: function() {
-			return this.errorList.length;
-		},
-
-		focusInvalid: function() {
-			if( this.settings.focusInvalid ) {
-				try {
-					$(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
-					.filter(":visible")
-					.focus()
-					// manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
-					.trigger("focusin");
-				} catch(e) {
-					// ignore IE throwing errors when focusing hidden elements
-				}
-			}
-		},
-
-		findLastActive: function() {
-			var lastActive = this.lastActive;
-			return lastActive && $.grep(this.errorList, function(n) {
-				return n.element.name == lastActive.name;
-			}).length == 1 && lastActive;
-		},
-
-		elements: function() {
-			var validator = this,
-				rulesCache = {};
-
-			// select all valid inputs inside the form (no submit or reset buttons)
-			return $(this.currentForm)
-			.find("input, select, textarea")
-			.not(":submit, :reset, :image, [disabled]")
-			.not( this.settings.ignore )
-			.filter(function() {
-				!this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
-
-				// select only the first element for each name, and only those with rules specified
-				if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
-					return false;
-
-				rulesCache[this.name] = true;
-				return true;
-			});
-		},
-
-		clean: function( selector ) {
-			return $( selector )[0];
-		},
-
-		errors: function() {
-			return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
-		},
-
-		reset: function() {
-			this.successList = [];
-			this.errorList = [];
-			this.errorMap = {};
-			this.toShow = $([]);
-			this.toHide = $([]);
-			this.currentElements = $([]);
-		},
-
-		prepareForm: function() {
-			this.reset();
-			this.toHide = this.errors().add( this.containers );
-		},
-
-		prepareElement: function( element ) {
-			this.reset();
-			this.toHide = this.errorsFor(element);
-		},
-
-		check: function( element ) {
-			element = this.validationTargetFor( this.clean( element ) );
-
-			var rules = $(element).rules();
-			var dependencyMismatch = false;
-			for (var method in rules ) {
-				var rule = { method: method, parameters: rules[method] };
-				try {
-					var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
-
-					// if a method indicates that the field is optional and therefore valid,
-					// don't mark it as valid when there are no other rules
-					if ( result == "dependency-mismatch" ) {
-						dependencyMismatch = true;
-						continue;
-					}
-					dependencyMismatch = false;
-
-					if ( result == "pending" ) {
-						this.toHide = this.toHide.not( this.errorsFor(element) );
-						return;
-					}
-
-					if( !result ) {
-						this.formatAndAdd( element, rule );
-						return false;
-					}
-				} catch(e) {
-					this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
-						 + ", check the '" + rule.method + "' method", e);
-					throw e;
-				}
-			}
-			if (dependencyMismatch)
-				return;
-			if ( this.objectLength(rules) )
-				this.successList.push(element);
-			return true;
-		},
-
-		// return the custom message for the given element and validation method
-		// specified in the element's "messages" metadata
-		customMetaMessage: function(element, method) {
-			if (!$.metadata)
-				return;
-
-			var meta = this.settings.meta
-				? $(element).metadata()[this.settings.meta]
-				: $(element).metadata();
-
-			return meta && meta.messages && meta.messages[method];
-		},
-
-		// return the custom message for the given element name and validation method
-		customMessage: function( name, method ) {
-			var m = this.settings.messages[name];
-			return m && (m.constructor == String
-				? m
-				: m[method]);
-		},
-
-		// return the first defined argument, allowing empty strings
-		findDefined: function() {
-			for(var i = 0; i < arguments.length; i++) {
-				if (arguments[i] !== undefined)
-					return arguments[i];
-			}
-			return undefined;
-		},
-
-		defaultMessage: function( element, method) {
-			return this.findDefined(
-				this.customMessage( element.name, method ),
-				this.customMetaMessage( element, method ),
-				// title is never undefined, so handle empty string as undefined
-				!this.settings.ignoreTitle && element.title || undefined,
-				$.validator.messages[method],
-				"<strong>Warning: No message defined for " + element.name + "</strong>"
-			);
-		},
-
-		formatAndAdd: function( element, rule ) {
-			var message = this.defaultMessage( element, rule.method ),
-				theregex = /\$?\{(\d+)\}/g;
-			if ( typeof message == "function" ) {
-				message = message.call(this, rule.parameters, element);
-			} else if (theregex.test(message)) {
-				message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
-			}
-			this.errorList.push({
-				message: message,
-				element: element
-			});
-
-			this.errorMap[element.name] = message;
-			this.submitted[element.name] = message;
-		},
-
-		addWrapper: function(toToggle) {
-			if ( this.settings.wrapper )
-				toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
-			return toToggle;
-		},
-
-		defaultShowErrors: function() {
-			for ( var i = 0; this.errorList[i]; i++ ) {
-				var error = this.errorList[i];
-				this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
-				this.showLabel( error.element, error.message );
-			}
-			if( this.errorList.length ) {
-				this.toShow = this.toShow.add( this.containers );
-			}
-			if (this.settings.success) {
-				for ( var i = 0; this.successList[i]; i++ ) {
-					this.showLabel( this.successList[i] );
-				}
-			}
-			if (this.settings.unhighlight) {
-				for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
-					this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
-				}
-			}
-			this.toHide = this.toHide.not( this.toShow );
-			this.hideErrors();
-			this.addWrapper( this.toShow ).show();
-		},
-
-		validElements: function() {
-			return this.currentElements.not(this.invalidElements());
-		},
-
-		invalidElements: function() {
-			return $(this.errorList).map(function() {
-				return this.element;
-			});
-		},
-
-		showLabel: function(element, message) {
-			var label = this.errorsFor( element );
-			if ( label.length ) {
-				// refresh error/success class
-				label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
-
-				// check if we have a generated label, replace the message then
-				label.attr("generated") && label.html(message);
-			} else {
-				// create label
-				label = $("<" + this.settings.errorElement + "/>")
-					.attr({"for":  this.idOrName(element), generated: true})
-					.addClass(this.settings.errorClass)
-					.html(message || "");
-				if ( this.settings.wrapper ) {
-					// make sure the element is visible, even in IE
-					// actually showing the wrapped element is handled elsewhere
-					label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
-				}
-				if ( !this.labelContainer.append(label).length )
-					this.settings.errorPlacement
-						? this.settings.errorPlacement(label, $(element) )
-						: label.insertAfter(element);
-			}
-			if ( !message && this.settings.success ) {
-				label.text("");
-				typeof this.settings.success == "string"
-					? label.addClass( this.settings.success )
-					: this.settings.success( label );
-			}
-			this.toShow = this.toShow.add(label);
-		},
-
-		errorsFor: function(element) {
-			var name = this.idOrName(element);
-    		return this.errors().filter(function() {
-				return $(this).attr('for') == name;
-			});
-		},
-
-		idOrName: function(element) {
-			return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
-		},
-
-		validationTargetFor: function(element) {
-			// if radio/checkbox, validate first element in group instead
-			if (this.checkable(element)) {
-				element = this.findByName( element.name ).not(this.settings.ignore)[0];
-			}
-			return element;
-		},
-
-		checkable: function( element ) {
-			return /radio|checkbox/i.test(element.type);
-		},
-
-		findByName: function( name ) {
-			// select by name and filter by form for performance over form.find("[name=...]")
-			var form = this.currentForm;
-			return $(document.getElementsByName(name)).map(function(index, element) {
-				return element.form == form && element.name == name && element  || null;
-			});
-		},
-
-		getLength: function(value, element) {
-			switch( element.nodeName.toLowerCase() ) {
-			case 'select':
-				return $("option:selected", element).length;
-			case 'input':
-				if( this.checkable( element) )
-					return this.findByName(element.name).filter(':checked').length;
-			}
-			return value.length;
-		},
-
-		depend: function(param, element) {
-			return this.dependTypes[typeof param]
-				? this.dependTypes[typeof param](param, element)
-				: true;
-		},
-
-		dependTypes: {
-			"boolean": function(param, element) {
-				return param;
-			},
-			"string": function(param, element) {
-				return !!$(param, element.form).length;
-			},
-			"function": function(param, element) {
-				return param(element);
-			}
-		},
-
-		optional: function(element) {
-			return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
-		},
-
-		startRequest: function(element) {
-			if (!this.pending[element.name]) {
-				this.pendingRequest++;
-				this.pending[element.name] = true;
-			}
-		},
-
-		stopRequest: function(element, valid) {
-			this.pendingRequest--;
-			// sometimes synchronization fails, make sure pendingRequest is never < 0
-			if (this.pendingRequest < 0)
-				this.pendingRequest = 0;
-			delete this.pending[element.name];
-			if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
-				$(this.currentForm).submit();
-				this.formSubmitted = false;
-			} else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
-				$(this.currentForm).triggerHandler("invalid-form", [this]);
-				this.formSubmitted = false;
-			}
-		},
-
-		previousValue: function(element) {
-			return $.data(element, "previousValue") || $.data(element, "previousValue", {
-				old: null,
-				valid: true,
-				message: this.defaultMessage( element, "remote" )
-			});
-		}
-
-	},
-
-	classRuleSettings: {
-		required: {required: true},
-		email: {email: true},
-		url: {url: true},
-		date: {date: true},
-		dateISO: {dateISO: true},
-		dateDE: {dateDE: true},
-		number: {number: true},
-		numberDE: {numberDE: true},
-		digits: {digits: true},
-		creditcard: {creditcard: true}
-	},
-
-	addClassRules: function(className, rules) {
-		className.constructor == String ?
-			this.classRuleSettings[className] = rules :
-			$.extend(this.classRuleSettings, className);
-	},
-
-	classRules: function(element) {
-		var rules = {};
-		var classes = $(element).attr('class');
-		classes && $.each(classes.split(' '), function() {
-			if (this in $.validator.classRuleSettings) {
-				$.extend(rules, $.validator.classRuleSettings[this]);
-			}
-		});
-		return rules;
-	},
-
-	attributeRules: function(element) {
-		var rules = {};
-		var $element = $(element);
-
-		for (var method in $.validator.methods) {
-			var value;
-			// If .prop exists (jQuery >= 1.6), use it to get true/false for required
-			if (method === 'required' && typeof $.fn.prop === 'function') {
-				value = $element.prop(method);
-			} else {
-				value = $element.attr(method);
-			}
-			if (value) {
-				rules[method] = value;
-			} else if ($element[0].getAttribute("type") === method) {
-				rules[method] = true;
-			}
-		}
-
-		// maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
-		if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
-			delete rules.maxlength;
-		}
-
-		return rules;
-	},
-
-	metadataRules: function(element) {
-		if (!$.metadata) return {};
-
-		var meta = $.data(element.form, 'validator').settings.meta;
-		return meta ?
-			$(element).metadata()[meta] :
-			$(element).metadata();
-	},
-
-	staticRules: function(element) {
-		var rules = {};
-		var validator = $.data(element.form, 'validator');
-		if (validator.settings.rules) {
-			rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
-		}
-		return rules;
-	},
-
-	normalizeRules: function(rules, element) {
-		// handle dependency check
-		$.each(rules, function(prop, val) {
-			// ignore rule when param is explicitly false, eg. required:false
-			if (val === false) {
-				delete rules[prop];
-				return;
-			}
-			if (val.param || val.depends) {
-				var keepRule = true;
-				switch (typeof val.depends) {
-					case "string":
-						keepRule = !!$(val.depends, element.form).length;
-						break;
-					case "function":
-						keepRule = val.depends.call(element, element);
-						break;
-				}
-				if (keepRule) {
-					rules[prop] = val.param !== undefined ? val.param : true;
-				} else {
-					delete rules[prop];
-				}
-			}
-		});
-
-		// evaluate parameters
-		$.each(rules, function(rule, parameter) {
-			rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
-		});
-
-		// clean number parameters
-		$.each(['minlength', 'maxlength', 'min', 'max'], function() {
-			if (rules[this]) {
-				rules[this] = Number(rules[this]);
-			}
-		});
-		$.each(['rangelength', 'range'], function() {
-			if (rules[this]) {
-				rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
-			}
-		});
-
-		if ($.validator.autoCreateRanges) {
-			// auto-create ranges
-			if (rules.min && rules.max) {
-				rules.range = [rules.min, rules.max];
-				delete rules.min;
-				delete rules.max;
-			}
-			if (rules.minlength && rules.maxlength) {
-				rules.rangelength = [rules.minlength, rules.maxlength];
-				delete rules.minlength;
-				delete rules.maxlength;
-			}
-		}
-
-		// To support custom messages in metadata ignore rule methods titled "messages"
-		if (rules.messages) {
-			delete rules.messages;
-		}
-
-		return rules;
-	},
-
-	// Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
-	normalizeRule: function(data) {
-		if( typeof data == "string" ) {
-			var transformed = {};
-			$.each(data.split(/\s/), function() {
-				transformed[this] = true;
-			});
-			data = transformed;
-		}
-		return data;
-	},
-
-	// http://docs.jquery.com/Plugins/Validation/Validator/addMethod
-	addMethod: function(name, method, message) {
-		$.validator.methods[name] = method;
-		$.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
-		if (method.length < 3) {
-			$.validator.addClassRules(name, $.validator.normalizeRule(name));
-		}
-	},
-
-	methods: {
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/required
-		required: function(value, element, param) {
-			// check if dependency is met
-			if ( !this.depend(param, element) )
-				return "dependency-mismatch";
-			switch( element.nodeName.toLowerCase() ) {
-			case 'select':
-				// could be an array for select-multiple or a string, both are fine this way
-				var val = $(element).val();
-				return val && val.length > 0;
-			case 'input':
-				if ( this.checkable(element) )
-					return this.getLength(value, element) > 0;
-			default:
-				return $.trim(value).length > 0;
-			}
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/remote
-		remote: function(value, element, param) {
-			if ( this.optional(element) )
-				return "dependency-mismatch";
-
-			var previous = this.previousValue(element);
-			if (!this.settings.messages[element.name] )
-				this.settings.messages[element.name] = {};
-			previous.originalMessage = this.settings.messages[element.name].remote;
-			this.settings.messages[element.name].remote = previous.message;
-
-			param = typeof param == "string" && {url:param} || param;
-
-			if ( this.pending[element.name] ) {
-				return "pending";
-			}
-			if ( previous.old === value ) {
-				return previous.valid;
-			}
-
-			previous.old = value;
-			var validator = this;
-			this.startRequest(element);
-			var data = {};
-			data[element.name] = value;
-			$.ajax($.extend(true, {
-				url: param,
-				mode: "abort",
-				port: "validate" + element.name,
-				dataType: "json",
-				data: data,
-				success: function(response) {
-					validator.settings.messages[element.name].remote = previous.originalMessage;
-					var valid = response === true;
-					if ( valid ) {
-						var submitted = validator.formSubmitted;
-						validator.prepareElement(element);
-						validator.formSubmitted = submitted;
-						validator.successList.push(element);
-						validator.showErrors();
-					} else {
-						var errors = {};
-						var message = response || validator.defaultMessage( element, "remote" );
-						errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
-						validator.showErrors(errors);
-					}
-					previous.valid = valid;
-					validator.stopRequest(element, valid);
-				}
-			}, param));
-			return "pending";
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/minlength
-		minlength: function(value, element, param) {
-			return this.optional(element) || this.getLength($.trim(value), element) >= param;
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/maxlength
-		maxlength: function(value, element, param) {
-			return this.optional(element) || this.getLength($.trim(value), element) <= param;
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/rangelength
-		rangelength: function(value, element, param) {
-			var length = this.getLength($.trim(value), element);
-			return this.optional(element) || ( length >= param[0] && length <= param[1] );
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/min
-		min: function( value, element, param ) {
-			return this.optional(element) || value >= param;
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/max
-		max: function( value, element, param ) {
-			return this.optional(element) || value <= param;
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/range
-		range: function( value, element, param ) {
-			return this.optional(element) || ( value >= param[0] && value <= param[1] );
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/email
-		email: function(value, element) {
-			// contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
-			return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/url
-		url: function(value, element) {
-			// contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
-			return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/date
-		date: function(value, element) {
-			return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/dateISO
-		dateISO: function(value, element) {
-			return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/number
-		number: function(value, element) {
-			return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/digits
-		digits: function(value, element) {
-			return this.optional(element) || /^\d+$/.test(value);
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/creditcard
-		// based on http://en.wikipedia.org/wiki/Luhn
-		creditcard: function(value, element) {
-			if ( this.optional(element) )
-				return "dependency-mismatch";
-			// accept only spaces, digits and dashes
-			if (/[^0-9 -]+/.test(value))
-				return false;
-			var nCheck = 0,
-				nDigit = 0,
-				bEven = false;
-
-			value = value.replace(/\D/g, "");
-
-			for (var n = value.length - 1; n >= 0; n--) {
-				var cDigit = value.charAt(n);
-				var nDigit = parseInt(cDigit, 10);
-				if (bEven) {
-					if ((nDigit *= 2) > 9)
-						nDigit -= 9;
-				}
-				nCheck += nDigit;
-				bEven = !bEven;
-			}
-
-			return (nCheck % 10) == 0;
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/accept
-		accept: function(value, element, param) {
-			param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
-			return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
-		},
-
-		// http://docs.jquery.com/Plugins/Validation/Methods/equalTo
-		equalTo: function(value, element, param) {
-			// bind to the blur event of the target in order to revalidate whenever the target field is updated
-			// TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
-			var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
-				$(element).valid();
-			});
-			return value == target.val();
-		}
-
-	}
-
-});
-
-// deprecated, use $.validator.format instead
-$.format = $.validator.format;
-
-})(jQuery);
-
-// ajax mode: abort
-// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
-// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
-;(function($) {
-	var pendingRequests = {};
-	// Use a prefilter if available (1.5+)
-	if ( $.ajaxPrefilter ) {
-		$.ajaxPrefilter(function(settings, _, xhr) {
-			var port = settings.port;
-			if (settings.mode == "abort") {
-				if ( pendingRequests[port] ) {
-					pendingRequests[port].abort();
-				}
-				pendingRequests[port] = xhr;
-			}
-		});
-	} else {
-		// Proxy ajax
-		var ajax = $.ajax;
-		$.ajax = function(settings) {
-			var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
-				port = ( "port" in settings ? settings : $.ajaxSettings ).port;
-			if (mode == "abort") {
-				if ( pendingRequests[port] ) {
-					pendingRequests[port].abort();
-				}
-				return (pendingRequests[port] = ajax.apply(this, arguments));
-			}
-			return ajax.apply(this, arguments);
-		};
-	}
-})(jQuery);
-
-// provides cross-browser focusin and focusout events
-// IE has native support, in other browsers, use event caputuring (neither bubbles)
-
-// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
-// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
-;(function($) {
-	// only implement if not provided by jQuery core (since 1.4)
-	// TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
-	if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
-		$.each({
-			focus: 'focusin',
-			blur: 'focusout'
-		}, function( original, fix ){
-			$.event.special[fix] = {
-				setup:function() {
-					this.addEventListener( original, handler, true );
-				},
-				teardown:function() {
-					this.removeEventListener( original, handler, true );
-				},
-				handler: function(e) {
-					arguments[0] = $.event.fix(e);
-					arguments[0].type = fix;
-					return $.event.handle.apply(this, arguments);
-				}
-			};
-			function handler(e) {
-				e = $.event.fix(e);
-				e.type = fix;
-				return $.event.handle.call(this, e);
-			}
-		});
-	};
-	$.extend($.fn, {
-		validateDelegate: function(delegate, type, handler) {
-			return this.bind(type, function(event) {
-				var target = $(event.target);
-				if (target.is(delegate)) {
-					return handler.apply(target, arguments);
-				}
-			});
-		}
-	});
-})(jQuery);
-
-/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
- * Licensed under the MIT License (LICENSE.txt).
- *
- * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
- * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
- * Thanks to: Seamus Leahy for adding deltaX and deltaY
- *
- * Version: 3.0.6
- * 
- * Requires: 1.2.2+
- */
-
-(function($) {
-
-var types = ['DOMMouseScroll', 'mousewheel'];
-
-if ($.event.fixHooks) {
-    for ( var i=types.length; i; ) {
-        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
-    }
-}
-
-$.event.special.mousewheel = {
-    setup: function() {
-        if ( this.addEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.addEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = handler;
-        }
-    },
-    
-    teardown: function() {
-        if ( this.removeEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.removeEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = null;
-        }
-    }
-};
-
-$.fn.extend({
-    mousewheel: function(fn) {
-        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
-    },
-    
-    unmousewheel: function(fn) {
-        return this.unbind("mousewheel", fn);
-    }
-});
-
-
-function handler(event) {
-    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
-    event = $.event.fix(orgEvent);
-    event.type = "mousewheel";
-    
-    // Old school scrollwheel delta
-    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
-    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
-    
-    // New school multidimensional scroll (touchpads) deltas
-    deltaY = delta;
-    
-    // Gecko
-    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
-        deltaY = 0;
-        deltaX = -1*delta;
-    }
-    
-    // Webkit
-    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
-    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
-    
-    // Add event and delta to the front of the arguments
-    args.unshift(event, delta, deltaX, deltaY);
-    
-    return ($.event.dispatch || $.event.handle).apply(this, args);
-}
-
-})(jQuery);
-
-/*
- * jScrollPane - v2.0.0beta12 - 2012-07-24
- * http://jscrollpane.kelvinluck.com/
- *
- * Copyright (c) 2010 Kelvin Luck
- * Dual licensed under the MIT and GPL licenses.
- */
-(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
-if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
-}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
-})}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/scripts/jquery.zclip.min.js b/org.tizen.ui.guides/html/scripts/jquery.zclip.min.js
deleted file mode 100755
index 3548cc2..0000000
--- a/org.tizen.ui.guides/html/scripts/jquery.zclip.min.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * zClip :: jQuery ZeroClipboard v1.1.1
- * http://steamdev.com/zclip
- *
- * Copyright 2011, SteamDev
- * Released under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- *
- * Date: Wed Jun 01, 2011
- */
-
-(function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/scripts/navi.js b/org.tizen.ui.guides/html/scripts/navi.js
deleted file mode 100755
index e4569c3..0000000
--- a/org.tizen.ui.guides/html/scripts/navi.js
+++ /dev/null
@@ -1,192 +0,0 @@
-//<![CDATA[
-    var staticURL = "http://img-developer.samsung.com";
-   	var sslCall = "";
-
-   	if('' !== 'N') {
-		var locationStr = location.href;
-		if(locationStr.indexOf("https://") > -1) {
-			location.href = "http://" + locationStr.substring(8);
-		}     
-    }
-
-//    	if( typeof($) === function ) {
-   		//https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
-   		//? ??? ?? ?? ??? ?? ?? ???.
-//    	}
-    $SD.pagination.alt = {
-   		first:"go first",
-   		prev:"go prev",
-   		next:"go next",
-   		last:"go last"
-    };
-    $(document).ready(function(){
-    	var myVar;
-	    topSearchInit();//top search ??
-	    $('#searchTop').attr("autocomplete","off");
-	    var searchingBoolean = false;
-	    
-	    var topSearchChange = function(){
-	    	
-	    	if (searchingBoolean) return;
-	    	
-			var searchInput = $('#searchTop').val();
-			
-			if($('#searchTop').val() != ""){
-				$("#topAutocomplete").hide();
-				searchingBoolean = true;
-				
-				var jsonData = {
-						url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
-						async : true,
-						data : { searchInput : searchInput},
-						success : function(data){
-							if (searchInput == $('#searchTop').val()){
-								var autoComplete = data.kwdNm;
-								var tmpHtml = "";
-								
-								if (autoComplete.length > 0){
-									$('#topAutocomplete').children().remove();
-									$('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
-									$.each(autoComplete, function(i, item){
-										var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
-										a.data('keyword', item.kwdNm);
-										$('#topAutocompleteList').append($('<li><\/li>').html(a));
-									});
-									$("#topAutocompleteList").find("li").last().on("keydown", function(e) {
-										if(e.which == 9 && e.shiftKey) {
-											return true;
-										}
-										
-										if(e.which == 9) {
-											e.preventDefault();
-											$('#topAutocomplete').hide();	
-											setTimeout(function() {
-												$("#searchTopBtn").focus();
-											}, 1);
-										}
-										
-									});
-									$("#searchTopBtn").off("focusout", function(e) {});
-								    $("#searchTopBtn").on("focusout", function(e) {
-										$('#topAutocomplete').hide();
-									});
-								}else{
-									$('#topAutocomplete').children().remove();
-								}
-								if($('#searchTop').val() == ""){
-									$("#topAutocomplete").hide();
-									searchingBoolean = false;
-									return;
-								}else{
-									if (searchInput == $('#searchTop').val()){
-										searchingBoolean = false;
-									}else{
-										searchingBoolean = false;
-										topSearchChange();
-									}
-								}
-								if (autoComplete.length == 0){
-									$("#topAutocomplete").hide();
-								}else{
-									if (searchInput == $('#searchTop').val()){
-										$("#topAutocomplete").show();
-										var $searchList = $("#topAutocomplete").find('ul');
-										var hei = $searchList.outerHeight();
-										if(hei>180){
-											$searchList.css({'height':'180px','overflow-y':'auto'});
-										}
-									}else{
-										searchingBoolean = false;
-										topSearchChange();
-									}
-								}
-							}else{
-								searchingBoolean = false;
-								topSearchChange();
-							}
-						},
-						error : function() {searchingBoolean = false;}
-						
-				};
-				//setTimeout(function(){$SD.ajax.get(jsonData);},100);
-				$SD.ajax.get(jsonData);
-				searchingBoolean = false;
-			}
-			
-			//console.log("/search/autoComplete.do end");
-			//console.groupEnd();
-		};
-		
-		$('#searchTop').keyup(function(e){
-			if($('#searchTop').val() == ""){
-				$('#topAutocomplete').children().remove();
-				$("#topAutocomplete").hide();
-			}else{
-				if(e.which == 13){
-					search();
-				}else{
-					topSearchChange();
-				}
-			}
-		});
-		
-		var search = function(){
-			if($.trim($('#searchTop').val()) == ""){
-				alert('Search keyword is required.');
-			}else{
-				$('#topSearchForm').submit();
-			}
-		};
-		$("#topAutocomplete").on('mousedown','ul li a', function(e){
-			e.preventDefault();
-			var keyword = $(this).data('keyword');
-			$("#searchTop").val(keyword);
-			$('#topSearchForm').submit();
-		});
-		
-		$("#topAutocomplete").on('keydown keypress','ul li a', function(e){
-			if(e.which == 13) {
-				e.preventDefault();
-				var keyword = $(this).data('keyword');
-				$("#searchTop").val(keyword);
-				$('#topSearchForm').submit();			
-			}
-		});
-		
-		$('#searchTopBtn').click(function(e){
-			search();	
-		});  
-    });
-    
-    function topSearchEnter(){
-    	if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
-    		alert('Search keyword is required.');
-    		return false;
-    	}else{
-    		return true;
-    	}
-    }
-
-/* Tracking Code TOTAL */
-		var _gaq = _gaq || [];
-		var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
-		_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
-		_gaq.push(['_setAccount', 'UA-6892706-3']);
-		_gaq.push(['_setDomainName', 'samsung.com']);
-		_gaq.push(['_setAllowLinker', true]);
-		_gaq.push(['_trackPageview']);
-		(function() {
-		  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-		  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-		  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-		})();
-	
-		<!--// Tracking Code 1 -->
-			var _gaq = _gaq || [];
-			_gaq.push(['_setAccount', 'UA-6892706-4']);
-			_gaq.push(['_trackPageview']);
-			(function() {
-			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-			})();
diff --git a/org.tizen.ui.guides/html/scripts/search.js b/org.tizen.ui.guides/html/scripts/search.js
deleted file mode 100755
index a67a795..0000000
--- a/org.tizen.ui.guides/html/scripts/search.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
- */
-function searchInit()
-{
-	var focusTarget = "input";
-
-	//$("#autocomplete").hide();
-
-	//$("#searchInput").bind("keydown", checkSearchText);
-	
-	$("#searchInput").focusout(function() {
-		if( focusTarget == "dropdown" )
-		{
-			return false;
-		}
-		else
-		{
-			//toggleClass( false );
-		}
-	});
-	
-	$( "#searchInput" ).focusin( function()	{
-		focusTarget = "input";
-	});
-
-	$("#btnDropdown").mousedown( function(){
-		focusTarget = "dropdown";
-	});
-
-	$(".autocomplete ul li").focusin( function() {
-		//
-	});
-	
-	$("#autocomplete").bind("mouseleave",function(){
-		$(this).hide();
-		$("#btnDropdown").removeClass("dropdownoff");
-		$("#btnDropdown").addClass("dropdown");		
-	});
-
-	$(".autocomplete ul li:last-child").focusout( function() {
-		toggleClass( false );
-	});
-	
-	$("#btnDropdown").click( function(){
-		//alert("btn click");
-		if( $("#searchInput").val().length == 0 ){ 
-			return false;
-		}
-		else{
-			if( $("#btnDropdown").hasClass("dropdown") ){
-				toggleClass( true );
-			}
-			else{
-				toggleClass( false );
-			}
-		}
-
-		return false;
-	});
-
-	function checkSearchText(){
-		setTimeout(function(){
-			var txt = $("#searchInput").val();
-
-			if( txt.length > 0 ){
-				toggleClass( true );
-			}
-			else{
-				toggleClass( false );	
-			}
-		}, 1);
-	}
-
-	function toggleClass( bo ){
-		if( bo ){
-			//$(".autocomplete").css("visibility", "visible");
-			$("#autocomplete").show();
-			
-			$("#btnDropdown").removeClass("dropdown");
-			$("#btnDropdown").addClass("dropdownoff");
-		}
-		else{
-			//$(".autocomplete").css("visibility", "hidden");
-			$("#autocomplete").hide();
-			
-			$("#btnDropdown").removeClass("dropdownoff");
-			$("#btnDropdown").addClass("dropdown");
-		}
-	}
-}
-
-
-
-function topSearchInit()
-{
-	var focusTarget = "input";
-
-	//$("#searchTop").bind("keydown", checkSearchText);
-	
-	$("#searchTop").focusout(function() {
-		if( focusTarget == "dropdown" )
-		{
-			return false;
-		}
-		else
-		{	
-			//toggleClass( false );
-		}
-	});
-	
-	$( "#searchTop" ).focusin( function()	{
-		focusTarget = "input";
-	});
-
-	$("#btnDropdown").mousedown( function(){
-		focusTarget = "dropdown";
-	});
-
-	$(".autocomplete ul li").focusin( function() {
-		//
-	});
-	
-	$(".autocomplete ul li:last-child").focusout( function() {
-		toggleClass( false );
-	})
-	
-	$("#btnDropdown").click( function(){
-		//alert("btn click");
-		if( $("#searchInput").val().length == 0 ){ 
-			return false;
-		}
-		else{
-			if( $("#btnDropdown").hasClass("dropdown") ){
-				toggleClass( true );
-			}
-			else{
-				toggleClass( false );
-			}
-		}
-
-		return false;
-	});
-
-	function checkSearchText(){
-		setTimeout(function(){
-			var txt = $("#searchTop").val();
-
-			if( txt.length > 0 ){
-				toggleClass( true );
-			}
-			else{
-				toggleClass( false );	
-			}
-		}, 1);
-	}
-
-	function toggleClass( bo ){
-		if( bo ){
-			$(".topAutocomplete").css("visibility", "visible");
-		}else{
-			$(".topAutocomplete").css("visibility", "hidden");
-			$("#topAutocomplete").hide();
-		}
-	}
-}
diff --git a/org.tizen.ui.guides/html/scripts/showhide.js b/org.tizen.ui.guides/html/scripts/showhide.js
deleted file mode 100755
index b882d14..0000000
--- a/org.tizen.ui.guides/html/scripts/showhide.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/*all Show Hide devicespecs List*/
-if($('div#contents').find('.devicespecs-util').length){
-var self = $('div#contents').find('.devicespecs-util');
-
-$('.showA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-var me = $(this);
-var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-if ( !me.next().is(':visible') ){
-	me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-	me.find('em').text('Hide');
-	me.next().show();
-}
-});
-return false;
-})
-$('.hideA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-
-	var me = $(this);
-	var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-	if ( me.next().is(':visible') ){
-		me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-		me.find('em').text('Show');
-		me.next().hide();
-	}
-					
-});
-return false;
-})
-}	
-
-/*toggle devicespecs List*/
-if($('div#contents').find('.devicespec-tit').length){
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-$('a', self).bind ("click", function(){
-	var idx = $('.devicespec-tit a').index(this);
-
-	if ( $(this).parent().parent().next().is(':visible') ){
-		$(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-		self.find('em').text('Show');
-		self.next().hide();
-
-		return false;
-	}else{
-		$(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-		self.find('em').text('Hide');
-
-		self.next().show();
-
-		return false;
-	}
-
-});
-
-});
-}
-
-$('ul.devicespecifications li div.devicespec-con').hide();
-
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-var arrow =  $('a', self);
-
-if(self.next().is(':visible')){
-arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
-self.find('em').text('Hide');
-}else{
-arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
-self.find('em').text('Show');
-}
-
-});
-
-$(document).ready(function(){
-	var openheading = function(target) {
-		var origin = $(target);
-		target = origin.closest('.devicespec-con');
-		if (!(target.length > 0)) {
-			target = origin.closest('.devicespec-tit');
-		}
-		if (target.length > 0) {
-			if (!$('.devicespec-con', target.parent()).is(":visible")) {
-				$("div.devicespec-tit a.bt-arr", target.parent()).click();
-			}
-		}
-
-		$(window.location.hash)[0].scrollIntoView();
-	};
-
-	$(".opensection").click(function(){
-		var target = $($(this).attr("href"));//.closest('.devicespec-con');
-		openheading(target);
-	});
-
-	if (window.location.hash) {
-		var target = $(window.location.hash);
-		openheading(target);
-		//$(target).focus(); //uncomment if fail to work
-	}
-
-	var isScrolledIntoView = function(elem)
-	{
-		var docViewTop = $('#contents').scrollTop();
-		var docViewBottom = docViewTop + $('#contents').height();
-
-		var elemTop = $(elem).offset().top;
-		var elemBottom = elemTop + $(elem).height();
-
-		return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
-		  && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
-	}
-
-	$('#contents').scroll();
-
-	var checkBreadCrumbs = function() {
-		if (!isScrolledIntoView($('#contents .content h1')))
-		{
-			$('a.top.sms').show();
-			$('.help_breadcrumbs').hide();
-		} else {
-			$('a.top.sms').hide();
-			$('.help_breadcrumbs').show();
-		}
-		$('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
-	}	
-
-	var updateH = function(){
-		checkBreadCrumbs();
-		$('a.top').css('bottom', $('#footer').outerHeight());
-		$('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
-
-		$('#toc').css('top', $('#toc_border').position()['top'] + 7);
-
-		if ($('a.top').is(':visible'))
-		{
-			$('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
-		} else {
-			$('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
-		}
-		$('#toc').css('height', $('#toc').css('height') - 5);
-
-		$('#toc_border').height($('#toc').outerHeight() + 5);
-		$('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-		//$('#toc').css('top', $('#toc_border').position()['top'] + 2);
-		$('#toc').css('top', $('#toc_border').position()['top'] + 7);
-		$('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
-		//$('#toc').css('width', $('#toc_border').width() - 40);
-		$('#toc').css('width', $('#toc_border').width() - 49);
-	};
-
-	var updateH_no_toc = function() {
-		checkBreadCrumbs();
-		if (!isScrolledIntoView($('#contents .content h1')))
-		{
-			$('a.top.sms').show();
-		} else {
-			$('a.top.sms').hide();
-		}
-		$('a.top').css('bottom', $('#footer').outerHeight());
-		
-		$('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-	}
-
-	if ($('body').hasClass('no-toc')) {
-		updateH = updateH_no_toc;
-	}
-	$(window).resize(updateH);
-	$('#contents').scroll(updateH);
-	$(window).resize();
-	
-	$('a.top').click(function(){$('#contents').scrollTop(0)});
-
-	var hashchanged = function() {
-		if (window.location.hash.length) {
-			openheading(window.location.hash);
-			//$(window.location.hash).scrollTo();
-			$(window.location.hash)[0].scrollIntoView();
-
-		} else 
-		{
-			$('#contents').scrollTop(0);
-		}
-	};
-
-	if (("onhashchange" in window) && !($.browser.msie)) { 
-		$(window).bind( 'hashchange',hashchanged);
-	}
-	else { 
-		var prevHash = window.location.hash;
-		window.setInterval(function () {
-			if (window.location.hash != prevHash) {
-				hashchanged();
-				prevHash = window.location.hash;
-			}
-		}, 100);
-	}
-});
diff --git a/org.tizen.ui.guides/html/web/guides_w.htm b/org.tizen.ui.guides/html/web/guides_w.htm
deleted file mode 100755
index 91773ec..0000000
--- a/org.tizen.ui.guides/html/web/guides_w.htm
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-	<script type="text/javascript" src="../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-	<title>Tizen Web UI Guides</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">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html">W3C/HTML5 and Supplementaries API Reference for Mobile Web</a></li>
-			<li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">W3C/HTML5 and Supplementaries API Reference for Wearable Web</a></li>
-			<li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a></li>			
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
-<font size="11">Web UI Guides</font></h1>
-
-<p>Tizen Web UI guides include various aspects of creating a visual outlook for the user application to ensure the best possible user experience.</p>
-
-<p>The Tizen platform provides the following Web UI toolkit frameworks for developing a Web application:</p>
-<ul>
-	<li><a href="tau/guides_tau_w.htm">TAU (Tizen Advanced UI)</a>
-	<p>TAU is a Web UI library that enables you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider. You can manipulate and interact with the application screens through the UI components.</p></li>
-	<li><a href="w3c/guides_w3c_w.htm">W3C</a>
-	<p>The W3C specifications provide HTML and CSS tools for creating a user interface. With the HTML tools, you can define the structure of the application screens, while the CSS tools allow you to define the look and feel of the screens.</p></li>
-</ul>
-
-
-    
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.ui.guides/html/web/tau/accessibility_w.htm b/org.tizen.ui.guides/html/web/tau/accessibility_w.htm
deleted file mode 100755
index dacbdc5..0000000
--- a/org.tizen.ui.guides/html/web/tau/accessibility_w.htm
+++ /dev/null
@@ -1,110 +0,0 @@
-<!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>Accessibility: Supporting Web Accessibility</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">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>
-
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <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>
-<p>You must define the role, states, and property of the HTML elements in order to enable the Tizen screen reader.</p>
-
-<p>The Tizen screen reader reads HTML elements in the following order:</p>
-<ol>
-	<li>Content
-		<p>The actual element content is read first.</p></li>
-	<li>Other attributes than <span style="font-family: Courier New,Courier,monospace">role</span> and <span style="font-family: Courier New,Courier,monospace">aria-label</span></li>
-	<li><span style="font-family: Courier New,Courier,monospace">role</span> attribute
-	</li>
-	<li><span style="font-family: Courier New,Courier,monospace">aria-label</span> attribute
-	</li>
-</ol>
-
-<p>The following examples show how WAI-ARIA code is read using the text-to-speech functionality of the screen reader:</p>
-<ul>
-	<li>Result: checkbox checked, double tap to uncheck
-		<pre class="prettyprint">&lt;div role=&quot;checkbox&quot; aria-checked=&quot;true&quot; aria-label=&quot;double tap to uncheck&quot;&gt;&lt;/div&gt;</pre></li>
-	<li>Result: test button, double tap to click
-		<pre class="prettyprint">&lt;div role=&quot;button&quot; aria-label=&quot;double tap to click&quot;&gt;test&lt;/div&gt;</pre></li>
-</ul>
-
-<p>When creating applications that use the Tizen screen reader, keep in mind the following exceptions:</p>
-<ul>
-	<li>If the <span style="font-family: Courier New,Courier,monospace">aria-hidden</span> attribute of an element is set to <span style="font-family: Courier New,Courier,monospace">true</span>, the screen reader does not read the content of the element or its child elements.
-		<p>In the following snippet, the screen reader reads &quot;on&quot;, but not &quot;off&quot; or &quot;child&quot;.</p>
-<pre class="prettyprint">&lt;div tabindex=&quot;0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;on&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div aria-hidden=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;off
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;child&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;</pre></li>
-	<li>If the <span style="font-family: Courier New,Courier,monospace">role</span> attribute is not defined, it is not read.
-		<p>In the following snippet, the screen reader reads &quot;test&quot;, but not &quot;link&quot;.</p>
-		<pre class="prettyprint">&lt;a role=&quot;&quot; href=&quot;test.html&quot;&gt;test&lt;/a&gt;</pre></li>
-	<li>The screen reader does not read elements that are hidden, for example, if the <span style="font-family: Courier New,Courier,monospace">display</span> property is set to <span style="font-family: Courier New,Courier,monospace">none</span>.</li>
-</ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element supports the image alt text through the <span style="font-family: Courier New,Courier,monospace">alt</span> attribute:</p>
-<pre class="prettyprint">&lt;img src=&quot;icon.jpg&quot; alt=&quot;icon&quot;&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">alt</span> attribute need not be defined for the virtual grid component.
-			<p>The accessibility feature is supported since Tizen 2.1.</p></td>
-	</tr>
-	</tbody>
-</table>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
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
deleted file mode 100755
index a234ab4..0000000
--- a/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm
+++ /dev/null
@@ -1,266 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-	<title>Creating Circle-shaped Progress Bars</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-	</div>
-
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_circleprogressbar.htm">CircleProgressBar API for Wearable Web</a></li>
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Circle-shaped Progress Bars</h1>
-
-<p>You can create a circle-shaped progress bar component with the CircleProgressBar API.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>The following figure shows the layout of the progress 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="Circle-shaped progress bar in a rectangular device" src="../../images/rectangular_progress.png" />  <img alt="Circle-shaped progress bar in a circular device" src="../../images/round_progress.png" /></p>
-
-<p>To implement the progress bar:</p>
-
-<ol>
-<li>Edit the HTML code to add the component to your application screen:
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageCircleProgressBar&quot; data-enable-page-scroll=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Circle Progress&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;result&quot; id=&quot;result&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer ui-grid-col-2&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot; id=&quot;minus&quot;&gt;-10%&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot; id=&quot;plus&quot;&gt;+10%&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
-&nbsp;&nbsp;&nbsp;&lt;progress class=&quot;ui-circle-progress&quot; id=&quot;circleprogress&quot; max=&quot;100&quot; value=&quot;20&quot;&gt;&lt;/progress&gt;
-&lt;/div&gt;
-</pre>
-</li>
-
-<li>Edit the CSS code to set the visual style of the progress bar:
-
-<pre class="prettyprint">
-.ui-progressbar-large 
-{
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;left: 50%;
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-50%, -50%, 0);
-}
-.result 
-{
-&nbsp;&nbsp;&nbsp;font-size:35px;
-&nbsp;&nbsp;&nbsp;text-align:center;
-&nbsp;&nbsp;&nbsp;top: 33%;
-&nbsp;&nbsp;&nbsp;left: 50%;
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-50%, -50%, 0);
-&nbsp;&nbsp;&nbsp;position: absolute;
-}
-
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;.result 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;.ui-footer 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-
-<li>Edit the JavaScript code to manage the progress bar events and other functionality:
-
-<pre class="prettyprint">
-(function()
-{
-&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;pageCircleProgressBar&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = document.getElementById(&quot;circleprogress&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn = document.getElementById(&quot;minus&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn = document.getElementById(&quot;plus&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv = document.getElementById(&quot;result&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isCircle = tau.support.shape.circle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultText,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i;
-
-&nbsp;&nbsp;&nbsp;function printResult() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultText = progressBarWidget.value();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv.innerHTML = resultText + &quot;%&quot;;
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function clearVariables() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv = null;
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function unbindEvents() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;pageshow&quot;, pageBeforeShowHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;pagehide&quot;, pageHideHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (isCircle) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.removeEventListener(&quot;rotarydetent&quot;, rotaryDetentHandler);
-&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;minusBtn.removeEventListener(&quot;click&quot;, minusBtnClickHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn.removeEventListener(&quot;click&quot;, plusBtnClickHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function minusBtnClickHandler() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = i-10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (i &lt; 0) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i=0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function plusBtnClickHandler() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = i+10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (i &gt; 100) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i=100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function rotaryDetentHandler() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the rotary direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var direction = event.detail.direction,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = parseInt(progressBarWidget.value());
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (direction === &quot;CW&quot;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Right direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (value &lt; 100) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value++;
-&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;value = 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (direction === &quot;CCW&quot;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Left direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (value &gt; 0) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value--;
-&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;value = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function pageBeforeShowHandler() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (isCircle) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make the circular progressbar object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: &quot;full&quot;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;, rotaryDetentHandler);
-&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;progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: &quot;large&quot;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn.addEventListener(&quot;click&quot;, minusBtnClickHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn.addEventListener(&quot;click&quot;, plusBtnClickHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = parseInt(progressBarWidget.value());
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv.innerHTML = i + &quot;%&quot;;
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function pageHideHandler() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unbindEvents();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearVariables();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Release the object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.destroy();
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, pageBeforeShowHandler);
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagehide&quot;, pageHideHandler);
-}());
-</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.ui.guides/html/web/tau/circular_ui_ww.htm b/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm
deleted file mode 100755
index 5be5f3f..0000000
--- a/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm
+++ /dev/null
@@ -1,227 +0,0 @@
-<!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>Applications for Circular UI: Developing UI on Circular Wearable Applications</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#apply">Applying the Circular UI</a></li>
-            <li><a href="#incss">Overriding Circular CSS Style with Media Query</a></li>
-            <li><a href="#injs">Writing JavaScript Selectively for the Circular UI</a></li>
-            <li><a href="#components">Supported UI Components</a></li>
-        </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>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <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>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-
-<h2 id="apply">Applying the Circular UI</h2>
-
-<p>To support the circular UI:</p>
-
-<ol>
-<li>Include the link tag for the latest <span style="font-family: Courier New,Courier,monospace">tau.css</span> file into the &lt;head&gt; part in HTML. Note that for the compatibility with the rectangular UI, you must use the latest version of TAU library.</li>
-
-<li>Include the link tag for the latest <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file with media query feature (<span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape: circle</span>) next to the link tag for the <span style="font-family: Courier New,Courier,monospace">tau.css</span>. Note that adding the <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file following the general <span style="font-family: Courier New,Courier,monospace">tau.css</span> file covers the additional circular UI.</li>
-
-<li>Include the link tag for the latest <span style="font-family: Courier New,Courier,monospace">tau.js</span> script file at the end of &lt;body&gt; part of HTML.</li>
-
-<li>For writing a separate code for Circular UI in JavaScript, you can use the <span style="font-family: Courier New,Courier,monospace">tau.support.shape.circle</span> property for detecting the circular device.</li>
-</ol>
-
-<pre class="prettyprint">
-&lt;head name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;title&gt;Support for Circular UI&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;tau.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!-- CSS media query on a link element --&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (-tizen-geometric-shape: circle)&quot; href=&quot;tau.circle.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/stlye.css&quot;&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&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;/* Implement your code for the circular UI */
-&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;/* Implement your code for the rectangular UI */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&lt;/body&gt;
-</pre>
-
-<p>The following figure shows how the media query <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape: circle</span> works in a rectangular and circular UI.</p>
-<p class="figure">Figure: Media query in a rectangular device and circular device</p>
-<p align="center">
-	<img alt="Media query in a rectangular device and circular device" src="../../images/circular_support.png" />
-</p>
-
-<h2 id="incss">Overriding Circular CSS Style with Media Query</h2>
-
-<p>For some styles to be applied selectively, you can use the media query feature <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> with a <span style="font-family: Courier New,Courier,monospace">rectangle</span> or <span style="font-family: Courier New,Courier,monospace">circle</span> value to distinguish type difference. Note that the <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> feature is only available in Tizen devices.</p>
-
-<table>
-	<caption>Table: <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> feature description</caption>
-	<tbody>
-	<tr>
-		<th colspan="2">-tizen-geometric-shape</th>
-	</tr>
-	<tr>
-		<td>Value</td>
-		<td>rectangle | circle</td>
-	</tr>
-	<tr>
-		<td>Applied to</td>
-		<td>Visual media types</td>
-	</tr>
-	<tr>
-		<td>Accept min/max prefixes</td>
-		<td>No</td>
-	</tr>
-	</tbody>
-</table>
-
-<pre class="prettyprint">
-.className 
-{
-&nbsp;&nbsp;&nbsp;/* Implement the basic CSS style for all types of devices (rectangular and circular) */
-}
-
-@media screen and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;.className
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Implement the CSS style to be overridden in circular */
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h2 id="injs">Writing JavaScript Selectively for the Circular UI</h2>
-<p>TAU for Wearable provides the <span style="font-family: Courier New,Courier,monospace">tau.support.shape.circle</span> property that checks whether the device screen is a circle or not. If you want implement code selectively for circular UI and rectangular UI, you can use the property with a boolean value. Note that for developing in a browser environment, this property is always set to <span style="font-family: Courier New,Courier,monospace">true</span> when the <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file is loaded.</p>
-
-<pre class="prettyprint">
-if (tau.support.shape.circle) 
-{
-&nbsp;&nbsp;&nbsp;/* Implement your code for the circular UI */
-} 
-else 
-{
-&nbsp;&nbsp;&nbsp;/* Implement your code for the rectangular UI */
-}
-</pre>
-
-<h2 id="components">Supported UI Components</h2>
-<p>The following components can be used in both rectangular and circular devices.</p>
-  <table>
-	<caption>Table: UI components supported by rectangular and circular UI</caption>
-	<tbody>
-	<tr>
-		<th>Component</th>
-		<th>Description</th>
-	</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="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-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">Full Size Processing Component</a></td>
-        <td>Shows how you can create a processing 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>
-	<tr>
-        <td><a href="thumbnail_ww.htm">Thumbnail</a></td>
-        <td>Shows how you can create a thumbnail component.</td>
-	</tr>
-	<tr>
-        <td><a href="popup_ww.htm">Popup Button</a></td>
-        <td>Shows how you can create a popup component.</td>
-    </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="moreoptions_ww.htm">More Options</a></td>
-        <td>Shows how you can create a more options button component.</td>
-	</tr>
-	
-</tbody>
-</table>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/event_handling_w.htm b/org.tizen.ui.guides/html/web/tau/event_handling_w.htm
deleted file mode 100755
index 7daf215..0000000
--- a/org.tizen.ui.guides/html/web/tau/event_handling_w.htm
+++ /dev/null
@@ -1,184 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Event Handling: Handling User Interactions</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="#hardwarekey">Hardware Key Events</a></li>
-            <li><a href="#rotaryevent">Rotary Events</a></li>
-        </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>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Event Handling: Handling User Interactions</h1>
-<p>The Tizen platform supports some device events for user interaction. To provide a full user experience for your application users, you must handle various events in your application.</p>
-
-<h2 id="hardwarekey">Hardware Key Events</h2>
-
-<p>The Tizen platform supports hardware key events for user interaction on devices.</p>
-<p>The following figures show the hardware keys and events for mobile and wearable devices.</p>
-
-	<p class="figure">Figure: Menu and Back keys on a mobile device</p>
-<p align="center"><img alt="Menu and Back keys" src="../../images/efl_phone.png" /></p>
-<p class="figure">Figure: Back key on a wearable device</p>
- <p align="center"><img alt="Back key" src="../../images/backWearable.png" /></p>
-
-
-<table>
-	<caption> Table: hardware key events</caption>
-	<tbody>
-	<tr>
-		<th>Type</th>
-		<th>Description</th>
-		<th>Attribute</th>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span></td>
-		<td>Event is triggered when a device detects the user interaction through special point of hardware.</td>
-		<td>
-			<span style="font-family: Courier New,Courier,monospace;">event.keyName</span>
-			<ul>
-			<li><span style="font-family: Courier New,Courier,monospace;">back</span> for wearable</li>
-			<li><span style="font-family: Courier New,Courier,monospace;">back, menu</span> for mobile</li>
-			</ul>
-		</td>
-	</tr>
-	</tbody>
-</table>
-<p>To bind an event callback on the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> events, use the following code:</p>
-<pre class="prettyprint">
-window.addEventListener(&quot;tizenhwkey&quot;, function(ev)
-{
-&nbsp;&nbsp;&nbsp;if (ev.keyName == &quot;back&quot;) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Call window.history.back() to go to previous browser window */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Call tizen.application.getCurrentApplication().exit() to exit application */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add script to add another behavior */
-&nbsp;&nbsp;&nbsp;}
-});
-</pre>
-
-<h3>Exiting the Application with the Back Key</h3>
-<p>When application binds a <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event, it checks the page ID and decides to go back or exit with several lines of app-side script.</p>
-<p>The Tizen Device APIs provide an application exit method. Even if the application has many pages, it can handle the back/exit process.</p>
-<p>With TAU page, just remember the ID of the main page of main page. In the following example, the ID of the main page is <span style="font-family: Courier New,Courier,monospace;">main</span>.</p>
-<pre class="prettyprint">(function()
-{
-&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;tizenhwkey&quot;, function(ev);
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(ev.keyName === &quot;back&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementsByClassName(&quot;ui-page-active&quot;)[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageid = page ? page.id:&nbsp;&quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(pageid === &quot;main&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&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;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch(ignore)
-&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;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
-}());</pre>
-
-<h2 id="rotaryevent">Rotary Events</h2>
-
-<p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called detents. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p>
-
-<table class="note">
-	<tbody>
-	<tr>
-		<th class="note">Note</th>
-	</tr>
-	<tr>
-		<td class="note">This feature is supported in wearable applications only.</td>
-	</tr>
-	</tbody>
-</table>
-
-
-<p class="figure">Figure: Rotary device</p>
-<p align="center"><img alt="Rotary device" src="../../images/rotary_event.png" /> </p>
-<p>Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.</p>
-
-<table>
-	<caption> Table: Rotary events</caption>
-	<tbody>
-	<tr>
-		<th>Type</th>
-		<th>Description</th>
-		<th>Attribute</th>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace">rotarydetent</span></td>
-		<td>Event is triggered when a device detects the detent point.</td>
-		<td><span style="font-family: Courier New,Courier,monospace">detail.direction</span>: the rotation direction.
-			<p>The available values are <span style="font-family: Courier New,Courier,monospace;">CW</span> for clockwise and <span style="font-family: Courier New,Courier,monospace;">CCW</span> for counter-clockwise rotation.</p></td>
-	</tr>
-	</tbody>
-</table>
-
-<p>To bind an event callback on rotary events, use the following code:</p>
-<pre class="prettyprint">
-document.addEventListener(&quot;rotarydetent&quot;, function(ev)
-{
-&nbsp;&nbsp;&nbsp;var direction = ev.detail.direction;
-&nbsp;&nbsp;&nbsp;/* Add behavior for detent detected event with a direction value */
-});
-</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/tau/footerbutton_ww.htm b/org.tizen.ui.guides/html/web/tau/footerbutton_ww.htm
deleted file mode 100755
index 94cb2f7..0000000
--- a/org.tizen.ui.guides/html/web/tau/footerbutton_ww.htm
+++ /dev/null
@@ -1,191 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-	<title>Creating Footer Buttons</title>
-</head>
-<body onload="prettyPrint()" id="content">
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-	</div>
-
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.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>Creating Footer Buttons</h1>
-
-<p>You can create a footer button component that is supported in both rectangular and circular UI.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>The following figures show the layout of the footer button components in a rectangular and circular UI.</p>
-<p class="figure">Figure: Footer button in a rectangular and circular device</p>
-			<p align="center"><img alt="Footer button in a rectangular device" src="../../images/rectangular_footer.png"/> <img alt="Footer button in a circular device" src="../../images/round_footer.png"/></p>
-			
-<p class="figure">Figure: Multiple footer buttons in a rectangular and circular device</p>
-			<p align="center"><img alt="Multiple footer buttons in a rectangular device" src="../../images/rectangular_multibtn.png"/> <img alt="Multiple footer buttons in a circular device" src="../../images/round_multibtn.png"/></p>
-<p>The footer button on the circular UI has the <span style="font-family: Courier New,Courier,monospace">ui-bottom-button</span> class. When there are multiple buttons, the other buttons except for the first button use the drawer component in the circular UI.</p>
-
-
-<p>To implement footer buttons:</p>
-
-<ul>
-<li>To implement a single footer button:
-<p>Edit the HTML code to add the footer button component to your application screen.</p>
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;bottomButtonPage&quot; &gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Bottom Button&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer ui-bottom-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;Button&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
-&lt;/div&gt;
-</pre>
-</li>
-<li>To implement multiple footer buttons:
-
-
-<ol>
-<li>Edit the HTML code to add the footer button components to your application screen.
-<p>When there are multiple buttons, the buttons except for the first button use drawer in Circular UI.</p>
-
-<pre class="prettyprint">
-&lt;div&nbsp;class=&quot;ui-page&nbsp;ui-page-active&quot;&nbsp;id=&quot;bottomButtonWithMorePage&quot;&nbsp;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;Multiple&nbsp;Buttons&lt;/h2&gt;
-&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;
-
-&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;Circle&nbsp;Profile&nbsp;--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;moreoptionsDrawer&quot;&nbsp;class=&quot;ui-drawer&nbsp;drawer-elem&quot;&nbsp;data-drawer-target=&quot;#bottomButtonWithMorePage&quot;&nbsp;data-position=&quot;right&quot;&nbsp;data-enable=&quot;true&quot;&nbsp;data-drag-edge=&quot;1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;selector&quot;&nbsp;class=&quot;ui-selector&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;show-icon&quot;&nbsp;data-title=&quot;2&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;human-icon&quot;&nbsp;data-title=&quot;3&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;footer&nbsp;class=&quot;ui-footer&nbsp;ui-grid-col-3&nbsp;ui-bottom-button&quot;&gt;
-&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>
-</li>
-
-<li>Edit the CSS code to set the visual style of the buttons:
-
-<pre class="prettyprint">
-.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;
-&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;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;122px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;transparent;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#a4a4a4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-image:&nbsp;url(/*path&nbsp;of&nbsp;the&nbsp;image*/);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-size:&nbsp;18px&nbsp;36px;
-&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;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;
-&nbsp;&nbsp;&nbsp;}
-}
- </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(&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;});
-})();
-</pre>
-</li>
-</ol>
-</li>
-</ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/globalization_w.htm b/org.tizen.ui.guides/html/web/tau/globalization_w.htm
deleted file mode 100755
index 6644ca6..0000000
--- a/org.tizen.ui.guides/html/web/tau/globalization_w.htm
+++ /dev/null
@@ -1,484 +0,0 @@
-<!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>Globalization: Supporting Internationalization and Localization</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="#jquery_globalize">jQuery and Globalize</a></li>
-            <li><a href="#use">Using the Globalize Utility</a></li>
-            <li><a href="#utility">Using the Globalize Utility Methods</a></li>
-            <li><a href="#rtl">Right-to-left (RTL) Language Support</a></li>
-        </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>
-        </ul>
-    </div></div>
-</div>
-
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Globalization: Supporting Internationalization and Localization</h1>
-
-    <p>The TAU Globalize utility supports internationalization and localization. It wraps the <a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> functionality for easy access from Tizen Web applications, and it is extended to support the right-to-left (RTL) languages.</p>
-
-    <h2 id="jquery_globalize" name="jquery_globalize">jQuery and Globalize</h2>
-
-    <p>Globalize is a jQuery JavaScript library for internationalization and localization that leverages the official Unicode CLDR JSON data. The library works both for the browser and as a Node.js module. jQuery and Globalize have dependencies with <a href="https://github.com/rxaviers/cldrjs" target="_blank">cldr.js</a>, which is a CLDR low-level manipulation tool.</p>
-
-    <p>Globalize:</p>
-    <ul>
-        <li>Leverages the Unicode CLDR data and follows its UTS#35 specification.</li>
-        <li>Keeps the code separate from the i18n content. Does not host or embed any locale data in the library. Empowers you to control the loading mechanism of your choice.</li>
-        <li>Allows you to load as much or as little data as you need. Avoids duplicating data if using multiple i18n libraries that leverage CLDR.</li>
-        <li>Keeps the code modular. Allows you to load the i18n functionalities you need.</li>
-        <li>Runs in browsers and Node.js, and consistently across all of them.</li>
-        <li>Makes globalization as easy to use as jQuery.</li>
-    </ul>
-
-    <h3 id="cldr" name="cldr">CLDR Data</h3>
-
-    <p>The Unicode CLDR provides the key building blocks for software to support the world&#39;s languages. It includes:</p>
-    <ul>
-        <li>Locale-specific patterns for formatting and parsing dates, times, time zones, numbers, and currency values</li>
-        <li>Translations of names: languages, scripts, countries and regions, currencies, eras, months, weekdays, day periods, time zones, cities, and time units</li>
-        <li>Language and script information: characters used, plural cases, gender of lists, capitalization, rules for sorting and searching, writing direction, transliteration rules, rules for spelling out numbers, and rules for segmenting text into graphemes, words, and sentences</li>
-        <li>Country information: language usage, currency information, calendar preference and week conventions, and postal and telephone codes</li>
-        <li>ISO and BCP 47 code support (such as cross-mappings) and keyboard layouts</li>
-    </ul>
-
-    <p>CLDR uses the XML format provided by UTS #35: Unicode Locale Data Markup Language (LDML). LDML is a format used not only for CLDR, but also for the general interchange of locale data. For more information about CLDR, see <a href="http://cldr.unicode.org/index/downloads/cldr-27" target="_blank">CLDR release notes</a>, and to download the JSON format file , see <a href="https://github.com/unicode-cldr/cldr-json" target="_blank">JSON Data from the Unicode CLDR Project</a>.</p>
-    <p>The TAU Globalize utility uses the CLDR 26 release, and when you create a Tizen Web application project, you find CLDR in the <span style="font-family: Courier New,Courier,monospace">&lt;project&gt;/lib/tau/&lt;profile&gt;js/cldr-data</span> folder.</p>
-
-    <h2 id="use" name="use">Using the Globalize Utility</h2>
-
-    <p>To use the TAU Globalize utility in your application:</p>
-    <ol>
-        <li>Download the following dependency files for your application:
-            <ul>
-                <li><a href="https://github.com/rxaviers/cldrjs" target="_blank">Cldr</a>  (v0.4.0)</li>
-                <li><a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> (v1.0.0-alpha.17)</li>
-                <li><a href="http://unicode.org/Public/cldr/26/json-full.zip" target="_blank">Cldr-date</a> (26 version) main and supplemental</li>
-            </ul>
-        </li>
-        <li>Create a folder structure, as shown in the following table.
-            <table>
-                <caption>
-                    Table: Globalize folder structure
-                </caption>
-                <tbody>
-                <tr>
-                    <th colspan="2">Folder structure</th>
-                    <th>Description</th>
-                </tr>
-                <tr>
-                    <td rowspan="7"> <p class="figure"></p>
-                        <p align="center"><img src="../../images/globalize_folder_structure.png" alt="Globalize folder structure" /></p></td>
-                    <td rowspan="7"> <p class="figure"></p>
-                        <p align="center"><img src="../../images/globalize_folder_structure_main.png" alt="Globalize main folder" /></p></td>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr/</span>: Copy the cldr.js library in this folder.</td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr-data/</span>: Copy the cldr-data files in this folder.
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr-data/main</span>: Copy the languages to be supported in this folder.</p>
-                        <table class="note">
-                            <tbody>
-                            <tr>
-                                <th class="note">Note</th>
-                            </tr>
-                            <tr>
-                                <td class="note">Do not copy all languages, just the ones you need.</td>
-                            </tr>
-                            </tbody>
-                        </table></td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">globalize/</span>: Copy the Globalize library in this folder.</td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">locale/</span>: Make the custom locale string in this folder.</td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">script/</span>: JavaScript files.</td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">style/</span>: CSS, image, and other style related files.</td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">view/</span>: HTML files</td>
-                </tr>
-                </tbody>
-            </table>
-        </li>
-        <li>Set the locale using the following example code:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ko)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* &quot;ko&quot; is the Globalize utility instance */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.getLocale()) /* &quot;ko&quot; */
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-
-            <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is not synchronous, and it returns the deferred object with the methods <span style="font-family: Courier New,Courier,monospace">then()</span>, <span style="font-family: Courier New,Courier,monospace">done()</span>, and <span style="font-family: Courier New,Courier,monospace">fail()</span>. Use these methods to receive the Globalize utility instance.</p>
-            <p>You can specify locales in 2 ways using IETF language tags, such as en, pt-BR, or zh-Hant-TW:</p>
-            <ul>
-                <li>Specify the locale ID in the <span style="font-family: Courier New,Courier,monospace">lang</span> attribute of the body element, such as <span style="font-family: Courier New,Courier,monospace">&lt;body lang=&quot;ko-KR&quot;&gt;</span>.</li>
-                <li>Use a string variable as an input argument of the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method (for example <span style="font-family: Courier New,Courier,monospace">ko.setLocale(&quot;en&quot;)</span>) to overwrite the body element setting. </li>
-            </ul>
-            <p>If no <span style="font-family: Courier New,Courier,monospace">lang</span> attribute or <span style="font-family: Courier New,Courier,monospace">setLocale()</span> input argument is defined, the Globalize utility finds the locale by checking the <span style="font-family: Courier New,Courier,monospace">window.navigator.language</span> property. If the check result is false, the utility uses the default locale &quot;en&quot;.</p>
-            <p>The following table illustrates the locale setting method order.</p>
-            <table>
-                <caption>
-                    Table: Locale setting methods
-                </caption>
-                <tbody>
-                <tr>
-                    <th>Order</th>
-                    <th>Locale setting methods</th>
-                </tr>
-                <tr>
-                    <td>1</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">setLocale(LocaleId)</span></td>
-                </tr>
-                <tr>
-                    <td>2</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">&lt;body lang=&quot;ko-KR&quot;&gt;</span></td>
-                </tr>
-                <tr>
-                    <td>3</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">window.navigator.language</span></td>
-                </tr>
-                <tr>
-                    <td>4</td>
-                    <td>Default locale &quot;en&quot;</td>
-                </tr>
-                </tbody>
-            </table>
-        </li>
-        <li>Make sure that you have all required CLDR files.
-            <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method automatically loads the basic CLDR data files which are match the given locale by local AJAX. During the method call, the Globalize utility also loads the basic CLDR JSON files:</p>
-            <ul>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/currencies.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/scriptMetaData.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)</li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</li>
-            </ul>
-            <p>In addition to the basic files, each Globalize method requires a special set of CLDR portions. Determine which Globalize module functionalities you need, and make sure you have the required files, as defined in the following table.</p>
-
-            <table>
-                <caption>
-                    Table: CLDR requirements
-                </caption>
-                <tbody>
-                <tr>
-                    <th>Module</th>
-                    <th>Required CLDR JSON files</th>
-                </tr>
-                <tr>
-                    <td>Core module</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></td>
-                </tr>
-                <tr>
-                    <td>Date module</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span>
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/timeZoneNames.json</span></p>
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></p>
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></p>
-                        <p>CLDR JSON files from the number module</p></td>
-                </tr>
-                <tr>
-                    <td>Number module</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span>
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></p></td>
-                </tr>
-                <tr>
-                    <td>Plural module</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</p>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </li>
-    </ol>
-
-    <h2 id="utility" name="utility">Using the Globalize Utility Methods</h2>
-    <p>The following code snippets show how to use the TAU Globalize utility methods:</p>
-    <ul>
-        <li><span style="font-family: Courier New,Courier,monospace">formatCurrency()</span>:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;currency_unit = &quot;KRW&quot;; /* ISO 4217 */
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ko)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatCurrency(69000, currency_unit)); /* ₩69,900 */
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-            <p>For more information, see the <a href="http://en.wikipedia.org/wiki/ISO_4217" target="_blank">currency unit standard in ISO 4217</a>.</p>
-        </li>
-
-        <li><span style="font-family: Courier New,Courier,monospace">formatDate()</span>:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;currency_unit = &quot;KRW&quot;; /* ISO 4217 */
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ko)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatDate(new Date(), {datetime:&quot;medium&quot;});
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-            <p>For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md" target="_blank">date-formatter</a>.</p>
-        </li>
-
-        <li><span style="font-family: Courier New,Courier,monospace">getCalendar()</span>:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ko)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.getCalendar().months.format.wide, undefined, 4));
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-            <p>The calendar format is specified in the <span style="font-family: Courier New,Courier,monospace">gregorian.json</span> file in the CLDR data.</p>
-        </li>
-
-        <li><span style="font-family: Courier New,Courier,monospace">formatMessage()</span>:
-            <p>This method supports custom locale data.</p>
-            <ol>
-                <li>Create a directory for each locale that has localized content under the locales directory in the project root. The locale names are defined in the <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">W3C IANA language subtag registry</a>.
-<pre class="prettyprint">
-index.html
-locale
-&nbsp;&nbsp;&nbsp;en.json
-&nbsp;&nbsp;&nbsp;ko.json
-</pre>
-                </li>
-                <li>Create a JSON file for the <span style="font-family: Courier New,Courier,monospace">formatMessage</span> strings (custom locale strings) in locales paths:
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;&quot;en&quot;:
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;like&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;{0, plural, offset:1&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;=0 {Be the first to like this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;=1 {You liked this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;one {You and someone else liked this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;other {You and # others liked this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;}&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;greeting&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;hello&quot;:&quot;hello&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bye&quot;:&quot;bye&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;longText&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;quis exercitationem culpa nesciunt nihil aut nostrum explicabo&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;reprehenderit optio amet ab temporibus asperiores quasi cupiditate.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Voluptatum ducimus voluptates voluptas?&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-                </li>
-
-                <li>Call the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method to load the custom locale files automatically:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ko)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;greeting/hello&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;greeting/bye&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;longText&quot;));
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-                </li>
-            </ol>
-        </li>
-
-        <li><span style="font-family: Courier New,Courier,monospace">messageFormatter()</span>:
-            <p>This method returns a function that formats a message using the ICU message format pattern. For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/message/message-formatter.md" target="_blank">message-formatter</a>.</p>
-            <ol>
-                <li>Create a locale resource in the locales path:
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;&quot;en&quot;:
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;formatter&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;welcome&quot;:&quot;Hello Mr. {0}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;thankyou&quot;:&quot;Bye Mr. {custom}.&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-                </li>
-
-                <li>Use the <span style="font-family: Courier New,Courier,monospace">messageFormatter()</span> method:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;en-US&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(en)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var welcomeFormatter = en.messageFormatter(&#39;formatter/welcome&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thankyouFormatter  = en.messageFormatter(&#39;formatter/thankyou&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;welcomeMessageList = [&quot;Tom&quot;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thankyouMessageList = {custom:&quot;Tom&quot;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(welcomeFormatter(welcomeMessageList));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(thankyouFormatter(thankyouMessageList));
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-                </li>
-            </ol>
-        </li>
-    </ul>
-
-    <h2 id="rtl" name="rtl">Right-to-left (RTL) Language Support</h2>
-
-    <p>TAU offers 2 ways to handle right-to-left (RTL) languages:</p>
-    <ul>
-        <li>Locale-specific CSS</li>
-        <li>RTL property in a locale object</li>
-    </ul>
-    <p>When the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is called, it automatically applies a CSS class to the body element of your DOM if the given locale has an RTL direction.</p>
-    <p>The following examples show how to use the locale-specific CSS:</p>
-
-    <ul>
-        <li>The following example has ar-EG as the given locale, and the language has an RTL direction:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ar-EG&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ar)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-        </li>
-
-        <li>The following example has a DOM of body with a locale-specific CSS named <span style="font-family: Courier New,Courier,monospace">ui-script-direction-rtl</span>:
-<pre class="prettyprint">
-&lt;body class=&quot;ui-script-direction-rtl&quot;&gt;
-</pre>
-        </li>
-
-        <li>The following example uses the locale-specific CSS to switch on the RTL feature for a UI component:
-<pre class="prettyprint">
-.ui-script-direction-rtl .ui-listview
-{
-&nbsp;&nbsp;&nbsp;direction: rtl;
-}
-.ui-script-direction-rtl .ui-li.ui-li-static
-{
-&nbsp;&nbsp;&nbsp;text-align: right;
-&nbsp;&nbsp;&nbsp;unicode-bidi: bidi-override;
-}
-</pre>
-        </li>
-    </ul>
-
-    <p>The following example shows how to use the RTL property in a locale object (the <span style="font-family: Courier New,Courier,monospace">rtl</span> variable). If a given locale has an RTL direction, the variable is <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ar-EG&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ar)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ar.rtl) /* true */
-&nbsp;&nbsp;&nbsp;})
-})
-</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/tau/guides_tau_w.htm b/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm
deleted file mode 100755
index e7e2247..0000000
--- a/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm
+++ /dev/null
@@ -1,130 +0,0 @@
-<!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>TAU</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">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</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>TAU</h1>
-
-<table class="note">
-	<tbody>
-	<tr>
-		<th class="note">Note</th>
-	</tr>
-	<tr>
-		<td class="note">Tizen Advaced UI framework(TAU) is <strong>optional</strong>, but recommended for making web applications for Tizen.
-		</td>
-	</tr>
-	</tbody>
-</table>
-	
-<p>The Tizen Advanced UI Framework components allow you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider, which gives you interaction with and manipulation features.</p>
-<p>TAU is the standard Web UI library for Tizen platform, originated from the Tizen Web UI Framework Library (standard library for Tizen 2.2.1), which was mainly an extension to jQuery Mobile. The key features of Web UI Framework Library were coding simplification and application creation speed.  The purpose of TAU is to be the &quot;framework advanced to the next level&quot;.</p>
-
-
-<p>With TAU you can take advantage of the following benefits in your code:</p>
-<ul>
-	<li>TAU is a standalone library, so no additional libraries are needed.</li>
-	<li>TAU can be used with jQuery, as it exposes a special API to the jQuery object identical to jQuery Mobile. Migration is painless.</li>
-	<li>TAU has been written with speed in mind, and all the code is tweaked for maximum performance.</li>
-	<li>Applications can be built to dramatically improve startup performance.</li>
-	<li>TAU is ECMAScript5- and HTML5-compliant.</li>
-	<li>TAU has a large and open API, TAU methods and core functions (event utility functions) are available and not hidden.</li>
-	<li>TAU is customizable and easy to extend (to create new UI components).</li>
-	<li>TAU is optimized for wearable, mobile, and TV devices.</li>
-	<li>TAU supports various profiles (mobile, wearable, and TV).</li>
-</ul>
-
-<table class="note">
-	<tbody>
-	<tr>
-		<th class="note">Note</th>
-	</tr>
-	<tr>
-		<td class="note">TAU (Tizen Advanced UI) is the new name of the <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span>.
-		</td>
-	</tr>
-	<tr>
-		<td class="note">Since 2.3, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span> has been deprecated (including <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw.js</span>, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw-libs.js</span>, and <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw.css</span>).
-		<p>In all documents and source code, TAU is used instead of <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span>.</p>
-			<p>Since 2.4, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span> is fully deleted and not supported anymore.</p>
-		</td>
-	</tr>
-	</tbody>
-</table>
-
-<p>To learn to use the TAU features in your application UI, see the following topics:</p>
-<ul>
-<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="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 Notepad UI Application</a>
-<p>Enables you to create a notepad application with TAU.</p></li>
-
-<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 Web Accessibility</a>
-<p>Enables you to manage application accessibility.</p></li>
-
-<li><a href="globalization_w.htm">Globalization: Supporting Internationalization and Localization</a>
-<p>Enables you to localize and globalize applications.</p></li>
-</ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</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/tau/header_ww.htm b/org.tizen.ui.guides/html/web/tau/header_ww.htm
deleted file mode 100755
index 83fea43..0000000
--- a/org.tizen.ui.guides/html/web/tau/header_ww.htm
+++ /dev/null
@@ -1,137 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-	<title>Creating Expandable Headers</title>
-</head>
-<body onload="prettyPrint()" id="content">
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-	</div>
-
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.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>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>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>The following figure shows the layout of the header component in a rectangular and circular UI.</p>
-
-<p class="figure">Figure: Header component in rectangular and circular devices</p>
-<p align="center"><img alt="Header component in a rectangular device" src="../../images/rectangular_header.png" /> <img alt="Header component in a circular device" src="../../images/round_header.png" /></p>
-
-<p>To implement the header component, edit the HTML code to add the header component to your application screen:</p>
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;headerPage&quot; &gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot; id=&quot;myHeader&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Long title with ExpandableHeader&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Header is expandable in Circular UI.
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-
-<p>The header component supports the following events.</p>
-
-<table>
-<tbody>
-	<tr>
-		<th>Event name</th>
-		<th>Description</th>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace">headerexpand</span></td>
-		<td>Triggered when the header starts to expand.</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace">headerexpandcomplete</span></td>
-		<td>Triggered after the header has fully expanded.</td>
-	</tr>
-	<tr>
-		<td><span style="font-family: Courier New,Courier,monospace">headercollapse</span></td>
-		<td>Triggered when the header returns to the state before expanding.</td>
-	</tr>
-</tbody>
-</table>
-
-<p>You can use events <span style="font-family: Courier New,Courier,monospace">headerexpand</span> and <span style="font-family: Courier New,Courier,monospace">headercollapse</span> if you need to do something when the header expands and collapses.</p>
-<p>The following examples show header events with Marquee.</p>
-
-<pre class="prettyprint">
-var page = document.querySelector(&quot;#myPage&quot;);
-
-page.addEventListener(&quot;pagebeforeshow&quot;, function() 
-{
-&nbsp;&nbsp;&nbsp;var textElement = page.querySelector(&quot;.ui-title&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee = new tau.widget.Marquee(textElement);
-}, false);
-
-page.addEventListener(&quot;headercollapse&quot;, function() 
-{
-&nbsp;&nbsp;&nbsp;if (marquee) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee.reset();
-&nbsp;&nbsp;&nbsp;}
-}, false);
-
-page.addEventListener(&quot;headerexpandcomplete&quot;, function() 
-{
-&nbsp;&nbsp;&nbsp;if (marquee) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee.start();
-&nbsp;&nbsp;&nbsp;}
-}, false);
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/helloworld_w.htm b/org.tizen.ui.guides/html/web/tau/helloworld_w.htm
deleted file mode 100755
index ad9d9af..0000000
--- a/org.tizen.ui.guides/html/web/tau/helloworld_w.htm
+++ /dev/null
@@ -1,183 +0,0 @@
-<!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>Hello World: Creating a Basic Hello World Page</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="#scaling">Scaling the UI</a></li>
-            <li><a href="#import_tau">Importing TAU</a></li>
-            <li><a href="#custom_js">Running Custom JavaScript and CSS</a></li>
-            <li><a href="#fill_content">Creating a Page in the Body</a></li>
-        </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>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Hello World: Creating a Basic Hello World Page</h1>
-
-<p>You can import TAU into your application and create a basic Hello World page with TAU.</p>
-
-<p>The following example shows a basic TAU template:</p>
-  <pre class="prettyprint">
-&lt;!DOCTYPE&nbsp;html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width,&nbsp;user-scalable=no&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;myapp.css&quot;&nbsp;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello&nbsp;TAU&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;HTML&nbsp;BODY&nbsp;CONTENT&nbsp;--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-
-<h2 id="scaling">Scaling the UI</h2>
-<p>The Tizen Advanced UI (TAU) based template provides 2 scaling methods: device-width and fixed-width.</p>
-<ul>
-	<li>Device-width scaling 
-	<p>This scaling mode is suited for most mobile devices, such as Tizen, iPhone&reg; and Android&reg;. In this mode, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, enabling rem scaling using the Rem and Em units. These units calculate the size of a source element automatically based on the container font size (Em) or the base font size (Rem). In Tizen Web applications, a 320 px screen width is assumed.</p>
-	<pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;</pre>
-	</li>
-	<li>Fixed-width scaling 
-	<p>This scaling mode is best suited for Tizen devices, since the entire screen can be scaled on the viewport level. In the viewport scaling mode, set the size of all resources to fit the 360 px screen width.</p>
-	<p>You can also use fixed-width scaling if you do not want to scale your application or if you want to set your own scale. In this case, declare a viewport but note that the default viewport scaling is overridden by the declared viewport. In the Tizen Web UI components, viewport scaling is set automatically to <span style="font-family: Courier New,Courier,monospace">device-width</span> as follows:</p>
-	<pre class="prettyprint lang-html">&lt;meta name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</pre>
-	<p>To enable fixed-width scaling, the header must contain the <span style="font-family: Courier New,Courier,monospace">&lt;meta name=&quot;viewport&quot;&gt;</span> element:</p>
-	<pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=360, initial-scale=1, user-scalable=no&quot;&gt;</pre>
-	</li>
-</ul>
-
-<h2 id="import_tau">Importing TAU</h2>
-<p>You can import TAU with HTML. For better performance, all CSS files must be included in header and all scripts tags must be put before the body element&#39;s close tag:</p>
-<pre class="prettyprint">
-&lt;!DOCTYPE&nbsp;html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;HTML&nbsp;BODY&nbsp;CONTENT&nbsp;--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<p>In HTML, use the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> elements. These default elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications. The loaded libraries are:</p>
-<ul>
-	<li>TAU library: <span style="font-family: Courier New,Courier,monospace">tau(.min).js</span> <p>This element is mandatory, as it imports the TAU library, which you need to use the TAU JavaScript Interface.</p></li>
-	<li>TAU theme: <span style="font-family: Courier New,Courier,monospace">tau(.min).css</span> <p>This element is also mandatory, as it imports the TAU theme.</p></li>
-</ul>
-
-<h2 id="custom_js">Running Custom JavaScript and CSS</h2>
-<p>You can add an additional <span style="font-family: Courier New,Courier,monospace">&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</span> or <span style="font-family: Courier New,Courier,monospace">&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</span> element to include your own scripts and style sheets. However, place them <strong>after</strong> the default <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> elements, as you can use any TAU APIs provided by the default libraries.</p>
-<p>To load your JavaScript file, include the file in the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element in the HTML header. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
-<pre class="prettyprint">&lt;script src=&quot;{YOUR_SCRIPT_PATH}&quot;&gt;&lt;/script&gt;</pre>
-
-<h2 id="fill_content">Creating a Page in the Body</h2>
-
-<p>The body section of the HTML file contains 1 or more pages.</p>
-<p>To create a page in &lt;body&gt;, you can use the &quot;ui-page&quot; class with the &lt;div&gt; element:</p>
- <pre class="prettyprint">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-<p>Each pages has a header, mandatory content, and a footer: </p>
-<pre class="prettyprint">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello&nbsp;World&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello&nbsp;TAU!&lt;/p&gt;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-<p>The following example shows a basic sample code for Hello World : </p>
-<pre class="prettyprint">
-&lt;!DOCTYPE&nbsp;html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width,&nbsp;user-scalable=no&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;myapp.css&quot;&nbsp;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello&nbsp;TAU&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello&nbsp;World&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello&nbsp;TAU!&lt;/p&gt;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&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/tau/helper_ww.htm b/org.tizen.ui.guides/html/web/tau/helper_ww.htm
deleted file mode 100755
index f856ea7..0000000
--- a/org.tizen.ui.guides/html/web/tau/helper_ww.htm
+++ /dev/null
@@ -1,239 +0,0 @@
-<!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>Using Helper Script</title>
-</head>
-<body onload="prettyPrint()" id="content">
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-	</div>
-
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview API for Wearable Web</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>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>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>You can use the helper script as follows:</p>
-
-<pre class="prettyprint">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var helperInstance = tau.helper.<i>NameSpace</i>
-&lt;/script&gt;
-</pre>
-
-<p>The SnapListMarqueeStyle helper provides a helper script to support some creating usable components for list style. It supports making the list view more effective using the <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview</a> and <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_marquee.htm">Marquee</a> components.</p>
-
-	<table class="note">
-		<tbody>
-		<tr>
-			<th class="note">Note</th>
-		</tr>
-		<tr>
-			<td class="note">This helper script is supported since Tizen 2.3.</td>
-		</tr>
-		</tbody>
-	</table>
-	
-<p>The following example shows how to create your own style listview with SnapListMarqueeStyle. In the example, text of list item scrolls horizontally and the sub text appears if the list item is placed in the middle of the screen.</p>
-
-<p>To create a SnapListMarqueeStyle:</p>
-	
-<ol>
-<li>Edit the HTML code to add the SnapListMarqueeStyle component to your application screen.
-<p>You can add a multiline style listview as follows.</p>
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;snaplistTest&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Bottom Button&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview ui-snap-listview expand-list&quot; id=&quot;snapList&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-2line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;1.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-2line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;2.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-2line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;3.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-2line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;4.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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>Edit the CSS code to set your list animation style:
-<pre class="prettyprint">.ui-listview.expand-list li.li-has-2line .ui-marquee
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 16px, 0);
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease .5s;
-}
-.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-marquee
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
-}
-
-.ui-listview.expand-list li.li-has-2line .ui-li-sub-text
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -20px, 0);
-&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease .5s;
-}
-.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-li-sub-text
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
-}
-</pre>
-</li>
-
-<li>Edit the JavaScript code to make your list into a SnapListMarqueeStyle component and manage the list events:
-<pre class="prettyprint">
-&lt;script&gt;
-var page = document.getElementById(&quot;snaplistTest&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;list = document.getElementById(&quot;snapList&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
-
-page.addEventListener(&quot;pageshow&quot;, function() 
-{
-&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
-});
-
-page.addEventListener(&quot;pagehide&quot;, function() 
-{
-&nbsp;&nbsp;&nbsp;listHelper.destroy();
-});
-&lt;/script&gt;
-</pre>
-</li>
-</ol>
-
-<p>The following table shows the options you have in creating your SnapListMarqueeStyle component.</p>
-
-	<table>
-		<tbody>
-		<tr>
-			<th>Option</th>
-			<th>Input type</th>
-			<th>Default value</th>
-			<th>Description</th>
-		</tr>
-
-		<tr>
-			<td><span style="font-family: Courier New,Courier,monospace">marqueeDelay</span></td>
-			<td>number</td>
-			<td>0</td>
-			<td>Sets the delay time for marquee component. The unit of time is millisecond.</td>
-		</tr>
-
-		</tbody>
-	</table>
-
-<p>You can use the following methods with the SnapListMarqueeStyle:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">create</span>
-		<p>Creates the related components for SnapListMarqueeStyle.</p>
-		<p>This method is supported since Tizen 2.3.</p>
-		<p>The following code example shows the use of the method:</p>
-<pre class="prettyprint">
-&lt;ul class=&quot;ui-listview ui-snap-listview&quot; id=&quot;snapList&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;some element or text&lt;/li&gt;
-&lt;/ul&gt;
-
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
-
-&nbsp;&nbsp;&nbsp;/* Create the helper */
-&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
-&lt;/script&gt;
-</pre>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">destroy</span>
-		<p>Destroys the related components for SnapListMarqueeStyle.</p>
-		<p>This method is supported since Tizen 2.3. It has no return value.</p>
-		<p>The following code example shows the use of the method:</p>
-		<pre class="prettyprint">
-&lt;ul class=&quot;ui-listview ui-snap-listview&quot; id=&quot;snapList&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;some element or text&lt;/li&gt;
-&lt;/ul&gt;
-
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
-
-&nbsp;&nbsp;&nbsp;/* Create the helper */
-&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
-
-&nbsp;&nbsp;&nbsp;/* Destroy the helper */
-&nbsp;&nbsp;&nbsp;listHelper.destroy();
-&lt;/script&gt;
-</pre>
-</li>
-</ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm b/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm
deleted file mode 100755
index 604c0ab..0000000
--- a/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.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">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-	<title>Creating Index Scroll Bars</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-	</div>
-
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_circularindexscrollbar.htm">Circular Index Scroll Bar API for Wearable Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_indexscrollbar.htm">Index Scroll Bar API for Wearable Web</a></li>
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Index Scroll Bars</h1>
-
-<p>You can create a circle or rectangle shaped index scroll bar component with the CircularIndexScrollBar and IndexScrollBar API.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<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>
-
-
-
-<h2 id="implement" name="implement">Implementation</h2>
-<p>To implement the index scroll bar:</p>
-
-<ol>
-<li>Edit the HTML code to add the component to your application screen:
-<pre class="prettyprint">&lt;div&nbsp;class=&quot;ui-page&nbsp;ui-page-active&quot;&nbsp;id=&quot;pageIndexScrollbar&quot;&nbsp;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&nbsp;ui-header-small&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&nbsp;ui-title-text-fadeout&quot;&gt;Index&nbsp;Scroll&nbsp;Bar&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;class=&quot;ui-listview&nbsp;ui-snap-listview&quot;&nbsp;id=&quot;list1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;A&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Anton&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;B&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Barry&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Bob&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;C&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Carry&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;D&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Daisy&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;E&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Eric&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;F&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Fay&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;G&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Garry&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&lt;/div&gt;
-</pre>
-</li>
-
-<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(&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>To use the callback:</p>
-<pre class="prettyprint">
-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 <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() 
-{
-&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">
-<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/tau/list_ww.htm b/org.tizen.ui.guides/html/web/tau/list_ww.htm
deleted file mode 100755
index c29d705..0000000
--- a/org.tizen.ui.guides/html/web/tau/list_ww.htm
+++ /dev/null
@@ -1,200 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-	<title>Creating Snap Lists</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-	</div>
-
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview API for Wearable Web</a></li>
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<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>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>The following figure shows the layout of the list component in a rectangular and circular UI.</p>
-<p class="figure">Figure: List component in rectangular and circular devices</p>
-<p align="center"><img alt="List component in a rectangular device" src="../../images/rectangular_list.png" /> <img alt="List component in a circular device" src="../../images/round_list.png" /></p>
-
-<p>To implement the list component:</p>
-
-<ol>
-<li>Edit the HTML code to add the list component to your application screen:
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;snapListPage&quot; &gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Snap List&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview ui-snap-listview expand-list&quot; id=&quot;snapList&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;1.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-3line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;2.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-3line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;3.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-3line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;4.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-3line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;5.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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>Edit the CSS code to set the visual style of the list:
-<pre class="prettyprint">
-.ui-listview li .li-text-sub 
-{
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;text-overflow: ellipsis;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
-&nbsp;&nbsp;&nbsp;line-height: 32px;
-&nbsp;&nbsp;&nbsp;color: rgb(51, 51, 51);
-}
-
-.ui-listview li.li-has-3line 
-{
-&nbsp;&nbsp;&nbsp;padding-top: 0;
-&nbsp;&nbsp;&nbsp;padding-bottom: 0;
-&nbsp;&nbsp;&nbsp;height: 115px;
-}
-
-.ui-listview.expand-list li.li-has-3line .ui-marquee
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 30px, 0);
-}
-
-.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-marquee
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
-}
-
-.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:nth-child(2)
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -10px, 0);
-&nbsp;&nbsp;&nbsp;opacity: 0;
-}
-
-.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:nth-child(2)
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
-}
-
-.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:last-child
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -42px, 0);
-&nbsp;&nbsp;&nbsp;opacity: 0;
-}
-
-.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:last-child
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
-}
-</pre>
-</li>
-
-<li>Edit the JavaScript code to manage the list events and other functionality:
-<pre class="prettyprint">
-var page = document.querySelector(&quot;#snapListPage&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
-
-page.addEventListener( &quot;pagebeforeshow&quot;, function() 
-{
-&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;);
-
-&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
-&nbsp;&nbsp;&nbsp;}
-});
-
-page.addEventListener( &quot;pagehide&quot;, function() 
-{
-&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (listHelper) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper.destroy();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&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.ui.guides/html/web/tau/managing_page_w.htm b/org.tizen.ui.guides/html/web/tau/managing_page_w.htm
deleted file mode 100755
index 44dde0a..0000000
--- a/org.tizen.ui.guides/html/web/tau/managing_page_w.htm
+++ /dev/null
@@ -1,262 +0,0 @@
-<!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>Managing Page: Creating and Routing a Page</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="#structure">Page Structure</a></li>
-            <li><a href="#createone">Creating Single Page</a></li>
-            <li><a href="#createtwo">Creating Multiple Pages in One HTML Code</a></li>
-            <li><a href="#pageRouting">Page Routing</a></li>
-        </ul>
-        <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 API</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <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>
-
-<h2 id="structure">Page Structure</h2>
-<p>The page consist of:</p>
-<ul>
-<li>Header area
-<p>Shows the user which page is currently open. The header can contain buttons, menus, and toolbars. The header is optional.</p></li>
-<li>Content area
-<p>Contains the main application content. The content area has an optional scroll bar.</p></li>
-<li>Footer area
-<p>Contains a status line or buttons. The footer is optional.</p></li>
-</ul>
-<p>All the page areas are specified by a corresponding <span style="font-family: Courier New,Courier,monospace">class</span> attribute.</p>
-
-<p class="figure">Figure: Page content</p>
-<p align="center"><img src="../../images/application_page_layout.png" alt="Application UI Schema" title="Application UI Schema" /></p>
-
-<p>If there is no <span style="font-family: Courier New,Courier,monospace">Page</span> element in the markup, TAU creates one. For example, if no <span style="font-family: Courier New,Courier,monospace">Page</span> element exists:</p>
-<pre class="prettyprint">&lt;span&gt;I have no page&lt;/span&gt;</pre>
-<p>TAU creates a page:</p>
-<pre class="prettyprint">&lt;div class="ui-page"&gt;&lt;span&gt;I have no page&lt;/span&gt;&lt;/div&gt;
-</pre>
-
-
-<h2 id="createone">Creating a Single Page</h2>
-
-
-<p>To create a page:</p>
-<ol>
-<li><p>Create a single page with the following code:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;Simple page
-&lt;/div&gt;
-</pre>
-
-<p>To create a page for your application, use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> value. TAU uses that information to properly acquire the <span style="font-family: Courier New,Courier,monospace">div</span> element and bind the DOM element to its JavaScript component implementation.</p>
-</li>
-<li><p>Create a header area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-header&quot;</span> attribute:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;This is a header&lt;/div&gt;
-&lt;/div&gt;
-</pre></li>
-<li><p>Create a footer area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-footer&quot;</span> attribute:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;This is a footer&lt;/div&gt;
-&lt;/div&gt;
-</pre></li>
-
-<li><p>Create the main content area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-content&quot;</span> attribute:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;MyApplication header&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello world!
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;Application status line&lt;/div&gt;
-&lt;/div&gt;
-</pre></li>
-<li><p>The previous example shows a full page structure. The header and footer areas can contain multiple UI components, such as buttons or images.</p>
-<p>The following example shows a title bar with a <strong>More Options</strong> button and an icon:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title ui-icon&quot; style=&quot;background-image: url(image.png);&quot;&gt;Title&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-more ui-icon-overflow&quot;&gt;More Options&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;MyApplication content&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-</li>
-<li>
-<p>You can also create a popup for your page:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;Popup Open Page&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#popup&quot; class=&quot;ui-btn&quot; data-rel=&quot;popup&quot;&gt;Popup Open&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;popup&quot; class=&quot;ui-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;Popup Page&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;Popup Content&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-<p>The popup works because TAU opens (makes visible) the page whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute corresponds to the <span style="font-family: Courier New,Courier,monospace">#hashtag</span> page. This is basic page routing; for more information see <a href="#pageRouting">Page Routing</a>.</p>
-</li>
-</ol>
-
-<h2 id="createtwo">Creating Multiple Pages in One HTML Code</h2>
-
-
-<p>You can implement a template containing multiple <span style="font-family: Courier New,Courier,monospace">page</span> containers in the application&#39;s <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
-<p>In a multi-page layout, the main page is defined with the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class. If no page has the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded.</p>
-<pre class="prettyprint">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-<h2 id="pageRouting" name="basic_page_routing">Page Routing</h2>
-
-<p>TAU is basically a UI framework, but since its purpose is to ease application building, it also provides basic functionality for changing pages in multi-page applications. The mechanics behind page routing are simple, and works without any additional JavaScript code. You can use the JavaScript API to get more powerful page routing functionalities.</p>
-
-<p>To manage page routing:</p>
-
-<ul>
-<li>To route without JavaScript:
-<p>TAU routing is based on URL hash changes, and it has a built-in mechanism for history tracking. The framework responds to <span style="font-family: Courier New,Courier,monospace">#hashtag</span> changes and tries to display the page that has the <span style="font-family: Courier New,Courier,monospace">id</span> attribute equal to the hashtag value. This approach works for pages defined inside the same HTML document.</p>
-<p>TAU uses every <span style="font-family: Courier New,Courier,monospace">&lt;a&gt;</span> element in the page and binds routing methods for them. In addition, all button instances that are based on that tag and have a proper <span style="font-family: Courier New,Courier,monospace">href</span> attribute work with the framework router. The active page has a <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class assigned. Set that class yourself to be sure the correct page is displayed.</p>
-<pre class="prettyprint">&lt;!--pageOne.html--&gt;
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;pageTwo.html&quot;&gt;Go to page two&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;!--pageTwo.html--&gt;
-&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;pageOne.html&quot;&gt;Go to page one&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-<p>With multiple pages in one HTML code, you can use only the ID of the page in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute:</p>
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#two&quot;&gt;Go to page two&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#first&quot;&gt;Go to page one&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-</li>
-<li>To route using the API:
-<p>You can change pages through the TAU API by using the <span style="font-family: Courier New,Courier,monospace">tau.changePage()</span> method:</p>
-<pre class="prettyprint">&lt;!--pageTwo.html--&gt;
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;You are viewing the first page of the example.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;first-button&quot;&gt;Click here to change to page two&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var el1 = document.getElementById(&quot;first-button&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el1.addEventListener(&quot;click&quot;, function ()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(&quot;pageTwo.html&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&lt;/div&gt;
-
-&lt;!--pageTwo.html--&gt;
-&lt;div class=&quot;ui-page&quot; id=&quot;second&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the second page of the example.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;second-button&quot;&gt;Click here to change to page one&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var el2 = document.getElementById(&quot;second-button&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el2.addEventListener(&quot;click&quot;, function ()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(&quot;pageOne.html&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&lt;/div&gt;
-</pre>
-</li>
-
-<li>To load pages from external resources:
-<p>When an external page is supplied to the routing engine, TAU fetches that page and appends it to the current document, while changing the <span style="font-family: Courier New,Courier,monospace">base</span> element&#39;s <span style="font-family: Courier New,Courier,monospace">href</span> attribute to that page path. This ensures that all other resources, such as CSS, JS, or images, are loaded from the correct path without no real page reloads. Instead, TAU simply switches the current page to the new page.</p>
-<p>To load pages from external resources, define the proper local address in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute of the link:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;external_text.html&quot;&gt;Change to external&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-<p>To create an external link that is not supposed to be handled by the TAU router, use the <span style="font-family: Courier New,Courier,monospace">rel=&quot;external&quot;</span>, <span style="font-family: Courier New,Courier,monospace">data-ajax=&quot;false&quot;</span>, or <span style="font-family: Courier New,Courier,monospace">target=&quot;_self&quot;</span> attribute:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;external_text.html&quot; target=&quot;_self&quot;&gt;Change to external&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-</li>
-</ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm b/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm
deleted file mode 100755
index 34aa90b..0000000
--- a/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm
+++ /dev/null
@@ -1,196 +0,0 @@
-<!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>Implementing More Options</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-		<div id="profile">
-				<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-		</div>
-
-		<div id="toc_border"><div id="toc">
-				<p class="toc-title">Related Info</p>
-				<ul class="toc">
-					<li><a href="../../../../org.tizen.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>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>
-
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>The following figure shows the more options components in a rectangular and circular UI.</p>
-<p class="figure">Figure: More options component in rectangular and circular devices</p>
-<p align="center"><img alt="More options component in a rectangular device" src="../../images/rectangular_moreoption.png" /> <img alt="More options component in a circular device" src="../../images/round_moreoption.png" /></p>
-
-<p>To implement the more options components:</p>
-<ol>
-
-<li>Edit the HTML code to add the more options component to your application screen:
-<pre class="prettyprint">&lt;div&nbsp;id=&quot;moreoptionsPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;&nbsp;href=&quot;./moreoptions.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&nbsp;ui-has-more&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;More&nbsp;Options&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;ui-more&nbsp;ui-icon-overflow&quot;&gt;More&nbsp;Options&lt;/button&gt;
-&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;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;moreoptionsPopup&quot;&nbsp;class=&quot;ui-popup&quot;&nbsp;data-transition=&quot;slideup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-popup-header&quot;&gt;Options&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-popup-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;Circular&nbsp;Profile&nbsp;--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;moreoptionsDrawer&quot;&nbsp;class=&quot;ui-drawer&quot;&nbsp;data-drawer-target=&quot;#moreoptionsPage&quot;&nbsp;data-position=&quot;right&quot;&nbsp;data-enable=&quot;true&quot;&nbsp;data-drag-edge=&quot;1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;selector&quot;&nbsp;class=&quot;ui-selector&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;show-icon&quot;&nbsp;data-title=&quot;Show&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;human-icon&quot;&nbsp;data-title=&quot;Human&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;delete-icon&quot;&nbsp;data-title=&quot;Delete&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;show-icon&quot;&nbsp;data-title=&quot;Show&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;human-icon&quot;&nbsp;data-title=&quot;Human&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;delete-icon&quot;&nbsp;data-title=&quot;Delete&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;x-icon&quot;&nbsp;data-title=&quot;X&nbsp;Icon&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;fail-icon&quot;&nbsp;data-title=&quot;Fail&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;show-icon&quot;&nbsp;data-title=&quot;Show&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;human-icon&quot;&nbsp;data-title=&quot;Human&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;delete-icon&quot;&nbsp;data-title=&quot;Delete&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;show-icon&quot;&nbsp;data-title=&quot;Show&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;human-icon&quot;&nbsp;data-title=&quot;Human&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-</li>
-
-<li>Edit the CSS code to set the visual style of the buttons:
-
-<pre class="prettyprint">
-#moreoptionsDrawer
-{
-&nbsp;&nbsp;&nbsp;display:&nbsp;none;
-}
-
-@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;&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()
-{
-&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;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer&nbsp;=&nbsp;page.querySelector(&quot;#moreoptionsDrawer&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selector&nbsp;=&nbsp;page.querySelector(&quot;#selector&quot;),
-&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;&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;&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;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helper.destroy();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&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.ui.guides/html/web/tau/notepad_w.htm b/org.tizen.ui.guides/html/web/tau/notepad_w.htm
deleted file mode 100755
index 9719b18..0000000
--- a/org.tizen.ui.guides/html/web/tau/notepad_w.htm
+++ /dev/null
@@ -1,448 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Creating a Notepad UI Application</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">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>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <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>
-
-<p>To create a simple notepad application using the TAU library:</p>
-
-<ol>
-<li>Generate an application from the Tizen SDK.
-<p>Create a simple basic application that can be used for further development:</p>
-<ol type="a"><li>In the IDE menu, go to
-	<strong>File &gt; New &gt; Tizen Web Project &gt; WEARABLE-2.4 &gt; Wearable UI &gt; Basic Application</strong>.</li>
-	<li>Enter the application name as <strong>Notes</strong> and click <strong>Finish</strong>.</li></ol>
-<p>The IDE creates the application with a default file structure.</p>
-</li>
-<li>Edit the section header for the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
-<p>Because the application runs on mobile or wearable devices, make sure that you have the correct <span style="font-family: Courier New,Courier,monospace">tau.css</span> styles for the corresponding profile:</p>
-<ul><li>Mobile:
-	<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/mobile/theme/default/tau.min.css&quot;/&gt;</pre></li>
-	<li>Wearable:
-		<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/wearable/theme/default/tau.min.css&quot;/&gt;</pre>
-	</li></ul>
-<p>Add also your own styles for the application:</p>
-<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
-</pre>
-
-<p>The following example shows how the section header looks after editing:</p>
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;description&quot; content=&quot;Tizen basic template generated by Tizen Web IDE&quot;/&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;title&gt;Notepad&lt;/title&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Use &#39;mobile&#39; or &#39;wearable&#39; to choose the device TAU profile--&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
-&lt;/head&gt;</pre>
-</li>
-<li>Create the pages: the main page for displaying the notes and the editing page for adding and editing notes.
-<ol type="a">
-<li>The main page is the first page, defined with the <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class and <span style="font-family: Courier New,Courier,monospace">main</span> id.
-	<ol type="a"><li>Add the title header (<strong>Notes</strong>) for the page:
-<pre class="prettyprint">
-&lt;div id=&quot;main&quot; class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notes&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&lt;/div&gt;
-</pre></li>
-		<li>Add content for the main page by adding a <span style="font-family: Courier New,Courier,monospace">div</span> element with
-			the <span style="font-family: Courier New,Courier,monospace">_ui-content</span> class. Add to this a <span style="font-family: Courier New,Courier,monospace">ul</span> element, which creates the list of notes.
-			<p>Set the <span style="font-family: Courier New,Courier,monospace">data-scroll=&quot;y&quot;</span> and <span style="font-family: Courier New,Courier,monospace">data-handler=&quot;true&quot;</span> attributes.</p>
-			<p>The item in the list is represented as a <span style="font-family: Courier New,Courier,monospace">li</span> element. When a note on the main page is clicked, the application triggers the <span style="font-family: Courier New,Courier,monospace">changepage</span> event to the <span style="font-family: Courier New,Courier,monospace">editor</span> page and shows the item.</p>
-<pre class="prettyprint">
-&lt;div class=&quot;ui-content&quot; data-scroll=&quot;y&quot; data-handler=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;notesList&quot;&gt;&lt;/ul&gt;
-&lt;/div&gt;
-</pre></li>
-		<li>Add a navigation button to the application to change to the editor page. The button is placed in the footer, and it is created from an <span style="font-family: Courier New,Courier,monospace">a</span> element,
-			which has the <span style="font-family: Courier New,Courier,monospace">id=&quot;newBtn&quot;</span> attribute.
-<pre class="prettyprint">
-&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
-&lt;/div&gt;
-</pre></li></ol>
-	<p>The above examples apply to a wearable application. The following example shows the full code for the main page in a mobile application:</p>
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notes&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot; data-scroll=&quot;y&quot; data-handler=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;notesList&quot;&gt;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-	<table class="note">
-		<tbody>
-		<tr>
-			<th class="note">Note</th>
-		</tr>
-		<tr>
-			<td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td>
-		</tr>
-		</tbody>
-	</table>
-</li>
-
-<li>On the editing page, the header and footer are similar to main page.
-<p> The only difference is that the action triggered after pressing the button adds an item to the items array and adds the item to the top of the visible list. The editing page is defined with a <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">id=&quot;editor&quot;</span> and <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-page&quot;</span> attributes.</p>
-<p>The editing page is needed for adding or editing a selected note. It has a <span style="font-family: Courier New,Courier,monospace">textarea</span> element to allow the user to edit the selected note.</p>
-
-<pre class="prettyprint">
-&lt;!--This code applies to wearable applications--&gt;
-&lt;div class=&quot;ui-page&quot; id=&quot;editor&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Editor&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea id=&quot;editorField&quot; placeholder=&quot;enter note&quot;&gt;&lt;/textarea&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;javascript:void()&quot; id=&quot;saveBtn&quot;&gt;Save&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre></li></ol></li>
-
-<li>Link to the TAU library sources and add the script to the application:
-<pre class="prettyprint">
-&lt;script src=&quot;lib/jquery.js&quot;&gt;&lt;/script&gt;
-&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/mobile/js/tau.js&quot; data-build-remove=&quot;false&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">index.html</span> file is now ready.</p>
-</li>
-
-<li>Add styles for the content:
-<pre class="prettyprint">
-a
-{
-&nbsp;&nbsp;&nbsp;color: #FFF;
-}
-
-#notesList.ui-listview
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-}
-
-#notesList.ui-listview li
-{
-&nbsp;&nbsp;&nbsp;margin: 0;
-&nbsp;&nbsp;&nbsp;white-space: nowrap;
-}
-
-#notesList.ui-listview li .ui-inline
-{
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;right: 5px;
-&nbsp;&nbsp;&nbsp;top: 5px;
-}
-
-#notesList.ui-listview li .ui-swipe-item-cover-inner
-{
-&nbsp;&nbsp;&nbsp;text-overflow: ellipsis;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
-}
-
-#editor .ui-scrollview-view
-{
-&nbsp;&nbsp;&nbsp;height: 100%;
-}
-
-#editor textarea
-{
-&nbsp;&nbsp;&nbsp;height: 95%;
-&nbsp;&nbsp;&nbsp;width: 100%;
-}
-</pre>
-</li>
-<li>Create the <span style="font-family: Courier New,Courier,monospace">main.js</span> file and create a function to close the application.
-<p>The application is started when the HTML content is ready.</p>
-<pre class="prettyprint">
-document.addEventListener(&quot;DOMContentLoaded&quot;, function ()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var newBtn = document.getElementById(&#39;newBtn&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveBtn = document.getElementById(&#39;saveBtn&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField = document.getElementById(&#39;editorField&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList = document.getElementById(&#39;notesList&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPage = document.getElementById(&#39;editor&#39;),
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mainPageId = &#39;#main&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPageId = &#39;#editor&#39;,
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = null,
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EMPTY_CONTENT = &#39;(empty)&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STORAGE_KEY = &#39;notepad&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Get data from local storage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @return {Array}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getStorage(key)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return JSON.parse(window.localStorage.getItem(key)) || false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Add data to local storage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @param {Array} data
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function addStorage(data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Return current page ID
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @returns
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getCurrentPageId()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return $(&#39;.ui-page:visible&#39;)[0].id;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Refresh current page */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function refreshCurrentPage()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#&#39; + getCurrentPageId()).trigger(&#39;create&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Get notes from storage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @return {Array}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getNotes()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return getStorage(STORAGE_KEY) || [];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clear list with notes */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function clearNotesList()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList.innerHTML = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete note from storage */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function deleteNote(index)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (notes[index] !== undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes.splice(index, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addStorage(notes);
-&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;console.error(&#39;deleteNote: note not found&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshCurrentPage();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Edit note using array index
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @param index
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function editNote(index)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (notes[index] !== undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = index;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.value = getNotes()[index];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(editorPageId);
-&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;console.error(&#39;editNote: note not found&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshCurrentPage();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show all notes extracted from local storage */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function showNotes()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesLen = notes.length,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeCover = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeItem = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearNotesList();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i; i &lt; notesLen; i += 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li = document.createElement(&#39;li&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.addEventListener(&#39;click&#39;, editNote.bind(this, i), false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn = document.createElement(&#39;button&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.className(&#39;ui-btn&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.setAttribute(&#39;data-inline&#39;, &#39;true&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.innerText = &#39;Delete&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.addEventListener(&#39;click&#39;, deleteNote.bind(this, i), false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.innerText = notes[i].replace(/\n/g, &#39; &#39;) || EMPTY_CONTENT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.appendChild(deleteBtn);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList.appendChild(li);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst = tau.widget.getInstance(notesList);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.Button(deleteBtn);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst.refresh();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clear editor textarea */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function clearEditor()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.value = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save note to storage */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function saveNote()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (currentIndex !== null)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes[currentIndex] = editorField.value;
-&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;notes.push(editorField.value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addStorage(notes);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearEditor();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(mainPageId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New note button handler */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function newNote()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearEditor();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(editorPageId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* On editor page show handler */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function onEditorPageShow()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.focus();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Attach events */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function events()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newBtn.addEventListener(&#39;click&#39;, newNote);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveBtn.addEventListener(&#39;click&#39;, saveNote);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPage.addEventListener(&#39;pageshow&#39;, onEditorPageShow);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function (e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.keyName === &quot;back&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; window.tizen
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; window.tizen.application)
-&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;switch (getCurrentPageId())
-&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;case &#39;main&#39;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.tizen.application.getCurrentApplication().exit();
-&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;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
-&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function init()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;events();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init();
-&nbsp;&nbsp;&nbsp;}, false);
-</pre>
-<p>Now the application is ready and you can deploy it to a device or Emulator.</p>
-</li>
-</ol>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/popup_ww.htm b/org.tizen.ui.guides/html/web/tau/popup_ww.htm
deleted file mode 100755
index 406406e..0000000
--- a/org.tizen.ui.guides/html/web/tau/popup_ww.htm
+++ /dev/null
@@ -1,123 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-	<title>Creating Popup Buttons</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-	</div>
-
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_popup.htm">Popup API for Wearable Web</a></li>
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Popup Buttons</h1>
-
-<p>You can create bottom and side popup button components with the Popup API.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>The following figures show the layout of the popup component in a rectangular and circular UI.</p>
-
-<p class="figure">Figure: Bottom popup component in rectangular and circular devices</p>
-
-<p align="center"><img alt="Bottom popup in a rectangular device" src="../../images/rectangular_popup_bottom.png"/> <img alt="Bottom popup in a circular device" src="../../images/round_popup_bottom.png"/></p>
-
-<p class="figure">Figure: Side popup component in rectangular and circular devices</p>
-
-<p align="center"><img alt="Side popup component in a rectangular device" src="../../images/rectangular_popup_side.png"/> <img alt="Side popup component in a circular device" src="../../images/round_popup_side.png"/></p>
-
-<p>To implement the popup button component:</p>
-
-<ul>
-<li>To implement a bottom popup button component:
-
-<p>Edit the HTML code to add the bottom popup button component to your application screen. To add the bottom button to the circular UI, you must add the <span style="font-family: Courier New,Courier,monospace">ui-bottom-button</span> class to the popup footer. The popup can have only 1 bottom button.</p>
-<pre class="prettyprint">
-&lt;div id=&quot;bottomBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Turning on Power
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saving mode will
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit the maximum
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;power
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-bottom-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;bottomBtn&quot; class=&quot;ui-btn&quot;&gt;Check&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-</li>
-
-<li>To implement a side popup button component: 
-<p>Edit the HTML code to add the side popup button component to your application screen. To add side buttons for the circular UI, you must add the <span style="font-family: Courier New,Courier,monospace">ui-side-button</span> class to the popup footer. The popup can have only 2 side buttons.</p>
-<pre class="prettyprint">
-&lt;style&gt;
-&nbsp;&nbsp;&nbsp;.btn-icon-cancel::before {-webkit-mask-image: url(./cancel.png)}
-&nbsp;&nbsp;&nbsp;.btn-icon-ok::before {-webkit-mask-image: url(./ok.png)}
-&lt;/style&gt;
-&lt;div id=&quot;sideBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Turning on Power
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saving mode will
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit the maximum
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;power
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-grid-col-2 ui-side-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;sideBtn-1&quot; class=&quot;ui-btn btn-icon-cancel&quot;&gt;Cancel&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;sideBtn-2&quot; class=&quot;ui-btn btn-icon-ok&quot;&gt;OK&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-</li>
-</ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/processing_ww.htm b/org.tizen.ui.guides/html/web/tau/processing_ww.htm
deleted file mode 100755
index 51696b3..0000000
--- a/org.tizen.ui.guides/html/web/tau/processing_ww.htm
+++ /dev/null
@@ -1,114 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-	<title>Creating Full Size Processing Components</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-	</div>
-
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_processing.htm">Processing API for Wearable Web</a></li>
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Full Size Processing Components</h1>
-
-<p>You can create a full size processing component with the Processing API.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>The following figure shows the layout of the processing component in a rectangular and circular UI.</p>
-<p class="figure">Figure: The processing component in rectangular and circular device</p>
-
-	<p align="center"><img alt="Processing component in a rectangular device" src="../../images/rectangular_processing.png" /> <img alt="Processing component in a circular device" src="../../images/round_processing.png" /></p>
-		
-<p>To implement the processing component:</p>
-<ol>
-<li>Edit the HTML code to add the processing component to your application screen:
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageProcessing&quot; data-enable-page-scroll=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Processing&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing-text&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Description about progress
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing ui-processing-full-size&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-</li>
-
-<li>Edit the CSS code to set the visual style of the processing component:
-<pre class="prettyprint">
-.ui-processing-full-size 
-{
-&nbsp;&nbsp;&nbsp;display: none;
-}
-
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;.ui-processing 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;.ui-processing.ui-processing-full-size 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block;
-&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.ui.guides/html/web/tau/thumbnail_ww.htm b/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm
deleted file mode 100755
index dfa05f3..0000000
--- a/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm
+++ /dev/null
@@ -1,166 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-	<title>Creating Thumbnails</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-	</div>
-
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_sectionchanger.htm">SectionChanger API for Wearable Web</a></li>
-		</ul>
-	</div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Thumbnails</h1>
-
-<p>You can create thumbnail component with the SectionChanger API.</p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note" colspan="1" rowspan="1">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>The following figure shows the layout of the thumbnail component in a rectangular and circular UI.</p>
-
-<p class="figure">Figure: Thumbnail in rectangular and circular devices</p>
-
-<p align="center"><img alt="Thumbnail in a rectangular device" src="../../images/rectangular_thumbnail.png" /> <img alt="Thumbnail in a circular device" src="../../images/round_thumbnail.png" /></p>
-
-
-<p>To implement the thumbnail component:</p>
-<ol>
-<li>Edit the HTML code to add the thumbnail component to your application screen:
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;sectionChangerPage&quot; data-enable-page-scroll=&quot;false&quot; &gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;sectionChanger&quot; class=&quot;ui-content ui-section-changer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;scroller&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;3&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-</li>
-
-<li>Edit the CSS code to set the visual style of the thumbnail:
-<pre class="prettyprint">
-section 
-{
-&nbsp;&nbsp;&nbsp;padding: 0 10px 0 10px;
-&nbsp;&nbsp;&nbsp;height: 100%;
-}
-.thumbnail 
-{
-&nbsp;&nbsp;&nbsp;height: 300px;
-&nbsp;&nbsp;&nbsp;width: 200px;
-&nbsp;&nbsp;&nbsp;background-color: #80482f;
-&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;transform: translate3d(0, -50%, 0);
-&nbsp;&nbsp;&nbsp;position: relative;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;line-height: 300px;
-}
-.ui-section-active .thumbnail
-{
-&nbsp;&nbsp;&nbsp;background-color: #000000;
-&nbsp;&nbsp;&nbsp;border: 1px solid #a06322;
-}
-
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;section 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;.thumbnail 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 200px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 50%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #802532;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 200px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(0.8) translate3d(0, -60%, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: transform 300ms;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;.ui-section-active .thumbnail'
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(1) translate3d(0, -50%, 0);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-<li>Edit the JavaScript code to manage the thumbnail events and other functionalities:
-<pre class="prettyprint">
-(function()
-{
-&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;sectionChangerPage&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChanger = document.getElementById(&quot;sectionChanger&quot;);
-
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, function() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.SectionChanger(sectionChanger, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation: &quot;horizontal&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fillContent: false
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&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.ui.guides/html/web/tau/ui_component_w.htm b/org.tizen.ui.guides/html/web/tau/ui_component_w.htm
deleted file mode 100755
index 2e52d9f..0000000
--- a/org.tizen.ui.guides/html/web/tau/ui_component_w.htm
+++ /dev/null
@@ -1,209 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>UI Components: Managing UI Components</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#creating">Defining UI Components</a></li>
-            <li><a href="#setoption">Setting UI Component Options</a></li>
-            <li><a href="#jquery">Managing UI Components with jQuery</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile UI Components</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm">Wearable UI Components</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>UI Components: Managing UI Components</h1>
-
-
-<p>Each UI component in TAU has its own selector for auto detecting in a HTML file. The most popular selectors are <span style="font-family: Courier New,Courier,monospace;">classes</span>. The old style of selectors is the <span style="font-family: Courier New,Courier,monospace;">data-role</span>, which is deprecated. Some UI components have also simple HTML selectors such as <span style="font-family: Courier New,Courier,monospace;">button</span> (button component), or <span style="font-family: Courier New,Courier,monospace;">input[type=checkbox]</span> (CheckboxRadio component).</p>
-
-
-<h2 id="creating">Defining UI Components</h2>
-
-<p>You can define UI components in 2 different ways using selectors:</p>
-<ul>
-<li>With a <span style="font-family: Courier New,Courier,monospace;">class</span> selector
-<p>It is recommended to use the <span style="font-family: Courier New,Courier,monospace;">class</span> selector for each component. Class selectors in TAU are composed with <span style="font-family: Courier New,Courier,monospace;">ui-</span>prefix and &lt;COMPONENT_NAME&gt;.</p>
-<p>The following example shows the creation of some components with a <span style="font-family: Courier New,Courier,monospace;">class</span> selector:</p>
-<pre class="prettyprint">
-&lt;!--&nbsp;Create&nbsp;Expandable&nbsp;component&nbsp;--&gt;
-&lt;div&nbsp;class=&quot;ui-expandable&quot;&nbsp;id=&quot;expandable-test&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable&nbsp;head&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;!--&nbsp;Create&nbsp;ToggleSwitch&nbsp;component&nbsp;--&gt;
-&lt;select&nbsp;class=&quot;ui-toggleswitch&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;off&quot;&gt;&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;on&quot;&gt;&lt;/option&gt;
-&lt;/select&gt;</pre>
-</li>
-<li>With a <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector
-<p>The <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector in TAU composed with &lt;COMPONENT_NAME&gt; in lowercase.</p>
-<p>The following example shows the creation of some components with a <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector:</p>
-<pre class="prettyprint">
-&lt;!--&nbsp;Create&nbsp;TextEnveloper&nbsp;component&nbsp;--&gt;
-&lt;div&nbsp;data-role=&quot;textenveloper&quot;&gt;&lt;/div&gt;
-
-&lt;!--&nbsp;Create&nbsp;Drawer&nbsp;component&nbsp;--&gt;
-&lt;div&nbsp;data-role=&quot;drawer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;data-role=&quot;listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;List&nbsp;item&nbsp;1&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&lt;/div&gt;</pre>
-</li>
-</ul>
-
-<h2 id="setoption">Setting UI Component Options</h2>
-
-<p>TAU supports several ways of setting options for a UI component. For more information, see <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile UI Components</a> and <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm">Wearable UI Components</a>.</p>
-<p>You have the following options for setting the options:</p>
-<ul>
-<li>Initializing options with the <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute
-<p>Various options can be set with <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute when the component is being created. This type of setting options is called only when the component is created. After creating the component, changing the data attributes on the HTML element do not change the component options.</p>
-<p>The following example shows a SectionChanger code with a <span style="font-family: Courier New,Courier,monospace;">data-</span> option:</p>
-<pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;data-orientation=&quot;horizontal&quot;&nbsp;data-circular=&quot;true&quot;&nbsp;data-use-tab=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;</pre>
-<p><span style="font-family: Courier New,Courier,monospace;">data-circular</span> and <span style="font-family: Courier New,Courier,monospace;">data-use-tab</span> are the initial options for creating a SectionChanger.</p>
-</li>
-
-
-<li>Setting options with a manual constructor
-<p>Options can be also set as argument to component constructor. When using options as argument you must use the camelCase name.</p>
-<p>The following example shows the use of manual constructor:</p>
-<pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;id=&quot;sectionchanger&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var&nbsp;sectionEl&nbsp;=&nbsp;document.getElementById(&quot;sectionchanger&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget&nbsp;=&nbsp;tau.widget.SectionChanger(sectionEl,&nbsp;
-&nbsp;&nbsp;&nbsp;{&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation:&nbsp;&quot;horizontal&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circular:&nbsp;true
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useTab:&nbsp;true
-&nbsp;&nbsp;&nbsp;});
-&lt;/script&gt;
-</pre>
-</li>
-
-<li>Setting options with a method call
-<p>To set options dynamically, use the <span style="font-family: Courier New,Courier,monospace;">option</span>() method.</p>
-<pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;data-orientation=&quot;horizontal&quot;&nbsp;data-circular=&quot;true&quot;&nbsp;data-use-tab=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var&nbsp;sectionEl&nbsp;=&nbsp;document.getElementById(&quot;sectionchanger&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget&nbsp;=&nbsp;tau.widget.SectionChanger(sectionEl);
-
-&nbsp;&nbsp;&nbsp;sectionChangerWidget.option("circular", true);
-&lt;/script&gt;
-</pre>
-</li>
-</ul>
-
-<h2 id="jquery">Managing UI Components with jQuery</h2>
-<p>You can use jQuery with TAU for convenience. Also for backward compatibility, TAU supports the jQuery interface for UI components. However, it is strongly recommended to use new TAU style.</p>
-<p>To manage the UI components if the jQuery library is loaded:</p>
-<ol>
-<li>Create the UI component:
-<pre class="prettyprint">&lt;div&nbsp;class=&quot;ui-indexscrollbar&quot;&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;$(&quot;#indexscrollbar&quot;).indexscrollbar();
-&lt;/script&gt;</pre>
-</li>
-<li>Use the call methods:
-<pre class="prettyprint">$(&quot;.selector&quot;).componentName(&quot;methodName&quot;,&nbsp;argument1,&nbsp;argument2,&nbsp;...);</pre>
-<pre class="prettyprint">&lt;div&nbsp;class=&quot;ui-indexscrollbar&quot;&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;/* If the IndexScrollBar component is created */
-&nbsp;&nbsp;&nbsp;$(&quot;#indexscrollbar&quot;).indexscrollbar("destroy");
-&lt;/script&gt;</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>
diff --git a/org.tizen.ui.guides/html/web/w3c/animation_w.htm b/org.tizen.ui.guides/html/web/w3c/animation_w.htm
deleted file mode 100755
index 3d34691..0000000
--- a/org.tizen.ui.guides/html/web/w3c/animation_w.htm
+++ /dev/null
@@ -1,336 +0,0 @@
-<!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>CSS Animations Module Level 3: Creating Animations</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="#keyframe">Keyframes</a></li>
-			<li><a href="#prop_ani">Animation Properties</a></li>
-			<li><a href="#create">Creating a Logo Animation</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#animations">CSS Animations Module Level 3 API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#animations">CSS Animations Module Level 3 API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Animations Module Level 3: Creating Animations</h1>
-
-<p>Animations (like <a href="transition_w.htm">transitions</a>) change the presentational value of the CSS properties over time. The principal difference between animations and transitions is that while transitions are triggered implicitly when property values change, animations are explicitly executed when the animation properties are applied. This means that for animations, you must <a href="#create">use animation keyframes to define explicit values for the properties</a> being animated.</p>
-
-<p>When using the CSS animation properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>
-
-<h2 name="keyframe" id="keyframe">Keyframes</h2>
-<p>The CSS animations work based on <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules defined for specific elements. The rules can define various property changes complementing the simple running of a transition.</p>
-<p>If the animation only has one set of changes over its whole iteration, the rule values can be assigned with a <span style="font-family: Courier New,Courier,monospace">from {} to {}</span> rule, where <span style="font-family: Courier New,Courier,monospace">from</span> is the beginning of the animation at 0% and <span style="font-family: Courier New,Courier,monospace">to</span> is the end at 100%. If there are multiple changes required, you can define their exact time periods using multiple <span style="font-family: Courier New,Courier,monospace">&lt;number&gt;% {}</span> rules that together cover the entire animation iteration from 0% to 100%.</p>
-<p>The following code snippet demonstrates how to use keyframes. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_keyframes.html</a></p>
-<pre class="prettyprint">
-&lt;style type=&quot;text/css&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;@-webkit-keyframes boxani 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from {left: 0; top: 0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to {left: 100px; top: 100px;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;@-webkit-keyframes boxani_case01 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0% {left: 0; top: 0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25% {left: 100px; top: 0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50% {left: 100px; top: 100px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75% {left: 0; top: 100px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100% {left: 0; top: 0;}
-&nbsp;&nbsp;&nbsp;}
-
-&lt;/style&gt;
-</pre>
-
-<h2 name="prop_ani" id="prop_ani">Animation Properties</h2>
-
-<p>You can define various properties for an animation to control how it is played:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">animation-name</span>
-<p>This property uses the name defined in the <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules to play the animation.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-duration</span>
-<p>This property defines how long one iteration of the animation takes.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span>
-<p>This property defines how many times the animation is repeated. If the value is set as <span style="font-family: Courier New,Courier,monospace">infinite</span>, the repetitions are unlimited.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-timing-function</span>
-<p>This property defines the pace of the animation.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-direction</span>
-<p>This property defines the replay direction. The <span style="font-family: Courier New,Courier,monospace">reverse</span> value plays the animation from 100% keyframe to 0% keyframe, while the <span style="font-family: Courier New,Courier,monospace">alternate</span> value plays the animation normally during odd iterations, and from 100% keyframe to 0% keyframe during even iterations.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-play-state</span>
-<p>This property defines the replay status of the animation. The <span style="font-family: Courier New,Courier,monospace">paused</span> value temporarily stops the animation.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">animation-delay</span>
-<p>This property defines the delay time before the start of the animation.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>
-<p>This property defines the state of the animation before or after the animation is played. The <span style="font-family: Courier New,Courier,monospace">forwards</span> value maintains the last value of the keyframe rule when the animation is over, while the <span style="font-family: Courier New,Courier,monospace">backwards</span> value fills up the first value of the keyframe rule when the animation with the <span style="font-family: Courier New,Courier,monospace">animation-delay</span> property is in a standby state. The <span style="font-family: Courier New,Courier,monospace">both</span> value covers both the start and the end of the animation.</p></li></ul>
-
-<p>The following code snippet demonstrates how to use animation properties. For a complete source code, see:</p>
-<ul>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_delay.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_direction.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_fill_mode.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_iteration_count.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_name.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_play_state.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_timing_function.html</a></li>
-</ul>
-
-<pre class="prettyprint lang-html">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-name: boxani;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 5s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-direction: normal;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-delay: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-fill-mode: none;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box.case01: hover 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-play-state: paused;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-fill-mode: forwards;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;animation-name&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animate&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animation-name: boxani;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box case01&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animate&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animation-name: boxani_case01;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&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">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-	
-<p>The <span style="font-family: Courier New,Courier,monospace">animation</span> property allows you to define all the animation properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">animation-name</span> | <span style="font-family: Courier New,Courier,monospace">animation-duration</span> | <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">animation-delay</span> | <span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span> | <span style="font-family: Courier New,Courier,monospace">animation-direction</span> | <span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>. If you omit a property value, a default value is used instead.</p>
-
-<pre class="prettyprint">
-&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;.box 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 150px; height: 100px; background: Coral; position: relative;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: boxani 3s ease 1s infinite alternate backwards;
-&nbsp;&nbsp;&nbsp;}
-&lt;/style&gt;
-</pre>
-
-<h2 id="create" name="create">Creating a Logo Animation</h2>
-				
-<p>To enhance the user experience of your application, you must learn to create a logo animation, where element properties can be assigned and changed for each element and keyframe. The logo animation is similar to the animation that appears when a Tizen device (or Emulator) is switched on:</p>
-
-<ol>  
-<li>No elements are initially shown on the screen.  </li>
-<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller.</li>
-<li>Each letter in the word &quot;TIZEN&quot; consecutively comes in from the left of the screen and moves to the right to its correct location.</li>
-</ol>
-<p class="figure">Figure: Logo animation (in mobile applications only)</p> 
-<p align="center"><img alt="Logo animation" src="../../images/animation1.png" /></p> 
-<p>To create a logo animation:</p>
-<ol>
-<li>Create the HTML layout for the animation. To be able to manage the movement of each animation part separately, you must define individual elements for each part.
-<pre class="prettyprint">
-&lt;div class=&quot;animation-holder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt t&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt i&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt z&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt e&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt n&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt tm&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-logo&quot;&gt;&lt;/span&gt;
-&lt;/div&gt;
-</pre>
-</li>
-<li>Define the basic style for the animation:
-<pre class="prettyprint">
-.example-body {width: 320px; height: 480px; background: #000; margin: 0 auto; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative; border: 2px solid #fff; overflow: hidden;}
-.animation-holder {width: 280px; height: 88px; position: absolute; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 50%; top: 50%; margin: -54px 0 0 -140px;} 
-
-.tizen-txt, .tizen-logo {position: absolute; display: block; 
-&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;background-repeat: no-repeat; background-position: 50% 50%}
-.tizen-txt.t {width: 48px; height: 56px; background-image: url(images/txt_t.png);}
-.tizen-txt.i {width: 15px; height: 56px; background-image: url(images/txt_i.png);}
-.tizen-txt.z {width: 46px; height: 56px; background-image: url(images/txt_z.png);}
-.tizen-txt.e {width: 45px; height: 56px; background-image: url(images/txt_e.png);}
-.tizen-txt.n {width: 54px; height: 58px; background-image: url(images/txt_n.png);}
-.tizen-txt.tm {width: 11px; height: 6px; background-image: url(images/txt_tm.png);}
-.tizen-logo {width: 220px; height: 211px; left: 30px; top: -61px; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(images/logo_tizen.png); background-size: 100% 100%;}
-</pre>
-</li>
-<li>Create the animation:
-<ol type="a">
-<li>To ensure that all the animation elements are played within the same time frame, some common properties are defined for the animation. The animation movement time is 7 seconds, and the animation repeats infinitely.
-<p>When an animation that repeats itself is activated, it can look unnatural when it suddenly returns to its initial position after finishing an iteration. To make the repetition move naturally, set the <span style="font-family: Courier New,Courier,monospace">animation-direction</span> property to <span style="font-family: Courier New,Courier,monospace">alternate</span>. The alternate direction means that during the odd iterations the animation proceeds in the normal direction (from the 0% keyframe to the 100% keyframe), while during the even iterations the keyframes are played in the opposite direction from 100% to 0%.</p>
-<pre class="prettyprint">
-.tizen-txt, .tizen-logo 
-{
-&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 7s;
-&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;
-&nbsp;&nbsp;&nbsp;-webkit-animation-direction: alternate;
-}
-</pre>
-</li>
-<li>Create the keyframes to implement the flow for the Tizen logo:
-<ul>
-<li>During the first 25% of the animation total playing time (7 seconds), the transparency disappears and the Tizen logo appears.</li>
-<li>During the 25 - 50% of the playing time, the logo size becomes smaller as the width and height values are reduced, and due to the left and top value, the logo is positioned to the top right corner of the screen.</li>
-<li>During the 50 - 100% of the playing time, the values do not change, and the logo remains in its new position.</li> 
-</ul> 
-<p></p>
-<pre class="prettyprint">
-@-webkit-keyframes tizen-logo 
-{
-&nbsp;&nbsp;&nbsp;0% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 0;}
-&nbsp;&nbsp;&nbsp;25% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 1;}
-&nbsp;&nbsp;&nbsp;50% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
-&nbsp;&nbsp;&nbsp;100% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
-}
-</pre>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If the 100% keyframe is not defined, the animation is executed based on the original properties, and the logo size increases to its original size at the end.</td> 
-      </tr> 
-     </tbody> 
-    </table></li>
-<li>Create the keyframes to implement the flow for each letter in the word &quot;TIZEN&quot;:
-<ul>
-<li>To hide the letter initially, the property has been assigned outside the screen at the 0% keyframe. To allow the Tizen logo to appear first, the first letter is introduced at the 30% keyframe.</li>
-<li>To create a slight collision animation, the letter element moves to -10 px of the final value at the 40% keyframe before reaching its final 0 px value at the 45% keyframe.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> property can be changed for each keyframe point, and is used to determine the pace of the animation. When the letter is actually shown on the screen and moved to its final location, the ease in and out timing functions are used.</li>
-</ul>
-
-<p>To show the letters one at a time, the timing is pushed back a bit more for each consecutive letter:</p>
-<pre class="prettyprint">
-&lt;!--Letter T--&gt;
-@-webkit-keyframes tizen-txt-t 
-{
-&nbsp;&nbsp;&nbsp;0% {left: 340px; top: 31px;}
-&nbsp;&nbsp;&nbsp;30% {left: 340px; top: 31px; animation-timing-function: ease-in;}
-&nbsp;&nbsp;&nbsp;40% {left: -10px; top: 31px; animation-timing-function: ease-out;}
-&nbsp;&nbsp;&nbsp;45% {left: 0; top: 31px;}
-&nbsp;&nbsp;&nbsp;100% {left: 0; top: 31px;}
-}
-
-&lt;!--Letter I--&gt;
-@-webkit-keyframes tizen-txt-i 
-{
-&nbsp;&nbsp;&nbsp;0% {left: 340px; top: 31px;}
-&nbsp;&nbsp;&nbsp;40% {left: 340px; top: 31px; animation-timing-function: ease-in;}
-&nbsp;&nbsp;&nbsp;50% {left: 47px; top: 31px; animation-timing-function: ease-out;}
-&nbsp;&nbsp;&nbsp;55% {left: 57px; top: 31px;}
-&nbsp;&nbsp;&nbsp;100% {left: 57px; top: 31px;}
-}
-
-&lt;!--Remaining letters--&gt;
-</pre></li>
-
-<li><p>After creating all the keyframes, define the <span style="font-family: Courier New,Courier,monospace">animation-name</span> property for each element:</p>
-<pre class="prettyprint">
-.tizen-txt.t 
-{
-&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-t;
-}
-.tizen-txt.i 
-{
-&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-i;
-}
-</pre></li>
-
-</ol></li></ol>
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_practical.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">logo_tizen.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_e.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_i.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_n.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_t.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_tm.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_z.png</a></li>
- </ul>
-
-<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/background_w.htm b/org.tizen.ui.guides/html/web/w3c/background_w.htm
deleted file mode 100755
index 609ad9e..0000000
--- a/org.tizen.ui.guides/html/web/w3c/background_w.htm
+++ /dev/null
@@ -1,188 +0,0 @@
-<!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>CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</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">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#border">CSS Backgrounds and Borders Module Level 3 API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#border">CSS Backgrounds and Borders Module Level 3 API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</h1>
-
-<p>You can manage the CSS properties for <a href="#create">specifying the border style or background of any HTML element</a>.</p>
-
-<p>When creating a background for an element, you can use the following properties:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">background-color</span>
-<p>Defines the color of the background.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-image</span>
-<p>Defines the image to be used. You can add images as separate layers to an element. To add multiple images, separate them by commas to add each image as a separate layer. The images are added in the order they are defined.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-position</span>
-<p>Defines the exact position of the image.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-repeat</span>
-<p>Defines whether the image is repeated to fill the entire background (in case the image is too small to do it otherwise).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-origin</span>
-<p>Defines the position of the initial background for the item.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-size</span>
-<p>Defines the size of the image in the background.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-clip</span>
-<p>Defines the area of the cropped background element.</p></li>
-</ul>
-
-<p>The border properties specify the line thickness, style, and color for the element border. You can define the border using 3 separate properties (<span style="font-family: Courier New,Courier,monospace">border-width</span>, <span style="font-family: Courier New,Courier,monospace">border-style</span>, and <span style="font-family: Courier New,Courier,monospace">border-color</span>), or by listing the values for all 3 properties together in 1 <span style="font-family: Courier New,Courier,monospace">border</span> property. To define rounded corners for the border, you can additionally use the <span style="font-family: Courier New,Courier,monospace">border-radius</span> property.</p>
-
-<p>To define shading for an element, you can define the horizontal and vertical offset, blur radius, and the spread distance values within the <span style="font-family: Courier New,Courier,monospace">box-shadow</span> property. To switch the shadow from outside to inside the element, add the <span style="font-family: Courier New,Courier,monospace">inset</span> keyword to the property too.</p>
-
-<p>The following image shows a simple background color (top left), a background image (top right), multiple images with a solid black border (bottom left), and an element with shading and a solid black border with rounded corners (bottom right). The background image at top right is automatically repeated to cover the entire background, while the images at bottom left are not repeated due to the <span style="font-family: Courier New,Courier,monospace">background-repeat</span> property value.</p>
-
-  <p class="figure">Figure: Background examples</p> 
-  <p align="center"><img alt="Background examples" src="../../images/css_bg1.png" /></p>
-<p>The following code snippet demonstrates how to set the background color, images, borders, and shadings.</p>
-
-<pre class="prettyprint">
-&lt;!--Background color--&gt;
-#one 
-{
-&nbsp;&nbsp;&nbsp;width: 180px;
-&nbsp;&nbsp;&nbsp;height: 40px;
-&nbsp;&nbsp;&nbsp;background-color: lightblue;
-}
-
-&lt;!--Background image--&gt; 
-#one 
-{
-&nbsp;&nbsp;&nbsp;width: 200px;
-&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;background-color: #00F;
-&nbsp;&nbsp;&nbsp;background-image: url(t3.png);
-}
-
-&lt;!--Multiple images--&gt; 
-#multi 
-{
-&nbsp;&nbsp;&nbsp;width: 155px;
-&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;border: 1px solid #000;
-&nbsp;&nbsp;&nbsp;background-color: #87CEFA;
-&nbsp;&nbsp;&nbsp;background-image: url(t1.png), url(t2.png), url(t3.png);
-&nbsp;&nbsp;&nbsp;background-position: center center, 20% 100%, top left;
-&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
-}
-
-&lt;!--Shading and border with rounded corners--&gt;
-#shading 
-{
-&nbsp;&nbsp;&nbsp;width: 160px;
-&nbsp;&nbsp;&nbsp;height: 40px;
-&nbsp;&nbsp;&nbsp;border: 1px solid #000;
-&nbsp;&nbsp;&nbsp;border-radius: 20px;
-&nbsp;&nbsp;&nbsp;background-color: #88f;
-&nbsp;&nbsp;&nbsp;box-shadow: #888 10px 10px;
-}
-</pre>
-
-<h2 id="create" name="create">Creating Backgrounds</h2>
-
-<p>To enhance the user experience of your application, you must learn to create a multilayer background with the parallax effect using the <a href="http://www.w3.org/TR/CSS2/box.html" target="_blank">CSS box model</a>. The background consists of 3 images on separate layers, and 2 of the layers can be moved over each other.</p>
-
-<p class="figure">Figure: Background with the parallax effect</p> 
-<p align="center"><img alt="Background with the parallax effect" src="../../images/css_bg_tutorial1.png" /></p> 
-
-<ol><li>Prepare 3 images (<span style="font-family: Courier New,Courier,monospace">tizen.png</span>, <span style="font-family: Courier New,Courier,monospace">tizen2.png</span>, and <span style="font-family: Courier New,Courier,monospace">dot.png</span>), each with a transparent background.
-
-<p align="center"><img alt="tizen.png, tizen2.png, and dot.png images" src="../../images/css_bg_tutorial2.png" /></p> </li>
-
-<li>Create a <span style="font-family: Courier New,Courier,monospace">div</span> element with <span style="font-family: Courier New,Courier,monospace">id=&quot;parallelexample&quot;</span> and a slider input element with the minimum, maximum, and initial value:
-<pre class="prettyprint">
-&lt;div id=&quot;parallelexample&quot;&gt;&lt;/div&gt;
-&lt;input id=&quot;position&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;200&quot; value=&quot;50&quot;&gt;
-</pre></li>
-
-<li>Define the needed styles for the  <span style="font-family: Courier New,Courier,monospace">div</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section using the <span style="font-family: Courier New,Courier,monospace">parallelexample</span> ID.
-<p>Define a background using the prepared images in the correct order. The images are shown in the order they have been added, with the first image on the topmost layer. Use the same order when defining the background position for each image.</p>
-<pre class="prettyprint">
-#parallelexample
-{
-&nbsp;&nbsp;&nbsp;width: 300px;
-&nbsp;&nbsp;&nbsp;height: 300px;
-&nbsp;&nbsp;&nbsp;background-image: url(tizen2_32.png), url(tizen3_32.png), url(dot.png);
-&nbsp;&nbsp;&nbsp;background-position: 6.25em 8em, 3.125em 4em, center top;
-&nbsp;&nbsp;&nbsp;background-repeat: repeat, repeat, repeat;
-&nbsp;&nbsp;&nbsp;border: 1px solid black;
-&nbsp;&nbsp;&nbsp;margin: 0px auto;
-}
-</pre></li>
-<li>To create the parallax effect, create a method that moves the background layers by changing the horizontal position values of the images in the <span style="font-family: Courier New,Courier,monospace">div</span> element. To determine the position value change, add an <span style="font-family: Courier New,Courier,monospace">onchange</span> event handler for the slider to determine the change based on the slider handle movement.
-<pre class="prettyprint">
-function moveLayers() 
-{
-&nbsp;&nbsp;&nbsp;/* Get slider value */
-&nbsp;&nbsp;&nbsp;var poz = document.getElementById(&#39;position&#39;);
-&nbsp;&nbsp;&nbsp;/* Get the div element */
-&nbsp;&nbsp;&nbsp;var example = document.getElementById(&#39;ParallaxExamle&#39;);
-&nbsp;&nbsp;&nbsp;/* Add the event handler */
-&nbsp;&nbsp;&nbsp;poz.onchange = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var layer1 = this.value/8, layer2 = this.value/16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;example.style.backgroundPosition = layer1 +&#39;em 8em, &#39; 
-&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;+ layer2 + &#39;em 4em, center top&#39;;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre></li></ol>
-<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/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">css_background.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">dot.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen2_32_s.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen3_32.png</a></li>
- </ul>
-		
- 
-<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/basic_ui_w.htm b/org.tizen.ui.guides/html/web/w3c/basic_ui_w.htm
deleted file mode 100755
index 3090acb..0000000
--- a/org.tizen.ui.guides/html/web/w3c/basic_ui_w.htm
+++ /dev/null
@@ -1,201 +0,0 @@
-<!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>CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</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="#selector">Using Pseudo-element Selectors</a></li>
-			<li><a href="#boxmodel">Using Box Model Properties</a>
-			</li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</h1>
-
-<p>You can apply styles to HTML documents.</p>
-<p>The CSS3 version has caused changes in the Selector, Color, Web Form, and Fonts CSS modules. In addition, the CSS3 UI API also handles changes related to the following user interface items:</p>
-<ul>
-<li>User interface selectors
-<p>The CSS Selector is an essential module for applying a CSS to HTML in order to enable the DOM element selection. The <a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#user-interface-selectors" target="_blank">pseudo-element selectors</a> can be used to assign the user interface state. With the selectors, you can <a href="#selector">change the Web form style</a> according to the user input without using JavaScript.</p></li>
-
-<li>Box model properties
-<p>A box model refers to all DOM elements excluding design elements, such as <span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;i&gt;</span>. The box model area is set as defined in the following figure.</p>
-<ul>
-<li><strong>Content</strong>: Content area</li>
-<li><strong>Padding</strong>: Gap between the content and boundary</li>
-<li><strong>Border</strong>: Boundary</li>
-<li><strong>Margin</strong>: Overall size of the box model</li>
-</ul>
-<p class="figure">Figure: Box model structure</p>
-<p align="center"><img alt="Figure: Box model structure" src="../../images/box_model_properties_struct.png"/></p>
-
-<p>You can <a href="#boxmodel">use the box model properties</a> to assign styles to the selected DOM elements:</p>
-<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property assigns the box size range.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">outline</span> properties make the box outstanding.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property handles the text extending outside the box.</li></ul>
-</li>
-</ul>
-
-<h2 id="selector" name="selector">Using Pseudo-element Selectors</h2>
-				
-<p>To enhance the user experience of your application, you must learn how to use pseudo-element selectors:</p>
-<ol>
-<li><p>Use the pseudo-classes, such as <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span>, to add different styles based on the state of the DOM elements:</p>
-<pre class="prettyprint">input: enabled {border: 1px solid blue}
-input: disabled {border: 1px solid red}</pre>
-<table class="note"> 
-    <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">In the versions prior to CSS3, pseudo-elements, such as <span style="font-family: Courier New,Courier,monospace">:hover</span>, <span style="font-family: Courier New,Courier,monospace">:active</span>, and <span style="font-family: Courier New,Courier,monospace">:focus</span>, were used, and required an attribute selector. Since the <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span> classes are not influenced by the <span style="font-family: Courier New,Courier,monospace">display</span> and <span style="font-family: Courier New,Courier,monospace">visibility</span> attributes, they improve the accessibility.</td> 
-      </tr> 
-     </tbody> 
-   </table></li>
-<li>To control the state of the HTML5 Web Forms (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">wearable</a> applications), use the <span style="font-family: Courier New,Courier,monospace">:in-range</span> and <span style="font-family: Courier New,Courier,monospace">:out-of-range</span> pseudo-classes. 
-<p>They check for any values that have exceeded the inserted range. (The following figure applies to mobile applications only.)</p>
-<pre class="prettyprint">
-&lt;!--HTML--&gt; 
-&lt;input type=&quot;number&quot; step=&quot;10&quot; min=&quot;10&quot; max=&quot;100&quot;&gt;
-</pre>
-<pre class="prettyprint">
-&lt;!--CSS--&gt;
-input[type=&quot;number&quot;]: in-range {border: 3px solid blue; width: 90%}
-input[type=&quot;number&quot;]: out-of-range {border: 3px solid red; width: 90%}
-</pre>
-<p align="center"><img alt="Element ranges (in mobile applications only)" src="../../images/pseudo_elements_selector_range.png"/></p></li>
-<li>To apply different styles to required input items and option items, use the <span style="font-family: Courier New,Courier,monospace">:required</span> and <span style="font-family: Courier New,Courier,monospace">:optional</span> pseudo-classes. (The following figure applies to mobile applications only.)
-<pre class="prettyprint">
-&lt;!--HTML--&gt;
-&lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&lt;legend&gt;required and optional&lt;/legend&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;email: &lt;input type=&quot;email&quot; required&gt;&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;password: &lt;input type=&quot;Password&quot; placeholder=&quot;required area&quot; required&gt;&lt;/label&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;date: &lt;input type=&quot;date&quot; placeholder=&quot;You know what to do, huh?&quot;&gt;&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;textarea placeholder=&quot;Comment&quot;&gt;&lt;/textarea&gt;
-&lt;/fieldset&gt;</pre>
-<pre class="prettyprint">
-&lt;!--CSS--&gt;
-input: required, textarea: required {border: 1px solid red}
-input: optional, textarea: optional {border: 1px solid #777}
-</pre>
-<p align="center"><img alt="Required and optional elements (in mobile applications only)" src="../../images/pseudo_elements_selector_required.png"/></p></li></ol>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">range.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">required_and_optional.html</a></li>
- </ul>
-			
-<h2 id="boxmodel" name="boxmodel">Using Box Model Properties</h2>
-				
-<p>To enhance the user experience of your application, you must learn how to use box model properties:</p> 
-<table>
-<tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The properties dependent on mouse and keyboard functions are not discussed in this tutorial.</td> 
-      </tr> 
-     </tbody> 
-   </table>
-<ol>
-<li>To assign the area that is included in the width and height of the box automatically, use the <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property. To assign the width without a margin, use the <span style="font-family: Courier New,Courier,monospace">box-sizing: border-box</span> property.
-<pre class="prettyprint lang-html">
-div.content-box {box-sizing: content-box} &lt;!--width (height) = content--&gt;
-div.border-box {box-sizing: border-box} &lt;!--width (height) = content + padding + border--&gt;
-div.border-box: before {height: 40px}
-</pre></li>
-
-<li>To draw an outline without using up the area, use the <span style="font-family: Courier New,Courier,monospace">outline</span> property:
-<pre class="prettyprint">
-.Test-Box {outline: 5px dashed red}
-.outline: before {outline: 2px dashed red}
-.outline-offset: before {outline-offset: 35px}
-</pre></li>
-
-<li>To handle text that exceeds the area of the box model, use the <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property. The <span style="font-family: Courier New,Courier,monospace">text-overflow: ellipsis</span> property is used to indicate the text exceeded the padding area as &#39;...&#39;.
-<pre class="prettyprint">div 
-{
-&nbsp;&nbsp;&nbsp;width: 250px;
-&nbsp;&nbsp;&nbsp;margin: 20px auto;
-&nbsp;&nbsp;&nbsp;padding: 20px 30px;
-&nbsp;&nbsp;&nbsp;background-color: #eee;
-&nbsp;&nbsp;&nbsp;color: #333;
-&nbsp;&nbsp;&nbsp;border: 5px solid #333;
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
-&nbsp;&nbsp;&nbsp;white-space: nowrap;
-}
-
-.clip {text-overflow: clip}
-.ellipsis {text-overflow: ellipsis}</pre></li>
-</ol>
-
-<p>The following figure illustrates the box model properties; from left to right, it shows the effects of the box sizing, outline, and text overflow properties.</p>
-<p class="figure">Figure: Box model properties (in mobile applications only)</p>
-<p align="center"><img alt="Box model properties (in mobile applications only)" src="../../images/box_model_properties.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/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">box_sizing_property.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">outline_property.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">text_overflow_property.html</a></li>
- </ul>
-		
-
-<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/clipboard_mw.htm b/org.tizen.ui.guides/html/web/w3c/clipboard_mw.htm
deleted file mode 100755
index aede950..0000000
--- a/org.tizen.ui.guides/html/web/w3c/clipboard_mw.htm
+++ /dev/null
@@ -1,297 +0,0 @@
-<!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>Clipboard API and events: Transferring Content Between Applications</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="#copy">Copying Content</a></li>
-		<li><a href="#cut">Cutting Content</a></li>
-		<li><a href="#paste">Pasting Content</a></li>
-		<li><a href="#target">Copying and Pasting Content into an Editable Element</a></li>
-	</ul>
-    <p class="toc-title">Related Info</p>
-        <ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#clipboard">Clipboard and events API for Mobile Web</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Clipboard API and events: Transferring Content Between Applications</h1>
-  
-  
-<p>The clipboard and events feature is used for cutting, copying, and pasting content to easily transfer it between Web applications.</p>
-
-  <table class="note">
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th>
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>   
-
-  <p>The main features of Clipboard API and events include:</p>
-  <ul>
-    <li><p>Copying</p>
-<p>You can fire the <span style="font-family: Courier New,Courier,monospace">copy</span> event to <a href="#copy">place the selected data on the clipboard</a>.</p></li>
-    <li><p>Cutting</p>
-<p>You can fire the <span style="font-family: Courier New,Courier,monospace">cut</span> event to place the selected data on the clipboard, and <a href="#cut">remove the selected content in the document</a>.</p></li>
-    <li><p>Pasting</p>
-<p>You can fire the <span style="font-family: Courier New,Courier,monospace">paste</span> event to <a href="#paste">retrieve data from the clipboard and insert it into a document</a>. The data is retrieved in the format most appropriate to the assigned context.</p>
-<p>The most common way of providing clipboard features in an application is to create an editable element, and allow the user to <a href="#target">copy content and then paste it into the editable element</a>.</p>
-</li>
-  </ul>
-  
-  <h2 id="copy" name="copy">Copying Content</h2>
-
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">copy</span> event:</p> 
-<ol>
-<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> event:
-<pre class="prettyprint lang-js">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;copy&quot;, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyHandler(e);
-&nbsp;&nbsp;&nbsp;}, false);</pre>
-    </li>
-	<li><p>When you start copying, the <span style="font-family: Courier New,Courier,monospace">copy</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">copyHandler()</span> method is called.</p>
-	<p>Stop the system clipboard basic operation and set the range you want to copy:</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function copyHandler(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If the current selection is not influenced and there is no selected range, the clipboard imports the <span style="font-family: Courier New,Courier,monospace">setData()</span> method. The copied content cannot be edited apart from adding a <a href="http://www.w3.org/TR/2014/WD-html51-20140617/editing.html#the-datatransferitemlist-interface" target="_blank">DataTransferItemList</a> item.</td> 
-      </tr> 
-     </tbody>
-</table>
-</li>
-<li>Store the data of the selected range: 
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
-&nbsp;&nbsp;&nbsp;};
-&lt;/script&gt;
-</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/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul>  
-
- <h2 id="cut" name="cut">Cutting Content</h2>
-
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">cut</span> event:</p> 
-<ol>
-<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">cut</span> event:
-<pre class="prettyprint lang-js">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;cut&quot;, function(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cutHandler(e);
-&nbsp;&nbsp;&nbsp;}, false);</pre>
-
-    </li>
-	<li><p>When you start cutting, the <span style="font-family: Courier New,Courier,monospace">cut</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">cutHandler()</span> method is called.</p>
-	<p>Stop the system clipboard basic operation and set the range you want to cut:</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function cutHandler(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
-
-</li>
-<li>Store the data of the selected range: 
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
-&nbsp;&nbsp;&nbsp;};   
-&lt;/script&gt;
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Before the <span style="font-family: Courier New,Courier,monospace">setData()</span> method is imported, the basic motion of the system event must be cancelled using the <span style="font-family: Courier New,Courier,monospace">preventDefault()</span> method. Otherwise, the data to be allocated to the clipboard is overwritten by the system clipboard.</td> 
-      </tr> 
-     </tbody>
-</table>
-</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/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul> 
-
- <h2 id="paste" name="paste">Pasting Content</h2>
-
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">paste</span> event:</p> 
-<ol>
-<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">paste</span> event:
-<pre class="prettyprint lang-js">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
-&nbsp;&nbsp;&nbsp;}, false);</pre>
-</li>
-	<li><p>When you start pasting, the <span style="font-family: Courier New,Courier,monospace">paste</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">pasteHandler()</span> method is called.</p>
-	<p>Stop the system clipboard basic operation:</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function pasteHandler(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();</pre>
-</li>
-	<li>Paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
-&nbsp;&nbsp;&nbsp;};              
-&lt;/script&gt;
-</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/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul>  
-
- <h2 id="target" name="target">Copying and Pasting Content into an Editable Element</h2>
-
-<p>To enhance the user experience of your application with clipboard operations, you must learn to copy content and paste it in an editable HTML element:</p> 
-
-<ol>
-<li><p>Define the editable element into which copied data is to be pasted:</p>
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.log {border: 1px solid #d9d9d9; margin: 10px; padding: 5px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.target {border: 1px solid #36c; margin: 10px; padding: 5px;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Clipboard API&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div style=&quot;width: 300px; height: 100px; border: 1px solid #d9d9d9&quot; contenteditable&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edit Section
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div  class=&quot;target&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;Target Element&lt;/h4&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target contenteditable&quot;&gt;Paste content&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;ev-log&quot; class=&quot;log&quot;&gt;Event log&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div contenteditable&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This section is informative
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This specification defines the common clipboard operations of cutting, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copying and pasting, in such a way that they are exposed to Web Applications 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and can be adapted to provide advanced functionalities. 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Its goal is to provide for compatibility where possible with existing implementations.
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;body&gt;
-</pre>
-</li>
-
-<li><p>Add event listeners to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> and <span style="font-family: Courier New,Courier,monospace">paste</span> events:</p>
-<pre class="prettyprint lang-js">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var pasteTarget = document.getElementById(&quot;target&quot;);
-&nbsp;&nbsp;&nbsp;var evLogBox = document.getElementById(&quot;ev-log&quot;);    
-
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;copy&quot;, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyHandler(e);
-&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
-&nbsp;&nbsp;&nbsp;}, false);
-</pre>
-</li>
-
-<li>When the <span style="font-family: Courier New,Courier,monospace">copy</span> event occurs, stop the system clipboard basic operation and set the range you want to copy:
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function copyHandler(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
-</li>
-<li>Store the data of the selected range: 
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evLogBox.innerHTML = &quot;Event log : copy&quot;;
-&nbsp;&nbsp;&nbsp;};</pre>
-</li>
-<li>When the <span style="font-family: Courier New,Courier,monospace">paste</span> event occurs, stop the system clipboard basic operation and paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function pasteHandler(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evLogBox.innerHTML = &quot;Event log : paste&quot;;
-&nbsp;&nbsp;&nbsp;};  
-&lt;/script&gt;
-</pre>
-</li>
-</ol>
-
-<p class="figure">Figure: Copying and pasting</p> 
-<p align="center"><img alt="Copying and pasting" src="../../images/copy_pasting.png" /></p>
-
-<h3>Source Code</h3>
-	<p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.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/color_w.htm b/org.tizen.ui.guides/html/web/w3c/color_w.htm
deleted file mode 100755
index 1a478a5..0000000
--- a/org.tizen.ui.guides/html/web/w3c/color_w.htm
+++ /dev/null
@@ -1,221 +0,0 @@
-<!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>CSS Color Module Level 3: Specifying Color and Opacity</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">Related Info</p>
-		<ul class="toc">	
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#color">CSS Color Module Level 3 API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#color">CSS Color Module Level 3 API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Color Module Level 3: Specifying Color and Opacity</h1>
-
-<p>You can manage the CSS properties for <a href="#create">specifying the color and opacity of an HTML element</a>, and the CSS color value type.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note"><p>The CSS2 System Color values have been deprecated in favor of the CSS3 UI &#39;appearance&#39; property.</p></td> 
-      </tr> 
-     </tbody> 
-    </table>
-
-<p>You can specify the color of an element with the following formats:</p>
-<ul>
-<li>Keyword values
-<p>You can use basic keywords, such as <span style="font-family: Courier New,Courier,monospace">red</span>, <span style="font-family: Courier New,Courier,monospace">green</span>, <span style="font-family: Courier New,Courier,monospace">blue</span>, or <span style="font-family: Courier New,Courier,monospace">deepskyblue</span>, as defined in <a href="http://www.w3.org/TR/css3-color/#svg-color" target="_blank">Extended color keywords</a>.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword can be used with all properties that accept a color value (borders, box shadows, outlines, or backgrounds). The computed value of the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is the computed value of the <span style="font-family: Courier New,Courier,monospace">color</span> property. If the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is set on the <span style="font-family: Courier New,Courier,monospace">color</span> property itself, it is treated as <span style="font-family: Courier New,Courier,monospace">color: inherit</span>.
-</p>
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">transparent</span> keyword with all properties that accept a color value (borders, box shadows, outlines, or backgrounds), to turn the element in question transparent (invisible).</p>
-</li>
-<li>RGB values
-<ul>
-<li>In hexadecimal notation
-<p>The format is &#39;#&#39; followed by either 3 or 6 hexadecimal characters. The 3-digit RGB notation (#rgb) is converted into a 6-digit form (#rrggbb) by replicating digits. For example, <span style="font-family: Courier New,Courier,monospace">#fc0</span> expands to <span style="font-family: Courier New,Courier,monospace">#ffcc00</span>.</p></li>
-<li>In functional notation
-<p>The format is &#39;rgb(&#39; followed by a comma-separated list of 3 numerical values (integer or percentage) followed by &#39;)&#39;. The integer value 255 corresponds to 100%, and to F or FF in a hexadecimal notation: <span style="font-family: Courier New,Courier,monospace">rgb(255, 255, 255)</span> = <span style="font-family: Courier New,Courier,monospace">rgb(100%, 100%, 100%)</span> = <span style="font-family: Courier New,Courier,monospace">#FFF</span>. White space characters are allowed around the numerical values.
-</p></li>
-</ul>
-</li>
-<li>RGBA values
-<p>The RGB color model is extended to include &quot;alpha&quot; to allow the color opacity to be specified. The RGBA values are defined using functional notation where the final value is the alpha (range from 0.1 to 1). For example: <span style="font-family: Courier New,Courier,monospace">rgba(255, 0, 0, 0.7)</span>.</p>
-</li>
-<li>HSL value 
-<p>You can use numerical hue-saturation-lightness (HSL) colors as an alternative to numerical RGB colors. The HSL colors are encoded as a triple (hue, saturation, lightness). The hue is represented as the angle of the color circle, where by definition red=0°=360° and other colors are spread around the circle. The saturation and lightness are represented as percentages, where 100% is full saturation or black lightness, and 0% is a shade of gray or white lightness. 50% lightness is &quot;normal&quot;. For example: <span style="font-family: Courier New,Courier,monospace">hsl(0, 100%, 50%)</span>. 
-</p></li>
-<li>HSLA value
-<p>The HSL color model is extended to include &quot;alpha&quot; to allow the color opacity to be specified. The HSLA values are defined using the HSL notation where a final alpha value is added (range from 0.1 to 1). For example: <span style="font-family: Courier New,Courier,monospace">hsla(120, 100%, 50%, 0.8)</span>.</p></li>
-</ul>
- <p>The following code snippet demonstrates how to specify a color for an element. For a complete source code, see:</p>
- <ul>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">color.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">current_color.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">hsl_color.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">hsla_color.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">rgb_color.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">rgba_color.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">transparent.html</a></li>	
- </ul>
-<pre class="prettyprint">
-&lt;!--Keywords--&gt;
-#one
-{
-&nbsp;&nbsp;&nbsp;color: blue;
-&nbsp;&nbsp;&nbsp;background: white;
-&nbsp;&nbsp;&nbsp;border: 1px solid springgreen;
-}
-#one span 
-{
-&nbsp;&nbsp;&nbsp;background: currentColor;
-}
-#one span.hide
-{
-&nbsp;&nbsp;&nbsp;color: transparent;
-}
-
-&lt;!--RGB--&gt;
-#two
-{
-&nbsp;&nbsp;&nbsp; color: #ff0000;
-}
-
-&lt;!--RGBA--&gt;
-#three
-{
-&nbsp;&nbsp;&nbsp;color: rgba(100%, 0, 0, 0.5);
-}
-
-&lt;!--HSL--&gt;
-#four
-{
-&nbsp;&nbsp;&nbsp;color: hsl(0, 100%, 50%);
-}
-
-&lt;!--HSLA--&gt;
-#five
-{
-&nbsp;&nbsp;&nbsp;color: hsla(0, 100%, 50%, 0.5);
-}
-</pre>
-
-<h2 id="create" name="create">Creating a Color Generator</h2>
-
-<p>To enhance the user experience of your application, you must learn to create a HSLA color generator to set the color value for an element in the HSLA format.</p>
-
-<p class="figure">Figure: HSLA color generator</p> 
-<p align="center"><img alt="HSLA color generator" src="../../images/css_color_tutorial1.png" /></p>
-
-
-
-<ol><li>To create the color generator, define 2 <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> elements for displaying the HSLA value as text and in a color box. You also need 4 slider inputs for defining the HSLA color:
-<ul>
-<li>The first input has a range of 0 - 360 and represents hue.</li>
-<li>The second and third inputs have a range of 0 - 100 and represent saturation and lightness.</li>
-<li>The last input has a range of 0 - 10 and represents alpha transparency.
-<p>The range should be 0.1 - 1, but the minimum value of the <span style="font-family: Courier New,Courier,monospace">min</span> attribute is 0 so the value can be divided by 10.</p></li></ul>
-
-<pre class="prettyprint lang-html">
-&lt;div id=&quot;color-generator&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;text-box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;color-box&quot;&gt;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Hue&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;hue&quot; value=&quot;0&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;360&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Saturation&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;saturation&quot; value=&quot;100&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Lightness&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;lightness&quot; value=&quot;50&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Alpha&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;alpha&quot; value=&quot;10&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;10&quot;&gt;
-&lt;/div&gt;
-</pre></li>
-<li>Obtain the values from the slider inputs with the <span style="font-family: Courier New,Courier,monospace">getElementById</span> method. Remember to divide the alpha value by 10 to reach the correct range of 0.1 - 1.
-<pre class="prettyprint">
-var h = document.getElementById(&#39;hue&#39;).value,
-&nbsp;&nbsp;&nbsp;&nbsp;s = document.getElementById(&#39;saturation&#39;).value,
-&nbsp;&nbsp;&nbsp;&nbsp;l = document.getElementById(&#39;lightness&#39;).value,
-&nbsp;&nbsp;&nbsp;&nbsp;a = document.getElementById(&#39;alpha&#39;).value / 10;
-</pre></li>
-<li>Set the HSLA text and the color of the color box by defining the color from the inputs in the HSL and HSLA formats.
-<p>If the alpha is 1, the HSL format is displayed. Otherwise, the HSLA format is used.</p>
-<pre class="prettyprint">
-/* Define formats */
-hsl = &#39;hsl(&#39; + h + &#39;, &#39; + s + &#39;%, &#39; + l + &#39;%)&#39;;
-hsla = &#39;hsla(&#39; + h + &#39;, &#39; + s + &#39;%, &#39; + l + &#39;%, &#39; + a + &#39;)&#39;;
-
-/* Set the color of the box */
-cBox = document.querySelector(&#39;#color-box&#39;),
-
-/* Set the text */
-tBox = document.querySelector(&#39;#text-box&#39;);
-</pre></li>
-
-<li>Add an event handler to the input sliders to change the displayed text and color box color when the slider values change.
-<pre class="prettyprint">
-var inputs = document.querySelectorAll(&#39;#color-generator input[type=range]&#39;);
-			
-for (i = 0; i &lt; inputs.length; i++)
-{
-&nbsp;&nbsp;&nbsp;inputs[i].onchange = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show color */
-&nbsp;&nbsp;&nbsp;}
-}
-</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/dom_forms_and_styles/css_color_module_level_3" target="_blank">css_color.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/drag_drop_mw.htm b/org.tizen.ui.guides/html/web/w3c/drag_drop_mw.htm
deleted file mode 100644
index 86924fd..0000000
--- a/org.tizen.ui.guides/html/web/w3c/drag_drop_mw.htm
+++ /dev/null
@@ -1,327 +0,0 @@
-<!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/flexible_w.htm b/org.tizen.ui.guides/html/web/w3c/flexible_w.htm
deleted file mode 100755
index 5bd3406..0000000
--- a/org.tizen.ui.guides/html/web/w3c/flexible_w.htm
+++ /dev/null
@@ -1,355 +0,0 @@
-<!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>CSS Flexible Box Layout Module: Adjusting the Layout</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="#usecont">Using the Flex Container</a></li>
-			<li><a href="#item">Using the Flex Items</a></li>
-			<li><a href="#create">Creating a Flexible Layout with CSS3</a>
-			</li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">	
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">CSS Flexible Box Layout Module API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">CSS Flexible Box Layout Module API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
- <h1>CSS Flexible Box Layout Module: Adjusting the Layout</h1>
-
-<p>CSS attributes, such as <span style="font-family: Courier New,Courier,monospace">float</span>, <span style="font-family: Courier New,Courier,monospace">display</span>, and <span style="font-family: Courier New,Courier,monospace">position</span>, can be used to adjust and align the screen layout according to various resolutions. However, operating the layout accurately among changing screen sizes is difficult.</p>
-
-<p>Tizen supports the CSS Flexible Box Layout Module API that enables you to create an easily manageable flexible layout, which fluidly adjusts the layout according to viewport size changes. When you <a href="#create">create and use a flexible box layout</a>, the alignment method or object (flex item) size within a specific area (flex container) can be adjusted.</p>
-<p>The main components of the flexible box layout include:</p>
-<ul>
-<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-containers" target="_blank">Flex container</a>, which refers to flex or inline-flex DOM elements assigned by the display.<p>You can <a href="#usecont">use the flex container</a> to assign a flex area and the flex items included in it. The flex container properties are used to assign the indication area and alignment method.</p></li>
-<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items" target="_blank">Flex item</a>, which refers to the child nodes of the flex container.
-<p>The flex item changes its size fluidly according to the area of the flex container. You can <a href="#item">define flex item properties</a> to assign the sizes of the respective items and the alignment method.</p></li>
-</ul>
-<p class="figure">Figure: Flexible box layout</p>
-<p align ="center"><img alt="Flexible box layout" src="../../images/flex_container.png"/></p>
-
-<h2 id="usecont" name="usecont">Using the Flex Container</h2>
-<p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex container:</p>
-
-<ol>
-<li>Assign the area (flex container) where the flexible box layout is applied by using the <span style="font-family: Courier New,Courier,monospace">display: flex</span> property:
-<pre class="prettyprint">&lt;style&gt;
-&nbsp;&nbsp;&nbsp;.flex_container {display: -webkit-flex}
-&lt;/style&gt;
-
-&lt;div class=&quot;flex_container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>A&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>B&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>C&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>D&lt;/div&gt;
-&lt;div&gt;</pre>
-
-<p>The child nodes within the assigned flex container become flex items.</p>
-</li>
-<li><p>Define the necessary properties for the flex container to assign the alignment of the flex items within it:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-direction</span> property sets the alignment direction of the flex items:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">row</span>: Align from left to right.</li>
-<li><span style="font-family: Courier New,Courier,monospace">row-reverse</span>: Align from right to left.</li>
-<li><span style="font-family: Courier New,Courier,monospace">column</span>: Align from top to bottom.</li>
-<li><span style="font-family: Courier New,Courier,monospace">column-reverse</span>: Align from bottom to top.</li>
-</ul></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property sets the line changing of the flex items:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">nowrap</span>: Reduces the size of the flex items without changing lines.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the cross axis direction of the current writing mode.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the opposite cross axis direction than in the <span style="font-family: Courier New,Courier,monospace">wrap</span> value.</li>
-</ul></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">justify-content</span> property sets the handling of gaps between the flex items on the main axis:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Gathers the items at the alignment starting point.</li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Gathers the items at the alignment finishing point.</li>
-<li><span style="font-family: Courier New,Courier,monospace">center</span>: Gathers the items in the center.</li>
-<li><span style="font-family: Courier New,Courier,monospace">space-between</span>: Aligns the start and end item at both ends, and creates equal gaps in between the rest of the items.</li>
-<li><span style="font-family: Courier New,Courier,monospace">space-around</span>: Creates equal gaps between all items.</li>
-</ul>
-<table class="note"> 
-    <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">This property is similar to <span style="font-family: Courier New,Courier,monospace">text-align</span>, but the alignment direction and the starting point are based on the <span style="font-family: Courier New,Courier,monospace">flex-direction</span> and <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> properties.</td> 
-      </tr> 
-     </tbody> 
-   </table></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">align-content</span> property sets the handling of gaps between the flex items on the cross axis. It has the same values as the <span style="font-family: Courier New,Courier,monospace">justify-content</span> property, and 1 additional value:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the size of the flex items and aligns them without gaps.</li>
-</ul></li>
-<li id="alignitems"><span style="font-family: Courier New,Courier,monospace">align-items</span> property sets the relative location and size between the flex items on the cross axis:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Aligns the items vertically to the top.</li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Aligns the items vertically to the bottom.</li>
-<li><span style="font-family: Courier New,Courier,monospace">center</span>: Aligns the items vertically to the middle.</li>
-<li><span style="font-family: Courier New,Courier,monospace">baseline</span>: Aligns the items vertically to the baseline.</li>
-<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the height of the flex items and aligns them without gaps.</li>
-</ul>
-<table class="note"> 
-    <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If the <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property is set to <span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>, the start and end points of the alignment are reversed.</td> 
-      </tr> 
-     </tbody> 
-   </table></li></ul></li></ol>
-<p>The following figure shows examples of flex containers and how their flex items have been aligned.</p>
-<p class="figure">Figure: Flex container properties (in mobile applications only)</p> 
-<p align="center"><img alt="Flex container properties (in mobile applications only)" src="../../images/flexcontainer_properties.png"/></p>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_2.html</a></li>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_3.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_4.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_5.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_6.html</a></li>	
- </ul>
-		
-				<h2 id="item" name="item">Using the Flex Items</h2>
-				
-			<p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex items:</p>
-
-<ol>
-<li>Assign the area (flex container) where the flexible box layout is applied, and define the flex items for it:
-<pre class="prettyprint">&lt;style&gt;
-&nbsp;&nbsp;&nbsp;.flex_container {display: -webkit-flex}
-&lt;/style&gt;
-
-&lt;div class=&quot;flex_container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>A&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>B&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>C&lt;/div&gt;
-&lt;div&gt;</pre>
-</li>
-
-<li><p>Define the necessary properties for the flex items:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">align-self</span> property is similar as the <a href="#usecont">align-items</a> property of the flex container.
-<table class="note"> 
-    <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If both the <span style="font-family: Courier New,Courier,monospace">align-self</span> and <span style="font-family: Courier New,Courier,monospace">align-items</span> properties are used simultaneously, the <span style="font-family: Courier New,Courier,monospace">align-items</span> property is ignored.</td> 
-      </tr> 
-     </tbody> 
-   </table></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">flex</span> property is a shorthand expression defining the flex item size handling:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-grow</span>: Sets whether the spaces between flex items are filled.</li> 
-<li><span style="font-family: Courier New,Courier,monospace">flex-shrink</span>: Sets whether the width of the flex items is reduced according to the size of the flex container.</li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-basis</span>: Sets the default width of the relevant flex items.</li>
-</ul></li></ul></li></ol>
-<p>The following figure shows examples of how flex items can be placed and sized within a flex container.</p>
-<p class="figure">Figure: Flex items (in mobile applications only)</p>
-<p align="center"><img alt="Flex items (in mobile applications only)" src="../../images/flexitem_properties.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/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_2.html</a></li>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_3.html</a></li>		
- </ul>
-			
-<h2 id="create" name="create">Creating a Flexible Layout with CSS3</h2>
-
-<p>To enhance the user experience of your application, you must learn how to create flexible box layout:</p>
-<ol>
-<li>Define the HTML content for the flexible layout. In this example, create 2 articles areas, 1 for a text list and 1 for an icon list:
-<pre class="prettyprint">&lt;div class=&quot;container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;article class=&quot;events&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;UPCOMING EVENTS&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;date&quot;&gt;&lt;span&gt;APR&lt;/span&gt;&lt;br&gt; 15&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;title&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Linux Foundation Collaboration Summit &lt;span class=&quot;local&quot;>San Francisco, CA&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other text items--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&nbsp;&nbsp;&nbsp;&lt;article class=&quot;schedule&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;SCHEDULE&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;img_list&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;folder.png&quot; alt=&quot;folder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;alert.png&quot; alt=&quot;alert&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other icons--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&lt;/div&gt;</pre></li>
-
-<li>Define styles to decorate the article areas. (The following figure applies to mobile applications only.)
-<pre class="prettyprint">&lt;!--Border for the article areas--&gt;
-.container article &gt; * {border: 1px solid #ccc;}
-
-&lt;!--Font style for the article area titles--&gt;
-.container .events &gt; h2, .container .schedule &gt; h2 
-{
-&nbsp;&nbsp;&nbsp;padding: 10px 20px;
-&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000;
-}
-
-&lt;!--List styles--&gt;
-.container .events &gt; ul, .container .schedule .img_list  
-{
-&nbsp;&nbsp;&nbsp;height: 100%; 
-&nbsp;&nbsp;&nbsp;padding: 10px;
-}
-
-&lt;!--Text style for the text list item title--&gt;
-.container .events &gt; ul &gt; li .title 
-{
-&nbsp;&nbsp;&nbsp;color: #51809e;
-&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #000;
-}
-
-&lt;!--Text style for the text list item location info--&gt;
-.container .events &gt; ul &gt; li .title .local 
-{
-&nbsp;&nbsp;&nbsp;text-indent: 10px;
-&nbsp;&nbsp;&nbsp;text-shadow: 0 0 0 #fff;
-}
-
-&lt;!--Styles for the text list item date box--&gt;
-.container .events &gt; ul &gt; li .date 
-{
-&nbsp;&nbsp;&nbsp;text-align: center;
-}
-.container .events &gt; ul &gt; li .date 
-{
-&nbsp;&nbsp;&nbsp;background-color: #ddd;
-&nbsp;&nbsp;&nbsp;border-radius: 10px;
-&nbsp;&nbsp;&nbsp;box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .5);
-}
-.container .events &gt; ul &gt; li .date &gt; span 
-{
-&nbsp;&nbsp;&nbsp;background-color: #fff;
-&nbsp;&nbsp;&nbsp;border-radius: 5px;
-}</pre>
-<p align="center"><img alt="Article areas with styles defined (in mobile applications only)" src="../../images/flexible_default_structure.png"/></p></li>
-
-
-<li>Define a flexible alignment for the article areas to support screen orientation changes and ensure that the content fills up the entire available screen area regardless of the orientation:
-<ol type="a">
-<li>Define the text list items and the icon list as flex containers using the <span style="font-family: Courier New,Courier,monospace">display: -webkit-flex;</span> property:
-<ul>
-<li>For the text list items, align them vertically in the middle, define a 0 margin at the top for the first item, and center-align the text for the date box.</li>
-<li>For the icon list, align the icon list so that the first and last icon are placed at the ends and the gaps between the rest of the icons are equal.</li></ul>
-<p>(The following figure applies to mobile applications only.)</p>
-<pre class="prettyprint">&lt;!--Flexible alignment of text list--&gt;
-.container .events &gt; ul &gt; li 
-{
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;-webkit-align-items: center;
-}
-.container .events &gt; ul &gt; li: first-child 
-{
-&nbsp;&nbsp;&nbsp;margin-top: 0;
-}
-
-.container .events &gt; ul &gt; li .date 
-{
-&nbsp;&nbsp;&nbsp;-webkit-flex: 0 0 20%;
-&nbsp;&nbsp;&nbsp;text-align: center;
-}
-
-&lt;!--Flexible alignment of icon list--&gt;
-.container .schedule .img_list 
-{
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-between;
-}</pre>
-<p align="center"><img alt="Article areas with a flexible box layout defined (in mobile applications only)" src="../../images/flexible_box_alignment.png"/></p></li>
-
-
-<li>Special consideration can be given for some screen sizes. The following example defines a specific layout for small screens (where the screen width is less than 390 pixels). (The following figure applies to mobile applications only.)
-<pre class="prettyprint">
-@media screen and (min-width: 390px) 
-{
-&nbsp;&nbsp;&nbsp;.container .schedule .img_list 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-flex-wrap: wrap;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-between;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-align-content: space-around;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;.container {display: -webkit-flex;}
-&nbsp;&nbsp;&nbsp;.container &gt; * {-webkit-align-content: center;}
-&nbsp;&nbsp;&nbsp;.container article {height: 250px;}
-}</pre>
-<p align="center"><img alt="Article areas with a flexible box layout for small screens (in mobile applications only)" src="../../images/flexible_screen_size.png"/></p>
-<p>For more information on defining screen-size-specific rules, see <a href="media_query_w.htm">Media Queries</a>.</p>
-</li></ol></li></ol>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_1.html</a></li>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_2.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">alert.png</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">folder.png</a></li>	
- </ul>
-			
-
-<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/font_w.htm b/org.tizen.ui.guides/html/web/w3c/font_w.htm
deleted file mode 100755
index 68537ab..0000000
--- a/org.tizen.ui.guides/html/web/w3c/font_w.htm
+++ /dev/null
@@ -1,214 +0,0 @@
-<!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>CSS Fonts Module Level 3: Manipulating Fonts</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">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">CSS Fonts Module Level 3 API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">CSS Fonts Module Level 3 API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Fonts Module Level 3: Manipulating Fonts</h1>
-
-<p>You can change the text fonts easily.</p>
-
-<p>The new text features in CSS Fonts Module Level 3 API include:</p>
-<ul>
-<li>Font properties 
-<p>You can <a href="#font">use CSS font properties</a>, such as <span style="font-family: Courier New,Courier,monospace">font-style</span>, <span style="font-family: Courier New,Courier,monospace">font-weight</span>, <span style="font-family: Courier New,Courier,monospace">font-variant</span>, <span style="font-family: Courier New,Courier,monospace">font-size</span>, and <span style="font-family: Courier New,Courier,monospace">font-family</span>, to modify the appearance of text.</p></li>
-</ul> 
-
-
-<h2 id="font" name="font">Manipulating Fonts</h2>
-				
-<p>To enhance the user experience of your application, you must learn to handle fonts using CSS font properties:</p>
-
-<ol>
-<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-style</span> property within a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the Web page to apply different font styles:</p>
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) em{font-style: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) em{font-style: italic}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) em{font-style: oblique}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;oblique&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-weight</span> property,
-which controls the weight of the text:</p>
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-weight: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-weight: bold}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-weight: 300}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-weight: 500}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {font-weight: 700}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;bold&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;300&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;500&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;700&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">font-variant</span> property to
-change the font to, for example, use small capital letters:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-variant: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-variant: small-caps}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-variant: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-variant: &lt;em&gt;small-caps&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">font-size</span> property, which controls the size of the font:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-size: 150%}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-size: 1.2em}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-size: &lt;em&gt;150%&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-size: &lt;em&gt;1.2em&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">line-height</span> property, which controls the height of a text line:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {line-height: 1}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {line-height: 1.5}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {line-height: 5}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;1&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;1.5&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;5&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">font-family</span> property, which assigns a specific font or its representative to an element. The list order within the <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element determines the property priority.
-<p>If the assigned font is not installed on the target, a different font is obtained based on the user system.</p>
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-family: serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-family: sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-family: monospace}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-family: cursive}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {font-family: fantasy}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(6) {font-family: &#39;Arial Black&#39;, sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(7) {font-family: Tahoma, sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(8) {font-family: Verdana, sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(9) {font-family: Arial, sans-serif}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;monospace&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;cursive&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;fantasy&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;&#39;Arial Black&#39;, sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Tahoma, sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Verdana, sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Arial, sans-serif&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</li>
-</ol>
-
-
-<p>The following figure shows examples of manipulating the text font properties.</p>
-<p class="figure">Figure: Font properties (in mobile applications only)</p>
-<p align="center"><img alt="Font properties (in mobile applications only)" src="../../images/font_properties.png"/></p>
-
-   <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">For a complete list of CSS Fonts Module Level 3 font properties (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#property-index" target="_blank">Property index</a>.</td>
-    </tr>
-   </tbody>
-  </table>
-           
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/frame_flattening_mw.htm b/org.tizen.ui.guides/html/web/w3c/frame_flattening_mw.htm
deleted file mode 100755
index 2f5d3c9..0000000
--- a/org.tizen.ui.guides/html/web/w3c/frame_flattening_mw.htm
+++ /dev/null
@@ -1,69 +0,0 @@
-<!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>Frame Flattening: Expanding Content According to Size</title>  
-	
-</head>
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-	<div id="profile">
-		<p><img alt="Mobile Web" src="../../images/mw_icon.png"/></p>
-	</div>
-	
-<h1>Frame Flattening: Expanding Content According to Size</h1>
-
-  <p>In the Tizen WebKit, content placed within the <span style="font-family: Courier New,Courier,monospace;">&lt;frame&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;iframe&gt;</span> tags is expanded automatically according to the content size. This enables users to view the whole content at once without scrolling.</p> 
-  
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-  <p>The Tizen WebKit supports this feature since scrolling through small subframes on small screen devices is a tedious task and, occasionally, causes confusion between scrolling subframes and scrolling the Web page itself.</p> 
-  <p>To implement scrollable content in the Tizen WebKit, use the CSS <span style="font-family: Courier New,Courier,monospace;">overflow: scroll</span> or <span style="font-family: Courier New,Courier,monospace;">webkit-overflow-scrolling: touch</span> property instead of <span style="font-family: Courier New,Courier,monospace;">iframe</span>.</p>   
-	
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(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>
-
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
deleted file mode 100755
index 9083b94..0000000
--- a/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm
+++ /dev/null
@@ -1,142 +0,0 @@
-<!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>W3C</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">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html">W3C/HTML5 and Supplementaries API Reference for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">W3C/HTML5 and Supplementaries API Reference for Wearable Web</a></li>
-		</ul>
-	</div></div>
-</div>	
-		
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>W3C</h1> 
-
-<p>The W3C specifications provide HTML and CSS, which are the core technologies for building Web pages and Web applications.</p>
-
-<p>To learn to use the W3C features in your application UI, see the following topics:</p>
-
-<ul>
-<li>
-<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>
-
-	<li><a href="multiple_screens_mw.htm">Multiple Screen Support: Supporting Different Screen Sizes</a> in <strong>mobile applications only</strong>
-	<p>Allows you to create an application that is both scalable and adaptive to multiple screen resolutions.</p></li>
-
-	<li><a href="ui_layout_ww.htm">Multiple UI Layouts: Designing Applications for Multiple Devices</a> in <strong>wearable applications only</strong>
-	<p>Allows you to design your application layout so that your application can run on multiple Tizen devices.</p></li>
-
-	<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 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> 
-	<p>Enables you to move, rotate, stretch, and scale elements using the CSS3 <span style="font-family: Courier New,Courier,monospace">transform</span> property.</p></li>
-	
-	<li><a href="animation_w.htm">CSS Animations Module Level 3: Creating Animations</a> 
-	<p>Enables you to create animations using the CSS3 <span style="font-family: Courier New,Courier,monospace">animation</span> property.</p></li>
-	
-	<li><a href="transition_w.htm">CSS Transitions Module Level 3: Changing Element Styles</a> 
-	<p>Enables you to add effects when changing the style of an element using the CSS3 <span style="font-family: Courier New,Courier,monospace">transition</span> property.</p></li>
-	
-	<li><a href="color_w.htm">CSS Color Module Level 3: Specifying Color and Opacity</a> 
-	<p>Enables you to specify the color and opacity of HTML elements using CSS properties.</p></li>
-	
-	<li><a href="background_w.htm">CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</a> 
-	<p>Enables you to specify the border and background styles of HTML elements using CSS properties.</p></li>
-	
-	<li><a href="flexible_w.htm">CSS Flexible Box Layout Module: Adjusting the Layout</a> 
-	<p>Enables you to create flexible layouts for Web applications.</p></li>
-		
-	<li><a href="multi_mw.htm">CSS Multi-column Layout Module: Creating Multi-column Layouts</a> in <strong>mobile applications only</strong>
-	<p>Enables you to create multi-column layouts for Web applications.</p></li>
-	
-	<li><a href="text_module_w.htm">CSS Text Module Level 3: Manipulating Text</a> 
-	<p>Enables you to apply various text effects.</p></li>	
-	
-	<li><a href="basic_ui_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</a> 
-	<p>Enables you to apply styles to HTML documents.</p></li>
-	
-	<li><a href="font_w.htm">CSS Fonts Module Level 3: Manipulating Fonts</a> 
-	<p>Enables you to change the text fonts.</p></li>	
-	
-	<li><a href="woff_w.htm">WOFF File Format 1.0: Changing Fonts Using WOFF</a> 
-	<p>Enables you to encode and decode font data easily.</p></li>	
-</ul>
-</li>
-</ul>
-
-
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<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/html5forms_w.htm b/org.tizen.ui.guides/html/web/w3c/html5forms_w.htm
deleted file mode 100644
index b92cdda..0000000
--- a/org.tizen.ui.guides/html/web/w3c/html5forms_w.htm
+++ /dev/null
@@ -1,432 +0,0 @@
-<!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/html_priority_w.htm b/org.tizen.ui.guides/html/web/w3c/html_priority_w.htm
deleted file mode 100755
index 4714abf..0000000
--- a/org.tizen.ui.guides/html/web/w3c/html_priority_w.htm
+++ /dev/null
@@ -1,449 +0,0 @@
-<!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>HTML Priorities: Understanding HTML Behavior</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="#doctype">&lt;!DOCTYPE&gt; Element</a></li>
-			<li><a href="#dom">HTML DOM Tree</a></li>
-			<li><a href="#css">CSS Rule Priorities</a></li>
-			<li><a href="#js">JavaScript Behavior</a></li>	
-			<li><a href="#use">Using JavaScript Code within HTML</a></li>
-		</ul>			
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>HTML Priorities: Understanding HTML Behavior</h1> 
-
-<p>The HTML markup is not as important as before, because JavaScript APIs can be used to create various functionalities. For example, graphics APIs (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">wearable</a> applications) can be used for making games, media APIs (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">wearable</a> applications) for creating video chats, and communication APIs (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">wearable</a> applications) for various types of messaging. However, HTML remains the basis of Web applications, and it is useful to be familiar with its behavior.</p>
-
-<p>The structure of the HTML document can be classified into DOCTYPE and HTML DOM (Document Object Model). When an HTML document is loaded, the browser renders the contents in its screen as follows:</p>
-<ol>
-<li>HTML is parsed referring to the rules defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element.</li>
-<li>HTML DOM tree is established.</li>
-<li>DOM elements, including <a href="#js">references to JavaScript</a>, are arranged based on the information defined in the head element. This is called rendering.</li>
-<li>The elements are painted on the screen based on <a href="#css">CSS rules</a>.</li>
-</ol>
-
-<h2 id="doctype"><span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> Element</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element informs the browser of the HTML version and which rules it must follow. It is not a composition element of the HTML.</p>
-
-<p>The browser, based on the version defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element and DTD (Document Type Definition), decides how to handle the HTML before interpreting it. Therefore, the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element must be declared at the beginning of an HTML document.</p>
-
-<pre class="prettyprint">&lt;!--HTML5--&gt;
-&lt;!DOCTYPE html&gt;
-
-&lt;!--Prior to HTML5--&gt;
-&lt;!DOCTYPE html PUBLIC &quot;{HTML Version Information}&quot; &quot;{DTD (Document Type Definition) file link defined by Rule in HTML DOM}&quot;&gt;
-</pre>
-
-<h2 id="dom">HTML DOM Tree</h2>
-
-<p>HTML DOM is a structured model to control Web elements. It is an official W3C standard to express the document regardless of platforms or languages, and the foundation of the HTML5 APIs.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;html&gt;</span> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> elements as child nodes:</p>
-
-<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h3>&lt;head&gt; element</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, JavaScript, and favicon:</p>
-
-<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="utf-8" /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt; Tizen (in mobile applications) or Tizen Wearable (in wearable applications) &lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;/common/js/ui.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> contains the following subelements:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;title&gt;</span>: Defines the title of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace;"><a href="http://www.w3.org/wiki/HTML/Elements/meta" target="_blank">&lt;meta&gt;</a></span>: Defines information, such as encoding, creator, and keywords of the document.
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The <a href="http://www.w3.org/TR/css-device-adapt/#the-viewport-rule" target="_blank">viewport element</a>, which sets the screen area, is included in the meta information.</td> 
-      </tr> 
-     </tbody> 
-    </table></li>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span>: Sets the styles of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;noscript&gt;</span>: Adds functions to the document. </li>
-</ul>
-
-<h3>&lt;body&gt; element</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element defines the area displaying content on the browser screen:</p>
-
-<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section id=&quot;tizen_wrap&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Tizen Web App (in mobile applications) or Tizen Wearable Wep App (in wearable applications)&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section id=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&amp;copy; All rights reserved.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-  
-   <h2 id="css" name="css">CSS Rule Priorities</h2>
-<p>The basic rule of HTML, CSS, and JavaScript is that the code is applied from the top to the bottom of the document. Sometimes the lack of understanding of the CSS rule priorities can cause a result you do not expect.</p>
-<p>The following figure illustrates this problem in mobile applications by applying a font color to a black background.</p>
-
-<p class="figure">Figure: Expected and actual result of applying a font color (in mobile applications only)</p> 
-<p align="center"><img alt="Expected and actual result of applying a font color (in mobile applications only)" src="../../images/css_result.png" /></p>
-
-<h3>Basic CSS Rules</h3>
-
-<p>When creating a CSS document, the following rules apply:</p>
-
-<ul>
-<li>When more than 1 overlapping styles are applied to the same element, only the last style is visible:
-
-<pre class="prettyprint lang-html">p {color: red}
-p {color: blue}
-&lt;!--Blue color is applied--&gt;
-</pre></li>
-<li>The style applied in the parent node at the DOM tree is inherited. For more information, see <a href="http://www.w3.org/TR/CSS21/cascade.html#inheritance" target="_blank">W3C inheritance documentation</a>.
-</li>
-<li>The style that has the highest CSS specificity is applied. The specificity of different elements is defined as follows:
-<ul>
-<li>ID attribute = 100</li>
-<li>Class attribute = 10</li>
-<li>Element = 1</li>
-</ul>
-
-<pre class="prettyprint lang-html">&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target&quot; class=&quot;target&quot;&gt;Hello World&lt;/p&gt;
-&lt;/body&gt;
-
-&lt;style&gt;
-&nbsp;&nbsp;&nbsp;p#target {color: black} /* Specificity: 101 */
-&nbsp;&nbsp;&nbsp;p#target {color: red} /* Specificity: 101 */
-&nbsp;&nbsp;&nbsp;p.target {color: blue} /* Specificity: 11 */
-&nbsp;&nbsp;&nbsp;p {color: tomato} /* Specificity: 1 */
-&lt;/style&gt;
-&lt;!--Red color is applied--&gt;</pre>
-</li>
-<li>When the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute is used, it has the highest priority:
-<pre class="prettyprint lang-html">&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target&quot; class=&quot;target&quot;&gt;Hello World&lt;/p&gt;
-&lt;/body&gt;
-
-&lt;style&gt;
-&nbsp;&nbsp;&nbsp;p#target {color: black !important}
-&nbsp;&nbsp;&nbsp;p#target {color: red}
-&nbsp;&nbsp;&nbsp;p.target {color: blue}
-&nbsp;&nbsp;&nbsp;p {color: tomato}
-&lt;/style&gt;
-&lt;!--Black color is applied--&gt;</pre>
-</li>
-</ul>
-
-<p>Keeping these rules in mind, you can use any of the following ways to achieve the expected result illustrated in the figure above:</p>
-<pre class="prettyprint">.contents {color: #999 !important;}
-
-section.contents {color: #999;}
-
-body .contents {color: #999;}
-
-#container &gt; .contents {color: #999;}
-</pre>
-
-<h3>Using CSS with HTML</h3>
-
-<p>There are various ways to connect CSS with HTML. Creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element.</p>
-
-<p>In the following example, the applied order of the CSS elements is as follows:</p>
-<ol>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
-<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
-</ol>
-
-<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Link in head--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Style tag in head--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p {color: tomato}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--@import in CSS area--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@import url(&quot;css/style.css&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Style attribute in HTML element--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p style=&quot;color: red&quot;&gt;Hello World&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<p>However, the priority order of the elements is as follows:</p>
-<ol>
-<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
-</ol>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">style</span> attribute in the HTML element has the highest priority after the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute.</p>
-
-<p>Using the order above, if all other color styles are applied to <span style="font-family: Courier New,Courier,monospace;">&lt;p&gt;</span> elements, the <span style="font-family: Courier New,Courier,monospace;">style</span> attribute is used to apply the red color that has been directly defined in the HTML. This rule differs from the CSS specificity rules.</p>
-
-<p>Generally, when the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute is used, connect to the top of CSS file that has been linked externally, as illustrated in the figure below. If the attribute is applied in the middle of the CSS file, it is difficult to know the point where CSS has been applied, and to find the file connected to the source in the future. Therefore, group the CSS file at the top.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute gives the same result as connecting an external file, but it does not function correctly in older browsers (IE 5.5 and below).</td> 
-      </tr> 
-     </tbody> 
-    </table>
-<p class="figure">Figure: Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p> 
-<p align="center"><img alt="Using the @import attribute" src="../../images/using_import_attribute.png" /></p>
-
-<p>The markup in the corresponding files is as follows:</p>
-<ul>
-<li>In the HTML code:
-<pre class="prettyprint">&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
-&lt;/head&gt;
-</pre></li>
-<li>In the <span style="font-family: Courier New,Courier,monospace;">style.css</span> file:
-<pre class="prettyprint">@import url(&quot;priorities1.css&quot;);
-
-p: after {content: &quot; : linked in head&quot;}
-</pre>
-<p class="figure">Figure: Result of linking the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p> 
-<p align="center"><img alt="Result of linking the @import attribute" src="../../images/import_linked_in_head.png" /></p></li>
-<li>In the <span style="font-family: Courier New,Courier,monospace;">priorities1.css</span> file:
-<pre class="prettyprint">p: after {content: &quot; : Using @import in CSS area&quot;}
-</pre>
-<p class="figure">Figure: Result of using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</p> 
-<p align="center"><img alt="Result of using the @import attribute in the CSS area" src="../../images/import_css_area.png" /></p></li>
-</ul>
-
- <h2 id="js" name="js">JavaScript Behavior</h2>
-<p>With the advent of HTML5, numerous powerful HTML5 APIs have been introduced. Since the usage of JavaScript has increased, it has become important to use it accurately in accordance with <a href="../../../../org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm">optimized JavaScript performance</a>.</p>
-
-<p><a href="#use">JavaScript used in Web applications</a> can be divided into the core, <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMAScript</a>, and <a href="http://www.w3.org/DOM" target="_blank">DOM</a>, which all manipulate HTML. ECMAScript is executed when a method is called, or it can be executed when an event is fired within a HTML document through a linkage with DOM.  </p>
-
-<h3>Using JavaScript with HTML</h3>
-<p>Used with HTML, JavaScript works as follows:</p>
-<ol>
-<li>During HTML parsing, the content of the <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag is parsed to JavaScript Interpreter.</li>
-<li>The Interpreter parses the received script code. </li>
-<li>Requests that need not be handled immediately are suspended.  </li>
-<li>The handled result is passed over to the browser, which continues to parse HTML.</li>
-</ol>
-
-<p>The following example shows how you can use JavaScript with HTML either by linking to a JavaScript file, or embedding it directly in the HTML code:</p>
-<pre class="prettyprint">/* Linking from HTML */
-&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
-
-/* Direct use in HTML */
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated&quot;);
-    
-&nbsp;&nbsp;&nbsp;function animate() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Execute */
-&nbsp;&nbsp;&nbsp;};
-    
-&nbsp;&nbsp;&nbsp;/* Call the animation function when the event is fired */
-&nbsp;&nbsp;&nbsp;webkitRequestAnimationFrame(animate);  
-&lt;/script&gt;
-
-</pre>
-<p>Both ways described above give the same result in behavior. However, the position of the JavaScript code affects the order in which the methods are called.</p>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Previously, adding JavaScript code within head tag was recommended because it is easy to maintain. Currently, adding it to the end of the body and executing it after parsing the HTML document is common.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-	
-<h3>JavaScript Events</h3>
-
-<p>JavaScript generally calls a method when a specific <a href="http://www.w3schools.com/jsref/dom_obj_event.asp" target="_blank">event</a> is fired. More than 70 types of events, such as onload and onclick are available.</p>
-
-<p>The following example shows the use of a simple event:</p>
-
-<pre class="prettyprint">&lt;!--HTML--&gt;
-&lt;body onload=&quot;touchEventHandler()&quot;&gt;
-
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;/* JavaScript */
-&nbsp;&nbsp;&nbsp;/* Directly assigning */  
-&nbsp;&nbsp;&nbsp;window.onload = touchEventHandler; /* Assigns the name of the subject method */
-    
-&nbsp;&nbsp;&nbsp;/* Event listener (W3C standard) */
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;touchstart&quot;, touchEventHandler, false);
-&lt;/script&gt;</pre>
-<p>Prefer using W3C standard event listener methods. The inline JavaScript code applied directly to an HTML tag is difficult to maintain. Assigning a method directly to an event is also difficult when passing parameters, as the method needs to be assigned for every event.</p>
-
-<h3>JavaScript Priorities</h3>
-
-<p>The rendering order of JavaScript code is based on the following rules:</p>
-<ul>
-<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is temporarily saved, but not handled.  </li>
-<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element is immediately handled when it is parsed.  </li>
-<li>When the temporarily saved JavaScript content is executed, the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element content is rendered first, and the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element content after it.</li>
-</ul>
-
-
-<h2 id="use" name="use">Using JavaScript Code within HTML</h2>
-
-<p>To provide users with JavaScript-based features, you must learn to use JavaScript code within an HTML document:</p>
-
-<ul>
-<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag:
-<pre class="prettyprint lang-html">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/jquery_1.9.0_min.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;       
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;head onload&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;head ready&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&lt;/head&gt;</pre> 
-
-<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is sent to Interpreter. As there are no methods to be handled immediately, its execution is suspended.</p>
-</li>
-<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag:
-<pre class="prettyprint lang-html">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/jquery_1.9.0_min.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function testLog(txt) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var logText = document.querySelector(&#39;.log&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logText.innerHTML += &#39;&lt;li&gt;JavaScript in HTML &#39; + txt + &#39;&lt;/li&gt;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-    
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body onload&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body ready&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body anonymous function&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}();
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&lt;/body&gt;
-</pre>
-<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element is sent to Interpreter. The anonymous method is immediately executed, and the HTML DOM structure is set up. The methods in the <span style="font-family: Courier New,Courier,monospace;">$(document).ready</span> method and in the <span style="font-family: Courier New,Courier,monospace;">onload</span> event are executed in the stored order.</p>
-</li></ul>
-
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">jQuery has to be called from both the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> elements. The <span style="font-family: Courier New,Courier,monospace;">logText</span> variable has to be called from the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element. The method connected to the <span style="font-family: Courier New,Courier,monospace;">onload</span> event in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is not executed. </td> 
-      </tr> 
-     </tbody> 
-    </table>
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/media_query_w.htm b/org.tizen.ui.guides/html/web/w3c/media_query_w.htm
deleted file mode 100755
index 64dd6e0..0000000
--- a/org.tizen.ui.guides/html/web/w3c/media_query_w.htm
+++ /dev/null
@@ -1,342 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
-	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Media Queries: Labeling Output Devices in Style Sheets</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="#rule">Media Query Conditions</a></li>
-			<li><a href="#priorities">Media Query Priorities</a></li>
-			<li><a href="#create">Creating a Liquid Layout</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#mediaquery">Media Queries API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#mediaquery">Media Queries API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
- <h1>Media Queries: Labeling Output Devices in Style Sheets</h1>
- 
-<p>Media queries allow you to apply the CSS differently according to the media type (type of device) and media features (viewport status). Previously, you were able to use the media type only and create Web services with fixed layouts. However, smart phones, tablets, and other devices with various resolutions require a liquid layout. HTML5 now makes various characteristics and conditional defining possible, and can be used to implement responsive Web design (RWD), which is a <a href="#create">liquid layout</a> that mainly reacts according to the device resolution. </p>
-
-<p>You can use media queries in 3 ways:</p>
-
-<ul>
-<li>In CSS
-<p>You can define attribute values depending on given conditions:</p>
-<pre class="prettyprint">@media only screen and (max-width: 480px) {styles}
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">This approach is popular since it can reduce style overlapping; however, if all the styles are applied to 1 CSS, the maintenance work efficiency decreases.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-</li>
-<li>In an <span style="font-family: Courier New,Courier,monospace">@import</span> rule in CSS
-<p>You can import from CSS a file that matches the condition:</p>
-<pre class="prettyprint">@import url(example.css) not screen and (min-width: 480px)
-</pre>
-</li>
-<li>In HTML
-<p>You can directly import the CSS file that matches the condition:</p>
-<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 480px)&quot; href=&quot;example.css&quot;&gt;</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The disadvantage of this approach is that every time the condition is expanded, the HTML file must be edited. However, since this approach only imports the CSS files that match the condition, the file transmission amount can be reduced. </td> 
-      </tr> 
-     </tbody> 
-    </table>
-</li>
-</ul>
-
-<p>For more information on the CSS priorities when different media queries are used, see <a href="#priorities">Media Query Priorities</a>.</p>
-
-<h2 id="rule" name="rule">Media Query Conditions</h2>
-
-<p>You can define the following conditions for the media queries:</p>
-
-<ul>
-<li>Combination and relevancy
-<p>You can combine multiple conditions into 1 Boolean query with the <span style="font-family: Courier New,Courier,monospace">and</span> operator. To define a negative condition (something not being relevant), use the <span style="font-family: Courier New,Courier,monospace">not</span> operator.</p>
-<pre class="prettyprint">@media not screen and (min-width: 320px), screen and (max-width: 480px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}
-}
-</pre>
-</li>
-<li>Viewport width
-<p>You can define the query to match to a specific viewport width range using the <span style="font-family: Courier New,Courier,monospace">min-width</span> and <span style="font-family: Courier New,Courier,monospace">max-width</span> attributes.</p>
-<pre class="prettyprint">@media all and (min-width: 320px) and (max-width: 480px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}
-}
-</pre>
-</li>
-<li>Device and viewport height
-<p>The <span style="font-family: Courier New,Courier,monospace">height</span> attribute refers to restoring the viewport&#39;s height, and the <span style="font-family: Courier New,Courier,monospace">device-height</span> attribute refers to restoring the resolution set in the device.</p>
-<p>The same difference applies to the <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">aspect-ratio</span> attributes, which can assign &#39;device-&#39;.</p>
-<pre class="prettyprint">@media screen and (min-device-height: 700px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-device-height&quot;}
-}
-@media screen and (min-height: 550px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-height&quot;}
-}
-</pre>
-<p>In the above example, a device with the width-height resolution of 480/720 has the <span style="font-family: Courier New,Courier,monospace">{content: &quot;min-height&quot;}</span> rule applied as a priority in a portrait screen, but the <span style="font-family: Courier New,Courier,monospace">{content &quot;min-device-height&quot;}</span> rule applied in a landscape screen.</p> 
-
-</li>
-<li>Device aspect ratio
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">device-aspect-ratio</span> attribute to check the width-length ratio (aspect ratio) of the printing device.</p>
-<pre class="prettyprint">@media all and (device-aspect-ratio: 9/16) and (orientation: portrait),  
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;all and (device-aspect-ratio: 2/3) and (orientation: portrait) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;aspect-ratio, portrait&quot;}
-}
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The device aspect ratio is a reliable way to distinguish the portrait and landscape modes of a smart phone. However, because the aspect ratio of all the devices has to be specified, a precise rule is hard to define. (Currently wildly used screen ratios are 15:9, 16:10, 16:9, 3:2, and 4:3, but devices with other screen ratios may be added in the future.)</td> 
-      </tr> 
-     </tbody> 
-    </table>
-</li>
-</ul>
-
- <h2 id="priorities" name="priorities">Media Query Priorities</h2>
-
-<p>When multiple media queries and conditions are defined, CSS is applied with the following priorities:</p>
-<ul>
-<li>In case of the CSS reiteration declaration, the CSS that has been declared last is applied.</li>
-<li>In case of specificity, the CSS with the highest specificity is applied.
-<p>The specificity is calculated as follows:</p><ul><li>id attribute = 100</li>
-<li>class attribute = 10</li>
-<li>element = 1</li></ul>
-<p>Selectors, such as <span style="font-family: Courier New,Courier,monospace">section#content &gt; .title p</span>, carry the specificity of 112.</p></li>
-<li>In case of user override, the user CSS is applied instead of the creator CSS.</li>
-<li><p>CSS is applied first based on the conditions in the <span style="font-family: Courier New,Courier,monospace">@import</span> rule, then based on the conditions in CSS, and finally based on the conditions in HTML.</p></li>
-<li><p>In media queries, regardless of CSS priority, CSS which has not been imported still exists based on the conditions.</p></li>
-</ul>
-
-<p>To apply media query, consider an example with the following files:</p>
-<pre class="prettyprint">
-&lt;!--example.html--&gt;
-&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 768px)&quot; href=&quot;c.css&quot;&gt;
-&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 768px)&quot; href=&quot;a.css&quot;&gt;
-&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (min-width: 768px)&quot; href=&quot;b.css&quot;&gt;
-&lt;style&gt;
-&nbsp;&nbsp;&nbsp;@media all and (max-width: 400px) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.example: after {content: &quot;In HTML head&quot;}
-&nbsp;&nbsp;&nbsp;}
-&lt;/style&gt;
-
-&lt;!--a.css--&gt;
-body {background-color: #ccc}
-
-@media screen and (max-width: 480px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content:&quot;a.css : width: ~ 480px&quot;}
-}
-@media screen and (min-width: 480px) and (max-width: 768px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;a.css : width: 480px ~ 768px&quot;}
-}
-
-&lt;!--b.css--&gt;
-@import url(&quot;c.css&quot;);
-
-body {background-color: #333; color: #fff}
-
-@media screen and (min-width: 768px) and (max-width: 1024px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;b.css : width: 768px ~ 1024px&quot;}
-}
-
-&lt;!--c.css--&gt;
-body {background-color: tomato}
-
-@media screen and (min-width: 768px) and (max-width: 1024px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 768px ~ 1024px&quot;}
-}
-@media screen and (min-width: 1024px) and (max-width: 1280px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 1024px ~ 1280px&quot;}
-}
-</pre>
-
-<p>The CSS is applied based on the viewport:</p>
-<ul>
-<li>If the viewport is 320 px:
-<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;a.css : width: ~ 480px&quot;</span>).</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li>
-<li>CSS is applied instead of the HTML <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> (the <span style="font-family: Courier New,Courier,monospace">a.css</span> file has higher priority than <span style="font-family: Courier New,Courier,monospace">content: &quot;In HTML head&quot;</span>).</li>
-</ul></li>
-<li>If the viewport is 700 px:
-<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;a.css : width: 480px ~ 768px&quot;</span>).</p> </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li></ul></li>
-<li>If the viewport is 900 px:
-<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is imported.</li>
-<li>c.css is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;c.css : width: 768px ~ 1024px&quot;</span>). </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is not imported.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;b.css : width: 768px ~ 1024px&quot;</span>).</li>
-</ul></li>
-</ul>
- 
- 
- 	<h2 id="create" name="create">Creating a Liquid Layout</h2>
-			<p>To enhance the user experience of your application, you must learn to define media queries to determine the styles to be used in the Web document. This example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show the optimized layout on both portrait and landscape modes.</p>
-
-
-<ol>
-<li>Define a page with title and content elements:
-<pre class="prettyprint">
-&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Media queries tutorial&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;&lt;img src=&quot;logo.png&quot; alt=&quot;Tizen&quot;&gt;&lt;/h1&gt;
-&lt;/header&gt;
-&lt;div class=&quot;container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;section class=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Section Title&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;desc&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The quick brown fox jumps over a lazy dog.  The quick brown...
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;aside&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aside
-&nbsp;&nbsp;&nbsp;&lt;/aside&gt;
-&lt;/div&gt;
-</pre></li>
-<li>Define basic styles for the page, using a flexible box (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">wearable</a> applications) and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">multi-column</a> (in mobile applications only) layout with 2 columns. (The following figure applies to mobile applications only.)
-<pre class="prettyprint">
-.container 
-{
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-}
-.container aside 
-{
-&nbsp;&nbsp;&nbsp;-webkit-flex: 1 0 20%;
-}
-.contents 
-{
-&nbsp;&nbsp;&nbsp;-webkit-columns: 5em 3;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule: 1px solid #999;
-&nbsp;&nbsp;&nbsp;-webkit-column-gap: 2em;
-&nbsp;&nbsp;&nbsp;-webkit-flex: 1 1 auto;
-}
-.contents h2 
-{
-&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
-}
-</pre>
-
-<p align="center"><img alt="Fixed layout example (in mobile applications only)" src="../../images/media_queries1.png" /></p>
-<p>The page is easy to view as long as the screen width is about 600 px; however, in a smaller screen below 400 px, the legibility rapidly decreases. You can edit the layout by reducing the number of columns to 1 and moving the <strong>Aside</strong> area at the bottom of the screen, but those changes then decrease legibility on a wider screen.</p>
-
-</li>
-<li>
-<p>To solve the problem, use a media query to define a liquid layout that changes according to the screen resolution:</p>
-
-<pre class="prettyprint">
-@media all and (max-width: 480px) and (orientation: portrait) 
-{
-&nbsp;&nbsp;&nbsp;.contents {-webkit-columns: 1;}
-}
-@media all and (min-width: 480px) and (max-width: 768px) 
-{
-&nbsp;&nbsp;&nbsp;.contents {-webkit-columns: 2;}
-&nbsp;&nbsp;&nbsp;.container {display: -webkit-flex;}
-}
-</pre>
-<p>With the above media query, the normal resolution has 2 columns (shown on the right in the figure), while in a smaller resolution in a portrait mode only 1 column is used (shown on the left). (The following figure applies to mobile applications only.)</p>
-<p align="center"><img alt="Liquid layout example (in mobile applications only)" src="../../images/media_queries3.png" /></p> 
-
-</li>
-<li><p>If you need to define specific styles for a certain resolution range, simply add more media queries. However, too many conditions make the maintenance harder, so carefully consider what kind of resolution ranges you need.
-</p>
-
-<p>The following conditions are generally used and cover all possibilities up to a Web browser in a PC:</p>
-<pre class="prettyprint">
-&lt;!--Portrait mode of a smart phone--&gt;
-@media screen and (max-width: 480px) and (orientation: portrait) {&lt;!--Specific layout--&gt;}
-
-&lt;!--Landscape mode of a smart phone and a small tablet--&gt;
-@media screen and (min-width: 480px) and (max-width: 768px) {&lt;!--Specific layout--&gt;}
-
-&lt;!--Tablet and a small laptop--&gt;
-@media screen and (min-width: 768px) and (max-width: 1024px) {&lt;!--Specific layout--&gt;}
-
-&lt;!--PC browser--&gt;
-@media screen and (min-width: 1024px) {&lt;!--Specific layout--&gt;}
-@media print {&lt;!--Specific layout--&gt;}
-</pre></li>
-
-</ol>
-<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/dom_forms_and_styles/media_queries" target="_blank">liquid_layout_2.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries" target="_blank">logo.png</a></li>
- </ul>
- 
-<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/multi_mw.htm b/org.tizen.ui.guides/html/web/w3c/multi_mw.htm
deleted file mode 100755
index 798e73d..0000000
--- a/org.tizen.ui.guides/html/web/w3c/multi_mw.htm
+++ /dev/null
@@ -1,620 +0,0 @@
-<!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>CSS Multi-column Layout Module: Creating Multi-column Layouts</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="#size">Setting the Column Number and Width</a></li>
-			<li><a href="#gap">Setting the Column Gap</a></li>
-			<li><a href="#rule">Setting the Column Rule</a></li>
-			<li><a href="#span">Setting the Column Span</a></li>
-			<li><a href="#break">Setting the Column Break</a></li>
-			<li><a href="#basic">Creating a Basic Layout</a></li>
-			<li><a href="#dynamic">Creating a Layout with Dynamic Content</a></li>
-		</ul>	
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">CSS Multi-column Layout Module API for Mobile Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
- <h1>CSS Multi-column Layout Module: Creating Multi-column Layouts</h1>
- 
-
- <p>You can arrange the screen content into columns. Using the CSS <span style="font-family: Courier New,Courier,monospace">column-</span> properties, the content elements can flow between columns when the column height or number changes. You can use the properties alone to <a href="#basic">create a basic layout</a>, or add JavaScript code to <a href="#dynamic">make the layout dynamic</a>.</p>
-
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
- 
- <p>You can manage the following column-related features:</p>
-<ul>
-<li><a href="#size">Setting the column number and width</a></li>
-<li><a href="#gap">Setting the column gap</a></li>
-<li><a href="#rule">Setting the column rule</a></li>
-<li><a href="#span">Setting the column span</a></li>
-<li><a href="#break">Setting the column break</a></li>
-</ul>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Up to Tizen SDK version 2.2, most CSS properties and values used in Tizen required the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix. To ensure future compatibility, these properties can now be used with or without the prefix.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-	
-<h2 id="size" name="size">Setting the Column Number and Width</h2>
-
-<p> When the layout is set to a constant number of columns using the <span style="font-family: Courier New,Courier,monospace">column-count</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-count)</span> property, the column width is set to fill the available horizontal space.</p>
-<p>In the following code snippet and figure, the column number is set to 4. As a result, on a 480 x 800 display (shown on the top), the column width is 116 px, whereas on a 720 x 1280 display (shown on the bottom), the column with is 143 px.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-count</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_count" target="_blank">multi_column_column_count/renamed_index.html</a>.</p>
-<pre class="prettyprint">
-article
-{
-&nbsp;&nbsp;&nbsp;column-count: 4;
-&nbsp;&nbsp;&nbsp;-webkit-column-count: 4;
-&nbsp;&nbsp;&nbsp;margin: 10px;
-}
-</pre>
-
-<p class="figure">Figure: 4 columns on different resolution displays</p> 
-<p align="center"><img alt="4 columns on different resolution displays" src="../../images/4_columns.png" /></p> 
-
-<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width)</span> property sets the base column width.</p>
- <p>In the following code snippet and figure, the column width is set to 153 px, but the effective column width is 288 px for a 480 x 800 display (shown on the left) and 154 px for a 720 x 1280 display (shown on the right). The parameter sets the column to at least the defined width, but not wider than the available display space or twice the defined width. The actual column width is calculated using a <a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412/#pseudo-algorithm" target="_blank">pseudo-algorithm</a>.</p>
-<p>The code snippet shows how the multi-column layout is implemented when the vertical space is limited. If there is more content than fits the available space, the next column is set outside the available space. Using the <span style="font-family: Courier New,Courier,monospace">overflow: scroll</span> property, the column can be scrolled horizontally.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-width</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_width" target="_blank">multi_column_column_width/renamed_index.html</a>.</p>
-<pre class="prettyprint">
-article
-{
-&nbsp;&nbsp;&nbsp;width: 90vw;
-&nbsp;&nbsp;&nbsp;height: 90vh;
-&nbsp;&nbsp;&nbsp;column-width: 153px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 153px;
-&nbsp;&nbsp;&nbsp;margin: 5vw;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;
-&nbsp;&nbsp;&nbsp;overflow: scroll;
-}
-</pre>
-
-<p class="figure">Figure: Column width 153 px on different resolution displays</p> 
-<p align="center"><img alt="Column width 153 px on different resolution displays" src="../../images/column_width.png" /></p> 
-
-<h2 id="gap" name="gap">Setting the Column Gap</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property sets the distance between columns. The property affects the column width, as the column width, gap, and margins all take available space. In the following code snippet and figure, the column gap is set to 17 px.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_gap" target="_blank">multi_column_column_gap/renamed_index.html</a>.</p>
-<pre class="prettyprint">
-article 
-{
-&nbsp;&nbsp;&nbsp;height: 303px;
-&nbsp;&nbsp;&nbsp;column-width: 153px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 153px;
-&nbsp;&nbsp;&nbsp;column-gap: 17px;
-&nbsp;&nbsp;&nbsp;-webkit-column-gap: 17px;
-&nbsp;&nbsp;&nbsp;margin: 7px;
-&nbsp;&nbsp;&nbsp;padding: 3px;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;
-}
-</pre>
-
-<p class="figure">Figure: Column gap</p> 
-<p align="center"><img alt="Column gap" src="../../images/column_gap.png" /></p>
-
-<h2 id="rule" name="rule">Setting the Column Rule</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property displays a vertical line in the middle of the column gap.</p>
-<p>The rule has analogical parameters, such as width, line style, and color, but its size is not included in the available space, and it is a drawing similar to the background.</p>
-
-<p>Rules are only displayed in the content area. If the <span style="font-family: Courier New,Courier,monospace">padding</span> property is set in the same element, the rule appears shorter than the background. In the following code snippet and figure, the rule width is set to 5 px.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_rule" target="_blank">multi_column_column_rule/renamed_index.html</a>.</p>
-<pre class="prettyprint">article 
-{
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-width: 5px;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-color: rgb(92, 203, 246);
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-style: solid;
-}
-</pre>
-
-<p class="figure">Figure: Column rule</p> 
-<p align="center"><img alt="Column rule" src="../../images/column_rule.png" /></p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">In Tizen SDK version 2.2, to avoid displaying the rules incorrectly, do not use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property with horizontal scrolling of the columns.</td> 
-      </tr> 
-     </tbody>
-</table>
-
-<h2 id="span" name="span">Setting the Column Span</h2>
-<p>By default, all elements within the columns are no wider than the column width. The <span style="font-family: Courier New,Courier,monospace">column-span</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-span</span>) property can be used to display content across all columns.</p>
-<p>When using this property with column elements which have the <span style="font-family: Courier New,Courier,monospace">column-count</span> or <span style="font-family: Courier New,Courier,monospace">column-width</span> property set, the following restrictions apply:</p>
-<ul>
-<li>Column element height is not used and elements in columns take more vertical space than is set in height.</li>
-<li>If the column element has the <span style="font-family: Courier New,Courier,monospace">overflow</span> property set to <span style="font-family: Courier New,Courier,monospace">hidden</span>, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is ignored.</li>
-<li>An element using the <span style="font-family: Courier New,Courier,monospace">column-span</span> property does not have to be a direct child of the column element.</li>
-</ul>
-<p>In the figure below, the blue arrow shows the order of the column elements. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is set to  <span style="font-family: Courier New,Courier,monospace">all</span>, as in the following code snippet.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-span</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_span" target="_blank">multi_column_column_span/renamed_index.html</a>.</p>
-<pre class="prettyprint">
-article.left header 
-{
-&nbsp;&nbsp;&nbsp;column-span: all;
-&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
-}
-</pre>
-
-<p class="figure">Figure: Column span</p> 
-<p align="center"><img alt="Column span" src="../../images/column_span.png" /></p>
-
-<h2 id="break" name="break">Setting the Column Break</h2>
-<p>By default, column elements are broken to balance column height. The <span style="font-family: Courier New,Courier,monospace">break-before</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-before</span>), <span style="font-family: Courier New,Courier,monospace">break-after</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-after</span>), and <span style="font-family: Courier New,Courier,monospace">break-inside</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-inside</span>) properties can be used to define that an element cannot be broken between columns (set to <span style="font-family: Courier New,Courier,monospace">avoid</span>), or that an element must begin or end within a given column.</p>
-
-<p>The following code snippet and figure illustrate the use of the <span style="font-family: Courier New,Courier,monospace">break-</span> property. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">break-</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">break-before</span> property is set to  <span style="font-family: Courier New,Courier,monospace">always</span>.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-break</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_break" target="_blank">multi_column_column_break/renamed_index.html</a>.</p>
-<pre class="prettyprint">
-article.lower section
-{
-&nbsp;&nbsp;&nbsp;break-before: always;
-&nbsp;&nbsp;&nbsp;-webkit-column-break-before: always;
-}
-</pre>
-
-<p class="figure">Figure: Column break</p> 
-<p align="center"><img alt="Column break" src="../../images/column_break.png" /></p>
-
-<h2 id="basic" name="basic">Creating a Basic Layout</h2>
-
-<p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a basic layout using CSS:</p>
-
-<ol>
-<li>
-<p>Create the HTML layout, defining separate sections for the column content and including an image file:</p>
-<pre class="prettyprint">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;article id=&quot;article&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 1&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Lorem ipsum dolor (...), id.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/pinwheel_green.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Maecenas at (...)tortor.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 2&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Nullam bibendum (...) Curabitur.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/Tizen_WhiteFold_4.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 3&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Sed sagittis, (...) Vivamus sed est sit amet.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img id=&quot;figure&quot; src=&quot;images/pinwheel_yellow.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Pellentesque habitant (...). Duis lobortis, nibh.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&lt;/body&gt;
-</pre></li>
-
-<li>Set the CSS column properties:
-<ol type="a">
-<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element acts as a multi-column container. Set the <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span>) property to enable the multi-column layout:</p>
-
-<pre class="prettyprint">
-article 
-{
-&nbsp;&nbsp;&nbsp;width: 80vw;
-&nbsp;&nbsp;&nbsp;column-width: 119px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 119px;
-
-&nbsp;&nbsp;&nbsp;margin: 2vh 5vw;
-&nbsp;&nbsp;&nbsp;padding: 2vh 5vw;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> property defines the default column width but the visible width is not always similar. An algorithm calculates the width according to available space. Normally, a column has a different display width from the one set in the property because as the columns are sized to fill all available space.</p>
-<p>For example, on a 480 x 800 display with portrait orientation, the device width is 123 px, whereas on a 720 x 1280 display with a landscape orientation, the width is 120 px. The space available for columns is the <span style="font-family: Courier New,Courier,monospace">width</span> attribute value reduced by <span style="font-family: Courier New,Courier,monospace">padding</span>, in this case 80vw - (2 * 5vw) = 70vw, which means 70/100 width of the device display.</p>
-</li>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property to set the distance between columns:</p>
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;column-gap: 10px;
-&nbsp;&nbsp;&nbsp;-webkit-column-gap: 10px;
-</pre>
-</li>
-<li>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property to draw a vertical line between columns. Define the width, color, and style of the rule:</p>
-
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-width: 1px;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-color: #677784;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-style: solid;
-&nbsp;&nbsp;&nbsp;column-rule-width: 1px;
-&nbsp;&nbsp;&nbsp;column-rule-color: #677784;
-&nbsp;&nbsp;&nbsp;column-rule-style: solid;
-}</pre>
-
-<p>The rule width does not increase the distance between columns. It is drawn under the column gap and can be even wider than the gap.</p>
-
-</li></ol>
-
- <p>The figure below shows the layout with the <span style="font-family: Courier New,Courier,monospace">column-rule</span> <span style="font-family: Courier New,Courier,monospace">width</span> set to 40 px and the <span style="font-family: Courier New,Courier,monospace">column-gap</span> set to 10 px.</p>
-
-<p class="figure">Figure: Column settings</p> 
-<p align="center"><img alt="Column settings" src="../../images/column_settings.png" /></p>
-</li>
-<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">footer</span> element with the display height set to 5/100 and padding set to 2 * 2vh:</p> 
-
-<pre class="prettyprint">
-footer 
-{
-&nbsp;&nbsp;&nbsp;padding: 2vh;
-&nbsp;&nbsp;&nbsp;height: 5vh;
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
-}
-</pre>
-</li>
-<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">section</span> elements setting the <span style="font-family: Courier New,Courier,monospace">border-bottom</span> and vertical <span style="font-family: Courier New,Courier,monospace">padding</span> values. It is not necessary to define horizontal padding, as it has been defined for the <span style="font-family: Courier New,Courier,monospace">article</span> element.</p>
-
-<pre class="prettyprint">
-article&gt;section
-{
-&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #d8d9d4;
-&nbsp;&nbsp;&nbsp;padding: 4px 0;
-&nbsp;&nbsp;&nbsp;text-align: center;
-}
-</pre>
-</li>
-<li>
-<p>Set image elements to have an automatic <span style="font-family: Courier New,Courier,monospace">margin</span> to center them within the column.</p>
-<p>In case of the image whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">figure</span>, set it to be a floating element with text drawn around it.</p>
-
-<pre class="prettyprint">
-img{
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;margin: 4px auto;
-}
-
-#figure
-{
-&nbsp;&nbsp;&nbsp;float: right;	
-&nbsp;&nbsp;&nbsp;margin: 4px;
-}
-</pre>
-</li></ol>
-
-<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
-
-<p class="figure">Figure: Basic layout on a 480 x 800 display</p> 
-<p align="center"><img alt="Basic layout on a 480 x 800 display" src="../../images/basic_layout_480x800.png" /></p>
-
-<p class="figure">Figure: Basic layout on a 720 x 1280 display</p> 
-<p align="center"><img alt="Basic layout on a 720 x 1280 display" src="../../images/basic_layout_720x1280.png" /></p>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up" target="_blank">renamed_index.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/css" target="_blank">style.css</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">pinwheel_green.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">pinwheel_yellow.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_Pinwheel_Secondary_Confetti.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
- </ul>
-			
-				<h2 id="dynamic" name="dynamic">Creating a Layout with Dynamic Content</h2>
-				
-			<p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a layout displaying a varying amount of content using CSS:</p>
-<ol>
-<li>
-<p>Create the HTML layout. The <span style="font-family: Courier New,Courier,monospace">article</span> element displays the columns, and the <span style="font-family: Courier New,Courier,monospace">nav</span> element contains buttons to add and remove content in the columns.</p>
-<pre class="prettyprint">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;article id=&quot;article&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&nbsp;&nbsp;&nbsp;&lt;nav&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;addSections&quot; href=&quot;#&quot;&gt;Add images&lt;/a&gt; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;howMany&quot; value=&quot;3&quot;&gt; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;removeGroup&quot; href=&quot;#&quot;&gt;Remove last Group&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/nav&gt;
-&nbsp;&nbsp;&nbsp;&lt;footer&gt; Multicolumn Layout Tutorial 02&lt;/footer&gt;
-&lt;/body&gt;
-</pre>
-</li>
-<li>Set the CSS properties:
-<ol type="a">
-<li>
-<p>Define the CSS display and column properties:</p>
-<pre class="prettyprint">
-body 
-{
-&nbsp;&nbsp;&nbsp;display: flex;
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;flex-direction: column;
-&nbsp;&nbsp;&nbsp;-webkit-flex-direction: column;
-&nbsp;&nbsp;&nbsp;background: #fefffa;
-}
-</pre>
-</li>
-<li>
-<p>Set the <span style="font-family: Courier New,Courier,monospace">article</span>, <span style="font-family: Courier New,Courier,monospace">nav</span> and <span style="font-family: Courier New,Courier,monospace">footer</span> elements in one column using the flexible box layout.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">nav</span> element is also a flexible box layout container to set UI elements in.</p>
-<pre class="prettyprint">
-nav 
-{
-&nbsp;&nbsp;&nbsp;height: 20vh;
-&nbsp;&nbsp;&nbsp;padding-left: 20%;
-&nbsp;&nbsp;&nbsp;padding-top: 10px;
-&nbsp;&nbsp;&nbsp;display: flex;
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;flex-flow: row wrap;
-&nbsp;&nbsp;&nbsp;-webkit-flex-flow: row wrap;
-&nbsp;&nbsp;&nbsp;flex: none;
-&nbsp;&nbsp;&nbsp;-webkit-flex: none;
-&nbsp;&nbsp;&nbsp;justify-content: space-around;
-&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-around;
-&nbsp;&nbsp;&nbsp;align-items: center;
-&nbsp;&nbsp;&nbsp;-webkit-align-items: center;
-&nbsp;&nbsp;&nbsp;background: url(../images/white_logo.png) no-repeat;
-&nbsp;&nbsp;&nbsp;background-position: 2%;
-&nbsp;&nbsp;&nbsp;background-size: auto 70%;
-}
-</pre>
-</li>
-<li>
-<p>Define the styles for the <span style="font-family: Courier New,Courier,monospace">a</span> elements within the <span style="font-family: Courier New,Courier,monospace">nav</span> element to make them appear as buttons:</p>
-<pre class="prettyprint">
-nav a 
-{
-&nbsp;&nbsp;&nbsp;margin: 3px;
-&nbsp;&nbsp;&nbsp;border-radius: 5px;
-&nbsp;&nbsp;&nbsp;padding: 5px 15px;
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-}
-</pre>
-<p>When the user taps the <strong>Add images</strong> button, the images and their descriptions are displayed.</p>
-</li>
-<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">input</span> element (with the property type set to <span style="font-family: Courier New,Courier,monospace">number</span>) style with an increased height to match the buttons around it:</p>
-<pre class="prettyprint">
-nav input
-{
-&nbsp;&nbsp;&nbsp;width: 50px;
-&nbsp;&nbsp;&nbsp;height: 2em;
-}
-</pre>
-</li>
-<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element contains the column properties. Use the <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span> property to set the column width. The real width is calculated based on available space.</p>
-<pre class="prettyprint">
-article 
-{
-&nbsp;&nbsp;&nbsp;width: 90vw;
-&nbsp;&nbsp;&nbsp;column-width: 136px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 136px;
-&nbsp;&nbsp;&nbsp;margin: 1vh 2vh;
-&nbsp;&nbsp;&nbsp;padding: 1vh;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;
-}
-</pre>
-</li>
-<li>
-<p>Set the images within the <span style="font-family: Courier New,Courier,monospace">article</span> element with a block display to separate them from text:</p>
-<pre class="prettyprint">
-article img 
-{
-&nbsp;&nbsp;&nbsp;margin: 0 auto;
-&nbsp;&nbsp;&nbsp;display: block;
-}
-</pre>
-</li>
-<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">column-span</span> property as <span style="font-family: Courier New,Courier,monospace">all</span> for the <span style="font-family: Courier New,Courier,monospace">h1</span> elements:</p>
-<pre class="prettyprint">
-article&gt;h1 
-{
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.5);
-&nbsp;&nbsp;&nbsp;padding: 4px;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;color: #eed484;
-&nbsp;&nbsp;&nbsp;column-span: all;
-&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
-}
-</pre>
-<p> As a result, the <span style="font-family: Courier New,Courier,monospace">h1</span> elements are spread across the columns. When the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is used, you cannot have more columns than can fit in the available horizontal space.</p>
-</li>
-<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">break-inside</span> property as <span style="font-family: Courier New,Courier,monospace">avoid</span> to avoid breaking elements between columns:</p>
-<pre class="prettyprint">
-article&gt;section 
-{
-&nbsp;&nbsp;&nbsp;break-inside: avoid;
-&nbsp;&nbsp;&nbsp;-webkit-column-break-inside: avoid;
-&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #d8d9d4;
-&nbsp;&nbsp;&nbsp;padding: 4px 0;
-&nbsp;&nbsp;&nbsp;text-align: center;
-}
-</pre>
-</li>
-<li>
-<p>Set the <span style="font-family: Courier New,Courier,monospace">footer</span> size:</p>
-<pre class="prettyprint">
-footer 
-{
-&nbsp;&nbsp;&nbsp;padding: 2vh;
-&nbsp;&nbsp;&nbsp;height: 5vh;
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
-}
-</pre>
-</li>
-</ol>
-</li>
-<li>Add the JavaScript code to make the content dynamic:
-<ol type="a">
-<li>
-<p>Declare a variable for the images. Elements included in the variable amount to data displayed in a column layout, such as a newsfeed:</p>
-<pre class="prettyprint">
-var images = [&quot;images/pinwheel_green.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_WhiteFold_4.png&quot;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/pinwheel_yellow.png&quot;];
-</pre>
-</li>
-<li>
-<p>Declare a variable for the input element for selecting the number of images added to the content:</p>
-<pre class="prettyprint">
-var howManyInput;
-</pre>
-</li>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">addGroup()</span> method with the input parameter value to add random images to the column layout and initialize the button events:</p>
-
-<pre class="prettyprint">
-window.onload = function() 
-{
-&nbsp;&nbsp;&nbsp;addGroup(4);
-&nbsp;&nbsp;&nbsp;howManyInput = document.getElementById(&#39;howMany&#39;);
-&nbsp;&nbsp;&nbsp;var addBtn = document.getElementById(&#39;addSections&#39;);
-&nbsp;&nbsp;&nbsp;addBtn.onclick = function() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addGroup(howManyInput.value);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;var removeBtn = document.getElementById(&#39;removeGroup&#39;);
-&nbsp;&nbsp;&nbsp;removeBtn.onclick = function() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;removeGroup();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;};
-};
-</pre>
-</li>
-<li>
-<p>Declare the <span style="font-family: Courier New,Courier,monospace">h1No</span> variable containing the number of <span style="font-family: Courier New,Courier,monospace">h1</span> elements included in the <span style="font-family: Courier New,Courier,monospace">article</span> elements, and one added to next lines.</p>
-
-<p>Declare the <span style="font-family: Courier New,Courier,monospace">newHTML</span> variable to add new content to the column layout. Each added element contains an <span style="font-family: Courier New,Courier,monospace">h1</span> element as a header, and <span style="font-family: Courier New,Courier,monospace">section</span> elements. Include an <span style="font-family: Courier New,Courier,monospace">img</span> element with a text description in each <span style="font-family: Courier New,Courier,monospace">section</span> element to display a random image. The <span style="font-family: Courier New,Courier,monospace">art</span> variable is initialized, and new HTML code (<span style="font-family: Courier New,Courier,monospace">newHTML</span>) is concatenated with the existing one (<span style="font-family: Courier New,Courier,monospace">innerHTML</span>):</p>
-<pre class="prettyprint">
-function addGroup(howMany) 
-{
-&nbsp;&nbsp;&nbsp;var h1No = document.querySelectorAll(&#39;article&gt;h1&#39;).length + 1;
-&nbsp;&nbsp;&nbsp;var newHTML = &quot;&lt;h1&gt;Group &quot; + h1No + &quot;&lt;/h1&gt;&quot;;
-&nbsp;&nbsp;&nbsp;var i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; howMany; ++i) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += &quot;&lt;section&gt;&lt;img alt=&#39;&#39; src=&#39;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += images[Math.floor(Math.random() * 4)];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += &quot;&#39;&gt;Lorem ipsum dolor sit amet diam sodales rutrum.&lt;/section&gt;&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;var art = document.getElementById(&quot;article&quot;);
-&nbsp;&nbsp;&nbsp;art.innerHTML += newHTML;
-}
-</pre>
-</li>
-<li>
-<p>When the user taps the <strong>Remove last Group</strong> button, the <span style="font-family: Courier New,Courier,monospace">removeGroup()</span> method is called to remove the group of images that was added last. Use the <span style="font-family: Courier New,Courier,monospace">all</span> variable to select all  <span style="font-family: Courier New,Courier,monospace">h1</span> elements in the content using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method. If the <span style="font-family: Courier New,Courier,monospace">last</span> value is less than 0, there is no element to remove. Use the <span style="font-family: Courier New,Courier,monospace">removeNextSibling()</span> method to recursively delete the next sibling element, and the  <span style="font-family: Courier New,Courier,monospace">removeChild()</span> method to remove the <span style="font-family: Courier New,Courier,monospace">h1</span> elements from its parent.</p>
-<pre class="prettyprint">
-function removeGroup() 
-{
-&nbsp;&nbsp;&nbsp;var all = document.querySelectorAll(&#39;article&gt;h1&#39;);
-&nbsp;&nbsp;&nbsp;var last = all.length - 1;
-&nbsp;&nbsp;&nbsp;if (last &lt; 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;removeNextSibling(all[last].nextSibling);
-&nbsp;&nbsp;&nbsp;all[last].parentElement.removeChild(all[last]);
-}
-</pre>
-</li>
-</ol>
-</li></ol>
-<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
-
-<p class="figure">Figure: Dynamic layout on a 480 x 800 display</p> 
-<p align="center"><img alt="Dynamic layout on a 480 x 800 display" src="../../images/dynamic_layout_480x800.png" /></p>
-
-<p class="figure">Figure: Dynamic layout on a 720 x 1280 display</p> 
-<p align="center"><img alt="Dynamic layout on a 720 x 1280 display" src="../../images/dynamic_layout_720x1280.png" /></p>
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up" target="_blank">renamed_index.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/css" target="_blank">style.css</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/js" target="_blank">main.js</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">pinwheel_green.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">pinwheel_yellow.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">Tizen_Pinwheel_Secondary_Confetti.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">white_logo.png</a></li>
- </ul>
-			
- 
-<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/multiple_screens_mw.htm b/org.tizen.ui.guides/html/web/w3c/multiple_screens_mw.htm
deleted file mode 100755
index 6af563d..0000000
--- a/org.tizen.ui.guides/html/web/w3c/multiple_screens_mw.htm
+++ /dev/null
@@ -1,382 +0,0 @@
-<!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>Multiple Screen Support: Supporting Different Screen Sizes</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="#key">Key Concepts</a></li>
-            <li><a href="#ui">UI Scalability</a></li>
-            <li><a href="#create">Creating Applications Supporting Multiple Screens</a></li>
-            <li><a href="#resolution">Image Resolution Optimization</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Multiple Screen Support: Supporting Different Screen Sizes</h1>
-  
-  <p>Tizen is available in various devices which support different screen sizes and resolutions. When developing Tizen Web applications, you must take this into account if you want your application to function well in various device models.</p>
-
-    
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-  <p>Before <a href="#create">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key">key concepts of multiple screen support</a>.</p>
-  <p>Tizen provides the <a href="#ui">UI scalability</a> resolution feature, which allows you to create scalable applications.</p>
-  <p>To optimize images used in Web applications, images based on a single resource can be used in <a href="#resolution">various resolutions</a>.</p>
-  <h2 id="key" name="key">Key Concepts</h2>
-  <p>Before building a Web application for multiple resolutions, make sure you are familiar with the following <a href="http://www.w3.org/" target="_blank">W3C</a> Web content scaling standards, which must be taken into account when developing Web applications:</p>
-  <ul>
-   <li>Viewport meta tag</li>
-   <li>CSS media query</li>
-  </ul>
-  <h3 id="viewport" name="viewport">Viewport Meta Tag</h3>
-  <p>A viewport defines the application area that displays the Web page content.</p>
-  <p>In a Web browser, the viewport size depends on the browser window size. If the viewport is smaller than the Web content size, horizontal and vertical scrollbars are displayed for page navigation. The Web browser viewport does not support the zoom feature. However, in a mobile Web browser, there are no window scrollbars and the viewport supports the zoom feature.</p>
-  <p>The <a href="http://www.w3.org/TR/mwabp/#bp-viewport" target="_blank">viewport meta tag</a> enables you to customize the viewport size and zoom levels in a majority of mobile Web browsers. Using this tag, you can set the width, height, initial scale, and scale range for Web pages.</p>
-  <p>To use the viewport meta tag while developing Web applications, you must note the following:</p>
-  <ul>
-   <li>The <span style="font-family: Courier New,Courier,monospace">device-height</span> and <span style="font-family: Courier New,Courier,monospace">device-width</span> attributes defined in the viewport meta tag are not the same as the real device width and height in pixels.</li>
-   <li>Using the viewport meta tag, the Web browsers of different devices display the same content with different layout size and scale factor. The scale factor is calculated using the device pixel ratio (DPR).</li>
-  </ul>
-  <h3 id="css" name="css">CSS Media Query</h3>
-  <p>The <a href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank">CSS media query</a> enables you to set conditions for particular media features and types to apply different CSS files for the application content. For Web content scaling, you can use the CSS media query to, for example:</p>
-  <ul>
-   <li>Define the image resource to be used based on the screen dots per inch (DPI) ratio.</li>
-   <li>Determine the CSS layout to be used based on the screen width.</li>
-  </ul>
-  <p></p>
-  <h2 id="ui" name="ui">UI Scalability</h2>
-  <p>With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application&#39;s logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the <a href="#viewport">viewport meta tag</a> to fit the Web page into the device screen, and the <span style="font-family: Courier New,Courier,monospace">rem</span> unit to determine the size of the Tizen Web UI components.</p>
-  <h3 id="set" name="set">Setting the Viewport</h3>
-  <p>Tizen devices support a variety of screen resolutions and dots per inch (DPI) values. If the viewport meta tag is not defined, TAU uses the default viewport width and scale factor. This ensures that Web content layout varies between different screen resolutions.</p>
-  <p>In the following example, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, which is determined by the width of the Tizen device. The <span style="font-family: Courier New,Courier,monospace">device-width</span> value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)</p>
-  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</pre>
-  <p>If the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (<span style="font-family: Courier New,Courier,monospace">http://tizen.org</span>) on different devices with the viewport width set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
-  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;</pre>
-  <table>
-   <caption>
-     Table: Layout size and scale factor
-   </caption>
-   <tbody>
-    <tr>
-     <th>Device screen resolution</th>
-     <th>Real screen DPI</th>
-     <th>Device DPI</th>
-     <th>Web browser page</th>
-     <th>Viewport width</th>
-     <th>Scale factor</th>
-    </tr>
-    <tr>
-     <td style="text-align:center;">720 x 1280</td>
-     <td style="text-align:center;">306</td>
-     <td style="text-align:center;">320</td>
-     <td style="text-align:center;"><img alt="captured screen1" src="../../images/captured_screen1.png" /></td>
-     <td style="text-align:center;">360 px</td>
-     <td style="text-align:center;">2.0</td>
-    </tr>
-    <tr>
-     <td style="text-align:center;">480 x 800</td>
-     <td style="text-align:center;">218</td>
-     <td style="text-align:center;">240</td>
-     <td style="text-align:center;"><img alt="captured screen2" src="../../images/captured_screen2.png" /></td>
-     <td style="text-align:center;">320 px</td>
-     <td style="text-align:center;">1.5</td>
-    </tr>
-   </tbody>
-  </table>
-  <h3 id="web" name="web">Working with Tizen Web Winsets</h3>
-  <p>The default sizes of Tizen Web winsets (such as Popup, Button, and Checkbox) are designed based on the reference viewport DPI of 160. Therefore, these winsets are of similar sizes on any Tizen device if the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
-  <p>If you manually set the viewport width of your application to a fixed value, the Tizen Web winsets may not fit appropriately in the application. To avoid the problem, Tizen Web winsets use the <span style="font-family: Courier New,Courier,monospace">rem</span> unit for the winset length, which depends on the base font size of the winset. Each Tizen Web winset theme has its own base font size, and the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element font size is also set to the base font size. If the viewport width is set to a fixed value, this base font size is recalculated and set to the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element to adjust the Tizen Web winset sizes accurately.</p>
-  <h2 id="create" name="create">Creating Applications Supporting Multiple Screens</h2>
-  <p>To create an application that supports multiple screen sizes, you must consider the following while coding your application:</p>
-  <ul>
-   <li>Configuring the viewport</li>
-   <li>Optimizing resources</li>
-   <li>Creating screen resolution-independent UI</li>
-  </ul>
-  <h3 id="configure" name="configure">Configuring the Viewport</h3>
-  <p>To use UI scalability in your application, set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag while <a href="../../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm">creating a Web application project</a> in IDE. To configure the viewport in the Tizen Web applications, add the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
-  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;&gt;</pre>
-  <h3 id="optimize" name="optimize">Optimizing Resources</h3>
-  <p>By default, the Tizen Advanced UI (TAU) consists of the HD Web winsets. The winset scale is lowered for lower screen resolution devices. To optimize resources for different screen resolutions and devices, use the <a href="#css">CSS media query</a> for different resolutions available in Tizen. You can use CSS media queries in the HTML or CSS files.</p>
-  <p>In the HTML file:</p>
-  <pre class="prettyprint">&lt;link media=&quot;only screen and (min-resolution: 320dpi)&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;high-quality-images.css&quot; type= &quot;text/css&quot; rel=&quot;stylesheet&quot;&gt;</pre>
-  <p>In the CSS file:</p>
-  <pre class="prettyprint lang-html">@media screen and (max-resolution: 159dpi)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-
-@media screen and (min-resolution: 160dpi and max-resolution: 239dpi)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-
-@media screen and (min-resolution: 240dpi and max-resolution: 319dpi)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-
-@media screen and (min-resolution: 320dpi)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-</pre>
-  <p>You can also set different layout and resources for the portrait and landscape views in the CSS file:</p>
-  <pre class="prettyprint lang-html">@media screen and (orientation: portrait)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-
-@media screen and (orientation: landscape)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-</pre>
-  <h3 id="independent" name="independent">Creating Screen Resolution-independent UI</h3>
-  <p>The Tizen base font size is 22 px. This base font size value varies based on the device screen resolution. However, to create a screen resolution-independent UI, the Web browser engine renders the base font size as a logical pixel size instead of a physical pixel size.</p>
-  <h2 id="resolution" name="resolution">Image Resolution Optimization</h2>
-
-  <p>In Web applications, optimization of applications for various platforms (regarding devices, OS, and resolution) is efficient.</p>
-  <p><a href="media_query_w.htm">Media Queries</a> and <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/" target="blank">Flexible Box Layout</a> can be used to create flexible layouts, and to build the <a href="https://developer.tizen.org/downloads/sample-web-applications/load-web-app-tizen-sdk" target="blank">deployable package</a> easily.</p>
-
-  <p>Images can be used in Web applications in the following ways:</p>
-  <ul><li><span style="font-family: Courier New,Courier,monospace">IMG</span> tag linking images directly to HTML</li>
-  <li>CSS <span style="font-family: Courier New,Courier,monospace">background</span> property expressing images as a background in HTML</li>
-  <li><a href="../../../../org.tizen.guides/html/web/w3c/graphics/svg_w.htm">SVG (Scalable Vector Graphics)</a>, <a href="../../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a>, and <a href="http://www.khronos.org/registry/webgl/specs/latest/" target="blank">WebGL</a> APIs implementing graphics in HTML</li>
-  </ul>
-  <p>When selecting an option from the list above, consider the type of the image resource you are going to use.</p>
-  <p>You can use the following types of image resources:</p>
-  <ul><li><a href="#photos">Photos</a></li>
-<li><a href="#icons">Icons</a></li>
-
-    <li><a href="#animated">Animated images</a></li>
-
-    </ul>
-    <h3 id="photos" name="photos">Photos</h3>
-    <p>An image can be added to an application using the HTML <span style="font-family: Courier New,Courier,monospace">img</span> tag, or CSS <span style="font-family: Courier New,Courier,monospace">background</span> property as shown in the following example:</p>
-  <pre class="prettyprint">&lt;!--HTML--&gt;
-&lt;img src=&quot;images/sample.jpg&quot; alt=&quot;sample image&quot; /&gt;
-
-&lt;!--CSS--&gt;
-.photo
-{
-&nbsp;&nbsp;&nbsp;background: url(../images/sample.jpg) 0 0 no-repeat;
-&nbsp;&nbsp;&nbsp;background-size: 100%;
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 200px;
-}
-</pre>
-<p>In terms of performance, there is no difference between the options.</p>
-
-<p>The image color is expressed based on pixels. Therefore, the higher resolution an image has, the better it looks on a large screen. For full HD display, a resolution bigger than the image size displayed on the screen is needed. However, since a high resolution image tends to have a large size, limit the image size as to fit the maximum screen size:</p>
-<ul><li>1024 x 768 px: 90 KB</li><li>300 x 200 px: 39 KB</li><li>300 x 200 px: 15 KB</li></ul>
-<p>Current full HD displays have a resolution that is 1.5 to 2 times bigger than the actual screen size. The image quality is guaranteed if you size images as 2 times bigger than their original size.</p>
-<pre class="prettyprint">img
-{
-&nbsp;&nbsp;&nbsp;max-width: 100%;
-}
-</pre>
-
-<p class="figure">Figure: Enlarging a low-resolution image</p>
-<p align="center"><img alt="Enlarging a low-resolution image" src="../../images/enlarge_low_res_image.png" /></p>
-  <h3 id="icons" name="icons">Icons</h3>
-    <p>Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 <span style="font-family: Courier New,Courier,monospace">background-size</span> property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px.</p>
-    <pre class="prettyprint">.prev_icon, .next_icon
-{
-&nbsp;&nbsp;&nbsp;padding-left: 30px;
-&nbsp;&nbsp;&nbsp;height: 30px;
-&nbsp;&nbsp;&nbsp;line-height: 30px;
-&nbsp;&nbsp;&nbsp;font-size: 1.2em;
-&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
-&nbsp;&nbsp;&nbsp;background-position: 0 50%;
-&nbsp;&nbsp;&nbsp;background-size: auto 20px;
-}
-
-.prev_icon.icon1
-{
-&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow_left_01.png);
-}
-</pre>
-
-<p>When multiple icons are used on a page, all the image files are called separately. This slows down the loading speed and causes a large number of network roundtrips, as illustrated in the figure below.</p>
-
-<p class="figure">Figure: Network speed when calling each image separately</p>
-<p align="center"><img alt="Calling each of image separately" src="../../images/calling_img_sep.png"/></p>
-
-<p>You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the <span style="font-family: Courier New,Courier,monospace">background-position</span> property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows.
-</p>
-<pre class="prettyprint lang-html">.prev_icon, .next_icon
-{
-&nbsp;&nbsp;&nbsp;background-size: 20px auto; &lt;!--Full HD Display--&gt;
-&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow.png);
-}
-
-.prev_icon.icon1
-{
-&nbsp;&nbsp;&nbsp;background-position: 0 0;
-}
-
-.prev_icon.icon2
-{
-&nbsp;&nbsp;&nbsp;background-position: 0 -50px;
-}
-</pre>
-<p class="figure">Figure: Network speed when using sprite images</p>
-<p align="center"><img alt="Network speed when using sprite image" src="../../images/network_speed_sprite.png" /></p>
-     <h3 id="animated" name="animated">Animated Images</h3>
-    <p>Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG.</p>
-
-    <p>To create a simple and repetitive animation effect as below as effectively as possible, use GIF images, JavaScript, or the CSS3 <span style="font-family: Courier New,Courier,monospace;">animation</span> attribute.</p>
-    <p class="figure">Figure: JAVA mascot character in GIF (source: <a href="http://lea.verou.me" target="_blank">http://lea.verou.me</a>)</p>
-    <p align="center"><img alt="JAVA mascot character  in GIF" src="../../images/mascot.gif"/></p><br/>
-
-    <p>Below, the network capacity usage and timeline using the following animation types are compared using the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a>:</p>
-    <ul>
-    <li><a href="#gif">GIF animation</a></li>
-    <li><a href="#js">JavaScript animation</a></li>
-    <li><a href="#css3">CSS3 animation</a></li>
-    </ul>
-
-    <h4 id="gif" name="gif">GIF Animation</h4>
-
-    <p>Using GIF animation, the resource usage is as follows:</p>
-    <ul><li>Events: Fires only the painting event</li>
-    <li>Memory: 3 ~ 4 MB</li>
-    <li>Network: 10 ~ 25 ms</li>
-</ul>
-
-    <p class="figure">Figure: Events for a GIF image</p>
-    <p align="center"><img alt="Events" src="../../images/events.png"/></p><br/>
-    <p class="figure">Figure: Memory usage of a GIF image</p>
-    <p align="center"><img alt="Memory" src="../../images/memory.png"/></p><br/>
-    <p class="figure">Figure: Network capacity usage of a GIF image</p>
-    <p align="center"><img alt="Network" src="../../images/network.png"/></p><br/>
-
-    <p>GIF animation can be created in various resolutions without quality loss, when you use the option introduced in <a href="#photos">Photos</a>. This, however, increases memory occupancy.</p>
-
-    <h4 id="js" name="js">JavaScript Animation</h4>
-
-<p>JavaScript animation is less affected by enlarging or reducing its screen size. However, it uses a lot of device resources compared to using CSS3 animations:</p>
-<ul><li>
-Events: Event is fired every 100 ms, the interval of <span style="font-family: Courier New,Courier,monospace">setInterval()</span>.</li><li>
-Memory: Increases in proportion to time, from the initial size 90 KB.</li><li>
-Network: Used until the animation is stopped.</li></ul>
-    <p class="figure">Figure: Events for a JavaScript animation</p>
-    <p align="center"><img alt="Events" src="../../images/events2.png"/></p><br/>
-    <p class="figure">Figure: Memory usage of a JavaScript animation</p>
-    <p align="center"><img alt="Memory" src="../../images/memory2.png"/></p><br/>
-    <p class="figure">Figure: Network capacity usage of a JavaScript animation</p>
-    <p align="center"><img alt="Network" src="../../images/network2.png"/></p><br/>
-<p>The following example shows how JavaScript animation can be implemented:</p>
-    <pre class="prettyprint">&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated img&quot;), flag = 0;
-&nbsp;&nbsp;&nbsp;function animate()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.src = &#39;./images/sprite_&#39; + ((flag++) % 10) + &#39;.png&#39;;
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;setInterval(animate, 100);
-&lt;/script&gt;
-</pre>
-
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method of the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations</a> API to prevent animation freezes that occur occasionally:</p>
-
-<pre class="prettyprint">&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated img&quot;), flag = 0, i = 0;
-&nbsp;&nbsp;&nbsp;function animate()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!(i % 6)) obj.src = &#39;./images/sprite_&#39; + ((flag++) % 10) + &#39;.png&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-RequestAnimationFrame(animate);
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;-webkit-RequestAnimationFrame(animate);
-&lt;/script&gt;
-</pre>
-
-    <h4 id="css3" name="css3">CSS3 Animation</h4>
-
-        <p>CSS3 animation has a low usage of events, memory, and network capacity. It is efficient for animations that have a fixed size. However, since CSS3 animation is pixel-based, it is difficult to use for animations that need to be enlarged or reduced, in which case JavaScript is a better option:</p>
-<ul><li>
-Events: Fires only rendering and painting events</li><li>
-Memory: 50 ~ 90 KB</li><li>
-Network: 9 ~ 21 ms</li></ul>
-
-    <p class="figure">Figure: Events for a CSS3 animation</p>
-    <p align="center"><img alt="Events" src="../../images/events3.png"/></p><br/>
-    <p class="figure">Figure: Memory usage of a CSS3 animation</p>
-    <p align="center"><img alt="Memory" src="../../images/memory3.png"/></p><br/>
-    <p class="figure">Figure: Network capacity usage of a CSS3 animation</p>
-    <p align="center"><img alt="Network" src="../../images/network3.png"/></p><br/>
-
-    <p>The following example shows how CSS3 animation can be implemented:</p>
-        <pre class="prettyprint">&lt;style&gt;
-&nbsp;&nbsp;&nbsp;.css_animation
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 70px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(../images/sprite.png);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: cssAni .8s steps(10) infinite;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;@-webkit-keyframes cssAni
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from {background-position: 0px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to {background-position: -500px;}
-&nbsp;&nbsp;&nbsp;}
-&lt;/style&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
deleted file mode 100644
index 8753b68..0000000
--- a/org.tizen.ui.guides/html/web/w3c/selector_w.htm
+++ /dev/null
@@ -1,214 +0,0 @@
-<!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
deleted file mode 100644
index 3908cec..0000000
--- a/org.tizen.ui.guides/html/web/w3c/session_history_w.htm
+++ /dev/null
@@ -1,204 +0,0 @@
-<!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/html/web/w3c/text_module_w.htm b/org.tizen.ui.guides/html/web/w3c/text_module_w.htm
deleted file mode 100755
index bd570e1..0000000
--- a/org.tizen.ui.guides/html/web/w3c/text_module_w.htm
+++ /dev/null
@@ -1,244 +0,0 @@
-<!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>CSS Text Module Level 3: Manipulating Text</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">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">CSS Text Module Level 3 API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">CSS Text Module Level 3 API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Text Module Level 3: Manipulating Text</h1>
-
-<p>You can apply various text effects easily.</p>
-
-<p>The new text features in CSS Text Module Level 3 include:</p>
-<ul>
-
-<li>Text properties
-<p>You can use CSS text properties, such as <span style="font-family: Courier New,Courier,monospace">text-transform</span>, <span style="font-family: Courier New,Courier,monospace">text-align</span>, <span style="font-family: Courier New,Courier,monospace">text-indent</span>, <span style="font-family: Courier New,Courier,monospace">letter-spacing</span>, and <span style="font-family: Courier New,Courier,monospace">word-spacing</span>, to <a href="#text">manipulate and transform text</a>.</p></li>
-</ul> 
-
-<h2 id="text" name="text">Manipulating Text</h2>
-				
-<p>To enhance the user experience of your application, you must learn to handle line breaking, justification, alignment, white space handling, and text transformations using CSS text properties:</p>
-
-<ol>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-transform</span> property within a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the Web page to control the text capitalization:
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-transform: none;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-transform: capitalize;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-transform: uppercase;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-transform: lowercase;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-transform: full-width;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-align</span> property, which controls the text alignment:
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-align: start;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-align: end;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-align: left;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-align: right;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-align: center;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(6) {text-align: justify;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-indent</span> property, which controls the text indentation:
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-indent: 0}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-indent: 1em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-indent: -1em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-indent: 5%}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-indent: -5%}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">letter-spacing</span> property, which controls the letter spacing:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {letter-spacing: .5em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {letter-spacing: -.1em}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">word-spacing</span> property, which controls the space between words:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-spacing: 1em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-spacing: -.1em}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">word-break</span> property, which determines the line breaking rules for non-CJK (Chinese, Japanese, and Korean) scripts:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-break: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-break: keep-all}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {word-break: break-all}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">white-space</span> property, which determines the handling of empty space within an element:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {white-space: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {white-space: pre}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {white-space: nowrap}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {white-space: pre-wrap}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {white-space: pre-line}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-shadow</span> property, which adds a shadow effect to text:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, .7)}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-shadow: -0.2em 0.2em 0.2em #000, 0.2em -0.2em 0.2em #f00}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {color: #fff; text-shadow: 0 0 .7em #000;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {color: #fff; text-shadow: 0 0 1px #f00;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">word-wrap</span> and  <span style="font-family: Courier New,Courier,monospace">overflow-wrap</span> properties, which control forced line breaks when the length of a word is longer than the area where it is displayed:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-wrap: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-wrap: break-word}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {overflow-wrap: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {overflow-wrap: break-word}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-</ol>
-
-
-<p>The following figure shows examples of manipulating the text properties.</p>
-<p class="figure">Figure: Text properties (in mobile applications only)</p>
-<p align="center"><img alt="Text properties (in mobile applications only)" src="../../images/text_properties.png"/></p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">For a complete list of CSS Text Module Level 3 text properties (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/#appendix-h-full-property-index" target="_blank">Property index</a>.</td>
-    </tr>
-   </tbody>
-  </table>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/transform_w.htm b/org.tizen.ui.guides/html/web/w3c/transform_w.htm
deleted file mode 100755
index ecffd0a..0000000
--- a/org.tizen.ui.guides/html/web/w3c/transform_w.htm
+++ /dev/null
@@ -1,772 +0,0 @@
-<!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>CSS Transforms: Manipulating 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="#prop_trans">Transform Properties</a></li>
-			<li><a href="#twod">2D and 3D Transform Functions</a></li>
-			<li><a href="#animation">Creating an Animation with Transforms</a></li>
-			<li><a href="#effect">Creating Fade Animation Effects</a></li>
-			<li><a href="#hw">Using Hardware Acceleration</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#transforms">CSS Transforms API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Transforms: Manipulating Elements</h1>
-
-<p>Transforms allow you to <a href="#animation">modify the coordinate space</a> where each element is positioned. The elements can be translated, rotated, and scaled in 2- or 3-dimensional space. According to the API, the coordinate system is a visual formatting model, and positions and sizes in the coordinate space are expressed in pixels, starting in the origin of point with positive values proceeding to the right and down.</p>
-
-<p>To enhance the rendering performance and user experience, you can <a href="#hw">use hardware acceleration</a> and <a href="#effect">create fade effects</a>.</p>
-
-<p>When using the CSS transform properties, the Tizen browser requires no prefix, the Firefox browser requires the <span style="font-family: Courier New,Courier,monospace">-moz-</span> prefix, the Chrome and Safari browsers require the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix, and the Opera browser requires the <span style="font-family: Courier New,Courier,monospace">-o-</span> prefix.</p>
-
-<h2 name="prop_trans" id="prop_trans">Transform Properties</h2>
-
-<p>You can define various properties to control the elements within the coordinate space:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">transform-origin</span>
-<p>This property changes the location of the transformed element. It can only be used with elements for whom the <span style="font-family: Courier New,Courier,monospace">transform</span> property has been declared.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">transform-style</span>
-<p>This property defines the rendering of the inherited element in the 3D space. Animation property has been added in the example for easier comprehension.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">perspective</span>
-<p>This property changes the perspective of the element being expressed. A 3D transform element must be used together with this property to emphasize the expression of the X axis.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">perspective-origin</span>
-<p>This property defines the location facing the element.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">backface-visibility</span>
-<p>This property defines whether the backface of the transformed element is expressed.</p></li>
-</ul>
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(30deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 30% 30%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective: 220;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animation: trans-ani 10s infinite linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backface-visibility: visible;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Chrome and Safari browsers */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(30deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-origin: 30% 30%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-perspective: 220;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: trans-ani 10s infinite linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-backface-visibility: visible;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box.case01 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-style: preserve-3d;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective-origin: 30% 30%;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Chrome and Safari browsers */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-style: preserve-3d;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-perspective-origin: 30% 30%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;transform-origin&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform-origin: 30% 30%;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box case01&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;box&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-<p>In addition to transform properties, you can also use various <a href="#twod">2D and 3D transform functions</a>.</p>
-
- <h2 id="twod" name="twod">2D and 3D Transform Functions</h2>
-
-<p>The CSS Transforms API supports various transform functions in 2D and 3D.</p>
-
-<p>In 2D transforms, all transform functions are expressed based on a matrix. The X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span>, <span style="font-family: Courier New,Courier,monospace">scale()</span>, and <span style="font-family: Courier New,Courier,monospace">skew()</span> functions can be expressed in individual functions. For example, the X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span> function can be expressed with the <span style="font-family: Courier New,Courier,monospace">translateX(number)</span> and <span style="font-family: Courier New,Courier,monospace">translateY(number)</span> functions.</p>
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate(30px, 30px);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate(30px, 30px);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(1.2, 1.2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale(1.2, 1.2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(45deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(45deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-skew 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: skew(20deg, 20deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: skew(20deg, 20deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;2d transform&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;h2&gt;translate&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box no-transform&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Original&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box transformed box-translate&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform: translate(30px, 30px);&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-<p>In 3D transforms, the Z axis has been added (for example, <span style="font-family: Courier New,Courier,monospace">translateZ(number)</span> and <span style="font-family: Courier New,Courier,monospace">scale3dZ(number)</span>). When handling 3D transforms, pay attention to the following:</p>
-<ul>
-<li>If a transform function is used together with the <span style="font-family: Courier New,Courier,monospace">perspective</span> property, the z axis is emphasized.</li>
-<li>The X, Y, and Z values of the <span style="font-family: Courier New,Courier,monospace">translate3d()</span>, <span style="font-family: Courier New,Courier,monospace">scale3d()</span>, and <span style="font-family: Courier New,Courier,monospace">rotate3d()</span> functions can be expressed in individual functions.</li>
-<li>In the <span style="font-family: Courier New,Courier,monospace">rotate3d(number, number, number, angle)</span> function, the element rotates according to the assigned parameter (angle) with the X, Y, and Z directional vectors as the center. Each vector can be expressed as an individual function: for example, the <span style="font-family: Courier New,Courier,monospace">rotateX(&lt;angle&gt;)</span> and <span style="font-family: Courier New,Courier,monospace">rotate3d(1, 0, 0, &lt;angle&gt;)</span> functions perform the same task.</li>
-</ul> 
-<p>The following code snippet demonstrates how to implement a 3D transform. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">3d_transform.html</a>.</p>
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.first-transform {opacity: .5; background: #3399cc;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.transformed {opacity: .8;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* translate3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate3d: hover .first-transform 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate3d: hover .transformed 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(15px, 15px, 60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(15px, 15px, 60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* scale3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale3d: hover .first-transform 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale3d(1, 1, 1) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale3d(1, 1, 1) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale3d: hover .transformed 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* rotate3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate3d: hover .first-transform 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate3d(-1, -1, -1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate3d(-1, -1, -1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate3d: hover .transformed 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate3d(1, 1, 1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate3d(1, 1, 1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* matrix3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix3d: hover .first-transform 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix3d: hover .transformed 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;3D transform&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;h2&gt;&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;First box value:&lt;/strong&gt; transform: translate3d(-5px, -5px, -60px) rotateY(70deg);&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;Second box value:&lt;/strong&gt; transform: translate3d(15px, 15px, 60px) rotateY(70deg);&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea box-translate3d&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box first-transform&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;First box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box transformed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Second Box&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mouse over or tab here to animate
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-
-<h2 id="animation" name="animation">Creating an Animation with Transforms</h2>
-
-<p>To enhance the user experience of your application, you must learn to use transforms with animations. This example uses the animation from the <a href="animation_w.htm#create">Creating a Logo Animation</a> use case as a basis, and adds a more diverse visual effect to it with the <span style="font-family: Courier New,Courier,monospace">transform</span> property. In the modified animation:</p>
-
-<ul>
-<li>As in the original animation, no elements are initially shown on the screen.</li>
-<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the logo is made to rotate.</li> 
-<li>Each letter in the word &quot;TIZEN&quot; consecutively comes in from the left of the screen and moves to the right to its correct location. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the letters are translated in the 3D space and rotated around the Y axis.</li>
-</ul>
-
-<p class="figure">Figure: Tizen logo to be transformed</p> 
-<p align="center"><img alt="Tizen logo to be transformed" src="../../images/css_transforms1.png" /></p>
-
-
-<ol>
-<li>Create the HTML layout to control the movement of each individual animation element:
-<pre class="prettyprint">
-&lt;div class=&quot;animation-holder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt t&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt i&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt z&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt e&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt n&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt tm&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-logo&quot;&gt;&lt;/span&gt;
-&lt;/div&gt;
-</pre>
-</li>
-<li>Define the basic style of the animation elements. Add the <span style="font-family: Courier New,Courier,monospace">perspective</span> property to increase the Z axis effect of the 3D transform.
-<pre class="prettyprint">
-.animation-holder 
-{
-&nbsp;&nbsp;&nbsp;-webkit-perspective: 1000px;
-&nbsp;&nbsp;&nbsp;height: 88px;
-&nbsp;&nbsp;&nbsp;left: 50%;
-&nbsp;&nbsp;&nbsp;margin: -54px 0px 0px -140px;
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;width: 280px;
-}
-.tizen-txt,
-.tizen-logo 
-{
-&nbsp;&nbsp;&nbsp;background-position: 50% 50%;
-&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;position: absolute;
-}
-.tizen-txt.t 
-{
-&nbsp;&nbsp;&nbsp;background-image: url(&quot;images/txt_t.png&quot;);
-&nbsp;&nbsp;&nbsp;height: 56px;
-&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;top: 31px;
-&nbsp;&nbsp;&nbsp;width: 48px;
-}
-</pre>
-</li>
-<li>Create the animation:
-<ol type="a">
-<li>
-<p>Assign keyframes for the logo element to transform it. In order to rotate the logo, use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: rotate()</span> function, which defines the angle of the rotation.  
-</p>
-<pre class="prettyprint">
-@-webkit-keyframes tizen-logo 
-{
-&nbsp;&nbsp;&nbsp;0% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: ease-in;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 211px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 30px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -61px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(0deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 220px;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;30% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: ease-out;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 211px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 30px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -61px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(720deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 220px;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;50% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 247px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(1440deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 33px;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;100% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 247px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(1440deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 33px;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">For a rotation, the image has to be carefully created to ensure the correct end result. The rotation occurs with the center of the element as the center. If the rotation center must be moved because the image center is not aligned, use the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property to adjust the rotation location.</td> 
-      </tr> 
-     </tbody> 
-    </table></li>
-<li>Create the keyframes for the first letter in the word &quot;TIZEN&quot;. In the animation, due to the <span style="font-family: Courier New,Courier,monospace">translate3d()</span> and <span style="font-family: Courier New,Courier,monospace">rotateY()</span> methods, each letter transforms slightly from the right to the left as it comes in.
-
-<p align="center"><img alt="Animation" src="../../images/css_transforms2.png" /></p>
-
-<pre class="prettyprint">
-@-webkit-keyframes tizen-txt-t 
-{
-&nbsp;&nbsp;&nbsp;0% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;30% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;35% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;100% {}
-}
-</pre></li>
-<li>To emphasize the fact that the letters are being created on the right, change the location of the transform. If the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property is declared for the entire animation element, the logo rotation changes. Consequently, you must only declared it for the letters.
-<pre class="prettyprint">
-.tizen-txt 
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform-origin: 100% 50%;
-}
-</pre></li>
-
-<li><p>Create the keyframes for the other letters similarly:</p>
-<pre class="prettyprint">
-@-webkit-keyframes tizen-txt-i 
-{
-&nbsp;&nbsp;&nbsp;0% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;32% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;37% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translateX(0) rotateY(0deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp; 100% {}
-}
-</pre></li></ol>
-
-</li>
-</ol>
-
-<p>The following figure shows the full Tizen logo animation with the <span style="font-family: Courier New,Courier,monospace">transform</span> properties.</p>
-<p class="figure">Figure: Full Tizen logo animation</p> 
-<p align="center"><img alt="Full Tizen logo animation" src="../../images/css_transforms5.png" /></p>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">transform_practical.html</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">logo_tizen.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_e.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_i.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_n.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_t.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_tm.png</a></li>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_z.png</a></li>
- </ul>
-			
-				<h2 id="effect" name="effect">Creating Fade Animation Effects</h2>
-				
-				
-			<p>To enhance the user experience of your application, you must learn to use fade animation effects.</p>
-<p>The modal layer pop-up can be used to, for example, show enlarged thumbnail images or notice messages. The modal layer pop-up has the following basic properties:</p>
-<ul>
-<li>If an event is fired, it gradually becomes visible. This is known as the Fade In effect.</li>
-<li>The existing background is covered with a translucent layer to make the user focus on the pop-up.</li> 
-<li>When the pop-up is closed, it gradually becomes transparent. This is known as the Fade Out effect.</li>
-</ul>
-
-<p class="figure">Figure: Fade effect</p> 
-<p align="center"><img alt="Fade effect" src="../../images/fade_affect_animation.png" /></p>
-
-<p>You can control UI events and change the DOM elements in the following ways:</p>
-<ul>
-<li>Events can be controlled with JavaScript, and DOM elements can be devised with CSS.</li>
-<li>You can use JavaScript frameworks, such as jQuery, Prototype, and Dojo.</li> 
-</ul>
-
-<p>To create fade effects:</p>
-
-<ul>
-<li>Create a modal layer pop-up using jQuery:
-
-<pre class="prettyprint">
-(function($) 
-{
-&nbsp;&nbsp;&nbsp;function showModalPopup(url) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).append(&#39;&lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;&#39;); /* Mask in body appended */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).css({&#39;height&#39;: $(window).height()}); /* Mask area set */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Target layer position set */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(url).css(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;top&#39;: ($(window).height()/2 + $(document).scrollTop() - $(url).height()/2) + &#39;px&#39;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;left&#39;: ($(window).width()/2 + $(document).scrollLeft() - $(url).width()/2) + &#39;px&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Fade effect */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).fadeTo(&#39;slow&#39;, 0.7);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(url).fadeTo(&#39;slow&#39;, 1);
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;$(&#39;.layerpopupActive a&#39;).on(&#39;click&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var targetUrl = $(this).attr(&#39;href&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showModalPopup(targetUrl);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;});
-  
-&nbsp;&nbsp;&nbsp;/* End processing - Fade Out effect */
-    
-&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).on(&#39;click&#39;, function(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.target.className === &#39;mask&#39;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.layerpop&#39;).fadeOut();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).fadeOut(400, function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).remove();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;});
-})(jQuery);</pre>
-
-<p>If the animation effect is created by using JavaScript, the browser executes the following tasks:</p>
-<ol>
-	<li>A structure layer is created and added to the document. This is a CPU task.</li>
-	<li>The added layer is painted as a default value. This is a GPU task.</li>
-	<li>The layer is painted once again according to the change of value. This is a CPU operation.</li>
-</ol>
-
-<p>Steps a and c incur CPU tasks, which affect performance the most.</p>  
-<p>In case of step a, only 2 layers are created, but as the number of layers created increases, the efficiency of page rendering work drops. In case of step c as well, the more steps it undergoes, the slower the rendering becomes.</p>  
-<p>In certain browsers, even if the style of just 1 layer is changed, the entire document is repainted. As the repainting takes only a moment, any animation effects that are supposed to happen cannot be executed in such a short time. This issue occurs frequently in Android&trade; with severe fragmentation.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If a new layer is created in Android 4.0X version, and if the fade effect is used, it only shows the initial value and the result value of the layer style.</td> 
-      </tr> 
-     </tbody> 
-</table>
-
-<p>To avoid such a situation to the maximum possible extent, CPU tasks must be reduced to the minimum, and it is better to use transition or animation that uses the internal timer of the browser.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">In case of using 3D effects, <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translateZ(0);</span> can be used to accelerate the hardware. However, since hardware acceleration support varies between the OS and devices, the actual resulting effects can vary too. Moreover, in the case of version Android&trade; 2.1, iOS&trade;3.X and below, note that transition and animation may not be realized.</td> 
-      </tr> 
-     </tbody> 
-</table>
-</li>
-<li>Create a modal layer pop-up using CSS3:
-<pre class="prettyprint">
-&lt;!--CSS--&gt;
-.mask 
-{
-&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;z-index: -1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 400ms ease-in-out;
-}
-
-.mask.active 
-{
-&nbsp;&nbsp;&nbsp;opacity: .7;
-&nbsp;&nbsp;&nbsp;z-index: 498;
-}
-
-&lt;!--Layer pop-up public styles--&gt;
-.layerpop 
-{
-&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;z-index: -1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 300ms ease-in-out;
-}
-
-.layerpop.active 
-{
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;z-index: 499;
-}
-/* JavaScript */
-function showModalPopup(url) 
-{
-&nbsp;&nbsp;&nbsp;url.className += &#39;active&#39;;
-}</pre>
-</li>
-</ul>
-<h3>Performance Differences</h3>
-
-<p>There can be a difference in performance depending on how the modal layer pop-up is used.</p>
-<p>The following figures illustrate the difference in event performance, when using JavaScript and CSS3.</p>
-<p class="figure">Figure: Event performance using JavaScript</p> 
-<p align="center"><img alt="Events using JavaScript" src="../../images/events_using_javascript.png" /></p>
-
-<p class="figure">Figure: Event performance using CSS3</p> 
-<p align="center"><img alt="Events using CSS3" src="../../images/events_using_css3.png" /></p>
-
-<p>The following figures illustrate the difference in memory performance, when using JavaScript and CSS3.</p>
-<p class="figure">Figure: Memory performance using JavaScript</p> 
-<p align="center"><img alt="Memory when using JavaScript" src="../../images/memory_using_javascript.png" /></p>
-
-<p class="figure">Figure: Memory performance using CSS3</p> 
-<p align="center"><img alt="Memory when using CSS3" src="../../images/memory_using_css3.png" /></p>
-
-<p>When the styles are applied using JavaScript, the UI thread is used to create the pop-up. The UI thread increases the usage of CPU memory in proportion to the number of pop-ups used.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Tizen provides remote debugging through the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">JavaScript Debugger tool</a>.</td> 
-      </tr> 
-     </tbody> 
-</table>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note"><p>If CSS is used, the handling of JavaScript events and UI DOM operations becomes unnecessary, so the load of the UI thread decreases, and the usage of CPU memory decreases as well. However, CSS3 transitions cannot be applied to versions below Android&trade; 2.3 and for versions above iOS&trade; 4.3, which are still widely used, so attention is needed when distributing it to various devices.</p></td> 
-      </tr> 
-     </tbody> 
-</table>  
-			
-				<h2 id="hw" name="hw">Using Hardware Acceleration</h2>
-				
-			<p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
- <p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
- 
- <h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
- <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>
-<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
- <p class="figure">Figure: Blue box</p> 
- <p align="center"><img alt="Blue box" src="../../images/blue_box.png" /></p> 
-
- <ul>
- <li>Use CPU painting:
- <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
- <ol>
-	<li>Construct the blue box and set its position on the screen:
-	<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;</pre>
-</li>
-<li>
-<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method:</p>
-		<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var delta = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function process ()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.left = delta + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.top = delta + 50 + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta += 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (delta &lt;= 200)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {process();}, 16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre></li></ol></li>
-	<li>Use CSS transition:
-	<p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
-		<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate(200px, 200px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-</li>
-		<li>Use 3D transform:
-		<p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
-		<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate3d(200px, 200px, 0px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;p&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-</li>
-	</ul>
- <h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
- <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
- <pre class="prettyprint">#scroll_area 
-{
-&nbsp;&nbsp;&nbsp;overflow: scroll;
-&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;
-}</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/transition_w.htm b/org.tizen.ui.guides/html/web/w3c/transition_w.htm
deleted file mode 100755
index c21bc1e..0000000
--- a/org.tizen.ui.guides/html/web/w3c/transition_w.htm
+++ /dev/null
@@ -1,382 +0,0 @@
-<!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>CSS Transitions Module Level 3: Changing Element Styles</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="#prop">Transition Properties</a></li>
-			<li><a href="#modify">Modifying Element Properties</a></li>
-			<li><a href="#hw">Using Hardware Acceleration</a>
-			</li>
-		</ul>
-		<p class="toc-title">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transitions">CSS Transitions Module Level 3 API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transitions">CSS Transitions Module Level 3 API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Transitions Module Level 3: Changing Element Styles</h1>
-
-<p>Transitions allow you to <a href="#modify">enable implicit transitions</a>, which describe how the CSS properties can be made to change smoothly from one value to another over a given duration. To enhance the rendering performance, you can <a href="#hw">use hardware acceleration</a>.</p>
-
-<p>When using the CSS transition properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>
-
-<h2 name="prop" id="prop">Transition Properties</h2> 
- 
-<p>You can define various properties to control the element transitions:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">transition-property</span>
-<p>This property defines the element property that is changed during the transition. In the following code snippet, both the width and height of the element change when the mouse hovers over it, but the transition effect is applied to the width property only.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">transition-duration</span>
-<p>This property defines the duration of the transition. You must define as many instances of the property as you have elements in the <span style="font-family: Courier New,Courier,monospace">transition-property</span> property.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">transition-timing-function</span>
-<p>This property defines the pace of the transition. The value of the property is defined as a stepping function or a cubic Bézier curve. The <span style="font-family: Courier New,Courier,monospace">ease</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0.25, 0.1, 0.25, 1)</span>, and the <span style="font-family: Courier New,Courier,monospace">linear</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0, 0, 1, 1)</span>.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">transition-delay</span>
-<p>This property defines the delay time before the start of the transition.</p></li>
-
-</ul>
-
-<p>The following code snippet demonstrates how to use transition properties. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_property.html</a>.</p>
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body{font-size: 12px}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-property: width;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 2s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: ease;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-delay: 0.5s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box: hover 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 300px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: CornflowerBlue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;CSS transitions tutorial&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Mouse over or tap here to animate&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transition-property: width, height, background&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&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">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped. </td> 
-      </tr> 
-     </tbody> 
-    </table>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property allows you to define all the transition properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">transition-property</span> | <span style="font-family: Courier New,Courier,monospace">transition-duration</span> | <span style="font-family: Courier New,Courier,monospace">transition-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">transition-delay</span>. If you omit a property value, a default value is used instead.</p>
-
-<pre class="prettyprint">
-&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;.box 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition: width 1s ease 1s;
-&nbsp;&nbsp;&nbsp;}
-&lt;/style&gt;
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property connects movement more naturally than the more generally used the pseudo classes, such as <span style="font-family: Courier New,Courier,monospace">:hover</span> or <span style="font-family: Courier New,Courier,monospace">:active</span>. The smooth effect can be achieved more conveniently and easily with the <span style="font-family: Courier New,Courier,monospace">transition</span> property than with JavaScript or Flash, and the <span style="font-family: Courier New,Courier,monospace">transition</span> property also supports the browser side to provide excellent performance.</p>
-
-
-<h2 id="modify" name="modify">Modifying Element Properties</h2>
-				
-<p>To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the <span style="font-family: Courier New,Courier,monospace">http://tizen.org</span> Web site, where the current &quot;UPCOMING EVENTS&quot; area only has the <span style="font-family: Courier New,Courier,monospace">text-decoration: underline</span> property in a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <span style="font-family: Courier New,Courier,monospace">transitions</span> properties in this area.</p>
-
-
-<p class="figure">Figure: Tizen site section to be transitioned</p> 
-<p align="center"><img alt="Tizen site section to be transitioned" src="../../images/transitions1.png" /></p>
-
-  
-<ol><li><p>Add a background color change to the &quot;UPCOMING EVENTS&quot; area during a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state:</p>
-
-<ol type="a"><li><p>Originally, the area on the site is defined as follows:</p>
-
-<pre class="prettyprint">
-&lt;h2 class=&quot;block-title&quot;&gt;Upcoming Events&lt;/h2&gt;
-</pre>
-
-
-<p>Additionally, a <span style="font-family: Courier New,Courier,monospace">transition</span> property is declared in the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:</p>
-
-<pre class="prettyprint">
-.block-title 
-{
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 2s ease;
-}
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">all</span> value in the transition property means that the transition effect applies to all CSS properties of the element.</p>
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">mouseover</span> state for the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:
-
-<pre class="prettyprint">
-.block-title: hover {background: #eaeaea;}
-</pre>
-
-<p>Due to the CSS characteristics, adding a class through an event allows immediate rendering in the screen.</p></li></ol>
-
-<p>When the mouse is moved over the &quot;UPCOMING EVENTS&quot; area, the background color changes.</p>
-
-<p align="center"><img alt="Background color change" src="../../images/transitions2.png" /></p> </li>
-
-<li>
-
-<p>Apply the transition effect in other elements:</p>
-
-<ol type="a"><li>To avoid unnecessary repetition, tie a list of <span style="font-family: Courier New,Courier,monospace">transition</span> elements together into groups <span style="font-family: Courier New,Courier,monospace">a</span> and <span style="font-family: Courier New,Courier,monospace">span</span>:
-
-<pre class="prettyprint">
-.location, .date, .location .anibg, h3 &gt; a, .day &gt; span 
-{
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;
-}
-</pre></li>
-
-<li><p>When the mouse hovers over the date element, change the background of the date and the font size of all the elements tied into the <span style="font-family: Courier New,Courier,monospace">span</span> group. When the mouse hovers over the title element, change the color of all elements tied into the <span style="font-family: Courier New,Courier,monospace">a</span> group.</p>
-<pre class="prettyprint">
-.date: hover {background: #d2ecff !important;}
-.date: hover .day &gt; span {font-size: 1.9em;}
-
-.event-info: hover h3 &gt; a {color: #ec4986;}
-</pre></li></ol>
-
-<p align="center"><img alt="Before mouseover" src="../../images/transitions3.png" />
-</p> </li>
-<li>
-
-<p>Emphasize the location phrase by adding an empty element. The emphasis is made by filling the background with black from left to right, and changing the font color to an appropriate value for the black background.</p>
-<ol type="a">
-<li><p>Add the empty element:</p>
-
-<pre class="prettyprint">
-&lt;div class=&quot;location&quot;&gt;San Francisco, CA&lt;span class=&quot;anibg&quot;&gt;&lt;/span&gt;&lt;/div&gt;
-</pre></li>
-<li><p>Create the effect using the width value of the added element:</p>
-<pre class="prettyprint">
-.location {position: relative; z-index: 3; margin-top: 3px;}
-.location .anibg 
-{
-&nbsp;&nbsp;&nbsp;position: absolute; 
-&nbsp;&nbsp;&nbsp;left: -3px; top: 0; 
-&nbsp;&nbsp;&nbsp;display: block; 
-&nbsp;&nbsp;&nbsp;width: 0; height: 100%; 
-&nbsp;&nbsp;&nbsp;background: #000; 
-&nbsp;&nbsp;&nbsp;z-index: -1;
-}
-</pre>
-
-<p>The effect is defined by using the <span style="font-family: Courier New,Courier,monospace">position</span> property. The location element position is declared <span style="font-family: Courier New,Courier,monospace">relative</span>, while the <span style="font-family: Courier New,Courier,monospace">anibg</span> child element position is declared as <span style="font-family: Courier New,Courier,monospace">absolute</span>. The width of the child element basic state is set as 0. Since the child element layer covers the location text, the child element has been defined to come out from the back of the text in the <span style="font-family: Courier New,Courier,monospace">z-index</span> value of the child.</p></li>
-<li><p>Define the state to be changed:</p>
-<pre class="prettyprint">
-.location, .date, .location .anibg, h3 &gt; a, .day &gt; span 
-{
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;
-}
-
-.event-info: hover .location {color: #fff;}
-.event-info: hover .location .anibg {width: 100%; color: #fff;}
-</pre>
-
-<p>The transition takes place when the property in question is at the front on the screen. The <span style="font-family: Courier New,Courier,monospace">event-info</span> class is used as the subject for the change, and it has been defined so that  the transition occurs simultaneously in the <span style="font-family: Courier New,Courier,monospace">.location</span> and <span style="font-family: Courier New,Courier,monospace">.anibg</span> elements when the mouse hovers over any of the elements tied together as group <span style="font-family: Courier New,Courier,monospace">a</span>.
-</p></li>
-
- </ol><p align="center"><img alt="Location phrase emphasis" src="../../images/transitions5.png" /></p>
-</li></ol>
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_practical.html</a></li>
- </ul>  
-		
-				<h2 id="hw" name="hw">Using Hardware Acceleration</h2>
-				
-			<p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
- <p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
- 
- <h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
- <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>
-<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
- <p class="figure">Figure: Blue box</p> 
- <p align="center"><img alt="Blue box" src="../../images/blue_box.png" /></p> 
-
- <ul>
- <li>Use CPU painting:
- <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
- <ol>
-	<li>Construct the blue box and set its position on the screen:
-	<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;</pre>
-</li>
-<li>
-<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method:</p>
-		<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var delta = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function process ()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.left = delta + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.top = delta + 50 + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta += 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (delta &lt;= 200)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {process();}, 16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre></li></ol></li>
-	<li>Use CSS transition:
-	<p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
-		<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate(200px, 200px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-</li>
-		<li>Use 3D transform:
-		<p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
-		<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate3d(200px, 200px, 0px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;p&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-</li>
-	</ul>
- <h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
- <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
- <pre class="prettyprint">#scroll_area 
-{
-&nbsp;&nbsp;&nbsp;overflow: scroll;
-&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;
-}</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/ui_layout_ww.htm b/org.tizen.ui.guides/html/web/w3c/ui_layout_ww.htm
deleted file mode 100755
index afecdf8..0000000
--- a/org.tizen.ui.guides/html/web/w3c/ui_layout_ww.htm
+++ /dev/null
@@ -1,715 +0,0 @@
-<!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>Multiple UI Layouts: Designing Applications for Multiple Devices</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-	<div id="profile">
-		<p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-	</div>
-	
-	<div id="toc_border"><div id="toc">
-		<p class="toc-title">Content</p>
-		<ul class="toc">
-			<li><a href="#single">Single Layout for Multiple Devices</a></li>
-			<li><a href="#multiple">Multiple Layouts for Multiple Devices</a></li>
-		</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
- <h1>Multiple UI Layouts: Designing Applications for Multiple Devices</h1>
- 
-  <p>To ensure the largest possible market for your application, you have to design your application layout so that your application can run on multiple Tizen devices.</p>
-
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-  
-<p>Although the Web was originally designed to structure documents for large-scaled Internet world, with CSS (Cascading Style Sheet), JavaScript, and various device APIs, it is quickly evolving to a complete runtime environment for applications. In addition, its W3C open development model and the flexibility of its CSS-based presentation make it every developer&#39;s choice as the next development platform. CSS is the key technology for flexible presentation, and it is used to describe the look and formatting of HTML documents. The role of CSS is to determine how the logical structure of the document is displayed to the user.</p>
-
-<p>The Tizen Web engine provides the basic mechanisms for fitting the application content to the target screen. However, to ensure that the application runs well on multiple devices, you must understand those mechanisms in detail. In general, select a relative layout rather than a fixed layout, because a relative layout helps to maintain usability even when the application runs on unexpected devices. To enhance usability even further, use different layouts for each device category.</p>
-
-<p>Using some CSS techniques and Tizen Web engine mechanisms, you can design your application UI layout so that it displays properly on multiple devices:</p>
-<ul><li>You can use a <a href="#single">single layout</a> and take advantage of the auto-fitting mechanism of the Tizen Web engine to ensure that a single layout covers multiple devices.</li>
-<li>You can use <a href="#multiple">multiple layouts</a> to define a separate optimal layout for each device category.</li></ul>
-
- <h2 id="single" name="single">Single Layout for Multiple Devices</h2> 
-  <p>A typical application developer designs an optimized UI for a target device with a fixed layout and high-quality resources. This approach usually results in a nice look for the end user, but can sometimes result in an ugly layout, which makes the application unusable. And this unfortunate result can occur merely due to a change in the device form factor.</p>
-<p>Since the presentation and business logic are strictly separated in a Web application, it handles the device form factor change better than native applications. One single layout, taking advantage of Web technology, can ensure usability even on multiple devices with different form factors.</p>
-
-<p>To design applications with a single layout, you must consider the following issues:</p> 
-
-  <ul> 
-   <li><a href="#viewport">Viewport and other meta tags</a></li> 
-   <li><a href="#relative">Relative layout</a></li> 
-   <li><a href="#header_footer">Header and footer position</a></li> 
-   <li><a href="#flexible">Flexible media</a></li> </ul>
-   
-   <p>For a complete application layout that considers all the above issues, see <a href="#single_example">Single Layout Example</a>.</p>
-   
-  <h3 id="viewport" name="viewport">Viewport and Other Meta Tags</h3>   
-   
-<p>The viewport is a screen area that the Web engine displays in the UI and, in the Web world, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is used to inform the Web engine that this content is written for a specific form factor, such as device width. The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag was introduced by Apple to fill the screen resolution gap between initial Smartphone (for example, 320 px) and PC (for example, 980 px). Basically, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag helps the Web engine to determine the scale factor for the content on the current device.</p>
-
-<p>To use the tag in an HTML file, set its name and content:</p>
-<pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;XXX&quot;&gt;
-</pre> 
-
-<p>As shown in the following code snippet, use the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag to tell the Web engine which device width is targeted by the application. The Web engine can estimate the scale factor based on the target content size and the real screen width. For example, usually almost all wearable applications have the following <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, which sets the viewport width to the appropriate size based on each device:</p>
-<pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
-</pre> 
-
-<p>If you want to set your content layout to the target width of 320 px on every wearable device, use the following meta tag:</p>
-<pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=320&quot;&gt;
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag has other properties, such as <span style="font-family: Courier New,Courier,monospace">height</span>, <span style="font-family: Courier New,Courier,monospace">initial-scale</span>, <span style="font-family: Courier New,Courier,monospace">minimum-scale</span>, <span style="font-family: Courier New,Courier,monospace">maximum-scale</span>, and <span style="font-family: Courier New,Courier,monospace">user-scalable</span>. However, do not use those properties unless you understand their exact meaning. Wrong values can cause the Web engine to incorrectly fit the application content to the current device.</p>
-
-<h3 id="relative" name="relative">Relative Layout</h3>
-
-<p>The relative layout concept means that the element size of all content is set as a relative unit (such as percentage), and not as absolute values (such as pixels or points). In responsive Web design, this concept is also known as <strong>fluid grid</strong> (for more information, search for <strong>responsive web design</strong> in your Web browser). To achieve a layout that works on multiple devices, you only need to know about relative layout, not all the other concepts of responsive Web design.</p>
-<p>To implementing a relative layout, you only have to set the width and height of each element as a percentage, as shown in the following example and figure. In the example, the width and height of the <span style="font-family: Courier New,Courier,monospace;">number_pad</span> element is set to 100% and 70%, not 320 px and 224 px. </p>
-
-<p class="figure">Figure: 320x320 calculator</p> 
-<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 100%; height: 70%;}</span></p>
-<p align="center"><img alt="320x320 calculator" src="../../images/layout_calculator.png"/></p> 
-
-<p>An application with this relative layout is auto-fitted when it runs on an unexpected device, such as the device with a 360x480 resolution shown in the following figure. Even though this adjusted layout may not be as good as the original, it is good enough, since it shows a usable application UI.</p>
- 
-
-<p class="figure">Figure: 360x480 calculator with a relative layout</p>  
-	<p align="center"><img alt="360x480 calculator with a relative layout" src="../../images/layout_calculator_relative.png"/></p> 
-
-<p>The following figure shows what happens if you use an absolute 320x320 layout. The presentation is definitely ugly (with an empty white space at the bottom) and usability reduced, although the calculation logic itself still works.</p>
-<p class="figure">Figure: 360x480 calculator with an absolute 320x320 layout</p>
-<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 320px; height: 224px;}</span></p> 
- 
-  
-	<p align="center"><img alt="360x480 calculator with an absolute 320x320 layout" src="../../images/layout_calculator_absolute.png"/></p> 
-
-<h3 id="header_footer" name="header_footer">Header and Footer Position</h3>
-
-<p>While the content layout itself becomes the application UI layout on a Web page, a typical wearable application layout consists of a header area, content area, and footer area. With this trend, many wearable Web applications are designed by separating the 3 areas explicitly.</p>
-<p class="figure">Figure: Typical wearable Web application layout</p>  
-<p align="center"><img alt="Typical wearable Web application layout" src="../../images/layout_app.png"/></p> 
-
-<p>Not setting the place of the header and footer areas clearly can easily cause problems for your layout. In case of the header, the side-effect is relatively small. However, a wrongly defined footer area can be quite visible and lead to poor usability. The following figure shows the original layout of a pedometer application that consists of a header, content, and footer, with a Stop button set in the footer area. </p>
-<p class="figure">Figure: 320x320 sample Web application</p>  
-<p align="center"><img alt="320x320 sample Web application" src="../../images/layout_sample.png"/></p> 
-
-<p>In this case, if the position of the footer is not defined explicitly or if the position and bottom properties do not have proper values, an ugly layout can be displayed on an unexpected device, such as the 360x480 screen shown in the following figure. </p> 
-<p class="figure">Figure: Layout on 360x480</p>  
-<p align="center"><img alt="Layout on 360x480" src="../../images/layout_sample_ugly.png"/></p> 
-
-<p>To make the layout correct, define the position property as fixed and set the bottom property explicitly as 0 px:</p> 
-
-<pre class="prettyprint">
-.footer {position: fixed; bottom: 0px;}
-</pre>
- 
-<p>The following figure shows the same Web application running on the unexpected device after the footer properties are defined properly. With the correct values, the Web application is usable even on a new target, not planned during the development phase. Note that if a <a href="#relative">relative layout</a> is also applied to the content area, the result is an even better layout and further improved usability.</p>
-<p class="figure">Figure: Usable layout on 360x480</p>  
-<p align="center"><img alt="Usable layout on 360x480" src="../../images/layout_sample_ok.png"/></p> 
-
-<h3 id="flexible" name="flexible">Flexible Media</h3>
-	
-<p>One of key elements used in the content area is a media element, including image and video. As all other elements, the media elements also must be placed within a relative layout to allow the application flexibly handle resolution changes. When such relative sizing is applied to a media element, it is called <strong>flexible media</strong> in responsive Web design. </p>
-<p>The main issue when making a media element size relative is to ensure that the usable ratio does not change. The following figure shows a video element that works on both 320x320 and 360x480 resolutions, even though the aspect ratio of the screen is changed and scaled up. Basically, when handling media elements, you want to keep the size or ratio of the element the same as in the initially targeted device, even when displayed using a different resolution and aspect ratio. To achieve this, set the width and height properties of the media element with percentage and the auto keyword.</p>
-
-<p class="figure">Figure: Flexible media on 320x320 and 360x480</p> 
-<p><span style="font-family: Courier New,Courier,monospace;">.video iframe {width: 100%; height: auto;}</span></p>
-<p align="center"><img alt="Flexible media on 320x320 and 360x480" src="../../images/layout_flexible_media.png"/></p> 
-
- 
- <p>The following figure shows an example of wrong usage, where usability decreases as the video element is simply scaled up based on the aspect ratio change. If you set the video element size using a fixed size like this, you get no benefit from the increased resolution, and the layout on the whole screen becomes inharmonious, decreasing usability.</p>
-
-
-<p class="figure">Figure: Fixed size media element</p> 
-<p><span style="font-family: Courier New,Courier,monospace;"> .video iframe {width: 320px; height: 240px;} </span></p>
-<p align="center"><img alt="Fixed size media element" src="../../images/layout_fixed_media.png"/></p> 
-
-<h3 id="single_example" name="single_example">Single Layout Example</h3>
-	
-	<p>This section illustrates a complete application layout that takes advantage of the issues discussed in previous sections. In particular, it shows how to set the viewport properly to help the Web engine scaling mechanism and how to create a CSS-based layout.</p>
-	
-	
-<p>First of all, set the targeted size of the content area as 320 px in the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, and disable the <span style="font-family: Courier New,Courier,monospace">user-scalable</span> property, as shown in the following code snippet.</p>
-
-<pre class="prettyprint">
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;                                             
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=320px, user-scalable=no&quot; /&gt;                                                 
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;                                                                                                           
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile left&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box1&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;            
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile right&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box2&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile left&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box3&quot; class=&quot;box&quot;&gt;&lt;/div&gt;                                                                       
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile right&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box4&quot; class=&quot;box&quot;&gt;&lt;/div&gt;                                                                       
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/main&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt; 
-&lt;/html&gt;
-</pre>
-
-<p>In the above HTML code, the content area consists of 4 <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> box elements, and their UI layout is described in the <span style="font-family: Courier New,Courier,monospace">style.css</span> file. The following CSS code programs the layout and the specific box element styles that were defined in the HTML file.</p> 
-<p>The code snippet shows that the content size is set to be same as the viewport size. Each box is filled with a different color and placed so that it fills a quarter of the content area. Because each box size is defined with the width and height of 100%, the relative size of each box element remains the same even if the viewport size changes.</p>
-
-<pre class="prettyprint">
-&lt;!--Default, used for all--&gt;
-* {box-sizing: border-box;}
-body, div, h1 {margin: 0px; padding: 0px;}
-html, body {width: 100%; height: 100%; overflow-x: hidden;}
-
-#box1 {background-color: rgb(255, 255, 141);}
-#box2 {background-color: rgb(165, 241, 238);}
-#box3 {background-color: rgb(248, 179, 179);}
-#box4 {background-color: rgb(192, 161, 246);}
-.tile 
-{
-&nbsp;&nbsp;&nbsp;width: 50%;
-&nbsp;&nbsp;&nbsp;height: 50%;
-&nbsp;&nbsp;&nbsp;float: left;
-}
-.left {padding: 10px 5px 5px 10px;}
-.right {padding: 10px 10px 5px 5px;}
-
-.box 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-}
-</pre>
-
-
-<p>The following figure shows a final view when the 320 px is set as a target device in the HTML file. As defined in the CSS file, the content area fills the whole screen, 320x320 pixels, and the 4 box elements equally divide the area.</p> 
- 
- <p class="figure">Figure: Original layout on a target device</p>  
- <p align="center"><img alt="Original layout on a target device" src="../../images/layout_original.png"/></p>
- <p>The following figure shows that the relative layout and scaling are correctly applied even when the same application is run on a mobile device with the aspect ratio of 16:9.</p>
-  <p class="figure">Figure: Scaled layout on a 16:9 mobile device</p>  
-  <p align="center"><img alt="Scaled layout on a 16:9 mobile device" src="../../images/layout_original_scaled.png"/></p>
-<p>The following code snippet shows an example where the background color is replaced with an image while the layout is exactly same as in the 4 box example. The following figures show how the layout including media elements (such as images) functions exactly like the basic box layout.</p>
-
-<pre class="prettyprint">
-&lt;!--Default, used for all--&gt;
-* {box-sizing: border-box;}
-body, div, h1 {margin: 0px; padding: 0px;}
-html, body {width: 100%; height: 100%; overflow-x: hidden;}
-
-#box1 {background-color: rgb(255, 255, 141);}
-#box2 {background-color: rgb(165, 241, 238);}
-#box3 {background-color: rgb(248, 179, 179);}
-#box4 {background-color: rgb(192, 161, 246);}
-.tile 
-{
-&nbsp;&nbsp;&nbsp;width: 50%;
-&nbsp;&nbsp;&nbsp;height: 50%;
-&nbsp;&nbsp;&nbsp;float: left;
-}
-.left {padding: 10px 5px 5px 10px;}
-.right {padding: 10px 10px 5px 5px;}
-
-.box 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;padding: 20px;
-&nbsp;&nbsp;&nbsp;background: no-repeat center;
-&nbsp;&nbsp;&nbsp;background-size: 100% 100%;
-}
-
-#box1 {background-image: url('../a.png');}
-#box2 {background-image: url('../b.png');}
-#box3 {background-image: url('../c.png');}
-#box4 {background-image: url('../d.png');}
-</pre>
-
-
- 
- <p class="figure">Figure: Image-based layout on a target device</p>  
- <p align="center"><img alt="Image-based layout on a target device" src="../../images/layout_image.png"/></p>
-
-<p class="figure">Figure: Image-based scaled layout on a 16:9 mobile device</p>  
-<p align="center"><img alt="Image-based scaled layout on a 16:9 mobile device" src="../../images/layout_image_scaled.png"/></p>	
-
-
- <h2 id="multiple" name="multiple">Multiple Layouts for Multiple Devices</h2> 
-  
-  <p>In many cases, the desired end result for your application can be achieved using scaling and a relative layout within a <a href="#single">single layout</a>. However, this approach does not always provide the best quality for the end user. </p>
-<p>You can support the best possible layout and usability with some additional development efforts. For instance, you can create an application which, on a tablet, shows the main information (clock face) and also delivers more meaningful information (calendar), while on a watch device the same application only displays the main information (clock face). This kind of end result, as shown in the following figure, cannot be achieved by only scaling up the whole layout of the watch device.</p>
-<p class="figure">Figure: Application for a watch and tablet</p>  
-<p align="center"><img alt="Application for a watch and tablet" src="../../images/multiple_layout_example.png"/></p>  
-
-<p>W3C CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues:</p> 
-
-  <ul> 
-  <li><a href="#viewport2">Viewport setting</a></li>
-   <li><a href="#category">Category classification</a></li> 
-   <li><a href="#display">Classification for display modes</a></li>  
- </ul>
-
- 
-<p>Since the <strong>2.3.1</strong> version, Tizen also supports a special media query feature to provide device shape-based layouts. If you want to create an application for both square-shaped and circular-shaped devices, you can easily <a href="#migration">migrate your application to support both shapes</a>.</p> 
- <p class="figure">Figure: Application for a square and circular device</p>  
- <p align="center"><img alt="Application for a square and circular device" src="../../images/circular_support.png"/></p>  
-     
-
-  <h3 id="viewport2" name="viewport2">Viewport Setting for Multiple Layouts</h3>   
-<p>The difference between multiple and single layouts is that, in the multiple layouts, the content width of the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is set to <span style="font-family: Courier New,Courier,monospace">&quot;device-width&quot;</span>. This sets the layout viewport width to the ideal viewport width and tells the Web engine that the application adapts to the device width. In short, the <span style="font-family: Courier New,Courier,monospace">&quot;device-width&quot;</span> setting is needed to create an adaptive and responsive Web application. </p>
-
-<p>To use the meta tag in an HTML file, set its name and content: </p>
- <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
-</pre>
-
-<h3 id="category" name="category">Category Classification</h3>
-	
-<p>When creating multiple layouts, you must first configure the layout categories. In other words, a classifying category is needed to fit the layout on the current executable environment. Media queries are supported in CSS3 to give Web application information to the executable environment.</p>
-
-<h4>W3C Media Queries</h4>
-<p>Media queries consist of a media type and expressions of media features. </p>
-
-<p>The media types indicate the media on which the current Web application is running. They are defined in HTML4. The following media types are supported:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace;">aural</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">braille</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">handheld</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">print</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">projection</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">screen</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">tty</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">tv</span></li>
-</ul>
-
-<p>You can declare that sections apply to certain media types inside a CSS style sheet.  As in the following example, you can declare <span style="font-family: Courier New,Courier,monospace;">screen</span> as a media type and describe its layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span>. That code applies the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> when the Web application is run on the screen type executable context.</p>
-
-<pre class="prettyprint">
-@media screen {...}
-</pre>
-
-<p>Several media queries can be combined in a media query list to configure the executable environment and define the detailed layout configuration, as needed. The following example shows a case in which the Web application runs on the executable environment having a <span style="font-family: Courier New,Courier,monospace;">screen</span> media type and a 500 pixel minimum width. Its final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user. </p>
-
-<pre class="prettyprint">
-@media screen and (min-width: 500px) {...}
-</pre>
-
-<p>The following table lists the CSS media features, which you can use to specify the layout utilizing the media queries.</p> 
-
-<table> 
-<caption>Table: Media features</caption>
-   <tbody> 
-    <tr> 
-     <th>Feature</th> 
-	 <th>Value</th>
-	 <th>Min/Max</th>
-	 <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>color</td> 
-     <td rowspan="2">integer</td>
-	 <td rowspan="5">yes</td>
-	 <td>Number of bits per a color component</td>	 
-    </tr> 
-  <tr>
-    <td>color-index</td>
-	 <td>Number of entries in the color lookup table</td>
-  </tr>
-    <tr> 
-     <td>device-aspect-ratio</td> 
-     <td>integer/integer</td>
-	 <td>Aspect ratio</td>	 
-    </tr>  
-    <tr> 
-     <td>device-height</td> 
-     <td rowspan="2">length</td>
-	 <td>Output device height</td>	 
-    </tr>
-    <tr> 
-     <td>device-width</td> 
-	 <td>Output device width</td>	 
-    </tr>
-    <tr> 
-     <td>grid</td> 
-     <td>integer</td>
-	 <td>no</td>
-	 <td>Set to true for a grid-based device</td>	 
-    </tr>
-    <tr> 
-     <td>height</td> 
-     <td>length</td>
-	 <td rowspan="3">yes</td>
-	 <td>Rendering surface height</td>	 
-    </tr>
-    <tr> 
-     <td>monochrome</td> 
-     <td>integer</td>
-	 <td>Number of bits per pixel in a monochrome frame buffer</td>	 
-    </tr>
-    <tr> 
-     <td>resolution</td> 
-     <td>resolution (<span style="font-family: Courier New,Courier,monospace;">dpi</span> or <span style="font-family: Courier New,Courier,monospace;">dpcm</span>)</td>
-	 <td>Resolution</td>	 
-    </tr>
-    <tr> 
-     <td>scan</td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">progressive</span> or <span style="font-family: Courier New,Courier,monospace;">interlaced</span></td>
-	 <td>no</td>
-	 <td>Scanning process of the <span style="font-family: Courier New,Courier,monospace;">tv</span> media types</td>	 
-    </tr>
-    <tr> 
-     <td>width</td> 
-     <td>length</td>
-	 <td>yes</td>
-	 <td>Rendering surface width</td>	 
-    </tr>	
-   </tbody> 
-  </table>
- 
-<h4>Tizen Specialized Media Query</h4>
-<p>Tizen supports a special media query feature for a circular device shape. The following table lists the supported media features.</p>
-
-<table class="note">
-       <tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>
-       </tr>
-       </tbody>
-</table>
-
-<table> 
-<caption>Table: Tizen specialized media feature</caption>
-   <tbody> 
-    <tr> 
-     <th>Feature</th> 
-        <th>Value</th>
-        <th>Min/Max</th>
-        <th>Description</th> 
-    </tr> 
-    
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">&quot;rectangle&quot;</span> | <span style="font-family: Courier New,Courier,monospace;">&quot;circle&quot;</span></td>
-        <td>No</td>
-        <td>Device shape</td>   
-    </tr>
-    
-   </tbody> 
-  </table>
-
-<p>You can combine this media query feature with the W3C type in your code. The final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user:</p>
-<pre class="prettyprint">
-@media all and (-tizen-geometric-shape: circle) {...}
-</pre>
- 
-  	
-<h3 id="display" name="display">Classification for Display Modes</h3>
-
-<p>The display mode can be classified as portrait or landscape for a rectangle-shaped device, or circular for a circular device.</p>
-
-<h4>Portrait and Landscape</h4>
-
-<p>You can configure the device landscape and portrait mode using the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> attribute in media queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <span style="font-family: Courier New,Courier,monospace;">max-device-aspect-ratio</span> feature is used.</p> 
-<p>If you use the <span style="font-family: Courier New,Courier,monospace;">orientation:portrait/landscape</span> feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> to configure the portrait and landscape mode.</p> 
-<pre class="prettyprint lang-html">
-@media screen and (max-width: 320px) and (max-device-aspect-ratio: 1/1) 
-{
-&nbsp;&nbsp;&nbsp;&lt;!--For portrait mode--&gt;
-}
-@media screen and (max-width: 640px) and (min-device-aspect-ratio: 11/10) 
-{
-&nbsp;&nbsp;&nbsp;&lt;!--For landscape mode--&gt;
-}
-</pre>	
-
-<h4>Circular Device</h4>
-
-<p>You can configure the device circular mode using the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> attribute in the Tizen environment. The following example shows how to use the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> feature.</p>
-
-<table class="note">
-       <tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>
-       </tr>
-       </tbody>
-</table>
-
-
-<pre class="prettyprint lang-html">
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;&lt;!--For a circular device--&gt;
-}
-</pre>
-
-<h3 id="migration" name="migration">Application Migration to a Circular Device</h3>	
-
-<p>This section illustrates an example for how you can migrate a basic application from a rectangular device (such as Gear 2 or Gear S) to a circular device. Use this example as the best practice to improve your layout.</p>
-
-<p>The example uses the following HTML and CSS code for the sample application and its layout.</p>
-
-<pre class="prettyprint">
-&lt;!--HTML code--&gt;
-&lt;section id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&gt;HEADER&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;article id=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 3&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 4&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 5&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 6&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 7&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 8&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 9&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 10&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&nbsp;&nbsp;&nbsp;&lt;footer&gt;FOOTER&lt;/footer&gt;
-&lt;/section&gt;
-
-&lt;!--CSS code--&gt;
-html, body 
-{
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;padding: 0;
-&nbsp;&nbsp;&nbsp;margin: 0;
-&nbsp;&nbsp;&nbsp;font-size: 24px;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
-}
-
-section 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;overflow: auto;
-&nbsp;&nbsp;&nbsp;padding: 70px 0;
-}
-
-header, footer 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 70px;
-&nbsp;&nbsp;&nbsp;min-height: 70px;
-&nbsp;&nbsp;&nbsp;line-height: 70px;
-&nbsp;&nbsp;&nbsp;font-size: 30px;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;position: fixed;
-}
-
-header 
-{
-&nbsp;&nbsp;&nbsp;top: 0;
-}
-
-footer 
-{
-&nbsp;&nbsp;&nbsp;bottom: 0;
-}
-
-article ul li 
-{
-&nbsp;&nbsp;&nbsp;border-top: 1px solid rgba(52, 52, 52, 1);
-&nbsp;&nbsp;&nbsp;padding: 15px 20px;
-&nbsp;&nbsp;&nbsp;color: rgba(209, 209, 209, 1);
-&nbsp;&nbsp;&nbsp;font-size: 40px;
-}
-
-article ul li:first 
-{
-&nbsp;&nbsp;&nbsp;border-top: 0 none;
-}</pre>
-
-<p>To migrate the application, use the following steps:</p>
-
- <ol> 
-  <li>Use a relative layout.
-
- <p>To achieve a responsive layout for different devices, implement a relative layout. Simply set the <span style="font-family: Courier New,Courier,monospace;">width: 100%</span> attribute to the layout elements in the CSS code:</p>
-<pre class="prettyprint">
-section 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;...
-}
-
-header, footer 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;...
-} </pre>
- <table class="note">
-	<tbody>
-	<tr>
-		<th class="note">Note</th>
-	</tr>
-	<tr>
-		<td class="note">The <strong>relative layout</strong> concept is described in more detail in <a href="#relative">Relative Layout</a>.</td>
-	</tr>
-	</tbody>
-</table>
-</li>
-   <li>Set extra spaces both at the top and bottom.
-
- <p>During the migration, you can see how a certain portion of the rectangle view is covered over by the circular view, especially the header and the footer. To make them fully and consistently visible in the circular view, provide a &quot;padding&quot; space at the top and bottom of the page. In the following example migrating to a circular gear device from a rectangular Gear S, extra 77 px padding is used:</p>
-<pre class="prettyprint">
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;section {padding: 77px 0;}
-}
-</pre>
-
- <p class="figure">Figure: Top and bottom padding</p>  
- <p align="center"><img alt="Top and bottom padding" src="../../images/migrate_padding.png"/></p>  
-</li>
-   <li>Set the header and footer position.
-
-<p>After setting the top and bottom padding, set the header and footer position for scrolling in the circular view.</p>
-<p>For a rectangular device with a lengthwise screen, especially Gear S, the best option is to make only the content area scrollable.</p>
-
-<p class="figure">Figure: Scrolling with a rectangular screen</p>  
-<p align="center"><img alt="Scrolling with a rectangular screen" src="../../images/migrate_scrollable_rect.png"/></p>
-<p>In a circular screen, it is better to make the whole page scrollable, including the top and bottom space.</p>
-<p class="figure">Figure: Scrolling with a circular screen</p>  
-<p align="center"><img alt="Scrolling with a circular screen" src="../../images/migrate_scrollable_circle.png"/></p>
-
-<p>To implement the header and footer position, use the CSS <span style="font-family: Courier New,Courier,monospace;">position</span> attribute:</p>
-<pre class="prettyprint">
-&lt;!--Rectangular device--&gt;
-header, footer 
-{
-&nbsp;&nbsp;&nbsp;position: fixed;
-}
-
-&lt;!--Circular device--&gt;
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;header, footer 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: static;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-</li>
-   <li>Move the display to the initial position.
-
-<p>To provide a better user experience, show the entire display at the beginning, including the &quot;top padding&quot; space. A few seconds after the application launch, move the display back to its initial position, where the header is placed on the top without any space between itself and the edge of the screen. When the display moves like this, the users can perceive the existence of the top space.</p>
-
-<p class="figure">Figure: Moving to the initial position</p>  
-<p align="center"><img alt="Moving to the initial position" src="../../images/migrate_move_to_top.png"/></p>
-
-<p>The scroll move requires several lines of JavaScript code. In the following sample, the few (N) seconds is set to 1500 ms, but you can change the value as needed.</p>
-<pre class="prettyprint">
-(function initScrollPosition() 
-{
-&nbsp;&nbsp;&nbsp;var SCROLL_DELAY_TIME = 1500,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = document.getElementById(&quot;main&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollPosition = window.parseInt(window.getComputedStyle(page)[&quot;padding-top&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initScrollTimeoutId = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mql = window.matchMedia(&quot;(-tizen-geometric-shape: circle)&quot;);;
-
-&nbsp;&nbsp;&nbsp;/* The effect is applied to a circular device only, so use mediaquery */
-&nbsp;&nbsp;&nbsp;if (mql.matches) 
-&nbsp;&nbsp;&nbsp;{	
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;scroll&quot;, function clearInitScrollCallback() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.clearTimeout(initScrollTimeoutId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;scroll&quot;, clearInitScrollCallback, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initScrollTimeoutId = window.setTimeout(function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.scrollTop = scrollPosition;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, SCROLL_DELAY_TIME);
-&nbsp;&nbsp;&nbsp;}
-}());
-</pre>
-
-</li>
-   <li>Set extra attributes for a better view.
-
-<p>Extra attributes are not mandatory in the migration process, but they can be helpful for a better application view.</p>
-<p>Sometimes changing the layout of the basic elements is not enough to achieve a user-friendly view, and changes in other elements&#39; layout are needed too. For example, consider setting the <span style="font-family: Courier New,Courier,monospace;">text-align: center</span> attribute for the header and list items in the circular view (this attribute is already defined in the above circular screenshots). If the list is aligned to left in a circular view, the list items may not be all visible when placed out of the middle space.</p>
-
-<pre class="prettyprint">
-&lt;!--Common style for header and footer text--&gt;
-header, footer 
-{
-&nbsp;&nbsp;&nbsp;text-align: center;
-}
-
-&lt;!--In a circular screen, list item has a center position--&gt;
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;article ul li 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 60px;
-&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.ui.guides/html/web/w3c/woff_w.htm b/org.tizen.ui.guides/html/web/w3c/woff_w.htm
deleted file mode 100755
index fa02e72..0000000
--- a/org.tizen.ui.guides/html/web/w3c/woff_w.htm
+++ /dev/null
@@ -1,132 +0,0 @@
-<!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>WOFF File Format 1.0: Changing Fonts Using WOFF</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">Related Info</p>
-		<ul class="toc">
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#woff">WOFF File Format 1.0 API for Mobile Web</a></li>
-			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#woff">WOFF File Format 1.0 API for Wearable Web</a></li>
-			</ul>
-	</div></div>
-</div>	
-
-<div id="container"><div id="contents"><div class="content">
-<h1>WOFF File Format 1.0: Changing Fonts Using WOFF</h1>
-
-<p>You can decode and restore font data easily.</p>
-
-<p>The new text features in WOFF File Format 1.0 include:</p>
-<ul>
-
-<li>WOFF file format 1.0 
-<p>WOFF (Web Open Font Format) is a packaging format used to decode and restore font data according to the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rule</a> to display it identically with the input font. The <span style="font-family: Courier New,Courier,monospace">@font-face</span> rule is a CSS rule that allows linking to fonts and finding a suitable font to display if the original font is not available. You can <a href="#woff">use WOFF</a> within a Web page. </p></li>
-</ul> 
-
-<h2 id="woff" name="woff">Using the WOFF File Format</h2>
-				
-<p>To enhance the user experience of your application, you must learn to use the WOFF (Web Open Font Format) file format 1.0, which is a W3C standard font packaging format used in Web pages:</p>
-
-<ol>
-<li>Download and use fonts installed on the Web server by creating <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rules</a>. Within the rules, you can define the following properties:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">font-family</span>
-<p>Defines a name for the font. This property is mandatory.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">src</span>
-<p>Defines the URL of the font file on the server. This property is mandatory. If the <span style="font-family: Courier New,Courier,monospace">local</span> attribute is defined, the font resource is not downloaded from the server if it already exists in the local storage. </p></li>
-<li><span style="font-family: Courier New,Courier,monospace">font-stretch</span>
-<p>Defines the way the font is stretched. This property is optional.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">font-style</span>
-<p>Defines the font style. This property is optional.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">font-weight</span>
-<p>Defines the font weight. This property is optional.</p></li>
-</ul>
-<p>Define the rules with in a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of a Web page:</p>
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;@font-face
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_1_0.woff&#39;) format(&#39;woff&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;@font-face
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_0_0.woff&#39;) format(&#39;woff&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;@font-face
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: 900;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_2_0.woff&#39;) format(&#39;woff&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-family: MuseoSans}
-&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-family: MuseoSans; font-weight: bold;}
-&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-family: MuseoSans; font-weight: 900;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;</pre>
-</li>
-<li>In the <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> section, create <span style="font-family: Courier New,Courier,monospace">&lt;p&gt;</span> elements containing text in which the font rules are implemented:
-<pre class="prettyprint">&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</li>
-</ol>
-<p class="figure">Figure: Implementing the @font-face rules (in mobile applications only)</p>
-<p align="center"><img alt="Implementing the @font-face rules (in mobile applications only)" src="../../images/font_face.png" /></p>
-         
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<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
deleted file mode 100755
index 78f30e1..0000000
--- a/org.tizen.ui.guides/index.xml
+++ /dev/null
@@ -1,164 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?NLS TYPE="org.eclipse.help.toc"?>
-
-
-<toc label="UI Guides" topic="html/cover_page.htm">
-
-<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/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 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>
-		<topic href="html/web/w3c/color_w.htm" label="CSS Color Module Level 3"></topic>
-		<topic href="html/web/w3c/background_w.htm" label="CSS Backgrounds and Borders Module Level 3"></topic>
-		<topic href="html/web/w3c/flexible_w.htm" label="CSS Flexible Box Layout Module"></topic>
-		<topic href="html/web/w3c/multi_mw.htm" label="CSS Multi-column Layout Module"></topic>
-		<topic href="html/web/w3c/text_module_w.htm" label="CSS Text Module Level 3"></topic>
-		<topic href="html/web/w3c/basic_ui_w.htm" label="CSS Basic User Interface Module Level 3 (CSS3 UI)"></topic>
-		<topic href="html/web/w3c/font_w.htm" label="CSS Fonts Module Level 3"></topic>		
-		<topic href="html/web/w3c/woff_w.htm" label="WOFF File Format 1.0"></topic>	
-	</topic>	
-</topic>
-<topic href="html/native/guides_n.htm" label="Native Application">		
-	<topic href="html/native/efl/guides_efl_n.htm" label="EFL">
-		<topic href="html/native/efl/efl_overview_n.htm" label="EFL Overview"></topic>
-		<topic href="html/native/efl/ui_components_n.htm" label="UI Components">
-			<topic href="html/native/efl/ui_components_mn.htm" label="Mobile UI Components">
-				<topic href="html/native/efl/components_mn.htm" label="Using Mobile UI Components"></topic>
-				<topic href="html/native/efl/basic_tutorial_mn.htm" label="Creating Basic Mobile Interactions"></topic>	
-				<topic href="html/native/efl/genlist_tutorial_mn.htm" label="Creating Mobile Genlists"></topic>	
-				<topic href="html/native/efl/menu_tutorial_mn.htm" label="Creating Mobile Menus"></topic>
-			</topic>	
-			<topic href="html/native/efl/ui_components_wn.htm" label="Wearable UI Components">
-				<topic href="html/native/efl/components_wn.htm" label="Using Wearable UI Components"></topic>	
-				<topic href="html/native/efl/button_tutorial_wn.htm" label="Creating Wearable Buttons"></topic>
-				<topic href="html/native/efl/datetime_tutorial_wn.htm" label="Creating Wearable Datetimes"></topic>
-				<topic href="html/native/efl/genlist_tutorial_wn.htm" label="Creating Wearable Genlists"></topic>	
-				<topic href="html/native/efl/popup_tutorial_wn.htm" label="Creating Wearable Popups"></topic>
-				<topic href="html/native/efl/circle_components_wn.htm" label="Creating Wearable Circle Components"></topic>
-			</topic>
-		</topic>
-		<topic href="html/native/efl/component_infra_n.htm" label="UI Component Infrastructure Modules">
-			<topic href="html/native/efl/component_focus_n.htm" label="Managing Component Focus"></topic>	
-			<topic href="html/native/efl/component_custom_n.htm" label="Customizing Components"></topic>
-			<topic href="html/native/efl/touch_gesture_n.htm" label="Handling Component Touch Gestures"></topic>		
-		</topic>
-		<topic href="html/native/efl/ui_containers_n.htm" label="UI Containers">
-			<topic href="html/native/efl/containers_n.htm" label="Using Container UI Components"></topic>	
-			<topic href="html/native/efl/form_tutorial_n.htm" label="Creating a Form for a Basic Application Layout"></topic>
-			<topic href="html/native/efl/naviframe_tutorial_n.htm" label="Creating a Naviframe for Navigation"></topic>
-			<topic href="html/native/efl/layout_tutorial_n.htm" label="Creating UI Screen Layouts"></topic>	
-			<topic href="html/native/efl/panes_tutorial_mn.htm" label="Creating Panes"></topic>			
-		</topic>
-		<topic href="html/native/efl/theme_n.htm" label="Themes">
-			<topic href="html/native/efl/edje_intro_n.htm" label="Introduction to EDC Programming"></topic>	
-			<topic href="html/native/efl/edc_positioning_n.htm" label="Positioning Parts with the EDC File"></topic>
-			<topic href="html/native/efl/edc_part_block_n.htm" label="EDJE Data Collection Reference"></topic>	
-			<topic href="html/native/efl/edc_optimization_n.htm" label="Optimizing EDC"></topic>			
-		</topic>
-		<topic href="html/native/efl/edje_objects_n.htm" label="Edje Objects">
-			<topic href="html/native/efl/edje_files_n.htm" label="Handling Edje Files"></topic>	
-			<topic href="html/native/efl/edje_scaling_n.htm" label="Scaling Edje Objects"></topic>
-			<topic href="html/native/efl/edje_color_n.htm" label="Using Edje Color Classes"></topic>	
-			<topic href="html/native/efl/edje_text_n.htm" label="Using Edje Text Classes"></topic>
-			<topic href="html/native/efl/edje_perspective_n.htm" label="Using Edje Perspective"></topic>	
-			<topic href="html/native/efl/edje_message_signal_n.htm" label="Managing Signals and Messages"></topic>	
-			<topic href="html/native/efl/edje_manage_animation_n.htm" label="Managing Edje Animations"></topic>	
-		</topic>
-		<topic href="html/native/efl/font_setting_n.htm" label="Fonts"></topic>
-		<topic href="html/native/efl/ui_scalability_n.htm" label="Scaling">
-			<topic href="html/native/efl/multiple_screens_n.htm" label="Multiple Screen Support"></topic>	
-			<topic href="html/native/efl/scalability_n.htm" label="Scalability Support"></topic>	
-		</topic>
-		<topic href="html/native/efl/notification_window_n.htm" label="Notification Windows"></topic>
-		<topic href="html/native/efl/core_loop_n.htm" label="Core Loop and OS Interfacing">
-			<topic href="html/native/efl/main_loop_n.htm" label="Handling the Main Loop"></topic>	
-			<topic href="html/native/efl/threads_n.htm" label="Using Threads"></topic>	
-		</topic>
-		<topic href="html/native/efl/graphical_objects_n.htm" label="Graphical Objects">
-			<topic href="html/native/efl/evas_objects_n.htm" label="Evas Objects"></topic>	
-			<topic href="html/native/efl/evas_rendering_n.htm" label="Evas Rendering Concept and Method"></topic>
-			<topic href="html/native/efl/evas_basic_objects_n.htm" label="Basic Manipulation of Evas Objects"></topic>
-			<topic href="html/native/efl/evas_advanced_objects_n.htm" label="Advanced Manipulation of Evas Objects"></topic>
-			<topic href="html/native/efl/evas_optimization_n.htm" label="Optimizing Evas"></topic>
-		</topic>
-		<topic href="html/native/efl/event_handling_n.htm" label="Event Handling">
-			<topic href="html/native/efl/event_types_n.htm" label="Event Types"></topic>	
-			<topic href="html/native/efl/multipoint_touch_n.htm" label="Tracking Multi-point Touch Events"></topic>	
-		</topic>
-		<topic href="html/native/efl/animation_effects_n.htm" label="Animations and Effects">
-			<topic href="html/native/efl/ecore_animation_n.htm" label="Ecore Animations"></topic>	
-			<topic href="html/native/efl/ecore_animation_tutorial_n.htm" label="Creating Ecore Animations"></topic>	
-			<topic href="html/native/efl/edje_animation_n.htm" label="Edje Animations"></topic>
-			<topic href="html/native/efl/edje_animation_tutorial_n.htm" label="Creating Edje Animations"></topic>
-			<topic href="html/native/efl/elementary_animation_n.htm" label="Elementary Animations"></topic>
-			<topic href="html/native/efl/elementary_animation_tutorial_n.htm" label="Creating Elementary Animations"></topic>
-			<topic href="html/native/efl/elementary_transit_effect_tutorial_n.htm" label="Creating Elementary Transit Effects"></topic>
-			<topic href="html/native/efl/evas_map_animation_n.htm" label="Evas Map Effects"></topic>
-			<topic href="html/native/efl/evas_map_effects_n.htm" label="Creating Evas Map Effects"></topic>
-		</topic>		
-		<topic href="html/native/efl/data_types_tools_n.htm" label="Data Types and Tools">
-			<topic href="html/native/efl/data_types_n.htm" label="Data Types"></topic>	
-			<topic href="html/native/efl/tools_n.htm" label="Tools"></topic>	
-		</topic>	
-		<topic href="html/native/efl/hw_input_n.htm" label="Hardware Input Handling">
-			<topic href="html/native/efl/key_events_n.htm" label="Managing Menu and Back Key Events"></topic>	
-			<topic href="html/native/efl/rotary_events_n.htm" label="Managing Rotary Events"></topic>	
-		</topic>		
-	</topic>
-	<topic href="html/native/dali/guides_dali_n.htm" label="DALi">
-		<topic href="html/native/dali/dali_overview_n.htm" label="DALi Overview"></topic>
-		<topic href="html/native/dali/actors_n.htm" label="Actors"></topic>
-		<topic href="html/native/dali/event_handling_n.htm" label="Event Handling"></topic>
-		<topic href="html/native/dali/ui_components_n.htm" label="UI Components">
-			<topic href="html/native/dali/buttons_n.htm" label="Buttons"></topic>
-			<topic href="html/native/dali/itemview_n.htm" label="ItemView"></topic>
-			<topic href="html/native/dali/scrollview_n.htm" label="ScrollView"></topic>
-			<topic href="html/native/dali/tableview_n.htm" label="TableView"></topic>
-			<topic href="html/native/dali/textfield_n.htm" label="TextField"></topic>
-			<topic href="html/native/dali/textlabel_n.htm" label="TextLabel"></topic>
-		</topic>
-		<topic href="html/native/dali/animation_n.htm" label="Animations">
-			<topic href="html/native/dali/basic_framework_n.htm" label="Basic Framework"></topic>
-			<topic href="html/native/dali/advanced_animation_n.htm" label="Advanced Animations"></topic>
-			<topic href="html/native/dali/constraints_n.htm" label="Constraints"></topic>
-			<topic href="html/native/dali/multi_threading_n.htm" label="Multi-threading"></topic>
-		</topic>
-		<topic href="html/native/dali/dali_applications_n.htm" label="DALi Applications"></topic>
-		<topic href="html/native/dali/resources_n.htm" label="Resources"></topic>
-		<topic href="html/native/dali/rendering_effects_n.htm" label="Rendering and Effects"></topic>
-	</topic>
-</topic>		
-	
-</toc>
diff --git a/org.tizen.ui.guides/plugin.xml b/org.tizen.ui.guides/plugin.xml
deleted file mode 100755
index 4c22a91..0000000
--- a/org.tizen.ui.guides/plugin.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?eclipse version="3.0"?>
-
-<plugin>
-	<extension point="org.eclipse.help.toc">
-		<toc file="index.xml" primary="true" />
-	</extension>
-</plugin>
diff --git a/org.tizen.ui.practices/.project b/org.tizen.ui.practices/.project
new file mode 100644
index 0000000..0e416e7
--- /dev/null
+++ b/org.tizen.ui.practices/.project
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>org.tizen.ui.practices_2.4.0</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.pde.ManifestBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.pde.SchemaBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.pde.PluginNature</nature>
+	</natures>
+</projectDescription>
diff --git a/org.tizen.ui.practices/META-INF/MANIFEST.MF b/org.tizen.ui.practices/META-INF/MANIFEST.MF
new file mode 100644
index 0000000..9f596bf
--- /dev/null
+++ b/org.tizen.ui.practices/META-INF/MANIFEST.MF
@@ -0,0 +1,7 @@
+Manifest-Version: 1.0
+Bundle-ManifestVersion: 1
+Bundle-Name: Tizen UI Practices
+Bundle-SymbolicName: org.tizen.ui.practices;singleton=true
+Bundle-Version: 2.4.0
+Bundle-Vendor: The Linux Foundation
+
diff --git a/org.tizen.ui.guides/about.html b/org.tizen.ui.practices/about.html
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/about.html
rename to org.tizen.ui.practices/about.html
diff --git a/org.tizen.ui.practices/build.properties b/org.tizen.ui.practices/build.properties
new file mode 100644
index 0000000..b84ff38
--- /dev/null
+++ b/org.tizen.ui.practices/build.properties
@@ -0,0 +1,8 @@
+bin.includes = plugin.xml,\
+               META-INF/,\
+               html/,\
+               build.properties,\
+               .project,\
+			   about.html,\
+               index.xml
+
diff --git a/org.tizen.ui.practices/html/cover_page.htm b/org.tizen.ui.practices/html/cover_page.htm
new file mode 100644
index 0000000..f355edc
--- /dev/null
+++ b/org.tizen.ui.practices/html/cover_page.htm
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="css/snippet.css" />
+	<script type="text/javascript" src="scripts/snippet.js"></script>	
+	<script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
+
+	<title>Tizen UI Practices</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+<font size="11">UI Practices</font></h1>
+
+<p>Click the application type you want:</p>
+<p><a href="web/guides_w.htm"><img alt="Web Application" src="images/w_division.png"/></a> <a href="native/guides_n.htm"><img alt="Native Application" src="images/n_division.png"/></a></p> 
+
+   
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="scripts/showhide.js"></script>
+
+<div 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>
+
diff --git a/org.tizen.ui.practices/html/css/snippet.css b/org.tizen.ui.practices/html/css/snippet.css
new file mode 100644
index 0000000..f880409
--- /dev/null
+++ b/org.tizen.ui.practices/html/css/snippet.css
@@ -0,0 +1,52 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #793AFF }  /* string content */
+  .kwd { color: #7F0055 }  /* a keyword */
+  .com { color: green}  /* a comment */
+  .typ { color: #1C1C1C }  /* a type name */
+  .lit { color: black }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #1C1C1C}
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
diff --git a/org.tizen.ui.practices/html/css/styles.css b/org.tizen.ui.practices/html/css/styles.css
new file mode 100644
index 0000000..4c8f5a8
--- /dev/null
+++ b/org.tizen.ui.practices/html/css/styles.css
@@ -0,0 +1,756 @@
+@charset "utf-8";
+
+body {
+	background: white;
+	color: #1C1C1C;
+	margin-right: 20px;
+	margin-left: 20px;
+	font-size: 9pt;
+	font-weight: normal;
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
+	font-family: Arial, Verdana, Helvetica, sans-serif
+	}
+
+/* 	Set default font to 9 pt	*/
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+	font-size: 9pt;
+}
+	
+pre, code { 
+	font-family: "Courier New", Courier, monospace;
+	border: 1px solid #719cc7;
+	margin: 6px 1.5px;
+	padding: 1px 1px 1px 1px;
+	font-weight: normal;
+	font-style: normal;
+}
+
+h1 {font-size: 24pt; color: #0E437D;}
+h2 {font-size: 18pt; color: #0E437D;}
+h3 {font-size: 14pt; color: #1C1C1C;}
+h4 {font-size: 12pt; color: #1C1C1C;}
+h5 {font-size: 10pt; color: #1C1C1C;}
+	
+h1, h2, h3, h4, h5 {
+	font-weight: bold;
+	font-style: normal; 
+	line-height: normal; 
+	margin-top: 16pt;
+}
+
+caption, p.caption { 
+	font-size: 9pt;
+	color: #1C1C1C;
+	font-weight: bold;
+	text-align: left;
+	margin-top: 20px;
+	margin-bottom: 0px;
+}
+
+ol  {
+	margin-bottom: 20px;
+}
+
+ul ul , ol ul, ul ol, ol ol{
+	margin-top: 10px;
+}
+
+ul li, ol li {
+	margin-bottom: 10px;
+}
+
+ol.tutorstep li {
+	border-top: 2px solid #719cc7;
+	list-style-position: inside;
+	font-weight: bold;
+	margin-top: 30px;
+	margin-left: -20px;
+	padding-top: 3px;
+	font-size: 12pt;
+}
+
+ol.tutorstep li p{
+	font-size: 9pt;
+	font-weight: normal;
+	margin-top: 10px;
+}
+
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
+	font-size: 9pt;
+	list-style-position: outside; 
+	margin-left: 0px;
+	font-weight: normal;
+}
+
+ol.tutorstep ol li p, ol.tutorstep ul li p {
+	font-size: 9pt;
+	font-weight: normal; 
+	margin-top: 5px;
+}
+
+ol li p, ul li p {
+	font-size: 9pt;
+	font-weight: normal;
+	margin-bottom: 2px;
+	margin-top: 2px;
+}
+
+ol ol , ol.tutorstep ol{
+	font-size: 9pt;
+	font-weight: normal;
+	list-style-type: lower-alpha;
+	color: #1C1C1C;	
+	border-style: none;
+	margin-top: 10px; 
+}
+
+ol.tutorstep ul {
+	margin-top: 10px;
+	font-size: 9pt;
+}
+
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+	border-style: none;
+	margin-top: 5px;
+	font-size: 9pt;
+}
+
+ul {
+	font-size: 9pt;
+	font-weight: normal;
+	color: #1C1C1C;
+}
+
+
+/*	End of font face declarations	*/
+
+/*	Set table borders and heading row background	*/
+table {
+	border: 0px;
+	border-collapse: collapse;
+	width: 100%;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	background: white;
+}
+
+th {
+	border-top: 2px solid #719cc7;
+	border-right: 1px solid #c6d9f1;
+	border-left: 1px solid #c6d9f1;
+	background-color: #f3f7fb;
+	padding: 4px;
+	color: #719cc7;
+	font-size: 9pt;
+	font-weight: bold;
+}	
+	
+td {
+	border: 1px solid #c6d9f1;
+	vertical-align:top;
+	padding: 3px 20px 5px 20px;
+	}
+
+td.middle {
+	border: 1px solid #c6d9f1;
+	vertical-align:middle;
+	padding: 3px 20px 5px 20px;
+	}	
+	
+/*	Notes stand out using a light top & bottom borders with yellow background	*/
+table.note {
+	border-top: 2px solid #719cc7;
+	border-left: 0px;
+	border-right: 0px;
+	width: 100%;
+}
+
+tr.note {
+	text-align: left;
+}
+
+th.note {
+	text-align: left;
+	background-color: #ddd9c3;
+	background-image: note.gif;
+	border-top: 2px solid #719cc7;
+	border-bottom:1px solid #719cc7;
+	border-right: none;
+
+}
+
+td.note, p.note {
+	background-color: #eeece1;
+	color: #1C1C1C;
+	padding: 5px;
+	margin-top:12px;
+	margin-bottom:12px;
+	border: none;
+}
+	
+/*	Figure titles are centered and bolded	*/
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
+	text-align: center;
+	font-weight: bold;
+}
+
+/*	Red background and white text for things that need fixing before release	*/
+.fix	{
+	background-color: red;
+	font-weight: bold;
+	color: white;
+	}
+
+/* Classes for creating collapsible content */
+#banner {
+	padding: 8px 4px 8px 4px;
+	/* top right bottom left */
+	border: 1px solid #7f7f7f;
+	width: 100%;
+	background-image: url("banner.png");
+	text-align: left;
+	font-weight: bold;
+	font-size: 9pt;
+	color: #ffffff;
+}
+
+#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
+#main {width: 75%; height: 90%;}
+#container {width:100%;}
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
+body.no-toc #container #contents {right: 0;padding-right:30px;}
+body.no-toc #toc-navigation {width: auto;}
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
+body.no-toc #profile {float: right;right: -32px;}
+body.no-toc #profile p {padding: 0; margin: 0;}
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
+	#container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
+	#container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
+
+.devicespecs-util {float:right; margin-top:25px;}
+	.devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
+	.devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+	.devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
+	.devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
+	.devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
+	.devicespecs-util ul.dutil li a:hover { color:#222; }
+	.devicespecs-util ul.dutil li a:active { color:#222; }
+
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
+	ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
+
+	ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
+	ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+	ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
+
+	ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+	ul.devicespecifications li div.devicespec-tit > span a.bt-arr 	{display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+	ul.devicespecifications li div.devicespec-tit > span a.bt-arr em 	{display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+	ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
+
+	ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
+	ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
+
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
+
+.static-cont {width:100%; margin-bottom:40px;}
+	
+.top {text-align: right;}
+.toc, ul.toc{
+	margin: 10px 0px 0px 0px;
+	padding-left: 13px;
+	list-style: disc;
+	font-size: 9pt;
+	line-height: 115%; 
+	}
+	
+.toc-title {
+	font-size: 12pt;
+	color: #0E437D;	
+	font-weight: bold;
+	font-style: normal; 
+	line-height: normal; 
+	margin-top: 16pt;
+}
+	
+a.top {
+	display:block; 
+	float: right; 
+	position:fixed;
+	width: 28px; 
+	height:89px; 
+	bottom:50px;
+	z-index: 101;
+	right: 19%;
+	}
+
+a img {border: 0;}
+	
+/*	Footer includes space and a gray line above		*/
+#footer {
+	position: fixed;
+	/* width: 100%; */
+    bottom: 0px;
+	text-align: center;
+	border-top: 1px solid #CCCCCC;
+	background-color: #FFFFFF;	
+	left: 21px;  right: 21px;
+}
+
+.footer {font-size: 8pt;}
+	
+caption { 
+	font-size: 9pt;
+	color: #1C1C1C;
+	font-weight: bold;
+	text-align: center;
+	margin-top: 20px;
+	margin-bottom: 0px;
+}
+
+div.qindex, div.navpath, div.navtab{
+	background-color: #e8eef2;
+	border: 1px solid #84b0c7;
+	text-align: center;
+	margin: 2px;
+	padding: 2px;
+}
+
+div.qindex, div.navpath {
+	width: 100%;
+	line-height: 140%;
+}
+
+div.navtab {
+	margin-right: 15px;
+}
+
+/* @group Link Styling */
+
+a:link {
+	color: #719cc7;
+	text-decoration: underline;
+	font-weight: bold;
+}
+
+a:hover { 
+	color: #0e437d;
+}
+
+a:visited {
+	text-decoration: underline;
+	color: #719cc7;
+	font-weight: bold;
+}
+
+a.qindex {
+       font-weight: bold;
+       padding: 2px;
+}
+
+a.qindex:hover {
+	text-decoration: underline;
+	color: #0e437d;
+	padding: 2px;
+}
+
+a.qindex:visited {
+       text-decoration: underline;
+       font-weight: bold;
+       color: #719cc7;
+       padding: 2px;
+}
+
+a.qindexHL {
+	text-decoration: underline;
+	font-weight: bold;
+	background-color: #6666cc;
+	color: #ffffff;
+	padding: 2px 6px;
+	border: 1px double #9295C2;
+}
+
+a.qindexHL:hover {
+	text-decoration: none;
+	background-color: #6666cc;
+	color: #ffffff;
+	padding: 2px 6px;
+}
+
+dl.el { 
+	margin-left: -1cm 
+}
+
+.fragment {
+	font-family: monospace, fixed;
+	font-size: 105%;
+}
+
+pre.fragment {
+	border: 1px solid #CCCCCC;
+	background-color: #f5f5f5;
+	padding: 4px 6px;
+	margin: 4px 8px 4px 2px;
+}
+
+div.fragment {
+	border: 1px solid #CCCCCC;
+	background-color: #f5f5f5;
+	padding: 6px;
+}
+
+div.ah { 
+	background-color: black; 
+	font-weight: bold; 
+	color: #ffffff; 
+	margin-bottom: 3px; 
+	margin-top: 3px 
+}
+
+td.md { 
+	background-color: #f5f5f5; 
+	font-weight: bold; 
+}
+
+td.mdname1 { 
+	background-color: #f5f5f5; 
+	font-weight: bold; 
+	color: #602020; 
+}
+
+td.mdname { 
+	background-color: #f5f5f5; 
+	font-weight: bold; 
+	color: #602020; 
+	width: 600px; 
+}
+
+div.groupHeader {
+	margin-left: 16px;
+	margin-top: 12px;
+	margin-bottom: 6px;
+	font-weight: bold;
+}
+
+div.groupText { 
+	margin-left: 16px; 
+	font-style: italic; 
+}
+
+td.indexkey {
+	background-color: #eeeeff;
+	font-weight: bold;
+	border: 1px solid #CCCCCC;
+	margin: 2px 0px 2px 0;
+	padding: 2px 10px;
+}
+
+td.indexvalue {
+	background-color: #eeeeff;
+	border: 1px solid #CCCCCC;
+	padding: 2px 10px;
+	margin: 2px 0px;
+}
+
+tr.memlist {
+   background-color: #f0f0f0; 
+}
+
+p.formulaDsp { 
+	text-align: center; 
+}
+
+img.formulaDsp { 
+}
+
+img.formulaInl { 
+	vertical-align: middle; 
+}
+
+/* @group Code Colorization */
+
+span.keyword       { color: #008000 }
+span.keywordtype   { color: #604020 }
+span.keywordflow   { color: #e08000 }
+span.comment       { color: #800000 }
+span.preprocessor  { color: #806020 }
+span.stringliteral { color: #002080 }
+span.charliteral   { color: #008080 }
+span.vhdldigit     { color: #ff00ff }
+span.vhdlchar      { color: #000000 }
+span.vhdlkeyword   { color: #700070 }
+span.vhdllogic     { color: #ff0000 }
+
+.mdTable {
+	border: 1px solid #868686;
+	background-color: #F4F4FB;
+}
+
+.mdRow {
+	padding: 8px 10px;
+}
+
+/* @group Member Descriptions */
+
+.mdescLeft, .mdescRight,
+.memItemLeft, .memItemRight,
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+	background-color: #F4F4F4A;
+	border: none;
+	margin: 4px;
+	padding: 3px 8px 4px 8px;
+}
+
+.mdescLeft, .mdescRight {
+	padding: 0px 8px 4px 8px;
+	color: #555;
+}
+
+.memItemLeft, .memItemRight, .memTemplParams {
+	border-top: 1px solid #DBDBDB;
+}
+
+.memTemplParams {
+	color: #606060;
+}
+
+/* @end */
+
+/* @group Member Details */
+
+/* Styles for detailed member documentation */
+
+.memtemplate {
+	font-size: 80%;
+	color: #606060;
+	font-weight: normal;
+	margin-left: 3px;
+}
+
+.memnav {
+	background-color: #eeeeff;
+	border: 1px solid #84b0c7;
+	text-align: center;
+	margin: 2px;
+	margin-right: 15px;
+	padding: 2px;
+}
+
+.memitem {
+	padding: 0;
+}
+
+.memname {
+	white-space: nowrap;
+	font-weight: bold;
+}
+
+.memproto, .memdoc {
+	border: 1px solid #9BBCDD;	
+}
+
+.memproto {
+	padding: 0;
+	background-color: #D5E2EF;
+	font-weight: bold;
+	-webkit-border-top-left-radius: 8px;
+	-webkit-border-top-right-radius: 8px;
+	-moz-border-radius-topleft: 8px;
+	-moz-border-radius-topright: 8px;
+}
+
+.memdoc {
+	padding: 2px 5px;
+	background-color: #eef3f5;
+	border-top-width: 0;
+	-webkit-border-bottom-left-radius: 8px;
+	-webkit-border-bottom-right-radius: 8px;
+	-moz-border-radius-bottomleft: 8px;
+	-moz-border-radius-bottomright: 8px;
+}
+
+.memdoc p, .memdoc dl, .memdoc ul {
+	margin: 6px 0;
+}
+
+.paramkey {
+	text-align: right;
+}
+
+.paramtype {
+	white-space: nowrap;
+}
+
+.paramname {
+	color: #853E0E;
+	white-space: nowrap;
+}
+.paramname em {
+	font-style: normal;
+}
+
+/* @end */
+
+.search     { color: #003399;
+              font-weight: bold;
+}
+
+form.search {
+              margin-bottom: 0px;
+              margin-top: 0px;
+}
+
+input.search { font-size: 75%;
+               color: #000080;
+               font-weight: normal;
+               background-color: #eeeeff;
+}
+
+td.tiny { 
+	font-size: 75%;
+}
+
+.highlight {
+        background-color:#E2E2FF;
+}
+
+/*---------- ide-eclipse Styles ---------*/
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
+	margin: 0px 0px;
+	padding: -30px -30px -30px -30px;
+	font-weight: normal;
+	font-style: normal;}
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
+
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
+
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
+.sh_styleFromXML{color:#800000;font-weight:bold;}
+/*-------------------------------------------------------*/
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
+* html .snippet-wrap .snippet-hide {bottom:1px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
+-moz-border-radius:0px;
+-webkit-border-radius:0px;
+border-radius:0px;
+box-shadow: 1px 1px px #000;
+-moz-box-shadow: 2px 2px 1px #000;
+-webkit-box-shadow: 1px 1px 1px #000;}
+.snippet-wrap pre.snippet-textonly {padding:1em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:2px;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
+.snippet-wrap li.box-mid {border-width:0 0px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}
+
+/* Layout fixing */
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+.clfix {display: inline-block;}
+.clfix {display: block;}
+* html .clfix {height: 1%;} /* Hides from IE-mac */
+.clfix {zoom:1;} /*for IE 5.5-7*/
+
+.fl {float:left !important;}
+.fr {float:right !important;}
+.cl {clear:both;}
+.rel {position:relative;}
+.abs {position:absolute;}
+.ac {text-align:center !important;}
+.ar {text-align:right !important;}
+.al {text-align:left !important;}
+.at {vertical-align:top !important;}
+.am {vertical-align:middle !important;}
+.ab {vertical-align:bottom;}
+.hand {cursor:pointer;}
+.bgnone {background:none !important;}
+.brnone {border:none !important;}
+.b {font-weight:bold !important;}
+.n {font-weight:normal !important;}
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
+.mt5 {margin-top:5px !important;} 
+/* //Layout fixing */
+
+@media print { .hide, .show { display: none; }}
+
+div#profile {
+    position: relative;
+}
+#profile p {
+	text-align: right;
+}
+
+div#toc_border {
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
+}
+
+#contents li {
+	padding-top: 3px;
+	margin-top: 5px;
+	/* overflow: auto; */
+}
+
+p {
+	/* overflow: auto; */
+}
+
+div.table {
+	/* overflow: auto; */
+}
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/images/4_columns.png b/org.tizen.ui.practices/html/images/4_columns.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/4_columns.png
rename to org.tizen.ui.practices/html/images/4_columns.png
diff --git a/org.tizen.ui.guides/html/images/9patch.png b/org.tizen.ui.practices/html/images/9patch.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/9patch.png
rename to org.tizen.ui.practices/html/images/9patch.png
diff --git a/org.tizen.ui.guides/html/images/9patch_buffer.png b/org.tizen.ui.practices/html/images/9patch_buffer.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/9patch_buffer.png
rename to org.tizen.ui.practices/html/images/9patch_buffer.png
diff --git a/org.tizen.ui.guides/html/images/9patch_resource.png b/org.tizen.ui.practices/html/images/9patch_resource.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/9patch_resource.png
rename to org.tizen.ui.practices/html/images/9patch_resource.png
diff --git a/org.tizen.ui.guides/html/images/9patch_zoomed.png b/org.tizen.ui.practices/html/images/9patch_zoomed.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/9patch_zoomed.png
rename to org.tizen.ui.practices/html/images/9patch_zoomed.png
diff --git a/org.tizen.ui.guides/html/images/accordion_menu.png b/org.tizen.ui.practices/html/images/accordion_menu.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/accordion_menu.png
rename to org.tizen.ui.practices/html/images/accordion_menu.png
diff --git a/org.tizen.ui.guides/html/images/actor_coordinates.png b/org.tizen.ui.practices/html/images/actor_coordinates.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/actor_coordinates.png
rename to org.tizen.ui.practices/html/images/actor_coordinates.png
diff --git a/org.tizen.ui.guides/html/images/actor_position.png b/org.tizen.ui.practices/html/images/actor_position.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/actor_position.png
rename to org.tizen.ui.practices/html/images/actor_position.png
diff --git a/org.tizen.ui.guides/html/images/actor_types.png b/org.tizen.ui.practices/html/images/actor_types.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/actor_types.png
rename to org.tizen.ui.practices/html/images/actor_types.png
diff --git a/org.tizen.ui.practices/html/images/after_resize.png b/org.tizen.ui.practices/html/images/after_resize.png
new file mode 100644
index 0000000..3690528
Binary files /dev/null and b/org.tizen.ui.practices/html/images/after_resize.png differ
diff --git a/org.tizen.ui.guides/html/images/align.png b/org.tizen.ui.practices/html/images/align.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/align.png
rename to org.tizen.ui.practices/html/images/align.png
diff --git a/org.tizen.ui.guides/html/images/align_hints.png b/org.tizen.ui.practices/html/images/align_hints.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/align_hints.png
rename to org.tizen.ui.practices/html/images/align_hints.png
diff --git a/org.tizen.ui.guides/html/images/anchor_point.png b/org.tizen.ui.practices/html/images/anchor_point.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/anchor_point.png
rename to org.tizen.ui.practices/html/images/anchor_point.png
diff --git a/org.tizen.ui.guides/html/images/animation1.png b/org.tizen.ui.practices/html/images/animation1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/animation1.png
rename to org.tizen.ui.practices/html/images/animation1.png
diff --git a/org.tizen.ui.guides/html/images/animation_components.png b/org.tizen.ui.practices/html/images/animation_components.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/animation_components.png
rename to org.tizen.ui.practices/html/images/animation_components.png
diff --git a/org.tizen.ui.guides/html/images/application_page_layout.png b/org.tizen.ui.practices/html/images/application_page_layout.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/application_page_layout.png
rename to org.tizen.ui.practices/html/images/application_page_layout.png
diff --git a/org.tizen.ui.guides/html/images/application_store_sd.png b/org.tizen.ui.practices/html/images/application_store_sd.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/application_store_sd.png
rename to org.tizen.ui.practices/html/images/application_store_sd.png
diff --git a/org.tizen.ui.guides/html/images/applying_color.png b/org.tizen.ui.practices/html/images/applying_color.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/applying_color.png
rename to org.tizen.ui.practices/html/images/applying_color.png
diff --git a/org.tizen.ui.guides/html/images/applying_invisibility.png b/org.tizen.ui.practices/html/images/applying_invisibility.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/applying_invisibility.png
rename to org.tizen.ui.practices/html/images/applying_invisibility.png
diff --git a/org.tizen.ui.guides/html/images/aspect-control-both.png b/org.tizen.ui.practices/html/images/aspect-control-both.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/aspect-control-both.png
rename to org.tizen.ui.practices/html/images/aspect-control-both.png
diff --git a/org.tizen.ui.guides/html/images/aspect-control-horizontal.png b/org.tizen.ui.practices/html/images/aspect-control-horizontal.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/aspect-control-horizontal.png
rename to org.tizen.ui.practices/html/images/aspect-control-horizontal.png
diff --git a/org.tizen.ui.guides/html/images/aspect-control-none.png b/org.tizen.ui.practices/html/images/aspect-control-none.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/aspect-control-none.png
rename to org.tizen.ui.practices/html/images/aspect-control-none.png
diff --git a/org.tizen.ui.guides/html/images/backWearable.png b/org.tizen.ui.practices/html/images/backWearable.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/backWearable.png
rename to org.tizen.ui.practices/html/images/backWearable.png
diff --git a/org.tizen.ui.guides/html/images/background_control_color.png b/org.tizen.ui.practices/html/images/background_control_color.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/background_control_color.png
rename to org.tizen.ui.practices/html/images/background_control_color.png
diff --git a/org.tizen.ui.guides/html/images/background_image.png b/org.tizen.ui.practices/html/images/background_image.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/background_image.png
rename to org.tizen.ui.practices/html/images/background_image.png
diff --git a/org.tizen.ui.guides/html/images/background_image_color.png b/org.tizen.ui.practices/html/images/background_image_color.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/background_image_color.png
rename to org.tizen.ui.practices/html/images/background_image_color.png
diff --git a/org.tizen.ui.guides/html/images/background_order.png b/org.tizen.ui.practices/html/images/background_order.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/background_order.png
rename to org.tizen.ui.practices/html/images/background_order.png
diff --git a/org.tizen.ui.guides/html/images/background_textlabel.png b/org.tizen.ui.practices/html/images/background_textlabel.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/background_textlabel.png
rename to org.tizen.ui.practices/html/images/background_textlabel.png
diff --git a/org.tizen.ui.guides/html/images/base_layout.png b/org.tizen.ui.practices/html/images/base_layout.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/base_layout.png
rename to org.tizen.ui.practices/html/images/base_layout.png
diff --git a/org.tizen.ui.guides/html/images/base_scale.png b/org.tizen.ui.practices/html/images/base_scale.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/base_scale.png
rename to org.tizen.ui.practices/html/images/base_scale.png
diff --git a/org.tizen.ui.guides/html/images/base_scales.png b/org.tizen.ui.practices/html/images/base_scales.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/base_scales.png
rename to org.tizen.ui.practices/html/images/base_scales.png
diff --git a/org.tizen.ui.guides/html/images/basic_layout_480x800.png b/org.tizen.ui.practices/html/images/basic_layout_480x800.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/basic_layout_480x800.png
rename to org.tizen.ui.practices/html/images/basic_layout_480x800.png
diff --git a/org.tizen.ui.guides/html/images/basic_layout_720x1280.png b/org.tizen.ui.practices/html/images/basic_layout_720x1280.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/basic_layout_720x1280.png
rename to org.tizen.ui.practices/html/images/basic_layout_720x1280.png
diff --git a/org.tizen.ui.practices/html/images/before_resize.png b/org.tizen.ui.practices/html/images/before_resize.png
new file mode 100644
index 0000000..4ab2c47
Binary files /dev/null and b/org.tizen.ui.practices/html/images/before_resize.png differ
diff --git a/org.tizen.ui.guides/html/images/bg.png b/org.tizen.ui.practices/html/images/bg.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/bg.png
rename to org.tizen.ui.practices/html/images/bg.png
diff --git a/org.tizen.ui.guides/html/images/bg_tree.png b/org.tizen.ui.practices/html/images/bg_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/bg_tree.png
rename to org.tizen.ui.practices/html/images/bg_tree.png
diff --git a/org.tizen.ui.guides/html/images/bg_util_bar.gif b/org.tizen.ui.practices/html/images/bg_util_bar.gif
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/bg_util_bar.gif
rename to org.tizen.ui.practices/html/images/bg_util_bar.gif
diff --git a/org.tizen.ui.guides/html/images/bg_wn.png b/org.tizen.ui.practices/html/images/bg_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/bg_wn.png
rename to org.tizen.ui.practices/html/images/bg_wn.png
diff --git a/org.tizen.ui.guides/html/images/blue_box.png b/org.tizen.ui.practices/html/images/blue_box.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/blue_box.png
rename to org.tizen.ui.practices/html/images/blue_box.png
diff --git a/org.tizen.ui.guides/html/images/border.png b/org.tizen.ui.practices/html/images/border.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/border.png
rename to org.tizen.ui.practices/html/images/border.png
diff --git a/org.tizen.ui.guides/html/images/bottom.png b/org.tizen.ui.practices/html/images/bottom.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/bottom.png
rename to org.tizen.ui.practices/html/images/bottom.png
diff --git a/org.tizen.ui.guides/html/images/box.png b/org.tizen.ui.practices/html/images/box.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/box.png
rename to org.tizen.ui.practices/html/images/box.png
diff --git a/org.tizen.ui.guides/html/images/box_model_properties.png b/org.tizen.ui.practices/html/images/box_model_properties.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/box_model_properties.png
rename to org.tizen.ui.practices/html/images/box_model_properties.png
diff --git a/org.tizen.ui.guides/html/images/box_model_properties_struct.png b/org.tizen.ui.practices/html/images/box_model_properties_struct.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/box_model_properties_struct.png
rename to org.tizen.ui.practices/html/images/box_model_properties_struct.png
diff --git a/org.tizen.ui.guides/html/images/btn_top.gif b/org.tizen.ui.practices/html/images/btn_top.gif
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/btn_top.gif
rename to org.tizen.ui.practices/html/images/btn_top.gif
diff --git a/org.tizen.ui.guides/html/images/button.png b/org.tizen.ui.practices/html/images/button.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button.png
rename to org.tizen.ui.practices/html/images/button.png
diff --git a/org.tizen.ui.guides/html/images/button_anchor.png b/org.tizen.ui.practices/html/images/button_anchor.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_anchor.png
rename to org.tizen.ui.practices/html/images/button_anchor.png
diff --git a/org.tizen.ui.guides/html/images/button_bottom_o_wn.png b/org.tizen.ui.practices/html/images/button_bottom_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_bottom_o_wn.png
rename to org.tizen.ui.practices/html/images/button_bottom_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/button_circle.png b/org.tizen.ui.practices/html/images/button_circle.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_circle.png
rename to org.tizen.ui.practices/html/images/button_circle.png
diff --git a/org.tizen.ui.guides/html/images/button_default.png b/org.tizen.ui.practices/html/images/button_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_default.png
rename to org.tizen.ui.practices/html/images/button_default.png
diff --git a/org.tizen.ui.guides/html/images/button_default_wn.png b/org.tizen.ui.practices/html/images/button_default_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_default_wn.png
rename to org.tizen.ui.practices/html/images/button_default_wn.png
diff --git a/org.tizen.ui.guides/html/images/button_drawers.png b/org.tizen.ui.practices/html/images/button_drawers.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_drawers.png
rename to org.tizen.ui.practices/html/images/button_drawers.png
diff --git a/org.tizen.ui.guides/html/images/button_dropdown.png b/org.tizen.ui.practices/html/images/button_dropdown.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_dropdown.png
rename to org.tizen.ui.practices/html/images/button_dropdown.png
diff --git a/org.tizen.ui.guides/html/images/button_green_wn.png b/org.tizen.ui.practices/html/images/button_green_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_green_wn.png
rename to org.tizen.ui.practices/html/images/button_green_wn.png
diff --git a/org.tizen.ui.guides/html/images/button_hover_v.png b/org.tizen.ui.practices/html/images/button_hover_v.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_hover_v.png
rename to org.tizen.ui.practices/html/images/button_hover_v.png
diff --git a/org.tizen.ui.guides/html/images/button_hover_v_entry.png b/org.tizen.ui.practices/html/images/button_hover_v_entry.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_hover_v_entry.png
rename to org.tizen.ui.practices/html/images/button_hover_v_entry.png
diff --git a/org.tizen.ui.guides/html/images/button_hoversel.png b/org.tizen.ui.practices/html/images/button_hoversel.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_hoversel.png
rename to org.tizen.ui.practices/html/images/button_hoversel.png
diff --git a/org.tizen.ui.guides/html/images/button_hoversel_entry.png b/org.tizen.ui.practices/html/images/button_hoversel_entry.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_hoversel_entry.png
rename to org.tizen.ui.practices/html/images/button_hoversel_entry.png
diff --git a/org.tizen.ui.guides/html/images/button_next_wn.png b/org.tizen.ui.practices/html/images/button_next_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_next_wn.png
rename to org.tizen.ui.practices/html/images/button_next_wn.png
diff --git a/org.tizen.ui.guides/html/images/button_option.png b/org.tizen.ui.practices/html/images/button_option.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_option.png
rename to org.tizen.ui.practices/html/images/button_option.png
diff --git a/org.tizen.ui.guides/html/images/button_orange_wn.png b/org.tizen.ui.practices/html/images/button_orange_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_orange_wn.png
rename to org.tizen.ui.practices/html/images/button_orange_wn.png
diff --git a/org.tizen.ui.guides/html/images/button_recorder.png b/org.tizen.ui.practices/html/images/button_recorder.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_recorder.png
rename to org.tizen.ui.practices/html/images/button_recorder.png
diff --git a/org.tizen.ui.guides/html/images/button_red_wn.png b/org.tizen.ui.practices/html/images/button_red_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_red_wn.png
rename to org.tizen.ui.practices/html/images/button_red_wn.png
diff --git a/org.tizen.ui.guides/html/images/button_title_cancel.png b/org.tizen.ui.practices/html/images/button_title_cancel.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_title_cancel.png
rename to org.tizen.ui.practices/html/images/button_title_cancel.png
diff --git a/org.tizen.ui.guides/html/images/button_title_done.png b/org.tizen.ui.practices/html/images/button_title_done.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_title_done.png
rename to org.tizen.ui.practices/html/images/button_title_done.png
diff --git a/org.tizen.ui.guides/html/images/button_titleicon_wn.png b/org.tizen.ui.practices/html/images/button_titleicon_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_titleicon_wn.png
rename to org.tizen.ui.practices/html/images/button_titleicon_wn.png
diff --git a/org.tizen.ui.guides/html/images/button_tree.png b/org.tizen.ui.practices/html/images/button_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_tree.png
rename to org.tizen.ui.practices/html/images/button_tree.png
diff --git a/org.tizen.ui.guides/html/images/button_wn.png b/org.tizen.ui.practices/html/images/button_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/button_wn.png
rename to org.tizen.ui.practices/html/images/button_wn.png
diff --git a/org.tizen.ui.guides/html/images/calculator_sd.png b/org.tizen.ui.practices/html/images/calculator_sd.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/calculator_sd.png
rename to org.tizen.ui.practices/html/images/calculator_sd.png
diff --git a/org.tizen.ui.guides/html/images/calling_img_sep.png b/org.tizen.ui.practices/html/images/calling_img_sep.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/calling_img_sep.png
rename to org.tizen.ui.practices/html/images/calling_img_sep.png
diff --git a/org.tizen.ui.guides/html/images/captured_screen1.png b/org.tizen.ui.practices/html/images/captured_screen1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/captured_screen1.png
rename to org.tizen.ui.practices/html/images/captured_screen1.png
diff --git a/org.tizen.ui.guides/html/images/captured_screen2.png b/org.tizen.ui.practices/html/images/captured_screen2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/captured_screen2.png
rename to org.tizen.ui.practices/html/images/captured_screen2.png
diff --git a/org.tizen.ui.guides/html/images/change_text_globally.png b/org.tizen.ui.practices/html/images/change_text_globally.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/change_text_globally.png
rename to org.tizen.ui.practices/html/images/change_text_globally.png
diff --git a/org.tizen.ui.guides/html/images/changed_order.png b/org.tizen.ui.practices/html/images/changed_order.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/changed_order.png
rename to org.tizen.ui.practices/html/images/changed_order.png
diff --git a/org.tizen.ui.guides/html/images/changing_opacity.png b/org.tizen.ui.practices/html/images/changing_opacity.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/changing_opacity.png
rename to org.tizen.ui.practices/html/images/changing_opacity.png
diff --git a/org.tizen.ui.guides/html/images/check.png b/org.tizen.ui.practices/html/images/check.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check.png
rename to org.tizen.ui.practices/html/images/check.png
diff --git a/org.tizen.ui.guides/html/images/check_default.png b/org.tizen.ui.practices/html/images/check_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check_default.png
rename to org.tizen.ui.practices/html/images/check_default.png
diff --git a/org.tizen.ui.guides/html/images/check_default_o_wn.png b/org.tizen.ui.practices/html/images/check_default_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check_default_o_wn.png
rename to org.tizen.ui.practices/html/images/check_default_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/check_default_wn.png b/org.tizen.ui.practices/html/images/check_default_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check_default_wn.png
rename to org.tizen.ui.practices/html/images/check_default_wn.png
diff --git a/org.tizen.ui.guides/html/images/check_favorite.png b/org.tizen.ui.practices/html/images/check_favorite.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check_favorite.png
rename to org.tizen.ui.practices/html/images/check_favorite.png
diff --git a/org.tizen.ui.guides/html/images/check_on_off.png b/org.tizen.ui.practices/html/images/check_on_off.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check_on_off.png
rename to org.tizen.ui.practices/html/images/check_on_off.png
diff --git a/org.tizen.ui.guides/html/images/check_onoff_o_wn.png b/org.tizen.ui.practices/html/images/check_onoff_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check_onoff_o_wn.png
rename to org.tizen.ui.practices/html/images/check_onoff_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/check_onoff_wn.png b/org.tizen.ui.practices/html/images/check_onoff_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check_onoff_wn.png
rename to org.tizen.ui.practices/html/images/check_onoff_wn.png
diff --git a/org.tizen.ui.guides/html/images/check_small_o_wn.png b/org.tizen.ui.practices/html/images/check_small_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check_small_o_wn.png
rename to org.tizen.ui.practices/html/images/check_small_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/check_tree.png b/org.tizen.ui.practices/html/images/check_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check_tree.png
rename to org.tizen.ui.practices/html/images/check_tree.png
diff --git a/org.tizen.ui.guides/html/images/check_wn.png b/org.tizen.ui.practices/html/images/check_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/check_wn.png
rename to org.tizen.ui.practices/html/images/check_wn.png
diff --git a/org.tizen.ui.guides/html/images/checkbox_button.png b/org.tizen.ui.practices/html/images/checkbox_button.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/checkbox_button.png
rename to org.tizen.ui.practices/html/images/checkbox_button.png
diff --git a/org.tizen.ui.guides/html/images/circle_datetime.png b/org.tizen.ui.practices/html/images/circle_datetime.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/circle_datetime.png
rename to org.tizen.ui.practices/html/images/circle_datetime.png
diff --git a/org.tizen.ui.guides/html/images/circle_genlist.png b/org.tizen.ui.practices/html/images/circle_genlist.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/circle_genlist.png
rename to org.tizen.ui.practices/html/images/circle_genlist.png
diff --git a/org.tizen.ui.guides/html/images/circle_progressbar.png b/org.tizen.ui.practices/html/images/circle_progressbar.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/circle_progressbar.png
rename to org.tizen.ui.practices/html/images/circle_progressbar.png
diff --git a/org.tizen.ui.guides/html/images/circle_scroller.png b/org.tizen.ui.practices/html/images/circle_scroller.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/circle_scroller.png
rename to org.tizen.ui.practices/html/images/circle_scroller.png
diff --git a/org.tizen.ui.guides/html/images/circle_slider.png b/org.tizen.ui.practices/html/images/circle_slider.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/circle_slider.png
rename to org.tizen.ui.practices/html/images/circle_slider.png
diff --git a/org.tizen.ui.practices/html/images/circle_spinner.png b/org.tizen.ui.practices/html/images/circle_spinner.png
new file mode 100644
index 0000000..6d228d2
Binary files /dev/null and b/org.tizen.ui.practices/html/images/circle_spinner.png differ
diff --git a/org.tizen.ui.guides/html/images/circular_support.png b/org.tizen.ui.practices/html/images/circular_support.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/circular_support.png
rename to org.tizen.ui.practices/html/images/circular_support.png
diff --git a/org.tizen.ui.guides/html/images/coin_flip_effect.png b/org.tizen.ui.practices/html/images/coin_flip_effect.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/coin_flip_effect.png
rename to org.tizen.ui.practices/html/images/coin_flip_effect.png
diff --git a/org.tizen.ui.guides/html/images/color_colorplane.png b/org.tizen.ui.practices/html/images/color_colorplane.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/color_colorplane.png
rename to org.tizen.ui.practices/html/images/color_colorplane.png
diff --git a/org.tizen.ui.guides/html/images/colorsel.png b/org.tizen.ui.practices/html/images/colorsel.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/colorsel.png
rename to org.tizen.ui.practices/html/images/colorsel.png
diff --git a/org.tizen.ui.guides/html/images/colorselector_tree.png b/org.tizen.ui.practices/html/images/colorselector_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/colorselector_tree.png
rename to org.tizen.ui.practices/html/images/colorselector_tree.png
diff --git a/org.tizen.ui.guides/html/images/column_break.png b/org.tizen.ui.practices/html/images/column_break.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/column_break.png
rename to org.tizen.ui.practices/html/images/column_break.png
diff --git a/org.tizen.ui.guides/html/images/column_gap.png b/org.tizen.ui.practices/html/images/column_gap.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/column_gap.png
rename to org.tizen.ui.practices/html/images/column_gap.png
diff --git a/org.tizen.ui.guides/html/images/column_rule.png b/org.tizen.ui.practices/html/images/column_rule.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/column_rule.png
rename to org.tizen.ui.practices/html/images/column_rule.png
diff --git a/org.tizen.ui.guides/html/images/column_settings.png b/org.tizen.ui.practices/html/images/column_settings.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/column_settings.png
rename to org.tizen.ui.practices/html/images/column_settings.png
diff --git a/org.tizen.ui.guides/html/images/column_span.png b/org.tizen.ui.practices/html/images/column_span.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/column_span.png
rename to org.tizen.ui.practices/html/images/column_span.png
diff --git a/org.tizen.ui.guides/html/images/column_width.png b/org.tizen.ui.practices/html/images/column_width.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/column_width.png
rename to org.tizen.ui.practices/html/images/column_width.png
diff --git a/org.tizen.ui.guides/html/images/conformant.png b/org.tizen.ui.practices/html/images/conformant.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/conformant.png
rename to org.tizen.ui.practices/html/images/conformant.png
diff --git a/org.tizen.ui.guides/html/images/contextual_bottom_o_wn.png b/org.tizen.ui.practices/html/images/contextual_bottom_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/contextual_bottom_o_wn.png
rename to org.tizen.ui.practices/html/images/contextual_bottom_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/contextual_select_o_wn.png b/org.tizen.ui.practices/html/images/contextual_select_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/contextual_select_o_wn.png
rename to org.tizen.ui.practices/html/images/contextual_select_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/contextual_top_o_wn.png b/org.tizen.ui.practices/html/images/contextual_top_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/contextual_top_o_wn.png
rename to org.tizen.ui.practices/html/images/contextual_top_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/contextual_wn.png b/org.tizen.ui.practices/html/images/contextual_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/contextual_wn.png
rename to org.tizen.ui.practices/html/images/contextual_wn.png
diff --git a/org.tizen.ui.guides/html/images/copy_pasting.png b/org.tizen.ui.practices/html/images/copy_pasting.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/copy_pasting.png
rename to org.tizen.ui.practices/html/images/copy_pasting.png
diff --git a/org.tizen.ui.guides/html/images/css_bg1.png b/org.tizen.ui.practices/html/images/css_bg1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/css_bg1.png
rename to org.tizen.ui.practices/html/images/css_bg1.png
diff --git a/org.tizen.ui.guides/html/images/css_bg_tutorial1.png b/org.tizen.ui.practices/html/images/css_bg_tutorial1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/css_bg_tutorial1.png
rename to org.tizen.ui.practices/html/images/css_bg_tutorial1.png
diff --git a/org.tizen.ui.guides/html/images/css_bg_tutorial2.png b/org.tizen.ui.practices/html/images/css_bg_tutorial2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/css_bg_tutorial2.png
rename to org.tizen.ui.practices/html/images/css_bg_tutorial2.png
diff --git a/org.tizen.ui.guides/html/images/css_color_tutorial1.png b/org.tizen.ui.practices/html/images/css_color_tutorial1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/css_color_tutorial1.png
rename to org.tizen.ui.practices/html/images/css_color_tutorial1.png
diff --git a/org.tizen.ui.guides/html/images/css_result.png b/org.tizen.ui.practices/html/images/css_result.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/css_result.png
rename to org.tizen.ui.practices/html/images/css_result.png
diff --git a/org.tizen.ui.guides/html/images/css_transforms1.png b/org.tizen.ui.practices/html/images/css_transforms1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/css_transforms1.png
rename to org.tizen.ui.practices/html/images/css_transforms1.png
diff --git a/org.tizen.ui.guides/html/images/css_transforms2.png b/org.tizen.ui.practices/html/images/css_transforms2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/css_transforms2.png
rename to org.tizen.ui.practices/html/images/css_transforms2.png
diff --git a/org.tizen.ui.guides/html/images/css_transforms5.png b/org.tizen.ui.practices/html/images/css_transforms5.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/css_transforms5.png
rename to org.tizen.ui.practices/html/images/css_transforms5.png
diff --git a/org.tizen.ui.guides/html/images/ctxpopup1.png b/org.tizen.ui.practices/html/images/ctxpopup1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ctxpopup1.png
rename to org.tizen.ui.practices/html/images/ctxpopup1.png
diff --git a/org.tizen.ui.guides/html/images/ctxpopup2.png b/org.tizen.ui.practices/html/images/ctxpopup2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ctxpopup2.png
rename to org.tizen.ui.practices/html/images/ctxpopup2.png
diff --git a/org.tizen.ui.guides/html/images/ctxpopup3.png b/org.tizen.ui.practices/html/images/ctxpopup3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ctxpopup3.png
rename to org.tizen.ui.practices/html/images/ctxpopup3.png
diff --git a/org.tizen.ui.guides/html/images/ctxpopup_default.png b/org.tizen.ui.practices/html/images/ctxpopup_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ctxpopup_default.png
rename to org.tizen.ui.practices/html/images/ctxpopup_default.png
diff --git a/org.tizen.ui.guides/html/images/ctxpopup_dropdown.png b/org.tizen.ui.practices/html/images/ctxpopup_dropdown.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ctxpopup_dropdown.png
rename to org.tizen.ui.practices/html/images/ctxpopup_dropdown.png
diff --git a/org.tizen.ui.guides/html/images/ctxpopup_dropdown_label.png b/org.tizen.ui.practices/html/images/ctxpopup_dropdown_label.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ctxpopup_dropdown_label.png
rename to org.tizen.ui.practices/html/images/ctxpopup_dropdown_label.png
diff --git a/org.tizen.ui.guides/html/images/ctxpopup_tree.png b/org.tizen.ui.practices/html/images/ctxpopup_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ctxpopup_tree.png
rename to org.tizen.ui.practices/html/images/ctxpopup_tree.png
diff --git a/org.tizen.ui.guides/html/images/ctxpopup_wn.png b/org.tizen.ui.practices/html/images/ctxpopup_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ctxpopup_wn.png
rename to org.tizen.ui.practices/html/images/ctxpopup_wn.png
diff --git a/org.tizen.ui.guides/html/images/dali_component.png b/org.tizen.ui.practices/html/images/dali_component.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/dali_component.png
rename to org.tizen.ui.practices/html/images/dali_component.png
diff --git a/org.tizen.ui.practices/html/images/dali_threads.png b/org.tizen.ui.practices/html/images/dali_threads.png
new file mode 100644
index 0000000..8010ca6
Binary files /dev/null and b/org.tizen.ui.practices/html/images/dali_threads.png differ
diff --git a/org.tizen.ui.guides/html/images/date2.png b/org.tizen.ui.practices/html/images/date2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/date2.png
rename to org.tizen.ui.practices/html/images/date2.png
diff --git a/org.tizen.ui.guides/html/images/datetime_date_layout.png b/org.tizen.ui.practices/html/images/datetime_date_layout.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/datetime_date_layout.png
rename to org.tizen.ui.practices/html/images/datetime_date_layout.png
diff --git a/org.tizen.ui.guides/html/images/datetime_date_o_wn.png b/org.tizen.ui.practices/html/images/datetime_date_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/datetime_date_o_wn.png
rename to org.tizen.ui.practices/html/images/datetime_date_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/datetime_date_wn.png b/org.tizen.ui.practices/html/images/datetime_date_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/datetime_date_wn.png
rename to org.tizen.ui.practices/html/images/datetime_date_wn.png
diff --git a/org.tizen.ui.guides/html/images/datetime_time_24h.png b/org.tizen.ui.practices/html/images/datetime_time_24h.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/datetime_time_24h.png
rename to org.tizen.ui.practices/html/images/datetime_time_24h.png
diff --git a/org.tizen.ui.guides/html/images/datetime_time_layout.png b/org.tizen.ui.practices/html/images/datetime_time_layout.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/datetime_time_layout.png
rename to org.tizen.ui.practices/html/images/datetime_time_layout.png
diff --git a/org.tizen.ui.guides/html/images/datetime_time_o_wn.png b/org.tizen.ui.practices/html/images/datetime_time_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/datetime_time_o_wn.png
rename to org.tizen.ui.practices/html/images/datetime_time_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/datetime_time_wn.png b/org.tizen.ui.practices/html/images/datetime_time_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/datetime_time_wn.png
rename to org.tizen.ui.practices/html/images/datetime_time_wn.png
diff --git a/org.tizen.ui.guides/html/images/datetime_tree.png b/org.tizen.ui.practices/html/images/datetime_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/datetime_tree.png
rename to org.tizen.ui.practices/html/images/datetime_tree.png
diff --git a/org.tizen.ui.guides/html/images/datetime_wn.png b/org.tizen.ui.practices/html/images/datetime_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/datetime_wn.png
rename to org.tizen.ui.practices/html/images/datetime_wn.png
diff --git a/org.tizen.ui.guides/html/images/default_order.png b/org.tizen.ui.practices/html/images/default_order.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/default_order.png
rename to org.tizen.ui.practices/html/images/default_order.png
diff --git a/org.tizen.ui.guides/html/images/depth.png b/org.tizen.ui.practices/html/images/depth.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/depth.png
rename to org.tizen.ui.practices/html/images/depth.png
diff --git a/org.tizen.ui.guides/html/images/dimension_dependency.png b/org.tizen.ui.practices/html/images/dimension_dependency.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/dimension_dependency.png
rename to org.tizen.ui.practices/html/images/dimension_dependency.png
diff --git a/org.tizen.ui.guides/html/images/display_text_classes.png b/org.tizen.ui.practices/html/images/display_text_classes.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/display_text_classes.png
rename to org.tizen.ui.practices/html/images/display_text_classes.png
diff --git a/org.tizen.ui.guides/html/images/dragdrop.png b/org.tizen.ui.practices/html/images/dragdrop.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/dragdrop.png
rename to org.tizen.ui.practices/html/images/dragdrop.png
diff --git a/org.tizen.ui.guides/html/images/dynamic_layout_480x800.png b/org.tizen.ui.practices/html/images/dynamic_layout_480x800.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/dynamic_layout_480x800.png
rename to org.tizen.ui.practices/html/images/dynamic_layout_480x800.png
diff --git a/org.tizen.ui.guides/html/images/dynamic_layout_720x1280.png b/org.tizen.ui.practices/html/images/dynamic_layout_720x1280.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/dynamic_layout_720x1280.png
rename to org.tizen.ui.practices/html/images/dynamic_layout_720x1280.png
diff --git a/org.tizen.ui.guides/html/images/edc_masking.png b/org.tizen.ui.practices/html/images/edc_masking.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/edc_masking.png
rename to org.tizen.ui.practices/html/images/edc_masking.png
diff --git a/org.tizen.ui.guides/html/images/edje_color.png b/org.tizen.ui.practices/html/images/edje_color.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/edje_color.png
rename to org.tizen.ui.practices/html/images/edje_color.png
diff --git a/org.tizen.ui.guides/html/images/edje_message.png b/org.tizen.ui.practices/html/images/edje_message.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/edje_message.png
rename to org.tizen.ui.practices/html/images/edje_message.png
diff --git a/org.tizen.ui.guides/html/images/edje_object_scales.png b/org.tizen.ui.practices/html/images/edje_object_scales.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/edje_object_scales.png
rename to org.tizen.ui.practices/html/images/edje_object_scales.png
diff --git a/org.tizen.ui.guides/html/images/edje_signal1.png b/org.tizen.ui.practices/html/images/edje_signal1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/edje_signal1.png
rename to org.tizen.ui.practices/html/images/edje_signal1.png
diff --git a/org.tizen.ui.guides/html/images/edje_signal2.png b/org.tizen.ui.practices/html/images/edje_signal2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/edje_signal2.png
rename to org.tizen.ui.practices/html/images/edje_signal2.png
diff --git a/org.tizen.ui.guides/html/images/edje_text_main.png b/org.tizen.ui.practices/html/images/edje_text_main.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/edje_text_main.png
rename to org.tizen.ui.practices/html/images/edje_text_main.png
diff --git a/org.tizen.ui.guides/html/images/efl_complex_clock.png b/org.tizen.ui.practices/html/images/efl_complex_clock.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/efl_complex_clock.png
rename to org.tizen.ui.practices/html/images/efl_complex_clock.png
diff --git a/org.tizen.ui.guides/html/images/efl_complex_clock_tree.png b/org.tizen.ui.practices/html/images/efl_complex_clock_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/efl_complex_clock_tree.png
rename to org.tizen.ui.practices/html/images/efl_complex_clock_tree.png
diff --git a/org.tizen.ui.guides/html/images/efl_layers.png b/org.tizen.ui.practices/html/images/efl_layers.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/efl_layers.png
rename to org.tizen.ui.practices/html/images/efl_layers.png
diff --git a/org.tizen.ui.guides/html/images/efl_notilevels.png b/org.tizen.ui.practices/html/images/efl_notilevels.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/efl_notilevels.png
rename to org.tizen.ui.practices/html/images/efl_notilevels.png
diff --git a/org.tizen.ui.guides/html/images/efl_phone.png b/org.tizen.ui.practices/html/images/efl_phone.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/efl_phone.png
rename to org.tizen.ui.practices/html/images/efl_phone.png
diff --git a/org.tizen.ui.guides/html/images/efl_simple_clock.png b/org.tizen.ui.practices/html/images/efl_simple_clock.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/efl_simple_clock.png
rename to org.tizen.ui.practices/html/images/efl_simple_clock.png
diff --git a/org.tizen.ui.guides/html/images/efl_simple_clock_tree.png b/org.tizen.ui.practices/html/images/efl_simple_clock_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/efl_simple_clock_tree.png
rename to org.tizen.ui.practices/html/images/efl_simple_clock_tree.png
diff --git a/org.tizen.ui.guides/html/images/efl_windowlayer.png b/org.tizen.ui.practices/html/images/efl_windowlayer.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/efl_windowlayer.png
rename to org.tizen.ui.practices/html/images/efl_windowlayer.png
diff --git a/org.tizen.ui.guides/html/images/efllibs.png b/org.tizen.ui.practices/html/images/efllibs.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/efllibs.png
rename to org.tizen.ui.practices/html/images/efllibs.png
diff --git a/org.tizen.ui.guides/html/images/elementary.png b/org.tizen.ui.practices/html/images/elementary.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/elementary.png
rename to org.tizen.ui.practices/html/images/elementary.png
diff --git a/org.tizen.ui.guides/html/images/elementary_app.png b/org.tizen.ui.practices/html/images/elementary_app.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/elementary_app.png
rename to org.tizen.ui.practices/html/images/elementary_app.png
diff --git a/org.tizen.ui.guides/html/images/email_sample.png b/org.tizen.ui.practices/html/images/email_sample.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/email_sample.png
rename to org.tizen.ui.practices/html/images/email_sample.png
diff --git a/org.tizen.ui.guides/html/images/empty_window.png b/org.tizen.ui.practices/html/images/empty_window.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/empty_window.png
rename to org.tizen.ui.practices/html/images/empty_window.png
diff --git a/org.tizen.ui.guides/html/images/enlarge_low_res_image.png b/org.tizen.ui.practices/html/images/enlarge_low_res_image.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/enlarge_low_res_image.png
rename to org.tizen.ui.practices/html/images/enlarge_low_res_image.png
diff --git a/org.tizen.ui.guides/html/images/entry.png b/org.tizen.ui.practices/html/images/entry.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/entry.png
rename to org.tizen.ui.practices/html/images/entry.png
diff --git a/org.tizen.ui.guides/html/images/entry2.png b/org.tizen.ui.practices/html/images/entry2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/entry2.png
rename to org.tizen.ui.practices/html/images/entry2.png
diff --git a/org.tizen.ui.guides/html/images/entry2_wn.png b/org.tizen.ui.practices/html/images/entry2_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/entry2_wn.png
rename to org.tizen.ui.practices/html/images/entry2_wn.png
diff --git a/org.tizen.ui.guides/html/images/entry_default.png b/org.tizen.ui.practices/html/images/entry_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/entry_default.png
rename to org.tizen.ui.practices/html/images/entry_default.png
diff --git a/org.tizen.ui.guides/html/images/entry_default_wn.png b/org.tizen.ui.practices/html/images/entry_default_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/entry_default_wn.png
rename to org.tizen.ui.practices/html/images/entry_default_wn.png
diff --git a/org.tizen.ui.guides/html/images/entry_tree.png b/org.tizen.ui.practices/html/images/entry_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/entry_tree.png
rename to org.tizen.ui.practices/html/images/entry_tree.png
diff --git a/org.tizen.ui.guides/html/images/entry_wn.png b/org.tizen.ui.practices/html/images/entry_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/entry_wn.png
rename to org.tizen.ui.practices/html/images/entry_wn.png
diff --git a/org.tizen.ui.guides/html/images/evas_advanced.png b/org.tizen.ui.practices/html/images/evas_advanced.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_advanced.png
rename to org.tizen.ui.practices/html/images/evas_advanced.png
diff --git a/org.tizen.ui.guides/html/images/evas_blur1.png b/org.tizen.ui.practices/html/images/evas_blur1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_blur1.png
rename to org.tizen.ui.practices/html/images/evas_blur1.png
diff --git a/org.tizen.ui.guides/html/images/evas_blur2.png b/org.tizen.ui.practices/html/images/evas_blur2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_blur2.png
rename to org.tizen.ui.practices/html/images/evas_blur2.png
diff --git a/org.tizen.ui.guides/html/images/evas_image_loader.png b/org.tizen.ui.practices/html/images/evas_image_loader.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_image_loader.png
rename to org.tizen.ui.practices/html/images/evas_image_loader.png
diff --git a/org.tizen.ui.guides/html/images/evas_image_scaling.png b/org.tizen.ui.practices/html/images/evas_image_scaling.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_image_scaling.png
rename to org.tizen.ui.practices/html/images/evas_image_scaling.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_1.png b/org.tizen.ui.practices/html/images/evas_map_1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_1.png
rename to org.tizen.ui.practices/html/images/evas_map_1.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_10.png b/org.tizen.ui.practices/html/images/evas_map_10.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_10.png
rename to org.tizen.ui.practices/html/images/evas_map_10.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_11.png b/org.tizen.ui.practices/html/images/evas_map_11.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_11.png
rename to org.tizen.ui.practices/html/images/evas_map_11.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_2.png b/org.tizen.ui.practices/html/images/evas_map_2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_2.png
rename to org.tizen.ui.practices/html/images/evas_map_2.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_3.png b/org.tizen.ui.practices/html/images/evas_map_3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_3.png
rename to org.tizen.ui.practices/html/images/evas_map_3.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_4.png b/org.tizen.ui.practices/html/images/evas_map_4.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_4.png
rename to org.tizen.ui.practices/html/images/evas_map_4.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_5.png b/org.tizen.ui.practices/html/images/evas_map_5.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_5.png
rename to org.tizen.ui.practices/html/images/evas_map_5.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_6.png b/org.tizen.ui.practices/html/images/evas_map_6.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_6.png
rename to org.tizen.ui.practices/html/images/evas_map_6.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_7.png b/org.tizen.ui.practices/html/images/evas_map_7.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_7.png
rename to org.tizen.ui.practices/html/images/evas_map_7.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_8.png b/org.tizen.ui.practices/html/images/evas_map_8.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_8.png
rename to org.tizen.ui.practices/html/images/evas_map_8.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_9.png b/org.tizen.ui.practices/html/images/evas_map_9.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_9.png
rename to org.tizen.ui.practices/html/images/evas_map_9.png
diff --git a/org.tizen.ui.guides/html/images/evas_map_effect.png b/org.tizen.ui.practices/html/images/evas_map_effect.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_map_effect.png
rename to org.tizen.ui.practices/html/images/evas_map_effect.png
diff --git a/org.tizen.ui.guides/html/images/evas_object_display.png b/org.tizen.ui.practices/html/images/evas_object_display.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_object_display.png
rename to org.tizen.ui.practices/html/images/evas_object_display.png
diff --git a/org.tizen.ui.guides/html/images/evas_partial_update.png b/org.tizen.ui.practices/html/images/evas_partial_update.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_partial_update.png
rename to org.tizen.ui.practices/html/images/evas_partial_update.png
diff --git a/org.tizen.ui.guides/html/images/evas_scaling1.png b/org.tizen.ui.practices/html/images/evas_scaling1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_scaling1.png
rename to org.tizen.ui.practices/html/images/evas_scaling1.png
diff --git a/org.tizen.ui.guides/html/images/evas_scaling2.png b/org.tizen.ui.practices/html/images/evas_scaling2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_scaling2.png
rename to org.tizen.ui.practices/html/images/evas_scaling2.png
diff --git a/org.tizen.ui.guides/html/images/evas_scaling3.png b/org.tizen.ui.practices/html/images/evas_scaling3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_scaling3.png
rename to org.tizen.ui.practices/html/images/evas_scaling3.png
diff --git a/org.tizen.ui.guides/html/images/evas_smooth_disabled.png b/org.tizen.ui.practices/html/images/evas_smooth_disabled.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_smooth_disabled.png
rename to org.tizen.ui.practices/html/images/evas_smooth_disabled.png
diff --git a/org.tizen.ui.guides/html/images/evas_smooth_enabled.png b/org.tizen.ui.practices/html/images/evas_smooth_enabled.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/evas_smooth_enabled.png
rename to org.tizen.ui.practices/html/images/evas_smooth_enabled.png
diff --git a/org.tizen.ui.guides/html/images/events.png b/org.tizen.ui.practices/html/images/events.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/events.png
rename to org.tizen.ui.practices/html/images/events.png
diff --git a/org.tizen.ui.guides/html/images/events2.png b/org.tizen.ui.practices/html/images/events2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/events2.png
rename to org.tizen.ui.practices/html/images/events2.png
diff --git a/org.tizen.ui.guides/html/images/events3.png b/org.tizen.ui.practices/html/images/events3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/events3.png
rename to org.tizen.ui.practices/html/images/events3.png
diff --git a/org.tizen.ui.guides/html/images/events_flow.png b/org.tizen.ui.practices/html/images/events_flow.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/events_flow.png
rename to org.tizen.ui.practices/html/images/events_flow.png
diff --git a/org.tizen.ui.guides/html/images/events_scope.png b/org.tizen.ui.practices/html/images/events_scope.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/events_scope.png
rename to org.tizen.ui.practices/html/images/events_scope.png
diff --git a/org.tizen.ui.guides/html/images/events_using_css3.png b/org.tizen.ui.practices/html/images/events_using_css3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/events_using_css3.png
rename to org.tizen.ui.practices/html/images/events_using_css3.png
diff --git a/org.tizen.ui.guides/html/images/events_using_javascript.png b/org.tizen.ui.practices/html/images/events_using_javascript.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/events_using_javascript.png
rename to org.tizen.ui.practices/html/images/events_using_javascript.png
diff --git a/org.tizen.ui.guides/html/images/fade_affect_animation.png b/org.tizen.ui.practices/html/images/fade_affect_animation.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/fade_affect_animation.png
rename to org.tizen.ui.practices/html/images/fade_affect_animation.png
diff --git a/org.tizen.ui.practices/html/images/fallback_imageset.png b/org.tizen.ui.practices/html/images/fallback_imageset.png
new file mode 100644
index 0000000..1f56355
Binary files /dev/null and b/org.tizen.ui.practices/html/images/fallback_imageset.png differ
diff --git a/org.tizen.ui.guides/html/images/fill_to_parent.png b/org.tizen.ui.practices/html/images/fill_to_parent.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/fill_to_parent.png
rename to org.tizen.ui.practices/html/images/fill_to_parent.png
diff --git a/org.tizen.ui.guides/html/images/first_screen_edc.png b/org.tizen.ui.practices/html/images/first_screen_edc.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/first_screen_edc.png
rename to org.tizen.ui.practices/html/images/first_screen_edc.png
diff --git a/org.tizen.ui.guides/html/images/fit_to_children.png b/org.tizen.ui.practices/html/images/fit_to_children.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/fit_to_children.png
rename to org.tizen.ui.practices/html/images/fit_to_children.png
diff --git a/org.tizen.ui.guides/html/images/fixed.png b/org.tizen.ui.practices/html/images/fixed.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/fixed.png
rename to org.tizen.ui.practices/html/images/fixed.png
diff --git a/org.tizen.ui.guides/html/images/flex_container.png b/org.tizen.ui.practices/html/images/flex_container.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/flex_container.png
rename to org.tizen.ui.practices/html/images/flex_container.png
diff --git a/org.tizen.ui.guides/html/images/flexcontainer_properties.png b/org.tizen.ui.practices/html/images/flexcontainer_properties.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/flexcontainer_properties.png
rename to org.tizen.ui.practices/html/images/flexcontainer_properties.png
diff --git a/org.tizen.ui.guides/html/images/flexible_box_alignment.png b/org.tizen.ui.practices/html/images/flexible_box_alignment.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/flexible_box_alignment.png
rename to org.tizen.ui.practices/html/images/flexible_box_alignment.png
diff --git a/org.tizen.ui.guides/html/images/flexible_default_structure.png b/org.tizen.ui.practices/html/images/flexible_default_structure.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/flexible_default_structure.png
rename to org.tizen.ui.practices/html/images/flexible_default_structure.png
diff --git a/org.tizen.ui.guides/html/images/flexible_screen_size.png b/org.tizen.ui.practices/html/images/flexible_screen_size.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/flexible_screen_size.png
rename to org.tizen.ui.practices/html/images/flexible_screen_size.png
diff --git a/org.tizen.ui.guides/html/images/flexitem_properties.png b/org.tizen.ui.practices/html/images/flexitem_properties.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/flexitem_properties.png
rename to org.tizen.ui.practices/html/images/flexitem_properties.png
diff --git a/org.tizen.ui.guides/html/images/flip_tree.png b/org.tizen.ui.practices/html/images/flip_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/flip_tree.png
rename to org.tizen.ui.practices/html/images/flip_tree.png
diff --git a/org.tizen.ui.guides/html/images/flipsel_default.png b/org.tizen.ui.practices/html/images/flipsel_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/flipsel_default.png
rename to org.tizen.ui.practices/html/images/flipsel_default.png
diff --git a/org.tizen.ui.guides/html/images/focal_length.png b/org.tizen.ui.practices/html/images/focal_length.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/focal_length.png
rename to org.tizen.ui.practices/html/images/focal_length.png
diff --git a/org.tizen.ui.guides/html/images/font_face.png b/org.tizen.ui.practices/html/images/font_face.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/font_face.png
rename to org.tizen.ui.practices/html/images/font_face.png
diff --git a/org.tizen.ui.guides/html/images/font_properties.png b/org.tizen.ui.practices/html/images/font_properties.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/font_properties.png
rename to org.tizen.ui.practices/html/images/font_properties.png
diff --git a/org.tizen.ui.guides/html/images/form_contact_layout.png b/org.tizen.ui.practices/html/images/form_contact_layout.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/form_contact_layout.png
rename to org.tizen.ui.practices/html/images/form_contact_layout.png
diff --git a/org.tizen.ui.guides/html/images/gengrid.png b/org.tizen.ui.practices/html/images/gengrid.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gengrid.png
rename to org.tizen.ui.practices/html/images/gengrid.png
diff --git a/org.tizen.ui.guides/html/images/gengrid_album_pre.png b/org.tizen.ui.practices/html/images/gengrid_album_pre.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gengrid_album_pre.png
rename to org.tizen.ui.practices/html/images/gengrid_album_pre.png
diff --git a/org.tizen.ui.guides/html/images/gengrid_block.png b/org.tizen.ui.practices/html/images/gengrid_block.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gengrid_block.png
rename to org.tizen.ui.practices/html/images/gengrid_block.png
diff --git a/org.tizen.ui.guides/html/images/gengrid_def.png b/org.tizen.ui.practices/html/images/gengrid_def.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gengrid_def.png
rename to org.tizen.ui.practices/html/images/gengrid_def.png
diff --git a/org.tizen.ui.guides/html/images/gengrid_def_gridtext.png b/org.tizen.ui.practices/html/images/gengrid_def_gridtext.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gengrid_def_gridtext.png
rename to org.tizen.ui.practices/html/images/gengrid_def_gridtext.png
diff --git a/org.tizen.ui.guides/html/images/gengrid_def_gridtext2.png b/org.tizen.ui.practices/html/images/gengrid_def_gridtext2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gengrid_def_gridtext2.png
rename to org.tizen.ui.practices/html/images/gengrid_def_gridtext2.png
diff --git a/org.tizen.ui.guides/html/images/gengrid_def_style.png b/org.tizen.ui.practices/html/images/gengrid_def_style.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gengrid_def_style.png
rename to org.tizen.ui.practices/html/images/gengrid_def_style.png
diff --git a/org.tizen.ui.guides/html/images/gengrid_default.png b/org.tizen.ui.practices/html/images/gengrid_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gengrid_default.png
rename to org.tizen.ui.practices/html/images/gengrid_default.png
diff --git a/org.tizen.ui.guides/html/images/gengrid_grp_index.png b/org.tizen.ui.practices/html/images/gengrid_grp_index.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gengrid_grp_index.png
rename to org.tizen.ui.practices/html/images/gengrid_grp_index.png
diff --git a/org.tizen.ui.guides/html/images/gengrid_tree.png b/org.tizen.ui.practices/html/images/gengrid_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gengrid_tree.png
rename to org.tizen.ui.practices/html/images/gengrid_tree.png
diff --git a/org.tizen.ui.guides/html/images/genlist.png b/org.tizen.ui.practices/html/images/genlist.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist.png
rename to org.tizen.ui.practices/html/images/genlist.png
diff --git a/org.tizen.ui.guides/html/images/genlist1_wn.png b/org.tizen.ui.practices/html/images/genlist1_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist1_wn.png
rename to org.tizen.ui.practices/html/images/genlist1_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist2_wn.png b/org.tizen.ui.practices/html/images/genlist2_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist2_wn.png
rename to org.tizen.ui.practices/html/images/genlist2_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist3_wn.png b/org.tizen.ui.practices/html/images/genlist3_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist3_wn.png
rename to org.tizen.ui.practices/html/images/genlist3_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_1line.png b/org.tizen.ui.practices/html/images/genlist_1line.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_1line.png
rename to org.tizen.ui.practices/html/images/genlist_1line.png
diff --git a/org.tizen.ui.guides/html/images/genlist_1text1icon1_o_wn.png b/org.tizen.ui.practices/html/images/genlist_1text1icon1_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_1text1icon1_o_wn.png
rename to org.tizen.ui.practices/html/images/genlist_1text1icon1_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_1text1icon1_wn.png b/org.tizen.ui.practices/html/images/genlist_1text1icon1_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_1text1icon1_wn.png
rename to org.tizen.ui.practices/html/images/genlist_1text1icon1_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_1text1icon_o_wn.png b/org.tizen.ui.practices/html/images/genlist_1text1icon_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_1text1icon_o_wn.png
rename to org.tizen.ui.practices/html/images/genlist_1text1icon_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_1text1icon_wn.png b/org.tizen.ui.practices/html/images/genlist_1text1icon_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_1text1icon_wn.png
rename to org.tizen.ui.practices/html/images/genlist_1text1icon_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_1text1icondivider_o_wn.png b/org.tizen.ui.practices/html/images/genlist_1text1icondivider_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_1text1icondivider_o_wn.png
rename to org.tizen.ui.practices/html/images/genlist_1text1icondivider_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_1text1icondivider_wn.png b/org.tizen.ui.practices/html/images/genlist_1text1icondivider_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_1text1icondivider_wn.png
rename to org.tizen.ui.practices/html/images/genlist_1text1icondivider_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_1text_o_wn.png b/org.tizen.ui.practices/html/images/genlist_1text_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_1text_o_wn.png
rename to org.tizen.ui.practices/html/images/genlist_1text_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_1text_wn.png b/org.tizen.ui.practices/html/images/genlist_1text_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_1text_wn.png
rename to org.tizen.ui.practices/html/images/genlist_1text_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_2text1_wn.png b/org.tizen.ui.practices/html/images/genlist_2text1_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_2text1_wn.png
rename to org.tizen.ui.practices/html/images/genlist_2text1_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_2text1icon1_o_wn.png b/org.tizen.ui.practices/html/images/genlist_2text1icon1_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_2text1icon1_o_wn.png
rename to org.tizen.ui.practices/html/images/genlist_2text1icon1_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_2text1icon1_wn.png b/org.tizen.ui.practices/html/images/genlist_2text1icon1_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_2text1icon1_wn.png
rename to org.tizen.ui.practices/html/images/genlist_2text1icon1_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_2text_o_wn.png b/org.tizen.ui.practices/html/images/genlist_2text_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_2text_o_wn.png
rename to org.tizen.ui.practices/html/images/genlist_2text_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_2text_wn.png b/org.tizen.ui.practices/html/images/genlist_2text_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_2text_wn.png
rename to org.tizen.ui.practices/html/images/genlist_2text_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_def_o_wn.png b/org.tizen.ui.practices/html/images/genlist_def_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_def_o_wn.png
rename to org.tizen.ui.practices/html/images/genlist_def_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_def_wn.png b/org.tizen.ui.practices/html/images/genlist_def_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_def_wn.png
rename to org.tizen.ui.practices/html/images/genlist_def_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_edit_o_wn.png b/org.tizen.ui.practices/html/images/genlist_edit_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_edit_o_wn.png
rename to org.tizen.ui.practices/html/images/genlist_edit_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_group_o_wn.png b/org.tizen.ui.practices/html/images/genlist_group_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_group_o_wn.png
rename to org.tizen.ui.practices/html/images/genlist_group_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_group_wn.png b/org.tizen.ui.practices/html/images/genlist_group_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_group_wn.png
rename to org.tizen.ui.practices/html/images/genlist_group_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_htree.png b/org.tizen.ui.practices/html/images/genlist_htree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_htree.png
rename to org.tizen.ui.practices/html/images/genlist_htree.png
diff --git a/org.tizen.ui.guides/html/images/genlist_item.png b/org.tizen.ui.practices/html/images/genlist_item.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_item.png
rename to org.tizen.ui.practices/html/images/genlist_item.png
diff --git a/org.tizen.ui.guides/html/images/genlist_multi.png b/org.tizen.ui.practices/html/images/genlist_multi.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_multi.png
rename to org.tizen.ui.practices/html/images/genlist_multi.png
diff --git a/org.tizen.ui.guides/html/images/genlist_multi1_wn.png b/org.tizen.ui.practices/html/images/genlist_multi1_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_multi1_wn.png
rename to org.tizen.ui.practices/html/images/genlist_multi1_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_multi2_wn.png b/org.tizen.ui.practices/html/images/genlist_multi2_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_multi2_wn.png
rename to org.tizen.ui.practices/html/images/genlist_multi2_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_title_o_wn.png b/org.tizen.ui.practices/html/images/genlist_title_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_title_o_wn.png
rename to org.tizen.ui.practices/html/images/genlist_title_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/genlist_tree.png b/org.tizen.ui.practices/html/images/genlist_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_tree.png
rename to org.tizen.ui.practices/html/images/genlist_tree.png
diff --git a/org.tizen.ui.guides/html/images/genlist_wn.png b/org.tizen.ui.practices/html/images/genlist_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/genlist_wn.png
rename to org.tizen.ui.practices/html/images/genlist_wn.png
diff --git a/org.tizen.ui.guides/html/images/gesture_view2.png b/org.tizen.ui.practices/html/images/gesture_view2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gesture_view2.png
rename to org.tizen.ui.practices/html/images/gesture_view2.png
diff --git a/org.tizen.ui.guides/html/images/gl-default.png b/org.tizen.ui.practices/html/images/gl-default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gl-default.png
rename to org.tizen.ui.practices/html/images/gl-default.png
diff --git a/org.tizen.ui.guides/html/images/gl-double-label.png b/org.tizen.ui.practices/html/images/gl-double-label.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gl-double-label.png
rename to org.tizen.ui.practices/html/images/gl-double-label.png
diff --git a/org.tizen.ui.guides/html/images/gl-end-icon.png b/org.tizen.ui.practices/html/images/gl-end-icon.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/gl-end-icon.png
rename to org.tizen.ui.practices/html/images/gl-end-icon.png
diff --git a/org.tizen.ui.guides/html/images/global_scales.png b/org.tizen.ui.practices/html/images/global_scales.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/global_scales.png
rename to org.tizen.ui.practices/html/images/global_scales.png
diff --git a/org.tizen.ui.guides/html/images/globalize_folder_structure.png b/org.tizen.ui.practices/html/images/globalize_folder_structure.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/globalize_folder_structure.png
rename to org.tizen.ui.practices/html/images/globalize_folder_structure.png
diff --git a/org.tizen.ui.guides/html/images/globalize_folder_structure_main.png b/org.tizen.ui.practices/html/images/globalize_folder_structure_main.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/globalize_folder_structure_main.png
rename to org.tizen.ui.practices/html/images/globalize_folder_structure_main.png
diff --git a/org.tizen.ui.guides/html/images/glview.png b/org.tizen.ui.practices/html/images/glview.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/glview.png
rename to org.tizen.ui.practices/html/images/glview.png
diff --git a/org.tizen.ui.guides/html/images/glview_tree.png b/org.tizen.ui.practices/html/images/glview_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/glview_tree.png
rename to org.tizen.ui.practices/html/images/glview_tree.png
diff --git a/org.tizen.ui.guides/html/images/glview_wn.png b/org.tizen.ui.practices/html/images/glview_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/glview_wn.png
rename to org.tizen.ui.practices/html/images/glview_wn.png
diff --git a/org.tizen.ui.guides/html/images/google_cardboard.png b/org.tizen.ui.practices/html/images/google_cardboard.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/google_cardboard.png
rename to org.tizen.ui.practices/html/images/google_cardboard.png
diff --git a/org.tizen.ui.guides/html/images/grid.png b/org.tizen.ui.practices/html/images/grid.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/grid.png
rename to org.tizen.ui.practices/html/images/grid.png
diff --git a/org.tizen.ui.guides/html/images/hello_world_dali.png b/org.tizen.ui.practices/html/images/hello_world_dali.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/hello_world_dali.png
rename to org.tizen.ui.practices/html/images/hello_world_dali.png
diff --git a/org.tizen.ui.guides/html/images/ico_arr_hidden.gif b/org.tizen.ui.practices/html/images/ico_arr_hidden.gif
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ico_arr_hidden.gif
rename to org.tizen.ui.practices/html/images/ico_arr_hidden.gif
diff --git a/org.tizen.ui.guides/html/images/ico_bullet_2_7.gif b/org.tizen.ui.practices/html/images/ico_bullet_2_7.gif
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ico_bullet_2_7.gif
rename to org.tizen.ui.practices/html/images/ico_bullet_2_7.gif
diff --git a/org.tizen.ui.guides/html/images/icon.png b/org.tizen.ui.practices/html/images/icon.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon.png
rename to org.tizen.ui.practices/html/images/icon.png
diff --git a/org.tizen.ui.guides/html/images/icon_apps.png b/org.tizen.ui.practices/html/images/icon_apps.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_apps.png
rename to org.tizen.ui.practices/html/images/icon_apps.png
diff --git a/org.tizen.ui.guides/html/images/icon_arrowdown.png b/org.tizen.ui.practices/html/images/icon_arrowdown.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_arrowdown.png
rename to org.tizen.ui.practices/html/images/icon_arrowdown.png
diff --git a/org.tizen.ui.guides/html/images/icon_arrowleft.png b/org.tizen.ui.practices/html/images/icon_arrowleft.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_arrowleft.png
rename to org.tizen.ui.practices/html/images/icon_arrowleft.png
diff --git a/org.tizen.ui.guides/html/images/icon_arrowright.png b/org.tizen.ui.practices/html/images/icon_arrowright.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_arrowright.png
rename to org.tizen.ui.practices/html/images/icon_arrowright.png
diff --git a/org.tizen.ui.guides/html/images/icon_arrowup.png b/org.tizen.ui.practices/html/images/icon_arrowup.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_arrowup.png
rename to org.tizen.ui.practices/html/images/icon_arrowup.png
diff --git a/org.tizen.ui.guides/html/images/icon_chat.png b/org.tizen.ui.practices/html/images/icon_chat.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_chat.png
rename to org.tizen.ui.practices/html/images/icon_chat.png
diff --git a/org.tizen.ui.guides/html/images/icon_clock.png b/org.tizen.ui.practices/html/images/icon_clock.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_clock.png
rename to org.tizen.ui.practices/html/images/icon_clock.png
diff --git a/org.tizen.ui.guides/html/images/icon_close.png b/org.tizen.ui.practices/html/images/icon_close.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_close.png
rename to org.tizen.ui.practices/html/images/icon_close.png
diff --git a/org.tizen.ui.guides/html/images/icon_delete.png b/org.tizen.ui.practices/html/images/icon_delete.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_delete.png
rename to org.tizen.ui.practices/html/images/icon_delete.png
diff --git a/org.tizen.ui.guides/html/images/icon_edit.png b/org.tizen.ui.practices/html/images/icon_edit.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_edit.png
rename to org.tizen.ui.practices/html/images/icon_edit.png
diff --git a/org.tizen.ui.guides/html/images/icon_file.png b/org.tizen.ui.practices/html/images/icon_file.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_file.png
rename to org.tizen.ui.practices/html/images/icon_file.png
diff --git a/org.tizen.ui.guides/html/images/icon_forward.png b/org.tizen.ui.practices/html/images/icon_forward.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_forward.png
rename to org.tizen.ui.practices/html/images/icon_forward.png
diff --git a/org.tizen.ui.guides/html/images/icon_home.png b/org.tizen.ui.practices/html/images/icon_home.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_home.png
rename to org.tizen.ui.practices/html/images/icon_home.png
diff --git a/org.tizen.ui.guides/html/images/icon_info.png b/org.tizen.ui.practices/html/images/icon_info.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_info.png
rename to org.tizen.ui.practices/html/images/icon_info.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_apps.png b/org.tizen.ui.practices/html/images/icon_menu_apps.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_apps.png
rename to org.tizen.ui.practices/html/images/icon_menu_apps.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_arrdown.png b/org.tizen.ui.practices/html/images/icon_menu_arrdown.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_arrdown.png
rename to org.tizen.ui.practices/html/images/icon_menu_arrdown.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_arrleft.png b/org.tizen.ui.practices/html/images/icon_menu_arrleft.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_arrleft.png
rename to org.tizen.ui.practices/html/images/icon_menu_arrleft.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_arrright.png b/org.tizen.ui.practices/html/images/icon_menu_arrright.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_arrright.png
rename to org.tizen.ui.practices/html/images/icon_menu_arrright.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_arrup.png b/org.tizen.ui.practices/html/images/icon_menu_arrup.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_arrup.png
rename to org.tizen.ui.practices/html/images/icon_menu_arrup.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_chat.png b/org.tizen.ui.practices/html/images/icon_menu_chat.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_chat.png
rename to org.tizen.ui.practices/html/images/icon_menu_chat.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_clock.png b/org.tizen.ui.practices/html/images/icon_menu_clock.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_clock.png
rename to org.tizen.ui.practices/html/images/icon_menu_clock.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_close.png b/org.tizen.ui.practices/html/images/icon_menu_close.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_close.png
rename to org.tizen.ui.practices/html/images/icon_menu_close.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_delete.png b/org.tizen.ui.practices/html/images/icon_menu_delete.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_delete.png
rename to org.tizen.ui.practices/html/images/icon_menu_delete.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_edit.png b/org.tizen.ui.practices/html/images/icon_menu_edit.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_edit.png
rename to org.tizen.ui.practices/html/images/icon_menu_edit.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_file.png b/org.tizen.ui.practices/html/images/icon_menu_file.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_file.png
rename to org.tizen.ui.practices/html/images/icon_menu_file.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_folder.png b/org.tizen.ui.practices/html/images/icon_menu_folder.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_folder.png
rename to org.tizen.ui.practices/html/images/icon_menu_folder.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_home.png b/org.tizen.ui.practices/html/images/icon_menu_home.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_home.png
rename to org.tizen.ui.practices/html/images/icon_menu_home.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_nophoto.png b/org.tizen.ui.practices/html/images/icon_menu_nophoto.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_nophoto.png
rename to org.tizen.ui.practices/html/images/icon_menu_nophoto.png
diff --git a/org.tizen.ui.guides/html/images/icon_menu_refresh.png b/org.tizen.ui.practices/html/images/icon_menu_refresh.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_menu_refresh.png
rename to org.tizen.ui.practices/html/images/icon_menu_refresh.png
diff --git a/org.tizen.ui.guides/html/images/icon_next.png b/org.tizen.ui.practices/html/images/icon_next.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_next.png
rename to org.tizen.ui.practices/html/images/icon_next.png
diff --git a/org.tizen.ui.guides/html/images/icon_pause.png b/org.tizen.ui.practices/html/images/icon_pause.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_pause.png
rename to org.tizen.ui.practices/html/images/icon_pause.png
diff --git a/org.tizen.ui.guides/html/images/icon_photo_nophoto.png b/org.tizen.ui.practices/html/images/icon_photo_nophoto.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_photo_nophoto.png
rename to org.tizen.ui.practices/html/images/icon_photo_nophoto.png
diff --git a/org.tizen.ui.guides/html/images/icon_play.png b/org.tizen.ui.practices/html/images/icon_play.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_play.png
rename to org.tizen.ui.practices/html/images/icon_play.png
diff --git a/org.tizen.ui.guides/html/images/icon_prev.png b/org.tizen.ui.practices/html/images/icon_prev.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_prev.png
rename to org.tizen.ui.practices/html/images/icon_prev.png
diff --git a/org.tizen.ui.guides/html/images/icon_refresh.png b/org.tizen.ui.practices/html/images/icon_refresh.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_refresh.png
rename to org.tizen.ui.practices/html/images/icon_refresh.png
diff --git a/org.tizen.ui.guides/html/images/icon_rewind.png b/org.tizen.ui.practices/html/images/icon_rewind.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_rewind.png
rename to org.tizen.ui.practices/html/images/icon_rewind.png
diff --git a/org.tizen.ui.guides/html/images/icon_stop.png b/org.tizen.ui.practices/html/images/icon_stop.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_stop.png
rename to org.tizen.ui.practices/html/images/icon_stop.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_apps.png b/org.tizen.ui.practices/html/images/icon_toolbar_apps.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_apps.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_apps.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_arrdown.png b/org.tizen.ui.practices/html/images/icon_toolbar_arrdown.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_arrdown.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_arrdown.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_arrleft.png b/org.tizen.ui.practices/html/images/icon_toolbar_arrleft.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_arrleft.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_arrleft.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_arrright.png b/org.tizen.ui.practices/html/images/icon_toolbar_arrright.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_arrright.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_arrright.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_arrup.png b/org.tizen.ui.practices/html/images/icon_toolbar_arrup.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_arrup.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_arrup.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_chat.png b/org.tizen.ui.practices/html/images/icon_toolbar_chat.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_chat.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_chat.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_clock.png b/org.tizen.ui.practices/html/images/icon_toolbar_clock.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_clock.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_clock.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_close.png b/org.tizen.ui.practices/html/images/icon_toolbar_close.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_close.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_close.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_delete.png b/org.tizen.ui.practices/html/images/icon_toolbar_delete.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_delete.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_delete.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_edit.png b/org.tizen.ui.practices/html/images/icon_toolbar_edit.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_edit.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_edit.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_file.png b/org.tizen.ui.practices/html/images/icon_toolbar_file.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_file.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_file.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_folder.png b/org.tizen.ui.practices/html/images/icon_toolbar_folder.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_folder.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_folder.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_moremenu.png b/org.tizen.ui.practices/html/images/icon_toolbar_moremenu.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_moremenu.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_moremenu.png
diff --git a/org.tizen.ui.guides/html/images/icon_toolbar_refresh.png b/org.tizen.ui.practices/html/images/icon_toolbar_refresh.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_toolbar_refresh.png
rename to org.tizen.ui.practices/html/images/icon_toolbar_refresh.png
diff --git a/org.tizen.ui.guides/html/images/icon_tree.png b/org.tizen.ui.practices/html/images/icon_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/icon_tree.png
rename to org.tizen.ui.practices/html/images/icon_tree.png
diff --git a/org.tizen.ui.guides/html/images/idlers.png b/org.tizen.ui.practices/html/images/idlers.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/idlers.png
rename to org.tizen.ui.practices/html/images/idlers.png
diff --git a/org.tizen.ui.guides/html/images/image.png b/org.tizen.ui.practices/html/images/image.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/image.png
rename to org.tizen.ui.practices/html/images/image.png
diff --git a/org.tizen.ui.guides/html/images/image_after.png b/org.tizen.ui.practices/html/images/image_after.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/image_after.png
rename to org.tizen.ui.practices/html/images/image_after.png
diff --git a/org.tizen.ui.guides/html/images/image_before.png b/org.tizen.ui.practices/html/images/image_before.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/image_before.png
rename to org.tizen.ui.practices/html/images/image_before.png
diff --git a/org.tizen.ui.guides/html/images/image_tree.png b/org.tizen.ui.practices/html/images/image_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/image_tree.png
rename to org.tizen.ui.practices/html/images/image_tree.png
diff --git a/org.tizen.ui.guides/html/images/image_wn.png b/org.tizen.ui.practices/html/images/image_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/image_wn.png
rename to org.tizen.ui.practices/html/images/image_wn.png
diff --git a/org.tizen.ui.guides/html/images/immediate_mode.png b/org.tizen.ui.practices/html/images/immediate_mode.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/immediate_mode.png
rename to org.tizen.ui.practices/html/images/immediate_mode.png
diff --git a/org.tizen.ui.guides/html/images/import_css_area.png b/org.tizen.ui.practices/html/images/import_css_area.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/import_css_area.png
rename to org.tizen.ui.practices/html/images/import_css_area.png
diff --git a/org.tizen.ui.guides/html/images/import_linked_in_head.png b/org.tizen.ui.practices/html/images/import_linked_in_head.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/import_linked_in_head.png
rename to org.tizen.ui.practices/html/images/import_linked_in_head.png
diff --git a/org.tizen.ui.guides/html/images/index.png b/org.tizen.ui.practices/html/images/index.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/index.png
rename to org.tizen.ui.practices/html/images/index.png
diff --git a/org.tizen.ui.guides/html/images/index_circle_o_wn.png b/org.tizen.ui.practices/html/images/index_circle_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/index_circle_o_wn.png
rename to org.tizen.ui.practices/html/images/index_circle_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/index_default.png b/org.tizen.ui.practices/html/images/index_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/index_default.png
rename to org.tizen.ui.practices/html/images/index_default.png
diff --git a/org.tizen.ui.guides/html/images/index_default02.png b/org.tizen.ui.practices/html/images/index_default02.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/index_default02.png
rename to org.tizen.ui.practices/html/images/index_default02.png
diff --git a/org.tizen.ui.guides/html/images/index_pagecontrol.png b/org.tizen.ui.practices/html/images/index_pagecontrol.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/index_pagecontrol.png
rename to org.tizen.ui.practices/html/images/index_pagecontrol.png
diff --git a/org.tizen.ui.guides/html/images/index_tab_wn.png b/org.tizen.ui.practices/html/images/index_tab_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/index_tab_wn.png
rename to org.tizen.ui.practices/html/images/index_tab_wn.png
diff --git a/org.tizen.ui.guides/html/images/index_thumb_o_wn.png b/org.tizen.ui.practices/html/images/index_thumb_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/index_thumb_o_wn.png
rename to org.tizen.ui.practices/html/images/index_thumb_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/index_thumb_wn.png b/org.tizen.ui.practices/html/images/index_thumb_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/index_thumb_wn.png
rename to org.tizen.ui.practices/html/images/index_thumb_wn.png
diff --git a/org.tizen.ui.guides/html/images/index_tree.png b/org.tizen.ui.practices/html/images/index_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/index_tree.png
rename to org.tizen.ui.practices/html/images/index_tree.png
diff --git a/org.tizen.ui.guides/html/images/index_wn.png b/org.tizen.ui.practices/html/images/index_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/index_wn.png
rename to org.tizen.ui.practices/html/images/index_wn.png
diff --git a/org.tizen.ui.guides/html/images/label.png b/org.tizen.ui.practices/html/images/label.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/label.png
rename to org.tizen.ui.practices/html/images/label.png
diff --git a/org.tizen.ui.guides/html/images/label_tree.png b/org.tizen.ui.practices/html/images/label_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/label_tree.png
rename to org.tizen.ui.practices/html/images/label_tree.png
diff --git a/org.tizen.ui.guides/html/images/label_wn.png b/org.tizen.ui.practices/html/images/label_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/label_wn.png
rename to org.tizen.ui.practices/html/images/label_wn.png
diff --git a/org.tizen.ui.guides/html/images/layout_app.png b/org.tizen.ui.practices/html/images/layout_app.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_app.png
rename to org.tizen.ui.practices/html/images/layout_app.png
diff --git a/org.tizen.ui.guides/html/images/layout_calculator.png b/org.tizen.ui.practices/html/images/layout_calculator.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_calculator.png
rename to org.tizen.ui.practices/html/images/layout_calculator.png
diff --git a/org.tizen.ui.guides/html/images/layout_calculator_absolute.png b/org.tizen.ui.practices/html/images/layout_calculator_absolute.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_calculator_absolute.png
rename to org.tizen.ui.practices/html/images/layout_calculator_absolute.png
diff --git a/org.tizen.ui.guides/html/images/layout_calculator_relative.png b/org.tizen.ui.practices/html/images/layout_calculator_relative.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_calculator_relative.png
rename to org.tizen.ui.practices/html/images/layout_calculator_relative.png
diff --git a/org.tizen.ui.guides/html/images/layout_fixed_media.png b/org.tizen.ui.practices/html/images/layout_fixed_media.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_fixed_media.png
rename to org.tizen.ui.practices/html/images/layout_fixed_media.png
diff --git a/org.tizen.ui.guides/html/images/layout_flexible_media.png b/org.tizen.ui.practices/html/images/layout_flexible_media.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_flexible_media.png
rename to org.tizen.ui.practices/html/images/layout_flexible_media.png
diff --git a/org.tizen.ui.guides/html/images/layout_image.png b/org.tizen.ui.practices/html/images/layout_image.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_image.png
rename to org.tizen.ui.practices/html/images/layout_image.png
diff --git a/org.tizen.ui.guides/html/images/layout_image_scaled.png b/org.tizen.ui.practices/html/images/layout_image_scaled.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_image_scaled.png
rename to org.tizen.ui.practices/html/images/layout_image_scaled.png
diff --git a/org.tizen.ui.guides/html/images/layout_original.png b/org.tizen.ui.practices/html/images/layout_original.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_original.png
rename to org.tizen.ui.practices/html/images/layout_original.png
diff --git a/org.tizen.ui.guides/html/images/layout_original_scaled.png b/org.tizen.ui.practices/html/images/layout_original_scaled.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_original_scaled.png
rename to org.tizen.ui.practices/html/images/layout_original_scaled.png
diff --git a/org.tizen.ui.guides/html/images/layout_sample.png b/org.tizen.ui.practices/html/images/layout_sample.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_sample.png
rename to org.tizen.ui.practices/html/images/layout_sample.png
diff --git a/org.tizen.ui.guides/html/images/layout_sample_ok.png b/org.tizen.ui.practices/html/images/layout_sample_ok.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_sample_ok.png
rename to org.tizen.ui.practices/html/images/layout_sample_ok.png
diff --git a/org.tizen.ui.guides/html/images/layout_sample_ugly.png b/org.tizen.ui.practices/html/images/layout_sample_ugly.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/layout_sample_ugly.png
rename to org.tizen.ui.practices/html/images/layout_sample_ugly.png
diff --git a/org.tizen.ui.guides/html/images/list.png b/org.tizen.ui.practices/html/images/list.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/list.png
rename to org.tizen.ui.practices/html/images/list.png
diff --git a/org.tizen.ui.guides/html/images/list_tree.png b/org.tizen.ui.practices/html/images/list_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/list_tree.png
rename to org.tizen.ui.practices/html/images/list_tree.png
diff --git a/org.tizen.ui.guides/html/images/list_wn.png b/org.tizen.ui.practices/html/images/list_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/list_wn.png
rename to org.tizen.ui.practices/html/images/list_wn.png
diff --git a/org.tizen.ui.guides/html/images/main_app_layout.png b/org.tizen.ui.practices/html/images/main_app_layout.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/main_app_layout.png
rename to org.tizen.ui.practices/html/images/main_app_layout.png
diff --git a/org.tizen.ui.guides/html/images/map_tree.png b/org.tizen.ui.practices/html/images/map_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/map_tree.png
rename to org.tizen.ui.practices/html/images/map_tree.png
diff --git a/org.tizen.ui.guides/html/images/mapbuf_tree.png b/org.tizen.ui.practices/html/images/mapbuf_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/mapbuf_tree.png
rename to org.tizen.ui.practices/html/images/mapbuf_tree.png
diff --git a/org.tizen.ui.guides/html/images/mascot.gif b/org.tizen.ui.practices/html/images/mascot.gif
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/mascot.gif
rename to org.tizen.ui.practices/html/images/mascot.gif
diff --git a/org.tizen.ui.guides/html/images/media_queries1.png b/org.tizen.ui.practices/html/images/media_queries1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/media_queries1.png
rename to org.tizen.ui.practices/html/images/media_queries1.png
diff --git a/org.tizen.ui.guides/html/images/media_queries3.png b/org.tizen.ui.practices/html/images/media_queries3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/media_queries3.png
rename to org.tizen.ui.practices/html/images/media_queries3.png
diff --git a/org.tizen.ui.guides/html/images/memory.png b/org.tizen.ui.practices/html/images/memory.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/memory.png
rename to org.tizen.ui.practices/html/images/memory.png
diff --git a/org.tizen.ui.guides/html/images/memory2.png b/org.tizen.ui.practices/html/images/memory2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/memory2.png
rename to org.tizen.ui.practices/html/images/memory2.png
diff --git a/org.tizen.ui.guides/html/images/memory3.png b/org.tizen.ui.practices/html/images/memory3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/memory3.png
rename to org.tizen.ui.practices/html/images/memory3.png
diff --git a/org.tizen.ui.guides/html/images/memory_using_css3.png b/org.tizen.ui.practices/html/images/memory_using_css3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/memory_using_css3.png
rename to org.tizen.ui.practices/html/images/memory_using_css3.png
diff --git a/org.tizen.ui.guides/html/images/memory_using_javascript.png b/org.tizen.ui.practices/html/images/memory_using_javascript.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/memory_using_javascript.png
rename to org.tizen.ui.practices/html/images/memory_using_javascript.png
diff --git a/org.tizen.ui.guides/html/images/menu_skeleton.png b/org.tizen.ui.practices/html/images/menu_skeleton.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/menu_skeleton.png
rename to org.tizen.ui.practices/html/images/menu_skeleton.png
diff --git a/org.tizen.ui.guides/html/images/migrate_move_to_top.png b/org.tizen.ui.practices/html/images/migrate_move_to_top.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/migrate_move_to_top.png
rename to org.tizen.ui.practices/html/images/migrate_move_to_top.png
diff --git a/org.tizen.ui.guides/html/images/migrate_padding.png b/org.tizen.ui.practices/html/images/migrate_padding.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/migrate_padding.png
rename to org.tizen.ui.practices/html/images/migrate_padding.png
diff --git a/org.tizen.ui.guides/html/images/migrate_scrollable_circle.png b/org.tizen.ui.practices/html/images/migrate_scrollable_circle.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/migrate_scrollable_circle.png
rename to org.tizen.ui.practices/html/images/migrate_scrollable_circle.png
diff --git a/org.tizen.ui.guides/html/images/migrate_scrollable_rect.png b/org.tizen.ui.practices/html/images/migrate_scrollable_rect.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/migrate_scrollable_rect.png
rename to org.tizen.ui.practices/html/images/migrate_scrollable_rect.png
diff --git a/org.tizen.ui.practices/html/images/mn_division.png b/org.tizen.ui.practices/html/images/mn_division.png
new file mode 100644
index 0000000..faecb28
Binary files /dev/null and b/org.tizen.ui.practices/html/images/mn_division.png differ
diff --git a/org.tizen.ui.guides/html/images/mn_icon.png b/org.tizen.ui.practices/html/images/mn_icon.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/mn_icon.png
rename to org.tizen.ui.practices/html/images/mn_icon.png
diff --git a/org.tizen.ui.practices/html/images/mobile_s_n.png b/org.tizen.ui.practices/html/images/mobile_s_n.png
new file mode 100644
index 0000000..ad8c779
Binary files /dev/null and b/org.tizen.ui.practices/html/images/mobile_s_n.png differ
diff --git a/org.tizen.ui.practices/html/images/mobile_s_w.png b/org.tizen.ui.practices/html/images/mobile_s_w.png
new file mode 100644
index 0000000..f86df29
Binary files /dev/null and b/org.tizen.ui.practices/html/images/mobile_s_w.png differ
diff --git a/org.tizen.ui.practices/html/images/mobile_s_w_optional.png b/org.tizen.ui.practices/html/images/mobile_s_w_optional.png
new file mode 100644
index 0000000..0434b73
Binary files /dev/null and b/org.tizen.ui.practices/html/images/mobile_s_w_optional.png differ
diff --git a/org.tizen.ui.practices/html/images/more_option.png b/org.tizen.ui.practices/html/images/more_option.png
new file mode 100644
index 0000000..4d315e1
Binary files /dev/null and b/org.tizen.ui.practices/html/images/more_option.png differ
diff --git a/org.tizen.ui.practices/html/images/more_option_item.png b/org.tizen.ui.practices/html/images/more_option_item.png
new file mode 100644
index 0000000..842c480
Binary files /dev/null and b/org.tizen.ui.practices/html/images/more_option_item.png differ
diff --git a/org.tizen.ui.practices/html/images/more_option_main.png b/org.tizen.ui.practices/html/images/more_option_main.png
new file mode 100644
index 0000000..b03b67e
Binary files /dev/null and b/org.tizen.ui.practices/html/images/more_option_main.png differ
diff --git a/org.tizen.ui.practices/html/images/more_option_sub.png b/org.tizen.ui.practices/html/images/more_option_sub.png
new file mode 100644
index 0000000..ea191db
Binary files /dev/null and b/org.tizen.ui.practices/html/images/more_option_sub.png differ
diff --git a/org.tizen.ui.guides/html/images/moving1.png b/org.tizen.ui.practices/html/images/moving1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/moving1.png
rename to org.tizen.ui.practices/html/images/moving1.png
diff --git a/org.tizen.ui.guides/html/images/moving2.png b/org.tizen.ui.practices/html/images/moving2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/moving2.png
rename to org.tizen.ui.practices/html/images/moving2.png
diff --git a/org.tizen.ui.guides/html/images/multi_button_default.png b/org.tizen.ui.practices/html/images/multi_button_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/multi_button_default.png
rename to org.tizen.ui.practices/html/images/multi_button_default.png
diff --git a/org.tizen.ui.guides/html/images/multi_node_selection.png b/org.tizen.ui.practices/html/images/multi_node_selection.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/multi_node_selection.png
rename to org.tizen.ui.practices/html/images/multi_node_selection.png
diff --git a/org.tizen.ui.guides/html/images/multi_threading.png b/org.tizen.ui.practices/html/images/multi_threading.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/multi_threading.png
rename to org.tizen.ui.practices/html/images/multi_threading.png
diff --git a/org.tizen.ui.guides/html/images/multi_threading2.png b/org.tizen.ui.practices/html/images/multi_threading2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/multi_threading2.png
rename to org.tizen.ui.practices/html/images/multi_threading2.png
diff --git a/org.tizen.ui.guides/html/images/multiple_layout_example.png b/org.tizen.ui.practices/html/images/multiple_layout_example.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/multiple_layout_example.png
rename to org.tizen.ui.practices/html/images/multiple_layout_example.png
diff --git a/org.tizen.ui.guides/html/images/multipoint_touch.png b/org.tizen.ui.practices/html/images/multipoint_touch.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/multipoint_touch.png
rename to org.tizen.ui.practices/html/images/multipoint_touch.png
diff --git a/org.tizen.ui.practices/html/images/mw_division.png b/org.tizen.ui.practices/html/images/mw_division.png
new file mode 100644
index 0000000..c4a8655
Binary files /dev/null and b/org.tizen.ui.practices/html/images/mw_division.png differ
diff --git a/org.tizen.ui.guides/html/images/mw_icon.png b/org.tizen.ui.practices/html/images/mw_icon.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/mw_icon.png
rename to org.tizen.ui.practices/html/images/mw_icon.png
diff --git a/org.tizen.ui.guides/html/images/mw_icon_optional.png b/org.tizen.ui.practices/html/images/mw_icon_optional.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/mw_icon_optional.png
rename to org.tizen.ui.practices/html/images/mw_icon_optional.png
diff --git a/org.tizen.ui.practices/html/images/n_division.png b/org.tizen.ui.practices/html/images/n_division.png
new file mode 100644
index 0000000..5a0b8f6
Binary files /dev/null and b/org.tizen.ui.practices/html/images/n_division.png differ
diff --git a/org.tizen.ui.guides/html/images/network.png b/org.tizen.ui.practices/html/images/network.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/network.png
rename to org.tizen.ui.practices/html/images/network.png
diff --git a/org.tizen.ui.guides/html/images/network2.png b/org.tizen.ui.practices/html/images/network2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/network2.png
rename to org.tizen.ui.practices/html/images/network2.png
diff --git a/org.tizen.ui.guides/html/images/network3.png b/org.tizen.ui.practices/html/images/network3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/network3.png
rename to org.tizen.ui.practices/html/images/network3.png
diff --git a/org.tizen.ui.guides/html/images/network_speed_sprite.png b/org.tizen.ui.practices/html/images/network_speed_sprite.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/network_speed_sprite.png
rename to org.tizen.ui.practices/html/images/network_speed_sprite.png
diff --git a/org.tizen.ui.guides/html/images/nine_patch_dali.9.png b/org.tizen.ui.practices/html/images/nine_patch_dali.9.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/nine_patch_dali.9.png
rename to org.tizen.ui.practices/html/images/nine_patch_dali.9.png
diff --git a/org.tizen.ui.guides/html/images/nine_patch_expanded.png b/org.tizen.ui.practices/html/images/nine_patch_expanded.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/nine_patch_expanded.png
rename to org.tizen.ui.practices/html/images/nine_patch_expanded.png
diff --git a/org.tizen.ui.guides/html/images/nine_patch_explained.png b/org.tizen.ui.practices/html/images/nine_patch_explained.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/nine_patch_explained.png
rename to org.tizen.ui.practices/html/images/nine_patch_explained.png
diff --git a/org.tizen.ui.guides/html/images/notify_tree.png b/org.tizen.ui.practices/html/images/notify_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/notify_tree.png
rename to org.tizen.ui.practices/html/images/notify_tree.png
diff --git a/org.tizen.ui.guides/html/images/object_size_16.png b/org.tizen.ui.practices/html/images/object_size_16.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/object_size_16.png
rename to org.tizen.ui.practices/html/images/object_size_16.png
diff --git a/org.tizen.ui.guides/html/images/object_size_22.png b/org.tizen.ui.practices/html/images/object_size_22.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/object_size_22.png
rename to org.tizen.ui.practices/html/images/object_size_22.png
diff --git a/org.tizen.ui.guides/html/images/object_size_44.png b/org.tizen.ui.practices/html/images/object_size_44.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/object_size_44.png
rename to org.tizen.ui.practices/html/images/object_size_44.png
diff --git a/org.tizen.ui.guides/html/images/padding-hints.png b/org.tizen.ui.practices/html/images/padding-hints.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/padding-hints.png
rename to org.tizen.ui.practices/html/images/padding-hints.png
diff --git a/org.tizen.ui.guides/html/images/pane_tuto.png b/org.tizen.ui.practices/html/images/pane_tuto.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/pane_tuto.png
rename to org.tizen.ui.practices/html/images/pane_tuto.png
diff --git a/org.tizen.ui.guides/html/images/panel_default.png b/org.tizen.ui.practices/html/images/panel_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/panel_default.png
rename to org.tizen.ui.practices/html/images/panel_default.png
diff --git a/org.tizen.ui.guides/html/images/panel_tree.png b/org.tizen.ui.practices/html/images/panel_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/panel_tree.png
rename to org.tizen.ui.practices/html/images/panel_tree.png
diff --git a/org.tizen.ui.guides/html/images/panes.png b/org.tizen.ui.practices/html/images/panes.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/panes.png
rename to org.tizen.ui.practices/html/images/panes.png
diff --git a/org.tizen.ui.guides/html/images/parent_origin.png b/org.tizen.ui.practices/html/images/parent_origin.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/parent_origin.png
rename to org.tizen.ui.practices/html/images/parent_origin.png
diff --git a/org.tizen.ui.guides/html/images/path_animation.png b/org.tizen.ui.practices/html/images/path_animation.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/path_animation.png
rename to org.tizen.ui.practices/html/images/path_animation.png
diff --git a/org.tizen.ui.guides/html/images/perspective_buttons.png b/org.tizen.ui.practices/html/images/perspective_buttons.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/perspective_buttons.png
rename to org.tizen.ui.practices/html/images/perspective_buttons.png
diff --git a/org.tizen.ui.guides/html/images/perspective_screen.png b/org.tizen.ui.practices/html/images/perspective_screen.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/perspective_screen.png
rename to org.tizen.ui.practices/html/images/perspective_screen.png
diff --git a/org.tizen.ui.guides/html/images/perspective_swallow.png b/org.tizen.ui.practices/html/images/perspective_swallow.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/perspective_swallow.png
rename to org.tizen.ui.practices/html/images/perspective_swallow.png
diff --git a/org.tizen.ui.guides/html/images/photo_tree.png b/org.tizen.ui.practices/html/images/photo_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/photo_tree.png
rename to org.tizen.ui.practices/html/images/photo_tree.png
diff --git a/org.tizen.ui.guides/html/images/photocam_tree.png b/org.tizen.ui.practices/html/images/photocam_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/photocam_tree.png
rename to org.tizen.ui.practices/html/images/photocam_tree.png
diff --git a/org.tizen.ui.guides/html/images/plug_tree.png b/org.tizen.ui.practices/html/images/plug_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/plug_tree.png
rename to org.tizen.ui.practices/html/images/plug_tree.png
diff --git a/org.tizen.ui.guides/html/images/popup.png b/org.tizen.ui.practices/html/images/popup.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/popup.png
rename to org.tizen.ui.practices/html/images/popup.png
diff --git a/org.tizen.ui.guides/html/images/popup_circle_o_wn.png b/org.tizen.ui.practices/html/images/popup_circle_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/popup_circle_o_wn.png
rename to org.tizen.ui.practices/html/images/popup_circle_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/popup_default.png b/org.tizen.ui.practices/html/images/popup_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/popup_default.png
rename to org.tizen.ui.practices/html/images/popup_default.png
diff --git a/org.tizen.ui.guides/html/images/popup_default_wn.png b/org.tizen.ui.practices/html/images/popup_default_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/popup_default_wn.png
rename to org.tizen.ui.practices/html/images/popup_default_wn.png
diff --git a/org.tizen.ui.guides/html/images/popup_toast.png b/org.tizen.ui.practices/html/images/popup_toast.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/popup_toast.png
rename to org.tizen.ui.practices/html/images/popup_toast.png
diff --git a/org.tizen.ui.guides/html/images/popup_toast_o_wn.png b/org.tizen.ui.practices/html/images/popup_toast_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/popup_toast_o_wn.png
rename to org.tizen.ui.practices/html/images/popup_toast_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/popup_toast_wn.png b/org.tizen.ui.practices/html/images/popup_toast_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/popup_toast_wn.png
rename to org.tizen.ui.practices/html/images/popup_toast_wn.png
diff --git a/org.tizen.ui.guides/html/images/popup_tree.png b/org.tizen.ui.practices/html/images/popup_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/popup_tree.png
rename to org.tizen.ui.practices/html/images/popup_tree.png
diff --git a/org.tizen.ui.guides/html/images/popup_wn.png b/org.tizen.ui.practices/html/images/popup_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/popup_wn.png
rename to org.tizen.ui.practices/html/images/popup_wn.png
diff --git a/org.tizen.ui.guides/html/images/pos_map_all.png b/org.tizen.ui.practices/html/images/pos_map_all.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/pos_map_all.png
rename to org.tizen.ui.practices/html/images/pos_map_all.png
diff --git a/org.tizen.ui.guides/html/images/progressbar.png b/org.tizen.ui.practices/html/images/progressbar.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar.png
rename to org.tizen.ui.practices/html/images/progressbar.png
diff --git a/org.tizen.ui.guides/html/images/progressbar_default.png b/org.tizen.ui.practices/html/images/progressbar_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar_default.png
rename to org.tizen.ui.practices/html/images/progressbar_default.png
diff --git a/org.tizen.ui.guides/html/images/progressbar_default_wn.png b/org.tizen.ui.practices/html/images/progressbar_default_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar_default_wn.png
rename to org.tizen.ui.practices/html/images/progressbar_default_wn.png
diff --git a/org.tizen.ui.guides/html/images/progressbar_group_wn.png b/org.tizen.ui.practices/html/images/progressbar_group_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar_group_wn.png
rename to org.tizen.ui.practices/html/images/progressbar_group_wn.png
diff --git a/org.tizen.ui.guides/html/images/progressbar_pending_wn.png b/org.tizen.ui.practices/html/images/progressbar_pending_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar_pending_wn.png
rename to org.tizen.ui.practices/html/images/progressbar_pending_wn.png
diff --git a/org.tizen.ui.guides/html/images/progressbar_process_o_wn.png b/org.tizen.ui.practices/html/images/progressbar_process_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar_process_o_wn.png
rename to org.tizen.ui.practices/html/images/progressbar_process_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/progressbar_process_wn.png b/org.tizen.ui.practices/html/images/progressbar_process_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar_process_wn.png
rename to org.tizen.ui.practices/html/images/progressbar_process_wn.png
diff --git a/org.tizen.ui.guides/html/images/progressbar_small_o_wn.png b/org.tizen.ui.practices/html/images/progressbar_small_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar_small_o_wn.png
rename to org.tizen.ui.practices/html/images/progressbar_small_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/progressbar_tree.png b/org.tizen.ui.practices/html/images/progressbar_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar_tree.png
rename to org.tizen.ui.practices/html/images/progressbar_tree.png
diff --git a/org.tizen.ui.guides/html/images/progressbar_wheel.png b/org.tizen.ui.practices/html/images/progressbar_wheel.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar_wheel.png
rename to org.tizen.ui.practices/html/images/progressbar_wheel.png
diff --git a/org.tizen.ui.guides/html/images/progressbar_wn.png b/org.tizen.ui.practices/html/images/progressbar_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/progressbar_wn.png
rename to org.tizen.ui.practices/html/images/progressbar_wn.png
diff --git a/org.tizen.ui.guides/html/images/pseudo_elements_selector_range.png b/org.tizen.ui.practices/html/images/pseudo_elements_selector_range.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/pseudo_elements_selector_range.png
rename to org.tizen.ui.practices/html/images/pseudo_elements_selector_range.png
diff --git a/org.tizen.ui.guides/html/images/pseudo_elements_selector_required.png b/org.tizen.ui.practices/html/images/pseudo_elements_selector_required.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/pseudo_elements_selector_required.png
rename to org.tizen.ui.practices/html/images/pseudo_elements_selector_required.png
diff --git a/org.tizen.ui.guides/html/images/push_button.png b/org.tizen.ui.practices/html/images/push_button.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/push_button.png
rename to org.tizen.ui.practices/html/images/push_button.png
diff --git a/org.tizen.ui.guides/html/images/radio.png b/org.tizen.ui.practices/html/images/radio.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/radio.png
rename to org.tizen.ui.practices/html/images/radio.png
diff --git a/org.tizen.ui.guides/html/images/radio_button.png b/org.tizen.ui.practices/html/images/radio_button.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/radio_button.png
rename to org.tizen.ui.practices/html/images/radio_button.png
diff --git a/org.tizen.ui.guides/html/images/radio_default.png b/org.tizen.ui.practices/html/images/radio_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/radio_default.png
rename to org.tizen.ui.practices/html/images/radio_default.png
diff --git a/org.tizen.ui.guides/html/images/radio_default_o_wn.png b/org.tizen.ui.practices/html/images/radio_default_o_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/radio_default_o_wn.png
rename to org.tizen.ui.practices/html/images/radio_default_o_wn.png
diff --git a/org.tizen.ui.guides/html/images/radio_default_wn.png b/org.tizen.ui.practices/html/images/radio_default_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/radio_default_wn.png
rename to org.tizen.ui.practices/html/images/radio_default_wn.png
diff --git a/org.tizen.ui.guides/html/images/radio_state_changes.png b/org.tizen.ui.practices/html/images/radio_state_changes.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/radio_state_changes.png
rename to org.tizen.ui.practices/html/images/radio_state_changes.png
diff --git a/org.tizen.ui.guides/html/images/radio_tree.png b/org.tizen.ui.practices/html/images/radio_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/radio_tree.png
rename to org.tizen.ui.practices/html/images/radio_tree.png
diff --git a/org.tizen.ui.guides/html/images/radio_wn.png b/org.tizen.ui.practices/html/images/radio_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/radio_wn.png
rename to org.tizen.ui.practices/html/images/radio_wn.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_footer.png b/org.tizen.ui.practices/html/images/rectangular_footer.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_footer.png
rename to org.tizen.ui.practices/html/images/rectangular_footer.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_header.png b/org.tizen.ui.practices/html/images/rectangular_header.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_header.png
rename to org.tizen.ui.practices/html/images/rectangular_header.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_index.png b/org.tizen.ui.practices/html/images/rectangular_index.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_index.png
rename to org.tizen.ui.practices/html/images/rectangular_index.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_list.png b/org.tizen.ui.practices/html/images/rectangular_list.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_list.png
rename to org.tizen.ui.practices/html/images/rectangular_list.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_moreoption.png b/org.tizen.ui.practices/html/images/rectangular_moreoption.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_moreoption.png
rename to org.tizen.ui.practices/html/images/rectangular_moreoption.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_multibtn.png b/org.tizen.ui.practices/html/images/rectangular_multibtn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_multibtn.png
rename to org.tizen.ui.practices/html/images/rectangular_multibtn.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_popup_bottom.png b/org.tizen.ui.practices/html/images/rectangular_popup_bottom.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_popup_bottom.png
rename to org.tizen.ui.practices/html/images/rectangular_popup_bottom.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_popup_side.png b/org.tizen.ui.practices/html/images/rectangular_popup_side.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_popup_side.png
rename to org.tizen.ui.practices/html/images/rectangular_popup_side.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_processing.png b/org.tizen.ui.practices/html/images/rectangular_processing.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_processing.png
rename to org.tizen.ui.practices/html/images/rectangular_processing.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_progress.png b/org.tizen.ui.practices/html/images/rectangular_progress.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_progress.png
rename to org.tizen.ui.practices/html/images/rectangular_progress.png
diff --git a/org.tizen.ui.guides/html/images/rectangular_thumbnail.png b/org.tizen.ui.practices/html/images/rectangular_thumbnail.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rectangular_thumbnail.png
rename to org.tizen.ui.practices/html/images/rectangular_thumbnail.png
diff --git a/org.tizen.ui.guides/html/images/redrawing01.png b/org.tizen.ui.practices/html/images/redrawing01.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/redrawing01.png
rename to org.tizen.ui.practices/html/images/redrawing01.png
diff --git a/org.tizen.ui.guides/html/images/redrawing02.png b/org.tizen.ui.practices/html/images/redrawing02.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/redrawing02.png
rename to org.tizen.ui.practices/html/images/redrawing02.png
diff --git a/org.tizen.ui.guides/html/images/redrawing03.png b/org.tizen.ui.practices/html/images/redrawing03.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/redrawing03.png
rename to org.tizen.ui.practices/html/images/redrawing03.png
diff --git a/org.tizen.ui.guides/html/images/redrawing04.png b/org.tizen.ui.practices/html/images/redrawing04.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/redrawing04.png
rename to org.tizen.ui.practices/html/images/redrawing04.png
diff --git a/org.tizen.ui.guides/html/images/redrawing05.png b/org.tizen.ui.practices/html/images/redrawing05.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/redrawing05.png
rename to org.tizen.ui.practices/html/images/redrawing05.png
diff --git a/org.tizen.ui.guides/html/images/rel1_rel2_offsets.png b/org.tizen.ui.practices/html/images/rel1_rel2_offsets.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rel1_rel2_offsets.png
rename to org.tizen.ui.practices/html/images/rel1_rel2_offsets.png
diff --git a/org.tizen.ui.guides/html/images/rel1_rel2_offsets_and_relative.png b/org.tizen.ui.practices/html/images/rel1_rel2_offsets_and_relative.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rel1_rel2_offsets_and_relative.png
rename to org.tizen.ui.practices/html/images/rel1_rel2_offsets_and_relative.png
diff --git a/org.tizen.ui.guides/html/images/removing_padding.png b/org.tizen.ui.practices/html/images/removing_padding.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/removing_padding.png
rename to org.tizen.ui.practices/html/images/removing_padding.png
diff --git a/org.tizen.ui.guides/html/images/rendering1.png b/org.tizen.ui.practices/html/images/rendering1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rendering1.png
rename to org.tizen.ui.practices/html/images/rendering1.png
diff --git a/org.tizen.ui.guides/html/images/retained_mode.png b/org.tizen.ui.practices/html/images/retained_mode.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/retained_mode.png
rename to org.tizen.ui.practices/html/images/retained_mode.png
diff --git a/org.tizen.ui.guides/html/images/rotary_event.png b/org.tizen.ui.practices/html/images/rotary_event.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/rotary_event.png
rename to org.tizen.ui.practices/html/images/rotary_event.png
diff --git a/org.tizen.ui.practices/html/images/rotary_selector.png b/org.tizen.ui.practices/html/images/rotary_selector.png
new file mode 100644
index 0000000..23d7a6c
Binary files /dev/null and b/org.tizen.ui.practices/html/images/rotary_selector.png differ
diff --git a/org.tizen.ui.practices/html/images/rotary_selector_item.png b/org.tizen.ui.practices/html/images/rotary_selector_item.png
new file mode 100644
index 0000000..8bb84cb
Binary files /dev/null and b/org.tizen.ui.practices/html/images/rotary_selector_item.png differ
diff --git a/org.tizen.ui.practices/html/images/rotary_selector_main.png b/org.tizen.ui.practices/html/images/rotary_selector_main.png
new file mode 100644
index 0000000..c6c8dcd
Binary files /dev/null and b/org.tizen.ui.practices/html/images/rotary_selector_main.png differ
diff --git a/org.tizen.ui.practices/html/images/rotary_selector_main_text.png b/org.tizen.ui.practices/html/images/rotary_selector_main_text.png
new file mode 100644
index 0000000..211d864
Binary files /dev/null and b/org.tizen.ui.practices/html/images/rotary_selector_main_text.png differ
diff --git a/org.tizen.ui.practices/html/images/rotary_selector_selector.png b/org.tizen.ui.practices/html/images/rotary_selector_selector.png
new file mode 100644
index 0000000..42de2a7
Binary files /dev/null and b/org.tizen.ui.practices/html/images/rotary_selector_selector.png differ
diff --git a/org.tizen.ui.practices/html/images/rotary_selector_sub.png b/org.tizen.ui.practices/html/images/rotary_selector_sub.png
new file mode 100644
index 0000000..87647f6
Binary files /dev/null and b/org.tizen.ui.practices/html/images/rotary_selector_sub.png differ
diff --git a/org.tizen.ui.practices/html/images/rotary_selector_sub_text.png b/org.tizen.ui.practices/html/images/rotary_selector_sub_text.png
new file mode 100644
index 0000000..e26b473
Binary files /dev/null and b/org.tizen.ui.practices/html/images/rotary_selector_sub_text.png differ
diff --git a/org.tizen.ui.practices/html/images/round_footer.png b/org.tizen.ui.practices/html/images/round_footer.png
new file mode 100644
index 0000000..d5c63b4
Binary files /dev/null and b/org.tizen.ui.practices/html/images/round_footer.png differ
diff --git a/org.tizen.ui.guides/html/images/round_header.png b/org.tizen.ui.practices/html/images/round_header.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/round_header.png
rename to org.tizen.ui.practices/html/images/round_header.png
diff --git a/org.tizen.ui.guides/html/images/round_index.png b/org.tizen.ui.practices/html/images/round_index.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/round_index.png
rename to org.tizen.ui.practices/html/images/round_index.png
diff --git a/org.tizen.ui.guides/html/images/round_list.png b/org.tizen.ui.practices/html/images/round_list.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/round_list.png
rename to org.tizen.ui.practices/html/images/round_list.png
diff --git a/org.tizen.ui.practices/html/images/round_moreoption.png b/org.tizen.ui.practices/html/images/round_moreoption.png
new file mode 100644
index 0000000..adec378
Binary files /dev/null and b/org.tizen.ui.practices/html/images/round_moreoption.png differ
diff --git a/org.tizen.ui.practices/html/images/round_multibtn.png b/org.tizen.ui.practices/html/images/round_multibtn.png
new file mode 100644
index 0000000..77b6d6b
Binary files /dev/null and b/org.tizen.ui.practices/html/images/round_multibtn.png differ
diff --git a/org.tizen.ui.guides/html/images/round_popup_bottom.png b/org.tizen.ui.practices/html/images/round_popup_bottom.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/round_popup_bottom.png
rename to org.tizen.ui.practices/html/images/round_popup_bottom.png
diff --git a/org.tizen.ui.guides/html/images/round_popup_side.png b/org.tizen.ui.practices/html/images/round_popup_side.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/round_popup_side.png
rename to org.tizen.ui.practices/html/images/round_popup_side.png
diff --git a/org.tizen.ui.practices/html/images/round_processing.png b/org.tizen.ui.practices/html/images/round_processing.png
new file mode 100644
index 0000000..7b59fe2
Binary files /dev/null and b/org.tizen.ui.practices/html/images/round_processing.png differ
diff --git a/org.tizen.ui.guides/html/images/round_progress.png b/org.tizen.ui.practices/html/images/round_progress.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/round_progress.png
rename to org.tizen.ui.practices/html/images/round_progress.png
diff --git a/org.tizen.ui.guides/html/images/round_thumbnail.png b/org.tizen.ui.practices/html/images/round_thumbnail.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/round_thumbnail.png
rename to org.tizen.ui.practices/html/images/round_thumbnail.png
diff --git a/org.tizen.ui.guides/html/images/scalable_group1.png b/org.tizen.ui.practices/html/images/scalable_group1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scalable_group1.png
rename to org.tizen.ui.practices/html/images/scalable_group1.png
diff --git a/org.tizen.ui.guides/html/images/scalable_group2.png b/org.tizen.ui.practices/html/images/scalable_group2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scalable_group2.png
rename to org.tizen.ui.practices/html/images/scalable_group2.png
diff --git a/org.tizen.ui.guides/html/images/scale.png b/org.tizen.ui.practices/html/images/scale.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale.png
rename to org.tizen.ui.practices/html/images/scale.png
diff --git a/org.tizen.ui.guides/html/images/scale_1.3_finger_50.png b/org.tizen.ui.practices/html/images/scale_1.3_finger_50.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_1.3_finger_50.png
rename to org.tizen.ui.practices/html/images/scale_1.3_finger_50.png
diff --git a/org.tizen.ui.guides/html/images/scale_1_finger_50.png b/org.tizen.ui.practices/html/images/scale_1_finger_50.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_1_finger_50.png
rename to org.tizen.ui.practices/html/images/scale_1_finger_50.png
diff --git a/org.tizen.ui.guides/html/images/scale_1_finger_90.png b/org.tizen.ui.practices/html/images/scale_1_finger_90.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_1_finger_90.png
rename to org.tizen.ui.practices/html/images/scale_1_finger_90.png
diff --git a/org.tizen.ui.guides/html/images/scale_align_hint.png b/org.tizen.ui.practices/html/images/scale_align_hint.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_align_hint.png
rename to org.tizen.ui.practices/html/images/scale_align_hint.png
diff --git a/org.tizen.ui.guides/html/images/scale_box.png b/org.tizen.ui.practices/html/images/scale_box.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_box.png
rename to org.tizen.ui.practices/html/images/scale_box.png
diff --git a/org.tizen.ui.guides/html/images/scale_effect_1.png b/org.tizen.ui.practices/html/images/scale_effect_1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_effect_1.png
rename to org.tizen.ui.practices/html/images/scale_effect_1.png
diff --git a/org.tizen.ui.guides/html/images/scale_effect_10.png b/org.tizen.ui.practices/html/images/scale_effect_10.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_effect_10.png
rename to org.tizen.ui.practices/html/images/scale_effect_10.png
diff --git a/org.tizen.ui.guides/html/images/scale_effect_2.png b/org.tizen.ui.practices/html/images/scale_effect_2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_effect_2.png
rename to org.tizen.ui.practices/html/images/scale_effect_2.png
diff --git a/org.tizen.ui.guides/html/images/scale_effect_3.png b/org.tizen.ui.practices/html/images/scale_effect_3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_effect_3.png
rename to org.tizen.ui.practices/html/images/scale_effect_3.png
diff --git a/org.tizen.ui.guides/html/images/scale_effect_4.png b/org.tizen.ui.practices/html/images/scale_effect_4.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_effect_4.png
rename to org.tizen.ui.practices/html/images/scale_effect_4.png
diff --git a/org.tizen.ui.guides/html/images/scale_effect_5.png b/org.tizen.ui.practices/html/images/scale_effect_5.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_effect_5.png
rename to org.tizen.ui.practices/html/images/scale_effect_5.png
diff --git a/org.tizen.ui.guides/html/images/scale_effect_6.png b/org.tizen.ui.practices/html/images/scale_effect_6.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_effect_6.png
rename to org.tizen.ui.practices/html/images/scale_effect_6.png
diff --git a/org.tizen.ui.guides/html/images/scale_effect_7.png b/org.tizen.ui.practices/html/images/scale_effect_7.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_effect_7.png
rename to org.tizen.ui.practices/html/images/scale_effect_7.png
diff --git a/org.tizen.ui.guides/html/images/scale_effect_8.png b/org.tizen.ui.practices/html/images/scale_effect_8.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_effect_8.png
rename to org.tizen.ui.practices/html/images/scale_effect_8.png
diff --git a/org.tizen.ui.guides/html/images/scale_effect_9.png b/org.tizen.ui.practices/html/images/scale_effect_9.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_effect_9.png
rename to org.tizen.ui.practices/html/images/scale_effect_9.png
diff --git a/org.tizen.ui.guides/html/images/scale_example_image.png b/org.tizen.ui.practices/html/images/scale_example_image.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_example_image.png
rename to org.tizen.ui.practices/html/images/scale_example_image.png
diff --git a/org.tizen.ui.guides/html/images/scale_example_image_set.png b/org.tizen.ui.practices/html/images/scale_example_image_set.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_example_image_set.png
rename to org.tizen.ui.practices/html/images/scale_example_image_set.png
diff --git a/org.tizen.ui.guides/html/images/scale_example_part.png b/org.tizen.ui.practices/html/images/scale_example_part.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_example_part.png
rename to org.tizen.ui.practices/html/images/scale_example_part.png
diff --git a/org.tizen.ui.guides/html/images/scale_example_part_aspect.png b/org.tizen.ui.practices/html/images/scale_example_part_aspect.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_example_part_aspect.png
rename to org.tizen.ui.practices/html/images/scale_example_part_aspect.png
diff --git a/org.tizen.ui.guides/html/images/scale_example_text.png b/org.tizen.ui.practices/html/images/scale_example_text.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_example_text.png
rename to org.tizen.ui.practices/html/images/scale_example_text.png
diff --git a/org.tizen.ui.guides/html/images/scale_example_text_fit.png b/org.tizen.ui.practices/html/images/scale_example_text_fit.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_example_text_fit.png
rename to org.tizen.ui.practices/html/images/scale_example_text_fit.png
diff --git a/org.tizen.ui.guides/html/images/scale_fixed.png b/org.tizen.ui.practices/html/images/scale_fixed.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_fixed.png
rename to org.tizen.ui.practices/html/images/scale_fixed.png
diff --git a/org.tizen.ui.guides/html/images/scale_fixed_flexible.png b/org.tizen.ui.practices/html/images/scale_fixed_flexible.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_fixed_flexible.png
rename to org.tizen.ui.practices/html/images/scale_fixed_flexible.png
diff --git a/org.tizen.ui.guides/html/images/scale_fixed_height.png b/org.tizen.ui.practices/html/images/scale_fixed_height.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_fixed_height.png
rename to org.tizen.ui.practices/html/images/scale_fixed_height.png
diff --git a/org.tizen.ui.guides/html/images/scale_flexible_height.png b/org.tizen.ui.practices/html/images/scale_flexible_height.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_flexible_height.png
rename to org.tizen.ui.practices/html/images/scale_flexible_height.png
diff --git a/org.tizen.ui.guides/html/images/scale_grid.png b/org.tizen.ui.practices/html/images/scale_grid.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_grid.png
rename to org.tizen.ui.practices/html/images/scale_grid.png
diff --git a/org.tizen.ui.guides/html/images/scale_original_image.png b/org.tizen.ui.practices/html/images/scale_original_image.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_original_image.png
rename to org.tizen.ui.practices/html/images/scale_original_image.png
diff --git a/org.tizen.ui.guides/html/images/scale_relative.png b/org.tizen.ui.practices/html/images/scale_relative.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_relative.png
rename to org.tizen.ui.practices/html/images/scale_relative.png
diff --git a/org.tizen.ui.guides/html/images/scale_relative_scaled.png b/org.tizen.ui.practices/html/images/scale_relative_scaled.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_relative_scaled.png
rename to org.tizen.ui.practices/html/images/scale_relative_scaled.png
diff --git a/org.tizen.ui.guides/html/images/scale_testing_app.png b/org.tizen.ui.practices/html/images/scale_testing_app.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_testing_app.png
rename to org.tizen.ui.practices/html/images/scale_testing_app.png
diff --git a/org.tizen.ui.guides/html/images/scale_values.png b/org.tizen.ui.practices/html/images/scale_values.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_values.png
rename to org.tizen.ui.practices/html/images/scale_values.png
diff --git a/org.tizen.ui.guides/html/images/scale_values2.png b/org.tizen.ui.practices/html/images/scale_values2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_values2.png
rename to org.tizen.ui.practices/html/images/scale_values2.png
diff --git a/org.tizen.ui.guides/html/images/scale_weight_hint.png b/org.tizen.ui.practices/html/images/scale_weight_hint.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_weight_hint.png
rename to org.tizen.ui.practices/html/images/scale_weight_hint.png
diff --git a/org.tizen.ui.guides/html/images/scale_weight_hint_multiple.png b/org.tizen.ui.practices/html/images/scale_weight_hint_multiple.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scale_weight_hint_multiple.png
rename to org.tizen.ui.practices/html/images/scale_weight_hint_multiple.png
diff --git a/org.tizen.ui.guides/html/images/scaling.png b/org.tizen.ui.practices/html/images/scaling.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scaling.png
rename to org.tizen.ui.practices/html/images/scaling.png
diff --git a/org.tizen.ui.guides/html/images/screenshot_1.png b/org.tizen.ui.practices/html/images/screenshot_1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/screenshot_1.png
rename to org.tizen.ui.practices/html/images/screenshot_1.png
diff --git a/org.tizen.ui.guides/html/images/screenshot_2.png b/org.tizen.ui.practices/html/images/screenshot_2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/screenshot_2.png
rename to org.tizen.ui.practices/html/images/screenshot_2.png
diff --git a/org.tizen.ui.guides/html/images/scrollview.png b/org.tizen.ui.practices/html/images/scrollview.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/scrollview.png
rename to org.tizen.ui.practices/html/images/scrollview.png
diff --git a/org.tizen.ui.guides/html/images/segm_control_default.png b/org.tizen.ui.practices/html/images/segm_control_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/segm_control_default.png
rename to org.tizen.ui.practices/html/images/segm_control_default.png
diff --git a/org.tizen.ui.guides/html/images/segment.png b/org.tizen.ui.practices/html/images/segment.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/segment.png
rename to org.tizen.ui.practices/html/images/segment.png
diff --git a/org.tizen.ui.guides/html/images/segment_control_tree.png b/org.tizen.ui.practices/html/images/segment_control_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/segment_control_tree.png
rename to org.tizen.ui.practices/html/images/segment_control_tree.png
diff --git a/org.tizen.ui.guides/html/images/segment_text.png b/org.tizen.ui.practices/html/images/segment_text.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/segment_text.png
rename to org.tizen.ui.practices/html/images/segment_text.png
diff --git a/org.tizen.ui.guides/html/images/setting_sd.png b/org.tizen.ui.practices/html/images/setting_sd.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/setting_sd.png
rename to org.tizen.ui.practices/html/images/setting_sd.png
diff --git a/org.tizen.ui.guides/html/images/show_frametime.png b/org.tizen.ui.practices/html/images/show_frametime.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/show_frametime.png
rename to org.tizen.ui.practices/html/images/show_frametime.png
diff --git a/org.tizen.ui.guides/html/images/signal_slot.png b/org.tizen.ui.practices/html/images/signal_slot.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/signal_slot.png
rename to org.tizen.ui.practices/html/images/signal_slot.png
diff --git a/org.tizen.ui.guides/html/images/single_node_selection.png b/org.tizen.ui.practices/html/images/single_node_selection.png
similarity index 100%
rename from org.tizen.ui.guides/html/images/single_node_selection.png
rename to org.tizen.ui.practices/html/images/single_node_selection.png
diff --git a/org.tizen.ui.guides/html/images/slider.png b/org.tizen.ui.practices/html/images/slider.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/slider.png
rename to org.tizen.ui.practices/html/images/slider.png
diff --git a/org.tizen.ui.guides/html/images/slider_hor.png b/org.tizen.ui.practices/html/images/slider_hor.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/slider_hor.png
rename to org.tizen.ui.practices/html/images/slider_hor.png
diff --git a/org.tizen.ui.guides/html/images/slider_hor_center.png b/org.tizen.ui.practices/html/images/slider_hor_center.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/slider_hor_center.png
rename to org.tizen.ui.practices/html/images/slider_hor_center.png
diff --git a/org.tizen.ui.guides/html/images/slider_hor_wn.png b/org.tizen.ui.practices/html/images/slider_hor_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/slider_hor_wn.png
rename to org.tizen.ui.practices/html/images/slider_hor_wn.png
diff --git a/org.tizen.ui.guides/html/images/slider_tree.png b/org.tizen.ui.practices/html/images/slider_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/slider_tree.png
rename to org.tizen.ui.practices/html/images/slider_tree.png
diff --git a/org.tizen.ui.guides/html/images/slider_ver.png b/org.tizen.ui.practices/html/images/slider_ver.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/slider_ver.png
rename to org.tizen.ui.practices/html/images/slider_ver.png
diff --git a/org.tizen.ui.guides/html/images/slider_ver_center.png b/org.tizen.ui.practices/html/images/slider_ver_center.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/slider_ver_center.png
rename to org.tizen.ui.practices/html/images/slider_ver_center.png
diff --git a/org.tizen.ui.guides/html/images/slider_wn.png b/org.tizen.ui.practices/html/images/slider_wn.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/slider_wn.png
rename to org.tizen.ui.practices/html/images/slider_wn.png
diff --git a/org.tizen.ui.guides/html/images/spin.png b/org.tizen.ui.practices/html/images/spin.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/spin.png
rename to org.tizen.ui.practices/html/images/spin.png
diff --git a/org.tizen.ui.guides/html/images/spinner_hor.png b/org.tizen.ui.practices/html/images/spinner_hor.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/spinner_hor.png
rename to org.tizen.ui.practices/html/images/spinner_hor.png
diff --git a/org.tizen.ui.guides/html/images/spinner_tree.png b/org.tizen.ui.practices/html/images/spinner_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/spinner_tree.png
rename to org.tizen.ui.practices/html/images/spinner_tree.png
diff --git a/org.tizen.ui.guides/html/images/spinner_ver.png b/org.tizen.ui.practices/html/images/spinner_ver.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/spinner_ver.png
rename to org.tizen.ui.practices/html/images/spinner_ver.png
diff --git a/org.tizen.ui.guides/html/images/spiral.png b/org.tizen.ui.practices/html/images/spiral.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/spiral.png
rename to org.tizen.ui.practices/html/images/spiral.png
diff --git a/org.tizen.ui.guides/html/images/stereo_projection.png b/org.tizen.ui.practices/html/images/stereo_projection.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/stereo_projection.png
rename to org.tizen.ui.practices/html/images/stereo_projection.png
diff --git a/org.tizen.ui.guides/html/images/styleguide_genlist_def.png b/org.tizen.ui.practices/html/images/styleguide_genlist_def.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/styleguide_genlist_def.png
rename to org.tizen.ui.practices/html/images/styleguide_genlist_def.png
diff --git a/org.tizen.ui.guides/html/images/styleguide_genlist_defstyle.png b/org.tizen.ui.practices/html/images/styleguide_genlist_defstyle.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/styleguide_genlist_defstyle.png
rename to org.tizen.ui.practices/html/images/styleguide_genlist_defstyle.png
diff --git a/org.tizen.ui.guides/html/images/styleguide_genlist_doublelabel.png b/org.tizen.ui.practices/html/images/styleguide_genlist_doublelabel.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/styleguide_genlist_doublelabel.png
rename to org.tizen.ui.practices/html/images/styleguide_genlist_doublelabel.png
diff --git a/org.tizen.ui.guides/html/images/styleguide_genlist_end.png b/org.tizen.ui.practices/html/images/styleguide_genlist_end.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/styleguide_genlist_end.png
rename to org.tizen.ui.practices/html/images/styleguide_genlist_end.png
diff --git a/org.tizen.ui.guides/html/images/styleguide_genlist_full.png b/org.tizen.ui.practices/html/images/styleguide_genlist_full.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/styleguide_genlist_full.png
rename to org.tizen.ui.practices/html/images/styleguide_genlist_full.png
diff --git a/org.tizen.ui.guides/html/images/styleguide_genlist_group.png b/org.tizen.ui.practices/html/images/styleguide_genlist_group.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/styleguide_genlist_group.png
rename to org.tizen.ui.practices/html/images/styleguide_genlist_group.png
diff --git a/org.tizen.ui.guides/html/images/styleguide_genlist_message.png b/org.tizen.ui.practices/html/images/styleguide_genlist_message.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/styleguide_genlist_message.png
rename to org.tizen.ui.practices/html/images/styleguide_genlist_message.png
diff --git a/org.tizen.ui.guides/html/images/styleguide_genlist_oneicon.png b/org.tizen.ui.practices/html/images/styleguide_genlist_oneicon.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/styleguide_genlist_oneicon.png
rename to org.tizen.ui.practices/html/images/styleguide_genlist_oneicon.png
diff --git a/org.tizen.ui.guides/html/images/tableview.png b/org.tizen.ui.practices/html/images/tableview.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/tableview.png
rename to org.tizen.ui.practices/html/images/tableview.png
diff --git a/org.tizen.ui.practices/html/images/tau_animation_1.png b/org.tizen.ui.practices/html/images/tau_animation_1.png
new file mode 100644
index 0000000..03962f7
Binary files /dev/null and b/org.tizen.ui.practices/html/images/tau_animation_1.png differ
diff --git a/org.tizen.ui.practices/html/images/tau_animation_2.png b/org.tizen.ui.practices/html/images/tau_animation_2.png
new file mode 100644
index 0000000..f370b90
Binary files /dev/null and b/org.tizen.ui.practices/html/images/tau_animation_2.png differ
diff --git a/org.tizen.ui.practices/html/images/tau_animation_3.png b/org.tizen.ui.practices/html/images/tau_animation_3.png
new file mode 100644
index 0000000..69a8d82
Binary files /dev/null and b/org.tizen.ui.practices/html/images/tau_animation_3.png differ
diff --git a/org.tizen.ui.practices/html/images/tau_animation_4.png b/org.tizen.ui.practices/html/images/tau_animation_4.png
new file mode 100644
index 0000000..f4d6430
Binary files /dev/null and b/org.tizen.ui.practices/html/images/tau_animation_4.png differ
diff --git a/org.tizen.ui.practices/html/images/tau_animation_5.png b/org.tizen.ui.practices/html/images/tau_animation_5.png
new file mode 100644
index 0000000..2e6aa0e
Binary files /dev/null and b/org.tizen.ui.practices/html/images/tau_animation_5.png differ
diff --git a/org.tizen.ui.guides/html/images/text_class_list.png b/org.tizen.ui.practices/html/images/text_class_list.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/text_class_list.png
rename to org.tizen.ui.practices/html/images/text_class_list.png
diff --git a/org.tizen.ui.guides/html/images/text_class_list_del.png b/org.tizen.ui.practices/html/images/text_class_list_del.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/text_class_list_del.png
rename to org.tizen.ui.practices/html/images/text_class_list_del.png
diff --git a/org.tizen.ui.guides/html/images/text_class_properties.png b/org.tizen.ui.practices/html/images/text_class_properties.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/text_class_properties.png
rename to org.tizen.ui.practices/html/images/text_class_properties.png
diff --git a/org.tizen.ui.guides/html/images/text_properties.png b/org.tizen.ui.practices/html/images/text_properties.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/text_properties.png
rename to org.tizen.ui.practices/html/images/text_properties.png
diff --git a/org.tizen.ui.guides/html/images/text_screen_2.png b/org.tizen.ui.practices/html/images/text_screen_2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/text_screen_2.png
rename to org.tizen.ui.practices/html/images/text_screen_2.png
diff --git a/org.tizen.ui.guides/html/images/textfield.png b/org.tizen.ui.practices/html/images/textfield.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/textfield.png
rename to org.tizen.ui.practices/html/images/textfield.png
diff --git a/org.tizen.ui.guides/html/images/textlabel.png b/org.tizen.ui.practices/html/images/textlabel.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/textlabel.png
rename to org.tizen.ui.practices/html/images/textlabel.png
diff --git a/org.tizen.ui.guides/html/images/thread_pool_lifecycle_1.png b/org.tizen.ui.practices/html/images/thread_pool_lifecycle_1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/thread_pool_lifecycle_1.png
rename to org.tizen.ui.practices/html/images/thread_pool_lifecycle_1.png
diff --git a/org.tizen.ui.guides/html/images/thread_pool_lifecycle_2.png b/org.tizen.ui.practices/html/images/thread_pool_lifecycle_2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/thread_pool_lifecycle_2.png
rename to org.tizen.ui.practices/html/images/thread_pool_lifecycle_2.png
diff --git a/org.tizen.ui.guides/html/images/thread_pool_lifecycle_3.png b/org.tizen.ui.practices/html/images/thread_pool_lifecycle_3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/thread_pool_lifecycle_3.png
rename to org.tizen.ui.practices/html/images/thread_pool_lifecycle_3.png
diff --git a/org.tizen.ui.practices/html/images/tizen_project_dali.png b/org.tizen.ui.practices/html/images/tizen_project_dali.png
new file mode 100644
index 0000000..ed45fe1
Binary files /dev/null and b/org.tizen.ui.practices/html/images/tizen_project_dali.png differ
diff --git a/org.tizen.ui.guides/html/images/toolbar.png b/org.tizen.ui.practices/html/images/toolbar.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/toolbar.png
rename to org.tizen.ui.practices/html/images/toolbar.png
diff --git a/org.tizen.ui.guides/html/images/toolbar_default.png b/org.tizen.ui.practices/html/images/toolbar_default.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/toolbar_default.png
rename to org.tizen.ui.practices/html/images/toolbar_default.png
diff --git a/org.tizen.ui.guides/html/images/toolbar_navigation.png b/org.tizen.ui.practices/html/images/toolbar_navigation.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/toolbar_navigation.png
rename to org.tizen.ui.practices/html/images/toolbar_navigation.png
diff --git a/org.tizen.ui.guides/html/images/toolbar_tabbar.png b/org.tizen.ui.practices/html/images/toolbar_tabbar.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/toolbar_tabbar.png
rename to org.tizen.ui.practices/html/images/toolbar_tabbar.png
diff --git a/org.tizen.ui.guides/html/images/toolbar_tree.png b/org.tizen.ui.practices/html/images/toolbar_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/toolbar_tree.png
rename to org.tizen.ui.practices/html/images/toolbar_tree.png
diff --git a/org.tizen.ui.guides/html/images/transit_rotation_zoom.png b/org.tizen.ui.practices/html/images/transit_rotation_zoom.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/transit_rotation_zoom.png
rename to org.tizen.ui.practices/html/images/transit_rotation_zoom.png
diff --git a/org.tizen.ui.guides/html/images/transitions1.png b/org.tizen.ui.practices/html/images/transitions1.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/transitions1.png
rename to org.tizen.ui.practices/html/images/transitions1.png
diff --git a/org.tizen.ui.guides/html/images/transitions2.png b/org.tizen.ui.practices/html/images/transitions2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/transitions2.png
rename to org.tizen.ui.practices/html/images/transitions2.png
diff --git a/org.tizen.ui.guides/html/images/transitions3.png b/org.tizen.ui.practices/html/images/transitions3.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/transitions3.png
rename to org.tizen.ui.practices/html/images/transitions3.png
diff --git a/org.tizen.ui.guides/html/images/transitions5.png b/org.tizen.ui.practices/html/images/transitions5.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/transitions5.png
rename to org.tizen.ui.practices/html/images/transitions5.png
diff --git a/org.tizen.ui.guides/html/images/ui_control_hierarchy.png b/org.tizen.ui.practices/html/images/ui_control_hierarchy.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ui_control_hierarchy.png
rename to org.tizen.ui.practices/html/images/ui_control_hierarchy.png
diff --git a/org.tizen.ui.guides/html/images/ui_controls.png b/org.tizen.ui.practices/html/images/ui_controls.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ui_controls.png
rename to org.tizen.ui.practices/html/images/ui_controls.png
diff --git a/org.tizen.ui.guides/html/images/uilayout_view2.png b/org.tizen.ui.practices/html/images/uilayout_view2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/uilayout_view2.png
rename to org.tizen.ui.practices/html/images/uilayout_view2.png
diff --git a/org.tizen.ui.guides/html/images/use_natural_size.png b/org.tizen.ui.practices/html/images/use_natural_size.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/use_natural_size.png
rename to org.tizen.ui.practices/html/images/use_natural_size.png
diff --git a/org.tizen.ui.guides/html/images/using_clipper.png b/org.tizen.ui.practices/html/images/using_clipper.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/using_clipper.png
rename to org.tizen.ui.practices/html/images/using_clipper.png
diff --git a/org.tizen.ui.guides/html/images/using_clipper2.png b/org.tizen.ui.practices/html/images/using_clipper2.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/using_clipper2.png
rename to org.tizen.ui.practices/html/images/using_clipper2.png
diff --git a/org.tizen.ui.guides/html/images/using_import_attribute.png b/org.tizen.ui.practices/html/images/using_import_attribute.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/using_import_attribute.png
rename to org.tizen.ui.practices/html/images/using_import_attribute.png
diff --git a/org.tizen.ui.guides/html/images/view_main.png b/org.tizen.ui.practices/html/images/view_main.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/view_main.png
rename to org.tizen.ui.practices/html/images/view_main.png
diff --git a/org.tizen.ui.practices/html/images/w_division.png b/org.tizen.ui.practices/html/images/w_division.png
new file mode 100644
index 0000000..443a1ea
Binary files /dev/null and b/org.tizen.ui.practices/html/images/w_division.png differ
diff --git a/org.tizen.ui.practices/html/images/wearable_s_n.png b/org.tizen.ui.practices/html/images/wearable_s_n.png
new file mode 100644
index 0000000..02e3791
Binary files /dev/null and b/org.tizen.ui.practices/html/images/wearable_s_n.png differ
diff --git a/org.tizen.ui.practices/html/images/wearable_s_w.png b/org.tizen.ui.practices/html/images/wearable_s_w.png
new file mode 100644
index 0000000..379a9c5
Binary files /dev/null and b/org.tizen.ui.practices/html/images/wearable_s_w.png differ
diff --git a/org.tizen.ui.practices/html/images/wearable_s_w_optional.png b/org.tizen.ui.practices/html/images/wearable_s_w_optional.png
new file mode 100644
index 0000000..cef460c
Binary files /dev/null and b/org.tizen.ui.practices/html/images/wearable_s_w_optional.png differ
diff --git a/org.tizen.ui.guides/html/images/win_tree.png b/org.tizen.ui.practices/html/images/win_tree.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/win_tree.png
rename to org.tizen.ui.practices/html/images/win_tree.png
diff --git a/org.tizen.ui.practices/html/images/wn_division.png b/org.tizen.ui.practices/html/images/wn_division.png
new file mode 100644
index 0000000..dca667f
Binary files /dev/null and b/org.tizen.ui.practices/html/images/wn_division.png differ
diff --git a/org.tizen.ui.guides/html/images/wn_icon.png b/org.tizen.ui.practices/html/images/wn_icon.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/wn_icon.png
rename to org.tizen.ui.practices/html/images/wn_icon.png
diff --git a/org.tizen.ui.practices/html/images/ww_division.png b/org.tizen.ui.practices/html/images/ww_division.png
new file mode 100644
index 0000000..5f5160c
Binary files /dev/null and b/org.tizen.ui.practices/html/images/ww_division.png differ
diff --git a/org.tizen.ui.guides/html/images/ww_icon.png b/org.tizen.ui.practices/html/images/ww_icon.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ww_icon.png
rename to org.tizen.ui.practices/html/images/ww_icon.png
diff --git a/org.tizen.ui.guides/html/images/ww_icon_optional.png b/org.tizen.ui.practices/html/images/ww_icon_optional.png
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/images/ww_icon_optional.png
rename to org.tizen.ui.practices/html/images/ww_icon_optional.png
diff --git a/org.tizen.ui.practices/html/index.htm b/org.tizen.ui.practices/html/index.htm
new file mode 100644
index 0000000..06a8ff0
--- /dev/null
+++ b/org.tizen.ui.practices/html/index.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>UI Practices</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1><a href="cover_page.htm">UI Practices</a></h1>
+
+<h2><a href="web/guides_w.htm">Web Application</a></h2>
+	<ul>
+		<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/ui_component_w.htm">UI Components</a></li>
+				<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/helper_ww.htm">Using the 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>
+				<li><a href="web/tau/globalization_w.htm">Globalization</a></li>
+				<li><a href="web/tau/animation_w.htm">Animation</a>
+					<ul>
+						<li><a href="web/tau/creating_animation_w.htm">Creating Applications with Animation</a></li>
+					</ul>
+				</li>
+				<li><a href="web/tau/tau_porting_w.htm">2.4 Porting Guide</a></li>
+			</ul>
+		</li>
+		<li><a href="web/w3c/guides_w3c_w.htm">W3C/HTML5</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 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</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>
+				<li><a href="web/w3c/color_w.htm">CSS Color Module (Level 3)</a></li>
+				<li><a href="web/w3c/background_w.htm">CSS Backgrounds and Borders Module (Level 3)</a></li>
+				<li><a href="web/w3c/flexible_w.htm">CSS Flexible Box Layout Module</a></li>
+				<li><a href="web/w3c/multi_mw.htm">CSS Multi-column Layout Module</a></li>
+				<li><a href="web/w3c/text_module_w.htm">CSS Text Module (Level 3)</a></li>
+				<li><a href="web/w3c/basic_ui_w.htm">CSS Basic User Interface Module (Level 3)</a></li>
+				<li><a href="web/w3c/font_w.htm">CSS Fonts Module (Level 3)</a></li>		
+				<li><a href="web/w3c/woff_w.htm">WOFF File Format (1.0)</a></li>	
+			</ul>
+		</li>		
+	</ul>
+
+<h2><a href="native/guides_n.htm">Native Application</a></h2>
+	<ul>
+		<li><a href="native/efl/guides_efl_n.htm">EFL</a>
+			<ul>		
+				<li><a href="native/efl/efl_overview_n.htm">EFL Overview</a></li>
+				<li><a href="native/efl/ui_components_n.htm">UI Components</a>
+					<ul>
+						<li><a href="native/efl/ui_components_mn.htm">Mobile UI Components</a>
+						<ul>
+							<li><a href="native/efl/component_toolbar_mn.htm">Toolbar</a></li>
+							<li><a href="native/efl/component_index_mn.htm">Index</a></li>
+							<li><a href="native/efl/component_segmentcontrol_mn.htm">Segmentcontrol</a></li>
+							<li><a href="native/efl/component_win_mn.htm">Win</a></li>
+							<li><a href="native/efl/component_background_mn.htm">Background</a></li>
+							<li><a href="native/efl/component_genlist_mn.htm">Genlist</a></li>
+							<li><a href="native/efl/component_gengrid_mn.htm">Gengrid</a></li>
+							<li><a href="native/efl/component_panel_mn.htm">Panel</a></li>
+							<li><a href="native/efl/component_list_mn.htm">List</a></li>
+							<li><a href="native/efl/component_label_mn.htm">Label</a></li>
+							<li><a href="native/efl/component_image_mn.htm">Image</a></li>
+							<li><a href="native/efl/component_icon_mn.htm">Icon</a></li>
+							<li><a href="native/efl/component_progressbar_mn.htm">Progressbar</a></li>
+							<li><a href="native/efl/component_photocam_mn.htm">Photocam</a></li>
+							<li><a href="native/efl/component_button_mn.htm">Button</a></li>
+							<li><a href="native/efl/component_check_mn.htm">Check</a></li>
+							<li><a href="native/efl/component_radio_mn.htm">Radio</a></li>
+							<li><a href="native/efl/component_entry_mn.htm">Entry</a></li>
+							<li><a href="native/efl/component_slider_mn.htm">Slider</a></li>
+							<li><a href="native/efl/component_datetime_mn.htm">Datetime</a></li>
+							<li><a href="native/efl/component_colorselector_mn.htm">Colorselector</a></li>
+							<li><a href="native/efl/component_spinner_mn.htm">Spinner</a></li>
+							<li><a href="native/efl/component_popup_mn.htm">Popup</a></li>
+							<li><a href="native/efl/component_ctxpopup_mn.htm">Ctxpopup</a></li>
+							<li><a href="native/efl/component_notify_mn.htm">Notify</a></li>
+							<li><a href="native/efl/component_tooltip_mn.htm">Tooltip</a></li>
+							<li><a href="native/efl/component_flip_mn.htm">Flip</a></li>
+							<li><a href="native/efl/component_glview_mn.htm">GLView</a></li>
+							<li><a href="native/efl/component_map_mn.htm">Map</a></li>
+							<li><a href="native/efl/component_plug_mn.htm">Plug</a></li>
+							<li><a href="native/efl/basic_tutorial_mn.htm">Creating Basic Mobile Interactions</a></li>
+							<li><a href="native/efl/genlist_tutorial_mn.htm">Creating Mobile Genlists</a></li>
+							<li><a href="native/efl/menu_tutorial_mn.htm">Creating Mobile Menus</a></li>
+						</ul>
+						</li>
+						<li><a href="native/efl/ui_components_wn.htm">Wearable UI Components</a>
+						<ul>
+							<li><a href="native/efl/component_index_wn.htm">Index</a></li>
+							<li><a href="native/efl/component_win_wn.htm">Win</a></li>
+							<li><a href="native/efl/component_background_wn.htm">Background</a></li>
+							<li><a href="native/efl/component_genlist_wn.htm">Genlist</a></li>
+							<li><a href="native/efl/component_list_wn.htm">List</a></li>
+							<li><a href="native/efl/component_label_wn.htm">Label</a></li>
+							<li><a href="native/efl/component_image_wn.htm">Image</a></li>
+							<li><a href="native/efl/component_icon_wn.htm">Icon</a></li>
+							<li><a href="native/efl/component_progressbar_wn.htm">Progressbar</a></li>
+							<li><a href="native/efl/component_button_wn.htm">Button</a></li>
+							<li><a href="native/efl/component_check_wn.htm">Check</a></li>
+							<li><a href="native/efl/component_radio_wn.htm">Radio</a></li>
+							<li><a href="native/efl/component_entry_wn.htm">Entry</a></li>
+							<li><a href="native/efl/component_slider_wn.htm">Slider</a></li>
+							<li><a href="native/efl/component_datetime_wn.htm">Datetime</a></li>
+							<li><a href="native/efl/component_popup_wn.htm">Popup</a></li>
+							<li><a href="native/efl/component_ctxpopup_wn.htm">Ctxpopup</a></li>
+							<li><a href="native/efl/component_notify_wn.htm">Notify</a></li>
+							<li><a href="native/efl/component_glview_wn.htm">GLView</a></li>
+							<li><a href="native/efl/component_plug_wn.htm">Plug</a></li>
+							<li><a href="native/efl/button_tutorial_wn.htm">Creating Wearable Buttons</a></li>
+							<li><a href="native/efl/datetime_tutorial_wn.htm">Creating Wearable Datetimes</a></li>
+							<li><a href="native/efl/genlist_tutorial_wn.htm">Creating Wearable Genlists</a></li>
+							<li><a href="native/efl/popup_tutorial_wn.htm">Creating Wearable Popups</a></li>
+							<li><a href="native/efl/component_circ_datetime_wn.htm">Circle Datetime</a></li>	
+							<li><a href="native/efl/component_circ_genlist_wn.htm">Circle Genlist</a></li>
+							<li><a href="native/efl/component_circ_object_wn.htm">Circle Object</a></li>
+							<li><a href="native/efl/component_circ_progressbar_wn.htm">Circle Progressbar</a></li>
+							<li><a href="native/efl/component_circ_scroller_wn.htm">Circle Scroller</a></li>
+							<li><a href="native/efl/component_circ_slider_wn.htm">Circle Slider</a></li>
+							<li><a href="native/efl/component_circ_surface_wn.htm">Circle Surface</a></li>
+							<li><a href="native/efl/component_circ_rotary_wn.htm">Rotary Selector</a></li>
+							<li><a href="native/efl/component_circ_option_wn.htm">More Option</a></li>
+							<li><a href="native/efl/component_circ_spinner_wn.htm">Circle Spinner</a></li>
+						</ul>
+						</li>
+					</ul>				
+				</li>
+				<li><a href="native/efl/component_infra_n.htm">UI Component Infrastructure Modules</a>
+					<ul>
+						<li><a href="native/efl/component_focus_n.htm">Managing Component Focus</a></li>
+						<li><a href="native/efl/component_custom_n.htm">Customizing Components</a></li>
+						<li><a href="native/efl/touch_gesture_n.htm">Handling Component Touch Gestures</a></li>
+					</ul>				
+				</li>
+				<li><a href="native/efl/ui_containers_n.htm">UI Containers</a>
+					<ul>
+						<li><a href="native/efl/containers_n.htm">Using Container UI Components</a></li>
+						<li><a href="native/efl/form_tutorial_n.htm">Creating a Form for a Basic Application Layout</a></li>
+						<li><a href="native/efl/naviframe_tutorial_n.htm">Creating a Naviframe for Navigation</a></li>
+						<li><a href="native/efl/layout_tutorial_n.htm">Creating UI Screen Layouts</a></li>
+						<li><a href="native/efl/panes_tutorial_mn.htm">Creating Panes</a></li>
+					</ul>				
+				</li>
+				<li><a href="native/efl/theme_n.htm">Themes</a>
+					<ul>
+						<li><a href="native/efl/edje_intro_n.htm">Introduction to EDC Programming</a></li>
+						<li><a href="native/efl/edc_positioning_n.htm">Positioning Parts with the EDC File</a></li>
+						<li><a href="native/efl/edc_part_block_n.htm">EDJE Data Collection Reference</a></li>
+						<li><a href="native/efl/edc_optimization_n.htm">Optimizing EDC</a></li>
+					</ul>				
+				</li>
+				<li><a href="native/efl/edje_objects_n.htm">Edje Objects</a>
+					<ul>
+						<li><a href="native/efl/edje_files_n.htm">Handling Edje Files</a></li>
+						<li><a href="native/efl/edje_scaling_n.htm">Scaling Edje Objects</a></li>
+						<li><a href="native/efl/edje_color_n.htm">Using Edje Color Classes</a></li>
+						<li><a href="native/efl/edje_text_n.htm">Using Edje Text Classes</a></li>
+						<li><a href="native/efl/edje_perspective_n.htm">Using Edje Perspective</a></li>
+						<li><a href="native/efl/edje_message_signal_n.htm">Managing Signals and Messages</a></li>
+						<li><a href="native/efl/edje_manage_animation_n.htm">Managing Edje Animations</a></li>
+					</ul>				
+				</li>
+				<li><a href="native/efl/font_setting_n.htm">Fonts</a>
+					<ul>
+						<li><a href="native/efl/font_resource_n.htm">Font Resources</a></li>
+					</ul>
+				</li>
+				<li><a href="native/efl/ui_scalability_n.htm">Scaling</a>
+					<ul>
+						<li><a href="native/efl/multiple_screens_n.htm">Multiple Screen Support</a></li>
+						<li><a href="native/efl/scalability_n.htm">Scalability Support</a></li>
+						<li><a href="native/efl/resource_fallback_n.htm">Resource Fallback Support</a></li>
+					</ul>				
+				</li>
+				<li><a href="native/efl/notification_window_n.htm">Notification Windows</a></li>
+				<li><a href="native/efl/core_loop_n.htm">Core Loop and OS Interfacing</a>
+					<ul>
+						<li><a href="native/efl/main_loop_n.htm">Handling the Main Loop</a></li>
+						<li><a href="native/efl/threads_n.htm">Using Threads</a></li>
+					</ul>				
+				</li>
+				<li><a href="native/efl/graphical_objects_n.htm">Graphical Objects</a>
+					<ul>
+						<li><a href="native/efl/evas_objects_n.htm">Evas Objects</a></li>
+						<li><a href="native/efl/evas_rendering_n.htm">Evas Rendering Concept and Method</a></li>
+						<li><a href="native/efl/evas_basic_objects_n.htm">Basic Manipulation of Evas Objects</a></li>
+						<li><a href="native/efl/evas_advanced_objects_n.htm">Advanced Manipulation of Evas Objects</a></li>
+						<li><a href="native/efl/evas_optimization_n.htm">Optimizing Evas</a></li>
+					</ul>				
+				</li>
+				<li><a href="native/efl/event_handling_n.htm">Event Handling</a>
+					<ul>
+						<li><a href="native/efl/event_types_n.htm">Event Types</a></li>
+						<li><a href="native/efl/multipoint_touch_n.htm">Tracking Multi-point Touch Events</a></li>
+					</ul>				
+				</li>
+				<li><a href="native/efl/animation_effects_n.htm">Animations and Effects</a>
+					<ul>
+						<li><a href="native/efl/ecore_animation_n.htm">Ecore Animations</a></li>
+						<li><a href="native/efl/ecore_animation_tutorial_n.htm">Creating Ecore Animations</a></li>
+						<li><a href="native/efl/edje_animation_n.htm">Edje Animations</a></li>
+						<li><a href="native/efl/edje_animation_tutorial_n.htm">Creating Edje Animations</a></li>
+						<li><a href="native/efl/elementary_animation_n.htm">Elementary Animations</a></li>
+						<li><a href="native/efl/elementary_animation_tutorial_n.htm">Creating Elementary Animations</a></li>
+						<li><a href="native/efl/elementary_transit_effect_tutorial_n.htm">Creating Elementary Transit Effects</a></li>
+						<li><a href="native/efl/evas_map_animation_n.htm">Evas Map Effects</a></li>
+						<li><a href="native/efl/evas_map_effects_n.htm">Creating Evas Map Effects</a></li>
+					</ul>				
+				</li>				
+				<li><a href="native/efl/data_types_tools_n.htm">Data Types and Tools</a>
+					<ul>
+						<li><a href="native/efl/data_types_n.htm">Data Types</a></li>
+						<li><a href="native/efl/tools_n.htm">Tools</a></li>
+					</ul>				
+				</li>	
+				<li><a href="native/efl/hw_input_n.htm">Hardware Input Handling: Managing Hardware Events with EFL Extension</a>
+					<ul>
+						<li><a href="native/efl/key_events_mn.htm">Managing Menu and Back Key Events</a></li>
+						<li><a href="native/efl/rotary_events_wn.htm">Managing Rotary Events</a></li>
+						<li><a href="native/efl/key_grab_n.htm">Grabbing Hardware Key Events</a></li>
+					</ul>				
+				</li>				
+			</ul>
+		</li>
+		<li><a href="native/dali/guides_dali_n.htm">DALi</a>
+			<ul>
+				<li><a href="native/dali/dali_overview_n.htm">DALi Overview</a></li>
+				<li><a href="native/dali/actors_n.htm">Actors</a>
+					<ul>
+						<li><a href="native/dali/layout_n.htm">Layout Management</a></li>
+					</ul>
+				</li>
+				<li><a href="native/dali/event_handling_n.htm">Event Handling</a></li>
+				<li><a href="native/dali/ui_components_n.htm">UI Components</a>
+					<ul>
+						<li><a href="native/dali/buttons_n.htm">Buttons</a></li>
+						<li><a href="native/dali/itemview_n.htm">ItemView</a></li>
+						<li><a href="native/dali/scrollview_n.htm">ScrollView</a></li>
+						<li><a href="native/dali/tableview_n.htm">TableView</a></li>
+						<li><a href="native/dali/textfield_n.htm">TextField</a></li>
+						<li><a href="native/dali/textlabel_n.htm">TextLabel</a></li>
+						<li><a href="native/dali/imageview_n.htm">ImageView</a></li>
+						<li><a href="native/dali/control_base_n.htm">Control</a></li>
+					</ul>
+				</li>
+				<li><a href="native/dali/animation_n.htm">Animation</a>
+					<ul>
+						<li><a href="native/dali/animation_types_n.htm">Animation Types</a></li>
+						<li><a href="native/dali/constraints_n.htm">Constraints</a></li>
+					</ul>
+				</li>
+				<li><a href="native/dali/resources_n.htm">Resources</a></li>
+				<li><a href="native/dali/rendering_effects_n.htm">Rendering and Effects</a></li>
+				<li><a href="native/dali/background_n.htm">Background Knowledge</a>
+					<ul>
+						<li><a href="native/dali/handle_n.htm">Handle/Body Pattern</a></li>
+						<li><a href="native/dali/properties_n.htm">Properties</a></li>
+						<li><a href="native/dali/multi_threaded_n.htm">Multi-threaded Architecture</a></li>
+					</ul>
+				</li>
+			</ul>
+		</li>
+	</ul>
+
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="scripts/showhide.js"></script>
+</div></div></div>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.practices/html/native/dali/actors_n.htm b/org.tizen.ui.practices/html/native/dali/actors_n.htm
new file mode 100644
index 0000000..16d8392
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/actors_n.htm
@@ -0,0 +1,213 @@
+<!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>Actors: Working with Basic DALi Components</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+				<li><a href="#types">Actor Types</a></li>
+				<li><a href="#actors">Actors and Stage</a></li>
+                <li><a href="#position">Positioning Actors</a></li>
+                <li><a href="#event">Event Handling for Actors</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Actors: Working with Basic DALi Components</h1>
+
+<p>An actor is the basic component that composes the entire scene. It can have visible (for example UI components or image actor) or invisible (for example camera actor or layer) forms.</p>
+<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>
+
+<h2 id="types" name="types">Actor Types</h2>
+
+<p class="figure">Figure: Actor types</p> 
+<p align="center"><img alt="Actor types" src="../../images/actor_types.png"/></p>
+
+<p>Actor has the following concrete types:</p>
+
+<ul>
+<li><strong>UI Components</strong> are used to organize the application appearance. For more information, see <a href="ui_components_n.htm">UI Components</a>.</li>
+
+<li><strong>Camera actor</strong> determines which view of the whole virtual 3D world is rendered on the screen. By default, it is best suited for 2D applications, so you do not need to care about it in this case. For more information, see the <span style="font-family: Courier New,Courier,monospace;">Dali::CameraActor</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1CameraActor.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1CameraActor.html">wearable</a> applications).</li>
+
+<li><strong>Layer</strong> provides a mechanism for overlaying groups of actors on top of each other. For more information, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Layer</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a> applications).</li>
+</ul>
+
+
+<h2 id="actors" name="actors">Actors and Stage</h2>
+
+<p>Stage is a top-level object that represents the entire 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, which means an actor inherits a position relative to its parent, and can be moved in relation to this point.</p>
+
+<p>The stage instance is a singleton object (the only instance of its class during the lifetime of the program). You can get it using a static function.</p>
+
+<p>To display the contents of an actor, it must be added to a stage. The following example shows how to connect a new actor to the stage:</p>
+
+<pre class="prettyprint">Actor actor = Actor::New();
+Stage::GetCurrent().Add(actor);
+</pre>
+
+	
+<h2 id="position" name="position">Positioning Actors</h2>
+<p>An actor inherits its parent&#39;s position. The relative position between the actor &amp; parent is determined by the following properties:</p>
+<ul>
+<li><strong>Parent origin</strong>
+<p>This Vector3 property defines a point within the parent actor&#39;s area.</p>
+
+<p class="figure">Figure: Parent origin</p>  
+	<p align="center"><img alt="Parent origin" src="../../images/parent_origin.png"/></p> 
+ 
+<p>The default is top-left (<span style="font-family: Courier New,Courier,monospace;">Dali::ParentOrigin::TOP_LEFT</span>), which can be visualized in 2D as (0, 0), but is actually Vector3 (0, 0, 0.5) in the 3D DALi world. The actor position is relative to this point.</p>
+<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetParentOrigin()</span> function.</p>
+</li>
+
+<li><strong>Anchor point</strong>
+
+<p>This Vector3 property defines a point within the child actor area.</p>
+
+<p class="figure">Figure: Anchor point</p>  
+	<p align="center"><img alt="Anchor point" src="../../images/anchor_point.png"/></p> 
+ 
+<p>The default is center (<span style="font-family: Courier New,Courier,monospace;">Dali::AnchorPoint::CENTER</span>), which can be visualized in 2D as (0.5, 0.5), but is actually Vector3 (0.5, 0.5, 0.5) in the 3D DALi world. The actor position is also relative to this point.</p>
+<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetAnchorPoint()</span> function.</p>
+</li>
+
+
+<li><strong>Position</strong>
+<p>This is the position vector between the parent origin and anchor point.</p>
+
+<p class="figure">Figure: Position</p>  
+	<p align="center"><img alt="Position" src="../../images/actor_position.png"/></p> 
+ 
+<p>Therefore by default, an actor&#39;s position indicates the vector to its center from the top-left corner of its parent.</p>
+
+<p>For example (with the default camera):</p>
+<ul>
+	<li>An actor added directly to the stage with position (X = stageWidth*0.5, Y = stageHeight*0.5) appears in the center of the screen.</li>
+	<li>An actor with the position (X = actorWidth*0.5, Y = actorWidth*0.5) appears at the top-left corner of the screen.
+	<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetPosition()</span> function.</p>
+	</li>
+</ul>
+</li>
+</ul> 
+
+<h2 id="event" name="event">Event Handling for Actors</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class provides following event signals:</p> 
+
+<table>
+   <caption>
+     Table: Event signals
+   </caption>
+   <tbody>
+    <tr>
+     <th>Event signal</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>
+     <td>This signal is emitted when a touch input is received.</td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
+     <td>This signal is emitted when a hover input is received.</td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">WheelEventSignal()</span></td>
+     <td>This signal is emitted when a wheel event is received.</td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">OnStageSignal()</span></td>
+     <td>This signal is emitted after the actor has been connected to the stage.</td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">OffStageSignal()</span></td>
+     <td>This signal is emitted after the actor has been disconnected from the stage.</td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">OnRelayoutSignal()</span></td>
+     <td>This signal is emitted after the size has been set on the actor during relayout.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<p>For example, a touch event can be handled as follows:</p> 
+<pre class="prettyprint">
+bool OnTouch(Actor actor, const TouchEvent&amp; touch)
+{
+&nbsp;&nbsp;&nbsp;bool handled = false;
+
+&nbsp;&nbsp;&nbsp;switch(touch.GetPointCount())
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 1: // Single touch
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (touch.GetPoint(0).GetState == TouchPoint::Down)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do action when first touches the touch screen
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handled = true;
+&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;case 2: // Multi-touch event
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return handled; // true if the operation was successful
+}
+
+// Elsewhere
+Actor actor = Actor::New();
+actor.TouchedSignal().Connect(&amp;OnTouch);</pre>
+
+<p>For more information, see <a href="event_handling_n.htm">Event Handling</a>.</p> 
+
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/animation_n.htm b/org.tizen.ui.practices/html/native/dali/animation_n.htm
new file mode 100644
index 0000000..cb4c4b7
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/animation_n.htm
@@ -0,0 +1,177 @@
+<!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>Animation: Making Your Actors Alive</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#properties">Animating Properties</a></li>
+			<li><a href="#playback">Controlling Playback</a></li>
+			<li><a href="#notifications">Using Notifications</a></li>
+			<li><a href="#alpha">Using Alpha Functions</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1AlphaFunction.html">Dali::AlphaFunction API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">Dali::Animation API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1AlphaFunction.html">Dali::AlphaFunction API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">Dali::Animation API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Animation: Making Your Actors Alive</h1>
+
+<p>You can use animation to allow your objects to move around and change their properties for a specified duration.</p>
+
+<p>DALi provides a rich and easy to use animation framework which allows you to create visually rich applications. The <span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> class can be used to animate the <a href="properties_n.htm#attributes">animatable properties</a> of any number of objects.</p> 
+
+<p>DALi animations <a href="multi_threaded_n.htm#animations">occur in a dedicated thread</a>. This allows animations to run smoothly, regardless of the time taken to process the input, events, and other factors in the application code.</p>
+
+<p>The following figure illustrates the animation components.</p>
+
+<p class="figure">Figure: DALi animation components</p>  
+	<p align="center"><img alt="DALi animation components" src="../../images/animation_components.png"/></p> 
+
+
+<p>To implement a basic animation, create an animation object that takes place over 3 seconds:</p>
+<pre class="prettyprint">
+Dali::Animation animation = Animation::New(3.0f);
+</pre>
+
+<h2 id="properties" name="properties">Animating Properties</h2>
+
+<p>To animate the properties within DALi, you can use 2 distinct functions:</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span>: Property animates TO the value in the given time.</li>
+	<li><span style="font-family: Courier New,Courier,monospace;">AnimateBy()</span>: Property animates BY the value in the given time (which means that it animates to a value that is the sum of the starting position and the given value).</li>
+</ul>
+
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">actor1</span> and <span style="font-family: Courier New,Courier,monospace;">actor2</span> instances are at the position 10.0f, 10.0f, 0.0f at the start of the animation.</p>
+<pre class="prettyprint">
+// Animate the actor1 position TO 10.0f, 50.0f, 0.0f
+animation.AnimateTo(Property(actor1, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f)); 
+// End Position: 10.0f, 50.0f, 0.0f
+
+// Animate the actor2 position BY 10.0f, 50.0f, 0.0f
+animation.AnimateBy(Property(actor2, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f)); 
+// End Position: 20.0f, 60.0f, 0.0f
+</pre>
+
+<h2 id="playback" name="playback">Controlling Playback</h2>
+
+<p>After the animation is created, you can play it:</p>
+
+<ul>
+<li>To play the animation, use the <span style="font-family: Courier New,Courier,monospace;">Play()</span> function:
+<pre class="prettyprint">
+animation.Play();
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Play()</span> function is not a synchronous function. It returns after sending a message. After the message is processed in a separate thread, the animation starts. Blocking the application thread does not stop the animation from playing.</p>
+</li>
+<li>To pause or stop the animation:
+<pre class="prettyprint">
+animation.Pause();
+animation.Stop();
+</pre> </li>
+
+<li>To loop the animation to play multiple times:
+<pre class="prettyprint">
+animation.SetLooping(true);
+</pre></li>
+<li>By default, when the animation ends, the properties that it was animating are baked (saved). To discard the property changes when the animation ends or is stopped:
+<pre class="prettyprint">
+animation.SetEndAction(Animation::Discard);
+</pre></li></ul>
+<h2 id="notifications" name="notifications">Using Notifications</h2>
+
+<p>Using DALi&#39;s signal framework, the application can be notified when the animation finishes. The <span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> class supports &quot;fire and forget&quot; behavior, which means that the animation continues to play even if the handle is discarded. In the following example, the finished signal is emitted after 2 seconds:</p>
+<pre class="prettyprint">
+// Assuming this code is in the HelloWorldController class
+void 
+Create(Application&amp; application)
+{
+&nbsp;&nbsp;&nbsp;PushButton actor = PushButton::New();
+&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add(actor);
+
+&nbsp;&nbsp;&nbsp;Animation animation = Animation::New(2.0f); // Duration 2 seconds
+&nbsp;&nbsp;&nbsp;animation.AnimateTo(Property(actor, Actor::Property::POSITION), Vector3(100.0f, 100.0f, 0.0f));
+&nbsp;&nbsp;&nbsp;animation.FinishedSignal().Connect(this, &amp;HelloWorldController::OnFinished);
+&nbsp;&nbsp;&nbsp;animation.Play(); // Fire the animation and forget about it
+} // At this point the animation handle has gone out of scope
+
+void 
+OnFinished(Animation&amp; animation)
+{
+&nbsp;&nbsp;&nbsp;// Do something when the animation is finished
+}
+</pre>
+
+<h2 id="alpha" name="alpha">Using Alpha Functions</h2>
+
+<p>Alpha functions are used in animations to specify the rate of change of the animation parameter over time. This allows the animation to be, for example, accelerated, decelerated, repeated, or bounced. The built-in supported functions can be viewed in the <span style="font-family: Courier New,Courier,monospace;">Dali::AlphaFunction::BuiltinFunction</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1AlphaFunction.html#aacf7780cdb2077166a3cd20a8a9faf4b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1AlphaFunction.html#aacf7780cdb2077166a3cd20a8a9faf4b">wearable</a> applications).</p>
+<pre class="prettyprint">
+animation.SetDefaultAlphaFunction(Dali::AlphaFunction::EASE_IN);
+</pre>
+<p>You can also create your own alpha function:</p>
+<pre class="prettyprint">
+float 
+MyAlphaFunction(float progress)
+{
+&nbsp;&nbsp;&nbsp;return progress;
+}
+
+AlphaFunction alphaFunction(&amp;MyAlphaFunction);
+animation.SetDefaultAlphaFunction(alphaFunction);
+</pre>
+<p>You can specify a different alpha function for each animate call within the <span style="font-family: Courier New,Courier,monospace;">Animation</span> object:</p>
+<pre class="prettyprint">
+animation.AnimateTo(Property(actor1, Dali::Actor::Property::POSITION), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector3(10.0f, 50.0f, 0.0f), Dali::AlphaFunction::EASE_IN);
+</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/animation_types_n.htm b/org.tizen.ui.practices/html/native/dali/animation_types_n.htm
new file mode 100644
index 0000000..eb1c426
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/animation_types_n.htm
@@ -0,0 +1,136 @@
+<!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>Animation Types: Types of Animations Supported by DALi</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#frame">Key Frame Animation</a></li>
+			<li><a href="#path">Path Animation</a></li>
+			<li><a href="#shader">Shader Effect Animation</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1KeyFrames.html">Dali::KeyFrames API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">Dali::Path API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1KeyFrames.html">Dali::KeyFrames API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Path.html">Dali::Path API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Animation Types: Types of Animations Supported by DALi</h1>
+
+<p>DALi supports key frame animation, path animation, and shader effect animation.</p>
+
+<h2 id="frame" name="frame">Key Frame Animation</h2>
+
+
+<p>DALi provides support for animating between several different values, or key frames. A key frame takes a progress value between 0.0f and 1.0f (0 and 100% respectively) and portrays the value of the property when the animation has progressed that much. You can create several key frames:</p>
+<pre class="prettyprint">
+Dali::KeyFrames keyFrames = Dali::KeyFrames::New();
+keyFrames.Add(0.0f, Vector3(10.0f, 10.0f, 10.0f));
+keyFrames.Add(0.7f, Vector3(200.0f, 200.0f, 200.0f));
+keyFrames.Add(1.0f, Vector3(100.0f, 100.0f, 100.0f));
+</pre>
+
+<p>Next, you can add the key frames to your animation.</p>
+<pre class="prettyprint">
+animation.AnimateBetween(Property(actor1, Dali::Actor::Property::POSITION), keyFrames);
+</pre>
+<p>When you play the animation, DALi animates the position of <span style="font-family: Courier New,Courier,monospace;">actor1</span> between the specified key frames. The <span style="font-family: Courier New,Courier,monospace;">actor1</span> animates from (10.0f, 10.0f, 10.0f) to (200.0f, 200.f, 200.0f) by 70% of the animation time, and then spends the remaining time animating back to (100.0f, 100.0f, 100.0f).</p>
+<p>The advantage of specifying a key frame at 0% is that regardless of where the <span style="font-family: Courier New,Courier,monospace;">actor1</span> is, it starts from position (10.0f, 10.0f, 10.0f). If <span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span> is used, the start position is the <span style="font-family: Courier New,Courier,monospace;">actor1</span>&#39;s current position.</p>
+
+<h2 id="path" name="path">Path Animation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class  can be used to animate the position and orientation of actors.</p>
+
+<p>The black points in the following figure are points where the DALi logo travels to. The red points are the control points which express the curvature of the path on the black points.</p>
+
+<p class="figure">Figure: Path animation</p>  
+	<p align="center"><img alt="Path animation" src="../../images/path_animation.png"/></p> 
+	
+<p>The following code presents the black points:</p>
+<pre class="prettyprint">
+Path path = Path::New();
+path.AddPoint(Vector3(50.0f, 10.0f, 0.0f));
+path.AddPoint(Vector3(90.0f, 50.0f, 0.0f));
+path.AddPoint(Vector3(10.0f, 90.0f, 0.0f));
+</pre>
+<p>The control points can be added manually using <span style="font-family: Courier New,Courier,monospace;">Dali::Path::AddControlPoint</span>. The <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class  can also auto-generate the control points for you.</p>
+<pre class="prettyprint">
+path.GenerateControlPoints(0.25f);
+</pre>
+<p>Here 0.25f represents the curvature of the path you require. For more information, see the <span style="font-family: Courier New,Courier,monospace;">GenerateControlPoints()</span> function in <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Path.html">wearable</a> applications).</p>
+<p>To animate <span style="font-family: Courier New,Courier,monospace;">actor1</span> along this path, use the following function:</p>
+<pre class="prettyprint">
+animation.Animate(actor1, path, Vector3::ZERO);
+</pre>
+<p>The third parameter is the forward vector (in a local space coordinate system) that is oriented with the path&#39;s tangent direction.</p>
+
+
+<h2 id="shader" name="shader">Shader Effect Animation</h2>
+<p>Shader effects provide a visual effect for actors. In a shader, uniforms are set according to the purpose of applications. The uniforms of a shader can be animated using the <span style="font-family: Courier New,Courier,monospace;">Animation::AnimateTo()</span> functions.</p>
+<p>For example, to animate the center point of the Bendy shader effect:</p>
+<pre class="prettyprint">
+Dali::Animation animation = Dali::Animation::New(1.0f);
+
+Vector2 newPosition(0.0f, 0.0f);
+animation.AnimateTo(Property(shaderEffect, shaderEffect.GetPositionPropertyName()), newPosition);
+</pre>
+<p>To animate a uniform of a custom shader effect, you must use the name of the uniform:</p>
+<pre class="prettyprint">
+Dali::Animation animation = Dali::Animation::New(1.0f);
+
+// Set the initial value for the uniform
+shaderEffect.SetUniform(&quot;myUniform&quot;, -0.5f);
+
+// Animate the uniform to a value
+animation.AnimateTo(Property(shaderEffect, &quot;myUniform&quot;), 0.5f);
+</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/background_n.htm b/org.tizen.ui.practices/html/native/dali/background_n.htm
new file mode 100644
index 0000000..5c9e909
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/background_n.htm
@@ -0,0 +1,72 @@
+<!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>Background Knowledge: Using DALi More Effectively</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Background Knowledge: Using DALi More Effectively</h1>
+
+<p>The following useful background knowledge enables you to use DALi more effectively:</p>
+	<ul>
+		<li><a href="handle_n.htm">Handle/Body Pattern: Basic Way of Using DALi Objects</a>
+		<p>Enables you to take advantage of the handle/body pattern, which separates the implementation details from its interface.</p></li>
+		<li><a href="properties_n.htm">Properties: Accessing Properties of DALi Objects</a>
+		<p>Enabled you to manage properties that can be dynamically added to or removed from an existing object at runtime.</p></li>
+		<li><a href="multi_threaded_n.htm">Multi-threaded Architecture: Secret of DALi High-Performance</a>
+		<p>Enables you to achieve the best performance and scalability.</p></li>
+	</ul>
+
+
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/dali/buttons_n.htm b/org.tizen.ui.practices/html/native/dali/buttons_n.htm
new file mode 100644
index 0000000..3ff9fde
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/buttons_n.htm
@@ -0,0 +1,234 @@
+<!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>Buttons: Push, Check, Select!</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#PushButton">Push Button</a></li>
+			<li><a href="#CheckBoxButton">CheckBox Button</a></li>
+			<li><a href="#RadioButton">Radio Button</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Button.html">Dali::Toolkit::Button API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1CheckBoxButton.html">Dali::Toolkit::CheckBoxButton API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1PushButton.html">Dali::Toolkit::PushButton API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1RadioButton.html">Dali::Toolkit::RadioButton API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Button.html">Dali::Toolkit::Button API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1CheckBoxButton.html">Dali::Toolkit::CheckBoxButton API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1PushButton.html">Dali::Toolkit::PushButton API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1RadioButton.html">Dali::Toolkit::RadioButton API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Buttons: Push, Check, Select!</h1>
+
+<p>A button is a small object on the UI that you press in order to operate it. DALi provides button controls, such as <span style="font-family: Courier New,Courier,monospace;">PushButton</span>, <span style="font-family: Courier New,Courier,monospace;">CheckBoxButton</span>, and <span style="font-family: Courier New,Courier,monospace;">RadioButton</span>. The base class for the button controls is <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span>. The <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> class provides the <span style="font-family: Courier New,Courier,monospace;">disabled</span> property and the <span style="font-family: Courier New,Courier,monospace;">clicked</span> signal. The following table lists the basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> class.</p>
+
+<table>
+   <caption>
+     Table: <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> input signals
+   </caption>
+   <tbody>
+    <tr>
+     <th>Input signal</th>
+	 <th>Description</th>
+    </tr>
+    <tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">PressedSignal()</span></td>
+		<td>Emitted when the button is pressed.
+		</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">ReleasedSignal()</span></td>
+		<td>Emitted when the button is released.
+		</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">ClickedSignal()</span></td>
+		<td>Emitted when the button is clicked.
+		</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">StateChangedSignal()</span></td>
+		<td>Emitted when the button state is changed.
+		</td>
+	</tr>
+   </tbody>
+  </table>
+
+<h2 id="PushButton" name="PushButton">Push Button</h2>
+ 
+<p>The <span style="font-family: Courier New,Courier,monospace;">PushButton</span> class provides a button that can be pressed to operate it. A push button changes its appearance when is pressed and returns to its original appearance when is released.</p>
+
+<p class="figure">Figure: Push button</p>  
+	<p align="center"><img alt="Push button" src="../../images/push_button.png"/></p> 
+
+<p>A push button emits a <span style="font-family: Courier New,Courier,monospace;">Button::PressedSignal()</span> signal when the button is pressed, a <span style="font-family: Courier New,Courier,monospace;">Button::ClickedSignal()</span> signal when clicked, and a <span style="font-family: Courier New,Courier,monospace;">Button::ReleasedSignal()</span> signal when released or the touch point leaves the boundary of the button. The following code shows an example of a basic push button:</p>
+
+<pre class="prettyprint">
+class 
+ButtonsController: public ConnectionTracker
+{
+&nbsp;&nbsp;&nbsp;public:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ButtonController(Application&amp; application): mApplication(application)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ButtonController::Create);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PushButton button = PushButton::New();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;Select&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetParentOrigin(ParentOrigin::CENTER);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.ClickedSignal().Connect(this, &amp;ButtonController::OnButtonClicked);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add(button);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool OnButtonClicked(Toolkit::Button button)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cout &lt;&lt; &quot;OnButtonClicked&quot; &lt;&lt; endl;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;private:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Application&amp;  mApplication;
+};
+
+int 
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;Application application = Application::New(&amp;argc, &amp;argv);
+&nbsp;&nbsp;&nbsp;ButtonController test(application);
+&nbsp;&nbsp;&nbsp;application.MainLoop();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+
+<h2 id="CheckBoxButton" name="CheckBoxButton">CheckBox Button</h2>
+ 
+<p>The <span style="font-family: Courier New,Courier,monospace;">CheckBoxButton</span> class provides a check box button, which can be checked or unchecked.</p>
+
+<p class="figure">Figure: Checkbox button</p>  
+	<p align="center"><img alt="Checkbox button" src="../../images/checkbox_button.png"/></p> 
+
+<p>A checkbox button emits all 4 button input signals, but usually you can just use the <span style="font-family: Courier New,Courier,monospace;">Button::StateChangedSignal()</span> signal to be notified when the button changes its state to selected or unselected. The following code shows an example of a basic checkbox button:</p>
+
+<pre class="prettyprint">
+// Same as the push button example
+
+void 
+Create(Application&amp; application)
+{
+&nbsp;&nbsp;&nbsp;CheckBoxButton button = CheckBoxButton::New();
+&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;Select&quot;);
+&nbsp;&nbsp;&nbsp;button.SetSize(100, 40);
+&nbsp;&nbsp;&nbsp;button.SetBackgroundColor(Vector4(1, 0, 0, 1));
+&nbsp;&nbsp;&nbsp;button.SetParentOrigin(ParentOrigin::CENTER);
+&nbsp;&nbsp;&nbsp;button.StateChangedSignal().Connect(this, &amp;ButtonController::OnButtonStateChanged);
+&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add(button);
+}
+
+bool 
+OnButtonStateChanged(Toolkit::Button button)
+{
+&nbsp;&nbsp;&nbsp;cout &lt;&lt; &quot;OnButtonStateChanged &quot; &lt;&lt; button.IsSelected() &lt;&lt; endl;
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+// Same as the push button example
+</pre>
+
+<h2 id="RadioButton" name="RadioButton">Radio Button</h2>
+ 
+<p>The <span style="font-family: Courier New,Courier,monospace;">RadioButton</span> class provides a radio button with 2 states: selected and unselected.</p>
+
+<p class="figure">Figure: Radio button</p>  
+	<p align="center"><img alt="Radio button" src="../../images/radio_button.png"/></p> 
+
+<p>Usually, radio buttons are grouped. Two or more radio buttons are in the same group when they have the same parent. In each group, only 1 radio button can be selected at a given time. You can use the <span style="font-family: Courier New,Courier,monospace;">Button::StateChangedSignal()</span> signal to check which radio button is selected. The following code shows an example of a basic radio button:</p>
+
+<pre class="prettyprint">
+// Same as the push button example
+
+void 
+Create(Application&amp; application)
+{
+&nbsp;&nbsp;&nbsp;Actor radioGroup = Actor::New();
+&nbsp;&nbsp;&nbsp;radioGroup.SetParentOrigin(ParentOrigin::CENTER);
+&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add(radioGroup);
+
+&nbsp;&nbsp;&nbsp;RadioButton button1 = RadioButton::New();
+&nbsp;&nbsp;&nbsp;button1.SetLabel(&quot;button1&quot;);
+&nbsp;&nbsp;&nbsp;button1.SetBackgroundColor(Vector4(1, 0, 0, 1));
+&nbsp;&nbsp;&nbsp;button1.SetPosition(0, -40);
+&nbsp;&nbsp;&nbsp;radioGroup.Add(button1);
+
+&nbsp;&nbsp;&nbsp;RadioButton button2 = RadioButton::New();
+&nbsp;&nbsp;&nbsp;button2.SetLabel(&quot;button2&quot;);
+&nbsp;&nbsp;&nbsp;button2.SetBackgroundColor(Vector4(0, 0, 1, 1));
+&nbsp;&nbsp;&nbsp;button2.SetPosition(0, 40);
+&nbsp;&nbsp;&nbsp;radioGroup.Add(button2);
+
+&nbsp;&nbsp;&nbsp;button1.StateChangedSignal().Connect(this, &amp;ButtonController::OnButtonStateChanged);
+&nbsp;&nbsp;&nbsp;button2.StateChangedSignal().Connect(this, &amp;ButtonController::OnButtonStateChanged);
+}
+
+bool 
+OnButtonStateChanged(Toolkit::Button button)
+{
+&nbsp;&nbsp;&nbsp;cout &lt;&lt; &quot;OnButtonStateChanged &quot; &lt;&lt; button.GetLabel() &lt;&lt; &quot; &quot; &lt;&lt; button.IsSelected() &lt;&lt; endl;
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+// Same as the push button example
+</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/constraints_n.htm b/org.tizen.ui.practices/html/native/dali/constraints_n.htm
new file mode 100644
index 0000000..d571f7a
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/constraints_n.htm
@@ -0,0 +1,294 @@
+<!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>Constraints: Imposing Your Own Constraints on Actors</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#use">Using a Constraint</a></li>
+			<li><a href="#source">Defining Constraint Sources</a></li>
+			<li><a href="#function">Defining the Constraint Function</a></li>
+			<li><a href="#create">Creating a Constraint</a></li>
+			<li><a href="#remove">Removing Constraints</a></li>
+			<li><a href="#equal">Setting an Equal To Constraint</a></li>
+			<li><a href="#relative">Setting a Relative To Constraint</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">DALi::Constraint API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">DALi::Constraint API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Constraints: Imposing Your Own Constraints on Actors</h1>
+
+<p>Constraints are used to modify the property of an actor, based on other properties of the same actor; properties of the actor&#39;s parent; or properties of another actor altogether, when the modification needs to be at run-time. Custom functions or functors can be supplied, where the desired value of the property can be calculated. These functions (or functors) are called in every frame, therefore they must be fast and not too complex, otherwise they can affect performance.</p>
+<p>Multiple constraints can be applied to the same actor at the same time. The order in which constraints are applied is important as this is the order in which they are processed in the update thread.</p>
+<p>Constraints are applied after animations have been applied. This means that Constraints override the values set by Animations. Constraints are not applied to off-stage actors.</p>
+<p>Not all properties can be used as a constraint input. For more details, see the <span style="font-family: Courier New,Courier,monospace;">IsPropertyAConstraintInput()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">wearable</a> applications).</p>
+
+<h2 id="use" name="use">Using a Constraint</h2>
+
+<p>Constraints are designed as a way of modifying properties that cannot be modified by any existing built-in functionality, such as animations, size negotiation, parent anchor, or origin settings. As they provide the ability for the application developer to execute their own code within the update thread, DALi can no longer guarantee the timeliness of this code, or how optimized it can be.</p>
+<p>Generally, you must not use constraints with the <span style="font-family: Courier New,Courier,monospace;">size</span> property as constraining the size and size negotiation are mutually exclusive. Consider the following use cases as an example of when and when not to use a constraint:</p>
+
+<table>
+   <caption>
+     Table: Examples of constraint use
+   </caption>
+   <tbody>
+    <tr>
+     <th>Requirement</th>
+	 <th>Solution</th>
+    </tr>
+    <tr>
+		<td>Need a child to be 50% the size of it&#39;s parent.</td>
+		<td>Use size negotiation.</td>
+	</tr>
+	<tr>
+		<td>Need to zoom an actor in to the screen using its scale property.</td>
+		<td>Use an animation.</td>
+	</tr>
+	<tr>
+		<td>Need an actor to appear centered around the bottom-right corner of its parent.</td>
+		<td>Use ParentOrigin and AnchorPoint.</td>
+	</tr>
+	<tr>
+		<td>Need to lay out a series of controls with various alignment requirements.</td>
+		<td>Use either Anchor and origin settings, or a TableView.</td>
+	</tr>
+	<tr>
+		<td>Need to automatically modify the position property of one actor based on the position property of another actor, that is neither a parent OR a child.</td>
+		<td>Use a constraint.</td>
+	</tr>
+	<tr>
+		<td>Need to position an actor relative to its parent actor in a NON-UNIFORM way, or a non-linear calculation needs to be performed that requires a functor.</td>
+		<td>Use a constraint.</td>
+	</tr>
+	<tr>
+		<td>Need to modify an actor&#39;s property in real time based on some calculations that require additional data to be stored in-between frames.</td>
+		<td>Use a constraint. The constraint functor can hold any variables within it that need to be preserved frame-to-frame.</td>
+	</tr>
+   </tbody>
+  </table>
+
+<p>For most general cases, the position and size requirements of a child or parent actor (from its child or parent) can be calculated with size negotiation.</p>
+
+<h2 id="source" name="source">Defining Constraint Sources</h2>
+<p>These properties are used as input sources to the constraint. The constraint takes these values, optionally performs a calculation on them (if using a custom functor), and writes the result to the specified property of the target actor. The source actor is specified as either the same actor, its parent, or another actor.</p>
+<ul>
+<li>Local source
+<p>A local source is based on the local properties (such as size, position, scale, orientation, or color) of an actor. For example, the actor&#39;s orientation can be used as a constraint input source.</p>
+<pre class="prettyprint">
+Dali::ConstraintSource source(Dali::LocalSource(Dali::Actor::Property::ORIENTATION));
+</pre>
+</li>
+<li>Parent Source
+<p>A parent source is based on properties of the actor&#39;s parent. For example, a parent&#39;s position can be used as a constraint input source.</p>
+<pre class="prettyprint">
+Dali::ConstraintSource source(Dali::ParentSource(Dali::Actor::Property::POSITION));
+</pre>
+</li>
+<li>Other Handle Source
+<p>You can base your source on the properties of another handle altogether. For example, a sibling actor&#39;s color can be used as a constraint input source.</p>
+<pre class="prettyprint">
+Dali::ConstraintSource source(Dali::Source(anotherHandle, Dali::Actor::Property::COLOR));
+</pre>
+</li>
+</ul>
+
+<h2 id="function" name="function">Defining the Constraint Function</h2>
+
+<p>The signature of the constraint function is:</p>
+
+<pre class="prettyprint">
+void Function(PropertyType &amp;current, const Dali::PropertyInputContainer &amp;inputs);
+</pre>
+<p>In this function the <span style="font-family: Courier New,Courier,monospace;">current</span> parameter is a reference to the target property type, such as float, Vector2, or Vector3. This is an in or out parameter. It represents the current value of the property and the expectation is that it is modified by the function to the desired value.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">inputs</span> parameter holds all the constraint input sources. Each element is a pointer to the property input and can be accessed using the indexing operator [ ]. The order in which the sources are added is the order in which the property inputs are sorted in the container.</p>
+<pre class="prettyprint">
+constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::POSITION));
+constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::SIZE));
+constraint.AddSource(Dali::ParentSource(Dali::Actor::Property::POSITION));
+constraint.AddSource(Dali::ParentSource(Dali::Actor::Property::SIZE));
+</pre>
+<p>In the constraint function this equals to:</p>
+<pre class="prettyprint">
+const Dali::Vector3&amp; position(inputs[0]-&gt;GetVector3());
+const Dali::Vector3&amp; size(inputs[1]-&gt;GetVector3());
+const Dali::Vector3&amp; parentPosition(inputs[2]-&gt;GetVector3());
+const Dali::Vector3&amp; parentSize(inputs[3]-&gt;GetVector3());
+</pre>
+
+
+<h2 id="create" name="create">Creating a Constraint</h2>
+<h3>Using C Functions</h3>
+<p>If you do not have any data that is changed at runtime, C functions must be used. For example, the color of an actor can be changed based on its position along the x axis to a preset distance of 100, beyond which it is transparent.</p>
+<pre class="prettyprint">
+Dali::Actor actor = Actor::New();
+
+// Create a constraint that targets actor
+Dali::Constraint constraint = Dali::Constraint::New&lt; Vector4 &gt;(actor, Dali::Actor::Property::COLOR, MyConstraintFunction); 
+
+// Add the POSITION property as a constraint input
+constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::POSITION)); 
+
+// Apply the constraint
+constraint.Apply(); 
+</pre>
+
+<p>The following example shows the actual C function:</p>
+<pre class="prettyprint">
+void MyConstraintFunction(Dali::Vector4&amp; current, const Dali::PropertyInputContainer&amp; inputs)
+{
+&nbsp;&nbsp;&nbsp;const Dali::Vector3&amp; position(inputs[0]-&gt;GetVector3());
+
+&nbsp;&nbsp;&nbsp;float distance = fabs(position.x);
+
+&nbsp;&nbsp;&nbsp;// More than 100.0f away, opacity is 0.0f
+&nbsp;&nbsp;&nbsp;if (distance &gt; 100.0f)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = 0.0f;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Otherwise it blends between fully opaque and transparent
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = (100.0f - distance) / 100.0f;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">New()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications).</p>
+
+<h3>Using Functors</h3>
+
+<p>If you need to store some data in a struct or class, a functor can be used. Reusing the last example, the color of an actor is changed based on its position along the x axis, but the distance when it is transparent is different for each applied constraint.</p>
+<pre class="prettyprint">
+Dali::Actor actor = Actor::New();
+
+// Create a constraint that targets actor, and uses MyFunctor with a distance of 200
+Dali::Constraint constraint = Dali::Constraint::New&lt; Vector4 &gt;(actor, Dali::Actor::Property::COLOR, MyFunctor(200)); 
+
+// Add the POSITION property as a constraint input
+constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::POSITION)); 
+
+// Apply the constraint
+constraint.Apply(); 
+</pre>
+<p>The following example shows the structure:</p>
+<pre class="prettyprint">
+struct MyFunctor
+{
+&nbsp;&nbsp;&nbsp;// Constructor which takes the distance at which the actor is fully transparent
+&nbsp;&nbsp;&nbsp;MyFunctor(float distance)
+&nbsp;&nbsp;&nbsp;: mDistance(distance)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Functor
+&nbsp;&nbsp;&nbsp;void operator()(Dali::Vector4 &amp;current, const Dali::PropertyInputContainer &amp;inputs)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const Dali::Vector3&amp; position(inputs[0]-&gt;GetVector3());
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float distance = fabs(position.x);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// More than mDistance away, opacity is 0.0f
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (distance &gt; mDistance)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = 0.0f;
+&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;// Otherwise it blends between fully opaque and transparent
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = (100.0f - mDistance) / 100.0f;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Data
+&nbsp;&nbsp;&nbsp;const float mDistance;
+};
+</pre>
+<p><span style="font-family: Courier New,Courier,monospace;">MyFunctor()</span> can be used also with another constraint with a different distance.</p>
+<p>Instead of using the default functor, another function can be declared in the class or struct and be used as the constraint function.</p>
+<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">New()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications).</p>
+
+
+<h2 id="remove" name="remove">Removing Constraints</h2>
+
+<p>The actor&#39;s constraints can later be removed in several ways:</p>
+<pre class="prettyprint">
+mConstraint.Remove(); // mConstraint is a base-handle to a constraint
+actor.RemoveConstraints(); // Removes ALL constraints applied to an actor
+actor.RemoveConstraint(tag); // All constraints with the tag are removed from the actor (tag can be set using SetTag)
+</pre> 
+
+
+<h2 id="equal" name="equal">Setting an Equal To Constraint</h2>
+
+<p>The built-in <span style="font-family: Courier New,Courier,monospace;">Dali::EqualToConstraint</span> function can be used if only setting a property equal to another property is required:</p>
+<pre class="prettyprint">
+Dali::Constraint constraint = Dali::Constraint::New&lt; Vector3 &gt;(actor, Dali::Actor::Property::POSITION, Dali::EqualToConstraint());
+constraint.AddSource(Dali::Source(anotherActor, Dali::Actor::Property::POSITION));
+constraint.Apply();
+</pre>
+<p>Here actor&#39;s position is set to equal the position of <span style="font-family: Courier New,Courier,monospace;">anotherActor</span>.</p>
+
+
+<h2 id="relative" name="relative">Setting a Relative To Constraint</h2>
+
+<p>The built in <span style="font-family: Courier New,Courier,monospace;">Dali::RelativeToConstraint</span> and <span style="font-family: Courier New,Courier,monospace;">Dali::RelativeToConstraintFloat</span> functions can be used if only setting a property relative to another property is required:</p>
+
+<pre class="prettyprint">
+Dali::Constraint constraint = Dali::Constraint::New&lt; Vector3 &gt;(actor, Dali::Actor::Property::POSITION, Dali::RelativeToConstraint(2.0f));
+constraint.AddSource(Dali::Source(anotherActor, Dali::Actor::Property::POSITION));
+constraint.Apply();
+</pre>
+<p>Here the actor&#39;s position is relative to the position of <span style="font-family: Courier New,Courier,monospace;">anotherActor</span>. If <span style="font-family: Courier New,Courier,monospace;">anotherActor</span> is at (10.0f, 20.0f, 30.0f), <span style="font-family: Courier New,Courier,monospace;">actor</span> is at (20.0f, 40.0f, 60.0f).</p>
+
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/dali/control_base_n.htm b/org.tizen.ui.practices/html/native/dali/control_base_n.htm
new file mode 100644
index 0000000..e686ca6
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/control_base_n.htm
@@ -0,0 +1,113 @@
+<!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>Control: Base Class of UI Components</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#background-color">Setting the Background Color</a></li>
+			<li><a href="#background-image">Setting the Background Image</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Control: Base Class of UI Components</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> class is the base class for all UI components in DALi. With this class, you can, for example, manage the background color and images for UI components.</p>
+
+
+<h2 id="background-color" name="background-color">Setting the Background Color</h2>
+
+<p>You can set a background color for a UI component. To set a red background for a component:</p>
+
+<pre class="prettyprint">
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+control.SetSize(200.0f, 200.0f);
+control.SetBackgroundColor(Dali::Color::RED);
+</pre>
+
+<p class="figure">Figure: Control object with a red background</p>  
+	<p align="center"><img alt="Control object with a red background" src="../../images/background_control_color.png"/></p> 
+
+<p>You can handle all existing controls similarly. For example, to set the background color for a TextLabel:</p>
+
+<pre class="prettyprint">
+Dali::Toolkit::TextLabel label = Dali::Toolkit::TextLabel::New(&quot;Hello World&quot;);
+label.SetBackgroundColor(Dali::Color::RED);
+</pre>
+
+<p class="figure">Figure: TextLabel object with a red background</p>  
+	<p align="center"><img alt="TextLabel object with a red background" src="../../images/background_textlabel.png"/></p> 
+
+
+<h2 id="background-image" name="background-image">Setting the Background Image</h2>
+
+<p>You can set a background image of a control:</p>
+
+<pre class="prettyprint">
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Image image = Dali::Image::New(&quot;image.png&quot;);
+control.SetBackgroundImage(image);
+</pre>
+
+<p class="figure">Figure: Control object with a background image</p>  
+	<p align="center"><img alt="Control object with a background image" src="../../images/background_image.png"/></p> 
+
+<p>The background image is blended with the background color. The following example shows what happens if a red background color is set on the control with a background image:</p>
+  
+<pre class="prettyprint">
+control.SetBackgroundColor(Dali::Color::RED);
+</pre>
+
+<p class="figure">Figure: Control object with a background image blended with a background color</p>  
+	<p align="center"><img alt="Control object with a background image blended with a background color" src="../../images/background_image_color.png"/></p> 
+    
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/dali/dali_applications_n.htm b/org.tizen.ui.practices/html/native/dali/dali_applications_n.htm
new file mode 100644
index 0000000..e9ada1f
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/dali_applications_n.htm
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Application: Framework for DALi Application</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">DALi::Application API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">DALi::Application API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Application: Framework for DALi Application</h1>
+
+<p>The Adaptor framework provides the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class, which initializes and sets up DALi appropriately. The class provides many platform-related services.</p>
+
+<p>Several signals can be connected to keep you informed when certain platform-related activities occur. It also ensures that, upon system events, DALi is called in a thread-safe manner.</p>
+
+<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance and connect to its initialize signal, where the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> hierarchy is created:</p>
+
+<pre class="prettyprint">void CreateProgram(Application&amp; app)
+{
+&nbsp;&nbsp;&nbsp;// Create DALi components...
+&nbsp;&nbsp;&nbsp;Dali::Actor actor = Actor::New();
+&nbsp;&nbsp;&nbsp;...
+}
+int main (int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;Dali::Application app = Application::New(&amp;argc, &amp;argv);
+&nbsp;&nbsp;&nbsp;app.InitSignal().Connect(&amp;CreateProgram);
+&nbsp;&nbsp;&nbsp;app.MainLoop();
+}</pre>
+
+<h2 id="window" name="window">Window</h2>
+
+<p>DALi provides the <span style="font-family: Courier New,Courier,monospace;">Window</span> class to manage drawing to a default surface. The class is also responsible for drawing the Indicator bar if required. The <span style="font-family: Courier New,Courier,monospace;">Application</span> class automatically creates a <span style="font-family: Courier New,Courier,monospace;">Window</span> which the you can access after the <span style="font-family: Courier New,Courier,monospace;">SignalInit()</span> function has fired.</p>
+
+<pre class="prettyprint">void CreateProgram(Application&amp; app)
+{
+&nbsp;&nbsp;&nbsp;app.GetWindow().ShowIndicator(Dali::Window::VISIBLE);
+}
+int main (int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;Dali::Application app = Application::New(argc, argv);
+&nbsp;&nbsp;&nbsp;app.SignalInit().Connect(&amp;CreateProgram);
+&nbsp;&nbsp;&nbsp;app.MainLoop();
+}</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm b/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm
new file mode 100644
index 0000000..8d11197
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm
@@ -0,0 +1,248 @@
+<!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>DALi Overview: Getting Started with DALi UI Programming</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#dali">Dali Fundamentals</a></li>
+			<li><a href="#create">Creating a DALi Application</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__dali.html">DALi API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__dali.html">DALi API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>DALi Overview: Getting Started with DALi UI Programming</h1>
+
+<p>Dynamic Animation Library (DALi) internally defines a virtual 3D world (space) and maintains hierarchical objects in the 3D world. The hierarchical object tree is known as the <a href="http://en.wikipedia.org/wiki/Scene_graph" target="_blank">scene graph</a>. A node in the scene graph can have several children but often only a single parent, with the effect of a parent applied to all its child nodes; an operation performed on a group automatically propagates its effect to all of its members.</p>
+<p>There are various types of nodes, such as image, text, and buttons.</p>
+
+<h2 id="dali" name="dali">DALi Fundamentals</h2>
+
+<p>Before starting UI programming with DALi, familiarize yourself with the basic concepts.</p>
+
+<h3>Actor and Stage</h3>
+
+<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>
+<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>
+
+<h3>Signal and Slot</h3>
+
+<p><a href="http://doc.qt.io/qt-5/signalsandslots.html" target="_blank">Signals and slots</a> are used in the QT GUI library for communication between objects. Objects can send signals containing event information, which can be received by other objects using special functions known as slots. The DALi event system follows the signal and slot mechanism.</p>
+
+<p>Signal events are emitted when a certain action or event occurs. The application can connect using these signals. Standard C-style functions can be used to connect to these signals if no local data needs to be accessed, otherwise a class function can also be connected.</p>
+<p>Applications can manually disconnect from signals when required. However, DALi also provides safe signal disconnection. This means that when the connecting object is deleted, the signal is automatically disconnected.</p>
+
+<h3 id="coordinate" name="coordinate">Coordinate System</h3>
+
+<p>DALi uses a left-handed coordinate system with the origin at the top-left corner, with positive X to right, positive Y going downwards, and positive Z going outside the screen with the default camera. This is convenient when creating 2D views.</p>
+
+<p>The stage has a 2D size that matches the size of the application window. The default unit 1 is 1 pixel with the default camera.</p>
+
+<p class="figure">Figure: DALi coordinate system</p>
+    <p align="center"><img alt="DALi coordinate system" src="../../images/actor_coordinates.png"/></p>
+
+<h3>Camera</h3>
+
+<p>DALi has a concept of a camera to display its virtual 3D world to a 2D screen. There are 2 ways of using the camera in DALi:</p>
+<ul>
+	<li>For <strong>2D</strong> applications, you do not need to care about the camera at all. The default camera is already best suited for 2D applications (configured to have the origin of the coordinate system at the top-left corner of the screen, and unit 1 as 1 pixel of the screen). This is a typical way.</li>
+	<li>For <strong>3D</strong> applications, you can change the view by manipulating the camera. You can translate or rotate the camera in this case. Note that the top-left corner of the screen and unit 1 no longer are (0,0,0) and 1 pixel after manipulating the camera.</li>
+</ul>
+
+
+<h3>DALi Internal Structure</h3>
+
+<p>DALi consists of the following modules:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">dali-core</span>
+<p>This module provides scene graph -based rendering, animation, and event handling. It is a base module and forms the biggest part of 
+DALi.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">dali-toolkit</span>
+<p>This module provides UI components and various effects on top of the dali-core.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span>
+<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>
+</ul>
+<p class="figure">Figure: DALi internal structure</p>
+<p align="center"><img alt="DALi internal structure" src="../../images/dali_component.png" /></p>
+
+<h2 id="create" name="create">Creating a DALi Application</h2>
+
+<p>To create a &#39;Hello World&#39; application with Dali:</p>
+<ol>
+<li>Create a DALi project:
+<ol type="a">
+<li>In the Tizen IDE menu, go to <strong>File &gt; New &gt; Tizen Native Project</strong>.
+<p>Press <strong>Finish</strong>, and your project is created at the default location. If you want to change the location, uncheck <strong>Use default location</strong> and set a new location. For more information, see <a href="../../../../org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm#creating">Creating the Application Project</a>.</p>
+<p align="center"><img alt="Create a DALi project" src="../../images/tizen_project_dali.png" /></p>
+</li>
+<li>The new project is shown in the Project Explorer view of the IDE. If you open the <span style="font-family: Courier New,Courier,monospace;">src/basicdaliapplication.cpp</span> file, you can see the source code of the basic DALi application:
+<pre class="prettyprint">
+#include &lt;dali-toolkit/dali-toolkit.h&gt;
+
+using namespace Dali;
+using Dali::Toolkit::TextLabel;
+
+// This example shows how to create and display Hello World using a simple TextLabel
+
+class HelloWorldController : public ConnectionTracker
+{
+&nbsp;&nbsp;&nbsp;public:
+
+&nbsp;&nbsp;&nbsp;HelloWorldController(Application&amp; application)
+&nbsp;&nbsp;&nbsp;: mApplication(application)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Connect to the application&#39;s Init signal
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;HelloWorldController::Create);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;~HelloWorldController()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Nothing to do here
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// The Init signal is received once (only) during the application lifetime
+&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Get a handle to the stage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.SetBackgroundColor(Color::WHITE);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TextLabel textLabel = TextLabel::New(&quot;Hello World&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textLabel.SetAnchorPoint(AnchorPoint::TOP_LEFT);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textLabel.SetName(&quot;hello-world-label&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(textLabel);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Respond to a click anywhere on the stage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.GetRootLayer().TouchedSignal().Connect(this, &amp;HelloWorldController::OnTouch);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;bool OnTouch Actor actor, const TouchEvent&amp; touch)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Exit the application
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.Quit();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;private:
+&nbsp;&nbsp;&nbsp;Application&amp; mApplication;
+};
+
+// Entry point for Tizen applications
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;Application application = Application::New(&amp;argc, &amp;argv);
+&nbsp;&nbsp;&nbsp;HelloWorldController test(application);
+&nbsp;&nbsp;&nbsp;application.MainLoop();
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Initialize the DALi application:
+
+<p>To use the DALi APIs, include the <span style="font-family: Courier New,Courier,monospace;">dali-toolkit.h</span> header file. It includes the <span style="font-family: Courier New,Courier,monospace;">dali-core</span> and <span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span> modules.</p>
+
+<pre class="prettyprint">#include &lt;dali-toolkit/dali-toolkit.h&gt;</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">wearable</a> applications) initializes and sets up DALi.</p>
+
+<p>Several signals can be connected to keep you informed when certain platform-related activities occur, and ensure that, upon system events, DALi is called in a thread-safe manner. To manage signal connection safely, DALi provides the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class. A typical way for starting a DALi application is to create a class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class and use its member functions as callback functions for DALi signals (for more information, see <a href="event_handling_n.htm#automatic">Automatic Connection Management</a>). The <span style="font-family: Courier New,Courier,monospace;">HelloWorldController</span> class is used in other code samples in the DALi guide.</p>
+
+<p>Create a <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance:</p>
+
+<pre class="prettyprint">
+Application application = Application::New(&amp;argc, &amp;argv);</pre>
+  
+<p>After getting the initialized signal from the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance, you can use the DALi APIs for building the scene graph. Connect the <span style="font-family: Courier New,Courier,monospace;">HelloWorldController::Create</span> callback to the <span style="font-family: Courier New,Courier,monospace;">DALi::Application InitSignal()</span> function:</p>
+
+<pre class="prettyprint">
+mApplication.InitSignal().Connect(this, &amp;HelloWorldController::Create);</pre>
+
+<p>To run the application, start its main loop. This ensures that images are displayed, and events as well as signals are dispatched and captured.</p>
+<pre class="prettyprint">
+application.MainLoop();</pre>
+</li>
+
+<li>Create an actor and add it to a stage:
+  
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> UI component renders a short text string. To display the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component, add it to a stage. The <span style="font-family: Courier New,Courier,monospace;">stage</span> instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function:</p>
+
+<pre class="prettyprint">
+Stage stage = Stage::GetCurrent();
+stage.SetBackgroundColor(Color::WHITE);
+
+TextLabel textLabel = TextLabel::New(&quot;Hello World&quot;);
+textLabel.SetAnchorPoint(AnchorPoint::TOP_LEFT);
+textLabel.SetName(&quot;hello-world-label&quot;);
+stage.Add(textLabel);
+</pre>
+
+<p>The above code additionally sets the background color of the <span style="font-family: Courier New,Courier,monospace;">stage</span> and the anchor point, a point defining a position of a child actor from its parent, of the <span style="font-family: Courier New,Courier,monospace;">textLabel</span>. The application stores the actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Even if the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component is removed from the stage, it remains alive through the reference.</p>
+
+</li>
+<li>Build the DALi application: 
+
+<p>To build your application, select <strong>Project &gt; Build Project</strong> or press F10 in the IDE.</p>
+<p>The Tizen IDE automatically packages the project after building. Note that you need to register your certificate when building for the first time. For more information, see <a href="../../../../org.tizen.devtools/html/common_tools/certificate_registration.htm">Certificate Registration</a> and <a href="../../../../org.tizen.gettingstarted/html/native/process/building_app_n.htm">Building Applications</a>.</p>
+
+</li>
+<li>Run the DALi application:
+
+<p>To run your application, select <strong>Run &gt; Run</strong> or press Ctrl+F11 in the IDE.</p>
+<p>For more information, see <a href="../../../../org.tizen.gettingstarted/html/native/process/running_app_n.htm">Running Applications</a>.</p>
+<p align="center"><img alt="DALi application running on a Tizen emulator" src="../../images/hello_world_dali.png" /></p>
+
+</li></ol> 
+
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/event_handling_n.htm b/org.tizen.ui.practices/html/native/dali/event_handling_n.htm
new file mode 100644
index 0000000..23350cc
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/event_handling_n.htm
@@ -0,0 +1,575 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Event Handling: Managing the Event Flow</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#touch">Touch Events</a></li>
+			<li><a href="#key">Key Events</a></li>
+			<li><a href="#input">Input Signals</a></li>
+			<li><a href="#gesture">Gestures</a></li>
+			<li><a href="#automatic">Automatic Connection Management</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1LongPressGestureDetector.html">Dali::LongPressGestureDetector API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1PanGestureDetector.html">Dali::PanGestureDetector API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1PinchGestureDetector.html">Dali::PinchGestureDetector API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Signal.html">Dali::Signal API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1TapGestureDetector.html">Dali::TapGestureDetector API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">Dali::Toolkit::KeyboardFocusManager API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1LongPressGestureDetector.html">Dali::LongPressGestureDetector API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1PanGestureDetector.html">Dali::PanGestureDetector API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1PinchGestureDetector.html">Dali::PinchGestureDetector API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Signal.html">Dali::Signal API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1TapGestureDetector.html">Dali::TapGestureDetector API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">Dali::Toolkit::KeyboardFocusManager API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Event Handling: Managing the Event Flow</h1>
+
+<p>DALi event handling system is composed of 2 major concepts:</p>
+
+<ul>
+<li>Signal
+<p>Notifications containing event information emitted by GUI components. Also known as events or notifications.</p></li>
+<li>Slot
+<p>Special functions receiving signals. Also known as event handlers, observer, listener, or callbacks.</p></li>
+</ul>
+<p>DALi emits various types of signals to an application to inform it of user actions and the application can handle them through slots.</p>
+
+<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>
+
+<p class="figure">Figure: A schematic example of signal-slot connections</p>
+                                                                       
+
+	<p align="center"><img alt="Signal and slot event handling" src="../../images/signal_slot.png"/></p> 
+<p>In the figure, signal 1 is connected to slot 1, signal 2 is connected to slot 1 and slot 3, and signal 3 is connected to slot 2.</p>
+ 
+<p>The signal and slot system has following advantages:</p>
+<ul>
+<li>Object-oriented: supports callbacks for C++ member functions</li>
+<li>Type safe: the compiler is able to check for type safety</li>
+<li>Non-coupling: no dependency between caller and callee</li>
+<li>Non-type-intrusive: no modification to caller or callee types</li>
+<li>Generic: works for all types of call-backs</li>
+<li>Many-to-many relationship: 1 slot can connect to many signals and 1 signal can be connected to many slots, for example</li>
+</ul>
+
+<h2 id="touch" name="touch">Touch Events</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class provides the <span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span> function to inform the application that a user touches the actor. It is defined as follows:</p>
+
+<pre class="prettyprint">typedef Signal&lt;bool (Actor, const TouchEvent&amp;)&gt; TouchSignalType;
+TouchSignalType&amp;TouchedSignal();</pre>
+
+<p>This means that a slot of the following type can be connected to the <span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span> function:</p>
+
+<pre class="prettyprint">bool YourCallbackName(Actor actor, const TouchEvent&amp;event);</pre>
+
+<p>The return value <span style="font-family: Courier New,Courier,monospace;">true</span> indicates that the touch event must be consumed. Otherwise, the signal is emitted on the next sensitive parent of the actor. The meaning is valid only for the <span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span> function, and other types of signals may not have a return value.</p>
+
+<p>Each point on the screen being or having been touched is represented by the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchPoint</span> object. This object stores information about the state of the touch point (such as down, up, or motion.) and the coordinates of the touch.</p>
+
+<p>A collection of touch points at a specific moment in time is collated into the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchEvent</span> object. When a multi-touch event occurs, each touch point represents the points that are currently being touched or the points where touch has stopped.</p>
+
+<p>The following example shows how a connection to a touch event signal can be established:</p>
+
+<pre class="prettyprint">
+// Assuming this code is in the HelloWorldController class
+void 
+Create(Application&amp; application)
+{
+&nbsp;&nbsp;&nbsp;Control actor = Control::New(); 
+&nbsp;&nbsp;&nbsp;// Control is one of the simplest types of Actor that has a visible form
+&nbsp;&nbsp;&nbsp;actor.SetParentOrigin(ParentOrigin::CENTER);
+&nbsp;&nbsp;&nbsp;actor.SetSize(100.0f, 100.0f);
+&nbsp;&nbsp;&nbsp;actor.SetBackgroundColor(Vector4(1.0f, 1.0f, 1.0f, 1.0f));
+&nbsp;&nbsp;&nbsp;actor.TouchedSignal().Connect(this, &amp;HelloWorldController::OnTouch);
+&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add(actor);
+}
+
+bool 
+OnTouch(Actor actor, const TouchEvent&amp;touch)
+{
+&nbsp;&nbsp;&nbsp;bool handled = false;
+&nbsp;&nbsp;&nbsp;unsigned int pointCount = touch.GetPointCount();
+&nbsp;&nbsp;&nbsp;if (pointCount == 1)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do the action on the first touch on the screen
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handled = true;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (pointCount &gt; 1)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do action on a multi-touch on the screen
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handled = true;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return handled; 
+&nbsp;&nbsp;&nbsp;// true if you have handled the touch, false otherwise
+}
+</pre>
+
+<p>The touch event is first emitted to the hit actor by the primary touch point, which is the first point that the user touches. If this hit actor does not handle the event, then the event is offered to the hit actor&#39;s parent. Again, if the parent does not handle this event, it is then offered to its parent and so on until the stage is reached or the event is consumed.</p>
+
+<p>If a parent and child actor both connect to the touch signal, the touch event is first offered to the child. If it is consumed by the child, the parent is not informed.</p>
+
+<h2 id="key" name="key">Key Events</h2>
+
+<p>The following example shows how to handle key events received by the stage:</p>
+
+<pre class="prettyprint">
+// Assuming this code is in the HelloWorldController class
+void 
+Create(Application&amp; application)
+{
+&nbsp;&nbsp;&nbsp;Stage::GetCurrent().SetBackgroundColor(Vector4(1.0f, 1.0f, 1.0f, 1.0f));
+&nbsp;&nbsp;&nbsp;Stage::GetCurrent().KeyEventSignal().Connect(this, &amp;HelloWorldController::OnKeyEvent);
+
+&nbsp;&nbsp;&nbsp;PushButton button = PushButton::New();
+&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add(button);
+}
+
+void 
+OnKeyEvent(const KeyEvent&amp; event)
+{
+&nbsp;&nbsp;&nbsp;if (event.state == KeyEvent::Down)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (IsKey(event, DALI_KEY_ESCAPE) || IsKey(event, DALI_KEY_BACK))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.Quit();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The stage is the top-most root object, so it can receive application-wide key events.</p>
+
+<p>DALi provides its own key codes for several special keys, such as <span style="font-family: Courier New,Courier,monospace;">DALI_KEY_ESCAPE</span> or <span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BACK</span>. The following table lists the available DALi key codes.</p>
+
+<table>
+       <caption>
+               Table: DALi key codes
+	   </caption>
+       <tbody>
+       <tr>
+               <th>Key codes</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_INVALID</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_ESCAPE</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BACKSPACE</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_UP</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_LEFT</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_RIGHT</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CURSOR_DOWN</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BACK</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CAMERA</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CONFIG</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_POWER</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PAUSE</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_CANCEL</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PLAY_CD</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_STOP_CD</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PAUSE_CD</span></td>
+       </tr>
+      <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_NEXT_SONG</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PREVIOUS_SONG</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_REWIND</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_FASTFORWARD</span></td>
+		</tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MEDIA</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_PLAY_PAUSE</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MUTE</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MENU</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_HOME</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_HOMEPAGE</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_WEBPAGE</span></td>
+       </tr>
+       <tr>
+			   <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_MAIL</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_SCREENSAVER</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BRIGHTNESS_UP</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_BRIGHTNESS_DOWN</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_SOFT_KBD</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_QUICK_PANEL</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_TASK_SWITCH</span></td>
+	   </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_APPS</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_SEARCH</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_VOICE</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_LANGUAGE</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_VOLUME_UP</span></td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">DALI_KEY_VOLUME_DOWN</span></td>
+       </tr>
+       </tbody>
+</table>
+
+
+<h2 id="input" name="input">Input Signals</h2>
+
+<p>Many DALi classes provide various signals to notify events to the application. Among them, the most basic type of signals are input signals. This section briefly introduces these input signals in DALi.</p>
+
+<p>The basic DALi input signals are as follows:</p>
+
+<ul>
+<li><strong>Touched signal</strong> notifies you of a screen touch or mouse click</li>
+<li><strong>Hovered signal</strong> notifies you of mouse hovering</li>
+<li><strong>Wheel event signal</strong> notifies you of mouse wheel rolling</li>
+<li><strong>Key event signal</strong> notifies you of a keyboard input</li>
+<li><strong>Key input focus signals</strong> notifies you that a control is ready to receive key event signals</li>
+<li><strong>Keyboard focus signals</strong> notifies you of a moved focus by navigation keys (such as left or right)</li>
+</ul>
+<p>These signals are provided by the following classes:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>
+
+<table>
+   <caption>
+     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> input signals
+   </caption>
+   <tbody>
+    <tr>
+     <th>Input signals</th>
+	 <th>Description</th>
+    </tr>
+    <tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>
+		<td>Emitted when touch input is received.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Actor actor, const TouchEvent&amp; event);</span></p></td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
+		<td>Emitted when hover input is received.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Actor actor, const HoverEvent&amp; event);</span></p></td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">WheelEventSignal()</span></td>
+		<td>Emitted when wheel event is received.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Actor actor, const WheelEvent&amp; event);</span></p></td>
+	</tr>
+   </tbody>
+  </table>
+  
+  <p>The actor receiving events is passed to the callbacks.</p>
+</li>
+
+<li>
+<span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span>
+
+<table>
+   <caption>
+     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> input signals
+   </caption>
+   <tbody>
+    <tr>
+     <th>Input signals</th>
+	 <th>Description</th>
+    </tr>
+    <tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>
+		<td>Emitted when touch input is received.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(const TouchEvent&amp; event)</span></p></td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
+		<td>Emitted when hover input is received.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(const TouchEvent&amp; event);</span></p></td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">KeyEventSignal()</span></td>
+		<td>Emitted when a key event is received.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(const KeyEvent&amp; event);</span></p></td>
+	</tr>
+   </tbody>
+  </table>
+
+<p>Only events are passed to the callbacks since only a single stage instance can exist in DALi application. The callback return types are <span style="font-family: Courier New,Courier,monospace;">void</span> because the stage has no parent to pass events to, even though it does not consume the events.</p>
+</li>
+
+<li>
+<span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span>
+
+<table>
+   <caption>
+     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> input signals
+   </caption>
+   <tbody>
+    <tr>
+     <th>Input signals</th>
+	 <th>Description</th>
+    </tr>
+    <tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">KeyEventSignal()</span></td>
+		<td>Emitted when a key event is received.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Control control, const KeyEvent&amp; event);</span></p></td>
+
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">KeyInputFocusGainedSignal()</span></td>
+		<td>Emitted when the control gets key input focus.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Control control);</span></p></td>
+
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">KeyInputFocusLostSignal()</span></td>
+		<td>Emitted when the control loses key input focus, which can be due to it being gained by another control or actor or just cleared from this control as no longer required.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Control control);</span></p></td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal(), HoveredSignal(), KeyEventSignal()</span></td>
+		<td>Same as the ones supported by <span style="font-family: Courier New,Courier,monospace;">Actor</span>
+		</td>
+	</tr>
+   </tbody>
+  </table>
+
+<p>The key event signal is provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> and <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> classes, not by the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>  class. The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>  class is not designed to get key events. To receive key events, an actor must be an instance of the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control </span> class or one of its subclasses.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control </span> class can also receive touch, hover, and wheel events as it inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>  class.</p>
+</li>
+
+<li>
+<span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> 
+
+<table>
+   <caption>
+     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span>  input signals
+   </caption>
+   <tbody>
+    <tr>
+     <th>Input signals</th>
+	 <th>Description</th>
+    </tr>
+    <tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">PreFocusChangeSignal()</span></td>
+		<td>Emitted before the focus is going to be changed.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">Actor YourCallbackName(Actor currentFocusedActor, Actor proposedActorToFocus, Control::KeyboardFocus::Direction direction);</span></p></td>
+    </tr>
+	<tr>
+	    <td><span style="font-family: Courier New,Courier,monospace;">FocusChangedSignal()</span></td>
+		<td>Emitted after the current focused actor has been changed.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(Actor originalFocusedActor, Actor currentFocusedActor);</span></p></td>
+    </tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">FocusGroupChangedSignal()</span></td>
+		<td>Emitted when the focus group has been changed.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(Actor currentFocusedActor, bool forward);</span></p></td>
+    </tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">FocusedActorEnterKeySignal()</span></td>
+		<td>Emitted when the current focused actor has the enter key pressed on it.
+		<p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(Actor enterPressedActor);</span></p></td>
+	</tr>
+   </tbody>
+  </table>
+</li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> provides the functionality of handling keyboard navigation and maintaining the 2-dimensional keyboard focus chain. Dissimilar to the key input focus, the keyboard focus is about the focus moving between actors, and that is why this signal is provided by the specific focus managing class.</p>
+
+<p>The following DALi classes provide signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Window</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Timer</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::LongPressGestureDetector</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::TapGestureDetector</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PanGestureDetector</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PinchGestureDetector</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::RenderTask</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::ObjectRegistry</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PropertyNotification</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Button</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::View</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::GaussianBlurViewSignal</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::ScrollBar</span> </li> 
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Scrollable</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::AccessibilityFocusManager</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> </li>
+</ul>
+<p>For the signals of each class and their usage, see the API Reference.</p>
+
+<h2 id="gesture" name="gesture">Gestures</h2>
+<p>Gesture is a user-friendly high-level event produced from a stream of touch events. The <span style="font-family: Courier New,Courier,monospace;">Dali::GestureDetector </span> class analyzes a stream of touch events and attempts to determine the intention of the user. </p>
+<p>If an actor is attached to a gesture detector and the detector recognizes a user intention (detects a predefined pattern in a stream of touch events), the actor emits a detected gesture signal to the application.</p>
+
+<p>DALi currently supports following gesture detectors:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::LongPressGestureDetector</span> detects when the user does a long-press action.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::TapGestureDetector</span> detects when the user does a tap action.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PinchGestureDetector</span> detects when the user moves two fingers towards or away from each other.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PanGestureDetector</span> detects when the user moves one or more fingers in the same direction.</li>
+</ul>
+
+<p>The example below shows how an application can be notified of a pinch gesture:</p>
+
+<pre class="prettyprint">
+// Assuming this code is in the HelloWorldController class
+void 
+Create(Application&amp; application)
+{
+&nbsp;&nbsp;&nbsp;PushButton actor = PushButton::New(); // Another type of Actor
+&nbsp;&nbsp;&nbsp;actor.SetParentOrigin(ParentOrigin::CENTER);
+&nbsp;&nbsp;&nbsp;actor.SetSize(100.0f, 100.0f);
+&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add(actor);
+
+&nbsp;&nbsp;&nbsp;PinchGestureDetector detector = PinchGestureDetector::New();
+&nbsp;&nbsp;&nbsp;detector.Attach(actor);
+&nbsp;&nbsp;&nbsp;detector.DetectedSignal().Connect(this, &amp;HelloWorldController::OnPinch);
+}
+
+void 
+OnPinch(Actor actor, const PinchGesture&amp; pinch)
+{
+&nbsp;&nbsp;&nbsp;// Scale your actor according to the pinch scale
+&nbsp;&nbsp;&nbsp;Vector3 newSize = actor.GetCurrentSize() * pinch.scale;
+&nbsp;&nbsp;&nbsp;actor.SetSize(newSize);
+}
+</pre>
+
+<h2 id="automatic" name="automatic">Automatic Connection Management</h2>
+
+<p>If you have a pair of a connected signal (for example, a button clicked signal) and a slot (for example, a toolbar object having the callback for the signal), and one of them (the button or the toolbar) is deleted without any notification, the application crashes when the signal is emitted or the slot tries to disconnect the signal.</p>
+
+<p>DALi provides the automatic connection management mechanism to prevent this kind of situation. The key is the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class. It tracks connections between signals and slots, and performs an automatic disconnection when either the signal or slot is deleted.</p>
+
+<p>Due to this mechanism, all the DALi sample codes start with a controller class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class. This is a safe and typical way of making a DALi application. You can, of course, create other structures using the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class.</p>
+
+
+
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/dali/guides_dali_n.htm b/org.tizen.ui.practices/html/native/dali/guides_dali_n.htm
new file mode 100644
index 0000000..9d6b6ab
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/guides_dali_n.htm
@@ -0,0 +1,82 @@
+<!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>DALi</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__dali.html">DALi API References for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__dali.html">DALi API References for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>DALi</h1>
+
+<p>DALi is a cross-platform 3D UI Toolkit for embedded systems. Its 3D user interface engine enables you to create rich and high-performance UI applications. DALi is based on OpenGL ES 2.0, but provides a clean cross-platform C++ framework. This means that you can use high-level DALi APIs instead of accessing low-level OpenGL APIs directly.</p>
+
+<p>When creating a DALi application, make sure you understand the following main features:</p>
+
+<ul>
+	<li><a href="dali_overview_n.htm">DALi Overview: Getting Started with DALi UI Programming</a>
+	<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>
+	<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>
+	<p>Enables you to handle DALi UI components.</p></li>
+	<li><a href="animation_n.htm">Animation: Making Your Actors Alive</a>
+	<p>Enables you to create animated effects.</p></li>
+	<li><a href="resources_n.htm">Resources: Handling Images</a>
+	<p>Enables you to manage resource images.</p></li>
+	<li><a href="rendering_effects_n.htm">Rendering and Effects: Managing Viewing Modes and Shader Effects</a>
+	<p>Enables you to manage DALi viewing modes and create shade effects.</p></li>
+	<li><a href="background_n.htm">Background Knowledge: Using DALi More Effectively</a>
+	<p>Enables you to use DALi more effectively with background knowledge.</p></li>
+
+</ul>
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/dali/handle_n.htm b/org.tizen.ui.practices/html/native/dali/handle_n.htm
new file mode 100644
index 0000000..39180aa
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/handle_n.htm
@@ -0,0 +1,197 @@
+<!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>Handle/Body Pattern: Basic Way of Using DALi Objects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">Dali::BaseHandle API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">Dali::BaseHandle API for Wearable Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Handle/Body Pattern: Basic Way of Using DALi Objects</h1>
+
+<p>DALi widely adopts the handle/body pattern (also known as the pimpl pattern), which separates the implementation details (body class) from its interface (handle class).</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">wearable</a>) is a base class for handle classes in DALi. It additionally provides smart-pointer semantics, which manage internal objects with reference counts. Most of the classes in the DALi public API are handle classes, which means they inherit from the <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> class.</p>
+
+<p>The handle/body pattern structure is beneficial for both DALi users and developers:</p>
+<ul>
+	<li><strong>Easier memory management</strong>
+	<p>Each internal implementation class (body class) contains a single reference count object, which can be initialized with the static &quot;New&quot; functions in the DALi public API. This means that C++ new/delete operators do not have to be used in your code. (The internal body classes inherit from the <span style="font-family: Courier New,Courier,monospace;">Dali::BaseObject</span> class, but you do not need to use this class directly.)</p>
+	</li>
+	<li><strong>Better encapsulation</strong>
+	<p>The danger of API/ABI breaks is reduced, since the implementation of a class can be changed without modifying the public API, thus without recompiling code using the public API. This can also reduce the build time.</p>
+	</li>
+</ul>
+
+<p>The following examples show how to use the handles:</p>
+<ul>
+
+<li>No need to call destructors:
+<pre class="prettyprint">
+class 
+HandleTest
+{
+&nbsp;&nbsp;&nbsp;HandleTest()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mActor = Actor::New();
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;~HandleTest() {} // Actor object is destroyed automatically
+
+&nbsp;&nbsp;&nbsp;Actor mActor;
+};
+</pre>
+</li>
+
+<li>Can be stored in STL containers:
+<pre class="prettyprint">
+class 
+HandleTest
+{
+&nbsp;&nbsp;&nbsp;HandleTest()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mActors.push_back(Actor::New());
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mActors.push_back(Actor::New());
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;~HandleTest() {} // Actors are destroyed automatically
+
+&nbsp;&nbsp;&nbsp;std::vector&lt;Actor&gt; mActors;
+};
+</pre>
+</li>
+
+<li>Passing by value is encouraged:
+<pre class="prettyprint">
+void 
+SomeFunction(Actor actor)
+{
+&nbsp;&nbsp;&nbsp;if (actor)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;actor.SomeMethod();
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Validity check:
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;Actor actor;  // Create a NULL object
+
+&nbsp;&nbsp;&nbsp;// At this stage, you cannot call any of the Actor functions
+&nbsp;&nbsp;&nbsp;if (!actor)  // This test passes, since the actor is NULL
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;actor = Actor::New();
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Equality operators:
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;Actor handle1;
+&nbsp;&nbsp;&nbsp;Actor handle2;
+&nbsp;&nbsp;&nbsp;cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // &quot;true&quot;, both handles are empty
+
+&nbsp;&nbsp;&nbsp;handle2 = Actor::New();
+&nbsp;&nbsp;&nbsp;cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // &quot;false&quot;, one handle is empty
+
+&nbsp;&nbsp;&nbsp;handle1 = Actor::New();
+&nbsp;&nbsp;&nbsp;cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // &quot;false&quot;, handles to different objects
+
+&nbsp;&nbsp;&nbsp;handle1 = handle2;
+&nbsp;&nbsp;&nbsp;cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // &quot;true&quot;, handles to same object
+}
+</pre>
+</li>
+
+<li>Reference counting examples:
+<pre class="prettyprint">
+class 
+AnimationTest
+{
+&nbsp;&nbsp;&nbsp;private:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Animation mAnimation; // Animation handle
+};
+
+void 
+AnimationTest::Initialize ()
+{
+&nbsp;&nbsp;&nbsp;mAnimation = Animation::New(10.0f); // Reference count is 1, the animation object stays alive when the function returns
+}
+
+void 
+AnimationTest::SetAnimation(Animation anim)
+{
+&nbsp;&nbsp;&nbsp;mAnimation = anim; // Reference count of the original animation decreased, &#39;anim&#39; is referenced instead
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If nobody else had a reference on the initial animation, the object is destroyed
+}
+</pre>
+
+<pre class="prettyprint">
+// At this point, you own a Dali::Actor named &quot;container&quot;
+// Enter a code block
+{
+&nbsp;&nbsp;&nbsp;// Create an text label
+&nbsp;&nbsp;&nbsp;TextLabel actor = TextLabel::New(&quot;test&quot;);
+&nbsp;&nbsp;&nbsp;// Add the text label to a container
+&nbsp;&nbsp;&nbsp;container.Add(actor);
+}
+// Exit the code block
+// At this stage, the text label is still alive
+// You do not keep the handle to the text label, but it can be retrieved from the container
+</pre>
+</li>
+</ul>
+
+
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/dali/imageview_n.htm b/org.tizen.ui.practices/html/native/dali/imageview_n.htm
new file mode 100644
index 0000000..371f4ca
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/imageview_n.htm
@@ -0,0 +1,78 @@
+<!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>ImageView: Displaying Images</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ImageActor.html">Dali::Image API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__dali-toolkit-controls-image-view.html">Dali::ImageView API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ImageActor.html">Dali::Image API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__dali-toolkit-controls-image-view.html">Dali::ImageView API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>ImageView: Displaying Images</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ImageView</span> component displays an image.</p>
+
+
+<p>The image view 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 <a href="resources_n.htm">loading an image from a file or URL</a>. The following example shows how to create an <span style="font-family: Courier New,Courier,monospace;">ImageView</span> object:</p>
+
+<pre class="prettyprint">
+Image image = ResourceImage::New(myImageFilename);
+ImageView imageView = ImageView::New(image);
+</pre>
+
+
+<p>The image view 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 the <span style="font-family: Courier New,Courier,monospace;">ImageView::SetImage()</span> function:</p>
+
+<pre class="prettyprint">
+imageView.SetImage(newImage);
+</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/itemview_n.htm b/org.tizen.ui.practices/html/native/dali/itemview_n.htm
new file mode 100644
index 0000000..0173731
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/itemview_n.htm
@@ -0,0 +1,148 @@
+<!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>ItemView: Item Container with Layouts</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#factory">Implementing ItemFactory</a></li>
+			<li><a href="#create">Creating an ItemView</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemFactory.html">Dali::Toolkit::ItemFactory API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemLayout.html">Dali::Toolkit::ItemLayout API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/structDali_1_1Toolkit_1_1ItemRange.html">Dali::Toolkit::ItemRange API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemView.html">Dali::Toolkit::ItemView API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemFactory.html">Dali::Toolkit::ItemFactory API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemLayout.html">Dali::Toolkit::ItemLayout API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/structDali_1_1Toolkit_1_1ItemRange.html">Dali::Toolkit::ItemRange API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemView.html">Dali::Toolkit::ItemView API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Wearable Native</a></li>		
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>ItemView: Item Container with Layouts</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ItemView</span> class is a scrollable container that can contain many items. It provides several scrollable layouts, as illustrated in the following figure.</p>
+
+
+<p class="figure">Figure: ItemView layouts</p>  
+
+	<table>
+   <tbody>
+    <tr>
+     <td>Grid</td>
+     <td>Spiral</td>
+	 <td>Depth</td>
+    </tr>
+	<tr>
+     <td style="text-align:center;"><img alt="captured screen2" src="../../images/grid.png" /></td>
+     <td style="text-align:center;"><img alt="captured screen2" src="../../images/spiral.png" /></td>
+	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/depth.png" /></td>
+    </tr>
+   </tbody>
+  </table>
+<p>You can also create your own custom layout by inheriting from the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemLayout</span> class.</p>
+
+<h2 id="factory" name="factory">Implementing ItemFactory</h2>
+
+<p>To create an <span style="font-family: Courier New,Courier,monospace;">ItemView</span> instance, you must create your own <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> class by deriving from the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemFactory</span> class and providing its instance to the <span style="font-family: Courier New,Courier,monospace;">ItemView::New()</span> function. <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> is an abstract class having 2 pure virtual member functions to create items and get the number of created items. The following basic example shows how to implement an <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> class:</p>
+
+<pre class="prettyprint">
+class MyFactory : public Dali::Toolkit::ItemFactory
+{
+public:  
+&nbsp;&nbsp;&nbsp;virtual unsigned int GetNumberOfItems()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Return the number of items
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return MY_ITEM_COUNT;
+&nbsp;&nbsp;&nbsp;} 
+ 
+&nbsp;&nbsp;&nbsp;virtual Actor NewItem(unsigned int itemId) 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create the actor representing the item based on the itemId
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;std::ostringstream imageName; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageName &lt;&lt; &quot;my-image-folder/&quot; &lt;&lt; itemId &lt;&lt; &quot;.png";
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If item is 10, this results in my-image-folder/10.png
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dali::ResourceImage image = Dali::ResourceImage::New(imageName.str());
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create an ImageActor from the image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return Dali::ImageActor::New(image);
+&nbsp;&nbsp;&nbsp;}
+};</pre>
+
+<p>The overridden functions in the derived class are called by the <span style="font-family: Courier New,Courier,monospace;">ItemView</span> object.</p>
+
+<h2 id="create" name="create">Creating an ItemView</h2>
+
+<p>The following basic example shows how to create an <span style="font-family: Courier New,Courier,monospace;">ItemView</span>:</p>
+
+<pre class="prettyprint">// Store this as a member variable
+MyFactory factory; 
+
+// Pass in the factory
+Dali::Toolkit::ItemView itemView = Dali::Toolkit::ItemView::New(factory); 
+
+itemView.SetParentOrigin(ParentOrigin::CENTER);
+itemView.SetAnchorPoint(AnchorPoint::CENTER);
+
+// Create a layout
+Dali::Toolkit::ItemLayoutPtr spiralLayout = Dali::Toolkit::DefaultItemLayout::New(Dali::Toolkit::DefaultItemLayout::SPIRAL);
+
+// Add the layout to the ItemView
+itemView.AddLayout(spiralLayout);
+
+// More layouts can be created and added to the ItemView
+// Activate the layout
+itemView.ActivateLayout(0, Dali::Stage::GetCurrent().GetSize(), 0);
+
+Dali::Stage::GetCurrent().Add(itemView);</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/layout_n.htm b/org.tizen.ui.practices/html/native/dali/layout_n.htm
new file mode 100644
index 0000000..b2ee1d6
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/layout_n.htm
@@ -0,0 +1,201 @@
+<!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>Layout Management</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#dimension">Dimensions</a></li>
+			<li><a href="#resize">Resize Policies</a></li>
+			<li><a href="#example">Actor Layout Examples</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Layout Management</h1>
+
+<p>DALi provides rule-based layout management (size negotiation), which is used to allocate the actor sizes on the stage based on the dependency rules between the actors.</p> 
+
+<h2 id="dimension" name="dimension">Dimensions</h2>
+<p>The notion of width and height is generalized into a concept of a dimension. Several functions take the <span style="font-family: Courier New,Courier,monospace;">Dimension</span> parameter. The <span style="font-family: Courier New,Courier,monospace;">Dali::Dimension::Type</span> enum (in <a href="../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">wearable</a> applications) specifies the available dimensions as bit fields:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span></li>
+</ul>
+<p>If a function 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> 
+
+<h2 id="resize" name="resize">Resize Policies</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::ResizePolicy::Type</span> enum (in <a href="../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1ResizePolicy.html#a8c47ec1e0b9c73e0fa8e40cfdd99276a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1ResizePolicy.html#a8c47ec1e0b9c73e0fa8e40cfdd99276a">wearable</a> applications) specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.</p>
+
+<table>
+   <caption>
+     Table: Resizing rules
+   </caption>
+   <tbody>
+    <tr>
+     <th>Resize policy</th>
+     <th>Description</th>
+	 <th>Illustration</th>
+    </tr>
+    <tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIXED</span></td>
+     <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>
+	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/fixed.png" /></td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::USE_NATURAL_SIZE</span></td>
+     <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>
+	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/use_natural_size.png" /></td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span></td>
+     <td>The size of the actor is similar to its parent&#39;s size with proportionate filling considered.</td>
+	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/fill_to_parent.png" /></td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_RELATIVE_TO_PARENT</span></td>
+     <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>
+	 <td style="text-align:center;"></td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT</span></td>
+     <td>The size of the actor is similar to its parent&#39;s size with a fixed offset using the <span style="font-family: Courier New,Courier,monospace;">SetSizeModeFactor()</span> function.</td>
+	 <td style="text-align:center;"></td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span></td>
+     <td>The size of the actor is scaled around the size of its children. For example, the height of a pop-up can be resized according to its content.</td>
+	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/fit_to_children.png" /></td>
+    </tr>
+	<tr>
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span></td>
+     <td>This option covers rules, such as width-for-height and height-for-width. You can specify that one dimension depends on another.</td>
+	 <td style="text-align:center;"><img alt="captured screen2" src="../../images/dimension_dependency.png" /></td>
+	</tr>
+   </tbody>
+  </table>
+
+
+<h2 id="example" name="example">Actor Layout Examples</h2>
+
+<p>This section describes layout examples with a actor.</p> 
+
+<h3>Enabling Size Negotiation</h3>
+
+<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> 
+
+<h3>Specifying Size Policies</h3>
+
+<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> 
+
+<p>You can specify how an actor is size-negotiated using the <span style="font-family: Courier New,Courier,monospace;">SetResizePolicy()</span> function. You can specify different policies for the different dimensions of width and height to archive different layouts.</p> 
+
+<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. 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> 
+
+<pre class="prettyprint">Actor rootActor = Actor::New();
+rootActor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+rootActor.SetResizePolicy(ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT);
+ImageActor image = ImageActor::New(Image::New(MY_IMAGE_PATH));
+image.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
+rootActor.Add(image);</pre>
+
+<p>The following figure shows the before and after layouts for this code example.</p>
+
+<p class="figure">Figure: Before and after setting the resize policy</p>  
+	<p align="center"><img alt="Before and after setting the resize policy" src="../../images/before_resize.png"/> <img alt="Before and after setting the resize policy" src="../../images/after_resize.png"/></p> 
+
+<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> 
+
+<pre class="prettyprint">TextLabel text = TextLabel::New(&quot;Example&quot;);
+text.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+text.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);</pre>
+
+<h3>Specifying Sizes and Size Limits</h3>
+
+<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 <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> 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>
+<p>To constrain the final negotiated size of an actor, set the minimum and maximum sizes:</p> 
+
+<pre class="prettyprint">void SetMinimumSize(const Vector2&amp; size)
+void SetMaximumSize(const Vector2&amp; size)</pre>
+
+<h3>Adjusting the Negotiated Size</h3>
+
+<p>When an actor must maintain the aspect ratio of its natural size, use the <span style="font-family: Courier New,Courier,monospace;">SetSizeScalePolicy()</span> function with the <span style="font-family: Courier New,Courier,monospace;">Dali::SizeScalePolicy::Type</span> enum (in <a href="../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1SizeScalePolicy.html#affa6f549dbc4400ff47af52b1675a6af">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1SizeScalePolicy.html#affa6f549dbc4400ff47af52b1675a6af">wearable</a> applications). This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.</p>
+<p>You can use the following resize policies:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::USE_SIZE_SET</span>
+<p>This is the default policy.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FIT_WITH_ASPECT_RATIO</span>
+<p>Fits the actor within the bounds it has been allocated while maintaining the aspect ratio.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FILL_WITH_ASPECT_RATIO</span>
+<p>Fills all available space, potentially overflowing its bounds, while maintaining aspect ratio.</p></li>
+</ul>
+
+<h3>Using Actors in Containers</h3>
+
+<p>When using actors in containers, such as a table view, you can specify the padding surrounding the actor with the <span style="font-family: Courier New,Courier,monospace;">SetPadding()</span> function. The padding specifies the left, right, bottom, and top padding value.</p> 
+
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Beware of infinite dependency loops!
+<p>For example, 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>, an infinite loop occurs.</p> 
+<p>Similarly, consider a situation where 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>. If the parent has a single child with a height policy <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with width, and the child&#39;s width policy is <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>, a loop occurs.</p>
+<p>Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates the actors 0 sizes.</p> </td>
+    </tr>
+   </tbody>
+ </table>
+
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/dali/multi_threaded_n.htm b/org.tizen.ui.practices/html/native/dali/multi_threaded_n.htm
new file mode 100644
index 0000000..fcbdd7f
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/multi_threaded_n.htm
@@ -0,0 +1,138 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Multi-threaded Architecture: Secret of DALi High-performance</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#animations">Animations with Multi-threading</a></li> 
+			<li><a href="#resource">Resource Loading with Multi-threading</a></li> 
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">DALi::Handle API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">DALi::Handle API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Multi-threaded Architecture: Secret of DALi High-performance</h1>
+
+<p>DALi uses a multi-threaded architecture to provide the best performance and scalability:</p>
+<ul>
+       <li><strong>Event thread</strong>: Main thread in which the application code and event handling run.</li>
+       <li><strong>Update thread</strong>: Updates the nodes on the scene as well as the running animations and constraints.</li>
+       <li><strong>Render thread</strong>: OpenGL drawing, texture, and geometry uploading.</li>
+       <li><strong>Resource thread</strong>: Loads images and decodes them into bitmaps.</li>
+</ul>
+
+<p class="figure">Figure: DALi thread architecture</p> 
+       <p align="center"><img alt="DALi thread architecture" src="../../images/dali_threads.png"/></p>
+
+
+	   <h2 id="animations" name="animations">Animations with Multi-threading</h2>
+
+<p>DALi animations and rendering occur in a dedicated rendering thread. This allows animations to run smoothly, regardless of the time taken to process input events in the application code.</p>
+
+<p>Internally, DALi contains the scene graph that mirrors the actor hierarchy. The scene graph objects perform the actual animation and rendering, while the actors provide thread-safe access. Actors and scene graph objects communicate through messaging.</p>
+
+<p>The following figure shows an actor hierarchy, in which one of the actors is being animated. The green objects in are created by the application code, while the blue private objects are used in the dedicated rendering thread.</p>
+
+<p class="figure">Figure: Actor hierarchy with an animation</p> 
+	<p align="center"><img alt="Actor hierarchy with an animation" src="../../images/multi_threading2.png"/></p> 
+ 
+<h3 id="read" name="read">Reading an Animated Value</h3>
+
+<p>When a property is animatable, it can only be modified in the rendering thread. The value returned from a getter function is the value used when the previous frame was rendered.</p>
+
+<p>For example, the <span style="font-family: Courier New,Courier,monospace;">GetCurrentPosition()</span> function returns the position in which the actor was last rendered. Since the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function is asynchronous, a call to <span style="font-family: Courier New,Courier,monospace;">GetCurrentPosition()</span> function does not immediately return the same value.</p>
+
+<pre class="prettyprint">
+Actor actor = Actor::New();
+Stage::GetCurrent().Add(actor); // Initial position is 0, 0, 0
+
+actor.SetPosition(Vector3(10, 10, 10));
+
+Vector3 current;
+current = actor.GetCurrentPosition();
+std::cout &lt;&lt; &quot;Current position: &quot; &lt;&lt; current.x &lt;&lt; &quot;, &quot; &lt;&lt; current.y &lt;&lt; &quot;, &quot; &lt;&lt; current.z &lt;&lt; std::endl;
+
+std::cout &lt;&lt; &quot;...&quot; &lt;&lt; std::endl;
+
+// Handling another event
+
+current = actor.GetCurrentPosition();
+std::cout &lt;&lt; &quot;Current position: &quot; &lt;&lt; current.x &lt;&lt; &quot;, &quot; &lt;&lt; current.y &lt;&lt; &quot;, &quot; &lt;&lt; current.z &lt;&lt; std::endl;
+</pre>
+
+<p>The above code is likely to output:</p>
+<pre class="prettyprint">
+Actor actor = Actor::New();
+&quot;Current position: 0,0,0&quot;
+// Other positions
+&quot;Current position: 10,10,10&quot;
+</pre>
+
+<h3 id="set" name="set">Setting a Property during an Animation</h3>
+
+<p>When a property is being animated, the animation overrides all values set with other functions, such as the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function.</p>
+
+<p class="figure">Figure: Actor hierarchy with an animated property</p>  
+	<p align="center"><img alt="Actor hierarchy with an animated property" src="../../images/multi_threading.png"/></p> 
+ 
+<p>The order of execution in the rendering thread is:</p>
+<ol>
+<li>Process the message and call the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function.</li>
+<li>Apply the animation and call the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function.</li>
+<li>Render the frame.</li>
+</ol>
+
+<h2 id="resource" name="resource">Resource Loading with Multi-threading</h2> 
+
+<p>DALi loads resources in separate threads. If these resource threads are not used, a large image file causes a block in the main thread, which cannot process the next operation while reading data from a file system or downloading from the network.</p> 
+
+<p>Currently, DALi creates one thread for loading local resources and another for loading remote resources, as required.</p> 
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/dali/properties_n.htm b/org.tizen.ui.practices/html/native/dali/properties_n.htm
new file mode 100644
index 0000000..d380684
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/properties_n.htm
@@ -0,0 +1,257 @@
+<!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>Properties: Accessing Properties of DALi Objects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#access">Accessing Property Values</a></li>
+			<li><a href="#usage">Using Properties</a></li>
+			<li><a href="#attributes">Managing Property Attributes</a></li> 
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">Dali::Handle API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">Dali::Property API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">Dali::Handle API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Property.html">Dali::Property API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Properties: Accessing Properties of DALi Objects</h1>
+
+<p>A property is a value used by an object. It can be modified or read using the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::GetProperty()</span> or <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::SetProperty()</span> functions.</p>
+
+<p>The difference between properties and ordinary C++ member variables is that a property can be dynamically added to or removed from an existing object at runtime, enabling more flexible, script-like programming with DALi.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">wearable</a> applications) provides functions to manage properties. Because of this, the DALi classes that inherit from the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (most of classes that you use) have a number of predefined properties and can have any number of user-defined custom properties.
+</p>
+
+<h2 id="access" name="access">Accessing Property Values</h2>
+
+	<p>Property values of an object can usually be accessed in 2 ways: by its class member functions or by property getters and setters (<span style="font-family: Courier New,Courier,monospace;">GetProperty()</span> and <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function of the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">wearable</a> applications).</p>
+	<p>For example, the following table lists the predefined properties of the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class.</p>
+
+	<table>
+		<caption>
+			Table: Dali::Actor properties
+		</caption>
+		<tbody>
+		<tr>
+			<th>Property index (enumeration)</th>
+			<th>Member functions</th>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::POSITION</span></td>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentPosition()</span> / <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span></td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::ORIENTATION</span></td>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentOrientation()</span> / <span style="font-family: Courier New,Courier,monospace;">SetOrientation()</span></td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SIZE</span></td>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentSize()</span> / <span style="font-family: Courier New,Courier,monospace;">SetSize()</span></td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::COLOR</span></td>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetCurrentColor()</span> / <span style="font-family: Courier New,Courier,monospace;">SetColor()</span></td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::NAME</span></td>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::GetName()</span> / <span style="font-family: Courier New,Courier,monospace;">SetName()</span></td>
+		</tr>
+		</tbody>
+	</table>
+
+	<p>You can access the properties in both ways:</p>
+
+	<pre class="prettyprint">
+Actor actor = Actor::New();
+actor.SetName(&quot;test actor&quot;);
+std::cout &lt;&lt; actor.GetName() &lt;&lt; std::endl;  // &quot;test actor&quot;
+</pre>
+
+	<pre class="prettyprint">
+Actor actor = Actor::New();
+actor.SetProperty(Actor::Property::NAME, &quot;test actor&quot;);
+std::cout &lt;&lt; actor.GetProperty(Actor::Property::NAME) &lt;&lt; std::endl;  // &quot;test actor&quot;
+std::cout &lt;&lt; actor.GetProperty&lt;std::string&gt;(Actor::Property::NAME) &lt;&lt; std::endl;  // &quot;test actor&quot;
+std::cout &lt;&lt; actor.GetProperty(Actor::Property::NAME).Get&lt;std::string&gt;() &lt;&lt; std::endl;  // &quot;test actor&quot;
+</pre>
+
+
+<h2 id="usage" name="usage">Using Properties</h2>
+
+<h3>Registering User-defined Custom Properties to Objects</h3>
+
+<p>Properties can be registered and unregistered at runtime using the functions of the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">wearable</a> applications). This enables script-like programming in the DALi application, such as adding custom member data to an instance of a DALi class without subclassing the class or maintaining another pool of custom data.</p>
+<p>For example, you can set your own custom data to <span style="font-family: Courier New,Courier,monospace;">PushButton</span> objects and use them later when the buttons are clicked:</p>
+<pre class="prettyprint">
+void 
+Create(Application&amp; application)
+{
+&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; 5; ++i)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Toolkit::PushButton button = Toolkit::PushButton::New();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetSize(100, 100);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetPosition(100*i+50, 50);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.ClickedSignal().Connect(this, OnButtonClicked);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Register a custom property having button index
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Store the property index so you can look it up later
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Note: This is much faster than looking the property up by property name and must be used if possible
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// As all control types are the same (PushButtons), the indices to the unique custom property are all same
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Property::Value data(i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mCustomDataIndex = button.RegisterProperty(&quot;custom-data&quot;, data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add(button);
+&nbsp;&nbsp;&nbsp;}
+}
+
+bool 
+OnButtonClicked(Toolkit::Button button)
+{
+&nbsp;&nbsp;&nbsp;// Look up the custom property by the stored property index
+&nbsp;&nbsp;&nbsp;// Note: If the property belongs to a control in another library, 
+&nbsp;&nbsp;&nbsp;// or you do not know the index, you can look the index up first with:
+&nbsp;&nbsp;&nbsp;// Property::Index index = button.GetPropertyIndex(&quot;custom-data&quot;);
+&nbsp;&nbsp;&nbsp;cout &lt;&lt; button.GetProperty(mCustomDataIndex) &lt;&lt; endl;
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+
+<h3>Animating Objects</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">wearable</a> applications) is used to <a href="animation_n.htm">animate the properties</a> of any number of objects.</p>
+
+<p>For example, the following code animates the value of the <span style="font-family: Courier New,Courier,monospace;">POSITION</span> property of a radio button to (100.0, 200.0, 0.0) for 2 seconds:</p>
+
+<pre class="prettyprint">
+RadioButton actor = RadioButton::New();
+Stage::GetCurrent().Add(actor);
+Animation animation = Animation::New(2.0f); // Duration 2 seconds
+animation.AnimateTo(Property(actor, Actor::Property::POSITION), Vector3(100.0f, 200.0f, 0.0f));
+animation.Play();
+</pre>
+
+<h3>Imposing Constraints on Objects</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications) is used to <a href="constraints_n.htm">modify the property of an object based on other properties of other objects</a>.</p>
+
+<p>For example, the following code makes the <span style="font-family: Courier New,Courier,monospace;">SIZE</span> property value of an actor the same as the <span style="font-family: Courier New,Courier,monospace;">SIZE</span> property value of its parent actor:</p>
+
+<pre class="prettyprint">
+Constraint constraint = Constraint::New&lt;Vector3&gt;(actor, Actor::Property::SIZE, EqualToConstraint());
+constraint.AddSource(ParentSource(Actor::Property::SIZE));
+constraint.Apply();
+</pre>
+
+
+<h2 id="attributes" name="attributes">Managing Property Attributes</h2>
+
+<p>A property has the following attributes:</p>
+
+<ul> 
+	<li>Index: Enumeration number indicating the property. The property index is usually used to access properties.</li> 
+
+	<li>Type: Type of the property. Retrieved with the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::GetPropertyType()</span> function.</li> 
+
+	<li>Name: Name of the property. Retrieved with the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::GetPropertyName()</span> function.</li> 
+
+	<li>Writable: If <span style="font-family: Courier New,Courier,monospace;">true</span>, the property value can be written. Retrieved with the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::IsPropertyWritable()</span> function.</li> 
+
+	<li>Animatable: If <span style="font-family: Courier New,Courier,monospace;">true</span>, the property can be animated using the <span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> class. Retrieved with the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::IsPropertyAnimatable()</span> function.</li> 
+
+	<li>Constraint-Input: If <span style="font-family: Courier New,Courier,monospace;">true</span>, the property can be used as constraint input. Retrieved with the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle::IsPropertyAConstraintInput()</span> function.</li> 
+</ul> 
+
+<p>The following table lists the type and name attributes of the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> properties.</p>
+
+	<table>
+		<caption>
+			Table: Dali::Actor property attributes
+		</caption>
+		<tbody>
+		<tr>
+			<th>Property index (enumeration)</th>
+			<th>Property type</th>
+			<th>Property name</th>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::POSITION</span></td>
+			<td>Vector3</td>
+			<td>&quot;position&quot;</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::ORIENTATION</span></td>
+			<td>Quaternion</td>
+			<td>&quot;orientation&quot;</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SIZE</span></td>
+			<td>Vector3</td>
+			<td>&quot;size&quot;</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::COLOR</span></td>
+			<td>Vector4</td>
+			<td>&quot;color&quot;</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">Dali::Actor::NAME</span></td>
+			<td>std::string</td>
+			<td>&quot;name&quot;</td>
+		</tr>
+		</tbody>
+	</table>
+
+<p>For more information about properties, see the API reference of each class. For example, for the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::Property</span> struct (in <a href="../../../../org.tizen.native.mobile.apireference/structDali_1_1Actor_1_1Property.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structDali_1_1Actor_1_1Property.html">wearable</a> applications). For information on the supported property types, see <span style="font-family: Courier New,Courier,monospace;">Dali::Property::Type</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace;">Dali::PropertyTypes</span> (in <a href="../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1PropertyTypes.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1PropertyTypes.html">wearable</a> applications).</p>
+
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/rendering_effects_n.htm b/org.tizen.ui.practices/html/native/dali/rendering_effects_n.htm
new file mode 100644
index 0000000..a669699
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/rendering_effects_n.htm
@@ -0,0 +1,152 @@
+<!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>Rendering and Effects: Managing Viewing Modes and Shader Effects</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#modes">Viewing Modes</a></li>
+			<li><a href="#shader">Shader Effects</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Rendering and Effects: Managing Viewing Modes and Shader Effects</h1>
+
+<p>DALi provides stereoscopic viewing modes. It also provides a way to use user-defined custom shader effects.</p>
+
+<h2 id="modes" name="modes">Viewing Modes</h2>
+
+<p>DALi supports the following viewing modes:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">MONO</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span></li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace;">MONO</span> is the default viewing mode. When using the <span style="font-family: Courier New,Courier,monospace;">MONO</span> mode, only 1 image per scene is produced in every update. In this setup, DALi creates a default render task, which renders everything added to the stage root layer, and 1 default camera for that render task.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span> and <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span> modes allow the application to produce stereo images. Stereoscopy is a technique for creating or enhancing the illusion of depth in an image. Stereo rendering technique produces 2 images of the scene with an slight offset between them, which is presented to the left and the right eye independently. In this setup, DALi creates 2 additional render tasks, 1 for the right eye and 1 for the left, each with its own camera. Those cameras are parented to the default camera. The method to generate the projection transformation for each camera is known as &quot;parallel axis asymmetric frustum perspective projection&quot; and is illustrated in the following figure.</p>
+
+<p class="figure">Figure: Stereoscopic projection</p>  
+	<p align="center"><img alt="Stereoscopic projection" src="../../images/stereo_projection.png"/></p> 
+ 
+<p>The separation between the 2 cameras is configurable but, typically, it ranges between 50 and 70 millimeters. Too large a separation can be hard to resolve and is known as hyperstereo. The convergence plane for both frustums is the 2D plane, so the projection of anything lying in the 2D plane is coincident for both left and right eye, resulting in no parallax. Objects that lie in front of the projection plane appear to be in front of the screen and objects behind the projection plane appear to be &quot;into&quot; the screen. Objects behind the projection plane (positive parallax) are easier to look at without straining the eyes.</p>
+
+<p>To view stereoscopic images correctly, each image must be presented to each eye independently. There are devices on the market for this, such as a head-mounted display, which is a display device worn in the head that has 2 small displays, one for each eye. A cheaper alternative to this often expensive device is the Google cardboard viewer.</p>
+
+<p class="figure">Figure: Google cardboard viewer</p>  
+	<p align="center"><img alt="Google cardboard viewer" src="../../images/google_cardboard.png"/></p> 
+ 
+<p>With the Google cardboard viewer or a similar device, you can transform your phone into a basic virtual reality headset.</p>
+
+<h3 id="stereo" name="stereo">Stereoscopic Rendering in DALi</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span> mode presents the left image on the top half of the screen and the right image on the bottom half. It is intended to be used in landscape orientation, so the images are rotated 90 degrees counter-clockwise. The <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span> mode, on the other hand, renders the left image on the left half of the screen and the right image on the right half.</p>
+
+<p>To define the viewing mode to be used, use the <span style="font-family: Courier New,Courier,monospace;">SetViewMode()</span> function of the <span style="font-family: Courier New,Courier,monospace;">Application</span> class, passing the mode as a parameter. You can query the view mode being used by calling the <span style="font-family: Courier New,Courier,monospace;">GetViewMode()</span> function. To define the separation between the left and right cameras, use the <span style="font-family: Courier New,Courier,monospace;">SetStereoBase()</span> function, passing the distance in millimeters as a parameter. This distance can be queried using the <span style="font-family: Courier New,Courier,monospace;">GetStereoBase()</span> function. You can also set the viewing mode and offset at initialization time using 2 command line arguments for this purpose: <span style="font-family: Courier New,Courier,monospace;">-view-mode</span> (or <span style="font-family: Courier New,Courier,monospace;">-v</span>) and <span style="font-family: Courier New,Courier,monospace;">0</span> for <span style="font-family: Courier New,Courier,monospace;">MONO</span>, <span style="font-family: Courier New,Courier,monospace;">1</span> for <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span>, <span style="font-family: Courier New,Courier,monospace;">2</span> for <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span>, and <span style="font-family: Courier New,Courier,monospace;">-stereo-base</span> (or <span style="font-family: Courier New,Courier,monospace;">-s</span>) and the separation in millimeters.</p>
+
+<h3 id="restrictions" name="restrictions">Restrictions</h3>
+
+<p>There are certain restrictions when writing stereoscopic applications using DALi:</p>
+
+<ul>
+<li>When a stereo mode is selected, the default render task source actor is set to an uninitialized actor so it does not render anything. Changing the default render task source actor later on produces undesired results, as the user does not want to see anything rendered by the default camera when stereo mode is on.</li>
+<li>Stereo cameras are parented to the default camera, so if the application needs to change the camera position or orientation, it must change the default camera transformation. The handle to the default camera can be obtained from the default render task as follows:
+
+<pre class="prettyprint">Dali::RenderTask defaultRenderTask = Dali::Stage::GetCurrent().GetRenderTaskList().GetTask(0); Dali::CameraActor defaultCamera = defaultRenderTask.GetCameraActor();</pre>
+</li>
+<li>Stereo render tasks render everything added to the stage&#39;s root layer. If the application must render an object hierarchy to an off-screen buffer, it must set the exclusive flag on that render task so that the stereo tasks do not render that particular subtree. To set the exclusive flag in a render task, use the <span style="font-family: Courier New,Courier,monospace;">SetExclusive()</span> function defined in the render task.</li>
+</ul>
+
+<table class="note">
+       <tbody>
+       <tr>
+               <th class="note">Note</th>
+       </tr>
+       <tr>
+               <td class="note">DALi stereoscopic viewing mode is still under development, and may not be mature enough for commercialized applications at the moment. For example, distortion correction is not supported yet. Tizen continues to improve the stereoscopic mode to give you a chance to provide more exciting and immersive user experience to your customers.
+               </td>
+       </tr>
+       </tbody>
+</table>
+
+<h2 id="shader" name="shader">Shader Effects</h2>
+<p>The shader effects allow the developer to apply visual deformations on the actors. They can affect the geometry, the colors and textures of the actor.</p>
+<ul>
+<li>Each actor has its own default shaders.</li>
+<li>Those default shaders can be overridden by modified shader effects.</li>
+<li>In an application, each actor might possess its own shader effect.</li>
+<li>In an application, multiple actors might apply the same effect.</li>
+</ul>
+
+<h3 id="custom" name="custom">Custom Shader Effects</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace;">ShaderEffect</span> enables you to create custom shader effects by specifying the vertex and pixel shaders. For a custom shader, you can provide the vertex and fragment shader code as strings. These shader snippets get concatenated with the default attributes and uniforms.</p>
+
+<p>Create a custom shader effect:</p>
+
+<pre class="prettyprint">
+std::string myVertexShader; // This variable would contain the code for a vertex shader
+Dali::ShaderEffect myEffect = Dali::ShaderEffect::New(myVertexShader, &quot;&quot; // Use the default pixel shader
+);</pre>
+
+<p>Set the value of a uniform:</p>
+
+<pre class="prettyprint">// If the uniform was declared like this in the shader: uniform float myUniform;
+myEffect.SetUniform(&quot;myUniform&quot;, 0.5f);</pre>
+
+<p>You can apply the custom shader effect to an actor like any other shader:</p>
+
+<pre class="prettyprint">actor.SetShaderEffect(myEffect);</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/resources_n.htm b/org.tizen.ui.practices/html/native/dali/resources_n.htm
new file mode 100644
index 0000000..7256670
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/resources_n.htm
@@ -0,0 +1,253 @@
+<!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>Resources: Handling Images</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#image">Loading Image Files</a></li>
+			<li><a href="#patch">Using Nine-Patch Images</a></li>
+			<li><a href="#buffer">Using a Buffer Image</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1BufferImage.html">DALi::BufferImage API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1NinePatchImage.html">DALi::NinePatchImage API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ResourceImage.html">DALi::ResourceImage API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1BufferImage.html">DALi::BufferImage API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1NinePatchImage.html">DALi::NinePatchImage API for Wearable Native</a></li><li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ResourceImage.html">DALi::ResourceImage API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Resources: Handling Images</h1>
+
+
+<p>DALi provides several ways to handle resource images.</p>
+
+<h2 id="image" name="image">Loading Image Files</h2>
+
+<p>You can load an image file with the <span style="font-family: Courier New,Courier,monospace;">ResourceImage</span> class by specifying its location:</p>
+
+<pre class="prettyprint">
+Dali::ResourceImage image = Dali::ResourceImage::New(&quot;/my-path/my-image.png&quot;);
+</pre>
+
+<p>The loaded image can be displayed using the <a href="imageview_n.htm">ImageView</a> component:</p>
+
+<pre class="prettyprint">
+ImageView imageView = ImageView::New(image);
+Stage::GetCurrent().Add(imageView);
+</pre>
+
+
+<h3>Supported Resource Types</h3>
+
+<p>The resource location can be a file path or a URL.</p>
+
+<p>The currently supported image types are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">png</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">jpeg</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">gif</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">bmp</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">wbmp</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ico</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ktx</span></li>
+</ul>
+
+<p>The currently supported URL schemes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">http</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">https</span></li>
+</ul>
+
+<h3>Asynchronous Loading</h3>
+
+<p>Resources are loaded in separate threads, which means that when you call the <span style="font-family: Courier New,Courier,monospace;">ResourceImage::New()</span> function, it returns immediately.</p>
+
+<p>The application can connect to the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage::LoadingFinishedSignal()</span> signal to get notified when the image has loaded:</p>
+
+<pre class="prettyprint">
+class ResourceImageController : public ConnectionTracker
+{
+&nbsp;&nbsp;&nbsp;public:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ResourceImageController(Application&amp; application) : mApplication(application)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ResourceImageController::Create);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ResourceImage image = ResourceImage::New(&quot;https://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-light.png&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.LoadingFinishedSignal().Connect(this, &amp;ResourceImageController::OnLoadFinished);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ImageView imageView = ImageView::New(image);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageView.SetSize(400, 200);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageView.SetParentOrigin(ParentOrigin::CENTER);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add(imageView);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void OnLoadFinished(ResourceImage image)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LoadingState state = image.GetLoadingState();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (state == ResourceLoadingSucceeded)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cout &lt;&lt; &quot;Loading &quot; &lt;&lt; image.GetUrl() &lt;&lt; &quot; is succeeded&quot; &lt;&lt; endl;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (state == ResourceLoadingFailed)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cout &lt;&lt; &quot;Loading &quot; &lt;&lt; image.GetUrl() &lt;&lt; &quot; is failed&quot; &lt;&lt; endl;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+};
+</pre>
+
+<p>For more information about the resource threads, see <a href="multi_threaded_n.htm#resource">Resource Loading with Multi-threading</a>.</p>
+
+
+<h3>Load and Release Policies</h3>
+
+
+<p>By default, resource images start loading immediately and the data is released only when the <span style="font-family: Courier New,Courier,monospace;">ResourceImage</span> handle is destroyed. To optimize its memory footprint, the application can ask resources to be loaded only when actually required and their data to be released automatically when they are no longer being used by actors:</p>
+
+<pre class="prettyprint">Dali::ResourceImage image = Dali::ResourceImage::New(&quot;/my-path/my-image.png&quot;, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dali::ResourceImage::ON_DEMAND, 
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dali::Image::UNUSED);</pre>
+
+<p>If the <span style="font-family: Courier New,Courier,monospace;">Dali::Image::UNUSED</span> property is used, the resource data is reloaded automatically when the image is used again.</p>
+
+<h3>Load Time Resizing</h3>
+
+<p>An application loading images from an external source often wants to display those images at a lower resolution than their native ones. To support this, DALi can resize an image at load time so that its in-memory copy uses less space and its visual quality benefits from being prefiltered. The <span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode</span> namespace (in <a href="../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1FittingMode.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1FittingMode.html">wearable</a> applications) provides 4 algorithms, which can be used to fit an image to a desired rectangle, a desired width, or a desired height.</p>
+
+<p>The following code snippet is an example of rescaling:</p>
+
+<pre class="prettyprint">
+Dali::Image image = Dali::ResourceImage::New(filename, ImageDimensions(240, 240), FittingMode::SCALE_TO_FILL);
+</pre>
+
+<p>This example sets the size and fitting mode appropriately for a large thumbnail during the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> object construction. In general, to enable scaling on load, pass a non-zero width or height and one of the 4 fitting modes to the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> creator function as shown above.</p>
+
+<p>The fitting modes and suggested use cases are as follows:</p>
+
+<table>
+       <caption>
+               Table: Fitting mode use cases
+       </caption>
+       <tbody>
+       <tr>
+               <th>Fitting mode</th>
+               <th>Suggested use case</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode::SHRINK_TO_FIT</span></td>
+               <td>Full-screen image display: limit the loaded image resolution to the device resolution, but show all of the image.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode::SCALE_TO_FILL</span></td>
+               <td>Thumbnail gallery grid: limit the loaded image resolution to the screen tile, filling the whole tile but losing a few pixels to match the tile shape.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode::FIT_WIDTH</span></td>
+               <td>Image columns: limit the loaded image resolution to the column width.</td>
+       </tr>
+       <tr>
+            	<td><span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode::FIT_HEIGHT</span></td>
+               <td>Image rows: limit the loaded image resolution to the row height.</td>
+       </tr>
+       </tbody>
+</table>
+
+
+<h3>Image Size</h3>
+
+<p>If the application requires the image dimensions immediately, they can be retrieved synchronously:</p>
+
+<pre class="prettyprint">Dali::ImageDimensions dimensions = Dali::ResourceImage::GetImageSize(&quot;/my-path/my-image.png&quot;);</pre>
+
+<p>This is a disk-read operation, which can be slow and block the event thread. This operation is currently not supported for remote resources, such as HTTP or HTTPS URLs.</p>
+
+
+<h2 id="patch" name="patch">Using Nine-Patch Images</h2>
+
+
+<p>DALi supports nine-patch images, which can be stretched while maintaining their corners.</p>
+
+<h3>Nine-Patch Image Format</h3>
+
+<p>A nine-patch image has 9 sections. In the following figure (on the right), the sections 2, 4, 5, 6, 8 are stretched and the sections 1, 3, 7, 9 keep their size unchanged when the size of the image is changed:</p>
+
+<p class="figure">Figure: A nine-patch image explained</p>  
+       <p align="center"><img alt="A nine-patch image" src="../../images/nine_patch_dali.9.png"/> <img alt="A nine-patch image" src="../../images/nine_patch_explained.png"/></p>
+
+<p>The black lines top and left side of the image determine the stretchable region.</p>
+	   
+<p>This format is compatible with the one used in Android. Therefore, you can easily make nine-patch images using existing tools, such as <a href="https://romannurik.github.io/AndroidAssetStudio/nine-patches.html" target="_blank">Simple Nine-patch Generator</a>.</p>
+
+
+
+<h3>Nine-Patch Image Loading</h3>
+
+<p>A nine-patch image can be loaded by the <span style="font-family: Courier New,Courier,monospace;">ResourceImage</span> class just like other images. If an image file has a <span style="font-family: Courier New,Courier,monospace;">.9.png</span> or <span style="font-family: Courier New,Courier,monospace;">.9.jpg</span> extension and proper nine-patch image contents as mentioned earlier, the image loaded by the <span style="font-family: Courier New,Courier,monospace;">ResourceImage</span> class is rendered in the nine-patch way with the <span style="font-family: Courier New,Courier,monospace;">ImageView</span> class.</p>
+
+<p>The following is an example of using a <span style="font-family: Courier New,Courier,monospace;">*.9.png</span> image:</p>
+
+<pre class="prettyprint">
+ResourceImage image = ResourceImage::New(&quot;nine_patch_dali.9.png&quot;);
+ImageActor imageView = ImageActor::New(image);
+imageView.SetSize(200, 200);
+</pre>
+
+<p>The following figure shows the result:</p>
+<p class="figure">Figure: 200 x 200 image</p>
+       <p align="center"><img alt="200 x 200 image" src="../../images/nine_patch_expanded.png"/></p>
+
+	   
+<h2 id="buffer" name="buffer">Using a Buffer Image</h2>
+
+<p>A <span style="font-family: Courier New,Courier,monospace;">DALi::BufferImage</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1BufferImage.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1BufferImage.html">wearable</a> applications) represents an image resource in the form of pixel buffer data. The application can write to this buffer as required and the image is updated on the screen:</p>
+
+<pre class="prettyprint">// Create a 200 by 200 pixel buffer with a color-depth of 32-bits (with alpha)
+Dali::BufferImage image = Dali::BufferImage::New(200, 200);</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/scrollview_n.htm b/org.tizen.ui.practices/html/native/dali/scrollview_n.htm
new file mode 100644
index 0000000..df39006
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/scrollview_n.htm
@@ -0,0 +1,199 @@
+<!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>ScrollView: Scrollable Container for Items</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#create">Creating a ScrollView</a></li>
+			<li><a href="#ruler">Using Ruler, RulerDomain, and Wrap</a></li>
+		</ul>
+		<ul class="toc">
+		<p class="toc-title">Related Info</p>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1DefaultRuler.html">Dali::Toolkit::DefaultRuler API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1FixedRuler.html">Dali::Toolkit::FixedRuler API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Ruler.html">Dali::Toolkit::Ruler API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1RulerDomain.html">Dali::Toolkit::RulerDomain API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollView.html">Dali::Toolkit::ScrollView API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollViewEffect.html">Dali::Toolkit::ScrollViewEffect API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollViewPagePathEffect.html">Dali::Toolkit::ScrollViewPagePathEffect API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1DefaultRuler.html">Dali::Toolkit::DefaultRuler API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1FixedRuler.html">Dali::Toolkit::FixedRuler API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Ruler.html">Dali::Toolkit::Ruler API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1RulerDomain.html">Dali::Toolkit::RulerDomain API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollView.html">Dali::Toolkit::ScrollView API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollViewEffect.html">Dali::Toolkit::ScrollViewEffect API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollViewPagePathEffect.html">Dali::Toolkit::ScrollViewPagePathEffect API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>ScrollView: Scrollable Container for Items</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> class provides a scrollable view, which contains actors and can be scrolled automatically or manually by panning.</p>
+
+
+<p>The following figure shows example layouts using the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span>.</p>
+
+<p class="figure">Figure: ScrollView</p>  
+	<p align="center"><img alt="ScrollView" src="../../images/scrollview.png"/></p>
+
+
+<p>A scroll view emits a <span style="font-family: Courier New,Courier,monospace;">SnapStartedSignal()</span> signal when the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> has started to snap or flick. The signal informs the target of the scroll position, scale, and rotation.</p>
+
+<h2 id="create" name="create">Creating a ScrollView</h2>
+
+<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">ScrollView</span>:</p>
+
+<pre class="prettyprint">Dali::Toolkit::ScrollView scrollView;
+
+// Create a ScrollView instance
+myScrollView = ScrollView::New();
+
+// Add it to the stage
+Stage::GetCurrent().Add(scrollView);
+
+// Set the size of stage; it covers the entire stage 
+Stage stage = Dali::Stage::GetCurrent();
+Size size = stage.GetSize();
+scrollView.SetSize(size);
+
+// Add actors to the ScrollView 
+Image image = Image::New(DALI_IMAGE_DIR &quot;button-background.png&quot;);
+ImageActor imageActor = ImageActor::New(image);
+scrollView.Add(imageActor);
+// The ScrollView contents are now draggable
+
+// To enforce horizontal-only scrolling, the Y axis ruler can be disabled 
+RulerPtr rulerY = new DefaultRuler();
+rulerY-&gt;Disable();
+scrollView.SetRulerY(rulerY);
+
+// To enable snapping, a FixedRuler can be applied to the X axis, with snap points spaced to the width of the stage. 
+Size size = stage.GetSize();
+RulerPtr rulerX = new FixedRuler(size.width);
+scrollView.SetRulerX(rulerX);
+
+// A domain can be applied to rulers to prevent scrolling beyond this boundary
+// In this case, to 4 times the width of the stage, allowing for 4 pages to be scrolled
+Size size = stage.GetSize();
+RulerPtr rulerX = new FixedRuler(size.width);
+rulerX-&gt;SetDomain(RulerDomain(0.0f, size.width*4.0f));
+scrollView.SetRulerX(rulerX);</pre>
+
+<h2 id="ruler" name="ruler">Using Ruler, RulerDomain, and Wrap</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Ruler</span> abstract class defines the scroll axes. The <span style="font-family: Courier New,Courier,monospace;">RulerDomain</span> class specifies the minimum and maximum values of a ruler. The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> class provides a wrap mode for <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents. When enabled, the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents are wrapped over the x/y domain. The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> behavior depends on a combination of the Ruler, RulerDomain, and Wrap modes. The following table shows ScrollView behavior according to the combination.</p>
+
+<table>
+   <caption>
+     Table: Scrollview behavior in the Ruler, RulerDomain, and Wrap mode</caption>
+   <tbody>
+    <tr>
+     <th>Ruler</th>
+	 <th>Domain</th>
+     <th>Wrap</th>
+	 <th>Behavior</th>
+    </tr>
+    <tr>
+		<td>Disabled</td>
+		<td>Disabled</td>
+		<td>Wrap</td>
+		<td>No movement in axis</td>
+	</tr>
+	<tr>
+		<td>Disabled</td>
+		<td>Enabled</td>
+		<td>No wrap</td>
+		<td>No movement in axis</td>
+	</tr>
+	<tr>
+		<td>Disabled</td>
+		<td>Enabled</td>
+		<td>Wrap</td>
+		<td>No movement in axis</td>
+	</tr>
+	<tr>
+		<td>Enabled</td>
+		<td>Disabled</td>
+		<td>No wrap</td>
+		<td>Free movement in axis</td>
+	</tr>
+	<tr>
+		<td>Enabled</td>
+		<td>Disabled</td>
+		<td>Wrap</td>
+		<td>Free movement in axis, wrapped according to domain minimum and maximum</td>
+	</tr>
+	<tr>
+		<td>Enabled</td>
+		<td>Enabled</td>
+		<td>No wrap</td>
+		<td>Movement limited to domain minimum and maximum</td>
+	</tr>
+	<tr>
+		<td>Enabled</td>
+		<td>Enabled</td>
+		<td>Wrap</td>
+		<td>Movement limited to domain minimum and maximum</td>
+	</tr>
+   </tbody>
+  </table>
+  
+ <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Actors within a <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> are controlled by constraints. If you apply constraints to these actors externally, undefined behavior can occur. Since applying additional constraints can conflict with the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> constraints, place the actors within container actors. The container actors are affected by the constraints.</td>
+    </tr>
+   </tbody>
+ </table>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/dali/tableview_n.htm b/org.tizen.ui.practices/html/native/dali/tableview_n.htm
new file mode 100644
index 0000000..2897aa0
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/tableview_n.htm
@@ -0,0 +1,105 @@
+<!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>TableView: Container with Grid-like Layout</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TableView.html">Dali::Toolkit::TableView API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TableView.html">Dali::Toolkit::TableView API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>TableView: Container with Grid-like Layout</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">TableView</span> class is a layout container for aligning child actors in a grid like layout. <span style="font-family: Courier New,Courier,monospace;">TableView</span> constraints the x and y position and width and height of the child actors.</p>
+
+<p class="figure">Figure: TableView</p>  
+	<p align="center"><img alt="TableView" src="../../images/tableview.png"/></p>
+	
+<h2 id="create" name="create">Creating a TableView</h2>
+
+<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">TableView</span>:</p>
+
+<pre class="prettyprint">class ButtonsController: public ConnectionTracker
+{
+&nbsp;&nbsp;&nbsp;ButtonsController(Application&amp; application)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: mApplication(application)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ButtonsController::Create);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TableView tableView = TableView::New(4,4);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableView.SetKeyboardFocusable(true);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableView.SetName(&quot;TableView&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int row = 0; row &lt; 4; ++row)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int col = 0; col &lt; 4; ++col)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Control control = Control::New();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;std::ostringstream str;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str &lt;&lt; row &lt;&lt; &quot;-&quot; &lt;&lt; col;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;control.SetName(str.str());
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;control.SetKeyboardFocusable(true);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableView.AddChild(control, TableView::CellPosition(row, col));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(tableView);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Signal
+
+&nbsp;&nbsp;&nbsp;Application&amp; mApplication;
+}</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/textfield_n.htm b/org.tizen.ui.practices/html/native/dali/textfield_n.htm
new file mode 100644
index 0000000..3352540
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/textfield_n.htm
@@ -0,0 +1,291 @@
+<!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>TextField: Type Your Text!</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#create">Creating a TextField</a></li>
+			<li><a href="#align">Aligning Text</a></li>
+			<li><a href="#decorations">Using Decorations</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextField.html">Dali::Toolkit::TextField API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextField.html">Dali::Toolkit::TextField API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>TextField: Type Your Text!</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextField</span> class is a control providing a single-line editable text field.</p>
+
+<p class="figure">Figure: TextField</p>  
+	<p align="center"><img alt="TextField" src="../../images/textfield.png"/></p>
+	
+<h2 id="create" name="create">Creating a TextField</h2>
+
+<p>Before text has been entered, the <span style="font-family: Courier New,Courier,monospace;">TextField</span> can display a placeholder text. An alternative placeholder can be displayed when the <span style="font-family: Courier New,Courier,monospace;">TextField</span> has keyboard focus. For example, a <span style="font-family: Courier New,Courier,monospace;">TextField</span> used to enter a username can initially show the text <span style="font-family: Courier New,Courier,monospace;">Unknown Name</span>, and the text <span style="font-family: Courier New,Courier,monospace;">Enter Name.</span> when the cursor is visible.</p>
+
+<pre class="prettyprint">TextField field = TextField::New();
+field.SetProperty(TextField::Property::PLACEHOLDER_TEXT, &quot;Unnamed Name&quot;);
+field.SetProperty(TextField::Property::PLACEHOLDER_TEXT_FOCUSED, &quot;Enter Name.&quot;);
+Stage::GetCurrent().Add(field);
+</pre>
+
+<p>When the <span style="font-family: Courier New,Courier,monospace;">TextField</span> is tapped, it automatically gets the keyboard focus. Key events enter the text, and the placeholder text is removed. After text has been entered, it can be retrieved from the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> property.</p>
+
+<pre class="prettyprint">Property::Value fieldText = field.GetProperty(TextField::Property::TEXT);
+std::cout &lt;&lt; &quot;Received text: &quot; &lt;&lt; fieldText.Get&lt; std::string &gt;() &lt;&lt; std::endl;</pre>
+
+
+<h2 id="align" name="align">Aligning Text</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextField</span> displays a single-line of text, which scrolls if there is not enough space for the text displayed. If there is enough space, the text can be aligned horizontally to the beginning, end, or center of the available area:</p>
+
+<pre class="prettyprint">field.SetProperty(TextField::Property::HORIZONTAL_ALIGNMENT, &quot;BEGIN&quot;); // &quot;CENTER&quot; or &quot;END&quot;</pre>
+
+<h2 id="decorations" name="decorations">Using Decorations</h2>
+
+<p>For text decorations, the following <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> class properties are available.</p>
+
+<table>
+   <caption>
+     Table: <span style="font-family: Courier New,Courier,monospace;">TextField</span> properties
+   </caption>
+   <tbody>
+    <tr>
+     <th>Property</th>
+	 <th>Type</th>
+	 <th>Writable</th>
+	 <th>Animatable</th>
+    </tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">RENDERING_BACKEND</span></td>
+		<td>Integer</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+    <tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">TEXT</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT_FOCUSED</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span></td>
+		<td>Float</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">MAX_LENGTH</span></td>
+		<td>Integer</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">EXCEED_POLICY</span></td>
+		<td>Integer</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL_ALIGNMENT</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">VERTICAL_ALIGNMENT</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">COLOR</span></td>
+		<td>Vector4</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span></td>
+		<td>Vector2</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span></td>
+		<td>Vector4</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">PRIMARY_CURSOR_COLOR</span></td>
+		<td>Vector4</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SECONDARY_CURSOR_COLOR</span></td>
+		<td>Vector4</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">ENABLE_CURSOR_BLINK</span></td>
+		<td>Boolean</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_INTERVAL</span></td>
+		<td>Float</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_DURATION</span></td>
+		<td>Float</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_IMAGE</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_PRESSED_IMAGE</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SCROLL_THRESHOLD</span></td>
+		<td>Float</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SCROLL_SPEED</span></td>
+		<td>Float</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_IMAGE_RIGHT</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_LEFT</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_RIGHT</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HIGHLIGHT_COLOR</span></td>
+		<td>Vector4</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">DECORATION_BOUNDING_BOX</span></td>
+		<td>Rectangle</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">INPUT_METHOD_SETTINGS</span></td>
+		<td>Map</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+   </tbody>
+  </table>
+
+<p>To change the color of the text, use the <span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span> property. An alternative color can be used for placeholder text by setting the <span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT_COLOR</span> property. Unlike the <span style="font-family: Courier New,Courier,monospace;">Actor::COLOR</span> property, these properties do not affect child actors added to the <span style="font-family: Courier New,Courier,monospace;">TextField</span>.</p>
+
+<pre class="prettyprint">field.SetProperty(TextField::Property::TEXT_COLOR, Color::CYAN);
+field.SetProperty(TextField::Property::PLACEHOLDER_TEXT_COLOR, Color::BLACK);</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/textlabel_n.htm b/org.tizen.ui.practices/html/native/dali/textlabel_n.htm
new file mode 100644
index 0000000..d149f55
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/textlabel_n.htm
@@ -0,0 +1,299 @@
+<!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>TextLabel: Displaying Text Labels</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#create">Creating a TextLabel</a></li>
+			<li><a href="#select">Selecting Fonts</a></li>
+			<li><a href="#align">Aligning Text</a></li>
+			<li><a href="#size">Managing the Layout</a></li>
+			<li><a href="#decoration">Using Decorations</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">Dali::Toolkit::TextLabel API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">Dali::Toolkit::TextLabel API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>TextLabel: Displaying Text Labels</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> class provides a control that renders a short text string. The text labels are lightweight, non-editable, and do not respond to user input.</p>
+
+<p class="figure">Figure: TextLabel</p>  
+ 	<p align="center"><img alt="TextLabel" src="../../images/textlabel.png"/></p>
+
+<h2 id="create" name="create">Creating a TextLabel</h2>
+
+<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> instance:</p>
+
+<pre class="prettyprint">TextLabel label = TextLabel::New();
+label.SetProperty(TextLabel::Property::TEXT, &quot;Hello World&quot;);
+Stage::GetCurrent().Add(label);</pre>
+
+<h2 id="select" name="select">Selecting Fonts</h2>
+
+<p>By default, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> automatically selects a suitable font from the platform. Note that the selected font may not support all characters in your input text. For example, Latin fonts often do not provide Arabic glyphs.</p>
+
+<p>Alternatively, you can request a font using the <span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span>, <span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span>, and <span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span> properties:</p>
+
+<pre class="prettyprint">label.SetProperty(TextLabel::Property::FONT_FAMILY, &quot;HelveticaNue&quot;);
+label.SetProperty(TextLabel::Property::FONT_STYLE,  &quot;Regular&quot;);
+label.SetProperty(TextLabel::Property::POINT_SIZE,  12.0f);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> falls back to using the default font if the requested font does not support the required scripts.</p>
+
+
+<h2 id="align" name="align">Aligning Text</h2>
+
+<p>Wrapping can be enabled using the <span style="font-family: Courier New,Courier,monospace;">MULTI_LINE</span> property:</p>
+
+<pre class="prettyprint">label.SetProperty(TextLabel::Property::MULTI_LINE, true);</pre>
+
+<p>The text can be aligned horizontally to the beginning, end, or center of the available area:</p>
+
+<pre class="prettyprint">label.SetProperty(TextLabel::Property::HORIZONTAL_ALIGNMENT, &quot;BEGIN&quot;); // &quot;CENTER&quot; or &quot;END&quot;</pre>
+
+<h2 id="size" name="size">Managing the Layout</h2>
+
+<p>There are several resize policies commonly used with <span style="font-family: Courier New,Courier,monospace;">TextLabels</span>.
+The following examples show the actual size by setting a colored background, whilst the black area represents the size of the parent control.</p>
+
+<h3 id="font" name="font">Natural Size Policy</h3>
+
+<p>In its natural size, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> is large enough to display the text without wrapping, and does not have extra space to align the text within. In the following example, the same result is displayed regardless of the alignment or multi-line properties:</p>
+
+<pre class="prettyprint">TextLabel label = TextLabel::New(&quot;Hello World&quot;);
+label.SetAnchorPoint(AnchorPoint::TOP_LEFT);
+label.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE,Dimension::ALL_DIMENSIONS);
+label.SetBackgroundColor(Color::BLUE);Stage::GetCurrent().Add(label);</pre>
+
+<h3 id="height" name="height">Height-for-width Policy</h3>
+
+<p>To lay out text labels vertically, a fixed (maximum) width must be provided by the parent control. Each <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> reports the desired height for the given width. The following example uses <span style="font-family: Courier New,Courier,monospace;">TableView</span> as the parent:</p>
+
+<pre class="prettyprint">TableView parent = TableView::New(3, 1);
+parent.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+parent.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
+parent.SetAnchorPoint(AnchorPoint::TOP_LEFT);
+
+Stage::GetCurrent().Add(parent);
+
+TextLabel label = TextLabel::New(&quot;Hello World&quot;);
+label.SetAnchorPoint(AnchorPoint::TOP_LEFT);
+label.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+label.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);
+label.SetBackgroundColor(Color::BLUE);
+
+parent.AddChild(label, TableView::CellPosition(0, 0));
+parent.SetFitHeight(0);
+
+label = TextLabel::New(&quot;A Quick Brown Fox Jumps Over The Lazy Dog&quot;);
+label.SetAnchorPoint(AnchorPoint::TOP_LEFT);
+label.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+label.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);
+label.SetBackgroundColor(Color::GREEN);
+label.SetProperty(TextLabel::Property::MULTI_LINE, true);
+
+parent.AddChild(label, TableView::CellPosition(1, 0));
+parent.SetFitHeight(1);
+
+label = TextLabel::New(&quot;لإعادة ترتيب الشاشات، يجب تغيير نوع العرض إلى شبكة قابلة للتخصيص&quot;);
+label.SetAnchorPoint(AnchorPoint::TOP_LEFT);
+label.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+label.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);
+label.SetBackgroundColor(Color::BLUE);
+label.SetProperty(TextLabel::Property::MULTI_LINE, true);
+
+parent.AddChild(label, TableView::CellPosition(2, 0));
+parent.SetFitHeight(2);</pre>
+
+<p>In the example, the &quot;Hello World&quot; text label has been given the full width, not the natural width.</p>
+
+<h2 id="decoration" name="decoration">Using Decorations</h2>
+
+<p>For text decorations, <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> provides several properties.</p>
+
+<table>
+   <caption>
+     Table: <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> properties
+   </caption>
+   <tbody>
+    <tr>
+     <th>Property</th>
+	 <th>Type</th>
+	 <th>Writable</th>
+	 <th>Animatable</th>
+    </tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">RENDERING_BACKEND</span></td>
+		<td>Integer</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+    <tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">TEXT</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span></td>
+		<td>Float</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">MULTI_LINE</span></td>
+		<td>Boolean</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL_ALIGNMENT</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">VERTICAL_ALIGNMENT</span></td>
+		<td>String</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span></td>
+		<td>Vector4</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span></td>
+		<td>Vector2</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span></td>
+		<td>Vector4</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_ENABLED</span></td>
+		<td>Boolean</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_COLOR</span></td>
+		<td>Vector4</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_HEIGHT</span></td>
+		<td>Float</td>
+		<td>Yes</td>
+		<td>No</td>
+	</tr>
+   </tbody>
+  </table>
+
+<h3 id="color" name="color">Color</h3>
+
+<p>To change the color of the text, use the <span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span> property. Unlike the <span style="font-family: Courier New,Courier,monospace;">Actor::COLOR</span> property, this does not affect child actors added to the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span>.</p>
+
+<pre class="prettyprint">label.SetProperty(TextLabel::Property::TEXT, &quot;Red Text&quot;);
+label.SetProperty(TextLabel::Property::TEXT_COLOR, Color::RED);</pre>
+
+<h3 id="drop" name="drop">Drop Shadow</h3>
+
+<p>To add a drop shadow to the text, set the <span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span> property with a non-zero values. The color can also be selected using the <span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span> property.</p>
+
+<pre class="prettyprint">stage.SetBackgroundColor(Color::BLUE);
+label1.SetProperty(TextLabel::Property::TEXT, &quot;Plain Text&quot;);
+label2.SetProperty(TextLabel::Property::TEXT, &quot;Text with Shadow&quot;);
+label2.SetProperty(TextLabel::Property::SHADOW_OFFSET, Vector2(1.0f, 1.0f));
+label2.SetProperty(TextLabel::Property::SHADOW_COLOR, Color::BLACK);
+label3.SetProperty(TextLabel::Property::TEXT, &quot;Text with Bigger Shadow&quot;);
+label3.SetProperty(TextLabel::Property::SHADOW_OFFSET, Vector2(2.0f, 2.0f));
+label3.SetProperty(TextLabel::Property::SHADOW_COLOR, Color::BLACK);
+label4.SetProperty(TextLabel::Property::TEXT, &quot;Text with Color Shadow&quot;);
+label4.SetProperty(TextLabel::Property::SHADOW_OFFSET, Vector2(1.0f, 1.0f));
+label4.SetProperty(TextLabel::Property::SHADOW_COLOR, Color::RED);</pre>
+
+<h3 id="underlining" name="underlining">Underlining</h3>
+
+<p>The text can be underlined by setting the <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_ENABLED</span> property. The color can also be selected using the <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_COLOR</span> property.</p>
+
+<pre class="prettyprint">label1.SetProperty(TextLabel::Property::TEXT, &quot;Text with Underline&quot;);
+label1.SetProperty(TextLabel::Property::UNDERLINE_ENABLED, true);
+label2.SetProperty(TextLabel::Property::TEXT, &quot;Text with Color Underline&quot;);
+label2.SetProperty(TextLabel::Property::UNDERLINE_ENABLED, true);
+label2.SetProperty(TextLabel::Property::UNDERLINE_COLOR, Color::GREEN); </pre>
+
+<p>By default, the underline height is based on the font metrics. This can be overridden using the <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_HEIGHT</span> property:</p>
+
+<pre class="prettyprint">label1.SetProperty(TextLabel::Property::UNDERLINE_HEIGHT, 1.0f);</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>
+
diff --git a/org.tizen.ui.practices/html/native/dali/ui_components_n.htm b/org.tizen.ui.practices/html/native/dali/ui_components_n.htm
new file mode 100644
index 0000000..9a0a8c0
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/dali/ui_components_n.htm
@@ -0,0 +1,121 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>UI Components: Creating the Application Layout</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__dali-toolkit.html">Dali::Toolkit API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__dali-toolkit.html">Dali::Toolkit API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>UI Components: Creating the Application Layout</h1>
+
+<p>UI components are interactive components for layouting and scrolling the user interface. DALi provides UI components, such as buttons, item view, scroll view, table view, and text controls.</p>
+
+<p class="figure">Figure: DALi UI components</p>  
+	<p align="center"><img alt="DALi UI components" src="../../images/ui_controls.png"/></p>
+
+<p>The following table lists the available UI components.</p>
+
+<table>
+   <caption>
+     Table: DALi UI components
+   </caption>
+   <tbody>
+    <tr>
+     <th>Control</th>
+	 <th>Description</th>
+	 <th>Related classes</th>
+    </tr>
+    <tr>
+		<td><a href="buttons_n.htm">Buttons</a></td>
+		<td>A push button that can be pressed, a checkbox button that can be checked/unchecked,and a radio button that only one option can be selected.</td>
+		<td><span style="font-family: Courier New,Courier,monospace;">Button, PushButton, CheckBoxButton, RadioButton</span></td>
+	</tr>
+	<tr>
+		<td><a href="itemview_n.htm">ItemView</a></td>
+		<td>An item view that renders item sets in a scrollable layout.</td>
+		<td><span style="font-family: Courier New,Courier,monospace;">ItemView, ItemFactory, ItemLayout, Scrollable</span></td>
+	</tr>
+	<tr>
+		<td><a href="scrollview_n.htm">ScrollView</a></td>
+		<td>A scroll view to provide scrollable view.</td>
+		<td><span style="font-family: Courier New,Courier,monospace;">ScrollView, Scrollable, ScrollViewEffect, ScrollViewPagePathEffect</span></td>
+	</tr>
+	<tr>
+		<td><a href="tableview_n.htm">TableView</a></td>
+		<td>A table view that can align child actors in a grid like layout.</td>
+		<td><span style="font-family: Courier New,Courier,monospace;">TableView</span></td>
+	</tr>
+	<tr>
+		<td><a href="textfield_n.htm">TextField</a></td>
+		<td>A text field that provides a single-line editable text field.</td>
+		<td><span style="font-family: Courier New,Courier,monospace;">TextField</span></td>
+	</tr>
+	<tr>
+		<td><a href="textlabel_n.htm">TextLabel</a></td>
+		<td>A text label that renders a short text string.</td>
+		<td><span style="font-family: Courier New,Courier,monospace;">TextLabel</span></td>
+	</tr>
+	<tr>
+        <td><a href="imageview_n.htm">ImageView</a></td>
+        <td>An image view that renders an image.</td>
+        <td><span style="font-family: Courier New,Courier,monospace;">ImageView</span></td>
+    </tr>
+   </tbody>
+  </table>
+  
+<p>The base class for the components is <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">wearable</a> applications). This class can also be used to create your own custom UI components. For tips for the control class, see <a href="control_base_n.htm">Control</a>. In this UI Components guide, both the terms <strong>control</strong> and <strong>component</strong> are used to refer to a UI component.</p>
+
+<p>The following figure illustrates the hierarchy of the UI components.</p>
+
+<p class="figure">Figure: DALi UI component hierarchy</p>  
+	<p align="center"><img alt="DALi UI component hierarchy" src="../../images/ui_control_hierarchy.png"/></p> 
+	
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/animation_effects_n.htm b/org.tizen.ui.practices/html/native/efl/animation_effects_n.htm
new file mode 100644
index 0000000..4916ba0
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/animation_effects_n.htm
@@ -0,0 +1,84 @@
+<!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>Animations and Effects: Creating Transformations</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Mobile Wearable</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Animations and Effects: Creating Transformations</h1> 
+
+<p>EFL provides the following animation functionalities: Ecore animators, Elementary transitions, Edje animations, and Evas Map animations.</p>
+
+<p>The first option for creating animations with EFL is to use <a href="ecore_animation_n.htm">Ecore animators</a>. To create an Ecore animation, you must first determine the duration of the animation, and then define a callback function that performs the animation with that duration.</p>
+
+<p>You can also create animations using <a href="elementary_animation_n.htm">Elementary transitions</a>. Elementary transitions allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary transitions are mostly based on Ecore animators, but provide some transition methods at a higher level of abstraction. Elementary transitions provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
+
+<p>A third option for animating objects is to use <a href="edje_animation_n.htm">Edje animations</a>, which are based on a simple principle: transitioning from one state to another. To animate an object with Edje, you have to first define the start and end states of the animation, and then transition the object from the start state to the end state.</p>
+
+<p>Finally, <a href="evas_map_animation_n.htm">Evas Map animations</a> allow you to apply transformations to all types of objects by way of UV mapping. In UV mapping, you map points in the source object to 3D space positions in the target object. This allows for rotation, perspective, scale, and other transformation effects, depending on the map. In addition, each map point can carry a multiplier color, which, if properly calculated, can be used to apply 3D shading effects on the target object.</p> 
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/basic_tutorial_mn.htm b/org.tizen.ui.practices/html/native/efl/basic_tutorial_mn.htm
new file mode 100644
index 0000000..a3d8647
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/basic_tutorial_mn.htm
@@ -0,0 +1,294 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Basic Mobile Interactions</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#button">Using Buttons</a></li>
+			<li><a href="#simple_text">Using Simple Text</a></li>
+			<li><a href="#simple_list">Using Simple Lists</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Basic Mobile Interactions</h1>
+
+  
+<p>This tutorial teaches the basics of UI component interactions. It builds upon the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>, using its basic application code.</p>
+
+<p>This feature is supported in mobile applications only.</p>
+
+ <h2 id="button" name="button">Using Buttons</h2>
+
+<p>To use buttons:</p>
+
+<ul>
+<li>Create buttons with various styles:
+
+<ul>
+<li>
+<p>To create a text-only button:</p>
+<pre class="prettyprint">Evas_Object* button;
+
+button = elm_button_add(box);
+elm_object_text_set(button, &quot;Click me&quot;);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre>
+</li>
+<li>
+<p>To create a button with an icon:</p>
+<pre class="prettyprint">Evas_Object* button2;
+Evas_Object* icon2;
+
+button2 = elm_button_add(box);
+icon2 = elm_icon_add(box);
+elm_image_file_set(icon2, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(button2, &quot;icon&quot;, icon2);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre>
+</li>
+<li>
+<p>To create a button with both an icon and a text label:</p>
+<pre class="prettyprint">Evas_Object* button3;
+Evas_Object* icon3;
+button3 = elm_button_add(box);
+icon3 = elm_icon_add(box);
+elm_image_file_set(icon, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(button3, &quot;icon&quot;, icon3);
+elm_object_text_set(button3, &quot;Press me&quot;);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre>
+</li>
+</ul></li>
+
+<li>Disable a button using the <span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span> function.
+<p>A disabled button is visible, but cannot be clicked.</p>
+<pre class="prettyprint">elm_object_disabled_set(button2, EINA_TRUE);
+</pre></li>
+
+<li>Manage button callbacks.
+<p>The Elementary buttons respond to user interactions with several events.</p>
+<ul>
+<li>Define and register a callback for a button click.
+<p>The <span style="font-family: Courier New,Courier,monospace">clicked</span> event is the most basic button event. The following code snippet changes the button text when the button is clicked (first pressed and then unpressed):</p>
+<pre class="prettyprint">
+static void _button_click_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Clicked!&quot;);
+}
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_click_cb, NULL);
+</pre>
+</li>
+<li>Define and register a callback for a button press and unpress.
+<p>The button can respond to the separate <span style="font-family: Courier New,Courier,monospace">pressed</span> and <span style="font-family: Courier New,Courier,monospace">unpressed</span> events instead of the entire click event:</p>
+<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pressed!&quot;);
+}
+static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Unpressed!&quot;);
+}
+
+evas_object_smart_callback_add(button3, &quot;pressed&quot;, _button_press_cb, NULL);
+evas_object_smart_callback_add(button3, &quot;unpressed&quot;, _button_unpress_cb, NULL);
+</pre>
+</li>
+<li>Define and register a callback for repeated button events.
+<p>The button can receive multiple <span style="font-family: Courier New,Courier,monospace">repeated</span> events when the user presses it down and holds it. You can define timings, such as the initial timeout and the repeat interval, for repeated events. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.</p>
+<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;char buf[16];
+
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Repeat %d&quot;, count++);
+
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, buf);
+}
+
+elm_button_autorepeat_set(button3, EINA_TRUE);
+elm_button_autorepeat_initial_timeout_set(button3, 1.0);
+elm_button_autorepeat_gap_timeout_set(button3, 0.5);
+evas_object_smart_callback_add(button3, &quot;repeated&quot;, _button_repeat_cb, NULL);
+</pre>
+</li>
+</ul></li></ul>
+
+ <h2 id="simple_text" name="simple_text">Using Simple Text</h2>
+
+<p>To use simple text:</p>
+<ul>
+<li>Create a label object:
+<pre class="prettyprint">label = elm_label_add(ad-&gt;win);
+elm_object_text_set(label, &quot;My label&quot;);
+evas_object_show(label);
+</pre>
+</li>
+<li>Slide the text, if it is too long to be shown at once, using one of the slide options:
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: Text stops at an edge, reverts to its initial position and slides again.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: Text is originally empty. It slides in, all the way to the edge, continues sliding until the label is empty, and loops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: Text moves (bounces) backwards after stopping at the edge.</li>
+</ul>
+
+<p>In the following example, the duration of the slide is set to 5 seconds and slide option bounces the text at the end:</p>
+
+<pre class="prettyprint">Evas_Object* label;
+label = elm_label_add(-&gt;win);
+elm_object_text_set(label, &quot;This text is supposed to be really long.&quot;);
+elm_label_slide_set(label, EINA_TRUE);
+elm_label_slide_duration_set(label, 5.);
+elm_object_style_set(label, &quot;slide_bounce&quot;);
+evas_object_show(label);
+</pre>
+
+<p>If needed, you can use the <span style="font-family: Courier New,Courier,monospace">slide,end</span> event to respond to the moment when the sliding text reaches its end.</p>
+</li>
+
+<li>Create a marker.
+<p>A marker is a text that is by default bold, white, and centered. In the following example, the marker text is set to be blue:</p>
+<pre class="prettyprint">elm_object_style_set(label, &quot;marker&quot;);
+evas_object_color_set(label, 0, 0, 255, 255);
+</pre>
+</li>
+<li>Apply basic styles to the text with HTML elements.
+<p>The following example creates bold text:</p>
+<pre class="prettyprint">elm_object_text_set(label, &quot;&lt;b&gt;This text is bold.&lt;/b&gt;&quot;);
+</pre>
+</li>
+</ul>
+
+
+ <h2 id="simple_list" name="simple_list">Using Simple Lists</h2>
+
+<p>A list is a scrollable container, whose children can be selected. For the list items, any Evas Object can be added as an icon, either at the beginning (third parameter) or the end (fourth parameter) of the item.</p>
+
+<p>The following example shows a list with 3 list items, where the second list item has an icon before the item text, and the third item has a button after the item text:</p>
+<pre class="prettyprint">Evas_Object* list;
+Evas_Object* icon;
+list = elm_list_add(ad-&gt;win);
+elm_list_item_append(list, &quot;Text item&quot;, NULL, NULL, NULL, NULL);
+icon = elm_icon_add(ad-&gt;win);
+elm_icon_standard_set(icon, &quot;chat&quot;);
+elm_list_item_append(list, &quot;Second item&quot;, icon, NULL, NULL, NULL);
+Evas_Object* button;
+button = elm_button_add();
+elm_object_text_set(button, &quot;Button&quot;);
+elm_list_item_append(list, &quot;Third item&quot;, NULL, button, NULL, NULL);
+elm_list_go(list);
+</pre>
+
+
+
+<p>To manage lists:</p>
+
+<ul>
+<li>Set the orientation.
+<p>By default, a list is set vertically. To display the list horizontally:</p>
+<pre class="prettyprint">elm_list_horizontal_set(list, EINA_TRUE);
+</pre>
+</li>
+<li>Set a mode for the list:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>: List does not set any size measures to inform the container how to resize it. If the list is not created as a &quot;resize object&quot;, its dimensions are zeroed. The list respects the container&#39;s geometry and if any of the list items do not fit into the container transverse axis, the list does not scroll in that direction.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_SCROLL</span> (default): Same as <span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>, with the exception that if any of the list items do not fit into the container transverse axis, the list still scrolls in that direction.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>: Sets a minimum size measure on the list object, so that containers can respect it (and resize themselves to fit the child properly). More specifically, a minimum size measure is set for its transverse axis, so that the largest item in that direction fits well. This feature is bound by the list object&#39;s maximum size measures that are set externally.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_EXPAND</span>: Besides setting a minimum size on the transverse axis, as in <span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>, this mode sets a minimum size on the longitudinal axis to reserve space for all its children to be visible at the same time. This feature is bound by the list object&#39;s maximum size measures that are set externally.</li>
+</ul>
+<pre class="prettyprint">elm_list_mode_set(list, ELM_LIST_COMPRESS);
+</pre>
+</li>
+<li>Manage the scroller. 
+<p>You can control whether scrollbars are displayed for the list using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> function. The second parameter is for the horizontal axis, the third one for the vertical axis.</p>
+
+<p>The available scroller policies are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span>: Scrollbar is hidden</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span>: Scrollbar is displayed</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span>: Scrollbar is  displayed only when needed and stays hidden at other times</li>
+</ul>
+
+<pre class="prettyprint">elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_ON);
+</pre>
+
+<p>Several effects can also be shown on a list. In the following example, the scroller is set to bounce at the end on either direction (the second parameter is for the horizontal axis, and the third one for the vertical axis):</p>
+<pre class="prettyprint">elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
+</pre>
+</li>
+<li>Manage events.
+<p>You can register and define various events for a list:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">activated</span>: User clicks or presses an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">selected</span>: User selects an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unselected</span>: User clears an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: User long-presses an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: User scrolls the list to the top edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: User scrolls the list to the bottom edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: User scrolls the list to the left edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: User scrolls the list to the right edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: Item is pressed and highlighted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: Item stops being pressed and highlighted.</li>
+</ul>
+</li>
+</ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<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>
diff --git a/org.tizen.ui.practices/html/native/efl/button_tutorial_wn.htm b/org.tizen.ui.practices/html/native/efl/button_tutorial_wn.htm
new file mode 100644
index 0000000..4ccf091
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/button_tutorial_wn.htm
@@ -0,0 +1,222 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Wearable Buttons</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#init">Initializing the Button Application</a></li>
+			<li><a href="#style">Using Button Styles</a></li>
+			<li><a href="#event">Managing Button Events</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Wearable Buttons</h1>
+
+  
+<p>This tutorial teaches the basics of the button component interactions.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+
+<h2 id="init" name="init">Initializing the Button Application</h2>
+	
+<p>This use case creates an application with a window entitled &quot;Button Basic Tutorial&quot;. The window consists of a box component, and a button is placed inside the box.</p>
+	
+<p>To create a typical elementary application:</p> 
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad) 
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;Evas_Object *btn1, *btn2, *btn3;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Button Basic Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;box = elm_box_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;box);
+
+&nbsp;&nbsp;&nbsp;create_button(ad-&gt;box);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;struct app_data ad = {0,};
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}</pre>
+	
+	
+ <h2 id="style" name="style">Using Button Styles</h2>
+
+<p>The basic application code is the same as in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
+
+<p>To use various button styles:</p>
+
+<ol><li><p>To create buttons using various styles:</p>
+
+<ul><li>Create a basic text-only button:
+
+<pre class="prettyprint">Evas_Object* button;
+
+button = elm_button_add(box);
+elm_object_text_set(button, &quot;Click me&quot;);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre></li>
+
+<li>Create a basic icon button (no text, just an icon):
+<pre class="prettyprint">Evas_Object* button2;
+Evas_Object* icon2;
+
+button2 = elm_button_add(box);
+icon2 = elm_icon_add(box);
+elm_image_file_set(icon2, &quot;icon.png&quot;, NULL);
+elm_object_content_set(button2, icon2);
+evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button2, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button2);
+evas_object_show(button2);
+</pre></li>
+
+<li>Create a button with both an icon and a text label:
+<pre class="prettyprint">Evas_Object* button3;
+Evas_Object* icon3;
+button3 = elm_button_add(box);
+icon3 = elm_icon_add(box);
+elm_image_file_set(icon3, &quot;icon.png&quot;, NULL);
+elm_object_content_set(button3, icon3);
+elm_object_text_set(button3, &quot;Press me&quot;);
+evas_object_size_hint_weight_set(button3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button3, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button3);
+evas_object_show(button3);
+</pre></li>
+</ul></li>
+<li><p>To disable a button so that it is not in use, only shown:</p>
+<pre class="prettyprint">elm_object_disabled_set(button2, EINA_TRUE);
+</pre></li></ol>
+
+ <h2 id="event" name="event">Managing Button Events</h2>
+<p>The Elementary buttons respond to user interactions with several events.</p>
+<p>To manage button events:</p>
+
+<ul> 
+<li>Handle click events:
+<p>The &quot;click&quot; event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.</p>
+<pre class="prettyprint">
+static void _button_click_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Clicked!&quot;);
+}
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_click_cb, NULL);
+</pre></li>
+
+<li>Handle press and unpress events:
+<p>The button can respond to the separate press and unpress events instead of the entire click event.</p>
+<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pressed!&quot;);
+}
+static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Unpressed!&quot;);
+}
+
+evas_object_smart_callback_add(button3, &quot;pressed&quot;, _button_press_cb, NULL);
+evas_object_smart_callback_add(button3, &quot;unpressed&quot;, _button_unpress_cb, NULL);
+</pre></li>
+
+<li>Handle repeated events:
+<p>The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.</p>
+<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;char buf[16];
+
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Repeat %d&quot;, count++);
+
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, buf);
+}
+
+elm_button_autorepeat_set(button3, EINA_TRUE);
+elm_button_autorepeat_initial_timeout_set(button3, 1.0);
+elm_button_autorepeat_gap_timeout_set(button3, 0.5);
+evas_object_smart_callback_add(button3, &quot;repeated&quot;, _button_repeat_cb, NULL);
+</pre></li></ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/circle_components_wn.htm b/org.tizen.ui.practices/html/native/efl/circle_components_wn.htm
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/native/efl/circle_components_wn.htm
rename to org.tizen.ui.practices/html/native/efl/circle_components_wn.htm
diff --git a/org.tizen.ui.practices/html/native/efl/component_background_mn.htm b/org.tizen.ui.practices/html/native/efl/component_background_mn.htm
new file mode 100644
index 0000000..43a1fb5
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_background_mn.htm
@@ -0,0 +1,141 @@
+<!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>Background</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Background Component</a></li>
+			<li><a href="#color">Changing the Color of the Background</a></li>
+			<li><a href="#image">Changing the Image of the Background</a></li>
+			<li><a href="#use">Using Overlay</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Background</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The background component can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to a tiled, centered, scaled, or stretched mode. There are no specific signals relative to background object.</p>
+				
+<p class="figure">Figure: Red color background</p>
+<p align="center"><img alt="Red color background" src="../../images/bg.png" /></p>
+
+<p class="figure">Figure: Background hierarchy</p>
+<p align="center"><img alt="Background hierarchy" src="../../images/bg_tree.png" /></p>
+
+<h2 id="add">Adding a Background Component</h2>
+
+<p>A background is created with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg, *parent;
+
+// Create a background
+bg = elm_bg_add(parent);
+</pre>
+
+<h2 id="color">Changing the Color of the Background</h2>
+
+<p>You can set the color of the background with the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function. The following example sets the background color to red.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Use red color for background
+elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
+</pre>
+
+<h2 id="image">Changing the Image of the Background</h2>
+
+<p>It is also possible to set an image or an Edje group as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function. The display mode of the image in the background can be chosen with <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span>, where the following modes are available:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the UI component&#39;s area.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile the background image at its original size.</li>
+</ul>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Set a file on the disk as a background image
+elm_bg_file_set(bg, &quot;/path/to/the/image&quot;, NULL);
+// Set an Edje group as a background image
+elm_bg_file_set(bg, &quot;/path/to/the/edje&quot;, &quot;edje_group&quot;);
+elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
+</pre>
+
+<h2 id="use">Using Overlay</h2>
+
+<p>An overlay can be set using the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(bg, &quot;overlay&quot;, over);
+</pre>
+
+<p>Here, the overlay is an Edje object that is displayed on top of the current background object.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_background_wn.htm b/org.tizen.ui.practices/html/native/efl/component_background_wn.htm
new file mode 100644
index 0000000..6c0b0c3
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_background_wn.htm
@@ -0,0 +1,143 @@
+<!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>Background</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Background Component</a></li>
+			<li><a href="#color">Changing the Color of the Background</a></li>
+			<li><a href="#image">Changing the Image of the Background</a></li>
+			<li><a href="#overlay">Using Overlay</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Background</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The background component can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to a tiled, centered, scaled, or stretched mode. There are no specific signals relative to background object.</p>
+
+				
+<p class="figure">Figure: Red color background</p>
+<p align="center"><img alt="Red color background" src="../../images/bg_wn.png" /></p>
+
+<p class="figure">Figure: Background hierarchy</p>
+<p align="center"><img alt="Background hierarchy" src="../../images/bg_tree.png" /></p>
+
+<h2 id="add">Adding a Background Component</h2>
+
+<p>A background is created with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg, *parent;
+
+// Create a background
+bg = elm_bg_add(parent);
+</pre>
+
+<h2 id="color">Changing the Color of the Background</h2>
+
+<p>You can set the color of the background with the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function. The following example sets the background color to red.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Use red color for background
+elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
+</pre>
+
+<h2 id="image">Changing the Image of the Background</h2>
+
+<p>It is also possible to set an image or an Edje group as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function. The display mode of the image in the background can be chosen with <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span>, where the following modes are available:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the UI component&#39;s area.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile the background image at its original size.</li>
+</ul>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Set a file on the disk as a background image
+elm_bg_file_set(bg, &quot;/path/to/the/image&quot;, NULL);
+// Set an Edje group as a background image
+elm_bg_file_set(bg, &quot;/path/to/the/edje&quot;, &quot;edje_group&quot;);
+elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
+</pre>
+
+<h2 id="overlay">Using Overlay</h2>
+
+<p>An overlay can be set using the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(bg, &quot;overlay&quot;, over);
+</pre>
+
+<p>Here, the overlay is an Edje object that is displayed on top of the current background object.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_button_mn.htm b/org.tizen.ui.practices/html/native/efl/component_button_mn.htm
new file mode 100644
index 0000000..70c8110
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_button_mn.htm
@@ -0,0 +1,199 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Button</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Button Component</a></li>
+			<li><a href="#icon">Adding an Icon Inside a Button</a></li>
+			<li><a href="#text">Adding Text Inside a Button</a></li>
+			<li><a href="#styles">Using Button Styles</a></li>
+			<li><a href="#callback">Using the Button Callbacks</a></li>
+			<li><a href="#autorepeat">Using the Autorepeat Feature</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Button</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.</p>
+
+<p class="figure">Figure: Button component</p>
+<p align="center"><img alt="Button component" src="../../images/button.png" /></p>
+
+<p class="figure">Figure: Button hierarchy</p>
+<p align="center"><img alt="Button hierarchy" src="../../images/button_tree.png" /></p>
+
+<h2 id="add">Adding a Button Component</h2>
+
+<p>Create a button.</p>
+<pre class="prettyprint">
+Evas_Object *button, *parent;
+
+// Create a button
+button = elm_button_add(parent);</pre>
+
+<h2 id="icon">Adding an Icon Inside a Button</h2>
+
+<p>The icon can be updated with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">icon</span> part name.</p>
+
+<pre class="prettyprint">
+Evas_Object *ic;
+ic = elm_icon_add(button);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(button, &quot;icon&quot;, ic);
+</pre>
+
+<h2 id="text">Adding Text Inside a Button</h2>
+
+<p>The label can be modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+
+<pre class="prettyprint">
+elm_object_text_set(button, &quot;Click me!&quot;);
+</pre>
+
+<h2 id="styles">Using Button Styles</h2>
+
+<p>Various styles can be used on the button. Tizen supports the following styles:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">icon_reorder</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">icon_expand_add</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">icon_expand_delete</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">circle</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">bottom</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">contacts</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">option</span></li>
+</ul>
+
+<p>You can see these themes in action on the following screenshot (in the above order).</p>
+
+<p class="figure">Figure: Button component</p>
+<p align="center"><img alt="Button component" src="../../images/button.png" /></p>
+
+<p>To change the style of the button, call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on the button object.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(button,&quot;icon_expand_add&quot;);
+</pre>
+
+<h2 id="callback">Using the Button Callbacks</h2>
+
+<p>The button emits the following signals:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicked the button (press/release).</li>
+    <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The user pressed the button without releasing it.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The user pressed the button.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The user released the button after pressing it.</li>
+</ul>
+
+<p>For all these signals the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>This is an example to register and define a callback function called by the clicked signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, data);
+}
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the button is clicked by the user
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Button clicked\n&quot;);
+}
+</pre>
+
+<h2 id="autorepeat">Using the Autorepeat Feature</h2>
+
+<p>The autorepeat feature is enabled by default. It consists of calling the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal when the user keeps the button pressed. This feature can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_set()</span> function. The autorepeat is configured with the following functions:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_initial_timeout_set()</span>: to set the initial timeout before the autorepeat event is generated</li>
+    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_gap_timeout_set()</span>: to set the interval between two autorepeat events</li>
+</ul>
+
+<p>Disable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_FALSE);
+</pre>
+
+<p>Enable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_TRUE);
+</pre>
+
+<p>Set the initial timeout to five seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_initial_timeout_set(button, 5.0);
+</pre>
+
+<p>Set the gap between two signals to 0.5 seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_gap_timeout_set(button, 0.5);
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_button_wn.htm b/org.tizen.ui.practices/html/native/efl/component_button_wn.htm
new file mode 100644
index 0000000..c203e9f
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_button_wn.htm
@@ -0,0 +1,199 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Button</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Button Component</a></li>
+			<li><a href="#icon">Adding an Icon Inside a Button</a></li>
+			<li><a href="#text">Adding Text Inside a Button</a></li>
+			<li><a href="#styles">Using Button Styles</a></li>
+			<li><a href="#callback">Using the Button Callbacks</a></li>
+			<li><a href="#autorepeat">Using the Autorepeat Feature</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Button</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.</p>
+
+
+<p class="figure">Figure: Button component</p>
+<p align="center"><img alt="Button component" src="../../images/button_wn.png" /></p>
+
+<p class="figure">Figure: Button hierarchy</p>
+<p align="center"><img alt="Button hierarchy" src="../../images/button_tree.png" /></p>
+
+<h2 id="add">Adding a Button Component</h2>
+
+<p>Create a button.</p>
+<pre class="prettyprint">
+Evas_Object *button, *parent;
+
+// Create a button
+button = elm_button_add(parent);</pre>
+
+<h2 id="icon">Adding an Icon Inside a Button</h2>
+
+<p>The icon can be updated with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">icon</span> part name.</p>
+
+<pre class="prettyprint">
+Evas_Object *ic;
+ic = elm_icon_add(button);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(button, &quot;icon&quot;, ic);</pre>
+
+<h2 id="text">Adding Text Inside a Button</h2>
+
+<p>The label can be modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+
+<pre class="prettyprint">
+elm_object_text_set(button, &quot;Click me!&quot;);
+</pre>
+
+<h2 id="styles">Using Button Styles</h2>
+
+<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>
+    <li><span style="font-family: Courier New,Courier,monospace">orange</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">red</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">nextdepth</span></li>
+</ul>
+<p>Tizen supports the following styles for 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>
+</ul>
+
+<p>To change the style of the button, call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on the button object.</p>
+
+<pre class="prettyprint">
+// Example for the rectangular UI component
+elm_object_style_set(button, &quot;nextdepth&quot;);
+
+// Example for the circular UI component
+elm_object_style_set(button, &quot;bottom&quot;);
+</pre>
+
+<h2 id="callback">Using the Button Callbacks</h2>
+
+<p>The button emits the following signals:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicked the button (press/release).</li>
+    <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The user pressed the button without releasing it.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The user pressed the button.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The user released the button after pressing it.</li>
+</ul>
+
+<p>For all these signals the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>This is an example to register and define a callback function called by the clicked signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, data);
+}
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the button is clicked by the user
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Button clicked\n&quot;);
+}
+</pre>
+
+<h2 id="autorepeat">Using the Autorepeat Feature</h2>
+
+<p>The autorepeat feature is enabled by default. It consists of calling the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal when the user keeps the button pressed. This feature can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_set()</span> function. The autorepeat is configured with the following functions:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_initial_timeout_set()</span>: to set the initial timeout before the autorepeat event is generated</li>
+    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_gap_timeout_set()</span>: to set the interval between two autorepeat events</li>
+</ul>
+
+<p>Disable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_FALSE);
+</pre>
+
+<p>Enable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_TRUE);
+</pre>
+
+<p>Set the initial timeout to five seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_initial_timeout_set(button, 5.0);
+</pre>
+
+<p>Set the gap between two signals to 0.5 seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_gap_timeout_set(button, 0.5);
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_check_mn.htm b/org.tizen.ui.practices/html/native/efl/component_check_mn.htm
new file mode 100644
index 0000000..f4eddcb
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_check_mn.htm
@@ -0,0 +1,182 @@
+<!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>Check</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#Adding">Adding a Check Component</a></li>
+			<li><a href="#Modifying">Modifying the Check Styles</a></li>
+			<li><a href="#Using_Check">Using the Check Component</a></li>
+			<li><a href="#Using_Check_Callbacks">Using the Check Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Check</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+
+<p>The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.</p>
+
+<p>This UI component inherits from the layout component. All layout functions can be used on the check component.</p>
+
+
+<p class="figure">Figure: Check component</p> 
+<p align="center"><img alt="Check component" src="../../images/check.png" /></p> 
+
+<p class="figure">Figure: Check hierarchy</p> 
+<p align="center"><img alt="Check hierarchy" src="../../images/check_tree.png" /></p> 
+
+<h2 id="Adding" name="Adding">Adding a Check Component</h2>
+
+<p>The following example shows how to create a check component.</p>
+
+<pre class="prettyprint">
+Evas_Object *check, *parent;
+check = elm_check_add(parent);
+</pre>
+
+<h2 id="Modifying" name="Modifying">Modifying the Check Styles</h2>
+
+<p>The check component style can be set with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function. The following styles are available:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">favorite</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">on</span> and <span style="font-family: Courier New,Courier,monospace;">off</span></li>
+</ul>
+
+<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">favorite</span> style on our check object.</p>
+<pre class="prettyprint">
+elm_object_style_set(check, &quot;favorite&quot;);
+</pre>
+
+<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function.</p>
+<pre class="prettyprint">
+char *style = elm_object_style_get(check);
+</pre>
+
+<h2 id="Using_Check" name="Using_Check">Using the Check Component</h2>
+
+<p>After having created a check object, it is possible to set its boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
+<pre class="prettyprint">
+elm_check_state_set(check, EINA_TRUE);
+</pre>
+
+<p>You can also retrieve the current value of the check object.</p>
+<pre class="prettyprint">
+Eina_Bool value = elm_check_state_get(check);
+</pre>
+
+<p>As with a radio object, an icon and a label can be set.</p>
+<pre class="prettyprint">
+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;home&quot;);
+
+// Set it to the check object 
+elm_object_part_content_set(check, &quot;icon&quot;, icon);
+
+// Set the check label 
+elm_object_text_set(check, &quot;Check label&quot;);
+</pre>
+
+<p>You can also modify the <span style="font-family: Courier New,Courier,monospace">on</span> and <span style="font-family: Courier New,Courier,monospace">off</span> labels.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(check, &quot;on&quot;, &quot;True&quot;);
+elm_object_part_text_set(check, &quot;off&quot;, &quot;False&quot;);
+</pre>
+
+<p>The get functions of the elementary object API can be used to retrieve the content set to the check object.</p>
+
+<pre class="prettyprint">
+// Get the current set text of the check label 
+char *text = elm_object_text_get(check);
+
+// Get the content set in the icon part 
+Evas_Object *icon = elm_object_part_content_get(check, &quot;icon&quot;);
+</pre>
+
+<h2 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h2>
+
+<p>When the value is changed by the user, the changed signal is emitted. The <span style="font-family: Courier New,Courier,monospace;">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on this signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(check, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the check value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_check_wn.htm b/org.tizen.ui.practices/html/native/efl/component_check_wn.htm
new file mode 100644
index 0000000..9a5f515
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_check_wn.htm
@@ -0,0 +1,174 @@
+<!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>Check</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#Adding">Adding a Check Component</a></li>
+			<li><a href="#Modifying">Modifying the Check Styles</a></li>
+			<li><a href="#Using_Check">Using the Check Component</a></li>
+			<li><a href="#Using_Check_Callbacks">Using the Check Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Check</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.</p>
+
+<p>This UI component inherits from the layout component. All layout functions can be used on the check component.</p>
+
+
+<p class="figure">Figure: Check component</p> 
+<p align="center"><img alt="Check component" src="../../images/check_wn.png" /></p> 
+
+<p class="figure">Figure: Check hierarchy</p> 
+<p align="center"><img alt="Check hierarchy" src="../../images/check_tree.png" /></p> 
+
+<h2 id="Adding" name="Adding">Adding a Check Component</h2>
+
+<p>The following example shows how to create a check component.</p>
+<pre class="prettyprint">
+Evas_Object *check, *parent;
+check = elm_check_add(parent);
+</pre>
+
+<h2 id="Modifying" name="Modifying">Modifying the Check Styles</h2>
+
+<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 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 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>
+	<li><span style="font-family: Courier New,Courier,monospace;">on and off</span></li>
+</ul>
+
+<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">on and off</span> style on our check object.</p>
+<pre class="prettyprint">
+elm_object_style_set(check, &quot;on and off&quot;);
+</pre>
+
+<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function.</p>
+<pre class="prettyprint">
+char *style = elm_object_style_get(check);
+</pre>
+
+<h2 id="Using_Check" name="Using_Check">Using the Check Component</h2>
+
+<p>After having created a check object, it is possible to set its boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
+<pre class="prettyprint">
+elm_check_state_set(check, EINA_TRUE);
+</pre>
+
+<p>You can also retrieve the current value of the check object.</p>
+<pre class="prettyprint">
+Eina_Bool value = elm_check_state_get(check);
+</pre>
+
+<p>As with a radio object, an icon can be set for the rectangular UI component.</p>
+<pre class="prettyprint">
+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;home&quot;);
+
+// Set it to the check object 
+elm_object_part_content_set(check, &quot;icon&quot;, icon);
+</pre>
+
+<p>The get functions of the elementary object API can be used to retrieve the content set to the check object.</p>
+<pre class="prettyprint">
+// Get the content set in the icon part 
+Evas_Object *icon = elm_object_part_content_get(check, &quot;icon&quot;);
+</pre>
+
+<h2 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h2>
+
+<p>When the value is changed by the user, the changed signal is emitted. The <span style="font-family: Courier New,Courier,monospace;">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(check, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the check value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_circ_datetime_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_datetime_wn.htm
new file mode 100644
index 0000000..90e1621
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_datetime_wn.htm
@@ -0,0 +1,116 @@
+<!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 Datetime</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Creating a Circle Datetime</a></li>
+			<li><a href="#event">Activating a Rotary Event</a></li>
+			<li><a href="#property">Using the Circle Object Property</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Circle Datetime</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The circle datetime extends <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by visualizing the selected field. If a rotary event is activated by <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span>, a circle datetime increases or decreases value of selected field in <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by the clockwise or counter clockwise rotary event.</p>
+
+<p class="figure">Figure: Circle Datetime</p> 
+<p align="center"><img alt="Circle Datetime" src="../../images/circle_datetime.png" /></p> 
+
+<h2 id="add">Creating a Circle Datetime</h2>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_datetime_add()</span> function to create a circle object. When creating a circle datetime, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> handle must be passed as an argument. If a circle surface is passed as an argument, a circle object connected with a circle surface is created, and it is rendered by the circle surface. When <span style="font-family: Courier New,Courier,monospace">NULL</span> is passed as a surface argument, the new circle object is managed and rendered by itself.</p>
+<pre class="prettyprint">
+Evas_Object *datetime;
+Evas_Object *circle_datetime;
+
+datetime = elm_datetime_add(parent);
+circle_datetime = eext_circle_object_datetime_add(datetime, surface);
+</pre>
+
+<h2 id="event">Activating a Rotary Event</h2>
+
+<p>You can activate and deactivate the circle datetime by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle datetime can receive the rotary event. Otherwise, the circle datetime cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
+</pre>
+
+<h2 id="property">Using the Circle Object Property</h2>
+
+<p>A circle datetime has the following styles:</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+<p>When created, the circle datetime has default style automatically.</p>
+
+<p>The circle datetime objects support the following circle object API calls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle datetime has the following item:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws a marker.</li>
+</ul>
+
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p> 
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__DATETIME__MODULE.html">Efl Extension Circle Datetime</a> API.</p>
+
+
+<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.practices/html/native/efl/component_circ_genlist_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_genlist_wn.htm
new file mode 100644
index 0000000..12a5ddf
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_genlist_wn.htm
@@ -0,0 +1,126 @@
+<!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 Genlist</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Creating a Circle Genlist</a></li>
+			<li><a href="#configure">Configuring the Circle Genlist</a></li>
+			<li><a href="#event">Activating a Rotary Event</a></li>
+			<li><a href="#property">Using the Circle Object Property</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Circle Genlist</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>Use the circle genlist to visualize and utilize the scroll effect for <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>. While <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> provides a scrollbar with straight horizontal and vertical movement, the circle genlist provides scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</p>
+
+<p class="figure">Figure: Circle Genlist</p> 
+<p align="center"><img alt="Circle Genlist" src="../../images/circle_genlist.png" /></p> 
+
+<h2 id="add">Creating a Circle Genlist</h2>
+
+<p>A genlist and a surface are necessary when creating the circle genlist. The circle genlist is added with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *genlist, *circle_genlist, *parent;
+
+genlist = elm_genlist_add(parent);
+circle_genlist = eext_circle_object_genlist_add(genlist, surface);
+</pre>
+
+<h2 id="configure">Configuring the Circle Genlist</h2>
+
+<p>You can set the circle genlist scroller policy by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_scroller_policy_set()</span> function.</p>
+<pre class="prettyprint">
+eext_circle_object_genlist_scroller_policy_set(circle_genlist, 
+&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;ELM_SCROLLER_POLICY_OFF, 
+&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;ELM_SCROLLER_POLICY_ON);
+</pre>
+<p>This sets the scrollbar visibility policy of a given scroller. <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden. <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span> turns the scrollbar on all the time, and <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> turns it off. This applies to the horizontal and vertical scrollbars respectively.</p>
+<p>The following enum values are available for circle genlist.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span></li>
+</ul>
+
+<h2 id="event">Activating a Rotary Event</h2>
+
+<p>You can activate and deactivate the circle genlist by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle genlist can receive the rotary event. Otherwise, the circle genlist cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
+</pre>
+
+<h2 id="property">Using the Circle Object Property</h2>
+
+<p>Circle genlist objects support the following circle object API calls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle genlist has the following item:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item. It draws vertical scroll bar.</li>
+<li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroll background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__GENLIST__MODULE.html">Efl Extension Circle Genlist</a> API.</p>
+
+
+<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.practices/html/native/efl/component_circ_object_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_object_wn.htm
new file mode 100644
index 0000000..6132405
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_object_wn.htm
@@ -0,0 +1,265 @@
+<!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 Object</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Creating a Circle Object</a></li>
+			<li><a href="#line">Setting the Line Width</a></li>
+			<li><a href="#angle">Setting the Angle</a></li>
+			<li><a href="#offset">Setting the Angle Offset</a></li>
+			<li><a href="#minmax">Setting the Minimum and Maximum Angle</a></li>
+			<li><a href="#value">Setting the Minimum and Maximum Value</a></li>
+			<li><a href="#set_value">Setting the Value</a></li>
+			<li><a href="#color">Setting the Color</a></li>
+			<li><a href="#radius">Setting the Radius</a></li>
+			<li><a href="#disable">Disabling a Circle Object</a></li>			
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Circle Object</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>A circle object extends elementary components in a form of circular design. Sometimes, a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.</p>
+
+<h2 id="add">Creating a Circle Object</h2>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_add()</span> function to create a circle object. When creating a circle object, you can choose whether the circle object is rendered by itself or by the circle surface. If the circle surface is passed as an argument, a circle object connected with circle surface is created, and it is rendered by the circle surface.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+</pre>
+
+<p>When <span style="font-family: Courier New,Courier,monospace">NULL</span> is passed as a surface argument, the new circle object is managed and rendered by itself. Here, a circle object without a circle surface is created and showed in a size of 360 x 360.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, NULL);
+evas_object_size_hint_min_set(circle_obj, 360, 360);
+evas_object_show(circle_obj);
+</pre>
+
+<h2 id="line">Setting the Line Width</h2>
+
+<p>You can set the line width of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function. Here, circle object with a surface is created and its line width set to 20. You can get the current line width of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_line_width_set(circle_obj, 20);
+</pre>
+
+<p>You can set the line width of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_set()</span> function. If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function. Similar to the above example, a circle object with a surface is created and its line width is set to 20. You can get the current line width of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_get()</span> function.</p>
+<pre class="prettyprint">Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_line_width_set(circle_obj, &quot;default&quot;, 20);
+</pre>
+
+<h2 id="angle">Setting the Angle</h2>
+
+<p>You can set the angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function. Here, circle object with surface is created and its angle set to a 45.0 degree angle. You can get the current angle of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_set(circle_obj, 45.0);
+</pre>
+
+<p>You can set the angle of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function. Similar to the above example, a circle object with surface is created and its angle is set to a 45.0 degree angle. You can get the current angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_set(circle_obj, &quot;default&quot;, 45.0);
+</pre>
+
+<h2 id="offset">Setting the Angle Offset</h2>
+
+<p>You can set the angle offset of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function. Here, a circle object with a 45.0 degree angle is created and its angle offset set to 30.0 degrees. As a result, the circle object has an arch of 45.0 degree angle line starting from 30.0 degrees to 75.0 degrees. You can get the current angle offset of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_set(circle_obj, 45.0);
+eext_circle_object_angle_offset_set(circle_obj, 30.0);
+</pre>
+
+<p>You can set the angle offset of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function. The following code works the same way as in the above example. You can get the current angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_set(circle_obj, &quot;default&quot;, 45.0); 
+eext_circle_object_item_angle_offset_set(circle_obj, &quot;default&quot;, 30.0);
+</pre>
+
+<h2 id="minmax">Setting the Minimum and Maximum Angle</h2>
+
+<p>You can set the minimum and maximum angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function. Here, a circle object with a surface is created and its minimum angle set to 0.0 degrees and maximum angle to 90.0 degrees. You can get the current minimum and maximum angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_min_max_set(circle_obj, 0.0, 90.0);
+</pre>
+
+<p>You can set the minimum and maximum angles of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function. Similar to the above example, a circle object with a minimum and maximum angles of 0.0 and 90.0 is created. You can get the current minimum and maximum angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_min_max_set(circle_obj, &quot;default&quot;, 0.0, 90.0);
+</pre> 
+
+<h2 id="value">Setting the Minimum and Maximum Value</h2>
+
+<p>You can set the minimum and maximum values of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. Here, a circle object with a surface is created and its minimum value is set to 0.0 degrees and maximum value to 10.0 degrees. You can get the current minimum and maximum value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_value_min_max_set(circle_obj, 0.0, 10.0);
+</pre>
+
+<p>You can set the value of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. Similar to the above example, a circle object with a minimum and maximum value of 0.0 to 10.0 degrees is created. You can get the current minimum and maximum values of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_min_max_get()</span> function.</p>
+<pre class="prettyprint"> 
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_min_max_set(circle_obj, &quot;default&quot;, 0.0, 10.0);
+</pre>
+
+<h2 id="set_value">Setting the Value</h2>
+
+<p>You can set the value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function. Here, a circle object with a surface is created and its value set to 5.0. You can get the current value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_value_set(circle_obj, 5.0);
+</pre>
+
+<p>You can set the value of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function. Similar to the above example, a circle object with a surface is created and its value is set to 5.0 degree angle. You can get the current value of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_set(circle_obj, &quot;default&quot;, 5.0);
+</pre>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The value cannot be lower than the minimum value or higher than the maximum value.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<h2 id="color">Setting the Color</h2>
+
+<p>You can set the color of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function. To set the color, red, green, blue, and alpha values in range from 0 to 255 must  be passed. Here, a circle object with a surface is created and its color set to blue. You can get the current color of circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_color_set(circle_obj, 255, 0, 0, 255);
+</pre>
+
+<p>You can set the color of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function. Similar to the above example, a circle object with a surface is created and its color is set to red. You can get the current color of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_set(circle_obj, &quot;default&quot;, 255, 0, 0, 255);
+</pre>
+
+<h2 id="radius">Setting the Radius</h2> 
+
+<p>You can set the radius of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function. Here, a circle object with radius of 50.0 is created. You can get the current radius of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_radius_set(circle_obj, 50.0);
+</pre>
+
+<p>You can set the radius of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function. Similar to the above example, a circle object with a radius of 50.0 is created. You can get the current radius of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_radius_set(circle_obj, &quot;default&quot;, 50.0);
+</pre>
+
+<h2 id="disable">Disabling a Circle Object</h2>
+
+<p>You can disable the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function. Here, a circle object is disabled. You can get the current disabled status of circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_disabled_set(circle_obj, EINA_TRUE);
+</pre>
+
+<p>You can enable a disabled circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function with <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> argument.</p>
+<pre class="prettyprint">
+eext_circle_object_disabled_set(circle_obj, EINA_FALSE);
+</pre>
+
+
+
+<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.practices/html/native/efl/component_circ_option_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_option_wn.htm
new file mode 100644
index 0000000..a2730be
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_option_wn.htm
@@ -0,0 +1,174 @@
+<!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>More Option</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Eext More Option Object</a></li>
+			<li><a href="#event">Activating a Rotary Event</a></li>
+			<li><a href="#configure">Configuring the More Option</a></li>
+			<li><a href="#item">Adding a More Option Item</a></li>
+			<li><a href="#callback">Using the More Option Callbacks</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>More Option</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The more option is one of the wearable circular UI components. The more option handle can use the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> APIs, because the more option handle is an <span style="font-family: Courier New,Courier,monospace">elm_layout</span> object.</p>
+
+<p>The basic view of the more option is shown on the left in the following figure. It simply contains a cue button. When the cue button is clicked, the view including the selector appears from the cue location (shown on the right in the figure).</p>
+
+<p>The selector can receive a rotary event, and can emit events when each item and selector are clicked. When the back motion is done in the selector view, the selector view disappears.</p>
+
+<p class="figure">Figure: More Option</p> 
+<p align="center"><img alt="More Option" src="../../images/more_option.png" /></p> 
+
+<h2 id="add">Adding an Eext More Option Object</h2>
+<p>To create a more option object, use the <span style="font-family: Courier New,Courier,monospace">eext_more_option_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *more_option = NULL;
+more_option = eext_more_option_add(parent);
+</pre>
+
+<h2 id="event">Activating a Rotary Event</h2>
+
+<p>You do not need to call the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function for the more option object, since it is called automatically according to the <span style="font-family: Courier New,Courier,monospace">elm_panel</span> state.</p>
+
+<h2 id="configure">Configuring the More Option</h2>
+
+<p>To configure the direction of the cue button, use the direction state, which has the following values:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">EEXT_MORE_OPTION_DIRECTION_TOP</span>: Cue button is at the top.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EEXT_MORE_OPTION_DIRECTION_BOTTOM</span>: Cue button is at the bottom.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EEXT_MORE_OPTION_DIRECTION_LEFT</span>: Cue button is on the left.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EEXT_MORE_OPTION_DIRECTION_RIGHT</span>: Cue button is on the right (default value).</li></ul>
+
+<p>To set the cue button direction for the more option:</p>
+<pre class="prettyprint">
+eext_more_option_direction_set(more_option, EEXT_MORE_OPTION_DIRECTION_RIGHT);
+</pre>
+
+<p>The following table shows the customizable more option parts.</p>
+
+<table>
+<caption>Table: Customizable more option parts</caption>
+<tbody>
+<tr>
+ <th>Part</th>
+ <th>Setting function</th>
+ <th>View</th>
+</tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">selector,main_text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_more_option_item_part_text_set()</span>
+ <p><span style="font-family: Courier New,Courier,monospace">eext_more_option_item_domain_translatable_part_text_set()</span></p></td>
+ <td><p align="center"><img alt="main_text" src="../../images/more_option_main.png" /></p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">selector,sub_text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_more_option_item_part_text_set()</span>
+ <p><span style="font-family: Courier New,Courier,monospace">eext_more_option_item_domain_translatable_part_text_set()</span></p></td>
+ <td><p align="center"><img alt="sub_text" src="../../images/more_option_sub.png" /></p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">item,icon</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_more_option_item_part_content_set()</span></td>
+ <td><p align="center"><img alt="Item content" src="../../images/more_option_item.png" /></p></td>
+ </tr>
+ </tbody></table>
+
+<h2 id="item">Adding a More Option Item</h2>
+
+<p>To add an item, append it with the <span style="font-family: Courier New,Courier,monospace">eext_more_option_item_append()</span> function and set its attributes:</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *img = NULL;
+&nbsp;&nbsp;&nbsp;// Append item
+&nbsp;&nbsp;&nbsp;Eext_Object_Item *item  = eext_more_option_item_append(parent);
+&nbsp;&nbsp;&nbsp;// Set the text in the rotary_selector
+&nbsp;&nbsp;&nbsp;eext_more_option_item_part_text_set(item, &quot;selector,main_text&quot;, &quot;test1&quot;);
+&nbsp;&nbsp;&nbsp;eext_more_option_item_part_text_set(item, &quot;selector,sub_text&quot;, &quot;test1&quot;);
+&nbsp;&nbsp;&nbsp;// Set the content icon
+&nbsp;&nbsp;&nbsp;img = elm_image_add(parent);
+&nbsp;&nbsp;&nbsp;eext_more_option_item_part_content_set(item, &quot;item,icon&quot;, img);
+&nbsp;&nbsp;&nbsp;elm_image_file_set(img, &quot;/music_controller_btn_play.png&quot;, NULL);
+}
+</pre>
+
+<h2 id="callback">Using the More Option Callbacks</h2>
+<p>The more option emits the following signals:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">item,selected</span>: User selected the item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,clicked</span>: User selected the already selected item again or selected a selector.</li>
+<li><span style="font-family: Courier New,Courier,monospace">more,option,opened</span>: Layout with the rotary selector is shown..</li>
+<li><span style="font-family: Courier New,Courier,monospace">more,option,closed</span>: Layout with the rotary selector is hidden.</li></ul>
+
+<p>For all these signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback function called by the clicked signal:</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(more_option, “more,option,opened”, _opened_cb, data);
+}
+
+// Callback function for the &quot;more,option,opened&quot; signal
+// This callback is called when the more_option is seen
+void 
+_opened_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Open the More Option\n&quot;);
+}</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.practices/html/native/efl/component_circ_progressbar_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_progressbar_wn.htm
new file mode 100644
index 0000000..41a7b9f
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_progressbar_wn.htm
@@ -0,0 +1,117 @@
+<!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 Progressbar</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Creating a Circle Progressbar</a></li>
+			<li><a href="#property">Using the Circle Object Property</a></li>
+			<li><a href="#configure">Configuring the Circle Progressbar</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Circle Progressbar</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.</p>
+
+<p class="figure">Figure: Circle Progressbar</p> 
+<p align="center"><img alt="Circle Progressbar" src="../../images/circle_progressbar.png" /></p> 
+
+<h2 id="add">Creating a Circle Progressbar</h2>
+
+<p>You can create the circle progressbar by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_progressbar_add()</span> function. When creating the circle progressbar, a surface is necessary to render on the surface.</p>
+<pre class="prettyprint">
+Evas_Object *circle_progressbar, *parent;
+circle_progressbar = eext_circle_object_progressbar_add(parent, surface);
+</pre>
+
+<h2 id="property">Using the Circle Object Property</h2>
+<p>Circle progressbar supports the following circle object API calls:</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle progressbar has the following items:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the progressbar.</li>
+<li><span style="font-family: Courier New,Courier,monospace">bg</span>: Progress bar background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__PROGRESSBAR__MODULE.html">Efl Extension Circle Progressbar</a> API.</p>
+
+<h2 id="configure">Configuring the Circle Progressbar</h2>
+
+<p>Before using the circle progressbar, its minimum and maximum values are set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. The current value is set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span>.</p>
+<p>Here, the minimum value is set to 0.0, the maximum value to 100.0, and the current value to 3.0.</p>
+<pre class="prettyprint">
+eext_circle_object_value_min_max_set(circle_progressbar, 0.0, 100.0);
+eext_circle_object_value_set(circle_progressbar, 3.0);
+</pre>
+
+<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.practices/html/native/efl/component_circ_rotary_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_rotary_wn.htm
new file mode 100644
index 0000000..3f2d039
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_rotary_wn.htm
@@ -0,0 +1,239 @@
+<!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>Rotary Selector</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Creating a Rotary Selector</a></li>
+			<li><a href="#event">Activating a Rotary Event</a></li>
+			<li><a href="#configure">Configuring the Selector and Item State</a></li>
+			<li><a href="#text">Setting the Rotary Selector Item Text</a></li>
+			<li><a href="#item">Adding a Rotary Selector Item</a></li>
+			<li><a href="#callback">Using the Rotary Selector Callbacks</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Rotary Selector</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The rotary selector is optimized for wearable circular devices. It is composed of a selector and multiple items surrounding the selector. The rotary selector can be used to select an item or to move to the next or prev page through a rotary event.</p>
+
+<p>The rotary selector handle can use the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> APIs, because the rotary selector handle is an <span style="font-family: Courier New,Courier,monospace">elm_layout</span> object.</p>
+
+<p class="figure">Figure: Rotary Selector</p> 
+<p align="center"><img alt="Rotary Selector" src="../../images/rotary_selector.png" /></p> 
+ 
+<h2 id="add">Creating a Rotary Selector</h2>
+
+<p>To create a rotary selector, use the <span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *rotary_selector, *parent;
+
+Rotary_selector = eext_rotary_selector_add(parent);
+</pre>
+
+<h2 id="event">Activating a Rotary Event</h2>
+<p>The rotary selector can be activated and deactivated by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is set to <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the created rotary selector can also receive a rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(rotary_selector, EINA_TRUE);
+</pre>
+
+<h2 id="configure">Configuring the Selector and Item State</h2>
+<p>You can configure the selector and item states:</p>
+
+<ul><li>The available selector states are:
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">EEXT_ROTARY_SELECTOR_SELECTOR_STATE_NORMAL</span>: Selector is in a normal state.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EEXT_ROTARY_SELECTOR_SELECTOR_STATE_PRESSED</span>: Selector is in a pressed state.</li></ul>
+
+<p>For example, to set the selector color for a normal state selector:</p>
+<pre class="prettyprint">
+eext_rotary_selector_part_color_set(selector, &quot;selector,bg_image&quot;, 
+&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;EEXT_ROTARY_SELECTOR_SELECTOR_STATE_NORMAL, 
+&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;100, 100, 100, 255);
+</pre></li>
+<li>The available selector item states are:
+<ul><li><span style="font-family: Courier New,Courier,monospace">EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL</span>: Item is in a normal state.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EEXT_ROTARY_SELECTOR_ITEM_STATE_PRESSED</span>: Item is in a pressed state.</li></ul>
+
+<p>For example, to set the item color for a normal state item:</p>
+<pre class="prettyprint">
+eext_rotary_selector_item_part_color_set(item, &quot;item,icon&quot;, 
+&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;EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL, 
+&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;100, 100, 100, 255);
+</pre></li></ul>
+
+<p>The following table shows the customizable rotary selector parts.</p>
+
+<table>
+<caption>Table: Customizable rotary selector parts</caption>
+<tbody>
+<tr>
+ <th>Part</th>
+ <th>Setting function</th>
+ <th>View</th>
+</tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">selector,main_text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_color_set()</span></td>
+ <td><p align="center"><img alt="main_text" src="../../images/rotary_selector_main.png" /></p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">selector,sub_text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_color_set()</span></td>
+ <td><p align="center"><img alt="sub_text" src="../../images/rotary_selector_sub.png" /></p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">item,icon</span>
+ <p><span style="font-family: Courier New,Courier,monospace">item,bg_image</span></p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_content_set()</span>
+ <p><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_color_set()</span></p></td>
+ <td><p align="center"><img alt="Item content" src="../../images/rotary_selector_item.png" /></p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">selector,icon</span>
+  <p><span style="font-family: Courier New,Courier,monospace">selector,content</span></p>
+   <p><span style="font-family: Courier New,Courier,monospace">selector,bg_image</span></p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_part_content_set()</span>
+  <p><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_part_color_set()</span></p>
+   <p><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_part_content_get()</span></p></td>
+ <td><p align="center"><img alt="Selector content" src="../../images/rotary_selector_selector.png" /></p></td>
+ </tr> 
+ </tbody></table>
+
+<h2 id="text">Setting the Rotary Selector Item Text</h2>
+
+<p>The following table shows the functions you can use to set the main and sub text of an item. The text is displayed in the selector when the item is selected.</p>
+
+<table>
+<caption>Table: Item texts</caption>
+<tbody>
+<tr>
+ <th>Text</th>
+ <th>Setting function</th>
+ <th>View</th>
+</tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">selector,main_text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_text_set()</span>
+ <p><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_domain_translatable_part_text_set()</span></p></td>
+ <td><p align="center"><img alt="main_text" src="../../images/rotary_selector_main_text.png" /></p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">selector,sub_text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_part_text_set()</span>
+ <p><span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_domain_translatable_part_text_set()</span></p></td>
+ <td><p align="center"><img alt="sub_text" src="../../images/rotary_selector_sub_text.png" /></p></td>
+ </tr>
+ </tbody></table>
+
+<h2 id="item">Adding a Rotary Selector Item</h2>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">A maximum of 11 items can be displayed in one page of the rotary selector. Any exceeding items are arranged in the next page.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>To add an item, append it with the <span style="font-family: Courier New,Courier,monospace">eext_rotary_selector_item_append()</span> function and set its attributes:</p>
+
+<pre class="prettyprint">
+Eext_Object_Item * item;
+Evas_Object *image;
+
+// Append item
+item = eext_rotary_selector_item_append(rotary_selector);
+// Set item icon
+image = elm_image_add(rotary_selector);
+elm_image_file_set(image, &quot;music_controller_btn_play.png&quot;, NULL);
+
+eext_rotary_selector_item_part_content_set(item, &quot;item,icon&quot;, 
+&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;EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL, image);
+// Set selector main text
+eext_rotary_selector_item_part_text_set(item, &quot;selector,main_text&quot;, &quot;Options&quot;);
+
+// Set selector content icon
+image = elm_image_add(rotary_selector);
+elm_image_file_set(image, &quot;music_controller_btn.png&quot;, NULL);
+eext_rotary_selector_item_part_content_set(item, &quot;selector,icon&quot;, 
+&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;EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL, image);
+</pre>
+
+<h2 id="callback">Using the Rotary Selector Callbacks</h2>
+<p>The rotary selector emits the following signals:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">item,selected</span>: User selected the item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,clicked</span>: User clicked the item.</li></ul>
+
+<p>For both signals, the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>To register and define a callback function called by the clicked signal</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(rotary_selector, &quot;item,clicked&quot;, item_clicked_cb, data);
+}
+
+// Callback function for the &quot;item,clicked&quot; signal
+// This callback is called when the item is clicked by the user
+void 
+item_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item clicked\n&quot;);
+}
+</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.practices/html/native/efl/component_circ_scroller_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_scroller_wn.htm
new file mode 100644
index 0000000..68e3470
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_scroller_wn.htm
@@ -0,0 +1,133 @@
+<!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 Scroller</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Creating a Circle Scroller</a></li>
+			<li><a href="#event">Activating a Rotary Event</a></li>
+			<li><a href="#property">Using the Circle Object Property</a></li>
+			<li><a href="#configure">Configuring the Circle Scroller</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Circle Scroller</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar. It wraps the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> internally only to draw a circular scroll bar to the edge of the circular screen. This means you can use <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> callbacks and APIs excluding <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_get()</span> APIs.</p>
+
+<p class="figure">Figure: Circle Scroller</p> 
+<p align="center"><img alt="Circle Scroller" src="../../images/circle_scroller.png" /></p> 
+
+<h2 id="add">Creating a Circle Scroller</h2> 
+
+<p>To create a circle scroller, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_add()</span> function. <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> has to be passed by the first parameter of this function.</p>
+<pre class="prettyprint">
+Evas_Object *scroller;
+Evas_Object *circle_scroller;
+
+scroller = elm_scroller_add(parent);
+circle_scroller = eext_circle_object_scroller_add(scroller, surface);
+</pre>
+
+<h2 id="event">Activating a Rotary Event</h2>
+
+<p>You can activate and deactivate the circle scroller by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle scroller can receive the rotary event. Otherwise, the circle scroller cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
+</pre>
+
+<h2 id="property">Using the Circle Object Property</h2>
+
+<p>A circle scroller has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+<p>When created, the circle scroller has default style automatically.</p>
+
+<p>Circle scroller objects support the following circle object API calls:</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle slider has the following items:</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the vertical scroll bar.</li>
+	<li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroll background circle item.</li>
+	<li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bar</span>: Horizontal scroll bar circle item.</li>
+	<li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bg</span> : Horizontal scroll background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../..//org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SCROLLER__MODULE.html">Efl Extension Circle Scroller</a> API.</p>
+
+<h2 id="configure">Configuring the Circle Scroller</h2>
+
+<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> APIs to configure a circle scroller, except <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_get()</span> APIs.</p>
+<p>Instead of excluded APIs, <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_get()</span> functions are provided for the circle scroller.</p>
+<p>A policy parameter has the following value.</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span>: indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden.</li>
+	<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span>: Turns the scrollbar on all the time.</li>
+	<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span>: Turns the scrollbar off. This applies to the horizontal and vertical scrollbars respectively.</li>
+</ul>
+<p>The following example shows how to set the scroll bar visibility policy to <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> for horizontal scroll bar and <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> for vertical scroll bar.</p>
+<pre class="prettyprint">
+eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_OFF);
+</pre>
+
+<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.practices/html/native/efl/component_circ_slider_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_slider_wn.htm
new file mode 100644
index 0000000..eaa78d2
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_slider_wn.htm
@@ -0,0 +1,164 @@
+<!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 Slider</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Eext Slider Object</a></li>
+			<li><a href="#event">Activating a Rotary Event</a></li>
+			<li><a href="#property">Using the Circle Slider Property</a></li>
+			<li><a href="#configure">Configuring the Circle Slider</a></li>
+			<li><a href="#callback">Using Circle Slider Callbacks</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Circle Slider</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span>, but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in a circular design.</p>
+
+<p class="figure">Figure: Circle Slider</p> 
+<p align="center"><img alt="Circle Slider" src="../../images/circle_slider.png" /></p> 
+ 
+<h2 id="add">Adding an Eext Slider Object</h2>
+
+<p>To create a circle slider, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_slider = NULL;
+circle_slider = eext_circle_object_slider_add(parent, surface);
+</pre>
+
+<h2 id="event">Activating a Rotary Event</h2>
+
+<p>You can activate or deactivate the circle slider by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle slider can receive the rotary event. Otherwise, the circle slider cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_slider, EINA_TRUE);
+</pre>
+
+<h2 id="property">Using the Circle Slider Property</h2>
+
+<p>A circle slider has the following styles:</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+
+<p>When created, the circle slider has default style automatically.</p>
+<p>Circle slider objects support the following circle object API calls:</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle slider has the following items:</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item, It draws slider bar.</li>
+	<li><span style="font-family: Courier New,Courier,monospace">bg</span>: Background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SLIDER__MODULE.html">Efl Extension Circle Slider</a> API.</p>
+
+<h2 id="configure">Configuring the Circle Slider</h2>
+
+<p>The circle slider step value is used when the rotary event increases or decreases the circle slider value. It can be set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_step_set()</span> function.</p>
+<p>Here, the step value is set to 0.5.</p>
+<pre class="prettyprint">
+eext_circle_object_slider_step_set(circle_slider, 0.5);
+</pre>
+<p>Before using the circle slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span>. The current value is set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span>.</p>
+<p>Here, the minimum value is set to 0.0, the maximum value to 15.0, and the current value to 3.0.</p>
+<pre class="prettyprint">
+eext_circle_object_value_min_max_set(circle_slider, 0.0, 15.0);
+eext_circle_object_value_set(circle_slider, 3.0);
+</pre>
+<p>You can retrieve the current value of the circle slider with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
+<pre class="prettyprint">
+double value = eext_circle_object_value_get(circle_slider);
+</pre>
+
+<h2 id="callback">Using Circle Slider Callbacks</h2>
+
+<p>The circle slider emits the following signal:</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace">value,changed</span>: The rotary event changes the circle slider value.</li>
+</ul>
+<p>For this signal, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>This is how to register a callback on the <span style="font-family: Courier New,Courier,monospace">value,changed</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, &quot;value,changed&quot;, _value_changed_cb, data);
+}
+
+// Callback function for the &quot;value,changed&quot; signal
+// This callback is called when a value of the circle slider is changed
+static void
+_value_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Circle slider value changed. \n&quot;);
+}
+</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.practices/html/native/efl/component_circ_spinner_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_spinner_wn.htm
new file mode 100644
index 0000000..f7d2cf4
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_spinner_wn.htm
@@ -0,0 +1,117 @@
+<!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 Spinner</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Eext Spinner Object</a></li>
+			<li><a href="#event">Activating a Rotary Event</a></li>
+			<li><a href="#configure">Configuring the Circle Spinner</a></li>
+			<li><a href="#property">Using the Circle Spinner Properties</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Circle Spinner</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+ 
+<p>The circle spinner extends <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> by visualizing the value of <span style="font-family: Courier New,Courier,monospace">elm_spinner</span>. If a rotary event is activated by the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function, the circle spinner increases or decreases the value of <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> through a clockwise or counter-clockwise rotary event.</p>
+
+<p class="figure">Figure: Circle Spinner</p> 
+<p align="center"><img alt="Circle Spinner" src="../../images/circle_spinner.png" /></p> 
+
+<h2 id="add">Adding an Eext Spinner Object</h2>
+
+<p>To create a circle spinner:</p>
+<ol><li>Create an <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> object.</li>
+<li>Set the object style as &quot;circle&quot;.</li>
+<li>Create an <span style="font-family: Courier New,Courier,monospace">eext_spinner</span> object using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_spinner_add()</span> function.</li></ol>
+
+<pre class="prettyprint">
+Evas_Object *spinner, *circle_spinner;
+spinner = elm_spinner_add(parent);
+elm_object_style_set(spinner, &quot;circle&quot;);
+circle_spinner = eext_circle_object_spinner_add(spinner, surface);
+</pre>
+
+<h2 id="event">Activating a Rotary Event</h2>
+
+<p>You can activate and deactivate the circle spinner by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If its second parameter is set to <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle spinner can receive rotary events.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_spinner, EINA_TRUE);
+</pre>
+
+<h2 id="configure">Configuring the Circle Spinner</h2>
+
+<p>The circle spinner shows the <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> value through a marker, which indicates the value in the round. It has internal minimum and maximum spinner values, and calculates the min and max angles in order to draw the marker. The current value of the circle spinner is calculated internally as well.</p>
+
+<p>To handle the circle spinner value, use the <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> functions. They are synchronized automatically with the user values. You can also use the <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> callback functions.</p>
+
+<p>If you want to customize the angle offset of the marker (not to follow the internally-calculated system value), use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_spinner_angle_set()</span> function. For example, to set the circle spinner angle value with 2.0:</p>
+<pre class="prettyprint">
+eext_circle_object_spinner_angle_set(circle_spinner, 2.0);
+</pre>
+
+<p>The formula for calculating the default angle offset of the circle spinner is:</p>
+<pre class="prettyprint">(360/ max - min) * step</pre>
+<p>After calling the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_spinner_angle_set()</span> function, the calculation formula for the angle offset is changed:</p>
+<pre class="prettyprint">(360/ max - min) * step * 2.0</pre>
+
+<p>You can also use the same above function to give the angle offset per each rotary callback.</p>
+
+<h2 id="property">Using the Circle Spinner Properties</h2>
+
+<p>A circle spinner has the <span style="font-family: Courier New,Courier,monospace">default</span> style, which is applied automatically. It also has a <span style="font-family: Courier New,Courier,monospace">default</span> item, which draws a marker.</p>
+
+<p>You can set and get various circle spinner properties with circle object functions, such as <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span>, <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span>, <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span>, and <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span>.</p>
+  
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(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.practices/html/native/efl/component_circ_surface_wn.htm b/org.tizen.ui.practices/html/native/efl/component_circ_surface_wn.htm
new file mode 100644
index 0000000..ea82de6
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_circ_surface_wn.htm
@@ -0,0 +1,136 @@
+<!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 Surface</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Creating a Circle Surface</a></li>
+			<li><a href="#add_object">Adding Circle Objects to the Circle Surface</a></li>
+			<li><a href="#delete">Deleting the Circle Surface</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Circle Surface</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered. When one of circle objects is set as visible, the surface renders the circle object and hides the others.</p> 
+
+<h2 id="add">Creating a Circle Surface</h2>
+
+<p>To create a new circle surface:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *conformant;
+
+conformant = elm_conformant_add(parent);
+surface = eext_circle_surface_conformant_add(conformant);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_conformant_add()</span> function creates a circle surface in the conformant layer. If you want to create a circle surface in the layout layer, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_layout_add()</span> function:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *layout;
+
+layout = elm_layout_add(parent);
+surface = eext_circle_surface_layout_add(layout); 
+</pre>
+
+<p>If you want to create a circle surface in the naviframe layer, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_naviframe_add()</span> function:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *naviframe;
+
+naviframe = elm_naviframe_add(parent);
+surface = eext_circle_surface_naviframe_add(naviframe); 
+</pre>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">A circle surface is a non-graphical object. It adds no graphics to or around the objects it holds.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<h2 id="add_object">Adding Circle Objects to the Circle Surface</h2>
+
+<p>You can add any circle object to a circle surface. The following example shows how to create an <span style="font-family: Courier New,Courier,monospace">eext_slider</span> component and add it to a circle surface in conformant layer:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *slider;
+
+surface = eext_circle_surface_conformant_add(conformant);
+slider = eext_circle_object_slider_add(parent, surface);
+</pre>
+
+<h2 id="delete">Deleting the Circle Surface</h2>
+
+<p>Deleting an Evas object automatically deletes the circle surface in the same layer. However, you can explicitly use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_del()</span> function to delete a circle surface.</p>
+<pre class="prettyprint">
+eext_circle_surface_del(surface);
+</pre>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_del()</span> function does not delete the connected circle objects.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/component_colorselector_mn.htm b/org.tizen.ui.practices/html/native/efl/component_colorselector_mn.htm
new file mode 100644
index 0000000..3ddb0af
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_colorselector_mn.htm
@@ -0,0 +1,161 @@
+<!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>Colorselector</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Colorselector Component</a></li>
+			<li><a href="#set">Setting the Colorselector Modes</a></li>
+			<li><a href="#use">Using the Colorselector Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Colorselector</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The colorselector component provides a color selection solution to the user. There are different modes available, each of them showing a different configuration of the colorselector component.</p>
+
+<p>Currently only the Palette mode is available in Tizen.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_COLORSELECTOR_PALETTE</span></li>
+</ul>
+
+<p>The Palette mode displays several color items that enable the user to choose a color in the items displayed. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, and it is associated with a unique identifier. This enables the developers to create new series of colors (a new palette) and save it under another identifier. By default, the color palette is using the <span style="font-family: Courier New,Courier,monospace">default</span> identifier.</p>
+
+<p>This UI component inherits from the layout component, so all functions concerning the layout component can also be used on the colorselector component.</p>
+
+
+    <p class="figure">Figure: Colorselector component</p> 
+  <p align="center"><img alt="Colorselector component" src="../../images/colorsel.png" /></p> 
+  
+      <p class="figure">Figure: Colorselector hierarchy</p> 
+  <p align="center"><img alt="Colorselector hierarchy" src="../../images/colorselector_tree.png" /></p>
+
+<h2 id="add">Adding a Colorselector Component</h2>
+
+<p>The following example shows how to create a colorselector object.</p>
+
+<pre class="prettyprint">
+Evas_Object *colorsel, *parent;
+
+colorsel = elm_colorselector_add(parent);
+</pre>
+
+<h2 id="set">Setting the Colorselector Modes</h2>
+
+<p>The following example shows how to set the mode of the colorselector to the palette mode.</p>
+
+<pre class="prettyprint">
+elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
+</pre>
+
+<p>The following example shows how to create a new palette called <span style="font-family: Courier New,Courier,monospace">mypalette</span>. This new palette is saved by elementary config and you can to load it again later. You then add three colors in <span style="font-family: Courier New,Courier,monospace">mypalette</span>: red, green, and blue.</p>
+
+<pre class="prettyprint">
+elm_colorselector_palette_name_set(colorsel, &quot;mypalette&quot;);
+elm_colorselector_palette_color_add(colorsel, 255, 0, 0, 255);
+elm_colorselector_palette_color_add(colorsel, 0, 255, 0, 255);
+elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">default</span> palette already contains 14 colors.</p>
+
+<pre class="prettyprint">
+elm_colorselector_palette_name_set(colorsel, &quot;default&quot;);
+</pre>
+
+<p>When the user clicks on the color elements, the element changes the color that is set to the colorselector component. You can use the following function to retrieve the current selected color.</p>
+<pre class="prettyprint">
+int r, g, b, a;
+
+elm_colorselector_color_get(colorsel, &amp;r, &amp;g, &amp;b, &amp;a);
+</pre>
+
+<h2 id="use">Using the Colorselector Callbacks</h2>
+
+<p>You can register callbacks on the following signals:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span> - The color value changes on the selector. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">color,item,selected</span> - The user clicks on a color item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback is the selected color item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">color,item,longpressed</span> - The user long presses on a color item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback contains the selected color item.</li>
+</ul>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(colorselector, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the colorselector value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The color has changed\n&quot;);
+}
+</pre> 
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_ctxpopup_mn.htm b/org.tizen.ui.practices/html/native/efl/component_ctxpopup_mn.htm
new file mode 100644
index 0000000..c9fbc12
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_ctxpopup_mn.htm
@@ -0,0 +1,187 @@
+<!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>Ctxpopup</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Ctxpopup Component</a></li>
+			<li><a href="#styles">Modifying the Ctxpopup Style</a></li>
+			<li><a href="#configure">Configuring the Ctxpopup</a></li>
+			<li><a href="#items">Managing the Ctxpopup Items</a></li>
+			<li><a href="#callback">Using the Ctxpopup Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Ctxpopup</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>Ctxpopup is a contextual popup that can show a list of items.</p>
+
+    <p class="figure">Figure: Context popup component</p> 
+  <p align="center"><img alt="Context popup component" src="../../images/ctxpopup1.png" /></p> 
+  
+      <p class="figure">Figure: Context popup hierarchy</p> 
+  <p align="center"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
+
+<h2 id="add">Adding a Ctxpopup Component</h2>
+
+<p>A ctxpopup can be created with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function, and when shown, it automatically chooses an area inside its parent object&#39;s view (set using <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span>) to optimally fit into it.</p>
+
+<pre class="prettyprint">
+Evas_Object *ctxpopup, *parent;
+
+// Create a ctxpopup 
+ctxpopup = elm_ctxpopup_add(parent);
+</pre>
+
+<h2 id="styles">Modifying the Ctxpopup Style</h2>
+
+<p>The following styles are available:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">dropdown/list</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dropdown/label</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">more/default</span></li>
+</ul>
+
+    <p class="figure">Figure: Context popup more/default style</p> 
+  <p align="center"><img alt="Context popup more/default style" src="../../images/ctxpopup1.png" /></p> 
+  
+      <p class="figure">Figure: Context popup dropdown/list</p> 
+  <p align="center"><img alt="Context popup dropdown/list" src="../../images/ctxpopup2.png" /></p>
+
+      <p class="figure">Figure: Context popup dropdown/label</p> 
+  <p align="center"><img alt="Context popup dropdown/label" src="../../images/ctxpopup3.png" /></p>
+
+<p>The following example shows how to set the <span style="font-family: Courier New,Courier,monospace">more/default</span> style.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(ctxpopup, &quot;more/default&quot;);
+</pre>
+
+<h2 id="configure">Configuring the Ctxpopup</h2>
+
+<p>The context popup orientation can be set with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span>. Here it is set to horizontal.</p>
+<pre class="prettyprint">
+elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<p>Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden.</p>
+<pre class="prettyprint">
+elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<h2 id="items">Managing the Ctxpopup Items</h2>
+
+<p>The ctxpopup can contain a small number of items. Each of them can have a label and an icon. The following example shows how to append an item with the <span style="font-family: Courier New,Courier,monospace">Test</span> label and no icon.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it;
+
+it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, NULL, _ctxpopup_item_cb,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb()</span> callback is called when the item is clicked. The following example shows how to write the definition of this callback.</p>
+<pre class="prettyprint">
+static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;ctxpopup item selected\n&quot;);
+}
+</pre>
+
+<p>After that the item label is set to <span style="font-family: Courier New,Courier,monospace">New label</span>.</p>
+
+<pre class="prettyprint">elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
+</pre>
+
+<p>And its icon is modified to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *home_icon = elm_icon_add(ctxpopup);
+elm_icon_standard_set(home_icon, &quot;home&quot;);
+
+elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
+</pre>
+
+<h2 id="callback">Using the Ctxpopup Callbacks</h2>
+
+<p>The context popup emits the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal when it is dismissed. You can register a callback to this signal. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ctxpopup, &quot;dismissed&quot;, dismissed_cb, data);
+}
+
+// Callback function for the &quot;dismissed&quot; signal
+// This callback is called when the ctxpopup is dismissed
+void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Ctxpopup dismissed\n&quot;);
+}
+</pre> 
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_ctxpopup_wn.htm b/org.tizen.ui.practices/html/native/efl/component_ctxpopup_wn.htm
new file mode 100644
index 0000000..d371cd0
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_ctxpopup_wn.htm
@@ -0,0 +1,179 @@
+<!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>Ctxpopup</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Ctxpopup Component</a></li>
+			<li><a href="#styles">Modifying the Ctxpopup Style</a></li>
+			<li><a href="#configure">Configuring the Ctxpopup</a></li>
+			<li><a href="#items">Managing the Ctxpopup Items</a></li>
+			<li><a href="#callback">Using the Ctxpopup Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Ctxpopup</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>Ctxpopup is a contextual popup that can show a list of items.</p>
+
+    <p class="figure">Figure: Context popup component</p> 
+<p align="center"><img alt="Context popup component" src="../../images/ctxpopup_wn.png" /></p> 
+  
+      <p class="figure">Figure: Context popup hierarchy</p> 
+<p align="center"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
+
+<h2 id="add">Adding a Ctxpopup Component</h2>
+
+<p>A ctxpopup can be created with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function, and when shown, it automatically chooses an area inside its parent object&#39;s view (set using <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span>) to optimally fit into it.</p>
+
+<pre class="prettyprint">
+Evas_Object *ctxpopup, *parent;
+
+// Create a ctxpopup 
+ctxpopup = elm_ctxpopup_add(parent);
+</pre>
+
+<h2 id="styles">Modifying the Ctxpopup Style</h2>
+
+<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 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>
+</ul>
+
+
+<p>The following example shows how to set the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
+<pre class="prettyprint">
+elm_object_style_set(ctxpopup, &quot;default&quot;);
+</pre>
+
+<h2 id="configure">Configuring the Ctxpopup</h2>
+
+<p>The context popup orientation can be set with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span>. Here it is set to horizontal.</p>
+<pre class="prettyprint">
+elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<p>Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden. </p>
+<pre class="prettyprint">
+elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<h2 id="items">Managing the Ctxpopup Items</h2>
+
+<p>The ctxpopup can contain a small number of items. Each of them can have a label and an icon. The following example shows how to append an item with the <span style="font-family: Courier New,Courier,monospace">Test</span> label and no icon.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it;
+
+it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, NULL, _ctxpopup_item_cb, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb()</span> callback is called when the item is clicked. The following example shows how to write the definition of this callback.</p>
+<pre class="prettyprint">
+static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;ctxpopup item selected\n&quot;);
+}
+</pre>
+
+<p>After that the item label is set to <span style="font-family: Courier New,Courier,monospace">New label</span>.</p>
+<pre class="prettyprint">elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
+</pre>
+
+<p>And its icon is modified to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon.</p>
+<pre class="prettyprint">
+Evas_Object *home_icon = elm_icon_add(ctxpopup);
+elm_icon_standard_set(home_icon, &quot;home&quot;);
+
+elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
+</pre>
+
+<h2 id="callback">Using the Ctxpopup Callbacks</h2>
+
+<p>The context popup emits the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal when it is dismissed. You can register a callback to this signal. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ctxpopup, &quot;dismissed&quot;, dismissed_cb, data);
+}
+
+// Callback function for the &quot;dismissed&quot; signal
+// This callback is called when the ctxpopup is dismissed
+void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Ctxpopup dismissed\n&quot;);
+}
+</pre> 
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_custom_n.htm b/org.tizen.ui.practices/html/native/efl/component_custom_n.htm
new file mode 100644
index 0000000..477f0ab
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_custom_n.htm
@@ -0,0 +1,560 @@
+<!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>Customizing Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+				<li><a href="#elm_theme">Elementary Theme</a></li>
+				<li><a href="#customizing_style">Customizing a UI Component Style</a></li>
+				</ul>	
+	<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Customizing Components</h1> 
+  
+
+<p>Elementary UI components use the Edje library EDC themes to manage their look.</p>
+
+<h2 id="elm_theme" name="elm_theme">Elementary Theme</h2>
+
+<p>An Elementary theme is an Edje EDC file that contains groups composed of parts and programs. For more information about Edje, see <a href="theme_n.htm">Theme</a>.</p>
+
+<h3 id="use_theme_styles" name="use_theme_styles">Using Theme Styles</h3>
+
+<p>Elementary UI components provide a way to modify only some parts of the styles using the default theme. A style is a part of the EDC theme (a group) that concerns only one UI component. For example, you can create a new style for a button component to change its appearance without modifying the default theme.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">When creating a new style, knowledge of how each UI component is themed is required, because setting another style always replaces the entire group used by the UI component. Important signals and parts must be there for the object to behave properly.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>When several styles are loaded in the current theme, you can set a different style to a specific UI component using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. It is also possible to see the current style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function.</p>
+
+<p>The default theme specifies several styles for the button component. The code below shows how to set the &quot;anchor&quot; style of a newly created button component.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *button;
+
+// Create a button object 
+button = elm_button_add(parent);
+
+// Set its style to &quot;anchor"&quot;
+elm_object_style_set(button, &quot;anchor&quot;);
+</pre>
+
+<h3 id="load_theme_styles" name="load_theme_styles">Loading Theme Styles</h3>
+
+<p>Once written and compiled with Edje tools, the Elementary provides two methods to load the style in the application theme:</p>
+  <ul>
+   <li>overlays</li>
+   <li>extensions</li>
+  </ul>
+
+<p>When looking for a theme, the Elementary checks the list of overlays, if any are defined. Then it takes the default theme, and if it cannot find a theme for the UI component, it looks at the extensions list.</p>
+
+<h4 id="overlay_chapter" name="overlay_chapter">Overlay</h4>
+
+<p>An overlay can replace the look of all UI components by overriding the default style. If we create a new style called &quot;default&quot; for the button component and add it as an overlay, the Elementary uses the overlay for all button components overriding the default theme.</p>
+
+<p>Here is how to add an overlay to your application&#39;s theme.</p>
+
+<pre class="prettyprint">
+elm_theme_overlay_add(NULL, &quot;./theme_button.edj&quot;);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Here we assume that the &quot;theme_button.edj&quot; file only contains a new theme for the button component.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Doing this is not recommended. Adding a file as an overlay makes the Elementary use the new theme for all the button components defined in the application. You must make sure that the &quot;theme_button.edj&quot; file reimplements everything that was previously defined in the default theme concerning the button component.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>This is how to remove the previously added overlay to return to the default theme.</p>
+
+<pre class="prettyprint">
+elm_theme_overlay_del(NULL, &quot;./theme_button.edj&quot;);
+</pre>
+
+<h4 id="extension" name="extension">Extension</h4>
+
+<p>With extensions, we can write styles that we can apply to some UI components (not all of them) by using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
+
+<p>The application adds a theme to the list of extensions with the following call.</p>
+
+<pre class="prettyprint">
+elm_theme_extension_add(NULL, &quot;./theme_button_style_custom.edj&quot;);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Here we assume that the &quot;theme_button_style_custom.edj&quot; file contains a new button style called &quot;custom&quot;.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>This is how to use the new &quot;custom&quot; style on a button component.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *button;
+
+// Create a button object 
+button = elm_button_add(parent);
+
+// Set its style to &quot;custom&quot; 
+elm_object_style_set(button, &quot;custom&quot;);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">When using <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add</span> or <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add</span> to add a new theme extension or overlay to a Theme object (here called the default theme), the Elementary calls the <span style="font-family: Courier New,Courier,monospace">elm_theme_flush</span> function to flush Elementary theme caches. Thus, the theme of all UI components that use the default theme is reloaded.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h3 id="create_new_theme" name="create_new_theme">Creating a New Theme</h3>
+
+<p>This is how to create a new theme object.</p>
+
+<pre class="prettyprint">
+Elm_Theme *new_theme = elm_theme_new();
+</pre>
+
+<p>This function creates an empty specific theme that only uses the default theme. It has its own private set of extensions and overlays (which are empty by default). Specific themes do not fall back to the themes of parent objects. They are not intended for this use.</p>
+
+<p>This is how to apply this theme to a UI component and its children (a button, for example).</p>
+
+<pre class="prettyprint">
+// Create a button component 
+Evas_Object *button = elm_button_add();
+
+// Set the new theme to the button component 
+elm_object_theme_set(button, new_theme);
+</pre>
+
+<h2 id="customizing_style" name="customizing_style">Customizing a UI Component Style</h2>
+
+<p>UI component themes are written in Edje EDC source files (.edc). These files are compiled with Edje tools to make an .edj file that is used by the application. For more information on using the EDC language, see <a href="theme_n.htm">Theme</a>.</p>
+
+<p>A new Edje style can be added for a UI component. The best way is to copy the existing &quot;default&quot; style, rename it, and update it to your needs.</p>
+
+<h3 id="check_custom_style" name="check_custom_style">Creating a Customized Style for the Check Component</h3>
+
+<p>As an example, we show how to create a new style for the <span style="font-family: Courier New,Courier,monospace">check</span> component. The aim is to update the background and the main pictures of this UI component with custom pictures.</p>
+
+<p>The EDC source file concerning the check component (check.edc file) is composed of several groups.</p>
+
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/default&quot;;
+}
+
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/toggle&quot;;
+}
+</pre>
+
+<p>Those two groups define two different styles for the check component (the &quot;default&quot; style and the &quot;toggle&quot; style).</p>
+
+<p>We copy the group corresponding to the &quot;default&quot; style in a new file to create a new style called &quot;custom&quot;. This new style is saved in the &quot;check_custom.edc&quot; file.</p>
+
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/custom&quot;;
+&nbsp;&nbsp;&nbsp;// Here is the copy of the content of &quot;default&quot; style 
+}
+</pre>
+
+<p>In the new group (&quot;elm/check/base/custom&quot;), we have to find the parts we want to modify. Here, the appropriate parts are &quot;bg&quot; and &quot;check&quot; parts.</p>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;mouse_events: 0;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: 1 -2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 16 16;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: VERTICAL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;check_base.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 5 5 5 5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill.smooth: 0;
+&nbsp;&nbsp;&nbsp;}
+}
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;check&quot;;
+&nbsp;&nbsp;&nbsp;mouse_events: 0;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -2 -2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;check.png&quot;;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 128 128 128 128;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 128 128 128 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>We do not detail all the options that can be modified here, but assume that the user is familiar with <a href="theme_n.htm">Edje</a> and knows Edje basics.</p>
+
+<p>Our custom pictures filenames are:</p>
+  <ul>
+   <li>check_base_custom.png for the bg part</li>
+   <li>check_custom.png for the check part</li></ul>
+
+<p>We must update the image.normal attribute in both parts with our custom pictures filenames to modify the pictures of this style.</p>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;   
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;check_base_custom.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 5 5 5 5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+                
+&nbsp;&nbsp;&nbsp;}
+}
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;check&quot;;
+        
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+            
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;check_custom.png&quot;;
+&nbsp;&nbsp;&nbsp;}
+        
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Here, we assume that the custom images are the same size as the &quot;default&quot; images.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h3 id="add_theme_to_project" name="add_theme_to_project">Adding the Theme File to Your Project</h3>
+
+<p>Once written, the check_custom.edc file is put in the <span style="font-family: Courier New,Courier,monospace">/res/edje/</span>. directory of the application project in the SDK.</p>
+
+<p>When building the application, the SDK calls the Edje tools automatically to build the final <span style="font-family: Courier New,Courier,monospace">check_custom.edj</span> file. This file can be loaded from our application.</p>
+
+<h3 id="use_new_style" name="use_new_style">Using the New Style</h3>
+
+<p>This is how to add the new theme file as an extension in the application.</p>
+
+<pre class="prettyprint">
+char edj_path[PATH_MAX] = {0, };
+
+// Get the full path of the edj file 
+app_get_resource(&quot;/edje/check_custom.edj&quot;, edj_path, (int)PATH_MAX);
+
+// Load check custom style as an extension 
+elm_theme_extension_add(NULL, edj_path);
+</pre>
+
+<p>Use the &quot;custom&quot; style on a new check component.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check;
+
+// Create a check object 
+check = elm_check_add(parent);
+
+// Set its style to &quot;custom&quot; 
+elm_object_style_set(check, &quot;custom&quot;);
+</pre>
+
+<h3 id="special_theme_parts" name="special_theme_parts">Special Theme Parts</h3>
+
+<p>Some parts of the EDC file can be interacted with the Elementary. The content of parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span> are modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_set_text()</span> function. The content of <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts is updated using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function.</p>
+
+<h4 id="swallow_parts" name="swallow_parts">Swallow Parts</h4>
+
+<p>In the previous example (the check component &quot;default&quot; style), there is a part called &quot;elm.swallow.content&quot; that is of the type <span style="font-family: Courier New,Courier,monospace">SWALLOW</span>.</p>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to_x: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to_x: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: 1 -2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 128;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>We can push content (Evas_Object) to this part from the application anytime. The size and position of the content pushed is controlled by the EDC theme.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check1, *content;
+
+// Create a check object 
+check1 = elm_check_add(parent);
+
+// Set the content of the check object 
+elm_object_part_content_set(check1, &quot;elm.swallow.content&quot;, content);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">We can add new <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts when customizing a UI component&#39;s style, if we want to be able to control more content from the application. Note that removing existing <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts changes the UI component&#39;s behavior.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h4 id="text_parts" name="text_parts">Text Parts</h4>
+
+<p>The same is done with parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span>. The check &quot;default&quot; style contains a part named &quot;elm.text&quot;.</p>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm.text&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;mouse_events: 0;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to_x: &quot;elm.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -2 -2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans,Edje-Vera&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: -1.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: "default" 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.min: 1 1;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 0 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.min: 1 1;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>This is how to modify the content of the &quot;elm.text&quot; part from the application. The position of the text, its size, color, look and feel are managed by the EDC theme.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check2;
+
+// Create a check object 
+check2 = elm_check_add(parent);
+
+// Set the text of the check object 
+elm_object_part_text_set(check2, &quot;elm.text&quot;, &quot;Test text&quot;);
+</pre>
+
+
+<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>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/component_datetime_mn.htm b/org.tizen.ui.practices/html/native/efl/component_datetime_mn.htm
new file mode 100644
index 0000000..79d12e0
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_datetime_mn.htm
@@ -0,0 +1,171 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Datetime</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Datetime Component</a></li>
+			<li><a href="#styles">Using the Datetime Styles</a></li>
+			<li><a href="#set">Setting the Datetime Format</a></li>
+			<li><a href="#callback">Using the Datetime Callbacks</a></li>
+			<li><a href="#ux">UX Issue in Tizen 2.3</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Datetime</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The datetime component displays and adds date and time values.</p>
+
+<p class="figure">Figure: Datetime selection</p> 
+<p align="center"> <img alt="Datetime selection" src="../../images/date2.png" /> </p> 
+ 
+<p class="figure">Figure: Datetime hierarchy</p> 
+<p align="center"> <img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p> 
+
+<h2 id="add">Adding a Datetime Component</h2>
+
+<p>The UI component is created with <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span>. It is possible to select the visible fields with <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span>. The following fields can be controlled:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: the year field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: the month field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_DATE</span>: the date field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_HOUR</span>: the hour field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MINUTE</span>: the minute field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: the AM/PM field</li>
+  </ul>
+
+<p>The following example shows how to create a datetime component and set the <span style="font-family: Courier New,Courier,monospace">HOUR</span> and <span style="font-family: Courier New,Courier,monospace">MINUTE</span> fields visible.</p>
+
+<pre class="prettyprint">
+Evas_Object *datetime, *parent;
+
+datetime = elm_datetime_add(parent);
+
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_HOUR, EINA_TRUE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_MINUTE, EINA_TRUE);
+
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_YEAR, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_MONTH, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_DATE, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_AMPM, EINA_FALSE);
+</pre>
+
+<h2 id="styles">Using the Datetime Styles</h2>
+
+<p>The following styles are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">date_layout</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">time_layout</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">time_layout_24h</span></li>
+  </ul>
+
+<p>The following example creates the <span style="font-family: Courier New,Courier,monospace">date_layout</span> style:</p>
+
+<pre class="prettyprint">
+elm_object_style_set(datetime, &quot;date_layout&quot;);
+</pre>
+
+<h2 id="set">Setting the Datetime Format</h2>
+
+<p>The format of the date and time can be configured with <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.</p>
+
+<pre class="prettyprint">
+elm_datetime_format_set(datetime, &quot;%H : %M&quot;);
+</pre>
+
+<p>Please refer to the API documentation for a complete list of all the options available.</p>
+
+<h2 id="callback">Using the Datetime Callbacks</h2>
+
+<p>A callback can be registered on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal to detect when the Datetime field values are changed. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(datetime, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the datetime fields change
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Datetime field changed. \n&quot;);
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">language,changed</span> signal is emitted when the system locale changes.</p>
+ 
+
+<h2 id="ux">UX Issue in Tizen 2.3</h2>
+
+<ul>
+  <li><span style="font-family: Courier New,Courier,monospace">date_layout</span> (default): Year, Month, Day</li>
+  <li><span style="font-family: Courier New,Courier,monospace">time_layout</span>: Hour, Minute, AM/PM button</li>
+  <li><span style="font-family: Courier New,Courier,monospace">time_layout_24hr</span>: Hour, Minute</li>
+</ul>
+ 
+<p>Basically, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component needs a full-length format that includes the Year, Month, Day, Hour, Minute, and AM/PM. Each style then shows specific fields according their style, limited by the UX concept. If you call the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function for a field that is not supported in the style, it does not work.</p>
+ 
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_datetime_wn.htm b/org.tizen.ui.practices/html/native/efl/component_datetime_wn.htm
new file mode 100644
index 0000000..ab58ada
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_datetime_wn.htm
@@ -0,0 +1,142 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Datetime</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Datetime Component</a></li>
+			<li><a href="#styles">Using the Datetime Styles</a></li>
+			<li><a href="#set">Setting the Datetime Format</a></li>
+			<li><a href="#callback">Using the Datetime Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>				
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Datetime</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The datetime component displays and adds date and time values.</p>
+
+
+<p class="figure">Figure: Datetime selection</p> 
+<p align="center"><img alt="Datetime selection" src="../../images/datetime_wn.png" /> </p> 
+ 
+<p class="figure">Figure: Datetime hierarchy</p> 
+<p align="center"><img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p> 
+
+<h2 id="add">Adding a Datetime Component</h2>
+
+<p>The UI component is created with <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span>.</p>
+<p>The following fields can be controlled:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: the year field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: the month field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_DATE</span>: the date field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_HOUR</span>: the hour field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MINUTE</span>: the minute field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: the AM/PM field</li>
+  </ul>
+
+<h2 id="styles">Using the Datetime Styles</h2>
+
+<p>The following styles are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">datepicker_layout</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">timepicker_layout</span></li>
+  </ul>
+
+<p>The following example creates the <span style="font-family: Courier New,Courier,monospace">datepicker_layout</span> style:</p>
+<pre class="prettyprint">
+elm_object_style_set(datetime, &quot;datepicker_layout&quot;);
+</pre>
+
+<h2 id="set">Setting the Datetime Format</h2>
+
+<p>The format of the date and time can be configured with <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.</p>
+<pre class="prettyprint">
+elm_object_style_set(datetime, &quot;timepicker_layout&quot;);
+elm_datetime_format_set(datetime, &quot;%d/%b/%Y%I:%M&quot;);
+</pre>
+<p>Please refer to the API documentation for a complete list of all the options available.</p>
+
+<h2 id="callback">Using the Datetime Callbacks</h2>
+
+<p>A callback can be registered on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal to detect when the Datetime field values are changed. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(datetime, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the datetime fields change
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Datetime field changed. \n&quot;);
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">language,changed</span> signal is emitted when the system locale changes.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+ 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_entry_mn.htm b/org.tizen.ui.practices/html/native/efl/component_entry_mn.htm
new file mode 100644
index 0000000..201db3b
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_entry_mn.htm
@@ -0,0 +1,445 @@
+<!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>Entry</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Entry Component</a></li>
+			<li><a href="#editor">Using the Text Editor</a></li>
+			<li><a href="#mode">Setting the Password Mode</a></li>
+			<li><a href="#wrap">Entry Line Modes And Wrapping</a></li>
+			<li><a href="#select">Selecting Text</a></li>
+			<li><a href="#cursor">Controlling the Cursor</a></li>
+			<li><a href="#formatting">Formatting Text</a></li>
+			<li><a href="#markups">Using Special Markups</a></li>
+			<li><a href="#override">Overriding Style</a></li>
+			<li><a href="#filter">Filtering Text</a></li>
+			<li><a href="#load">Loading and Saving Files</a></li>
+			<li><a href="#content_theme">Using Entry Theme Content</a></li>
+			<li><a href="#text_theme">Using Entry Theme Texts</a></li>
+			<li><a href="#callback">Using Entry Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Entry</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The entry component is a box where the user can enter text. It supports the following features:</p>
+  <ul>
+   <li>text wrapping</li>
+   <li>multiline</li>
+   <li>scrolling</li>
+   <li>formatted markup text</li>
+   <li>password mode</li>
+   <li>filtering text</li>
+   <li>read/write from a file</li>
+   <li>theme style overrides</li>
+  </ul>
+   
+<p class="figure">Figure: Entry component</p> 
+<p align="center"> <img alt="Entry component" src="../../images/entry.png" /> </p> 
+ 
+<p class="figure">Figure: Entry component</p> 
+<p align="center"> <img alt="Entry component" src="../../images/entry2.png" /> </p> 
+ 
+<p class="figure">Figure: Entry hierarchy</p> 
+<p align="center"> <img alt="Entry hierarchy" src="../../images/entry_tree.png" /> </p>    
+   
+<h2 id="add">Adding an Entry Component</h2>
+
+<p>The entry component is created with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and the text inside the entry can be set with <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *entry, *parent;
+
+entry = elm_entry_add(parent);
+elm_entry_entry_set(entry, &quot;A short text.&quot;);
+</pre>
+
+<h2 id="editor">Using the Text Editor</h2>
+
+<p>You can append text to the end of existing content.</p>
+
+<pre class="prettyprint">
+elm_entry_entry_append(entry, &quot;END&quot;);
+</pre>
+
+<p>You can also insert text at the current cursor position.</p>
+
+<pre class="prettyprint">
+elm_entry_entry_insert(entry, &quot;CURSOR&quot;);
+Eina_Bool Empty = elm_entry_is_empty(entry);
+</pre>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> to see whether the entry is empty. Here, the boolean variable <span style="font-family: Courier New,Courier,monospace">Empty</span> returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+
+<p>By default, the user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.</p>
+
+<pre class="prettyprint">
+elm_entry_editable_set(entry, EINA_FALSE);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">It is still possible to use the previous functions to modify the text of a non-editable entry.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+ 
+<h2 id="mode">Setting the Password Mode</h2>
+
+<p>When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).</p>
+
+<pre class="prettyprint">
+elm_entry_password_set(entry, EINA_TRUE);
+</pre>
+
+<h2 id="wrap">Entry Line Modes And Wrapping</h2>
+
+<p>The entry component has two line modes:</p>
+  <ul>
+   <li>single line mode</li>
+   <li>multiline mode</li>
+  </ul>
+
+<p>First, set the entry in single line mode.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_TRUE);
+</pre>
+
+<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the Enter key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
+
+<p>When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+</pre>
+
+<p>In multiline entries, <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_NONE</span>: No wrap</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_CHAR</span>: Wrap between characters</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_WORD</span>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_MIXED</span>: Word wrap, and if that fails, char wrap</li>
+  </ul>
+
+<h2 id="select">Selecting Text</h2>
+
+<p>Text selections can be made with different functions:</p>
+<ul>
+<li>To select all the content of the entry component:
+<pre class="prettyprint">
+elm_entry_select_all(entry);
+</pre>
+</li>
+
+<li>To deselect the current selection:
+<pre class="prettyprint">
+elm_entry_select_none(entry);
+</pre>
+</li>
+
+<li>To select part of the text, use <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span>. The following code selects the first twenty characters of the entry content.
+<pre class="prettyprint">
+elm_entry_select_region_set(entry, 0, 20);
+</pre>
+</li>
+
+<li>To retrieve the currently selected text in an entry:
+<pre class="prettyprint">
+const char *selection;
+
+selection = elm_entry_selection_get(entry);
+</pre>
+</li>
+</ul>
+
+<p>If the entry text is empty, <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>You can copy or cut the selection to the clipboard.</p>
+<pre class="prettyprint">
+elm_entry_selection_cut(entry);
+</pre>
+
+<p>The selection can be pasted in the same or a different entry.</p>
+<pre class="prettyprint">
+elm_entry_selection_paste(entry);
+</pre>
+
+<h2 id="cursor">Controlling the Cursor</h2>
+
+<p>The cursor represents the current position in the entry, where the next action, for example, text insertion or deletion, is done. Usually, the cursor is represented as a blinking character, but its appearance depends on the theme configuration. The cursor position can be modified by using several functions.</p>
+<ul>
+<li>To move the cursor to the beginning of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_begin_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor to the end of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_end_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor one line down or up:
+<pre class="prettyprint">
+elm_entry_cursor_down(entry);
+elm_entry_cursor_up(entry);
+</pre>
+</li>
+<li>To move the cursor one character to the left or right:
+<pre class="prettyprint">
+elm_entry_cursor_prev(entry);
+elm_entry_cursor_next(entry);
+</pre>
+</li>
+
+<li>To set the cursor at a specific position (15th character, for example):
+<pre class="prettyprint">
+elm_entry_cursor_pos_set(entry, 15);
+</pre>
+</li>
+</ul>
+
+<p>It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.</p>
+
+<pre class="prettyprint">
+elm_entry_cursor_selection_begin(entry);
+
+for (i = 0; i &lt; 5; i++)
+{
+&nbsp;&nbsp;&nbsp;elm_entry_cursor_next(entry);
+}
+
+elm_entry_cursor_selection_end(entry);
+</pre>
+
+<h2 id="formatting">Formatting Text</h2>
+
+<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span>: Inserts a line break.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;ps&gt;</span>: Inserts a paragraph separator. This is preferred over line breaks.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;tab&gt;</span>: Inserts a tab.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;em&gt;...&lt;/em&gt;</span>: Emphasis. Sets the oblique style for the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;b&gt;...&lt;/b&gt;</span>: Sets the bold style for the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;link&gt;...&lt;/link&gt;</span>: Underlines the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;hilight&gt;...&lt;/hilight&gt;</span>: Highlights the enclosed text.</li>
+  </ul>
+
+<h2 id="markups">Using Special Markups</h2>
+
+<p>Special markups can be added within the text of the entry:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;a href = ..&gt;...&lt;/a&gt;</span>: Anchors</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;item size = .. vsize = .. href = ..&gt;...&lt;/item&gt;</span>: Items</li>
+  </ul>
+
+<p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks on them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. It also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p>
+
+<p>The item markup provides a way to insert any <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the text. The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> name has to be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
+
+<h2 id="override">Overriding Style</h2>
+
+<p>To tweak the style of the text within the entry component, it is possible to override parts of the theme style to the textblock object by using <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span>. This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span>.</p>
+
+<h2 id="filter">Filtering Text</h2>
+
+<p>Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.</p>
+
+<pre class="prettyprint">
+static Elm_Entry_Filter_Limit_Size limit_size = 
+{
+&nbsp;&nbsp;&nbsp;.max_char_count = 8,
+&nbsp;&nbsp;&nbsp;.max_byte_count = 0
+};
+
+// Append a new callback to the list, this function is called each time
+// a text is inserted in the entry. Pass the limit_size struct previously
+// created to set the maximum number of characters allowed to 8
+ 
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+</pre>
+
+<p>The content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the &#39;+&#39;, &#39;-&#39;, &#39;*&#39;, and &#39;/&#39; characters.</p>
+<pre class="prettyprint">
+static Elm_Entry_Filter_Accept_Set accept_set = 
+{
+&nbsp;&nbsp;&nbsp;.accepted = NULL,
+&nbsp;&nbsp;&nbsp;.rejected = &quot;+*-/&quot;
+};
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
+</pre>
+
+<h2 id="load">Loading and Saving Files</h2>
+
+<p>The entry content can be saved to a file (<span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>, for example).</p>
+
+<pre class="prettyprint">
+// Set the file in which the entry text is saved. This function
+// implicitly loads the existing file content 
+elm_entry_file_set(entry, &quot;/tmp/test.txt&quot;, ELM_TEXT_FORMAT_MARKUP_UTF8);
+</pre>
+
+<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.</p>
+
+<pre class="prettyprint">
+// Disable autosaving 
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed 
+elm_entry_file_save(entry);
+</pre>
+
+<h2 id="content_theme">Using Entry Theme Content</h2>
+
+<p>Two content parts of the default theme are available: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>. The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part.</p>
+<pre class="prettyprint">
+Evas_Object *icon;
+
+ic = elm_icon_add(entry);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(entry, &quot;end&quot;, icon);
+</pre>
+
+<h2 id="text_theme">Using Entry Theme Texts</h2>
+
+<p>The default theme allows the use of the following text parts:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">default</span> - text of the entry</li>
+   <li><span style="font-family: Courier New,Courier,monospace">guide</span> - placeholder of the entry</li>
+  </ul>
+
+<p>The following example shows how to set the placeholder text of the entry to <span style="font-family: Courier New,Courier,monospace">Hello World</span>.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(entry, &quot;Hello World&quot;);
+</pre>
+
+<h2 id="callback">Using Entry Callbacks</h2>
+
+<p>The entry component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">aborted</span>: The escape key is pressed on a single line entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The enter key is pressed on a single line entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: An anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: Mouse button is pressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: Mouse cursor is moved into an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: Mouse cursor is moved out of an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: Mouse button is unpressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The text within the entry is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">changed,user</span>: The text within the entry is changed because of user interaction. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The entry is clicked (mouse press and release).</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The entry is double clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,triple</span>: The entry is triple clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed</span>: The cursor position is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed,manual</span>: The cursor position is changed manually.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">focused</span>: The entry receives focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The entry loses focus.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: Program language is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: A mouse button is pressed and held for a couple of seconds.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: A maximum length is reached.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">preedit,changed</span>: The preedit string is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">press</span>: A mouse button is pressed on the entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">redo,request</span>: The request is redone.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,changed</span>: The current selection is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,cleared</span>: The current selection is cleared.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,copy</span>: A copy of the selected text into the clipboard is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,cut</span>: A cut of the selected text into the clipboard is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,paste</span>: A paste of the clipboard contents is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,start</span>: A selection is begun and no previous selection exists.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">text,set,done</span>: The whole text is set to the entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">theme,changed</span>: The theme is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">undo,request</span>: The request is undone.</li>
+  </ul>
+
+<p>For signals, where <span style="font-family: Courier New,Courier,monospace">event_info</span> has not been explicitly described, it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback to the <span style="font-family: Courier New,Courier,monospace">focused</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;focused&quot;, focused_cb, data);
+}
+
+// Callback function for the &quot;focused&quot; signal
+// This callback is called when the entry receive the focus
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Entry focused\n&quot;);
+} 
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_entry_wn.htm b/org.tizen.ui.practices/html/native/efl/component_entry_wn.htm
new file mode 100644
index 0000000..d22e00d
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_entry_wn.htm
@@ -0,0 +1,439 @@
+<!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>Entry</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Entry Component</a></li>
+			<li><a href="#editor">Using the Text Editor</a></li>
+			<li><a href="#mode">Setting the Password Mode</a></li>
+			<li><a href="#wrap">Entry Line Modes And Wrapping</a></li>
+			<li><a href="#text">Selecting Text</a></li>
+			<li><a href="#cursor">Controlling the Cursor</a></li>
+			<li><a href="#formatting">Formatting Text</a></li>
+			<li><a href="#markups">Using Special Markups</a></li>
+			<li><a href="#override">Overriding Style</a></li>
+			<li><a href="#filter">Filtering Text</a></li>
+			<li><a href="#load">Loading and Saving Files</a></li>
+			<li><a href="#content_theme">Using Entry Theme Content</a></li>
+			<li><a href="#text_theme">Using Entry Theme Texts</a></li>
+			<li><a href="#callback">Using Entry Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Entry</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The entry component is a box where the user can enter text. It supports the following features:</p>
+  <ul>
+   <li>text wrapping</li>
+   <li>multiline</li>
+   <li>scrolling</li>
+   <li>formatted markup text</li>
+   <li>password mode</li>
+   <li>filtering text</li>
+   <li>read/write from a file</li>
+   <li>theme style overrides</li>
+  </ul>
+
+
+<p class="figure">Figure: Entry component</p> 
+<p align="center"><img alt="Entry component" src="../../images/entry_wn.png" /> </p> 
+ 
+<p class="figure">Figure: Entry component</p> 
+<p align="center"><img alt="Entry component" src="../../images/entry2_wn.png" /> </p> 
+ 
+<p class="figure">Figure: Entry hierarchy</p> 
+<p align="center"><img alt="Entry hierarchy" src="../../images/entry_tree.png" /> </p> 
+  
+<h2 id="add">Adding an Entry Component</h2>
+
+<p>The entry component is created with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and the text inside the entry can be set with <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span>.</p>
+<pre class="prettyprint">
+Evas_Object *entry, *parent;
+
+entry = elm_entry_add(parent);
+elm_entry_entry_set(entry, &quot;A short text.&quot;);
+</pre>
+
+<h2 id="editor">Using the Text Editor</h2>
+
+<p>You can append text to the end of existing content.</p>
+<pre class="prettyprint">
+elm_entry_entry_append(entry, &quot;END&quot;);
+</pre>
+
+<p>You can also insert text at the current cursor position.</p>
+<pre class="prettyprint">
+elm_entry_entry_insert(entry, &quot;CURSOR&quot;);
+Eina_Bool Empty = elm_entry_is_empty(entry);
+</pre>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> to see whether the entry is empty. Here, the boolean variable <span style="font-family: Courier New,Courier,monospace">Empty</span> returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<p>The user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.</p>
+<pre class="prettyprint">
+elm_entry_editable_set(entry, EINA_FALSE);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">It is still possible to use the previous functions to modify the text of a non-editable entry.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+ 
+<h2 id="mode">Setting the Password Mode</h2>
+
+<p>When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).</p>
+
+<pre class="prettyprint">
+elm_entry_password_set(entry, EINA_TRUE);
+</pre>
+
+<h2 id="wrap">Entry Line Modes And Wrapping</h2>
+
+<p>The entry component has two line modes:</p>
+  <ul>
+   <li>single line mode</li>
+   <li>multiline mode</li>
+  </ul>
+
+<p>First, set the entry in single line mode.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_TRUE);
+</pre>
+
+<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the Enter key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
+
+<p>When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+</pre>
+
+<p>In multiline entries, <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_NONE</span>: No wrap</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_CHAR</span>: Wrap between characters</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_WORD</span>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_MIXED</span>: Word wrap, and if that fails, char wrap</li>
+  </ul>
+
+<h2 id="text">Selecting Text</h2>
+
+<p>Text selections can be made with different functions:</p>
+<ul>
+<li>To select all the content of the entry component:
+<pre class="prettyprint">
+elm_entry_select_all(entry);
+</pre>
+</li>
+
+<li>To deselect the current selection:
+<pre class="prettyprint">
+elm_entry_select_none(entry);
+</pre>
+</li>
+
+<li>To select part of the text, use <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span>. The following code selects the first twenty characters of the entry content.
+<pre class="prettyprint">
+elm_entry_select_region_set(entry, 0, 20);
+</pre>
+</li>
+
+<li>To retrieve the currently selected text in an entry:
+<pre class="prettyprint">
+const char *selection;
+
+selection = elm_entry_selection_get(entry);
+</pre>
+</li>
+</ul>
+
+<p>If the entry text is empty, <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>You can copy or cut the selection to the clipboard.</p>
+<pre class="prettyprint">
+elm_entry_selection_cut(entry);
+</pre>
+
+<p>The selection can be pasted in the same or a different entry.</p>
+<pre class="prettyprint">
+elm_entry_selection_paste(entry);
+</pre>
+
+<h2 id="cursor">Controlling the Cursor</h2>
+
+<p>The cursor represents the current position in the entry, where the next action, for example, text insertion or deletion, is done. Usually, the cursor is represented as a blinking character, but its appearance depends on the theme configuration. The cursor position can be modified by using several functions.</p>
+<ul>
+<li>To move the cursor to the beginning of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_begin_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor to the end of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_end_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor one line down or up:
+<pre class="prettyprint">
+elm_entry_cursor_down(entry);
+elm_entry_cursor_up(entry);
+</pre>
+</li>
+<li>To move the cursor one character to the left or right:
+<pre class="prettyprint">
+elm_entry_cursor_prev(entry);
+elm_entry_cursor_next(entry);
+</pre>
+</li>
+
+<li>To set the cursor at a specific position (15th character, for example):
+<pre class="prettyprint">
+elm_entry_cursor_pos_set(entry, 15);
+</pre>
+</li>
+</ul>
+
+<p>It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.</p>
+<pre class="prettyprint">
+elm_entry_cursor_selection_begin(entry);
+
+for (i = 0; i &lt; 5; i++)
+{
+&nbsp;&nbsp;&nbsp;elm_entry_cursor_next(entry);
+}
+
+elm_entry_cursor_selection_end(entry);
+</pre>
+
+<h2 id="formatting">Formatting Text</h2>
+
+<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available in the default theme:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span>: Inserts a line break.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;ps&gt;</span>: Inserts a paragraph separator. This is preferred over line breaks.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;tab&gt;</span>: Inserts a tab.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;em&gt;...&lt;/em&gt;</span>: Emphasis. Sets the oblique style for the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;b&gt;...&lt;/b&gt;</span>: Sets the bold style for the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;link&gt;...&lt;/link&gt;</span>: Underlines the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;hilight&gt;...&lt;/hilight&gt;</span>: Highlights the enclosed text.</li>
+  </ul>
+
+<h2 id="markups">Using Special Markups</h2>
+
+<p>Special markups can be added within the text of the entry:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;a href = ..&gt;...&lt;/a&gt;</span>: Anchors</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;item size = .. vsize = .. href = ..&gt;...&lt;/item&gt;</span>: Items</li>
+  </ul>
+
+<p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks on them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. It also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p>
+
+<p>The item markup provides a way to insert any <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the text. The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> name has to be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
+
+<h2 id="override">Overriding Style</h2>
+
+<p>To tweak the style of the text within the entry component, it is possible to override parts of the theme style to the textblock object by using <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span>. This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span>.</p>
+
+<h2 id="filter">Filtering Text</h2>
+
+<p>Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.</p>
+<pre class="prettyprint">
+static Elm_Entry_Filter_Limit_Size limit_size = 
+{
+&nbsp;&nbsp;&nbsp;.max_char_count = 8,
+&nbsp;&nbsp;&nbsp;.max_byte_count = 0
+};
+
+// Append a new callback to the list, this function is called each time
+// a text is inserted in the entry. Pass the limit_size struct previously
+// created to set the maximum number of characters allowed to 8
+ 
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+</pre>
+
+<p>The content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the &#39;+&#39;, &#39;-&#39;, &#39;*&#39;, and &#39;/&#39; characters.</p>
+
+<pre class="prettyprint">
+static Elm_Entry_Filter_Accept_Set accept_set = 
+{
+&nbsp;&nbsp;&nbsp;.accepted = NULL,
+&nbsp;&nbsp;&nbsp;.rejected = &quot;+*-/&quot;
+};
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
+</pre>
+
+<h2 id="load">Loading and Saving Files</h2>
+
+<p>The entry content can be saved to a file (<span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>, for example).</p>
+
+<pre class="prettyprint">
+// Set the file in which the entry text is saved. This function
+// implicitly loads the existing file content 
+elm_entry_file_set(entry, &quot;/tmp/test.txt&quot;, ELM_TEXT_FORMAT_MARKUP_UTF8);
+</pre>
+
+<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.</p>
+<pre class="prettyprint">
+// Disable autosaving 
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed 
+elm_entry_file_save(entry);
+</pre>
+
+<h2 id="content_theme">Using Entry Theme Content</h2>
+
+<p>Two content parts of the default theme are available: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>. The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon;
+
+ic = elm_icon_add(entry);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(entry, &quot;end&quot;, icon);
+</pre>
+
+<h2 id="text_theme">Using Entry Theme Texts</h2>
+
+<p>The default theme allows the use of the following text parts:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">elm.text</span> - text of the entry</li>
+   <li><span style="font-family: Courier New,Courier,monospace">elm.guide</span> - placeholder of the entry</li>
+  </ul>
+
+<p>The following example shows how to set the placeholder text of the entry to <span style="font-family: Courier New,Courier,monospace">Hello World</span>.</p>
+<pre class="prettyprint">
+elm_object_part_text_set(entry, &quot;elm.guide&quot;, &quot;Hello World&quot;);
+</pre>
+
+<h2 id="callback">Using Entry Callbacks</h2>
+
+<p>The entry component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">aborted</span>: The escape key is pressed on a single line entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The enter key is pressed on a single line entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: An anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: Mouse button is pressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: Mouse cursor is moved into an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: Mouse cursor is moved out of an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: Mouse button is unpressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The text within the entry is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">changed,user</span>: The text within the entry is changed because of user interaction. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The entry is clicked (mouse press and release).</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The entry is double clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,triple</span>: The entry is triple clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed</span>: The cursor position is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed,manual</span>: The cursor position is changed manually.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">focused</span>: The entry receives focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The entry loses focus.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: Program language is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: A mouse button is pressed and held for a couple of seconds.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: A maximum length is reached.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">preedit,changed</span>: The preedit string is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">press</span>: A mouse button is pressed on the entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">redo,request</span>: The request is redone.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,changed</span>: The current selection is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,cleared</span>: The current selection is cleared.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,copy</span>: A copy of the selected text into the clipboard is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,cut</span>: A cut of the selected text into the clipboard is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,paste</span>: A paste of the clipboard contents is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,start</span>: A selection is begun and no previous selection exists.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">text,set,done</span>: The whole text is set to the entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">theme,changed</span>: The theme is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">undo,request</span>: The request is undone.</li>
+  </ul>
+
+<p>For signals, where <span style="font-family: Courier New,Courier,monospace">event_info</span> has not been explicitly described, it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback to the <span style="font-family: Courier New,Courier,monospace">focused</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;focused&quot;, focused_cb, data);
+}
+
+// Callback function for the &quot;focused&quot; signal
+// This callback is called when the entry receive the focus
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Entry focused\n&quot;);
+} 
+</pre>
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_flip_mn.htm b/org.tizen.ui.practices/html/native/efl/component_flip_mn.htm
new file mode 100644
index 0000000..ff32149
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_flip_mn.htm
@@ -0,0 +1,177 @@
+<!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>Flip</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Flip Component</a></li>
+			<li><a href="#configure">Configuring Flip Animation</a></li>
+			<li><a href="#interact">Interacting With the User</a></li>
+			<li><a href="#callback">Using the Flip Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Flip</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+ 
+<p>The flip component can hold two <span style="font-family: Courier New,Courier,monospace">Evas_Objects</span> and allows the user flip between them using several pre-defined animations.</p>
+
+<p class="figure">Figure: Flip hierarchy</p> 
+<p align="center"> <img alt="Flip hierarchy" src="../../images/flip_tree.png" /> </p> 
+
+<h2 id="add">Adding a Flip Component</h2>
+
+<p>The following example shows how to create a flip component.</p>
+
+<pre class="prettyprint">
+Evas_Object *flip, *parent, *content1, *content2;
+flip = elm_flip_add(parent);
+</pre>
+
+<p>You can add content to the flip component. <span style="font-family: Courier New,Courier,monospace">content1</span> is set to the <span style="font-family: Courier New,Courier,monospace">front</span> content and <span style="font-family: Courier New,Courier,monospace">content2</span> is set to the <span style="font-family: Courier New,Courier,monospace">back</span> mode.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(flip, &quot;front&quot;, content1);
+elm_object_part_content_set(flip, &quot;back&quot;, content2);
+</pre>
+
+<h2 id="configure">Configuring Flip Animation</h2>
+
+<p>Now you can run an flip animation.</p>
+<pre class="prettyprint">
+elm_flip_go(flip, ELM_FLIP_CUBE_UP);
+</pre>
+
+<p>This animation flips up the <span style="font-family: Courier New,Courier,monospace">front</span> content object as if it was on a side of a cube, letting the down facing side of the cube appear with the <span style="font-family: Courier New,Courier,monospace">back</span> content object. Several animations are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_X_CENTER_AXIS</span>: Rotate the content around a horizontal axis.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_Y_CENTER_AXIS</span>: Rotate the content around a vertical axis.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_XZ_CENTER_AXIS</span>: Rotate the content around a diagonal axis.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_YZ_CENTER_AXIS</span>: Rotate the content around a diagonal axis.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_LEFT</span>: Rotate the content left as if it was on a side of a cube.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_RIGHT</span>: Rotate the content right as if it was on a side of a cube.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_UP</span>: Rotate the content up as if it was on a side of a cube.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_DOWN</span>: Rotate the content down as if it was on a side of a cube.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_LEFT</span>: Move the content to the left as if the flip was a book.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_RIGHT</span>: Move the content to the right as if the flip was a book.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_UP</span>: Move the content up as if the flip was a book.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_DOWN</span>: Move the content down as if the flip was a book.</li>
+  </ul>
+
+<h2 id="interact">Interacting With the User</h2>
+
+<p>By default, the user cannot interact with the flip. You can set the interaction to be possible, but you have to choose which animation appears on the interaction (rotation has been selected in the following example).</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
+</pre>
+
+<p>The available modes of interaction are</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_NONE</span>: No interaction is allowed</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_ROTATE</span>: Interaction causes a rotating animation</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_CUBE</span>: Interaction causes a cube animation</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_PAGE</span>: Interaction causes a page animation</li>
+  </ul>
+
+<p>You must also choose which interaction directions are enabled. Only right and left are enabled in the following example.</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
+elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);
+</pre>
+
+<p>You can also set the amount of the flip that is sensitive to user interaction. In the following example, it is set to the entire flip (1) to make the flip easy to interact with.</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
+elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
+</pre>
+
+<h2 id="callback">Using the Flip Callbacks</h2>
+
+<p>Two signals are emitted by the flip: one when an animation starts and one when it ends. For these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+&quot;animate,begin&quot; - A flip animation is started
+&quot;animate,done&quot; - A flip animation is finished
+</pre>
+
+<p>You can register a callback on the &quot;animation,begin&quot; signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;animate,begin&quot;, anim_start_cb, data);
+}
+
+// Callback function for the &quot;animate,begin&quot; signal
+// This callback is called when the flip animation starts
+void anim_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Animation starts\n&quot;);
+}</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_focus_n.htm b/org.tizen.ui.practices/html/native/efl/component_focus_n.htm
new file mode 100644
index 0000000..6efd6cb
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_focus_n.htm
@@ -0,0 +1,174 @@
+<!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>Managing Component Focus</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+				<li><a href="#Movement">Moving Focus</a></li>
+				<li><a href="#Customization">Customizing Focus</a></li>
+				<li><a href="#On_Component">Focus on UI Component</a></li>
+		</ul>	
+	<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Managing Component Focus</h1> 
+  
+
+<p>Focus is a graphical user interface concept. A component, for example, a UI component, has a focus when it is selected to receive input from the user. The input can be an event, such as mouse button click or key press. A UI component application has, at all times, one (and only one) focused object. This is what determines where the input event goes to within the application window. Also, focused objects can be decorated differently, in order to signal to the user where the input is at any given moment.</p>
+
+<p>Focusing can be immediate (selected by the touchscreen or mouse) or relative (selected by a key press). There are mainly 2 ways to set focus on a graphical elements:</p>
+
+<ul>
+<li>Direct selection: this is done by clicking on the element.
+<p>Direct selection does not really need any kind of special treatment as the user explicitly selects the UI component to interact with.</p></li>
+<li>Relative selection: this is done by moving the selection from a UI component to another, such as going to the previous or next one; this is done with a keyboard.
+<p>Relative selection&#39; default order is the one in which the UI components have been added to the canvas. That may not be appropriate, if they are added programmatically in a different order than they appear on-screen.</p></li>
+</ul>
+
+  
+<h2 id="Movement" name="Movement">Moving Focus</h2>
+
+<h3>Concept of Focus Chain</h3>
+<p>The order the focus goes from a UI component to another is called the focus chain. As said before, the default focus chain is set to the order the UI components have been added to the canvas.</p>
+
+<h3>Focusable Objects</h3>
+<p>An object can be focused if the following conditions apply:</p>
+
+<ul>
+<li>object is visible</li>
+<li>object is enabled</li>
+<li>object accepts focus</li>
+<li>object&#39;s subtree (if any) is focusable</li>
+<li>all of object&#39;s parents have their subtrees focusable</li>
+</ul>
+
+<p>If any of these conditions do not apply, the object is unfocusable.</p>
+
+<h3>Handling Key Input</h3>
+
+<p>Handling of the keys is done automatically by Elementary. According to which key the user pressed, Elementary switches the focus in the selected direction. For example, using the <span style="font-family: Courier New,Courier,monospace;">Tab</span> key the focus goes to the next object in the natural order, whereas using the direction keys the focus goes to the next object in the requested direction.</p>
+
+<h3>Hiding, Deleting or Disabling a Focused Object</h3>
+
+<p>When a UI component is hidden, deleted, or disabled, it becomes unfocusable.</p>
+
+<p>When a focused object is unfocusable, the focus is moved to another object.</p>
+
+<h3>Selecting Next Object</h3>
+
+<p>When the user wants to switch the focus to the next object (i.e. cycle focus), Elementary searches the first object which is focusable.</p>
+
+<p>If there is a disabled or read-only object in the focus chain, the focus goes to the following object in the requested direction.</p>
+
+<h2 id="Customization" name="Customization">Customizing Focus</h2>
+
+<p>There are several reasons why to customize the focus chain of an application, for example:</p>
+
+<ul>
+<li>If you have created a form with labels and text entries next to them, the focus moves to the entry field when the user clicks on the associated label.</li>
+<li>If you have created an interface with several columns (table), set the focus chain as you wish, for example, going horizontally instead of going vertically, regardless whatever the order the UI components are added.</li>
+</ul>
+
+<h3>Customizing Object&#39;s Focus Exit Chain </h3>
+
+<p>Set the object to focus after other object in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_set(object, next, direction)</span>. Use the following directions:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_NEXT</span>: next UI component in natural order</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_PREVIOUS</span>: previous UI component in natural order</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_UP</span>: UI component to focus when going up</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_DOWN</span>: UI component to focus when going down</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_RIGHT</span>: UI component to focus when going right</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_LEFT</span>: UI component to focus when going left</li>
+</ul>
+
+<p>Set the object next to another in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_get(object, direction)</span>.</p>
+
+<h3>Customizing Whole Application&#39;s Focus Chain</h3>
+
+<p>To customize the application&#39;s custom chain:</p>
+
+<pre class="prettyprint">
+Evas_Object *main, obj1, obj2, obj3, obj4, obj5;
+
+Eina_List *focus_chain = NULL;
+focus_chain = eina_list_append(focus_chain, obj3);
+focus_chain = eina_list_append(focus_chain, obj2);
+// The chain is obj3, then obj2. Set the chain.
+elm_object_focus_custom_chain_set(main, focus_chain);
+// Prepend obj5 at the beginning of the chain
+elm_object_focus_chain_prepend(main, NULL, obj5);
+// Append obj1 after obj3
+elm_object_focus_chain_append(main, obj3, obj1);
+// Prepend obj4 before obj1
+elm_object_focus_chain_prepend(main, obj1, obj4);
+</pre>
+
+<p>The focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4, obj1, obj2</span>.</p>
+
+<p>This actually applies to any container: it is possible to set the focus chain of, for example, a box.</p>
+
+<h3>Customizing Collision of Both</h3>
+
+<p>If an object is part of a focus chain and has the next focused object defined, the next object takes precedence over the focus chain.</p>
+
+<p>Following on the previous example, if <span style="font-family: Courier New,Courier,monospace;">obj4</span> has <span style="font-family: Courier New,Courier,monospace;">obj5</span> defined as its next object, the actual focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4</span>, and loop back to <span style="font-family: Courier New,Courier,monospace;">obj5</span>.</p>
+
+<h2 id="On_Component" name="On_Component">Focus on UI Component</h2>
+
+<p>If your Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each UI component if applicable.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_get(object)</span> to set whether a specific object has the focus. Set the focus to an object using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_set(object, set)</span>, where <span style="font-family: Courier New,Courier,monospace;">set</span> is a Boolean value. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the focus is set to that given object. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_False</span>, the focus is unset and passed back to the previous element in the focus chain. Set the focus only after the object is shown, that is, after <span style="font-family: Courier New,Courier,monospace;">evas_object_show(object)</span> has been called. Call the function back when the object receives or loses focus by registering on smart event &quot;focused&quot; or &quot;unfocused&quot;</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_set(object, focusable)</span> to tell Elementary whether an object and its children are focusable, where <span style="font-family: Courier New,Courier,monospace;">focusable</span> is a Boolean value. Get the current value using <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_get(object)</span>.</p>
+
+<p>The similar functions for a specific object are <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_set(object, focusable)</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_get(object)</span>. </p>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_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.practices/html/native/efl/component_gengrid_mn.htm b/org.tizen.ui.practices/html/native/efl/component_gengrid_mn.htm
new file mode 100644
index 0000000..76ed154
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_gengrid_mn.htm
@@ -0,0 +1,164 @@
+<!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>Gengrid</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Gengrid Component</a></li>
+			<li><a href="#items">Gengrid Items</a></li>
+			<li><a href="#create">Creating and Deleting Items</a></li>
+			<li><a href="#manage">Managing Items</a></li>
+			<li><a href="#callback">Using Gengrid Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Gengrid</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>Gengrid component is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. As for the genlist, callbacks are called at item creation or deletion.</p>
+
+<p>This UI component inherits from the layout component and implements the scroller interface. Because of this, the scroller and layout functions can be used with this UI component.</p>
+
+<p>A gengrid can display its items using a horizontal or vertical layout. In the first layout, the items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the second one, items are set in rows from left to right.</p>
+
+
+<p class="figure">Figure: Gengrid component</p> 
+<p align="center"> <img alt="Gengrid component" src="../../images/gengrid.png" /> </p> 
+ 
+<p class="figure">Figure: Gengrid hierarchy</p> 
+<p align="center"> <img alt="Gengrid hierarchy" src="../../images/gengrid_tree.png" /> </p> 
+
+<h2 id="add">Adding a Gengrid Component</h2>
+
+<p>You can add a gengrid component with the following code.</p>
+<pre class="prettyprint">
+Evas_Object *gengrid, *parent;
+gengrid = elm_gengrid_add(parent);
+</pre>
+
+<h2 id="items">Gengrid Items</h2>
+
+<p>A gengrid item is composed of 0 or more texts, 0 or more contents and 0 or more boolean states. The number of the text and content depends on the theme used for gengrid items. In the default Tizen gengrid item theme, items can have two content parts that can be set with the <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> part names.</p>
+
+<h2 id="create">Creating and Deleting Items</h2>
+
+<p>As with genlists, the items are allocated and deleted on the go, while the user is scrolling the gengrid. The following example shows how to declare a <span style="font-family: Courier New,Courier,monospace">Elm_Gengrid_Item_Class</span> structure to inform the gengrid how to manage items.</p>
+<pre class="prettyprint">
+static Elm_Gengrid_Item_Class *gic = elm_gengrid_item_class_new();
+gic-&gt;item_style = &quot;default&quot;;
+gic-&gt;func.text_get = _grid_label_get;
+gic-&gt;func.content_get = _grid_content_get;
+gic-&gt;func.state_get = _grid_state_get;
+gic-&gt;func.del = _grid_del;
+</pre>
+
+<p>The parameters of this structure are not be detailed here, because they are very similar to that of the genlist. Please refer to the genlist component page for more detailed information.</p>
+
+<h2 id="manage">Managing Items</h2>
+
+<p>As with genlists, items can be added with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_prepend()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_before()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_after()</span> functions. With the gengrid, there is no need to pass the <span style="font-family: Courier New,Courier,monospace">type</span> parameters. They can be cleared with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_clear()</span> function.</p>
+
+<p>You can set the multiselection mode on.</p>
+<pre class="prettyprint">
+elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
+</pre>
+
+<p>When the multiselection mode is on, the selected items are retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_selected_items_get()</span> function. The function returns a list of all the selected items.</p>
+
+<p>When the content of an item changes, you can call <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_update()</span> to ask the gengrid to update this item&#39;s content.</p>
+
+<p>It is also possible to select or disable some items manually with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_selected_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> functions.</p>
+
+<h2 id="callback">Using Gengrid Callbacks</h2>
+
+<p>The gengrid component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is activated.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is double-clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. By default it is one second.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user has selected an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is selected.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user has unselected an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is unselected.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item in the gengrid has its implementing Evas object instantiated, de facto. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the gengrid item that is created. The object can be deleted at any time, so it is strongly advisable not to use the object pointer returned from <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_object_get()</span>, because it can point to freed objects.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: The implementing Evas object for this item is deleted. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the gengrid item that is deleted.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: An item is added, removed, resized or moved and the gengrid is resized or has <span style="font-family: Courier New,Courier,monospace">horizontal</span> property changes.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the gengrid is dragged (not scrolled) up.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the gengrid has dragged (not scrolled) down.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the gengrid is dragged (not scrolled) left.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the gengrid is dragged (not scrolled) right.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the gengrid stops being dragged.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the gengrid is dragged.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content starts.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content stops.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The gengrid is scrolled to the top edge.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The gengrid is scrolled to the bottom edge.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The gengrid is scrolled to the left edge.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The gengrid is scrolled to the right edge.</li>
+  </ul>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_genlist_mn.htm b/org.tizen.ui.practices/html/native/efl/component_genlist_mn.htm
new file mode 100644
index 0000000..1a0fad3
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_genlist_mn.htm
@@ -0,0 +1,261 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Genlist</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#styles">Genlist Item Style</a></li>
+			<li><a href="#add">Adding a Genlist Component</a></li>
+			<li><a href="#items">Creating and Deleting Items</a></li>
+			<li><a href="#manage">Managing Items</a></li>
+			<li><a href="#selection">Selection</a></li>
+			<li><a href="#callback">Using Genlist Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Genlist</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>Genlist is a UI component that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint, as only the visible items are allocated in the memory.</p>
+
+<p>For more information, see <a href="genlist_tutorial_mn.htm">Creating Mobile Genlists</a>.</p>
+
+<p class="figure">Figure: Genlist component</p> 
+<p align="center"> <img alt="Genlist component" src="../../images/genlist.png" /> </p> 
+
+<p class="figure">Figure: Genlist hierarchy</p> 
+<p align="center"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p> 
+
+<h2 id="styles">Genlist Item Style</h2>
+
+<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively <span style="font-family: Courier New,Courier,monospace">labels</span>, <span style="font-family: Courier New,Courier,monospace">contents</span>, and <span style="font-family: Courier New,Courier,monospace">states</span> in the Edje file. The <span style="font-family: Courier New,Courier,monospace">default</span> item style provides one text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), two content parts (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>) and no state parts.</p>
+
+<p>The following item styles are available:</p>
+  <ul>
+	<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">full</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">one_icon</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">end_icon</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">group_index</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">double_label</span></li>
+  </ul>
+
+<p>Here are some examples of the item styles.</p>
+
+<p class="figure">Figure: Default item style</p> 
+<p align="center"> <img alt="Default item style" src="../../images/gl-default.png" /> </p> 
+
+<p class="figure">Figure: end_icon item style</p> 
+<p align="center"> <img alt="end_icon item style" src="../../images/gl-end-icon.png" /> </p> 
+
+<p class="figure">Figure: double_label item style</p> 
+<p align="center"> <img alt="double_label item style" src="../../images/gl-double-label.png" /> </p> 
+
+<p>For more information on creating a new genlist item style, see <a href="component_custom_n.htm">Customizing Components</a>.</p>
+
+<h2 id="add">Adding a Genlist Component</h2>
+
+<p>A genlist component is added with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *genlist, *parent;
+genlist = elm_genlist_add(parent);
+</pre>
+
+<h2 id="items">Creating and Deleting Items</h2>
+
+<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure that informs the genlist component which callbacks to call when an item is created or deleted.</p>
+
+<pre class="prettyprint">
+Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;decorate_item_style = NULL;
+itc-&gt;decorate_all_item_style = NULL;
+itc-&gt;func.text_get = _item_label_get;
+itc-&gt;func.content_get = _item_content_get;
+itc-&gt;func.state_get = _item_state_get;
+itc-&gt;func.del = _item_del;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style and the decorate all item style.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> and related item creation functions, and an <span style="font-family: Courier New,Courier,monospace">obj</span> parameter that points to the genlist object itself.</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">text_get</span>
+   <p>This function receives a <span style="font-family: Courier New,Courier,monospace">PART</span> parameter that is the name string of one of the existing text parts in the Edje group implementing the item&#39;s theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">content_get</span>
+   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">state_get</span>
+   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item&#39;s theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. Genlists emit a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter&#39;s theming Edje object with <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">elm</span> as <span style="font-family: Courier New,Courier,monospace">source</span> argument, when the state is true. xxx is the name of the (state) part.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">del</span>
+   <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
+</ul>
+
+<h2 id="manage">Managing Items</h2>
+
+<p>To add an item, several functions can be used. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> is otherwise the same but adds to the beginning of the list or children lists. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> inserts an item before the indicated item and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> inserts an item after the indicated item.</p>
+
+<p>The previous functions take a <span style="font-family: Courier New,Courier,monospace">type</span> parameter that can be one of the following.</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span></li>
+  </ul>
+
+<p>If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span> is set, this item is displayed as being able to expand and have child items. If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> is set, this item is a group index item that is displayed at the top until the next group appears.</p>
+
+<p class="figure">Figure: Genlist tree</p> 
+<p align="center"> <img alt="Genlist tree" src="../../images/genlist_tree.png" /> </p> 
+
+<p>The application clears the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span>, which deletes all the items in the list. <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> deletes a specific item. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> clears all items that are children of the indicated parent item.</p>
+
+<p>To help inspect the list items, move to the item at the top of the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span>, which returns the item pointer. <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> moves to the item at the end of the list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">As a tree, the items are flattened on the list, so <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> gives you the name of the parent item (even to skip them if needed).</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> scrolls the scroller to show the desired item as visible. </p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> returns the data pointer set by the item creation functions.</p>
+
+<p>If an item changes (state, boolean, text or content change), use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> for the genlist to update the item. Genlist re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Genlist_Item_Class</span> for it.</p>
+
+<h2 id="selection">Selection</h2>
+
+<p>Items are manually selected or deselected with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> or disabled with <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>. In case there is a tree or a group item, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function is used to expand or contract the item.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span> signals.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> to select multiple items. In the single-selection mode, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function can be called to retrieve the selected item. If several items are selected, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> returns a list of the current selected items.</p>
+
+<p>In the following figure, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).</p>
+
+<p class="figure">Figure: Genlist component</p> 
+<p align="center"> <img alt="Genlist component" src="../../images/genlist_multi.png"/> </p> 
+
+<h2 id="callback">Using Genlist Callbacks</h2>
+
+<p>The genlist component emits the following signals:</p>
+   <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. event_info in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback fills in the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback deletes the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">expand,request</span>: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">contract,request</span>: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>, that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. The default specified time is one second. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The genlist is scrolled to the top edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch swiped left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch swiped right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch swiped up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch swiped down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch pinched out. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch pinched in. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved,after</span>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved,before</span>: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program&#39;s language is changed. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+  </ul>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_genlist_wn.htm b/org.tizen.ui.practices/html/native/efl/component_genlist_wn.htm
new file mode 100644
index 0000000..29ed748
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_genlist_wn.htm
@@ -0,0 +1,266 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Genlist</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#styles">Genlist Item Style</a></li>
+			<li><a href="#add">Adding a Genlist Component</a></li>
+			<li><a href="#items">Creating and Deleting Items</a></li>
+			<li><a href="#manage">Managing Items</a></li>
+			<li><a href="#selection">Selection</a></li>
+			<li><a href="#callback">Using Genlist Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Genlist</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>Genlist is a UI component that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint, as only the visible items are allocated in the memory.</p>
+
+<p>For more information, see <a href="genlist_tutorial_wn.htm">Creating Wearable Genlists</a>.</p>
+  
+<p class="figure">Figure: Genlist component</p> 
+<p align="center"> <img alt="Genlist component" src="../../images/genlist.png" /> </p> 
+
+<p class="figure">Figure: Genlist hierarchy</p> 
+<p align="center"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p> 
+
+<h2 id="styles">Genlist Item Style</h2>
+
+<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively <span style="font-family: Courier New,Courier,monospace">labels</span>, <span style="font-family: Courier New,Courier,monospace">contents</span>, and <span style="font-family: Courier New,Courier,monospace">states</span> in the Edje file. The <span style="font-family: Courier New,Courier,monospace">default</span> item style provides one text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), two content parts (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>) and no state parts.</p>
+
+<p>The following item styles are available:</p>
+  <ul>
+	<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">groupindex</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">1text</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">1text.1icon</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">2text</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">2text.1</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">1text.1icon.divider</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">1text.1icon.1</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">2text.1icon.1</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">multiline/1text</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">multiline/2text</span></li>
+  </ul>
+
+<p>Here are some examples of the item styles.</p>
+
+<p class="figure">Figure: 1text item style</p> 
+<p align="center"> <img alt="1 text item style" src="../../images/genlist1_wn.png" /> </p> 
+
+<p class="figure">Figure: 1text.1icon.1 item style</p> 
+<p align="center"> <img alt="1text.1icon.1 item style" src="../../images/genlist2_wn.png" /> </p> 
+
+<p class="figure">Figure: 2text.1icon.1 item style</p> 
+<p align="center"> <img alt="2text.1icon.1 item style" src="../../images/genlist3_wn.png" /> </p> 
+
+<p>For more information on creating a new genlist item style, see <a href="component_custom_n.htm">Customizing Components</a>.</p>
+
+<h2 id="add">Adding a Genlist Component</h2>
+
+<p>A genlist component is added with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *genlist, *parent;
+genlist = elm_genlist_add(parent);
+</pre>
+
+<h2 id="items">Creating and Deleting Items</h2>
+
+<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure that informs the genlist component which callbacks to call when an item is created or deleted.</p>
+<pre class="prettyprint">
+Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;decorate_item_style = NULL;
+itc-&gt;decorate_all_item_style = NULL;
+itc-&gt;func.text_get = _item_label_get;
+itc-&gt;func.content_get = _item_content_get;
+itc-&gt;func.state_get = _item_state_get;
+itc-&gt;func.del = _item_del;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style and the decorate all item style.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> and related item creation functions, and an <span style="font-family: Courier New,Courier,monospace">obj</span> parameter that points to the genlist object itself.</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">text_get</span>
+   <p>This function receives a <span style="font-family: Courier New,Courier,monospace">PART</span> parameter that is the name string of one of the existing text parts in the Edje group implementing the item&#39;s theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">content_get</span>
+   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">state_get</span>
+   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item&#39;s theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. Genlists emit a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter&#39;s theming Edje object with <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">elm</span> as <span style="font-family: Courier New,Courier,monospace">source</span> argument, when the state is true. xxx is the name of the (state) part.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">del</span>
+   <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
+</ul>
+
+<h2 id="manage">Managing Items</h2>
+
+<p>To add an item, several functions can be used. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> is otherwise the same but adds to the beginning of the list or children lists. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> inserts an item before the indicated item and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> inserts an item after the indicated item.</p>
+
+<p>The previous functions take a <span style="font-family: Courier New,Courier,monospace">type</span> parameter that can be one of the following.</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span></li>
+  </ul>
+
+<p>If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span> is set, this item is displayed as being able to expand and have child items. If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> is set, this item is a group index item that is displayed at the top until the next group appears.</p>
+
+<p class="figure">Figure: Genlist tree</p> 
+<p align="center"> <img alt="Genlist tree" src="../../images/genlist_tree.png" /> </p> 
+
+<p>The application clears the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span>, which deletes all the items in the list. <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> deletes a specific item. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> clears all items that are children of the indicated parent item.</p>
+
+<p>To help inspect the list items, move to the item at the top of the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span>, which returns the item pointer. <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> moves to the item at the end of the list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">As a tree, the items are flattened on the list, so <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> gives you the name of the parent item (even to skip them if needed).</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> scrolls the scroller to show the desired item as visible. </p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> returns the data pointer set by the item creation functions.</p>
+
+<p>If an item changes (state, boolean, text or content change), use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> for the genlist to update the item. Genlist re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Genlist_Item_Class</span> for it.</p>
+
+<h2 id="selection">Selection</h2>
+
+<p>Items are manually selected or deselected with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> or disabled with <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>. In case there is a tree or a group item, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function is used to expand or contract the item.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span> signals.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> to select multiple items. In the single-selection mode, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function can be called to retrieve the selected item. If several items are selected, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> returns a list of the current selected items.</p>
+
+<p>In the following figure, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).</p>
+
+<p class="figure">Figure: Genlist component</p> 
+<p align="center"> <img alt="Genlist component" src="../../images/genlist_multi.png"/> </p> 
+
+<h2 id="callback">Using Genlist Callbacks</h2>
+
+<p>The genlist component emits the following signals:</p>
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. event_info in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback fills in the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback deletes the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">expand,request</span>: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">contract,request</span>: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>, that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. The default specified time is one second. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The genlist is scrolled to the top edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch swiped left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch swiped right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch swiped up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch swiped down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch pinched out. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch pinched in. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved,after</span>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved,before</span>: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program&#39;s language is changed. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+  </ul>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_glview_mn.htm b/org.tizen.ui.practices/html/native/efl/component_glview_mn.htm
new file mode 100644
index 0000000..06fd018
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_glview_mn.htm
@@ -0,0 +1,173 @@
+<!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>GLView</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a GLView Component</a></li>
+			<li><a href="#use">Using the GLView API</a></li>
+			<li><a href="#callback">Using GLView Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>				
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>GLView</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+
+<p> The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a>.</p>
+
+      <p class="figure">Figure: GLView gears example</p> 
+  <p align="center"><img alt="GLView gears example" src="../../images/glview.png" /></p> 
+  
+      <p class="figure">Figure: GLView hierarchy</p> 
+  <p align="center"><img alt="GLView hierarchy" src="../../images/glview_tree.png" /></p>
+
+<h2 id="add">Adding a GLView Component</h2>
+
+<p>Create a GLView component with the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *glview, *parent;
+
+glview = elm_glview_add(parent);
+</pre>
+
+<p>In this example, the size of the GLView is set to 200x200 pixels.</p>
+<pre class="prettyprint">
+elm_glview_size_set(glview, 200, 200);
+</pre>
+
+<h2 id="use">Using the GLView API</h2>
+
+<p>You can configure the GLView rendering mode by activating the following rendering modes:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Alpha channel rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Depth buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Stencil buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DIRECT</span>: Direct rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span>: The client handles the GL view rotation if direct rendering is enabled</li>
+</ul>
+
+<p>In the following example, the alpha channel and depth buffer rendering mode are enabled.</p>
+<pre class="prettyprint">
+elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
+</pre>
+
+<p>The following example shows how to decide what to do with the GL surface when the GLView component is resized.</p>
+<pre class="prettyprint">
+elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+</pre>
+
+<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
+
+<p>The following example shows how to set the GLView rendering policy.</p>
+<pre class="prettyprint">
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
+</pre>
+
+<p>The GLView object is always redrawn during the rendering loop. It can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), where the GLView component is redrawn only when it is visible.</p>
+
+<p>Register the callbacks:</p>
+
+<pre class="prettyprint">elm_glview_init_func_set(glview, _init_gl_cb);
+elm_glview_del_func_set(glview, _del_gl_cb);
+elm_glview_resize_func_set(glview, _resize_gl_cb);
+elm_glview_render_func_set(glview, _draw_gl_cb);
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_init_func_set()</span> registers an init callback that is called at the GLView object creation.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_del_func_set()</span> registers a del function that is called when the GLView object is deleted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_resize_func_set()</span> registers the resize function that is called during the rendering loop when the GLView object is resized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_render_func_set()</span> registers the render function that is called when the GLView object must be redrawn.</li>
+</ul>
+
+<h2 id="callback">Using GLView Callbacks</h2>
+
+<p>The GLView component emits the following signals:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">focused</span>: The Glview component is focused. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
+</ul>
+
+<p>To register a callback:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(glview, &quot;focused&quot;, focused_cb, data);
+}
+
+// Callback function for the &quot;focused&quot; signal
+// This callback is called when the GLView is focused
+void focused_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Focus_Info *fi = event_info;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;GLView is focused\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_glview_wn.htm b/org.tizen.ui.practices/html/native/efl/component_glview_wn.htm
new file mode 100644
index 0000000..e32c5bb
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_glview_wn.htm
@@ -0,0 +1,172 @@
+<!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>GLView</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a GLView Component</a></li>
+			<li><a href="#use">Using the GLView API</a></li>
+			<li><a href="#callback">Using GLView Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>GLView</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+
+<p> The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a>.</p>
+
+
+      <p class="figure">Figure: GLView example</p> 
+  <p align="center"><img alt="GLView example" src="../../images/glview_wn.png" /></p> 
+  
+      <p class="figure">Figure: GLView hierarchy</p> 
+  <p align="center"><img alt="GLView hierarchy" src="../../images/glview_tree.png" /></p>
+
+<h2 id="add">Adding a GLView Component</h2>
+
+<p>Create a GLView component with the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *glview, *parent;
+
+glview = elm_glview_add(parent);
+</pre>
+
+<p>In this example, the size of the GLView is set to 200x200 pixels.</p>
+<pre class="prettyprint">
+elm_glview_size_set(glview, 200, 200);
+</pre>
+
+<h2 id="use">Using the GLView API</h2>
+
+<p>You can configure the GLView rendering mode by activating the following rendering modes:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Alpha channel rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Depth buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Stencil buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DIRECT</span>: Direct rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span>: The client handles the GL view rotation if direct rendering is enabled</li>
+</ul>
+
+<p>In the following example, the alpha channel and depth buffer rendering mode are enabled.</p>
+<pre class="prettyprint">
+elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
+</pre>
+
+<p>The following example shows how to decide what to do with the GL surface when the GLView component is resized.</p>
+<pre class="prettyprint">
+elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+</pre>
+
+<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
+
+<p>The following example shows how to set the GLView rendering policy.</p>
+<pre class="prettyprint">
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
+</pre>
+
+<p>The GLView object is always redrawn during the rendering loop. It can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), where the GLView component is redrawn only when it is visible.</p>
+
+<p>Register the callbacks:</p>
+<pre class="prettyprint">elm_glview_init_func_set(glview, _init_gl_cb);
+elm_glview_del_func_set(glview, _del_gl_cb);
+elm_glview_resize_func_set(glview, _resize_gl_cb);
+elm_glview_render_func_set(glview, _draw_gl_cb);
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_init_func_set()</span> registers an init callback that is called at the GLView object creation.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_del_func_set()</span> registers a del function that is called when the GLView object is deleted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_resize_func_set()</span> registers the resize function that is called during the rendering loop when the GLView object is resized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_render_func_set()</span> registers the render function that is called when the GLView object must be redrawn.</li>
+</ul>
+
+<h2 id="callback">Using GLView Callbacks</h2>
+
+<p>The GLView component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">focused</span>: The GlView component is focused. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
+</ul>
+
+<p>To register a callback:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(glview, &quot;focused&quot;, focused_cb, data);
+}
+
+// Callback function for the &quot;focused&quot; signal
+// This callback is called when the GLView is focused
+void focused_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Focus_Info *fi = event_info;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;GLView is focused\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_icon_mn.htm b/org.tizen.ui.practices/html/native/efl/component_icon_mn.htm
new file mode 100644
index 0000000..025d772
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_icon_mn.htm
@@ -0,0 +1,128 @@
+<!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>Icon</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Icon Component</a></li>
+			<li><a href="#image">Changing Image File</a></li>
+			<li><a href="#callback">Using Icon Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Icon</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The icon component inherits from the image component. It is used to display images in an icon context.</p>
+
+<p class="figure">Figure: Icon component</p> 
+<p align="center"> <img alt="Icon component" src="../../images/icon.png" /> </p> 
+ 
+<p class="figure">Figure: Icon hierarchy</p> 
+<p align="center"> <img alt="Icon hierarchy" src="../../images/icon_tree.png" /> </p> 
+
+<h2 id="add">Adding an Icon Component</h2>
+
+<p>You can create an icon and set it as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon, *parent;
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;Home&quot;);
+</pre>
+
+<h2 id="image">Changing Image File</h2>
+
+<p>You can change the image by using an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+</pre>
+
+<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, &quot;/tmp/Home.edj&quot;, &quot;elm/icon/Home/default&quot;);
+</pre>
+
+<p>A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.</p>
+
+<pre class="prettyprint">
+elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+</pre>
+
+<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
+
+<h2 id="callback">Using Icon Callbacks</h2>
+
+<p>The icon component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> is completed with success.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> fails.</li>
+  </ul>
+
+<p>In both cases, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_icon_wn.htm b/org.tizen.ui.practices/html/native/efl/component_icon_wn.htm
new file mode 100644
index 0000000..c670b68
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_icon_wn.htm
@@ -0,0 +1,126 @@
+<!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>Icon</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Icon Component</a></li>
+			<li><a href="#change">Changing Image File</a></li>
+			<li><a href="#callback">Using Icon Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Icon</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The icon component inherits from the image component. It is used to display images in an icon context.</p>
+
+
+<p class="figure">Figure: Icon hierarchy</p> 
+<p align="center"> <img alt="Icon hierarchy" src="../../images/icon_tree.png" /> </p> 
+
+<h2 id="add">Adding an Icon Component</h2>
+
+<p>You can create an icon and set it as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon, *parent;
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;Home&quot;);
+</pre>
+
+<h2 id="change">Changing Image File</h2>
+
+<p>You can change the image by using an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+</pre>
+
+<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, &quot;/tmp/Home.edj&quot;, &quot;elm/icon/Home/default&quot;);
+</pre>
+
+<p>A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.</p>
+
+<pre class="prettyprint">
+elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+</pre>
+
+<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
+
+<h2 id="callback">Using Icon Callbacks</h2>
+
+<p>The icon component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> is completed with success.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> fails.</li>
+  </ul>
+
+<p>In both cases, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_image_mn.htm b/org.tizen.ui.practices/html/native/efl/component_image_mn.htm
new file mode 100644
index 0000000..34f438d
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_image_mn.htm
@@ -0,0 +1,163 @@
+<!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>Image</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Image Component</a></li>
+			<li><a href="#configure">Configuring the Image Component</a></li>
+			<li><a href="#callback">Using Image Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Image</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The image component can load and display an image from a disk file or a memory region.</p>
+
+<p class="figure">Figure: Image component</p> 
+<p align="center"> <img alt="Image component" src="../../images/image.png" /> </p>   
+
+<p class="figure">Figure: Image hierarchy</p> 
+<p align="center"> <img alt="Image hierarchy" src="../../images/image_tree.png" /> </p>   
+
+<h2 id="add">Adding an Image Component</h2>
+
+<p>This object is created with <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *image, *parent;
+image = elm_image_add(parent);
+</pre>
+
+<h2 id="configure">Configuring the Image Component</h2>
+
+<p>Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.</p>
+<pre class="prettyprint">
+elm_image_no_scale_set(image, EINA_TRUE);
+elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
+</pre>
+
+<p>When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.</p>
+<pre class="prettyprint">
+elm_image_smooth_set(image, EINA_TRUE);
+</pre>
+
+<p>Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.</p>
+<pre class="prettyprint">
+elm_image_preload_disabled_set(image, EINA_TRUE);
+</pre>
+
+<p>The image can be rotated or flipped. Here the image is rotated 180 degrees.</p>
+<pre class="prettyprint">
+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
+</pre>
+
+<p>The following orientations are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ORIENT_0</span>: No orientation change</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_90</span>: Rotate the image 90 degrees clockwise</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_180</span>: Rotate the image 180 degrees clockwise</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_270</span>: Rotate the image 90 degrees counter-clockwise</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_HORIZONTAL</span>: Flip the image horizontally</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_VERTICAL</span>: Flip the image vertically</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSPOSE</span>: Flip the image along the bottom-left to top-right line</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSVERSE</span>: Flip the image along the top-left to bottom-right line</li>
+  </ul>
+  
+<p>If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object&#39;s area.</p>
+<pre class="prettyprint">
+// Tell the image to keep original aspect ratio 
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fill the entire object 
+elm_image_fill_outside_set(image, EINA_TRUE);
+</pre>
+
+<p>In this configuration, part of the image can go outside the object. If <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set</span> is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the image stays inside the limits of the parent object.</p>
+
+<h2 id="callback">Using Image Callbacks</h2>
+
+<p>The image component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">drop</span>: The user drops an image typed object onto the object in question - the event info argument is the path to that image file</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks the image. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+  </ul>
+
+<p>To register a callback when a user clicks on the image:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(image, &quot;clicked&quot;, clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the image is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Image clicked\n&quot;);
+}
+</pre>  
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_image_wn.htm b/org.tizen.ui.practices/html/native/efl/component_image_wn.htm
new file mode 100644
index 0000000..1e74051
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_image_wn.htm
@@ -0,0 +1,164 @@
+<!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>Image</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Image Component</a></li>
+			<li><a href="#configure">Configuring the Image Component</a></li>
+			<li><a href="#callback">Using Image Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Image</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The image component can load and display an image from a disk file or a memory region.</p>
+
+<p class="figure">Figure: Image component</p> 
+<p align="center"> <img alt="Image component" src="../../images/image_wn.png" /> </p>  
+
+<p class="figure">Figure: Image hierarchy</p> 
+<p align="center"> <img alt="Image hierarchy" src="../../images/image_tree.png" /> </p>   
+
+<h2 id="add">Adding an Image Component</h2>
+
+<p>This object is created with <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *image, *parent;
+image = elm_image_add(parent);
+</pre>
+
+<h2 id="configure">Configuring the Image Component</h2>
+
+<p>Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.</p>
+<pre class="prettyprint">
+elm_image_no_scale_set(image, EINA_TRUE);
+elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
+</pre>
+
+<p>When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.</p>
+<pre class="prettyprint">
+elm_image_smooth_set(image, EINA_TRUE);
+</pre>
+
+<p>Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.</p>
+<pre class="prettyprint">
+elm_image_preload_disabled_set(image, EINA_TRUE);
+</pre>
+
+<p>The image can be rotated or flipped. Here the image is rotated 180 degrees.</p>
+<pre class="prettyprint">
+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
+</pre>
+
+<p>The following orientations are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ORIENT_0</span>: No orientation change</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_90</span>: Rotate the image 90 degrees clockwise</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_180</span>: Rotate the image 180 degrees clockwise</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_270</span>: Rotate the image 90 degrees counter-clockwise</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_HORIZONTAL</span>: Flip the image horizontally</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_VERTICAL</span>: Flip the image vertically</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSPOSE</span>: Flip the image along the bottom-left to top-right line</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSVERSE</span>: Flip the image along the top-left to bottom-right line</li>
+  </ul>
+  
+<p>If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object&#39;s area.</p>
+<pre class="prettyprint">
+// Tell the image to keep original aspect ratio 
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fill the entire object 
+elm_image_fill_outside_set(image, EINA_TRUE);
+</pre>
+
+<p>In this configuration, part of the image can go outside the object. If <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set</span> is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the image stays inside the limits of the parent object.</p>
+
+<h2 id="callback">Using Image Callbacks</h2>
+
+<p>The image component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">drop</span>: The user drops an image typed object onto the object in question - the event info argument is the path to that image file</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks the image. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+  </ul>
+
+<p>To register a callback when a user clicks on the image:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(image, &quot;clicked&quot;, clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the image is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Image clicked\n&quot;);
+}
+</pre>  
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_index_mn.htm b/org.tizen.ui.practices/html/native/efl/component_index_mn.htm
new file mode 100644
index 0000000..e1325b1
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_index_mn.htm
@@ -0,0 +1,168 @@
+<!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>Index</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Index Component</a></li>
+			<li><a href="#items">Adding Items</a></li>
+			<li><a href="#sort">Sorting Index Items</a></li>
+			<li><a href="#callback">Using Index Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Index</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+ 
+<p>An index component gives you an index for fast access to whichever group of other UI items you have. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index component&#39;s container. Generally, an index is used together with lists, generic lists, or generic grids.</p>
+
+<p class="figure">Figure: Index component</p> 
+<p align="center"> <img alt="Index component" src="../../images/index.png" /> </p> 
+ 
+<p class="figure">Figure: Index hierarchy</p> 
+<p align="center"> <img alt="Index hierarchy" src="../../images/index_tree.png" /> </p> 
+
+<h2 id="add">Adding an Index Component</h2>
+
+<p>Call the <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> function to create a new index component.</p>
+<pre class="prettyprint">
+Evas_Object *index, *parent;
+index = elm_index_add(parent);
+</pre>
+
+<h2 id="items">Adding Items</h2>
+
+<p>The following example shows how to add the listitem object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when this item is selected.</p>
+<pre class="prettyprint">
+Elm_Object_Item *list_item1, *list_item2;
+elm_index_item_append(index, &quot;A&quot;, it_select_cb, list_item1);
+</pre>
+
+<p>The following example shows how to define the smart callback.</p>
+<pre class="prettyprint">
+// Callback function called when the list_item1 object
+// is selected
+void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item1 selected\n&quot;);
+}
+</pre>
+
+<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span>.</p>
+
+<h2 id="sort">Sorting Index Items</h2>
+
+<p>You can insert index items using a sorting function. Indexes can be sorted, for example, by alphabetic order.</p>
+
+<p>You must write a compare function that returns a positive <span style="font-family: Courier New,Courier,monospace">int</span>, 0 or a negative <span style="font-family: Courier New,Courier,monospace">int</span> when the <span style="font-family: Courier New,Courier,monospace">data2</span> item parameter is respectively greater than, equal to or lower than the <span style="font-family: Courier New,Courier,monospace">data1</span> parameter.</p>
+
+<pre class="prettyprint">
+static int
+_index_icmp(const void *data1,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const void *data2)
+{
+&nbsp;&nbsp;&nbsp;int result;
+
+&nbsp;&nbsp;&nbsp;// Code that does the item comparison is written here
+
+&nbsp;&nbsp;&nbsp;return result;
+}
+</pre>
+
+<p>This example shows how to add a new item at the <span style="font-family: Courier New,Courier,monospace">B</span> index using the compare function to sort the indexes.</p>
+
+<pre class="prettyprint">
+elm_index_item_sorted_insert(index, &quot;B&quot;, NULL, list_item2, _index_icmp, NULL);
+</pre>
+
+<h2 id="callback">Using Index Callbacks</h2>
+
+<p>The index component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user releases a mouse button and selects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">level,up</span>: The user moves a finger from the first level to the second level.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">level,down</span>: The user moves a finger from the second level to the first level.</li>
+  </ul>
+
+<p>When the user selects an item in the index, the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.</p>
+<pre class="prettyprint">
+static void
+_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *lit = event_info;
+
+&nbsp;&nbsp;&nbsp;// Code that does the desired action
+}
+</pre>
+
+<p>After that, the callback to the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is registered.</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(index, &quot;selected&quot;, _index_selected_cb, NULL);
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_index_wn.htm b/org.tizen.ui.practices/html/native/efl/component_index_wn.htm
new file mode 100644
index 0000000..0ac1f02
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_index_wn.htm
@@ -0,0 +1,153 @@
+<!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>Index</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding an Index Component</a></li>
+			<li><a href="#items">Adding Items</a></li>
+			<li><a href="#callback">Using Index Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>				
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Index</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>An index component gives you an index for fast access to whichever group of other UI items you have. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index component&#39;s container. Generally, an index is used together with lists, generic lists, or generic grids.</p>
+
+ 
+<p class="figure">Figure: Index component</p> 
+<p align="center"> <img alt="Index component" src="../../images/index_wn.png" /> </p> 
+ 
+<p class="figure">Figure: Index hierarchy</p> 
+<p align="center"> <img alt="Index hierarchy" src="../../images/index_tree.png" /> </p> 
+
+<h2 id="add">Adding an Index Component</h2>
+
+<p>Call the <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> function to create a new index component.</p>
+<pre class="prettyprint">
+Evas_Object *index, *parent;
+index = elm_index_add(parent);
+</pre>
+
+<h2 id="items">Adding Items</h2>
+
+<p>The following example shows how to add the listitem object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when this item is selected.</p>
+<pre class="prettyprint">
+Elm_Object_Item *list_item1, *list_item2;
+elm_index_item_append(index, &quot;A&quot;, it_select_cb, list_item1);
+</pre>
+
+<p>The following example shows how to add item objects, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when the item is selected.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it[5];
+for (i = 0; i &lt; 5; ++i)
+{
+&nbsp;&nbsp;&nbsp;it[i] = elm_index_item_append(index, NULL, it_select_cb, (void *) i);
+}</pre>
+
+<p>The following example shows how to define the smart callback.</p>
+<pre class="prettyprint">
+// Callback function called when the list_item1 object
+// is selected
+void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item1 selected\n&quot;);
+}
+</pre>
+
+<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span>.</p>
+
+
+<h2 id="callback">Using Index Callbacks</h2>
+
+<p>The index component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user releases a mouse button and selects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">level,up</span>: The user moves a finger from the first level to the second level.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">level,down</span>: The user moves a finger from the second level to the first level.</li>
+  </ul>
+
+<p>When the user selects an item in the index, the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.</p>
+<pre class="prettyprint">
+static void
+_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *lit = event_info;
+
+&nbsp;&nbsp;&nbsp;// Code that does the desired action
+}
+</pre>
+
+<p>After that, the callback to the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is registered.</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(index, &quot;selected&quot;, _index_selected_cb, NULL);
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_infra_n.htm b/org.tizen.ui.practices/html/native/efl/component_infra_n.htm
new file mode 100644
index 0000000..274b9a2
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_infra_n.htm
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>UI Component Infrastructure Modules: Managing Component Properties</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>UI Component Infrastructure Modules: Managing Component Properties</h1> 
+  
+<p>The Elementary library is composed of many UI components to support Tizen native applications. While using UI components, you must manage their common properties. To meet this requirement, Elementary creates some infrastructure modules in order to support many UI components. Currently, Elementary provides following infrastructure modules: </p>
+<ul><li><a href="component_focus_n.htm">Component focus</a>
+<p>A UI component application always has 1 focused object, which is selected to receive input from the user. The focus can change between objects, and the focused object can be decorated on the screen to make it easily visible.</p></li>
+<li><a href="touch_gesture_n.htm">Handling touch gestures for components</a>
+<p>UI components generally handle basic touch inputs, such as press, release and moving. However, in some use cases (for example, when the accessibility Assistive Technology (AT) client is working), handling for a variety of touch gesture events (such as tap, double-tap, triple-tap, double-tap and hold, and left/right/up/down swipe) is needed. Elementary can also create new touch gesture patterns according to application use cases.</p>
+</li>
+<li><a href="component_custom_n.htm">Customizing components</a>
+<p>Elementary provides basic UI components based on the Tizen UX styles which you can use. Usually, you can use the supported UI components themselves to make your application. However, if you need to use other styles than the basic ones, you must customize the UI component style.</p></li>
+<li>UI mirroring
+<p>Elementary provides UI mirroring, which allows you to set UI mirroring on specific UI components or the whole interface. This facility is very useful to support applications which need both right-to-left and left-to-right languages.</p></li></ul>
+
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/component_label_mn.htm b/org.tizen.ui.practices/html/native/efl/component_label_mn.htm
new file mode 100644
index 0000000..295beea
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_label_mn.htm
@@ -0,0 +1,155 @@
+<!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>Label</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Label Component</a></li>
+			<li><a href="#styles">Using the Label Styles</a></li>
+			<li><a href="#configure">Configuring the Label</a></li>
+			<li><a href="#callback">Using the Label Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Label</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The label component displays text with simple html-like markup.</p>
+
+
+<p class="figure">Figure: Label component</p> 
+<p align="center"> <img alt="Label component" src="../../images/label.png" /> </p> 
+ 
+<p class="figure">Figure: Label hierarchy</p> 
+<p align="center"> <img alt="Label hierarchy" src="../../images/label_tree.png" /> </p> 
+
+<h2 id="add">Adding a Label Component</h2>
+
+<p>To add a label and set the text in it, use the following functions.</p>
+
+<pre class="prettyprint">
+Evas_Object *label = elm_label_add(win);
+
+elm_object_text_set(label, &quot;Some long text for our label, that is not so long&quot;);
+</pre>
+
+<h2 id="styles">Using the Label Styles</h2>
+
+<p>Label displays the text with several predefined styles.</p>
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">default</span>: No animation</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">marker</span>: The text is centered and bolded.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>   
+  </ul>
+
+<p>Here the style is set to <span style="font-family: Courier New,Courier,monospace">slide_long</span>.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(label, &quot;slide_long&quot;);
+</pre>
+
+<h2 id="configure">Configuring the Label</h2>
+
+<p>The duration of the animation and the slide mode can be set with the following functions.</p>
+<pre class="prettyprint">
+elm_label_slide_duration_set(label, 3);
+elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
+</pre>
+
+<p>Use the following function to modify the style.</p>
+<pre class="prettyprint">
+elm_object_style_set(label, &quot;slide_bounce&quot;);
+</pre>
+
+<h2 id="callback">Using the Label Callbacks</h2>
+
+<p>This UI component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program&#39;s language changes.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">slide,end</span>: The slide reaches the end.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+  </ul>
+  
+<p>The following example registers a callback on the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(label, &quot;slide,end&quot;, slide_end_cb, data);
+}
+
+// Callback function for the &quot;slide,end&quot; signal
+// This callback is called when the label slide reaches the end
+void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Slide has reach the end.\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_label_wn.htm b/org.tizen.ui.practices/html/native/efl/component_label_wn.htm
new file mode 100644
index 0000000..e41947a
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_label_wn.htm
@@ -0,0 +1,156 @@
+<!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>Label</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Label Component</a></li>
+			<li><a href="#styles">Using the Label Styles</a></li>
+			<li><a href="#configure">Configuring the Label</a></li>
+			<li><a href="#callback">Using the Label Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Label</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The label component displays text with simple html-like markup.</p>
+
+<p class="figure">Figure: Label component</p> 
+<p align="center"> <img alt="Label component" src="../../images/label_wn.png" /> </p> 
+ 
+<p class="figure">Figure: Label hierarchy</p> 
+<p align="center"> <img alt="Label hierarchy" src="../../images/label_tree.png" /> </p> 
+
+<h2 id="add">Adding a Label Component</h2>
+
+<p>To add a label and set the text in it, use the following functions.</p>
+
+<pre class="prettyprint">
+Evas_Object *label = elm_label_add(win);
+
+elm_object_text_set(label, &quot;Some long text for our label, that is not so long&quot;);
+</pre>
+
+<h2 id="styles">Using the Label Styles</h2>
+
+<p>Label displays the text with several predefined styles.</p>
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">default</span>: No animation</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">marker</span>: The text is centered and bolded.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_roll</span>: The text appears from the left of the label and slides to the right to show the overflow, and then appears from the right of the label again.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>   
+  </ul>
+
+<p>Here the style is set to <span style="font-family: Courier New,Courier,monospace">slide_roll</span>.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(label, &quot;slide_roll&quot;);
+</pre>
+
+<h2 id="configure">Configuring the Label</h2>
+
+<p>The duration of the animation and the slide mode can be set with the following functions.</p>
+<pre class="prettyprint">
+elm_label_slide_duration_set(label, 3);
+elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
+</pre>
+
+<p>Use the following function to modify the style.</p>
+<pre class="prettyprint">
+elm_object_style_set(label, &quot;slide_bounce&quot;);
+</pre>
+
+<h2 id="callback">Using the Label Callbacks</h2>
+
+<p>This UI component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program&#39;s language changes.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">slide,end</span>: The slide reaches the end.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+  </ul>
+  
+<p>The following example registers a callback on the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(label, &quot;slide,end&quot;, slide_end_cb, data);
+}
+
+// Callback function for the &quot;slide,end&quot; signal
+// This callback is called when the label slide reaches the end
+void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Slide has reach the end.\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_list_mn.htm b/org.tizen.ui.practices/html/native/efl/component_list_mn.htm
new file mode 100644
index 0000000..fae75d3
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_list_mn.htm
@@ -0,0 +1,253 @@
+<!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>List</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a List Component</a></li>
+			<li><a href="#use">Using the List</a></li>
+			<li><a href="#add_item">Adding Items to the List</a></li>
+			<li><a href="#change">Changing the Text or Icon of an Item</a></li>
+			<li><a href="#retrieve">Retrieving Selected Items</a></li>
+			<li><a href="#operation">List Item Operations</a></li>
+			<li><a href="#callback">Using List Callbacks</a></li>
+			
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>List</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+  
+ <p>This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option. </p>
+
+ <p>The list items can contain a text and two contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). These are set with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_*()</span> functions. </p>
+
+ 
+ <p class="figure">Figure: List component</p> 
+<p align="center"> <img alt="List component" src="../../images/list.png" /> </p> 
+  
+  <p class="figure">Figure: List hierarchy</p> 
+<p align="center"> <img alt="List hierarchy" src="../../images/list_tree.png" /> </p> 
+ 
+<h2 id="add">Adding a List Component</h2>
+
+<pre class="prettyprint">
+Evas_Object *list, *parent;
+
+// Create a list 
+list = elm_list_add(parent);
+</pre>
+
+<h2 id="use">Using the List</h2>
+
+<p>This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Change the scroller policy to fix the scroll only vertically
+elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_ON, ELM_SCROLLER_POLICY_OFF);
+// Enable bounce effect when the list reaches the upper and lower limits 
+elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Activate multi selection 
+elm_list_multi_select_set(list, EINA_TRUE);
+</pre>
+
+<h2 id="add_item">Adding Items to the List</h2>
+
+ <p>Items are added with <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span>. Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+int i;
+
+// This function is called when the list item is selected 
+static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+&nbsp;&nbsp;&nbsp;Eina_Bool selected = elm_list_item_selected_get(list_it);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;item is %s\n&quot;, selected? &quot;selected&quot;: &quot;unselected&quot;);
+}
+
+for (i = 0; i &lt; 10; i++)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *ic;
+&nbsp;&nbsp;&nbsp;char tmp[8];
+&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Item %02d&quot;, i);
+&nbsp;&nbsp;&nbsp;// Create an icon 
+&nbsp;&nbsp;&nbsp;ic = elm_icon_add(win);
+&nbsp;&nbsp;&nbsp;// Set the file to the icon file 
+&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+&nbsp;&nbsp;&nbsp;// Add item to the list 
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+}
+
+</pre>
+ 
+<h2 id="change">Changing the Text or Icon of an Item</h2>
+
+<p>If you want to change the state of an item, you can do it by using all the functions relative to <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>. Each item of the list contains two instances of an <span style="font-family: Courier New,Courier,monospace">evas_object</span>. Give those as the third and the fourth arguments when you append or prepend the item in the list. The <span style="font-family: Courier New,Courier,monospace">evas_object</span> instances are changed with <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The first object is referenced as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme, whereas the second one is referenced as the <span style="font-family: Courier New,Courier,monospace">end</span> object. Give these names when you use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The label of the item is changed by using <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Eina_List *l;
+Elm_Object_Item *it;
+
+// Retrieve the current selected item 
+it = elm_list_selected_item_get(list);
+if (!it)
+&nbsp;&nbsp;&nbsp;return;
+
+ic = elm_icon_add(win);
+// Set the file to the icon file 
+elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+// Change the first icon 
+elm_object_item_part_content_set(it, &quot;start&quot;, ic);
+// Change the second icon 
+elm_object_item_part_content_set(it, &quot;end&quot;, ic);
+// Change the label 
+elm_object_item_text_set(it, &quot;I&#39;ve been selected !&quot;);
+</pre>
+  
+<h2 id="retrieve">Retrieving Selected Items</h2>
+
+ <p>The list of the currently selected items is retrieved with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span>. If the multiselect mode is false, you can retrieve the only selected item with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span>. For example, this is how to unselect all previously selected items.</p>
+
+<pre class="prettyprint">
+Evas_Object *list; Eina_List *l;
+Eina_List *selected_items;
+// List of Elm_Object_Item 
+Elm_Object_Item *it;
+
+selected_items = elm_list_selected_items_get(list);
+EINA_LIST_FOREACH(selected_items, l, it)
+&nbsp;&nbsp;&nbsp;elm_list_item_selected_set(it, EINA_FALSE);
+</pre>
+
+<h2 id="operation">List Item Operations</h2>
+
+ <p>To find out if an item is selected, call <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get</span>. This function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the item is selected, otherwise <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+
+ <p>Elementary list provides two functions for sliding a list to a specific item. <span style="font-family: Courier New,Courier,monospace">elm_list_item_show</span> shows the item passed as an argument, whereas <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in</span> shows the item, but only after animating the slide.</p>
+
+ <p>You can go to the item immediately preceding a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev</span>, or to the one immediately following a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_next</span>.</p>
+
+ <p>The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen. </p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Elm_Object_Item *current, *next;
+current = elm_list_selected_item_get(list);
+elm_list_item_selected_set(current, EINA_FALSE);
+next = elm_list_item_next(current);
+elm_list_item_selected_set(next, EINA_TRUE);
+elm_list_item_bring_in(next);
+</pre>
+
+<h2 id="callback">Using List Callbacks</h2>
+
+ <p>The list emits the following signals: </p> 
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user double-clicks or presses (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The list is scrolled to the top edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The list is scrolled to the bottom edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The list is scrolled to the left edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The list is scrolled to the right edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: The user highlights an item on the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The user unhighlights an item in the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>  
+  </ul>
+
+<p>You can register to the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal with the following code. Note that the currently double-clicked item can be retrieved using the <span style="font-family: Courier New,Courier,monospace">event_info</span> pointer. This code registers to the <span style="font-family: Courier New,Courier,monospace">double,clicked</span> signal and unselects the item that has been double-clicked.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(list, &quot;clicked,double&quot;, double_clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the button is clicked by the user
+void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+&nbsp;&nbsp;&nbsp;elm_Object_Item *it = event_info;
+&nbsp;&nbsp;&nbsp;elm_list_selected_item_set(it,  EINA_FALSE);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_list_wn.htm b/org.tizen.ui.practices/html/native/efl/component_list_wn.htm
new file mode 100644
index 0000000..345f52d
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_list_wn.htm
@@ -0,0 +1,252 @@
+<!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>List</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a List Component</a></li>
+			<li><a href="#use">Using the List</a></li>
+			<li><a href="#items">Adding Items to the List</a></li>
+			<li><a href="#change">Changing the Text or Icon of an Item</a></li>
+			<li><a href="#retrieve">Retrieving Selected Items</a></li>
+			<li><a href="#operation">List Item Operations</a></li>
+			<li><a href="#callback">Using List Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>List</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+ <p>This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option. </p>
+
+ <p>The list items can contain a text and two contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). These are set with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_*()</span> functions. </p>
+
+ 
+ <p class="figure">Figure: List component</p> 
+<p align="center"> <img alt="List component" src="../../images/list_wn.png" /> </p> 
+  
+  <p class="figure">Figure: List hierarchy</p> 
+<p align="center"> <img alt="List hierarchy" src="../../images/list_tree.png" /> </p> 
+ 
+<h2 id="add">Adding a List Component</h2>
+
+<pre class="prettyprint">
+Evas_Object *list, *parent;
+
+// Create a list 
+list = elm_list_add(parent);
+</pre>
+
+<h2 id="use">Using the List</h2>
+
+<p>This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Change the scroller policy to fix the scroll only vertically
+elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
+// Enable bounce effect when the list reaches the upper and lower limits 
+elm_scroller_bounce_set(list, EINA_FALSE, EINA_TRUE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Activate multi selection 
+elm_list_multi_select_set(list, EINA_FALSE);
+</pre>
+
+<h2 id="items">Adding Items to the List</h2>
+
+ <p>Items are added with <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span>. Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+int i;
+
+// This function is called when the list item is selected 
+static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+&nbsp;&nbsp;&nbsp;Eina_Bool selected = elm_list_item_selected_get(list_it);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;item is %s\n&quot;, selected? &quot;selected&quot;: &quot;unselected&quot;);
+}
+
+for (i = 0; i &lt; 10; i++)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *ic;
+&nbsp;&nbsp;&nbsp;char tmp[8];
+&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Item %02d&quot;, i);
+&nbsp;&nbsp;&nbsp;// Create an icon 
+&nbsp;&nbsp;&nbsp;ic = elm_icon_add(win);
+&nbsp;&nbsp;&nbsp;// Set the file to the icon file 
+&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+&nbsp;&nbsp;&nbsp;// Add item to the list 
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+}
+
+</pre>
+ 
+<h2 id="change">Changing the Text or Icon of an Item</h2>
+
+<p>If you want to change the state of an item, you can do it by using all the functions relative to <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>. Each item of the list contains two instances of an <span style="font-family: Courier New,Courier,monospace">evas_object</span>. Give those as the third and the fourth arguments when you append or prepend the item in the list. The <span style="font-family: Courier New,Courier,monospace">evas_object</span> instances are changed with <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The first object is referenced as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme, whereas the second one is referenced as the <span style="font-family: Courier New,Courier,monospace">end</span> object. Give these names when you use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The label of the item is changed by using <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Eina_List *l;
+Elm_Object_Item *it;
+
+// Retrieve the current selected item 
+it = elm_list_selected_item_get(list);
+if (!it)
+&nbsp;&nbsp;&nbsp;return;
+
+ic = elm_icon_add(win);
+// Set the file to the icon file 
+elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+// Change the first icon 
+elm_object_item_part_content_set(it, &quot;start&quot;, ic);
+// Change the second icon 
+elm_object_item_part_content_set(it, &quot;end&quot;, ic);
+// Change the label 
+elm_object_item_text_set(it, &quot;I&#39;ve been selected !&quot;);
+</pre>
+  
+<h2 id="retrieve">Retrieving Selected Items</h2>
+
+ <p>The list of the currently selected items is retrieved with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span>. If the multiselect mode is false, you can retrieve the only selected item with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span>. For example, this is how to unselect all previously selected items.</p>
+
+<pre class="prettyprint">
+Evas_Object *list; Eina_List *l;
+Eina_List *selected_items;
+// List of Elm_Object_Item 
+Elm_Object_Item *it;
+
+selected_items = elm_list_selected_items_get(list);
+EINA_LIST_FOREACH(selected_items, l, it)
+&nbsp;&nbsp;&nbsp;elm_list_item_selected_set(it, EINA_FALSE);
+</pre>
+
+<h2 id="operation">List Item Operations</h2>
+
+ <p>To find out if an item is selected, call <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get</span>. This function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the item is selected, otherwise <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+
+ <p>Elementary list provides two functions for sliding a list to a specific item. <span style="font-family: Courier New,Courier,monospace">elm_list_item_show</span> shows the item passed as an argument, whereas <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in</span> shows the item, but only after animating the slide.</p>
+
+ <p>You can go to the item immediately preceding a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev</span>, or to the one immediately following a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_next</span>.</p>
+
+ <p>The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen. </p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Elm_Object_Item *current, *next;
+current = elm_list_selected_item_get(list);
+elm_list_item_selected_set(current, EINA_FALSE);
+next = elm_list_item_next(current);
+elm_list_item_selected_set(next, EINA_TRUE);
+elm_list_item_bring_in(next);
+</pre>
+
+<h2 id="callback">Using List Callbacks</h2>
+
+ <p>The list emits the following signals: </p> 
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user double-clicks or presses (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The list is scrolled to the top edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The list is scrolled to the bottom edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The list is scrolled to the left edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The list is scrolled to the right edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: The user highlights an item on the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The user unhighlights an item in the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>  
+  </ul>
+
+<p>You can register to the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal with the following code. Note that the currently double-clicked item can be retrieved using the <span style="font-family: Courier New,Courier,monospace">event_info</span> pointer. This code registers to the <span style="font-family: Courier New,Courier,monospace">double,clicked</span> signal and unselects the item that has been double-clicked.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(list, &quot;clicked,double&quot;, double_clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the button is clicked by the user
+void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+&nbsp;&nbsp;&nbsp;elm_Object_Item *it = event_info;
+&nbsp;&nbsp;&nbsp;elm_list_selected_item_set(it,  EINA_FALSE);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_map_mn.htm b/org.tizen.ui.practices/html/native/efl/component_map_mn.htm
new file mode 100644
index 0000000..668b5d8
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_map_mn.htm
@@ -0,0 +1,285 @@
+<!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>Map</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Map Component</a></li>
+			<li><a href="#play">Playing with the Map</a></li>
+			<li><a href="#overlay">Drawing Overlays</a></li>
+			<li><a href="#route">Calculating Routes</a></li>
+			<li><a href="#callback">Using Map Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>				
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Map</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The map component displays a geographic map. The default map data are provided by the OpenStreetMap project <a href="http://www.openstreetmap.org/" target="_blank">(http://www.openstreetmap.org/)</a>. Custom providers can also be added.</p>
+
+<p>This UI component supports:</p>
+  <ul> 
+   <li>Zooming</li> 
+   <li>Scrolling</li> 
+   <li>Markers with content to be displayed when the user clicks over them</li> 
+   <li>Group of markers</li>   
+   <li>Routes</li> 
+  </ul>
+
+<p>The map component implements the scroller interface so that all the functions that work with the scroller component also work with maps.</p>
+
+<p class="figure">Figure: Map hierarchy</p> 
+<p align="center"> <img alt="Map hierarchy" src="../../images/map_tree.png" /> </p>  
+
+<h2 id="add">Adding a Map Component</h2>
+
+<p>Once created with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function, zoom level x12 can be set.</p>
+
+<pre class="prettyprint">
+Evas_Object *map, *parent;
+
+map = elm_map_add(parent);
+elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
+elm_map_zoom_set(map, 12);
+</pre>
+
+<p>Here the zoom mode is set to manual, but it can also be set to the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> mode and the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span> mode. In that case however, the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function cannot be used.</p>
+
+<h2 id="play">Playing with the Map</h2>
+
+<p>If you have coordinates of a specific area (2 2 N, 48 8 E), it can be shown on the map.</p>
+<pre class="prettyprint">
+elm_map_region_show(map, 2.2, 48.8);
+</pre>
+
+<p>This shows the desired coordinates. The location can also be shown with a bring-in animation.</p>
+<pre class="prettyprint">
+elm_map_region_bring_in(map, 2.2, 48.8);
+</pre>
+
+<p>The map is rotated 90 degrees around the current position.</p>
+<pre class="prettyprint">
+elm_map_rotate_set(map, 90, 2.2, 48.8);
+</pre>
+
+<h2 id="overlay">Drawing Overlays</h2>
+
+<p>Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.</p>
+
+<h3>Creating an Overlay Class</h3>
+
+<p>Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map. To do this, set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.</p>
+
+<p>Set an icon (&quot;Home&quot; icon) to the forest class. This icon is displayed in place of the forest class on the map.</p>
+<pre class="prettyprint">
+Evas_Object *icon;
+Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
+
+// Set min zoom level at which class is displayed
+elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
+
+// Create a Home icon object and set it to the forest class 
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;home&quot;);
+elm_map_overlay_icon_set(forest_class, icon);
+</pre>
+
+<h3>Adding Overlays to a Class</h3>
+
+<p>After creating a forest class, it is possible to add overlay objects to it. Here an overlay for the Meudon forest is created. The data is linked to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_data_set()</span> function. Set the name of the forest in the data. The icon can be set to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Do not use the same icon object for two different overlays. Create a new icon object each time you need one.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+<pre class="prettyprint">
+Elm_Map_Overlay *ovl;
+const char* data_meudon = &quot;Meudon forest&quot;;
+const char* data_fausses = &quot;Fausse forest&quot;;
+
+// Add an overlay
+ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;stop&quot;);
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &amp;data_meudon);
+
+// Add the new ovl object to the forest class 
+elm_map_overlay_class_append(forest_class, ovl);
+
+// Add another overlay next to the first one 
+ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;stop&quot;);
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &amp;data_fausses);
+elm_map_overlay_class_append(forest_class, ovl);
+</pre>  
+
+<p>If you add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped.</p>
+<pre class="prettyprint">
+elm_map_overlay_class_zoom_max_set(forest_class, 8);
+</pre>
+
+<p>In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.</p>
+
+<h3>Creating Bubbles Following Overlays</h3>
+
+<p>The following example shows how to set a content in a bubble following an overlay.</p>
+
+<pre class="prettyprint">
+// Add an overlay bubble object 
+Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
+
+// Set it to follow a specific overlay (the last created one here) 
+elm_map_overlay_bubble_follow(bubble, ovl);
+</pre>
+
+<p>Once following an overlay, the bubble appears, moves or hides following the parent overlay&#39;s behavior.</p>
+
+<p>Content is added to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
+
+<h3 id="other_overlay">Adding Other Overlays</h3>
+
+<p>You can draw a circle on the map with coordinates and a radius size.</p>
+<pre class="prettyprint">
+Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
+</pre>
+
+<p>You can also add a scale at the 200x0 coordinate (in pixels).</p>
+<pre class="prettyprint">
+Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
+</pre>
+
+<p>You can also draw a line, a polygon, or a route. For a full description of these functions, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Map.html">Map API</a>.</p>
+
+<h2 id="route">Calculating Routes</h2>
+
+<p>A route between a starting point and an ending point is calculated with the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> call. The type of transport and the routing calculation method can be provided so as to have the desired result.</p>
+
+<p>The following example shows how to get a route calculation between the first and the second overlay. It is configured to use the bicycle, and to find the fastest route possible.</p>
+
+<pre class="prettyprint">
+Elm_Map_Route *route = elm_map_route_add(map,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_TYPE_BICYCLE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_METHOD_FASTEST,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.20718, 48.79759,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.1699, 48.8189,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL);
+
+// Add a callback to when the route has been calculated and loaded 
+evas_object_smart_callback_add(map, &quot;route,loaded&quot;, _route_loaded_cb, route);
+</pre>
+
+<p>Once the route is calculated, create a route overlay object and change its color. In this example, the <span style="font-family: Courier New,Courier,monospace">route,loaded</span> callback is used.</p>
+<pre class="prettyprint">
+static void
+_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
+{
+&nbsp;&nbsp;&nbsp;Elm_Map_Route *route = data;
+
+&nbsp;&nbsp;&nbsp;Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
+&nbsp;&nbsp;&nbsp;elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
+}
+</pre>     
+
+<h2 id="callback">Using Map Callbacks</h2>
+
+<p>The map component emits the following callbacks:</p>
+<ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the map without dragging around.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the map.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the map.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the map for a long time without dragging around.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the contents around starts.</li>  
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the contents around stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">tile,load</span>: A map tile image load begins.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">tile,loaded</span>: A map tile image load ends.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">tile,loaded,fail</span>: A map tile image load fails.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">route,load</span>: Route request begins.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">route,loaded</span>: Route request ends.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">route,loaded,fail</span>: Route request fails.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">name,load</span>: Name request begins.</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">name,loaded</span>: Name request ends.</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">name,loaded,fail</span>: Name request fails.</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">overlay,clicked</span>: An overlay is clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The map is loaded.</li>
+</ul>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_notify_mn.htm b/org.tizen.ui.practices/html/native/efl/component_notify_mn.htm
new file mode 100644
index 0000000..4c98e96
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_notify_mn.htm
@@ -0,0 +1,150 @@
+<!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>Notify</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Notify Component</a></li>
+			<li><a href="#configure">Configuring the Notify Component</a></li>
+			<li><a href="#callback">Using Notify Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Notify</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+  <p>The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.</p>
+
+   
+  <p class="figure">Figure: Notify hierarchy</p> 
+<p align="center"> <img alt="Notify hierarchy" src="../../images/notify_tree.png" /> </p> 
+  
+<h2 id="add">Adding a Notify Component</h2> 
+  
+<p>The following example shows how to create a notify object.</p>
+
+<pre class="prettyprint">
+Evas_Object *notify, *parent;
+notify = elm_notify_add(parent);
+</pre>
+
+<h2 id="configure">Configuring the Notify Component</h2> 
+
+<p>Create a label and add it to the notify object.</p>
+
+<pre class="prettyprint">
+Evas_Object *content;
+
+// Create the label and set some text to it 
+content = elm_label_add(parent);
+
+elm_object_text_set(content, &quot;A label text&quot;);
+evas_object_show(content);
+
+// Add the label object to the notify component
+elm_object_content_set(notify, content);
+</pre>
+
+<p>In the following example the notify object is shown on the bottom left corner of the parent object.</p>
+
+<pre class="prettyprint">
+elm_notify_align_set(notify, 1.0, 1.0);
+evas_object_show(notify);
+</pre>
+
+<p>Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.</p>
+
+<pre class="prettyprint">
+elm_notify_timeout_set(notify, 5.0);
+</pre>
+
+<h2 id="callback">Using Notify Callbacks</h2> 
+
+<p>The notify component emits the following signals:</p>
+ <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The timeout count ends and the notify component is hidden</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks outside of the notify component</li> 
+  </ul>
+
+<p>For both these signals <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(notify, &quot;timeout&quot;, timeout_cb, data);
+}
+
+// Callback function for the &quot;timeout&quot; signal
+// The timeout expires and the notify object is hidden
+ 
+void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Notify is hidden\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_notify_wn.htm b/org.tizen.ui.practices/html/native/efl/component_notify_wn.htm
new file mode 100644
index 0000000..19dab41
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_notify_wn.htm
@@ -0,0 +1,146 @@
+<!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>Notify</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Notify Component</a></li>
+			<li><a href="#configure">Configuring the Notify Component</a></li>
+			<li><a href="#callback">Using Notify Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Notify</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+  <p>The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.</p>
+
+    <p class="figure">Figure: Notify hierarchy</p> 
+<p align="center"> <img alt="Notify hierarchy" src="../../images/notify_tree.png" /> </p> 
+  
+<h2 id="add">Adding a Notify Component</h2> 
+  
+<p>The following example shows how to create a notify object.</p>
+<pre class="prettyprint">
+Evas_Object *notify, *parent;
+notify = elm_notify_add(parent);
+</pre>
+
+<h2 id="configure">Configuring the Notify Component</h2> 
+
+<p>Create a label and add it to the notify object.</p>
+<pre class="prettyprint">
+Evas_Object *content;
+
+// Create the label and set some text to it 
+content = elm_label_add(parent);
+
+elm_object_text_set(content, &quot;A label text&quot;);
+evas_object_show(content);
+
+// Add the label object to the notify component
+elm_object_content_set(notify, content);
+</pre>
+
+<p>In the following example the notify object is shown on the bottom left corner of the parent object.</p>
+<pre class="prettyprint">
+elm_notify_align_set(notify, 1.0, 1.0);
+evas_object_show(notify);
+</pre>
+
+<p>Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.</p>
+<pre class="prettyprint">
+elm_notify_timeout_set(notify, 5.0);
+</pre>
+
+<h2 id="callback">Using Notify Callbacks</h2> 
+
+<p>The notify component emits the following signals:</p>
+ <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The timeout count ends and the notify component is hidden</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks outside of the notify component</li> 
+  </ul>
+
+<p>For both these signals <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(notify, &quot;timeout&quot;, timeout_cb, data);
+}
+
+// Callback function for the &quot;timeout&quot; signal
+// The timeout expires and the notify object is hidden
+ 
+void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Notify is hidden\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_panel_mn.htm b/org.tizen.ui.practices/html/native/efl/component_panel_mn.htm
new file mode 100644
index 0000000..1071152
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_panel_mn.htm
@@ -0,0 +1,167 @@
+<!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>Panel</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add_panel">Adding a Panel Component</a></li>
+			<li><a href="#use_panel">Using the Panel</a></li>
+			<li><a href="#create_drawer">Creating a Drawer</a></li>
+			<li><a href="#panel_cb">Using Panel Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Panel</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+				
+
+   <p>The panel component is an animated object that can contain subobjects. It can be expanded or contracted by clicking on the button on its edge.</p>
+
+   <p>Panel inherits from layout component, so the layout API can be used on this UI component.</p>
+
+     <p class="figure">Figure: Panel hierarchy</p> 
+<p align="center"> <img alt="Panel hierarchy" src="../../images/panel_tree.png" /> </p> 
+   
+<h2 id="add_panel">Adding a Panel Component</h2>
+
+<p>The following example shows how to add a panel and set its orientation to the left.</p>
+
+<pre class="prettyprint">
+Evas_Object *panel, *parent;
+
+panel = elm_panel_add(parent);
+elm_panel_orient_set(panel, ELM_PANEL_ORIENT_LEFT);
+</pre>
+
+<h2 id="use_panel">Using the Panel</h2>
+
+<p>The panel can be manually hidden.</p>
+<pre class="prettyprint">
+elm_panel_hidden_set(pan, EINA_TRUE);
+</pre>
+
+<p>The panel can be toggled if you do not know the hidden state of the UI component.</p>
+<pre class="prettyprint">
+elm_panel_toggle(pan);
+</pre>
+
+<p>The panel can be set scrollable.</p>
+<pre class="prettyprint">
+elm_panel_scrollable_set(pan, EINA_TRUE);
+</pre>
+
+<h2 id="create_drawer">Creating a Drawer</h2>
+
+<p>Tizen SDK has implemented a layout theme to add a drawer in the application. This example shows how to add a new Elementary layout object and set the theme of this layout to the drawer.</p>
+
+<pre class="prettyprint">
+Evas_Object *layout;
+
+// Create a new layout object 
+layout = elm_layout_add(parent);
+
+// Set the &quot;drawer&quot; group theme and &quot;panel&quot; style to it 
+elm_layout_theme_set(layout,&quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
+
+// Show the new layout
+evas_object_show(layout);
+</pre>
+
+<p>Once the panel object is created, it can be swallowed in the new layout.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(layout, &quot;elm.swallow.left&quot;, pan);
+</pre>
+
+<p>You can set content to the <span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> parts of the layout.</p>
+<pre class="prettyprint">
+// Panel Background (Dimmed Area) 
+Evas_Object *bg = create_bg(layout);
+elm_object_part_content_set(layout, &quot;elm.swallow.bg&quot;, bg);
+
+// Add content to the drawer 
+Evas_Object *content;
+elm_object_part_content_set(layout, &quot;elm.swallow.content&quot;, content);
+</pre>
+
+<h2 id="panel_cb">Using Panel Callbacks</h2>
+
+<p>You can register a callback on the <span style="font-family: Courier New,Courier,monospace">scroll</span> signal, when the user scrolls the panel. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is of the type <span style="font-family: Courier New,Courier,monospace">Elm_Panel_Scroll_Info</span>.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pan, &quot;scroll&quot;, scroll_cb, data);
+}
+// Callback function for the &quot;scroll&quot; signal
+// This callback is called when the user scrolls the panel
+void scroll_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Panel_Scroll_Info *scrollinfo = event_info;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The panel was scrolled.\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_photocam_mn.htm b/org.tizen.ui.practices/html/native/efl/component_photocam_mn.htm
new file mode 100644
index 0000000..161d139
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_photocam_mn.htm
@@ -0,0 +1,159 @@
+<!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>Photocam</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add_photocam">Adding a Photocam Component</a></li>
+			<li><a href="#use_zoom">Using Photocam Zoom</a></li>
+			<li><a href="#photocam_cb">Using Photocam Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Photocam</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+  <p>The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast, and fit it nicely on the screen. It is optimized for <span style="font-family: Courier New,Courier,monospace">.jpeg</span> images format and has a low memory footprint.</p>
+
+  <p>This UI component implements the scroller interface, so all the functions concerning the scroller can be used with the photocam component.</p>
+
+  
+  <p class="figure">Figure: Photocam hierarchy</p> 
+<p align="center"> <img alt="Photocam hierarchy" src="../../images/photocam_tree.png" /> </p> 
+  
+<h2 id="add_photocam">Adding a Photocam Component</h2>
+
+<p>The following example shows how to create a photocam component and set an image file on it.</p>
+
+<pre class="prettyprint">
+Evas_Object *photocam;
+photocam = elm_photocam_add(win);
+elm_photocam_file_set(photocam, &quot;/tmp/photo.jpeg&quot;);
+</pre>
+
+<h2 id="use_zoom">Using Photocam Zoom</h2>
+
+<p>You can choose between two automatic zoom modes and a manual zoom mode. In the following example the zoom mode is set to manual and a double zoom is requested.</p>
+<pre class="prettyprint">
+elm_photocam_zoom_mode_set(photocam, ELM_PHOTOCAM_ZOOM_MODE_MANUAL);
+elm_photocam_zoom_set(photocam, 2.0);
+</pre>
+
+<p>The zoom mode can be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT</span>. In this case, the photo fits exactly inside the scroll frame with no pixels outside this region. The zoom mode can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL</span> to fill all the pixels of the photocam component.</p>
+
+<p>Multi-touch zooming is activated by enabling gestures.</p>
+<pre class="prettyprint">
+elm_photocam_gesture_enabled_set(photocam, EINA_TRUE);
+</pre>
+
+<p>You can zoom in a specific region. The following example shows how to zoom in the region starting at the coordinates (200x200), with a width of 400px and a height of 300px.</p>
+
+<pre class="prettyprint">
+elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
+</pre>
+
+<h2 id="photocam_cb">Using Photocam Callbacks</h2>
+
+<p>The photocam component emits the following signals:</p>
+<ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the photo without dragging around.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the photo.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the photo for a long time without dragging around.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the photo.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">load</span>: The photo load begins.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The image file load is complete for the first view (a low resolution blurry version).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">load,detail</span>: A photo detailed data load begins.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">loaded,detail</span>: The image file load is complete for the detailed image data (full resolution is needed).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content around starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content around stops.</li> 
+  </ul>
+
+<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">loaded</span> signal.</p>
+
+<pre class="prettyprint">
+void message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(photocam, &quot;loaded&quot;, loaded_cb, data);
+}
+
+// Callback function for the &quot;loaded&quot; signal
+// The photocam has loaded the photo file in a low resolution
+ 
+void loaded_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The photo has been loaded\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_plug_mn.htm b/org.tizen.ui.practices/html/native/efl/component_plug_mn.htm
new file mode 100644
index 0000000..75445e5
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_plug_mn.htm
@@ -0,0 +1,128 @@
+<!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>Plug</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add_plug">Adding a Plug Component</a></li>
+			<li><a href="#use_plug">Using the Plug</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Plug</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by an other process. It can be used anywhere the same way as any other elementary UI component.</p>
+
+
+  <p class="figure">Figure: Plug hierarchy</p> 
+<p align="center"> <img alt="Plug hierarchy" src="../../images/plug_tree.png" /> </p> 
+
+<h2 id="add_plug">Adding a Plug Component</h2>  
+
+<p>The following example shows how to create a plug.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug, *parent;
+plug = elm_plug_add(parent);
+</pre>
+
+<h2 id="use_plug">Using the Plug</h2>
+
+<p>The socket image provides the service where to connect the plug object with the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function. In this process, use the service name and number set by the socket you want to connect to.</p>
+
+<p>As an example, connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0.</p>
+
+<pre class="prettyprint">
+elm_plug_connect(plug, &quot;plug_test&quot;, 0, EINA_FALSE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug_img = elm_plug_image_object_get(plug);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The socket to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (it is called <span style="font-family: Courier New,Courier,monospace">remote_win</span> here).</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<pre class="prettyprint">
+// Create a remote window in the other process 
+Elm_Win *remote_win = elm_win_add(NULL, &quot;Window Socket&quot;,
+&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;ELM_WIN_SOCKET_IMAGE);
+// Create a socket named &quot;plug_test&quot; and listen to it
+elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_plug_wn.htm b/org.tizen.ui.practices/html/native/efl/component_plug_wn.htm
new file mode 100644
index 0000000..aaa1140
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_plug_wn.htm
@@ -0,0 +1,127 @@
+<!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>Plug</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Plug Component</a></li>
+			<li><a href="#use">Using the Plug</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Plug</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by an other process. It can be used anywhere the same way as any other elementary UI component.</p>
+
+  <p class="figure">Figure: Plug hierarchy</p> 
+<p align="center"> <img alt="Plug hierarchy" src="../../images/plug_tree.png" /> </p> 
+
+<h2 id="add">Adding a Plug Component</h2>  
+
+<p>The following example shows how to create a plug.</p>
+<pre class="prettyprint">
+Evas_Object *plug, *parent;
+plug = elm_plug_add(parent);
+</pre>
+
+<h2 id="use">Using the Plug</h2>
+
+<p>The socket image provides the service where to connect the plug object with the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function. In this process, use the service name and number set by the socket you want to connect to.</p>
+
+<p>As an example, connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0.</p>
+
+<pre class="prettyprint">
+elm_plug_connect(plug, &quot;plug_test&quot;, 0, EINA_FALSE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug_img = elm_plug_image_object_get(plug);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The socket to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (it is called <span style="font-family: Courier New,Courier,monospace">remote_win</span> here).</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<pre class="prettyprint">
+// Create a remote window in the other process 
+Elm_Win *remote_win = elm_win_add(NULL, &quot;Window Socket&quot;,
+&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;ELM_WIN_SOCKET_IMAGE);
+// Create a socket named &quot;plug_test&quot; and listen to it
+elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+ 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_popup_mn.htm b/org.tizen.ui.practices/html/native/efl/component_popup_mn.htm
new file mode 100644
index 0000000..d0a0837
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_popup_mn.htm
@@ -0,0 +1,198 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Popup</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Popup Component</a></li>
+			<li><a href="#styles">Using Popup Styles</a></li>
+			<li><a href="#areas">Setting the Popup Areas</a></li>
+			<li><a href="#callback">Using Popup Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Popup</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p> The popup component shows a popup area that can contain:</p>
+<ul>
+<li>a title area (optional)</li>
+<li>a content area</li>
+<li>an action area (optional)</li>
+</ul>
+
+<p>The optional title area can contain an icon and text, the action area can contain up to three buttons.</p>
+
+
+<p class="figure">Figure: Popup component</p> 
+<p align="center"><img alt="Popup component" src="../../images/popup.png" /></p>
+      
+<p class="figure">Figure: Popup hierarchy</p> 
+<p align="center"><img alt="Popup hierarchy" src="../../images/popup_tree.png" /></p>
+
+<h2 id="add">Adding a Popup Component</h2>
+
+<p>The following example shows how to create a popup component.</p>
+<pre class="prettyprint">
+Evas_Object *popup, *parent;
+
+// Create a popup 
+popup = elm_popup_add(parent);
+</pre>
+
+<h2 id="styles">Using Popup Styles</h2>
+
+<p>The following item styles are available for the popup:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">popup</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">toast</span></li>
+</ul>
+
+<p>The following example sets the style of the popup to <span style="font-family: Courier New,Courier,monospace">toast</span>.</p>
+
+<pre class="prettyprint">elm_object_style_set(popup, &quot;toast&quot;);</pre>
+
+<h2 id="areas">Setting the Popup Areas</h2>
+
+<p>Configure the title area. Set the icon object using the part name <span style="font-family: Courier New,Courier,monospace">title,icon</span>. Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">title,text</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon;
+
+// Add an icon to the title area 
+elm_object_part_content_set(popup, &quot;title,icon&quot;, icon);
+
+// Set the title text 
+elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Test popup&quot;);
+</pre>
+
+<p>Set the content of the popup. The content can be simple text.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(popup, &quot;default&quot;, &quot;Test popup&quot;);
+</pre>
+
+<p>The content can also be an Evas object.</p>
+
+<pre class="prettyprint">
+Evas_Object *content;
+
+elm_object_content_set(popup, content);
+</pre>
+
+<p>Set the buttons of the action area by creating an <strong>OK</strong> button, a <strong>Cancel</strong> button, and a <strong>Help</strong> button.</p>
+
+<pre class="prettyprint">
+Evas_Object *button1, *button2, *button3;
+
+// Create the 3 buttons 
+
+button1 = elm_button_add(popup);
+elm_object_text_set(button1, &quot;OK&quot;);
+
+button2 = elm_button_add(popup);
+elm_object_text_set(button2, &quot;Cancel&quot;);
+
+button3 = elm_button_add(popup);
+elm_object_text_set(button3, &quot;Help&quot;);
+
+// Set the buttons to the action area 
+elm_object_part_content_set(popup, &quot;button1&quot;, button1);
+elm_object_part_content_set(popup, &quot;button2&quot;, button2);
+elm_object_part_content_set(popup, &quot;button3&quot;, button3);
+</pre>
+
+<h2 id="callback">Using Popup Callbacks</h2>
+<p>The popup emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of timeout.</li>
+<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the Blocked Event area.</li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> is used to hide the popup after a certain time. In this example, the timeout is set to five seconds.</p>
+
+<pre class="prettyprint">
+elm_popup_timeout_set(popup, 5.0);
+</pre>
+
+<p>When the timeout expires, the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal is sent to the user.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, data);
+}
+
+static void
+_timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Timeout \n&quot;);
+}
+</pre>
+
+<p>The visible region of the popup is surrounded by a translucent region called <strong>Blocked Event</strong> area. By clicking on this area, the signal <span style="font-family: Courier New,Courier,monospace">block,clicked</span> is sent to the application.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_popup_wn.htm b/org.tizen.ui.practices/html/native/efl/component_popup_wn.htm
new file mode 100644
index 0000000..fb8f950
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_popup_wn.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>Popup</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Popup Component</a></li>
+			<li><a href="#styles">Using Popup Styles</a></li>
+			<li><a href="#set">Setting the Popup Areas for Rectangular UI Components</a></li>
+			<li><a href="#set_circ">Setting the Popup Areas for Circular UI Components</a></li>
+			<li><a href="#callback">Using Popup Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>				
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Popup</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The popup component shows a popup area that can contain:</p>
+<ul>
+<li>a title area (optional)</li>
+<li>a content area</li>
+<li>an action area (optional)</li>
+</ul>
+
+<p>The optional title area can contain an icon and text, the action area can contain up to three buttons.</p>
+
+<p class="figure">Figure: Popup component</p> 
+<p align="center"><img alt="Popup component" src="../../images/popup_wn.png" /></p>
+      
+<p class="figure">Figure: Popup hierarchy</p> 
+<p align="center"><img alt="Popup hierarchy" src="../../images/popup_tree.png" /></p>
+
+<h2 id="add">Adding a Popup Component</h2>
+
+<p>The following example shows how to create a popup component.</p>
+<pre class="prettyprint">
+Evas_Object *popup, *parent;
+
+// Create a popup 
+popup = elm_popup_add(parent);
+</pre>
+
+<h2 id="styles">Using Popup Styles</h2>
+
+<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 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 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>
+<li><span style="font-family: Courier New,Courier,monospace">content/circle/buttons2</span></li>
+</ul>
+
+<p>The following example sets the style of the popup to <span style="font-family: Courier New,Courier,monospace">toast</span>.</p>
+<pre class="prettyprint">
+elm_object_style_set(popup, &quot;toast&quot;);
+</pre>
+
+
+<h2 id="set">Setting the Popup Areas for Rectangular UI Components</h2>
+<p>Configure the title area. Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">title,text</span>.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Test popup&quot;);
+</pre>
+<p>Set the content of the popup. The content can be simple text.</p>
+<pre class="prettyprint">
+elm_object_text_set(popup, &quot;simple text&quot;);
+</pre>
+<p>The content can also be an Evas object.</p>
+<pre class="prettyprint">
+Evas_Object *content;
+
+elm_object_content_set(popup, content);
+</pre>
+<p>Set the buttons of the action area by creating an <strong>OK</strong> button and a <strong>Cancel</strong> button.</p>
+<pre class="prettyprint">
+Evas_Object *button1, *button2;
+
+// Create the two buttons 
+button1 = elm_button_add(popup);
+elm_object_style_set(button1, &quot;popup&quot;);
+evas_object_size_hint_weight_set(button1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button1, &quot;Cancel&quot;);
+
+button2 = elm_button_add(popup)
+elm_object_style_set(button2, &quot;popup&quot;);
+evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button2, &quot;OK&quot;);
+
+evas_object_show(popup);
+
+// Set the buttons to the action area 
+elm_object_part_content_set(popup, &quot;button1&quot;, button1);
+elm_object_part_content_set(popup, &quot;button2&quot;, button2);
+</pre>
+
+<h2 id="set_circ">Setting the Popup Areas for Circular UI Components</h2>
+<p>Set the circle style and the layout of the popup.</p>
+<pre class="prettyprint">
+// Setting the style
+elm_object_style_set(popup, &quot;circle&quot;);
+
+// Setting the layout
+layout = elm_layout_add(popup);
+elm_layout_theme_set(layout, &quot;layout&quot;, &quot;popup&quot;, &quot;content/circle/buttons2&quot;);
+</pre>
+
+<p>To configure the title area, set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">elm.text.title</span>.</p>
+<pre class="prettyprint">
+// Setting the title text 
+elm_object_part_text_set(layout, &quot;elm.text.title&quot;, &quot;Text popup&quot;);
+</pre>
+
+<p>Set the content of the popup. The content can be simple text.</p>
+<pre class="prettyprint">elm_object_part_text_set(layout, &quot;elm.text.content&quot;, &quot;Test popup&quot;);
+</pre>
+
+<p>The content of the popup can also be an Evas object.</p>
+<pre class="prettyprint">
+Evas_Object *content;
+
+elm_object_content_set(layout, content);
+</pre>
+<p>Set the popup content.</p>
+<pre class="prettyprint">
+elm_object_content_set(popup, layout);
+</pre>
+
+<p>Set the buttons of the action area by creating an <strong>OK</strong> button, a <strong>Cancel</strong> button, and a <strong>Help</strong> button.</p>
+
+<pre class="prettyprint">
+Evas_Object *button1, *button2, *icon;
+
+// Create the 2 buttons 
+
+button1 = elm_button_add(popup);
+elm_object_style_set(button1, &quot;popup/circle/left&quot;);
+icon = elm_image_add(button1);
+elm_image_file_set(icon, ICON_DIR&quot;/b_option_list_icon_share.png&quot;, NULL);
+evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_part_content_set(button1, &quot;elm.swallow.content&quot;, icon);
+evas_object_show(icon);
+
+button2 = elm_button_add(popup);
+elm_object_style_set(button2, &quot;popup/circle/right&quot;);
+icon = elm_image_add(button2);
+elm_image_file_set(icon, ICON_DIR&quot;/b_option_list_icon_delete.png&quot;, NULL);
+evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_part_content_set(button2, &quot;elm.swallow.content&quot;, icon);
+evas_object_show(icon);
+
+// Set the buttons to the action area 
+elm_object_part_content_set(popup, &quot;button1&quot;, button1);
+elm_object_part_content_set(popup, &quot;button2&quot;, button2);
+
+</pre>
+
+<h2 id="callback">Using Popup Callbacks</h2>
+<p>The popup emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of timeout.</li>
+<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the Blocked Event area.</li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> is used to hide the popup after a certain time. In the following example the timeout is set to five seconds.</p>
+<pre class="prettyprint">elm_popup_timeout_set(popup, 5.0);</pre>
+
+<p>When the timeout expires, the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal is sent to the user.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, data);
+}
+
+static void
+_timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Timeout \n&quot;);
+}
+</pre>
+
+<p>The visible region of the popup is surrounded by a translucent region called <strong>Blocked Event</strong> area. By clicking on this area, the signal <span style="font-family: Courier New,Courier,monospace">block,clicked</span> is sent to the application.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_progressbar_mn.htm b/org.tizen.ui.practices/html/native/efl/component_progressbar_mn.htm
new file mode 100644
index 0000000..0fd1cdb
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_progressbar_mn.htm
@@ -0,0 +1,180 @@
+<!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>Progressbar</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Progressbar Component</a></li>
+			<li><a href="#styles">Using the Progressbar Styles</a></li>
+			<li><a href="#use">Using the Progressbar</a></li>
+			<li><a href="#configure">Configuring the Progressbar</a></li>
+			<li><a href="#callback">Using the Progressbar Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Progressbar</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The progressbar component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.</p> 
+
+         <p class="figure">Figure: Progressbar component</p> 
+  <p align="center"><img alt="Progressbar component" src="../../images/progressbar.png" /></p>
+      
+	  <p class="figure">Figure: Progressbar hierarchy</p> 
+  <p align="center"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
+  
+
+<h2 id="add">Adding a Progressbar Component</h2>
+
+<p>The following example shows how to create a progressbar component.</p>
+
+<pre class="prettyprint">
+Evas_Object *pb = elm_progressbar_add(win);
+</pre>
+
+<h2 id="styles">Using the Progressbar Styles</h2>
+
+<p>The progressbar has several styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">pending_list</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process_large</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process_medium</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process_small</span></li>
+</ul>
+
+<p>Set the style of the progressbar to <span style="font-family: Courier New,Courier,monospace">pending_list</span>.</p>
+
+<pre class="prettyprint">elm_object_style_set(pb, &quot;pending_list&quot;);</pre>
+
+<h2 id="use">Using the Progressbar</h2>
+
+<p>By default, the progressbar does not show a label or an icon, and the unit label is set to <span style="font-family: Courier New,Courier,monospace">%.0f %%</span>.</p>
+
+<p>The following example shows how to set a label. In this example it is named <span style="font-family: Courier New,Courier,monospace">Test label</span>.</p>
+
+<pre class="prettyprint">
+elm_object_text_set(pb, &quot;Test label&quot;);
+</pre>
+
+<p>An icon is set with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> using the partname <span style="font-family: Courier New,Courier,monospace">icon</span>.</p>
+<pre class="prettyprint">
+elm_object_part_content_set(pb, &quot;icon&quot;, icon_object);
+</pre>
+
+<p>The unit label format string can be modified using a <span style="font-family: Courier New,Courier,monospace">printf</span> style format. Set it to be a float number with two decimals.</p>
+<pre class="prettyprint">
+elm_progressbar_unit_format_set(pb, &quot;%1.2f%%&quot;);
+</pre>
+
+<h2 id="configure">Configuring the Progressbar</h2>
+
+<p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
+<pre class="prettyprint">
+elm_progressbar_pulse_set(pb, EINA_TRUE);
+elm_progressbar_pulse(pb, EINA_TRUE);
+</pre>
+
+<p>The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.</p>
+<pre class="prettyprint">
+elm_progressbar_inverted_set(pb, EINA_TRUE);
+</pre>
+
+<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+<pre class="prettyprint">
+elm_progressbar_value_set(pb, 0.2);
+</pre>
+
+<p>The current value can be read.</p>
+<pre class="prettyprint">
+double value = elm_progressbar_value_get(pb);
+</pre>
+
+<p>You can set the orientation of the progressbar to vertical instead of the default horizontal orientation.</p>
+<pre class="prettyprint">
+elm_progressbar_horizontal_set(pb, EINA_FALSE);
+</pre>
+
+<h2 id="callback">Using the Progressbar Callbacks</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">changed</span> signal is the only signal specifically emitted by the progressbar component.</p>
+
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pb, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the progressbar value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_progressbar_wn.htm b/org.tizen.ui.practices/html/native/efl/component_progressbar_wn.htm
new file mode 100644
index 0000000..f8c18e3
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_progressbar_wn.htm
@@ -0,0 +1,165 @@
+<!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>Progressbar</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Progressbar Component</a></li>
+			<li><a href="#styles">Using the Progressbar Styles</a></li>
+			<li><a href="#configure_rect">Configuring the Progressbar for Rectangular UI Components</a></li>
+			<li><a href="#configure_circ">Configuring the Progressbar for Circular UI Components</a></li>
+			<li><a href="#callback">Using the Progressbar Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Progressbar</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The progressbar component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.</p> 
+
+         <p class="figure">Figure: Progressbar component</p> 
+<p align="center"><img alt="Progressbar component" src="../../images/progressbar_wn.png" /></p>
+      
+	  <p class="figure">Figure: Progressbar hierarchy</p> 
+<p align="center"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
+
+<h2 id="add">Adding a Progressbar Component</h2>
+ 
+<p>The following example shows how to create a progressbar component.</p>
+<pre class="prettyprint">
+Evas_Object *pb = elm_progressbar_add(win);
+</pre>
+
+<h2 id="styles">Using the Progressbar Styles</h2>
+
+<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>
+<li><span style="font-family: Courier New,Courier,monospace">process</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process/groupindex</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process/popup/small</span></li>
+</ul>
+<p>The progressbar has several styles for 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>
+</ul>
+
+<p>Set the style of the progressbar to <span style="font-family: Courier New,Courier,monospace">pending_list</span>.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(pb, &quot;pending_list&quot;);
+</pre>
+
+<h2 id="configure_rect">Configuring the Progressbar for Rectangular UI Components</h2>
+
+<p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
+<pre class="prettyprint">elm_progressbar_pulse_set(pb, EINA_TRUE);
+elm_progressbar_pulse(pb, EINA_TRUE);
+</pre>
+
+<p>The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.</p>
+<pre class="prettyprint">elm_progressbar_inverted_set(pb, EINA_TRUE);</pre>
+
+<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+<pre class="prettyprint">elm_progressbar_value_set(pb, 0.2);</pre>
+
+<p>It is possible to read the current value.</p>
+<pre class="prettyprint">double value = elm_progressbar_value_get(pb);</pre>
+
+<h2 id="configure_circ">Configuring the Progressbar for Circular UI Components</h2>
+<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+
+<pre class="prettyprint">
+elm_progressbar_value_set(pb, 0.2);
+</pre>
+<p>The current value can be read.</p>
+<pre class="prettyprint">
+double value = elm_progressbar_value_get(pb);
+</pre>
+
+
+<h2 id="callback">Using the Progressbar Callbacks</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">changed</span> signal is the only signal specifically emitted by the progressbar component.</p>
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pb, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the progressbar value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_radio_mn.htm b/org.tizen.ui.practices/html/native/efl/component_radio_mn.htm
new file mode 100644
index 0000000..ddef1f7
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_radio_mn.htm
@@ -0,0 +1,161 @@
+<!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>Radio</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Radio Component</a></li>
+			<li><a href="#value">Changing the Radio Value</a></li>
+			<li><a href="#group">Managing the Radio Groups</a></li>
+			<li><a href="#callback">Using the Radio Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Radio</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+ 
+<p> This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected), an optional icon and an optional label. Even though it is usually grouped with two or more other radio objects, it can also be used alone.</p>
+<p>The radio component inherits from the layout component. All the layout functions can be used with radio objects.</p>
+
+<p class="figure">Figure: Radio component</p> 
+<p align="center"><img alt="Radio component" src="../../images/radio.png" /></p>
+      
+<p class="figure">Figure: Radio hierarchy</p> 
+<p align="center"><img alt="Radio hierarchy" src="../../images/radio_tree.png" /></p>
+
+<h2 id="add">Adding a Radio Component</h2>
+
+<p>Create a radio component and set a label to it.</p>
+<pre class="prettyprint">
+Evas_Object *radio, *parent;
+
+// Create a radio
+radio = elm_radio_add(parent);
+
+// Set a label to it
+elm_object_text_set(radio, &quot;Radio component&quot;);
+</pre>
+
+<p>Set an icon to the radio object.</p>
+<pre class="prettyprint">
+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;home&quot;);
+
+// Set it to the radio component 
+elm_object_part_content_set(radio, &quot;icon&quot;, icon);
+</pre>
+
+<h2 id="value">Changing the Radio Value</h2>
+
+<p>The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.</p>
+<pre class="prettyprint">
+elm_radio_state_value_set(radio, 1);
+</pre>
+
+<h2 id="group">Managing the Radio Groups</h2>
+
+<p>The following example shows how to create a group of radio objects with at least two radio components.</p>
+
+<pre class="prettyprint">
+// Create another radio object 
+Evas_Object *radio2 = elm_radio_add(parent);
+elm_radio_state_value_set(radio2, 2);
+
+// Create a group composed of radio and radio2
+Evas_Object *group = radio;
+elm_radio_group_add(radio2, group);
+</pre>
+
+<p>Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.</p>
+
+<pre class="prettyprint">
+elm_radio_value_set(group, 2);
+</pre>
+
+<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> to see the currently selected radio of the group.</p>
+
+<h2 id="callback">Using the Radio Callbacks</h2>
+
+<p>When the state of a radio is modified in a group of radio objects, the <span style="font-family: Courier New,Courier,monospace">changed</span> signal is emitted.</p>
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(radio, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_radio_wn.htm b/org.tizen.ui.practices/html/native/efl/component_radio_wn.htm
new file mode 100644
index 0000000..084f687
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_radio_wn.htm
@@ -0,0 +1,170 @@
+<!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>Radio</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Radio Component</a></li>
+			<li><a href="#value">Changing the Radio Value</a></li>
+			<li><a href="#group">Managing the Radio Groups</a></li>
+			<li><a href="#callback">Using the Radio Callbacks</a></li>
+			<li><a href="#callback_circ">Using the Radio Callbacks with Circular UI Components</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Radio</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+  
+<p>This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected). Even though it is usually grouped with two or more other radio objects, it can also be used alone.
+</p>
+<p>The radio component inherits from the layout component. All the layout functions can be used with radio objects.</p>
+
+<p class="figure">Figure: Radio component</p> 
+<p align="center"><img alt="Radio component" src="../../images/radio_wn.png" /></p>
+      
+<p class="figure">Figure: Radio hierarchy</p> 
+<p align="center"><img alt="Radio hierarchy" src="../../images/radio_tree.png" /></p>
+
+<h2 id="add">Adding a Radio Component</h2>
+
+<p>Create a radio component.</p>
+<pre class="prettyprint">
+Evas_Object *radio, *parent;
+
+// Create a radio
+radio = elm_radio_add(parent);
+</pre>
+
+<h2 id="value">Changing the Radio Value</h2>
+
+<p>The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.</p>
+<pre class="prettyprint">
+elm_radio_state_value_set(radio, 1);
+</pre>
+
+<h2 id="group">Managing the Radio Groups</h2>
+
+<p>The following example shows how to create a group of radio objects with at least two radio components.</p>
+
+<pre class="prettyprint">
+// Create another radio object 
+Evas_Object *radio2 = elm_radio_add(parent);
+elm_radio_state_value_set(radio2, 2);
+
+// Create a group composed of radio and radio2
+Evas_Object *group = radio;
+elm_radio_group_add(radio2, group);
+</pre>
+
+<p>Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.</p>
+
+<pre class="prettyprint">elm_radio_value_set(group, 2);</pre>
+
+<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> to see the currently selected radio of the group.</p>
+
+<h2 id="callback">Using the Radio Callbacks</h2>
+
+<p>This UI component emits the following signals:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">changed</span>: The state of a radio is modified in a group of radio objects.</li></ul>
+
+<p>The following example shows how to register a callback on this signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(radio, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+<h2 id="callback_circ">Using the Radio Callbacks with Circular UI Components</h2>
+	
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: Radio was clicked.</li>
+</ul>
+
+<p>The following example shows how to register a callback on this signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(radio, &quot;clicked&quot;, clicked_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;This radio was clicked\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_segmentcontrol_mn.htm b/org.tizen.ui.practices/html/native/efl/component_segmentcontrol_mn.htm
new file mode 100644
index 0000000..25e7cf8
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_segmentcontrol_mn.htm
@@ -0,0 +1,152 @@
+<!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>Segmentcontrol</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Segmentcontrol Component</a></li>
+			<li><a href="#items">Adding Items</a></li>
+			<li><a href="#callback">Using the Segmentcontrol Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Segmentcontrol</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+ 
+<p>This UI component consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.</p>
+<p>This UI component inherits from the layout component, so all the layout components API can be used on segmentcontrol objects.</p>
+
+<p class="figure">Figure: Segmentcontrol with text</p> 
+<p align="center"><img alt="Segmentcontrol with text" src="../../images/segment_text.png" /></p>
+      
+<p class="figure">Figure: Segmentcontrol with icons</p> 
+<p align="center"><img alt="Segmentcontrol with icons" src="../../images/segment.png" /></p>
+  
+<p class="figure">Figure: Segmentcontrol hierarchy</p> 
+<p align="center"><img alt="Segmentcontrol hierarchy" src="../../images/segment_control_tree.png" /></p>
+
+<h2 id="add">Adding a Segmentcontrol Component</h2>
+
+<p>The following example shows how to add a segmentcontrol component.</p>
+
+<pre class="prettyprint">
+Evas_Object *segcontrol, *parent;
+
+segcontrol = elm_segment_control_add(parent);
+</pre>
+
+<h2 id="items">Adding Items</h2>
+
+<p>You can add items to the UI component. In the following example four items containing only text labels (no icons) are added.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it;
+
+elm_segment_control_item_add(segcontrol, NULL, &quot;item1&quot;);
+elm_segment_control_item_add(segcontrol, NULL, &quot;item2&quot;);
+elm_segment_control_item_add(segcontrol, NULL, &quot;item3&quot;);
+it = elm_segment_control_item_add(segcontrol, NULL, &quot;item4&quot;);
+</pre>
+
+<p>You can also:</p>
+<ul>
+<li>Insert an item at a specific position starting at 0.
+<pre class="prettyprint">
+elm_segment_control_item_insert_at(segcontrol, NULL, &quot;item7&quot;, 2);
+</pre></li>
+
+<li>Delete an item.
+<pre class="prettyprint">
+elm_segment_control_item_del_at(segcontrol, 2);
+</pre></li>
+
+<li>Set the selected state of an item manually.
+<pre class="prettyprint">
+elm_segment_control_item_selected_set(it, EINA_TRUE);
+</pre></li>
+<li>Disable the whole segment control.
+<pre class="prettyprint">elm_object_disabled_set(segcontrol, EINA_TRUE);</pre></li>
+</ul>
+
+<h2 id="callback">Using the Segmentcontrol Callbacks</h2>
+
+<p>This is how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span>signal. It is called when the user clicks on a segment item which is not previously selected. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the segment item pointer.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(segcontrol, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the segcontrol selected item changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Segment_Item *it = event_info;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The selected segment item has changed\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_slider_mn.htm b/org.tizen.ui.practices/html/native/efl/component_slider_mn.htm
new file mode 100644
index 0000000..0cc0cca
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_slider_mn.htm
@@ -0,0 +1,182 @@
+<!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>Slider</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Slider Component</a></li>
+			<li><a href="#styles">Using the Slider Styles</a></li>
+			<li><a href="#configure">Configuring the Slider</a></li>
+			<li><a href="#callback">Using the Slider Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Slider</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p> The slider component is a draggable bar that is used to select a value within a certain range.</p>
+
+
+<p class="figure">Figure: Slider component</p> 
+<p align="center"><img alt="Slider component" src="../../images/slider.png" /></p>
+      
+<p class="figure">Figure: Slider hierarchy</p> 
+<p align="center"><img alt="Slider hierarchy" src="../../images/slider_tree.png" /></p>
+
+<h2 id="add">Adding a Slider Component</h2>
+
+<p>The following example shows how to create a slider object.</p>
+<pre class="prettyprint">
+Evas_Object *slider, *parent;
+
+slider = elm_slider_add(parent);
+</pre>
+
+<h2 id="styles">Using the Slider Styles</h2>
+
+<p>A slider has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">center_point</span></li>
+</ul>
+
+<p>The following example sets the style to <span style="font-family: Courier New,Courier,monospace">center_point</span>.</p>
+<pre class="prettyprint">
+elm_object_style_set(slider, &quot;center_point&quot;);
+</pre>
+
+<p>With this style, the slider <span style="font-family: Courier New,Courier,monospace">0</span> point is in the middle of the UI component.</p>
+
+<h2 id="configure">Configuring the Slider</h2>
+
+<p>The orientation is set with the <span style="font-family: Courier New,Courier,monospace">elm_slider_horizontal_set()</span> function, and it is inverted the same way as the progressbar component. In the following example it is set to vertical and inverted.</p>
+<pre class="prettyprint">
+elm_slider_horizontal_set(slider, EINA_FALSE);
+elm_slider_inverted_set(slider, EINA_TRUE);
+</pre>
+
+<p>The slider can contain icons (<span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span> partnames), a label, a unit label, and an indicator label.</p>
+<pre class="prettyprint">
+Evas_Object *icon1, *icon2;
+
+// Set the icons 
+elm_object_part_content_set(slider, &quot;icon&quot;, icon1);
+elm_object_part_content_set(slider, &quot;end&quot;, icon2);
+
+// Set the label 
+elm_object_part_text_set(slider, &quot;default&quot;, &quot;slider label&quot;);
+
+// Set the unit format 
+elm_slider_unit_format_set(slider, &quot;%1.2f meters&quot;);
+</pre>
+
+<p>Before using the slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span>. The current value is set with (<span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span>). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
+<pre class="prettyprint">
+elm_slider_min_max_set(slider, 0.0, 100.0);
+elm_slider_value_set(slider, 50.0);
+</pre>
+
+<p>The span of the slider represents its length horizontally or vertically. It is set with <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> and is scaled by the object or applications scaling factor.</p>
+<p>You can retrieve the current value of the slider anytime.</p>
+<pre class="prettyprint">
+double value = elm_slider_value_get(slider);
+</pre>
+
+<p>By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.</p>
+<pre class="prettyprint">
+// Get the current state of the indicator 
+Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
+
+// Invert the behavior 
+elm_slider_indicator_show_set(slider, !enlarge);
+</pre>
+ 
+<h2 id="callback">Using the Slider Callbacks</h2>
+
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,start</span>: Dragging the slider indicator around starts.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,stop</span>: Dragging the slider indicator around stops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the slider value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The slider has changed\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_slider_wn.htm b/org.tizen.ui.practices/html/native/efl/component_slider_wn.htm
new file mode 100644
index 0000000..7817148
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_slider_wn.htm
@@ -0,0 +1,164 @@
+<!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>Slider</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Slider Component</a></li>
+			<li><a href="#styles">Using the Slider Styles</a></li>
+			<li><a href="#configure">Configuring the Slider</a></li>
+			<li><a href="#callback">Using the Slider Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Slider</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p> The slider component contains a draggable bar that is used to select a value within a certain range. It is used with rectangular UI components.</p>
+
+<p class="figure">Figure: Slider component</p> 
+<p align="center"><img alt="Slider component" src="../../images/slider_wn.png" /></p>
+      
+<p class="figure">Figure: Slider hierarchy</p> 
+<p align="center"><img alt="Slider hierarchy" src="../../images/slider_tree.png" /></p>
+
+<h2 id="add">Adding a Slider Component</h2>
+
+<p>The following example shows how to create a slider object.</p>
+<pre class="prettyprint">
+Evas_Object *slider, *parent;
+
+slider = elm_slider_add(parent);
+</pre>
+
+<h2 id="styles">Using the Slider Styles</h2>
+
+<p>A slider has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+
+<h2 id="configure">Configuring the Slider</h2>
+
+<p>It can contain icons (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> partname), a label, a unit label and an indicator label.</p>
+<pre class="prettyprint">
+Evas_Object *icon1, *icon2;
+
+// Set the icons 
+elm_object_part_content_set(slider, &quot;elm.swallow.icon&quot;, icon1);
+
+// Set the unit format 
+elm_slider_unit_format_set(slider, &quot;%1.2f meters&quot;);
+</pre>
+
+<p>Before using the slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span>. The current value is set with (<span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span>). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
+<pre class="prettyprint">
+elm_slider_min_max_set(slider, 0.0, 100.0);
+elm_slider_value_set(slider, 50.0);
+</pre>
+
+<p>The span of the slider represents its length horizontally. It is set with <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> and is scaled by the object or applications scaling factor.</p>
+<p>You can retrieve the current value of the slider anytime.</p>
+<pre class="prettyprint">
+double value = elm_slider_value_get(slider);
+</pre>
+
+<p>By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.</p>
+<pre class="prettyprint">
+// Get the current state of the indicator 
+Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
+
+// Invert the behavior 
+elm_slider_indicator_show_set(slider, !enlarge);
+</pre>
+ 
+<h2 id="callback">Using the Slider Callbacks</h2>
+
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,start</span>: Dragging the slider indicator around starts.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,stop</span>: Dragging the slider indicator around stops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the slider value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The slider has changed\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_spinner_mn.htm b/org.tizen.ui.practices/html/native/efl/component_spinner_mn.htm
new file mode 100644
index 0000000..d162a77
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_spinner_mn.htm
@@ -0,0 +1,157 @@
+<!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>Spinner</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Spinner Component</a></li>
+			<li><a href="#configure">Configuring the Spinner</a></li>
+			<li><a href="#callback">Using the Spinner Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Spinner</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p> The spinner component increases or decreases a numeric value with the arrow buttons.</p>
+
+<p>This UI component inherits from the layout component, so all functions concerning the layout component are used on the spinner component.</p>
+
+				
+<p class="figure">Figure: Spinner component</p> 
+<p align="center"><img alt="Spinner component" src="../../images/spin.png" /></p>
+      
+<p class="figure">Figure: Spinner hierarchy</p> 
+<p align="center"><img alt="Spinner hierarchy" src="../../images/spinner_tree.png" /></p>
+
+<h2 id="add">Adding a Spinner Component</h2>
+<p>The following example shows how to create a spinner object.</p>
+
+<pre class="prettyprint">
+Evas_Object *spin, *parent;
+
+spin = elm_spinner_add(parent);
+</pre>
+
+<h2 id="configure">Configuring the Spinner</h2>
+
+<p>The label format is set to a different value:</p>
+<pre class="prettyprint">
+elm_spinner_label_format_set(spin, &quot;%1.2f meters&quot;);
+</pre>
+
+<p>You can determine the result of clicking the arrow buttons. In this example, a click on an arrow increases or decreases with 2.0 units:</p>
+<pre class="prettyprint">
+elm_spinner_step_set(spin, 2.0);
+</pre>
+<p>The wrapping mode is activated. In this mode, the spinner wraps when it reaches its minimum or maximum value.</p>
+<pre class="prettyprint">
+elm_spinner_wrap_set(spin, EINA_TRUE);
+</pre>
+
+<p>You can set the minimum and maximum values of the spinner.</p>
+<pre class="prettyprint">
+elm_spinner_min_max_set(spin, -25.0, 100.0);
+</pre>
+
+<p>The spinner object can be set vertical, and the change interval when the user presses the arrows long can be modified so that it changes faster.</p>
+<pre class="prettyprint">
+elm_object_style_set(spin, &quot;vertical&quot;);
+elm_spinner_interval_set(spin, 0.1);
+</pre>
+
+<p>If the user has to select between text values instead of numerical values, it is possible to add our own text labels. Here spin2 object shows three numbers written in text characters.</p>
+<pre class="prettyprint">Evas_Object *spin2 = elm_spinner_add(parent);
+elm_spinner_min_max_set(spin2, 1, 3);
+elm_spinner_special_value_add(spin2, 1, &quot;One&quot;);
+elm_spinner_special_value_add(spin2, 2, &quot;Two&quot;);
+elm_spinner_special_value_add(spin2, 3, &quot;Three&quot;);
+</pre>
+
+<h2 id="callback">Using the Spinner Callbacks</h2>
+
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The spinner value changes.</li>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">delay,changed</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(spin, &quot;delay,changed&quot;, delay_changed_cb, data);
+}
+
+// Callback function for the &quot;delay,changed&quot; signal
+// This callback is called a short time after the spinner value changes
+void delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The spinner value has changed\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_toolbar_mn.htm b/org.tizen.ui.practices/html/native/efl/component_toolbar_mn.htm
new file mode 100644
index 0000000..5a2903c
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_toolbar_mn.htm
@@ -0,0 +1,206 @@
+<!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>Toolbar</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Toolbar Component</a></li>
+			<li><a href="#styles">Using the Toolbar Styles</a></li>
+			<li><a href="#configure">Configuring the Toolbar</a></li>
+			<li><a href="#items">Adding Items to the Toolbar</a></li>
+			<li><a href="#states">Adding Items with States</a></li>
+			<li><a href="#callback">Using the Toolbar Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Toolbar</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+
+<p> This UI component is a scrollable list of items and shows a menu when an item is selected. Only one item can be selected at a time.</p>
+
+
+    <p class="figure">Figure: Toolbar component</p> 
+  <p align="center"><img alt="toolbar component" src="../../images/toolbar.png" /></p> 
+  
+      <p class="figure">Figure: Toolbar hierarchy</p> 
+  <p align="center"><img alt="Toolbar hierarchy" src="../../images/toolbar_tree.png" /></p> 
+
+<h2 id="add">Adding a Toolbar Component</h2>
+
+<p>Use the following function to create a toolbar.</p>
+<pre class="prettyprint">
+Evas_Object *toolbar, *parent;
+
+toolbar = elm_toolbar_add(parent);
+</pre>
+
+<h2 id="styles">Using the Toolbar Styles</h2>
+<p>The toolbar has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">tabbar</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">tabbar_with_title</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">navigationbar</span></li>
+</ul>
+<p>The following example sets the style to <span style="font-family: Courier New,Courier,monospace">navigationbar</span>.</p>
+<pre class="prettyprint">
+elm_object_style_set(toolbar, &quot;navigationbar&quot;);
+</pre>
+
+<h2 id="configure">Configuring the Toolbar</h2>
+<p>The toolbar displays its items in one of the following options.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span>: The toolbar sets a minimum size to its items so that all of them fit without scrolling.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_HIDE</span>: The toolbar does not scroll or show the items that do not fit in.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_SCROLL</span>: The toolbar scrolls to show the items that do not fit in.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_MENU</span>: The toolbar creates a button to popup hidden items.</li>
+</ul>
+
+<p>Here the toolbar is set to <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span>.</p>
+<pre class="prettyprint">
+elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_NONE);
+</pre>
+<p>By default, the toolbar displays items homogeneously. Items with long labels occupy a lot of space. To avoid that, you can disable the homogeneous mode.</p>
+<pre class="prettyprint">
+elm_toolbar_homogeneous_set(toolbar, EINA_FALSE);
+</pre>
+
+<h2 id="items">Adding Items to the Toolbar</h2>
+<p>The following example shows how to add two items and choose the associated icon, label, and function to call when the item is clicked.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *home_it, *help_it;
+
+&nbsp;&nbsp;&nbsp;home_it = elm_toolbar_item_append(toolbar, &quot;home&quot;, &quot;Home&quot;,
+&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;_home_item_pressed_cb, NULL);
+&nbsp;&nbsp;&nbsp;help_it = elm_toolbar_item_append(toolbar, &quot;help&quot;, &quot;Help&quot;,
+&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;_help_item_pressed_cb, NULL);
+}
+
+static void
+_home_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Home item clicked \n&quot;);
+}
+
+static void
+_help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Help item clicked \n&quot;);
+}
+</pre>
+
+<p>An item can be disabled. This is how to disable the help item. The disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out) from its normal state.</p>
+<pre class="prettyprint">
+elm_object_item_disabled_set(help_it, EINA_TRUE);
+</pre>
+
+<h2 id="states">Adding Items with States</h2>
+<p>Items have two or more states. Each state has its own icon, label, and function to call when an item is clicked. The following example shows how to create two states to the help item with the same icon but two different labels.</p>
+<pre class="prettyprint">
+elm_toolbar_item_state_add(help_it, &quot;help&quot;, &quot;Help state 1&quot;,
+&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;_help_item_pressed_cb, NULL);
+elm_toolbar_item_state_add(help_it, &quot;help&quot;, &quot;Help state 2&quot;,
+&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;_help_item_pressed_cb, NULL);
+</pre>
+<p>It is possible to cycle through the states of the help item by using the following code.</p>
+<pre class="prettyprint">
+elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
+</pre>
+
+<h2 id="callback">Using the Toolbar Callbacks</h2>
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks on a toolbar item, which is selected. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks on a toolbar item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The toolbar is pressed for a certain amount of time. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language changes.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,focused</span>: The item is highlighted. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,unfocused</span>: The highlight is removed from the item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The toolbar scrolls. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The toolbar scrolling animation starts. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The toolbar scrolling animation stops. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: The user starts dragging the toolbar. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: The user stops dragging the toolbar. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+</ul>
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(toolbar, &quot;clicked&quot;, clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when a toolbar item is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Toolbar_Item * item = event_info;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item clicked\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_tooltip_mn.htm b/org.tizen.ui.practices/html/native/efl/component_tooltip_mn.htm
new file mode 100644
index 0000000..96e85c9
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_tooltip_mn.htm
@@ -0,0 +1,136 @@
+<!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>Tooltip</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Tooltip</a></li>
+			<li><a href="#activate">Activating the Tooltip</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Tooltip</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+
+<p>The tooltip component is a smart object that shows a content in a frame when mouse hovers a parent object. The UI component provides tips or information about the parent object.</p>
+
+<h2 id="add">Adding a Tooltip</h2>
+<p>The tooltip component cannot be created with the <span style="font-family: Courier New,Courier,monospace">elm_tooltip_add()</span> function. This component is already contained in a parent component when it is created. You can only activate or disable it.</p>
+
+<h2 id="activate">Activating the Tooltip</h2>
+<p>To activate the tooltip on a parent object, you can set a tooltip text to the parent object.</p>
+<pre class="prettyprint">
+Evas_Object *parent;
+
+elm_object_tooltip_text_set(parent, &quot;The tooltip text&quot;;
+</pre>
+<p>You can also set a content to the parent object.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;elm_object_tooltip_content_cb_set(parent, tooltip_content_cb, NULL, tooltip_content_del_cb);
+}
+
+Evas_Object*
+tooltip_content_cb(void*data, Evas_Object *obj, Evas_Object *tooltip)
+{
+&nbsp;&nbsp;&nbsp;// Create the tooltip content 
+}
+
+void tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;// Destroy the tooltip content 
+}
+</pre>
+
+<p>When passing content to the tooltip, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_cb</span> function is called each time the tooltip is showed. The role of this function is to create the content to set in the tooltip. It returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+<p>When the tooltip disappears, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_del_cb</span> function is called. This function is in charge of deleting the previously allocated <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+<p>Once set, the tooltip can be manually hidden or shown.</p>
+
+<pre class="prettyprint">
+elm_object_tooltip_hide(parent);
+elm_object_tooltip_show(parent);
+</pre>
+
+<p>The tooltip can be removed from the parent object when it is not needed.</p>
+<pre class="prettyprint">
+elm_object_tooltip_unset(parent);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">When content is set into the tooltip object, unsetting it calls the callback provided as <span style="font-family: Courier New,Courier,monospace">del_cb</span> to notify that the tooltip cannot be used any longer.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>A tooltip object is not a UI component, so it does not emit signals. There are no registered callbacks for it.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_win_mn.htm b/org.tizen.ui.practices/html/native/efl/component_win_mn.htm
new file mode 100644
index 0000000..4ab5ae2
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_win_mn.htm
@@ -0,0 +1,153 @@
+<!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>Win</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Window Component</a></li>
+			<li><a href="#close">Closing a Window</a></li>
+			<li><a href="#callback">Using the Window Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Win</h1>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The window component is the root UI component that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.</p>
+<p>The window component is created with the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function. The content can be added in the window with <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> so that a window resize also resizes the content inside.</p>
+
+
+    <p class="figure">Figure: Win hierarchy</p> 
+  <p align="center"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>  
+
+<h2 id="add">Adding a Window Component</h2>
+
+<p>Create a new window and change the title.</p>
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a window 
+window = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+
+// Change the window title 
+elm_win_title_set(window, &quot;Example Window&quot;);
+</pre>
+
+<p>The first element of <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is <span style="font-family: Courier New,Courier,monospace">NULL</span>, meaning there is no parent. <span style="font-family: Courier New,Courier,monospace">main</span> is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).</p>
+
+<p>Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span>. The window created is of the type <span style="font-family: Courier New,Courier,monospace">ELM_WIN_BASIC</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a standard window 
+window = elm_win_util_standard_add(&quot;main&quot;, &quot;Example Window&quot;);
+</pre>
+
+<h2 id="close">Closing a Window</h2>
+<p>When the user closes the window outside of the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.</p>
+<p>When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the window is not destroyed and the program does so when required. The default is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, where the window is not destroyed automatically.</p>
+<p>The autodel is set using the following call:</p>
+<pre class="prettyprint">
+elm_win_autodel_set(window, EINA_TRUE);
+</pre>
+
+<p>To close the window, use the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function. The window is destroyed and the signal <span style="font-family: Courier New,Courier,monospace">delete,request</span> is sent.</p>
+
+<h2 id="callback">Using the Window Callbacks</h2>
+<p>The window component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">focus,in</span>: The window received focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">focus,out</span>: The window lost focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">moved</span>: The window that holds the canvas is moved.</li>
+<li><span style="font-family: Courier New,Courier,monospace">withdrawn</span>: The window is managed normally but is removed from the view.</li>
+<li><span style="font-family: Courier New,Courier,monospace">iconified</span>: The window is minimized (for example, into an icon or a taskbar).</li>
+<li><span style="font-family: Courier New,Courier,monospace">normal</span>: The window is in the normal state (not withdrawn or iconified).</li>
+<li><span style="font-family: Courier New,Courier,monospace">stick</span>: The window shows on all desktops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unstick</span>: The window shows only on one desktop.</li>
+<li><span style="font-family: Courier New,Courier,monospace">fullscreen</span>: The window is fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfullscreen</span>: The window stops being fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">maximized</span>: The window is maximized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unmaximized</span>: The window is diminished.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wm,rotation,changed</span>: The rotation of the window is changed by the Windows Manager.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ioerr</span>: A low-level I/O error occurred in the display system.</li>
+</ul>
+<p>With all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example registers a callback function called on the <span style="font-family: Courier New,Courier,monospace">fullscreen</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(window, &quot;fullscreen&quot;, fullscreen_cb, data);
+}
+
+// Callback function for the &quot;fullscreen&quot; signal
+// This callback is called when the window becomes fullscreen
+void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Window fullscreen\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/component_win_wn.htm b/org.tizen.ui.practices/html/native/efl/component_win_wn.htm
new file mode 100644
index 0000000..b7fcad3
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/component_win_wn.htm
@@ -0,0 +1,160 @@
+<!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>Win</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#add">Adding a Window Component</a></li>
+			<li><a href="#close">Closing a Window</a></li>
+			<li><a href="#callback">Using the Window Callbacks</a></li>
+		</ul>
+			<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Win</h1>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The window component is the root UI component that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.</p>
+<p>The window component is created with the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function. The content can be added in the window with <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> so that a window resize also resizes the content inside.</p>
+
+
+    <p class="figure">Figure: Win hierarchy</p> 
+<p align="center"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>   
+
+<h2 id="add">Adding a Window Component</h2>
+
+<p>Create a new window and change the title.</p>
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a window 
+window = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+
+// Change the window title 
+elm_win_title_set(window, &quot;Example Window&quot;);
+</pre>
+
+<p>The first element of <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is <span style="font-family: Courier New,Courier,monospace">NULL</span>, meaning there is no parent. <span style="font-family: Courier New,Courier,monospace">main</span> is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).</p>
+
+<p>Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span>. The window created is of the type <span style="font-family: Courier New,Courier,monospace">ELM_WIN_BASIC</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a standard window 
+window = elm_win_util_standard_add(&quot;main&quot;, &quot;Example Window&quot;);
+</pre>
+
+<h2 id="close">Closing a Window</h2>
+<p>When the user closes the window outside of the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.</p>
+<p>When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the window is not destroyed and the program does so when required. The default is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, where the window is not destroyed automatically.</p>
+<p>The autodel is set using the following call:</p>
+<pre class="prettyprint">
+elm_win_autodel_set(window, EINA_TRUE);
+</pre>
+
+<p>To close the window, use the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function. The window is destroyed and the signal <span style="font-family: Courier New,Courier,monospace">delete,request</span> is sent.</p>
+
+<h2 id="callback">Using the Window Callbacks</h2>
+<p>The window component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">delete,request</span>: The window is requested delete.</li>
+<li><span style="font-family: Courier New,Courier,monospace">focus,in</span>: The window received focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">focus,out</span>: The window lost focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">moved</span>: The window that holds the canvas is moved.</li>
+<li><span style="font-family: Courier New,Courier,monospace">withdrawn</span>: The window is managed normally but is removed from the view.</li>
+<li><span style="font-family: Courier New,Courier,monospace">iconified</span>: The window is minimized (for example, into an icon or a taskbar).</li>
+<li><span style="font-family: Courier New,Courier,monospace">normal</span>: The window is in the normal state (not withdrawn or iconified).</li>
+<li><span style="font-family: Courier New,Courier,monospace">stick</span>: The window shows on all desktops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unstick</span>: The window shows only on one desktop.</li>
+<li><span style="font-family: Courier New,Courier,monospace">fullscreen</span>: The window is fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfullscreen</span>: The window stops being fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">maximized</span>: The window is maximized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unmaximized</span>: The window is diminished.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wm,rotation,changed</span>: The rotation of the window is changed by the Windows Manager.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ioerr</span>: A low-level I/O error occurred in the display system.</li>
+<li><span style="font-family: Courier New,Courier,monospace">indicator,prop,changed</span>: The property or indicator mode and indicator opacity are changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">rotation,changed</span>: The rotation of the window is changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">profile,changed</span>: The profile of the window is changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">aux,hint,allowed</span>: aux_hint of the window free.</li>
+<li><span style="font-family: Courier New,Courier,monospace">access,changed</span>: The access function of the window is changed.</li>
+</ul>
+<p>With all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example registers a callback function called on the <span style="font-family: Courier New,Courier,monospace">fullscreen</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(window, &quot;fullscreen&quot;, fullscreen_cb, data);
+}
+
+// Callback function for the &quot;fullscreen&quot; signal
+// This callback is called when the window becomes fullscreen
+void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Window fullscreen\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.guides/html/native/efl/components_mn.htm b/org.tizen.ui.practices/html/native/efl/components_mn.htm
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/native/efl/components_mn.htm
rename to org.tizen.ui.practices/html/native/efl/components_mn.htm
diff --git a/org.tizen.ui.guides/html/native/efl/components_wn.htm b/org.tizen.ui.practices/html/native/efl/components_wn.htm
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/native/efl/components_wn.htm
rename to org.tizen.ui.practices/html/native/efl/components_wn.htm
diff --git a/org.tizen.ui.practices/html/native/efl/containers_n.htm b/org.tizen.ui.practices/html/native/efl/containers_n.htm
new file mode 100644
index 0000000..a0e1fe0
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/containers_n.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>Using Container UI Components</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#box">Box</a></li>
+			<li><a href="#conformant">Conformant</a></li>
+			<li><a href="#grid">Grid</a></li>
+			<li><a href="#layout">Layout</a></li>
+			<li><a href="#mapbuf">Mapbuf</a></li>
+			<li><a href="#naviframe">Naviframe</a></li>
+			<li><a href="#panes">Panes</a></li>
+			<li><a href="#scroller">Scroller</a></li>
+			<li><a href="#table">Table</a></li>
+			
+			</ul>
+		<p class="toc-title">Related Info</p>
+			<ul class="toc">
+				<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+				<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+				<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+				<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Using Container UI Components</h1>
+
+				<h2 id="box" name="box">Box</h2>
+				
+
+  <p class="figure">Figure: Box container</p>
+  <p align="center"><img alt="Box container" src="../../images/box.png" /></p>
+
+
+<p>Most of the time, you want to display UI components on the screen in a specific order. In a <a href="form_tutorial_n.htm">form container</a>, for example, the user information is arranged vertically. This basic container is called a box. There is no theme for a box layout. It is just a linear method of arranging UI components horizontally or vertically.</p>
+<h3>Creating a Box</h3>
+<p>To create a new horizontal box:</p>
+<pre class="prettyprint">Evas_Object *vbox;
+
+vbox = elm_box_add(parent);
+</pre>
+<p>By default, the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function creates a vertical box. If you want to create a horizontal box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function:</p>
+<pre class="prettyprint">Evas_Object *hbox;
+
+hbox = elm_box_add(parent);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+</pre>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">A box is a non-graphical object. It adds no graphics to or around the objects it holds.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<h3>Adding Objects to the Box</h3>
+<p>You can add any Evas object to the box. Here, we create 5 button components and add them to a box:</p>
+<pre class="prettyprint">int i;
+Evas_Object *bt;
+Evas_Object *vbox;
+
+vbox = elm_box_add(parent);
+
+for (i = 0; i &lt; 5; i++)
+{
+&nbsp;&nbsp;&nbsp;char tmp[16];
+&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Button %d&quot;, i);
+&nbsp;&nbsp;&nbsp;bt = elm_button_add(vbox);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(bt, tmp);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(vbox, bt);
+&nbsp;&nbsp;&nbsp;evas_object_show(bt);
+}
+evas_object_show(vbox);
+</pre>
+<p>The most important function in the above code is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span>, which is used to add the button component to the end of the box.</p>
+
+<h3>Setting the Padding</h3>
+<p>You can set the padding between the objects in a box by using the <span style="font-family: Courier New,Courier,monospace">elm_box_padding_set()</span> function. The padding values are the number of pixels horizontally and vertically.</p>
+<pre class="prettyprint">elm_box_padding_set(vbox, 16, 64);
+</pre>
+
+<h3>Handling Element Size</h3>
+<p>You can add different-size elements to a container. For example, to add an image with a size of 128x128 pixels as the first element in a box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function:</p>
+<pre class="prettyprint">ic = elm_icon_add(vbox);
+elm_image_file_set(ic, &quot;./c1.png&quot;, NULL);
+evas_object_size_hint_min_set(ic, 128, 128);
+evas_object_show(ic);
+elm_box_pack_start(vbox, ic);
+</pre>
+<p>We ask Evas to set the size hint for the icon object by using the <span style="font-family: Courier New,Courier,monospace">elm_object_size_hint_min_set()</span> function. Evas will try to set the minimum size of this object accordingly.</p>
+<p>If you want to create a homogeneous box, where all objects have the same height or width, depending on the orientation of the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_homogeneous_set()</span> function:</p>
+<pre class="prettyprint">elm_box_homogeneous_set(vbox, EINA_TRUE);
+</pre>
+<p>Elementary will set the height of the tallest object as the height of all objects, or the width of the widest element as the width of all objects.</p>
+<h3>Setting the Alignment</h3>
+<p>You can set the alignment of UI components inside a box using the <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> or <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.</p>
+
+<p class="figure">Figure: Alignment</p>
+<p align="center"><img alt="Alignment" src="../../images/align.png" /></p>
+
+<p>Here, we set an alignment of 0.8 vertically:</p>
+<pre class="prettyprint">elm_box_align_set(vbox, 0.0, 0.8);
+</pre>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The alignment only takes effect in the opposite direction than the one defined with the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function.</td>
+    </tr>
+   </tbody>
+  </table>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_box_layout_transition()</span> function provides the ability to animate the motion of the objects in a box when switching from one layout to another.</p>
+<h3>Using Size Hints</h3>
+<p>Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas will honor these requests if it can. This is why they are called &quot;hints&quot;. The size hint functions are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_max_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span></li>
+</ul>
+<p>You can also use the respective get functions to get the current hint values.</p>
+<p>In case of the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span> function, you ask Evas to respect the minimum size you define for the object. For example, to set the minimum size of an icon to 64x46 pixels:</p>
+<pre class="prettyprint">evas_object_size_hint_min_set(ic, 64, 64);
+</pre>
+<p>You can also set a maximum size for the same icon:</p>
+<pre class="prettyprint">evas_object_size_hint_max_set(ic, 128, 128);
+</pre>
+<p>When you resize the parent of the icon, if there are no constraints to the parent, the minimum size of the parent will be the minimum hint size of the icon. If you increase the parent size, the icon will grow larger until its maximum hint size is reached. After this point, the icon will not grow any larger and there will be empty space around the icon within the parent.</p>
+<p>When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object. Here, the proportion of the icon is respected, and the width will be the same as the height:</p>
+<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
+</pre>
+<p>Here, the width will be twice the height:</p>
+<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2, 1);
+</pre>
+<p>If we want to change the alignment of the icon relative to the parent, we can use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align()</span> function. By default, the icon is centered, so it is aligned with a value of 0.5. You can change the alignment as follows:</p>
+<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre>
+<p>In the above case, the icon is aligned to the bottom left corner of the parent.</p>
+<p>We can also play with the size of the icon inside its container by using the weight size hint. By default, the weight is not set, so the size of the icon will be the minimum size. But if you set this value to 1, the icon will be expand as much as it can inside the container:</p>
+<pre class="prettyprint">evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+<p>You can also use the alignment and weight hints together. Here, we want the icon to take up all the space in its parent:</p>
+<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+ 
+		
+				<h2 id="conformant" name="conformant">Conformant</h2>
+
+<p class="figure">Figure: Conformant container</p>
+<p align="center"><img alt="Conformant container" src="../../images/conformant.png" /></p>
+
+<p>A conformant is a container UI component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.</p>
+
+<h3>Creating a Conformant</h3>
+<p>To create a conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_conformant_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *conformant;
+
+conformant = elm_conformant_add(parent);
+</pre>
+
+<h3>Adding Content to the Conformant</h3>
+<p>To add content to the conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
+<pre class="prettyprint">elm_object_content_set(conformant, main_view);
+</pre>
+
+<h3>Signals</h3>
+<p>To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:</p>
+<ul>
+<li>&quot;virtualkeypad,state,on&quot;: The virtual keyboard has been switched on.</li>
+<li>&quot;virtualkeypad,state,off&quot;: The virtual keyboard has been switched off.</li>
+<li>&quot;virtualkeypad,size,changed&quot;: The virtual keyboard size has changed.</li>
+<li>&quot;clipboard,state,on&quot;: The clipboard has been switched on.</li>
+<li>&quot;clipboard,state,off&quot;: The clipboard has been switched off. </li>
+</ul>
+
+			
+				<h2 id="grid" name="grid">Grid</h2>
+
+<p>In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels.</p>
+
+<h3>Creating a Grid</h3>
+<p>To create a grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *grid;
+
+grid = elm_grid_add(parent);
+</pre><h3>Adding Items to the Grid</h3>
+<p>To add an item to the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. Provide the X and Y coordinates, and the width and height in the grid as parameters. The following code adds 12 icons in a circle formation:</p>
+<pre class="prettyprint">for (i = 0; i &lt; 12; i++)
+{
+&nbsp;&nbsp;&nbsp;ic = elm_icon_add(grid);
+&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(ic, 128, 128);
+&nbsp;&nbsp;&nbsp;evas_object_show(ic);
+&nbsp;&nbsp;&nbsp;x = 40 * cos(2.0 * M_PI / 12 * i);
+&nbsp;&nbsp;&nbsp;y = 40 * sin(2.0 * M_PI / 12 * i);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, ic,  40 + x,  40 + y,  20 , 20);
+}
+evas_object_show(grid);
+</pre>
+
+<h3>Changing Position and Size</h3>
+<p>To change the position of an item in the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. The first parameter is the item you want to move, and the following parameters are the same as for the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack()</span> function.</p>
+<p>To change the size of the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_size_set()</span> function. You can set the new width and height for the grid. The position and size of the items in the grid are changed accordingly.</p>
+<h3>Clearing the Grid</h3>
+<p>To clear the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_clear()</span> function. All items are removed from the grid. If you set the clear parameter, all the items are also deleted, with the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function called on each item.</p>
+
+
+				<h2 id="layout" name="layout">Layout</h2>
+
+<p>A layout is a container that takes a standard Edje design file and wraps it very thinly in a UI component. Layouts are the basis of a lot of graphics components used in Elementary.</p>
+
+<p>An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see <a href="theme_n.htm">Themes</a>.</p>
+
+<h3 id="container_layout_creating" name="container_layout_creating">Creating a Layout</h3>
+
+<p>To create a new layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *layout;
+
+layout = elm_layout_add(parent);
+</pre>
+<p>In Tizen, the layout component is extended to support different kinds of layouts. Rather than define layouts yourself, you can use the following predefined default layouts:</p>
+<ul>
+<li>application/default: This layout can be used to display content inside a window.</li>
+<li>drawer/panel: This layout can be used to create a 2-panel view.</li>
+<li>nocontents/default: This layout can be used when there is no content to display, such as in a contact or email.</li>
+</ul>
+<p>To use the application/default layout:</p>
+<pre class="prettyprint">Evas_Object *ly;
+
+ly = elm_layout_add(parent);
+elm_layout_theme_set(ly, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
+</pre>
+
+<h3 id="container_layout_inserting_objects" name="container_layout_inserting_objects">Adding Objects to the Layout</h3>
+<p>To add an Evas object to the layout:</p>
+<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot; view);
+</pre>
+<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> is the swallow part of the application layout, and with this call you integrate the view inside the swallow object of the layout.</p>
+<p>The drawer/panel layout can display 2 different views, the background and the main content:</p>
+<pre class="prettyprint">Evas_Object *ly;
+
+ly = elm_layout_add(parent);
+elm_layout_theme_set(ly, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
+</pre>
+<p>To swallow an object inside the main content and background views:</p>
+<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot;, main_view);
+elm_object_part_content_set(ly, &quot;elm.swallow.background&quot;, background);
+</pre>
+<p>The nocontents/default layout is a special layout in that it does not contain any swallows. You can only set the text part. There are two different texts zones: <span style="font-family: Courier New,Courier,monospace">elm.text</span> and <span style="font-family: Courier New,Courier,monospace">elm.help.text</span>. To change the text:</p>
+<pre class="prettyprint">elm_object_part_text_set(ly, &quot;elm.text&quot;, &quot;Hi All :)&quot;);
+elm_object_part_text_set(ly, &quot;elm.help.text&quot;, &quot;Hi All :)&quot;);
+</pre>
+<h3 id="container_layout_styles" name="container_layout_styles">Using Layout Themes</h3>
+<p>The layout component supports the following predefined default themes:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-content</span>: For applications with a toolbar and main content area.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back</span>: For applications with a toolbar, main content area (with a back button), and title area.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back-next</span>: For applications with a toolbar, main content area (with back and next buttons), and title area.</li>
+<li><span style="font-family: Courier New,Courier,monospace">content-back</span>: For applications with main content (with a back button) and title areas.</li>
+<li><span style="font-family: Courier New,Courier,monospace">content-back-next</span>: For applications with main content (with back and next buttons) and title areas.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-vbox</span>: For applications with a toolbar and main content area as a vertical box.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-table</span>: For applications with a toolbar and main content area as a table.</li>
+</ul>
+<p>To set a theme to the layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_theme_set()</span> function.</p>
+
+
+				<h2 id="mapbuf" name="mapbuf">Mapbuf</h2>
+
+<p class="figure">Figure: Mapbuf hierarchy</p>
+<p align="center"><img alt="Mapbuf hierarchy" src="../../images/mapbuf_tree.png" /></p>
+
+<p>A mapbuf component is a container UI component that uses an Evas map to hold a content object. This component is used to improve the moving and resizing performance of complex UI components.</p>
+
+<p>The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf component will be faster than frequently moving the content object.</p>
+
+<p>The mapbuf component inherits all the functions of the container class.</p>
+
+<h3>Creating a Mapbuf</h3>
+<p>To create a mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_mapbuf_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *mapbuf, *parent, *content;
+
+// Creating a mapbuf
+mapbuf = elm_mapbuf_add(parent);
+</pre>
+<h3>Adding Content to the Mapbuf</h3>
+<p>To add content to the mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function with the &quot;default&quot; part:</p>
+<pre class="prettyprint">elm_object_content_set(mapbuf, content);</pre>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Calling <span style="font-family: Courier New,Courier,monospace">elm_object_content_set(mapbuf, content)</span> is equivalent to calling <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(mapbuf, "default", content)</span>.</td>
+    </tr>
+   </tbody>
+  </table>
+
+
+<p>To activate smooth map rendering and alpha rendering for the mapbuf component:</p>
+<pre class="prettyprint">elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
+elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
+</pre>
+
+<h3>Activating the Mapbuf</h3>
+<p>Finally, to use the mapbuf component, you must activate it:</p>
+<pre class="prettyprint">elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);</pre>
+
+<h3>Signals</h3>
+<p>The mapbuf component does not emit any signals and therefore does not provide any callbacks that you can register.</p>
+
+			
+				<h2 id="naviframe" name="naviframe">Naviframe</h2>
+
+<p>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the UI component.</p>
+
+<h3>Creating a Naviframe</h3>
+<p>To create a naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *nav;
+
+nav = elm_naviframe_add(parent);
+</pre>
+<h3>Adding and Deleting Views</h3>
+<p>The naviframe is a stack of views. A new view is always pushed to the top of the stack. The top-most view is deleted by popping it.</p>
+<p>To add a new view to the naviframe:</p>
+<pre class="prettyprint">Elm_Object_Item *nav_it;
+
+nav_it = elm_naviframe_item_push(nav, NULL, NULL, NULL, view, NULL);
+// In Tizen 2.3, the back button is not supported in the naviframe 
+</pre>
+<p>When you push a new view to the stack, you receive an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> for the view. You can use this item to modify the view.</p>
+<p>To pop and delete the top-most view:</p>
+<pre class="prettyprint">elm_naviframe_item_pop(nav);
+</pre>
+
+<h3>Adding Fixed Content</h3>
+<p>The naviframe can also display fixed content on top of the current (top-most) view. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function to set this content. Use the following part names to specify the location of the content:</p>
+<ul>
+<li>&quot;default&quot;: The main content area of the current view.</li>
+<li>&quot;title_left_btn&quot;: A button on the left side of the naviframe.</li>
+<li>&quot;title_right_btn&quot;: A button on the right side of the naviframe.</li>
+</ul>
+<p>For example, to add a button to the naviframe:</p>
+<pre class="prettyprint">btn = elm_button_add(nav);
+elm_object_style_set(btn, &quot;naviframe/title_cancel&quot;);
+elm_object_item_part_content_set(nav_it, &quot;title_left_btn&quot;, btn);
+</pre>
+<p>To set the title labels of the naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function and specify one of the following label locations:</p>
+<ul>
+<li>&quot;default&quot;: Sets the title label in the title area of the current view.</li>
+<li>&quot;subtitle&quot;: Sets the subtitle label in the title area of the current view.</li>
+</ul>
+<h3>Signals</h3>
+<p>The naviframe emits the following signals:</p>
+<ul>
+<li>&quot;transition,finished&quot;: The transition has finished changing the view.</li>
+<li>&quot;title,transition,finished&quot;: The title area transition has finished  changing the state of the title.</li>
+<li>&quot;title,clicked&quot;: The user has clicked the title area.</li>
+</ul>
+
+
+		
+				<h2 id="panes" name="panes">Panes in Mobile Applications</h2>
+
+<p class="figure">Figure: Panes component</p>
+<p align="center"><img alt="Panes component" src="../../images/panes.png" /></p>
+
+<p>A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</p>
+
+<h3>Creating Panes</h3>
+<p>To create a panes component, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *panes;
+
+panes = elm_panes_add(parent);
+</pre>
+
+<h3>Adding Content to the Panes</h3>
+<p>To add content to the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. The following code adds an object to the left pane:</p>
+<pre class="prettyprint">elm_object_part_content_set(panes, &quot;left&quot;, obj);
+</pre>
+
+<h3>Setting Panes Options</h3>
+<p>To set the orientation of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
+
+<p>To set the size of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions.</p>
+
+<h3>Signals</h3>
+<p>The panes component emits the following signals:</p>
+<ul>
+<li>&quot;press&quot;: The panes component has been pressed (but the press has not been released yet).</li>
+<li>&quot;unpress&quot;: The press has been released.</li>
+<li>&quot;clicked&quot;: The panes component has been clicked.</li>
+<li>&quot;clicked,double&quot;: The panes component has been double-clicked.</li>
+</ul>
+
+		
+				<h2 id="scroller" name="scroller">Scroller</h2>
+
+<p>A scroller holds (and clips) a single object and allows you to scroll across it. This means that the user can use a scroll bar or their finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. The scroller will always have a default minimum size that is not limited by its contents.</p>
+<p>The scroller component inherits all the functions of the <a href="#layout">Layout</a>.</p>
+<h3>Creating a Scroller</h3>
+<p>To create a scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *scroller;
+
+scroller = elm_scroller_add(parent);
+</pre>
+<h3>Adding Objects to the Scroller</h3>
+<p>To add an object to the scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
+<pre class="prettyprint">Evas_Object *image;
+
+image = elm_image_add(parent);
+elm_image_file_set(image, &quot;image.png&quot;, NULL);
+evas_object_show(image);
+evas_object_size_hint_min_set(image, 2560, 1600);
+elm_object_content_set(scroller, image);
+</pre>
+<p>In the above code, we set a minimum size of 2560 x 1600 pixels for the image. The scroller is smaller than the image, so you can scroll across the image.</p>
+<p>If you want to be informed when the user begins scrolling the image, use the following code:</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(scroller, &quot;scroll,drag,start&quot;, _scroll_start_cb, NULL);
+
+// Callback function for the &quot;animate,begin&quot; signal
+// This callback is called when the user begins scrolling the image
+void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Scroll starts\n&quot;);
+}</pre>
+
+<h3>Managing the Properties of the Scroller</h3>
+<p>When scrolling content, the scroller may &quot;bounce&quot; when reaching the edge of the content. This is a visual way of indicating that there is no more content to scroll in that direction. Bounce is enabled by default for both axes. To enable or disable the bounce for either or both axes, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_bounce_set()</span> function. The following code disables the bounce for the horizontal axis and enables it for the vertical axis:</p>
+
+<pre class="prettyprint">elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
+</pre>
+<p>The scroller can limit the scrolling to &quot;pages&quot;. In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single "page" at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_size_set()</span> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
+
+<h3>Signals</h3>
+
+<p>The scroller emits the following signals, which you can catch in your application:</p>
+
+<ul>
+<li>&quot;edge,left&quot;: The left edge of the content has been reached.</li>
+<li>&quot;edge,right&quot;: The right edge of the content has been reached.</li>
+<li>&quot;edge,top&quot;: The top edge of the content has been reached.</li>
+<li>&quot;edge,bottom&quot;: The bottom edge of the content has been reached.</li>
+<li>&quot;scroll&quot;: The content has been scrolled (moved).</li>
+<li>&quot;scroll,anim,start&quot;: The scrolling animation has started.</li>
+<li>&quot;scroll,anim,stop&quot;: The scrolling animation has stopped.</li>
+<li>&quot;scroll,drag,start&quot;: Dragging the contents has started.</li>
+<li>&quot;scroll,drag,stop&quot;: Dragging the contents has stopped.</li>
+<li>&quot;vbar,drag&quot;: The vertical scroll bar has been dragged.</li>
+<li>&quot;vbar,press&quot;: The vertical scroll bar has been pressed.</li>
+<li>&quot;vbar,unpress&quot;: The vertical scroll bar has been unpressed.</li>
+<li>&quot;hbar,drag&quot;: The horizontal scroll bar has been dragged.</li>
+<li>&quot;hbar,press&quot;: The horizontal scroll bar has been pressed.</li>
+<li>&quot;hbar,unpress&quot;: The horizontal scroll bar has been unpressed.</li>
+<li>&quot;scroll,page,changed&quot;: The visible page has changed.</li>
+</ul>
+
+<h3>Example</h3>
+<p>A good example of the scroller is a picture slideshow: we add images to the scroller and limit the scrolling to pages (one picture at a time). In the following code, we disable the scroll bars for both axes, limit the scrolling to pages by using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_scroll_limit_set()</span> function, and lock the scrolling on the Y axis by using the <span style="font-family: Courier New,Courier,monospace">elm_object_scroll_lock_y_set()</span> function:</p>
+<pre class="prettyprint">elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
+elm_scroller_page_scroll_limit_set(scroller, 1, 0);
+elm_object_scroll_lock_y_set(scroller, EINA_TRUE);
+</pre>
+<p>We create a horizontal box, which will contain all the images, and which itself will be contained by the scroller:</p>
+<pre class="prettyprint">box = elm_box_add(scroller);
+elm_box_horizontal_set(box, EINA_TRUE);
+elm_object_content_set(scroller, box);
+evas_object_show(box);
+</pre>
+<p>We then create all the images and add them to the horizontal box:</p>
+<pre class="prettyprint">img = elm_image_add(scroller);
+snprintf(buf, sizeof(buf), IMAGE_DIR&quot;/%d.jpg&quot;, i);
+elm_image_file_set(img, buf, NULL);
+evas_object_show(img);
+pages = eina_list_append(pages, img);
+elm_box_pack_end(box, img);
+</pre>
+<p>We store references to the images in an <span style="font-family: Courier New,Courier,monospace">eina_list</span> for easy retrieval later.</p>
+<p>Finally, we display the first page of the scroller:</p>
+<pre class="prettyprint">elm_scroller_page_show(scroller, 0, 0);
+</pre>
+<p>The size of the scroller depends on the size of the parent. When the parent changes, for example when the window is resized or rotated, the scroller is also resized. Since we need to be informed when the scroller is resized, we add a callback on the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span> event for the scroller:</p>
+<pre class="prettyprint">evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE, _scroller_resize_cb, NULL);</pre>
+<p>The callback retrieves the new size of the scroller by using the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function on the object pointer. The pointer is relative to the object that has been resized, which in our case is the scroller itself. We can then iterate through the images of the scroller and set the minimum size to fit the scroller size:</p>
+<pre class="prettyprint">EINA_LIST_FOREACH(images, l, page)
+{
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(page, w, h);
+}
+</pre>
+<p>Finally, we set the page size of the scroller to match the scroller size and display the first page:</p>
+<pre class="prettyprint">elm_scroller_page_size_set(obj, w, h);
+elm_scroller_page_show(obj, 0, 0);</pre>
+
+				<h2 id="table" name="table">Table</h2>
+
+<p>A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap).</p>
+
+<h3>Creating a Table</h3>
+
+<p>To create a table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *table;
+table = elm_table_add(parent);</pre>
+
+<h3>Adding Items to the Table</h3>
+
+<p>Items are added to the table with the <span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span> function. This function takes as parameters the table, the item to add to the table, and the position where to add the item: column, row, and the size of the item in number of rows and columns (colspan and rowspan). If we want to create an icon that takes 3 columns and rows and a button that only takes 1 row and column, the code will look like this:</p>
+<pre class="prettyprint">ic = elm_icon_add(table);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+evas_object_show(ic);
+elm_table_pack(table, ic, 0, 0, 3, 3);
+
+btn = elm_button_add(table);
+elm_object_text_set(btn, &quot;Click me i'm famous&quot;);
+evas_object_show(btn);
+elm_table_pack(table, btn, 3, 1, 1, 1);
+evas_object_show(table);
+</pre>
+
+<h3>Managing the Items</h3>
+
+<p>If you want to change the position of the item after adding it, use the <span style="font-family: Courier New,Courier,monospace">elm_table_pack_set()</span> function. This function takes as parameters the item whose position to change, the new column, the new row, and the size of the item in number of rows and columns (colspan and rowspan).</p>
+
+<p>To add padding around the item, use the <span style="font-family: Courier New,Courier,monospace">elm_table_padding_set()</span> function. The second parameter is the padding between columns, and the third parameter is the padding between rows:</p>
+<pre class="prettyprint">elm_table_padding_set(table, 10, 10);</pre>
+
+<p>To change the alignment and size of an item, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint</span> parameters. They are used in the same way as with boxes. You can set the same size and weight to each item by using the homogeneous parameter:</p>
+<pre class="prettyprint">elm_table_homogeneous_set(table, EINA_TRUE);
+</pre>
+
+<h3>Clearing the Table</h3>
+
+<p>To clear the table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_clear()</span> function. If the clear parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the table items are deleted. The <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function will be called on each item.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/core_loop_n.htm b/org.tizen.ui.practices/html/native/efl/core_loop_n.htm
new file mode 100644
index 0000000..98c7a23
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/core_loop_n.htm
@@ -0,0 +1,87 @@
+<!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>Core Loop and OS Interfacing: Handling the Main Loop and Threads</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+   
+   <h1>Core Loop and OS Interfacing: Handling the Main Loop and Threads</h1>
+ <p>The Ecore library provides convenience functions, which allow you to manage the <a href="main_loop_n.htm">application main loop</a> and <a href="threads_n.htm">threading</a>.</p>
+  
+<p>Tizen applications developed with EFL use the EDA (Event-driven Architecture) pattern. In EDA, applications reiterate the routine that checks input events, processes the events, and then displays the outputs. The main loop is the entity handling this sequence. It is the heart of any GUI based on EDA.</p>
+
+<p>Most applications start and end the main loop, which is used in special situations, such as propagation of events to UI components for handling and updating application appearance and state. That guarantees the delivery of all events received from low-level input devices and provides the accurate and speedy render event loop for synchronizing the application UI with events.</p>
+
+<p>The Ecore library provides main loop abstraction with a clean and tiny event loop library. Applications mainly deal with file descriptors handling, event handling, and timer handling from the beginning of the main loop.</p>
+
+<p>In addition, Ecore provides several modules related to, for example, Audio, Cocoa, Connection, Drm, FrameBuffer, Input, IPC, Wayland, Win32, and X11 with convenient methods to communicate with underlying operating systems, such as Ubuntu, Windows&reg;, or Mac OS&reg; X.</p>
+
+<p>There are 2 types of threads in Tizen applications:</p>
+<ul>
+<li>Main thread that contains the main loop</li>
+<li>Worker threads that support concurrent processing. In parallel processing, applications must keep the GUI updating while processing the data related to the UI.</li>
+</ul>
+
+<p>The Ecore library provides these concurrent processing mechanisms through Ecore threads. An Ecore thread is not a simple wrapper for standard POSIX threads. It is not meant to be used to run parallel tasks throughout the entire duration of the application, especially when these tasks are performance-critical. Ecore manages these tasks using a pool of threads based on system configuration, such as the number of processors the system has, and the maximum amount of concurrent threads set for the application.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+   
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/data_types_n.htm b/org.tizen.ui.practices/html/native/efl/data_types_n.htm
new file mode 100644
index 0000000..636dcb6
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/data_types_n.htm
@@ -0,0 +1,1695 @@
+<!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>Data Types</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">      
+			 <li><a href="#iterate">Iterator Functions</a></li>
+			 <li><a href="#string">Strings</a></li>
+			 <li><a href="#array">Arrays</a></li>
+			 <li><a href="#hash">Hash Tables</a></li>
+			 <li><a href="#list">Lists</a></li>
+			 <li><a href="#generic">Generic Value</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+        <ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
+		</ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Data Types</h1>
+
+  <p>The Eina library is a central part of the EFL. It implements an API for data types, and allows you to create and manipulate several data types:</p>
+
+<ul>
+<li><a href="#inline">Inline Array</a>: standard array of inlined members</li>
+<li><a href="#array">Array</a>: standard array of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#hash">Hash Table</a>: standard hash of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#inlist">Inline List</a>: list with nodes inlined into the user type</li>
+<li>Compact List</li>
+<li><a href="#list">List</a>: standard list of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#iterate">Iterator Functions</a></li>
+<li>Sparse Matrix: sparse matrix of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li>Red-Black tree: red-black tree with nodes inlined into the user type</li>
+<li><a href="#buffer">String Buffer</a>: mutable string to prepend, insert, or append strings to a buffer</li>
+<li><a href="#share">Stringshare</a>: shares read-only string references</li>
+<li>Tiler split: merges and navigates into 2D tiled regions</li>
+<li>Trash: container of unused but allocated data</li>
+<li><a href="#generic">Generic Value Storage</a>: container for generic value storage and access</li>
+<li>Data Model API: container for data with a user-defined hierarchy or structure</li>
+</ul>
+
+  
+<h2 id="iterate" name="iterate">Iterator Functions</h2>
+<p>Eina provides a set of iterator functions to manipulate data types, such as arrays.</p>
+<p>These functions allow access to container elements in a generic way, without knowing which container is used (similar to iterators in the C++ STL). Iterators only allow sequential access (that is, from one element to the next one). For random access, Eina provides accessor functions.</p>
+<p>Getting an iterator to access elements of a given container is done through the functions of that particular container. There is no function to create a generic iterator as iterators absolutely depend on the container. Note that all iterators, regardless of the container type, are always deleted with the same <span style="font-family: Courier New,Courier,monospace">eina_iterator_free()</span> function.</p>
+<p>To get the data and iterate, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_next()</span> function. To call a function on every single element of a container, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_foreach()</span> function.</p>
+<p>In addition to iterator functions, each data type also owns a set of macros that provide the iterators, such as <span style="font-family: Courier New,Courier,monospace">FOREACH</span> or <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p>
+
+<h2 id="string" name="string">Strings</h2>
+
+<h3 id="share" name="share">Stringshare</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> data type functions allow you to store a single copy of a string and use it in multiple places throughout your program. This way you can save a lot of strings with less memory. It improves string creation and destruction speed, reduces memory use, and decreases memory fragmentation.</p>
+<p>With this data type you can reduce the number of duplicated strings kept in memory. It is common for the same strings to be dynamically allocated repeatedly between applications and libraries, especially in circumstances where you can have multiple copies of a structure that allocates the string. Rather than duplicating and freeing these strings, request a read-only pointer to an existing string and only incur the overhead of a hash lookup. This can sound like micro-optimizing, but profiling has shown that this can have a significant impact as the number of copies grows.</p>
+
+<p>To manage stringshares:</p>
+<ol>
+<li>To create a stringshare, declare a string variable and call the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_add()</span> function:
+<pre class="prettyprint">
+const char *mystr;
+const char *prologue = &quot;Enlightenment is not just a window manager for Linux/X11 and others&quot;
+
+mystr = eina_stringshare_add(prologue);
+</pre></li>
+
+<li>To retrieve or modify the string data:
+<ul>
+<li>Retrieve a string for use in a program from a format string using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_printf()</span> function. If you have a &quot;format&quot; string to pass to a function like <span style="font-family: Courier New,Courier,monospace">printf</span>, you can store it as a stringshare as well.
+<p>The following example produces &quot;1 desktop manager to rule them all&quot;.</p>
+<pre class="prettyprint">
+const char *myfmtstr = &quot;%d desktop manager to rule them all&quot;;
+const char *str;
+
+str = eina_stringshare_printf(myfmtstr, 1);
+
+print(str)
+</pre>
+</li>
+
+<li>Replace the value of a stringshare with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_replace()</span> function. Pass the pointer address and the new value to the function.
+<pre class="prettyprint">
+eina_stringshare_replace(&amp;str,&quot;One desktop manager to rule them all&quot;);
+</pre>
+</li>
+
+<li>Retrieve the length of the stringshare value with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_strlen()</span> function.
+<pre class="prettyprint">
+printf(&quot;length: %d\n&quot;, eina_stringshare_strlen(str));
+</pre>
+</li>
+</ul>
+</li>
+<li>When the string is no longer needed, delete it using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_del()</span> function:
+<pre class="prettyprint">
+eina_stringshare_del(mystr);
+</pre>
+</li>
+</ol>
+
+
+
+<h3 id="buffer" name="buffer">String Buffer</h3>
+<p>The string buffer data type is designed to be a mutable string, allowing you to append, prepend or insert a string to a buffer. It allows easy handling of buffers in your applications.</p>
+<p>To manage string buffers:</p>
+<ol>
+<li>Initialize the <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> instance and create the buffer:
+<pre class="prettyprint">
+Eina_Strbuf *buf;
+mybuffer = eina_strbuf_new();
+</pre>
+</li>
+<li>Manage the buffer content:
+<ul>
+<li>To append characters to the buffer:
+<ul>
+<li>
+<p>For basic strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append()</span> function:</p>
+<pre class="prettyprint">
+eina_strbuf_append(mybuffer, &quot;This is my string.&quot;);
+</pre>
+</li>
+<li>To append 1 character to your buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_char()</span> function. You can also append a sized string to the buffer using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_length()</span> function.
+<pre class="prettyprint">
+eina_strbuf_append_length(mybuffer, &quot;Buffe&quot;, 5);
+eina_strbuf_append_char(mybuffer, &#39;r&#39;);
+</pre>
+</li>
+<li>To handle &quot;printf&quot; format strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_printf()</span> function to add formatted strings to the buffer:
+<pre class="prettyprint">
+eina_strbuf_append_printf(buf, &quot;%s%c&quot;, &quot;buffe&quot;, &#39;r&#39;);
+</pre>
+</li>
+</ul>
+</li>
+
+<li>To remove characters from one position to another, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_remove()</span> function. The first parameter is the buffer, the second is the start position of the characters you want to delete, and the last the end position.
+<p>This example removes the first 19 characters of the buffer:</p>
+<pre class="prettyprint">
+eina_strbuf_remove(buf, 0, 18);
+</pre>
+</li>
+
+<li>To replace characters: 
+
+<ul><li>
+<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace()</span> replaces a specific occurrence of a given string in the buffer with another string.</li>
+<li>
+<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace_all()</span> replaces all occurrences of a given string in the buffer with another string.
+</li>
+</ul>
+<pre class="prettyprint">
+eina_strbuf_append(mybuffer, &quot;buffer buffer buffer&quot;);
+
+// Replacing one occurrence of &quot;buffer&quot; by &quot;B-U-F-F-E-R&quot;
+eina_strbuf_replace(mybuffer, &quot;buffer&quot;, &quot;B-U-F-F-E-R&quot;, 1);
+
+// Replacing all the occurrences of &quot;buffer&quot; by &quot;B-U-F-F-E-R&quot;
+eina_strbuf_replace_all(mybuffer, &quot;buffer&quot;, &quot;B-U-F-F-E-R&quot;);
+
+// Replacing all the occurrences of &quot;B-U-F-F-E-R&quot; by &quot;Buffer&quot;
+eina_strbuf_replace_all(mybuffer, &quot;B-U-F-F-E-R&quot;, &quot;Buffer&quot;);
+</pre>
+</li>
+<li>To insert a string at the specified position, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert()</span> function. Use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert_printf()</span> function with formatted strings.
+<pre class="prettyprint">
+eina_strbuf_insert(mybuffer, &quot;More buffer&quot;, 10);
+
+// Using eina_strbuf_length_get to get the buffer length
+eina_strbuf_insert_printf(buf, &quot; %s: %d&quot;, 6, &quot;length&quot;, eina_strbuf_length_get(buf));
+</pre>
+</li>
+
+<li>To get the complete length of the string and the buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_get()</span> and <span style="font-family: Courier New,Courier,monospace">eina_strbuf_length_get()</span> functions:
+<pre class="prettyprint">
+printf(&quot;%s : %d\n&quot;, eina_strbuf_string_get(mybuffer), eina_strbuf_length_get(buf));
+</pre>
+</li>
+</ul>
+</li>
+
+<li>When no longer needed, free the buffer with the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_free()</span> function. You can also free the content of <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> without freeing the buffer itself using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_free()</span> function.
+<pre class="prettyprint">
+eina_strbuf_free(mybuffer);
+</pre>
+</li>
+</ol>
+
+<h2 id="array" name="array">Arrays</h2>
+<p>An array is a data type which describes an ordered collection of values. The values are accessed by their index. </p>
+<pre class="prettyprint">
+INDEX | VALUE
+--------------
+0     | value0
+1     | value1
+2     | value2
+3     | value3
+4     | value4
+5     | value5
+6     | value6
+7     | value7
+</pre>
+<p>Eina provides 2 array types: the classic array and an inline array.</p>
+
+<h3>Creating and Destroying a Classic Array</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function creates a new array. You can store strings or objects in the created array. The function returns a new array, or if memory allocation fails, <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function defines the size of the array allocation step. For example, if you set it to 4, the function returns an array of 4 elements and the next time you grow the array it grows by 4 elements. Unless you have pushed 4 elements inside, it does not grow. But once you add the 5th element, it grows again and becomes an array of 8 elements. The allocation step feature is very useful for optimizing performance, and it also reduces memory fragmentation by having a size that fits the array usage. If you set the step to 0, the function sets a default safe value.</p>
+
+<p>To create an array to store strings:</p>
+<ol>
+<li>Create the array:
+<pre class="prettyprint">
+// Strings to store in the array 
+const char* strings[] = 
+{
+&nbsp;&nbsp;&nbsp;&quot;helo&quot;, &quot;hera&quot;, &quot;starbuck&quot;, &quot;kat&quot;, &quot;boomer&quot;,
+&nbsp;&nbsp;&nbsp;&quot;hotdog&quot;, &quot;longshot&quot;, &quot;jammer&quot;, &quot;crashdown&quot;, &quot;hardball&quot;,
+&nbsp;&nbsp;&nbsp;&quot;duck&quot;, &quot;racetrack&quot;, &quot;apolo&quot;, &quot;husker&quot;, &quot;freaker&quot;,
+&nbsp;&nbsp;&nbsp;&quot;skulls&quot;, &quot;bulldog&quot;, &quot;flat top&quot;, &quot;hammerhead&quot;, &quot;gonzo&quot;
+};
+// Declaring the array (type Eina_Array)
+Eina_Array *array;
+unsigned int i;
+
+// Creating the array
+array = eina_array_new(20);
+
+// Inserting elements in the array
+for (i = 0; i &lt; 20; i++)
+&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
+</pre>
+</li>
+<li>To change the allocation step, use the <span style="font-family: Courier New,Courier,monospace">eina_array_step_set()</span> function:
+<ul><li>The first parameter is the array you want to change.</li>
+<li>The second parameter is the size of that specific array (retrieved with the <span style="font-family: Courier New,Courier,monospace">sizeof()</span> function).</li>
+<li>The last parameter is the new step size.</li></ul>
+<p>In this example, the array step changes from 20 to 30.</p>
+<pre class="prettyprint">
+eina_array_step_set(array, sizeof(*array), 30);
+</pre>
+</li>
+<li>When no longer used, use the <span style="font-family: Courier New,Courier,monospace">eina_array_free()</span> function to free the array. It first calls the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function and frees the memory of the pointer. It does not free the memory allocated for the elements of the array. To free them, use a <span style="font-family: Courier New,Courier,monospace">while</span> statement with the <span style="font-family: Courier New,Courier,monospace">eina_array_pop</span> function.
+<pre class="prettyprint">
+// Freeing the array elements
+while (eina_array_count(array))
+&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
+
+// Freeing the array itself
+eina_array_free(array);
+</pre>
+</li>
+</ol>
+
+<h3>Modifying Classic Array Content</h3>
+
+<p>To modify classic array content:</p>
+<ul>
+<li>To set the data of an element, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_set()</span> function. The first parameter is the array, the second is the index of the element you want to set, and the last one is the data. You must first get the related pointer if you need to free it, as this function replaces the previously held data. Be careful, as there is no array or index check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the application can crash.
+<pre class="prettyprint">
+free(eina_array_data_get(array, 0));
+eina_array_data_set(array, 0, strdup(strings[3]);
+</pre>
+</li>
+<li>To add elements to the end of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_push()</span> function. The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The first parameter is the array to store the element, the second one is the data you want to store. If you store strings, remember to allocate the memory first. The example uses the <span style="font-family: Courier New,Courier,monospace">strdup</span> function to duplicate the string contained in <span style="font-family: Courier New,Courier,monospace">strings[]</span>. This function allocates the memory of the returned string, so you do not have to do it yourself.
+<pre class="prettyprint">
+for (i = 0; i &lt; 20; i++)
+&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
+</pre>
+</li>
+
+<li>To remove the last element of an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_pop()</span> function. It takes the array as a parameter, and if the operation is successful, returns a pointer to the data of the removed element.
+<pre class="prettyprint">
+while (eina_array_count(array))
+&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
+</pre>
+</li>
+
+<li>To rebuild the array by specifying the data to be kept, use the <span style="font-family: Courier New,Courier,monospace">eina_array_remove()</span> function:
+<ul><li>The first parameter is the array to be changed.</li>
+<li>The second parameter is the function which selects the data to keep in the rebuilt array.</li>
+<li>The last parameter is the data to pass to the selector function defined as the second parameter.</li></ul>
+<p>The selector function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the element stays, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it has to be removed.</p>
+<p>The following example shows how to remove all the elements of the array that are longer than 5.</p>
+<pre class="prettyprint">
+// Selector function 
+Eina_Bool keep(void *data, void *gdata)
+{
+&nbsp;&nbsp;&nbsp;if (strlen((const char*)data) &lt;= 5)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+
+int remove_array()
+{
+&nbsp;&nbsp;&nbsp;Eina_Array *array;
+&nbsp;&nbsp;&nbsp;Eina_Array_Iterator iterator;
+&nbsp;&nbsp;&nbsp;const char *item;
+&nbsp;&nbsp;&nbsp;unsigned int i;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating an array
+
+&nbsp;&nbsp;&nbsp;// Removing the undesired elements 
+&nbsp;&nbsp;&nbsp;eina_array_remove(array, keep, NULL);
+
+&nbsp;&nbsp;&nbsp;// Flushing and freeing the array
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+<li>To completely wipe an array out, use the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function. This function sets the count and total members of an array to 0, and frees and sets its data members to <span style="font-family: Courier New,Courier,monospace">NULL</span>. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash. The only parameter of this function is a pointer to the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> array you want to flush.
+<pre class="prettyprint">
+eina_array_flush(array);
+</pre>
+</li>
+<li>To empty an array quickly, use the <span style="font-family: Courier New,Courier,monospace">eina_array_clean()</span> function. This function sets the counting of members in the array to 0. It does not free any space so you have to use it carefully. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash.
+<pre class="prettyprint">
+eina_array_clean(array);
+</pre>
+</li>
+</ul>
+
+<h3>Accessing Classic Array Data</h3>
+
+<p>To access classic array data:</p>
+<ul>
+<li>To access the data in the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_get()</span> function with the array and the index of the element you want to get. The function returns a pointer to the data.
+<pre class="prettyprint">
+// Getting the data of the first element 
+char *mydata;
+mydata = eina_array_data_get(array, 0);
+</pre>
+</li>
+
+
+<li>To get the number of elements in an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_count()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function.
+<p>The function returns the number of elements.</p>
+<pre class="prettyprint">
+unsigned int nb_elm;
+nb_elm = eina_array_count(array);
+</pre>
+</li>
+
+<li>To iterate through an array, you can use various methods:
+<ul>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> iterator called <span style="font-family: Courier New,Courier,monospace">ITER_NEXT</span>.
+<p>You can use the iterator by calling the macro <span style="font-family: Courier New,Courier,monospace">EINA_ARRAY_ITER_NEXT()</span>. It takes the array to iterate as the first parameter, a counter for the current index during the iteration, and a variable of the same type as the item data and an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>. To use it, declare an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>, an <span style="font-family: Courier New,Courier,monospace">int</span> counter, and, for example, a <span style="font-family: Courier New,Courier,monospace">char *</span> item if your array contains any strings.</p>
+<pre class="prettyprint">
+Eina_Array_Iterator iterator;
+const char *item;
+unsigned int i;
+
+EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
+&nbsp;&nbsp;&nbsp;printf(&quot;item #%d: %s\n&quot;, i, item);
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function to iterate over the array.
+<p>The first parameter is the array to iterate, the second is a callback function which determines whether the iteration can continue,and the last is the data passed to the callback function.</p>
+<p>To iterate over the array and to print the data of each array element:</p>
+<pre class="prettyprint">
+// Callback function 
+static Eina_Bool
+elm_print(const void *container, void *data, void *fdata)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char *)data);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+int iterating_array()
+{
+&nbsp;&nbsp;&nbsp;Eina_Array *array;
+&nbsp;&nbsp;&nbsp;unsigned int i;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating an array
+
+&nbsp;&nbsp;&nbsp;// Iterating over the array and calling elm_print on each element
+&nbsp;&nbsp;&nbsp;eina_array_foreach(array, elm_print, NULL);
+
+&nbsp;&nbsp;&nbsp;// Freeing the element data and array
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_iterator_new()</span> function to create an iterator for the array. <p>The function returns a newly allocated iterator associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the count of the array members is less than or equal to 0, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid iterator is returned.</p>
+<p>Pass to this function the array for which you want to create a new iterator. The iterator is used to run a sequential walk through the array, just like the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function.</p>
+<p>To create an iterator and use it to print the data of each array element:</p>
+<pre class="prettyprint">
+static Eina_Bool
+print_one(const void *container, void *data, void *fdata)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)data);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+int new_iterator()
+{
+&nbsp;&nbsp;&nbsp;Eina_Array *array;
+&nbsp;&nbsp;&nbsp;Eina_Iterator *it;
+&nbsp;&nbsp;&nbsp;unsigned short int i;
+&nbsp;&nbsp;&nbsp;void *uninteresting;
+&nbsp;&nbsp;&nbsp;Eina_Bool rt;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating an array
+
+&nbsp;&nbsp;&nbsp;it = eina_array_iterator_new(array);
+
+&nbsp;&nbsp;&nbsp;it = eina_iterator_next(it, &amp;uninteresting);
+&nbsp;&nbsp;&nbsp;eina_iterator_foreach(it, print_one, NULL);
+&nbsp;&nbsp;&nbsp;eina_iterator_free(it);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_accessor_new()</span> function to get random access to the array elements. 
+<p>The function returns a newly allocated accessor associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the counting of array members is less than or equal to 0, this function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid accessor is returned.</p>
+<p>To use the accessor to retrieve and print the data of every other array element:</p>
+<pre class="prettyprint">
+int random_access()
+{
+&nbsp;&nbsp;&nbsp;// Declaration of the array 
+&nbsp;&nbsp;&nbsp;Eina_Array *array;
+&nbsp;&nbsp;&nbsp;// Declaration of the accessor
+&nbsp;&nbsp;&nbsp;Eina_Accessor *acc;
+
+&nbsp;&nbsp;&nbsp;// Generic counter
+&nbsp;&nbsp;&nbsp;unsigned short int i;
+
+&nbsp;&nbsp;&nbsp;// Variable to put the data retrieved from an array element
+&nbsp;&nbsp;&nbsp;void *data;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating an array
+
+&nbsp;&nbsp;&nbsp;// Creating the array accessor
+&nbsp;&nbsp;&nbsp;acc = eina_array_accessor_new(array);
+
+&nbsp;&nbsp;&nbsp;// Random access to the data of the array elements
+&nbsp;&nbsp;&nbsp;for(i = 1; i &lt; 10; i += 2)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Putting the data in the variable &#39;data&#39;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_accessor_data_get(acc, i, &amp;data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (const char *)data);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Freeing the accessor
+&nbsp;&nbsp;&nbsp;eina_accessor_free(acc);
+
+&nbsp;&nbsp;&nbsp;// Freeing the array
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+</ul>
+</li>
+</ul>
+
+
+<h3 id="inline" name="inline">Creating and Destroying an Inline Array</h3>
+
+<p>An inline array is a container that stores the data itself, not the pointers to the data. This means there is no memory fragmentation, and for small data types, such as char, short, and int, it is more memory-efficient. This is because the data is stored in the cache and is faster to access. The bigger the data gets, however, the less likely it is and the less interesting it becomes.</p>
+<p>To create an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function:</p>
+<ul><li>The first parameter is the size of the value. In this example, only the characters are stored, and because of that, only <span style="font-family: Courier New,Courier,monospace">sizeof(char)</span> is passed to the function.</li>
+<li>The second parameter defines the size of the array allocation step. For example, if you set it to 4, the function returns an inline array of 4 elements, and the next time you grow the inline array, it grows by 4 elements and becomes an array of 8 elements. If you set the step to 0, the function sets a default safe value. 
+<p>The step can be changed later on using the <span style="font-family: Courier New,Courier,monospace">eina_inarray_step_set()</span> function.</p></li></ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function returns a pointer to the new <span style="font-family: Courier New,Courier,monospace">Eina_Inarray</span> variable.</p>
+<pre class="prettyprint">
+int inline_array() 
+{
+&nbsp;&nbsp;&nbsp;// Declare an inline array variable of the type Eina_Inarray
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+
+&nbsp;&nbsp;&nbsp;// Create an inline array of &quot;char&quot;
+&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 0);
+
+&nbsp;&nbsp;&nbsp;// When no longer needed, free the array memory
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h3>Modifying Inline Array Content</h3>
+
+<p>To modify inline array content:</p>
+<ul>
+<li>
+<p>To add data as the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_push()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to push to the inline array.</p>
+<p>If everything runs fine, the function returns the index of the new element. If something goes wrong, it returns <span style="font-family: Courier New,Courier,monospace">-1</span>.</p>
+<pre class="prettyprint">
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+</pre>
+</li>
+<li>
+<p>To insert data to a given position of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_at()</span> function:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the index of the element you want to add to the inline array.</li>
+<li>The last parameter is a pointer to the content to be added.</li></ul>
+<p>The content of the pointer is copied to the given position in the inline array. All the members from the position to the end of the array are shifted towards the end. If the position is equal to the end of the array, the member is appended. If the position is bigger than the array length, the function fails.</p>
+<pre class="prettyprint">
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;b&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;d&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Adding data on position 3
+ch = &#39;c&#39;;
+eina_inarray_insert_at(iarr, 2, &amp;ch)
+</pre>
+</li>
+<li>
+<p>To insert data with your own position criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function. The only difference between these functions is that the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function assumes that the array is already sorted and consequently optimizes the insertion position by doing a binary search.</p>
+<p>In both functions:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the data you want to push to the inline array.</li>
+<li>The last parameter is the callback comparison function. 
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback function compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function as the second parameter. If data1 is less than data2, -1 must be returned, if it is greater, 1 must be returned, and if they are equal, 0 must be returned.</p></li></ul>
+<p>The following example shows how to insert a value before a greater value:</p>
+<pre class="prettyprint">
+// Defining the comparison function with the position criteria
+Eina_Compare_Cb cmp(const void *a, const void *b)
+{
+&nbsp;&nbsp;&nbsp;return *(int*)a &gt; *(int*)b;
+}
+
+int inline_insert()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+&nbsp;&nbsp;&nbsp;char ch, *ch3;
+&nbsp;&nbsp;&nbsp;int a, *b;
+
+&nbsp;&nbsp;&nbsp;// Creating an inline array
+
+&nbsp;&nbsp;&nbsp;// Adding data to the inline array
+&nbsp;&nbsp;&nbsp;a = 97;
+&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
+&nbsp;&nbsp;&nbsp;a = 98;
+&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
+&nbsp;&nbsp;&nbsp;a = 100;
+&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
+
+&nbsp;&nbsp;&nbsp;// Inserting data with the criteria
+&nbsp;&nbsp;&nbsp;a = 99;
+&nbsp;&nbsp;&nbsp;eina_inarray_insert_sorted(iarr, &amp;a, cmp);
+
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+}
+</pre>
+</li>
+<li>
+<p>To remove the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_pop()</span> function. The only parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. This function returns the data removed from the inline array.</p>
+<pre class="prettyprint">
+eina_inarray_pop(iarr);
+</pre>
+</li>
+<li>
+<p>To remove specific data from an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to remove from the inline array.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function finds the data and removes the matching members from the array. The data can be an existing member of an inline array for optimized usage. In other cases, the content is matched using the <span style="font-family: Courier New,Courier,monospace">memcmp()</span> function.</p>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function returns the index of the removed member, or -1 if failed.</p>
+<pre class="prettyprint">
+iarr = eina_inarray_new(sizeof(char), 0);
+
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Removing data from the array
+eina_inarray_remove(iarr, &amp;ch);
+</pre>
+</li>
+
+<li>
+<p>To remove data from a defined position in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove_at()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the index of the element you want to remove from the inline array.</p>
+<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if something goes wrong. The member is removed from the inline array and any members after it are moved towards the array&#39;s head.</p>
+<pre class="prettyprint">
+// Removing data from position 2
+eina_inarray_remove_at(iarr, 2);
+</pre>
+</li>
+<li><p>To remove all the elements of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_flush()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function removes every member from the array.</p>
+<pre class="prettyprint">
+eina_inarray_flush(iarr);
+</pre>
+</li>
+
+<li>
+<p>To replace values in the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_replace_at()</span> function, which copies the data over the given position:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the index of the element you want to remove from the inline array.</li>
+<li>The last parameter is the data you want to copy in place of the current data.</li></ul>
+<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The given pointer content is copied to the given position in the array. The pointer is not referenced, instead its contents are copied to the member&#39;s array using the previously defined <span style="font-family: Courier New,Courier,monospace">member_size</span>. If the position does not exist, the function fails.</p>
+<pre class="prettyprint">
+// Replacing the member at position 3 
+ch = &#39;d&#39;;
+eina_inarray_replace_at(iarr, 3, &amp;ch);
+</pre>
+</li>
+
+<li>
+<p>To sort an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_sort()</span> function, which applies a quick sorting algorithm to the inline array:</p>
+<ul><li>The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2. 
+<p>data1 and data2 are values contained in the inline array. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
+<pre class="prettyprint">
+static int
+short_cmp(const void *pa, const void *pb)
+{
+&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
+
+&nbsp;&nbsp;&nbsp;return *a - *b;
+}
+
+int sorting_inline_array()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating the inline array
+
+&nbsp;&nbsp;&nbsp;eina_inarray_sort(array, short_cmp);
+&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
+}
+</pre>
+
+<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
+</li>
+</ul> 
+
+<h3>Accessing Inline Array Data</h3>
+
+<p>To access inline array data:</p>
+<ul>
+<li>
+<p>To search a member in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function that runs a linear walk looking for the given data:</p>
+
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the data used by the callback function to run the comparison.</li>
+<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2.
+<p>data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function as the second parameter. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
+<p>The function returns the member index, or -1 if not found.</p>
+<pre class="prettyprint">
+Eina_Compare_Cb
+compare(const void *pa, const void *pb)
+{
+&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
+&nbsp;&nbsp;&nbsp;if (*a == *b)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+
+int search_inline_array()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;int elm_index;
+&nbsp;&nbsp;&nbsp;int to_search = 3;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating the inline array
+
+&nbsp;&nbsp;&nbsp;elm_index = eina_inarray_search(array, &amp;to_search, compare);
+&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
+}
+</pre>
+
+<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_search_sorted()</span> function does exactly the same as <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span>, but uses a binary search for the given data.</p>
+</li>
+
+<li>
+<p>To get the number of elements in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_count()</span>. The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function returns an unsigned <span style="font-family: Courier New,Courier,monospace">int</span>, the number of elements.</p>
+<pre class="prettyprint">
+printf(&quot;Inline array of integers with %d elements:\n&quot;, eina_inarray_count(iarr));
+</pre>
+</li>
+
+<li>To iterate through an inline array, you can use various methods:
+<ul>
+<li><p>You can use the iterator macros for the inline arrays: <span style="font-family: Courier New,Courier,monospace">FOREACH</span> and <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p></li>
+<li>
+<p>To run a linear walk over an array of elements, use the <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_FOREACH()</span> macro. The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>, and the second parameter is the variable into which the current value is put during the walk. The <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_REVERSE_FOREACH()</span> macro does the same thing but starts from the last element.</p>
+
+<p>The following example illustrates the printing of each element and its pointer:</p>
+<pre class="prettyprint">
+iarr = eina_inarray_new(sizeof(char), 0);
+int a, *b;
+
+a = 97;
+eina_inarray_push(iarr, &amp;a);
+a = 98;
+eina_inarray_push(iarr, &amp;a);
+a = 99;
+eina_inarray_push(iarr, &amp;a);
+
+EINA_INARRAY_FOREACH(iarr, b)
+  printf(&quot;int: %d(pointer: %p)\n&quot;, *b, b);
+</pre>
+</li>
+<li>To process the array data, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function, which invokes the given function on each element of the array with the given data:
+<ul><li>The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>.</li>
+<li>The second parameter is the function to run on each element.
+<p>The function must return <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as long as you want to continue iterating. By returning <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, you stop the iteration and make the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function return <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<p>The data given to the function is the pointer to the member itself.</p></li>
+<li>The last parameter is the data passed to the function called on each element.</li></ul>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if it successfully iterates through all items of the array. Call the function for every given data in the array. This is a safe way to iterate over an array.</p>
+<pre class="prettyprint">
+static Eina_Bool
+array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;short *member = p;
+&nbsp;&nbsp;&nbsp;int *i = user_data;
+&nbsp;&nbsp;&nbsp;(*p)++;
+&nbsp;&nbsp;&nbsp;(*i)++;
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+int inline_array_foreach()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;i = 0;
+&nbsp;&nbsp;&nbsp;eina_inarray_foreach(iarr, array_foreach, &amp;i);
+
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+
+<li>To remove some elements based on your own criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach_remove()</span> function, which walks through the array and, if the value matches in the callback function, removes the element:
+<ul><li>The first parameter is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the callback function to run on each element.
+<p>The callback function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the value matches, or <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it does not match.</p></li>
+<li>The last parameter is the data passed to the callback function.</li></ul>
+<p>The function returns the number of removed entries or -1 if something goes wrong.</p>
+<pre class="prettyprint">
+static Eina_Bool
+array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;short *member = p;
+&nbsp;&nbsp;&nbsp;int *i = user_data;
+&nbsp;&nbsp;&nbsp;if (*i == *p) 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+
+int inline_array_foreach_remove()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;i = 6;
+&nbsp;&nbsp;&nbsp;eina_inarray_foreach_remove(iarr, array_foreach, &amp;i);
+
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+</li>
+</ul>
+</li>
+</ul>
+
+
+<h2 id="hash" name="hash">Hash Tables</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> provides a way to store values in association with a key. For example, if you want to store some tuples into a table, you can do it using the <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> is implemented using an array of &quot;buckets&quot; where each bucket is a pointer to a structure that is the head of a red-black tree. This implementation makes it very robust against week keys as in the worst case scenario, you can still depend on an efficient binary tree implementation.</p>
+
+<h3 id="hash_create" name="hash_create">Creating a Hash Table</h3>
+
+<p>To create the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_new()</span> function:</p>
+<ul>
+<li>The first parameter is the function called when getting the size of the key.</li>
+<li>The second parameter is the function called when comparing the keys.</li>
+<li>The third parameter is the function called when getting the values.</li>
+<li>The fourth parameter is the function called on each value when the hash table is freed, or when an item is deleted from it. <span style="font-family: Courier New,Courier,monospace">NULL</span> can be passed as the callback.</li>
+<li>The last parameter is the size of the buckets.</li>
+</ul>
+<p>When you create an <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> instance, you have to create 4 potentially long callback functions. To make the functions shorter, <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers some predefined functions to create the following kinds of hash tables:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_djb2_new()</span> creates a new hash table using the djb2 algorithm for strings.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> creates a new hash table for use with strings (better with long strings).</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_small_new()</span> creates a new hash table for use with strings with a small bucket size.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_int32_new()</span> and <span style="font-family: Courier New,Courier,monospace">eina_hash_int64_new()</span> create a new hash table for use with 32-bit and 64-bit integers.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_pointer_new()</span> creates a new hash table for use with pointers.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_stringshared_new()</span> creates a new hash table for use with shared strings.</li>
+</ul>
+<p>All these predefined functions require only one parameter, which is the function to free the data you store in the hash table.</p>
+<p>The following example shows how to manage a small phone book using the <span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> function to create the hash table.</p>
+<ol>
+<li><p>Create the phone book structure and some static data:</p>
+<pre class="prettyprint">
+struct _Phone_Entry 
+{
+&nbsp;&nbsp;&nbsp;const char *name; // Full name
+&nbsp;&nbsp;&nbsp;const char *number; // Phone number
+};
+
+typedef struct _Phone_Entry Phone_Entry;
+
+static Phone_Entry _start_entries[] = 
+{
+&nbsp;&nbsp;&nbsp;{ &quot;Wolfgang Amadeus Mozart&quot;, &quot;+01 23 456-78910&quot; },
+&nbsp;&nbsp;&nbsp;{ &quot;Ludwig van Beethoven&quot;, &quot;+12 34 567-89101&quot; },
+&nbsp;&nbsp;&nbsp;{ &quot;Richard Georg Strauss&quot;, &quot;+23 45 678-91012&quot; },
+&nbsp;&nbsp;&nbsp;{ &quot;Heitor Villa-Lobos&quot;, &quot;+34 56 789-10123&quot; },
+&nbsp;&nbsp;&nbsp;{ NULL, NULL }
+};
+</pre>
+</li>
+
+<li><p>Create the callback to free the data:</p>
+<pre class="prettyprint">
+static void
+_phone_entry_free_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;free(data);
+}
+</pre>
+<p>The free callback can be changed later using the <span style="font-family: Courier New,Courier,monospace">eina_hash_free_cb_set()</span> function. You need to pass the hash and the new callback function.</p>
+</li>
+
+<li><p>Create and destroy the hash table.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_free_buckets()</span> function frees all hash table buckets. It empties the hash but does not destroy it, and you can still use it for another purpose. When <span style="font-family: Courier New,Courier,monospace">eina_hash_free()</span> is called, the space allocated for the hash is freed.</p>
+<pre class="prettyprint">
+int free_data()
+{
+&nbsp;&nbsp;&nbsp;Eina_Hash *phone_book = NULL;
+&nbsp;&nbsp;&nbsp;phone_book = eina_hash_string_superfast_new(_phone_entry_free_cb);
+
+&nbsp;&nbsp;&nbsp;// Empty the phone book without destroying it
+&nbsp;&nbsp;&nbsp;eina_hash_free_buckets(phone_book);
+&nbsp;&nbsp;&nbsp;eina_hash_free(phone_book);
+}
+</pre>
+</li>
+</ol>
+
+
+
+
+<h3>Modifying Hash Table Content</h3>
+
+<p>To modify hash table content:</p>
+<ul>
+<li>
+<p>To add some data to a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_add()</span> function. This function takes the hash, the key to access the data, and the data as its parameters.</p>
+<p>The following example shows how to add the initial data declared earlier to the hash:</p>
+<pre class="prettyprint">
+for (i = 0; _start_entries[i].name != NULL; i++)
+{
+&nbsp;&nbsp;&nbsp;eina_hash_add(phone_book, _start_entries[i].name, strdup(_start_entries[i].number));
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers various ways to add elements to a hash, such as the <span style="font-family: Courier New,Courier,monospace">eina_hash_direct_add()</span> function, which adds the entry without duplicating the string key. The key is stored in the struct, so this function can be used with <span style="font-family: Courier New,Courier,monospace">eina_stringshare</span> to avoid key data duplication.</p>
+<pre class="prettyprint">
+for (i = 0; _start_entries[i].name != NULL; i++)
+{
+&nbsp;&nbsp;&nbsp;// Allocating memory for the phone entry
+&nbsp;&nbsp;&nbsp;Phone_Entry *e = malloc(sizeof(Phone_Entry));
+
+&nbsp;&nbsp;&nbsp;// Creating an eina_stringshare for the name and the phone number
+&nbsp;&nbsp;&nbsp;e-&gt;name = eina_stringshare_add(_start_entries[i].name);
+&nbsp;&nbsp;&nbsp;e-&gt;number = eina_stringshare_add(_start_entries[i].number);
+
+&nbsp;&nbsp;&nbsp;// Adding the entry to the hash 
+&nbsp;&nbsp;&nbsp;eina_hash_direct_add(phone_book, e-&gt;name, e);
+}
+</pre>
+</li>
+<li>
+<p>To modify an entry, use <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span> function passing the hash, the key of the data to change, and the new data. The function returns the old data on success.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_set()</span> function does the same work as <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span>, but if the entry does not exist, the function creates a new one.</p>
+<pre class="prettyprint">
+char *old_phone = NULL;
+char *phone = NULL;
+// Replace the phone number of Richard Strauss
+old_phone = eina_hash_modify(phone_book, &quot;Richard Georg Strauss&quot;, strdup(&quot;+23 45 111-11111&quot;));
+phone = eina_hash_set(phone_book, &quot;Philippe de Magalhães&quot;, strdup(&quot;+33 6 111-11111&quot;));
+eina_hash_set(phone_book, &quot;Richard Georg Strauss&quot;, strdup(&quot;+23 45 111-117711&quot;));
+</pre>
+</li>
+<li>
+<p>To change the key associated with the data without freeing and creating a new entry, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_move()</span> function. You only have to pass the hash, the old key, and the new key. If the operation succeeds, the function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, if not, it returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<pre class="prettyprint">
+Eina_Bool res;
+res = eina_hash_move(phone_book, &quot;Philippe de Magalhães&quot;, &quot;Filipe de Magalhães&quot;);
+</pre>
+</li>
+<li>
+<p>To delete entries from a hash table:</p>
+<ul><li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del()</span> function to remove the entry identified by a key or data from the given hash table:
+<pre class="prettyprint">
+Eina_Bool r;
+const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
+r = eina_hash_del(phone_book, entry_name, NULL);
+</pre></li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_key()</span> function to remove an entry based on the key:
+<pre class="prettyprint">
+r = eina_hash_del_by_key(phone_book, &quot;Richard Georg Strauss&quot;);
+</pre>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_data()</span> function to remove an entry based on the data:</p>
+<pre class="prettyprint">
+r = eina_hash_del_by_data(phone_book, &quot;+12 34 567-89101&quot;);
+</pre>
+</li>
+</ul></li></ul>
+
+<h3>Accessing Hash Table Data</h3>
+<p>To find hash table elements and get data based on the key name:</p>
+<ul>
+<li>
+<p>To retrieve an entry based on its key, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_find()</span> function by passing the hash and the key you are looking for:</p>
+<pre class="prettyprint">
+char *phone = NULL;
+const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
+
+// Look for a specific entry and get its phone number
+phone = eina_hash_find(phone_book, entry_name);
+</pre>
+</li>
+<li>
+<p>To get the number of entries in a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_population()</span> function. Pass the hash as the only argument.</p>
+<pre class="prettyprint">
+unsigned int nb_elm;
+nb_elm = eina_hash_population(phone_book);
+</pre>
+</li>
+
+<li>To iterate through a hash table, you can use various methods: 
+<ul>
+
+<li>to iterate over the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_foreach()</span> function:
+
+<ul><li>The first parameter is the hash.</li>
+<li>The second parameter is the callback function called on each iteration.
+<p>The callback function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the iteration has to continue and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if the iteration has to stop.</p></li>
+<li>The last parameter one is the data passed to the callback function.</li></ul>
+
+<p>The following example prints the key and the data of the hash entry (the name and the phone number):</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+pb_foreach_cb(const Eina_Hash *phone_book, const void *key, void *data, void *fdata)
+{
+&nbsp;&nbsp;&nbsp;const char *name = key;
+&nbsp;&nbsp;&nbsp;const char *number = data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
+
+&nbsp;&nbsp;&nbsp;// Return EINA_FALSE to stop this callback from being called
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+printf(&quot;List of phones:\n&quot;);
+
+// Running the callback on the hash called phone_book 
+eina_hash_foreach(phone_book, pb_foreach_cb, NULL);
+printf(&quot;\n&quot;);
+</pre>
+</li>
+<li>To iterate over the keys, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span> function:
+<pre class="prettyprint">
+// Declaration of the Eina_Iterator
+Eina_Iterator *it;
+
+// Variable to handle the current iteration &quot;data&quot;
+void *data;
+
+// Iterate over the keys (names)
+printf(&quot;List of names in the phone book:\n&quot;);
+
+it = eina_hash_iterator_key_new(phone_book);
+
+// Use the generic eina_iterator_next()
+while (eina_iterator_next(it, &amp;data))
+{
+&nbsp;&nbsp;&nbsp;const char *name = data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, name);
+}
+
+// Free the iterator
+eina_iterator_free(it);
+</pre>
+</li>
+
+<li>To iterate over the hash data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_data_new()</span> function the same way as <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span>:
+<pre class="prettyprint">
+// Declaration of the Eina_Iterator
+Eina_Iterator *it;
+
+// Variable to handle the current iteration &quot;data&quot;
+void *data;
+
+// Iterate over hash data 
+printf(&quot;List of numbers in the phone book:\n&quot;);
+
+it = eina_hash_iterator_data_new(phone_book);
+while (eina_iterator_next(it, &amp;data))
+{
+&nbsp;&nbsp;&nbsp;const char *number = data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, number);
+}
+
+// Free the iterator
+eina_iterator_free(it);
+</pre>
+</li>
+<li>To iterate over a tuple composed of keys and data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_tuple_new()</span> function:
+<pre class="prettyprint">
+// Declaration of the Eina_Iterator
+Eina_Iterator *tit;
+
+// Variable to handle the current iteration &quot;data&quot;
+void *tuple;
+
+printf(&quot;List of phones:\n&quot;);
+tit = eina_hash_iterator_tuple_new(phone_book);
+while (eina_iterator_next(tit, &amp;tuple))
+{
+&nbsp;&nbsp;&nbsp;Eina_Hash_Tuple *t = tuple;
+&nbsp;&nbsp;&nbsp;const char *name = t-&gt;key;
+&nbsp;&nbsp;&nbsp;const char *number = t-&gt;data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
+}
+
+// Always free the iterator after its use
+eina_iterator_free(tit); 
+</pre>
+</li>
+</ul>
+</li>
+</ul>
+
+
+<h2 id="list" name="list">Lists</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_List</span> is a double-linked list that can store data of any type as void pointers. It provides a set of functions to create and manipulate the list to avoid the access to the struct&#39;s fields, similar to a self-made double-link list.</p>
+<p>In addition to the previous and next node and its data, the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> nodes keep a reference to an accounting structure. The accounting structure is used to improve the performance of some functions. The structure is private and must not be modified.</p>
+
+<p>In an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a &quot;list&quot;: the list itself is a list where each node is a list as well.</p>
+
+<p>Eina provides 2 list types: the classic list (<span style="font-family: Courier New,Courier,monospace">Eina_List</span>) and an inline list (<span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span>).</p>
+
+<h3>Creating and Destroying a List</h3>
+<p>To use an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
+
+<ol><li>Declare the list with <span style="font-family: Courier New,Courier,monospace">NULL</span> as the default value:
+<pre class="prettyprint">
+int list()
+{
+&nbsp;&nbsp;&nbsp;// Declaration of the Eina_List with NULL as default value;
+&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
+</pre></li>
+
+<li>Call the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function with the list and the data you want to append as parameters.
+<p>The list must be a pointer to the first element of the list (or <span style="font-family: Courier New,Courier,monospace">NULL</span>). The function returns a pointer to the list.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Creating the first element of the list 
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;watch&quot;);
+
+&nbsp;&nbsp;&nbsp;// Adding more elements
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;phone&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;ivi&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;notebook&quot;);
+</pre></li>
+
+<li>When you no longer need the list, free it:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Free the Eina_List
+&nbsp;&nbsp;&nbsp;eina_list_free(list);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre></li>
+</ol>
+
+
+<h3>Modifying List Content</h3>
+
+<p>To modify list content:</p>
+<ul>
+<li>
+<p>To add data to a list:</p>
+
+<ul>
+<li>To add data at the end of the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function. To add data at the top of the list, use <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span>. The functions work in the same way, only adding the data to different places.
+<pre class="prettyprint">
+list = eina_list_prepend(list, &quot;set-top box&quot;);
+</pre>
+</li>
+
+<li>To insert data into the list after a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function. As the last parameter, define the element after which the data is added.
+<p>For example to append data after the &quot;phone&quot; element:</p>
+<pre class="prettyprint">
+list = eina_list_append_relative(list, &quot;single-board computer&quot;, &quot;phone&quot;);
+</pre>
+</li>
+
+<li>To add a new entry before a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_prepend_relative()</span> function. It is similar to the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function.
+<pre class="prettyprint">
+list = eina_list_prepend_relative(list, &quot;ultrabook&quot;, &quot;ivi&quot;);
+</pre>
+</li>
+
+<li>To append a list node to a linked list after a specified member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative_list()</span> function. To prepend a list node to a linked list before a specified member, use the <span style="font-family: Courier New,Courier,monospace">Eina_List * eina_list_prepend_relative_list()</span> function.
+</li>
+</ul>
+</li>
+
+<li>To set data in a list member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_set()</span> function. Pass the &quot;list&quot; (node) as the first argument and the data to set as the second.
+
+<p>The following example also shows the usage of the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span> function, which returns the last element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>.</p>
+
+<pre class="prettyprint">
+// Setting new data for the last element
+eina_list_data_set(eina_list_last(list), eina_stringshare_add(&quot;Boris&quot;));
+</pre>
+</li>
+
+<li id="remove_list">To remove a node from the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_remove()</span> function. This function removes the first instance of the specified data from the given list.
+<pre class="prettyprint">
+list = eina_list_remove(list, &quot;ultrabook&quot;);
+</pre>
+<p>You can also remove a &quot;list&quot; (node) from a list using the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function. Pass the list you want to delete an element from and a &#39;list&#39; (node) you want to delete.</p>
+<pre class="prettyprint">
+Eina_List *app_list = NULL;
+Eina_List *to_remove = NULL;
+
+// Adding some elements to the list (using stringshares)
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enna&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ebird&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;calaos&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;rage&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;terminology&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enlightenment&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;eyelight&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ephoto&quot;));
+
+// Finding the &quot;list&quot; to remove 
+to_remove = eina_list_data_find_list(list, eina_string_share_add(&quot;enlightenment&quot;));
+
+list = eina_list_remove_list(list, to_remove);
+</pre>
+</li>
+
+<li>To move elements in a list, you can use various function, such as <span style="font-family: Courier New,Courier,monospace">eina_list_promote_list()</span> that promotes an element to the top of the list or <span style="font-family: Courier New,Courier,monospace">eina_list_demote_list()</span> that puts the specified element at the end of the list. Remember that everything is a list so the second parameter represents the &quot;list&quot; (node) you want to move. Use the functions just like the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function.
+<pre class="prettyprint">
+list = eina_list_promote_list(list, eina_list_data_find_list(list, &quot;ivi&quot;));
+</pre>
+</li>
+<li>To reverse all the elements of a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse()</span> function. To obtain a reversed copy of the list while keeping the initial list unchanged, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse_clone()</span> function.
+<pre class="prettyprint">
+Eina_List *rev_copy;
+
+app_list = eina_list_reverse(app_list);
+rev_copy = eina_list_reverse_clone(app_list);
+</pre>
+</li>
+<li>To sort a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_sort()</span> function. This function takes a list which needs to be sorted, the maximum number of elements to be sorted, and a callback function that compares data. To sort all list elements, set the maximum number of elements to 0.
+<pre class="prettyprint">
+int sort_cb(const void *d1, const void *d2)
+{
+&nbsp;&nbsp;&nbsp;const char *txt = d1;
+&nbsp;&nbsp;&nbsp;const char *txt2 = d2;
+&nbsp;&nbsp;&nbsp;if(!txt) return(1);
+&nbsp;&nbsp;&nbsp;if(!txt2) return(-1);
+
+&nbsp;&nbsp;&nbsp;return(strcmp(txt, txt2));
+}
+
+extern Eina_List *list;
+list = eina_list_sort(list, 0, sort_cb);
+</pre>
+</li>
+<li>To merge 2 list into 1, use the <span style="font-family: Courier New,Courier,monospace">eina_list_merge()</span> function. The <span style="font-family: Courier New,Courier,monospace">eina_list_sorted_merge()</span> function merges 2 sorted lists according to the ordering function that you pass as the last argument.
+<pre class="prettyprint">
+int sort_cb(void *d1, void *d2)
+{
+&nbsp;&nbsp;&nbsp;const char *txt = NULL;
+&nbsp;&nbsp;&nbsp;const char *txt2 = NULL;
+&nbsp;&nbsp;&nbsp;if(!d1) return(1);
+&nbsp;&nbsp;&nbsp;if(!d2) return(-1);
+
+&nbsp;&nbsp;&nbsp;return(strcmp((const char*)d1, (const char*)d2));
+}
+
+Eina_List *sorted1;
+Eina_List *sorted2;
+Eina_List *newlist;
+
+// Insert some values and sort your lists
+
+// Simply merge 2 lists without any process
+newlist = eina_list_merge(sorted1, sorted2);
+
+newlist = eina_list_sorted_merge(sorted1, sorted2, sort_cb);
+</pre>
+</li>
+<li>To split a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_split_list()</span> function:
+<ul><li>The first parameter is the list to split.</li>
+<li>The second parameter is the &quot;list&quot; (element) after which the list is split.</li>
+<li>The last parameter is the head of the second list.</li></ul>
+<pre class="prettyprint">
+// Original list (left list)
+Eina_List *list = NULL;
+
+// New list (right list)
+Eina_List *other_list = NULL;
+
+// Eina_List (element)
+Eina_List *l;
+
+list = eina_list_append(list, &quot;super tux&quot;);
+list = eina_list_append(list, &quot;frozen bubble&quot;);
+list = eina_list_append(list, &quot;lincity-ng&quot;);
+
+// Sorting the list (just for fun)
+list = eina_list_sort(list, 0, cmp_func);
+
+// Looking for the &#39;split&#39; element
+l = eina_list_search_sorted_list(list, cmp_func, &quot;frozen bubble&quot;);
+
+// Splitting the list
+list = eina_list_split_list(list, l, &amp;other_list);
+</pre>
+</li>
+<li>To copy a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_clone()</span> function. The function copies all the elements in the list in the exact same order.
+<pre class="prettyprint">
+Eina_List *app_list_copy;
+
+app_list_copy = eina_list_clone(app_list);
+</pre>
+</li>
+
+</ul>
+
+
+<h3>Accessing List Data</h3>
+<p>To access list data:</p>
+<ul>
+<li>To find some data on your list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function. Pass the list containing your data as the first parameter and the data you are looking for as the last one. The function returns the found member data pointer if found, <span style="font-family: Courier New,Courier,monospace">NULL</span> otherwise.
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function searches the list from the beginning to the end for the first member for which the data pointer is data. If it is found, the data is returned, otherwise <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned. The function only compares pointers, which is why using <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> is very useful with lists, because it always returns the same pointer for the same string.</p>
+<pre class="prettyprint">
+Eina_List *app_list = NULL;
+const char *res_str;
+
+// Adding some elements to the list (using stringshares)
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enna&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ebird&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;calaos&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;rage&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;terminology&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enlightenment&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;eyelight&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ephoto&quot;));
+
+// Finding the data
+res_str = eina_list_data_find(list, eina_string_share_add(&quot;enlightenment&quot;));
+if (res_str == eina_stringshare_add(&quot;enlightenment&quot;))
+&nbsp;&nbsp;&nbsp;printf(&quot;Data is present&quot;);
+else
+&nbsp;&nbsp;&nbsp;printf(&quot;Data not present&quot;);
+</pre>
+
+<p>The above example returns &quot;Data is present&quot;.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find_list()</span> function does the same thing as <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span>, but returns an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>. For an example, see the <a href="#remove_list"><span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function</a>.</p>
+<p>You can access the data or a &quot;list&quot; (node) of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span> using the <span style="font-family: Courier New,Courier,monospace">eina_list_nth()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_nth_list()</span> functions. The first one returns a pointer to the data of the &quot;n&quot; element and the second a pointer to the &quot;list&quot;. To access the data of the 3rd element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
+<pre class="prettyprint">
+const char *res;
+Eina_List *res_lst;
+
+res = eina_list_nth(app_list, 2);
+res_lst = eina_list_nth_list(app_list, 2);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">res</span> variable contains the pointer to the string &quot;calaos&quot;. The <span style="font-family: Courier New,Courier,monospace">res_lst</span> variable is the list containing &quot;calaos&quot;.</p>
+</li>
+
+<li>To search for data in a list, select your function based on whether the list is sorted or unsorted.
+<ul>
+<li>To search in an unsorted list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function:
+<ul><li>The first parameter is the list.</li>
+<li>The second parameter is a callback function for comparison.</li>
+<li>The last parameter is the data you are looking for.</li></ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> function does the same but returns an &quot;Eina_List&quot;.</p>
+
+
+<p>The following example shows 2 searches using both the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> functions:</p>
+<pre class="prettyprint">
+int search_list()
+{
+&nbsp;&nbsp;&nbsp;// Declaring the list
+&nbsp;&nbsp;&nbsp;Eina_List *list = NULL; 
+&nbsp;&nbsp;&nbsp;Eina_List *l;
+&nbsp;&nbsp;&nbsp;// Little trick to use strcmp as Eina_Compare_Cb 
+&nbsp;&nbsp;&nbsp;Eina_Compare_Cb cmp_func = (Eina_Compare_Cb)strcmp;
+
+&nbsp;&nbsp;&nbsp;void *data;
+&nbsp;&nbsp;&nbsp;int cmp_result;
+
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;debian&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;archlinux&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;centos&quot;);
+
+&nbsp;&nbsp;&nbsp;data = eina_list_search_unsorted(list, cmp_func, &quot;archlinux&quot;);
+&nbsp;&nbsp;&nbsp;l = eina_list_search_unsorted_list(list, cmp_func, &quot;archlinux&quot;);
+&nbsp;&nbsp;&nbsp;if (l-&gt;data != data)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_list_free(list);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;eina_list_free(list);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+</li>
+<li>To search in sorted lists, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted_list()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted()</span> functions. They work similarly as the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function.
+</li>
+</ul>
+</li>
+
+
+<li>To get data from a list element, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_get()</span> function. The function returns the data contained in the given list.
+
+<p>The following example uses the <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span> function to move through the list in a statement.</p>
+<pre class="prettyprint">
+int list_data_set()
+{
+&nbsp;&nbsp;&nbsp;// Declaring the list
+&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
+&nbsp;&nbsp;&nbsp;// Eina_List in which to place the elements or lists
+&nbsp;&nbsp;&nbsp;Eina_List *l;
+
+&nbsp;&nbsp;&nbsp;void *list_data;
+
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Bertrand&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Cedric&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Nicolas&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Vincent&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Raoul&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Fabien&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Philippe&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;billiob&quot;));
+
+&nbsp;&nbsp;&nbsp;for(l = list; l; l = eina_list_next(l))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Printing the data returned by eina_list_data_get
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
+
+&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(list, list_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_stringshare_del(list_data);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+
+<li>To move in a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span>, <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">eina_list_prev()</span> functions to move to the last, next, or previous element in the list.
+<p>The following example scrolls backwards starting from the end of the list:</p>
+<pre class="prettyprint">
+for(l = eina_list_last(list); l; l = eina_list_prev(l))
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
+</pre>
+
+</li>
+
+<li>To count the list elements, use the <span style="font-family: Courier New,Courier,monospace">eina_list_count()</span> function. The function returns the number of items in a list.
+<pre class="prettyprint">
+printf(&quot;List size: %d\n&quot;, eina_list_count(list));
+</pre>
+</li>
+<li>To iterate through an array, you can use various iterators: 
+<ul>
+<li>To iterate over a list from the beginning to the end, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro:
+<ul><li>The first parameter is the list to iterate.</li>
+<li>The second parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_List *</span> to hold the current &quot;List&quot; (node).</li>
+<li>The last parameter receives the current data during the run.</li></ul>
+
+<p>The following example prints the data of each &quot;List&quot; (node) of the list:</p>
+<pre class="prettyprint">
+Eina_List *list = NULL;
+Eina_List *l;
+void *list_data;
+
+list = eina_list_append(list, &quot;ls&quot;);
+list = eina_list_append(list, &quot;top&quot;);
+list = eina_list_append(list, &quot;rmdir&quot;);
+list = eina_list_append(list, &quot;uname&quot;);
+
+EINA_LIST_FOREACH(list, l, list_data)
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)list_data);
+
+eina_list_free(list);
+</pre>
+</li>
+<li>To iterate from the last element to the first, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_REVERSE_FOREACH</span> macro. It works similarly as <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH()</span>.
+</li>
+<li>To iterate over a list from the beginning to the end, you can also use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH_SAFE</span> macro. It is called safe, because it stores the next &quot;List&quot; (node), so you can safely remove the current &quot;List&quot; (node) and continue the iteration.
+<pre class="prettyprint">
+Eina_List *list;
+Eina_List *l;
+Eina_List *l_next;
+char *data;
+
+list = eina_list_append(list, &quot;tizen&quot;);
+list = eina_list_append(list, &quot;tizen&quot;);
+list = eina_list_append(list, &quot;tizen&quot;);
+list = eina_list_append(list, &quot;tizen&quot;);
+
+// Using EINA_LIST_FOREACH_SAFE to free the elements that match &quot;tizen&quot;
+
+EINA_LIST_FOREACH_SAFE(list, l, l_next, data)
+&nbsp;&nbsp;&nbsp;if (strcmp(data, &quot;tizen&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_remove_list(list, l);
+&nbsp;&nbsp;&nbsp;}
+</pre>
+</li>
+
+
+<li>To remove each list element while having access to the node&#39;s data, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FREE</span> macro. Pass the list and a pointer to hold the current data.
+<pre class="prettyprint">
+Eina_List *list;
+char *data;
+
+// List is filled
+
+EINA_LIST_FREE(list, data)
+&nbsp;&nbsp;&nbsp;free(data);
+</pre>
+</li>
+</ul>
+</li>
+</ul>
+
+<h3 id="inlist" name="inlist">Using an Inline List</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> is a special data type drawn to store nodes pointers in the same memory as data. This way the memory is less fragmented, but operations, such as sort and count, are slower. The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> has its own purpose, but if you do not understand what the purpose is, use the regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span> instead.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> nodes can be part of a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, simply added with the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> or <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span> functions.</p>
+
+<p>To use the inline list:</p>
+<ol>
+<li>Define the structure of the data before creating the inline list:
+<pre class="prettyprint">
+struct my_struct 
+{
+&nbsp;&nbsp;&nbsp;EINA_INLIST;
+&nbsp;&nbsp;&nbsp;int a, b;
+};
+</pre>
+
+<p>The structure is composed of 2 integers, the real data, and the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> type which is composed of 3 pointers defining the inline list structure:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * next</span>: next node</li>
+<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * prev</span>: previous node</li>
+<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * last</span>: last node</li>
+</ul></li>
+
+<li>
+<p>To create the inlist nodes, allocate the memory and use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_append()</span> function:</p>
+<ul><li>The first parameter is the existing list head or <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list. 
+<p>The following example passes <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list.</p></li>
+<li>The second parameter is the new list node, and it must not be <span style="font-family: Courier New,Courier,monospace">NULL</span>. 
+<p>You must use the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_GET()</span> macro to get the inlist object of the datastruct.</p></li></ul>
+<pre class="prettyprint">
+struct my_struct *d, *cur;
+Eina_Inlist *list, *itr, *tmp;
+
+d = malloc(sizeof(*d));
+d-&gt;a = 1;
+d-&gt;b = 10;
+
+list = eina_inlist_append(NULL, EINA_INLIST_GET(d));
+</pre>
+
+<p>Repeat this operation for every new node:</p>
+<pre class="prettyprint">
+d = malloc(sizeof(*d));
+d-&gt;a = 2;
+d-&gt;b = 20;
+list = eina_inlist_append(list, EINA_INLIST_GET(d));
+</pre>
+</li>
+
+<li>To add data to the inline list:
+<ul><li>Put data at the end of the inline list with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend()</span> function:
+<pre class="prettyprint">
+d = malloc(sizeof(*d));
+d-&gt;a = 3;
+d-&gt;b = 30;
+list = eina_inlist_prepend(list, EINA_INLIST_GET(d));
+</pre>
+</li>
+
+<li>Add a node before or after a given node with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend_relative()</span> and <span style="font-family: Courier New,Courier,monospace">eina_inlist_append_relative()</span> functions. 
+<p>In both functions, the first parameter is the target list, the second is the element you want to add, and the last is the reference element to place data after (in this case). Similarly as in a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a list, so the last parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> typed variable.</p>
+<pre class="prettyprint">d = malloc(sizeof(*d));
+d-&gt;a = 4;
+d-&gt;b = 40;
+list = eina_inlist_append_relative(list, EINA_INLIST_GET(d), list);
+</pre>
+</li></ul></li>
+
+<li>To sort and iterate an inline list, to find and move list elements, and to perform other inline list operations, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Inline__List__Group.html">Inline List</a> API.</li>
+
+<li>When the inline list is no longer needed, destroy it by looping over the list to free each <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> structure and the data using allocated memory. Use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_remove()</span> function on each node.
+
+<p>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)
+{
+&nbsp;&nbsp;&nbsp;struct my_struct *aux = EINA_INLIST_CONTAINER_GET(list, struct my_struct);
+
+&nbsp;&nbsp;&nbsp;// Remove the current list element 
+&nbsp;&nbsp;&nbsp;list = eina_inlist_remove(list, list);
+&nbsp;&nbsp;&nbsp;free(aux);
+}
+</pre>
+</li>
+
+
+</ol>
+
+<h2 id="generic" name="generic">Generic Value</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> object provides generic data storage and access, allowing you to store what you want in one single type of <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>. It is meant for simple data types, providing uniform access and release functions, useful to exchange data preserving their types. The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> comes with predefined types for numbers, array, list, hash, blob, and structs, and it can convert between data types, including string.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> can handle the following types:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UCHAR</span>: unsigned char</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_USHORT</span>: unsigned short</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT</span>: unsigned int</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ULONG</span>: unsigned long</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMESTAMP</span>: unsigned long used for timestamps</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT64</span>: unsigned integer of 64 bits</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_CHAR</span>: char</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_SHORT</span>: short</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT</span>: int</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LONG</span>: long</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT64</span>: integer of 64 bits</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_FLOAT</span>: float</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_DOUBLE</span>: double</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRINGSHARE</span>: stringshared string</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRING</span>: string</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ARRAY</span>: array</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span>: list</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_HASH</span>: hash</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMEVAL</span>: &#39;struct timeval&#39;</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_BLOB</span>: blob of bytes</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRUCT</span>: struct</li>
+</ul>
+
+
+<p>To set up a generic value:</p>
+<ol>
+<li>Declare the necessary variables:
+<pre class="prettyprint">
+// The Eina_Value itself
+Eina_Value v;
+// An integer 
+int i;
+// And a char *
+char *newstr;
+</pre>
+</li>
+
+<li>To set up an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> for an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_setup()</span> function. The first argument is the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> and the second is the type.
+<pre class="prettyprint">
+eina_value_setup(&amp;v, EINA_VALUE_TYPE_INT);
+</pre>
+</li>
+</ol>
+<p>To manage the generic value:</p>
+<ul>
+<li>To set an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_set()</span> function:
+<pre class="prettyprint">
+eina_value_set(&amp;v, 123);
+</pre>
+</li>
+
+<li>To get the value, use the <span style="font-family: Courier New,Courier,monospace">eina_value_get()</span> function. Pass the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> as the first argument, and a pointer to a variable to store the value (the target variable must have the same type as the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>).
+<pre class="prettyprint">
+eina_value_get(&amp;v, &amp;i);
+printf(&quot;v=%d\n&quot;, i);
+</pre>
+<p>The above example prints &quot;v=123&quot;.</p>
+</li>
+
+<li>To store an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> that corresponds to the <span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span> type.
+</li>
+<li>To create an <span style="font-family: Courier New,Courier,monospace">Eina_Value_List</span>, use the <span style="font-family: Courier New,Courier,monospace">eina_value_list_setup()</span> function. The function initializes a generic value storage of the list type. The first parameter is the &quot;object&quot; value, and the second one is the type (how to manage the stored list members).
+</li>
+</ul>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+   
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/data_types_tools_n.htm b/org.tizen.ui.practices/html/native/efl/data_types_tools_n.htm
new file mode 100644
index 0000000..9dc4da1
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/data_types_tools_n.htm
@@ -0,0 +1,78 @@
+<!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>Data Types and Tools: Using Eina Resources</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+		<li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
+		<li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+   
+   <h1>Data Types and Tools: Using Eina Resources</h1>
+
+<p>UI toolkits, such as Qt and Gtk, generally support their own data types, structures, functions, and macros in order for you to easily and efficiently make their applications. EFL, as one of Tizen native UI toolkits, provides data types and useful tools as well.</p>
+
+<p>The Eina library in EFL implements APIs for data types and structures easy to use and optimized in an efficient way. It also provides some useful tools, such as opening shared libraries, error management, type conversion, time accounting, and memory pool to help convenient application development.</p>  
+   
+<p>The main features of Eina are:</p>
+<ul>
+<li><a href="data_types_n.htm">Data Types</a> <p>The Eina library is a central part of the EFL. It implements an API for data types, and allows you to create and manipulate several data types.</p></li>
+<li><a href="tools_n.htm">Tools</a> <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding applications.</p></li>
+</ul>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+   
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/datetime_tutorial_wn.htm b/org.tizen.ui.practices/html/native/efl/datetime_tutorial_wn.htm
new file mode 100644
index 0000000..07e14c5
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/datetime_tutorial_wn.htm
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Wearable Datetimes</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#date">Creating a Date Picker</a></li>
+			<li><a href="#time">Creating a Time Picker</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Wearable Datetimes</h1>
+
+  
+<p>This tutorial explains how you can create UI components that allow the user to select a date or time.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+
+ <h2 id="date" name="date">Creating a Date Picker</h2>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component to add a date picker style (Year : Month : Day).</p>
+<p>The following example creates the datepicker-styled Datetime and adds it in the conform.</p>
+
+<pre class="prettyprint">
+// Add a datepicker style Datetime component
+datetime = elm_datetime_add(ad-&gt;win);
+evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5);
+evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0);
+elm_object_style_set(datetime, &quot;datepicker_layout&quot;);
+evas_object_show(datetime);
+
+elm_object_content_set(ad-&gt;conform, datetime);
+</pre>
+
+ <h2 id="time" name="time">Creating a Time Picker</h2>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component to add a time picker style (Hour(12) : Min : AM/PM, or Hour(24) : Min).</p>
+<p>The following example creates the timepicker-styled Datetime and adds it in the conform.</p>
+
+<pre class="prettyprint">
+// Add a timepicker style Datetime component
+datetime = elm_datetime_add(ad-&gt;win);
+evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5);
+evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0);
+elm_object_style_set(datetime, &quot;timepicker_layout&quot;);
+evas_object_show(datetime);
+
+elm_object_content_set(ad-&gt;conform, datetime);
+</pre>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.practices/html/native/efl/ecore_animation_n.htm b/org.tizen.ui.practices/html/native/efl/ecore_animation_n.htm
new file mode 100644
index 0000000..6e8e665
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/ecore_animation_n.htm
@@ -0,0 +1,451 @@
+<!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>Ecore Animations</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+				<li><a href="#finite">Creating an Animation with a Finite Duration</a></li>
+				<li><a href="#position">Position Mappings</a></li>
+				<li><a href="#infinite">Creating an Infinite Animation</a></li>
+				<li><a href="#chain">Chaining Animations</a></li>
+				<li><a href="#pause">Pausing and Resuming Animations</a></li>
+				<li><a href="#free">Freeing Up Memory</a></li>
+				<li><a href="#frame">Frametime</a></li>
+				<li><a href="#custom">Custom Timer</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Ecore Animations</h1> 
+
+<p>Ecore provides a facility for animations called <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span>. Ecore animators use the Ecore main loop for creating animations, running a specific action on each tick of a timer in the main loop.</p>
+
+<p>To create an Ecore animation:</p>
+<ol>
+    <li>Determine the duration of the animation.</li>
+    <li>Define a callback function that performs the animation with that duration.</li>
+</ol>
+
+<p>To use Ecore animators in your application, you must include the <span style="font-family: Courier New,Courier,monospace;">&lt;Ecore.h&gt;</span> file. This file is included by default if you are already using the <span style="font-family: Courier New,Courier,monospace;">&lt;Elementary.h&gt;</span> file in your application. You then declare an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator*</span> variable and use the variable in the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_*</span> functions.</p>
+
+<p>The following example shows how to create a simple animation with a finite duration:</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+_do_animation(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;evas_object_move(data, 100 * pos, 100 * pos);
+&nbsp;&nbsp;&nbsp;// Do some more animating...
+}
+ecore_animator_timeline_add(2, _do_animation, my_evas_object);
+</pre>
+
+<p>In the above example, we create a linear transition to move <span style="font-family: Courier New,Courier,monospace;">my_evas_object</span> from position (0,0) to position (100,100) in 2 seconds.</p>
+
+<h2 id="finite" name="finite">Creating an Animation with a Finite Duration</h2>
+
+<p>Most of the time, you will want to create animations that last for a predefined time.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function allows you to define an animator that is automatically deleted after the animation is finished:</p>
+
+<pre class="prettyprint">ecore_animator_timeline_add(double runtime, Ecore_Timeline_Cb func, const void *data)</pre>
+
+<ul>
+<li>The first argument is the duration of the animation in seconds. The duration is not affected by frame rate.</li>
+<li>The second argument is the callback function that performs the animation.</li>
+<li>The third argument is the parameter passed to the callback function. This is usually the Evas object to animate.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The callback function can return <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to keep the animator running or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to stop the animator and have it be deleted automatically at any time. The callback function is also passed a timeline position parameter with a value between 0.0 (start) to 1.0 (end) to indicate where along the timeline the animator is running.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example performs a linear horizontal translation of 500 pixels in 8 seconds:</p>
+<pre class="prettyprint">
+static Eina_Bool
+_my_animation(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; // Get the target object
+&nbsp;&nbsp;&nbsp;int x, y, w, h; // Target object geometry
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); // Get current object position and size attributes
+&nbsp;&nbsp;&nbsp;evas_object_move(obj, 500 * pos, y); // Linear translation of the Evas object
+}
+ecore_animator_timeline_add(8, _my_animation, my_evas_object);
+</pre>
+
+<h2 id="position" name="position">Position Mappings</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Ecore_Pos_Map</span> position mappings are used to define the evolution of a given position in accordance with the desired effects. The value ranges from 0.0 to 1.0 on a given timeline. This position variation allows you to apply dynamic changes to any attribute of your Evas object, such as position, width, height, scale, angle, and color.</p>
+
+<p>Ecore supports the following position mappings (with the listed v1 and v2 parameters):</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear 0.0 - 1.0
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up
+    <ul>
+        <li>v1: power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), 4.0 is cubed, and so on</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down
+    <ul>
+        <li>v1: power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), 3.0 is cubed, and so on</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end
+    <ul>
+        <li>v1: power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.1 is a much more pronounced sinusoidal (squared), 3.0 is cubed, and so on</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient * v1, interpolated via power of v2 curve
+    <ul>
+        <li>v1: multiplication factor for gradient</li>
+        <li>v2: curve value</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then &quot;drop&quot; like a ball bouncing to the ground at 1.0, and bounce v2 times, with a decay factor of v1
+    <ul>
+        <li>v1: bounce decay factor</li>
+        <li>v2: number of bounces</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then &quot;wobble&quot; like a spring until rest position at 1.0, and wobble v2 times, with a decay factor of v1
+    <ul>
+        <li>v1: wobble decay factor</li>
+        <li>v2: number of wobbles</li>
+    </ul>
+</li>
+</ul>
+
+<p class="figure">Figure: Position mappings</p>
+<p align="center"><img alt="Position mappings" src="../../images/pos_map_all.png" /></p>
+
+<h3>Using Position Mappings</h3>
+<p>When using the animation callback function, the animator passes a timeline position parameter with a value between 0.0 (start) and 1.0 (end) to indicate where along the timeline the animator is running.</p>
+
+<p>If you want to create a non-linear animation, map the position value to one of several curves and mappings:</p>
+<pre class="prettyprint">ecore_animator_pos_map(double pos, Ecore_Pos_Map map, double v1, double v2)</pre>
+<ul>
+<li>The first argument is the current position value, which ranges from 0.0 to 1.0.</li>
+<li>The second argument is the position mapping you want to apply.</li>
+<li>The third argument is the first parameter (v1) to pass to the position mapping.</li>
+<li>The fourth argument is the second parameter (v2) to pass to the position mapping.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The v1 and v2 arguments are specific to the chosen position mapping. For example, if you are using <span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>, v1 represents the bouncing level and v2 the number of bounces.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example performs a transition that bounces 7 times, diminishing by a factor of 1.8 over 5 seconds:</p>
+
+<pre class="prettyprint">static Eina_Bool
+_my_animation_callback(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; // Get the target object
+&nbsp;&nbsp;&nbsp;int x, y, w, h; // Target object geometry
+&nbsp;&nbsp;&nbsp;double frame = pos; // Actual position variation
+&nbsp;&nbsp;&nbsp;// Get frame relative position depending on desired effect
+&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); // Get current object position and size attributes
+&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame); // Move the Evas object according to desired effect
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+ecore_animator_timeline_add(5, _my_animation_callback, my_evas_object);</pre>
+
+<h2 id="infinite" name="infinite">Creating an Infinite Animation</h2>
+
+<p>If you want the animation to run for an unspecified amount of time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function. This function works the same way as the <span style="font-family: Courier New,Courier,monospace;">ecore_animation_timeline_add()</span> function, except its interval is based on frame rate. Using frame rate as the basis benefits performance, especially if you define multiple animations, since you may want to have a different timer for each callback function.</p>
+
+<pre class="prettyprint">
+ecore_animator_add(Ecore_Task_Cb func, const void *data)
+</pre>
+
+<ul>
+<li>The first argument is the callback function that performs the animation.</li>
+<li>The second argument is the parameter passed to the callback function. This is usually the Evas object to animate.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The function returns a pointer to an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object, which you can use to adjust the animation.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example creates a rectangle sliding from left to right and back again. When the rectangle hits one edge of the screen, it changes direction.</p>
+
+<pre class="prettyprint">static Eina_Bool
+_slide_back_and_forth(void *data)
+{
+&nbsp;&nbsp;&nbsp;typedef enum {LEFT, RIGHT} direction_t; // Direction datatype
+&nbsp;&nbsp;&nbsp;static int x = 0; // Initial position
+&nbsp;&nbsp;&nbsp;static direction_t direction = RIGHT; // Initial direction
+&nbsp;&nbsp;&nbsp;if (x &gt;= 250)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = LEFT; // Change direction
+&nbsp;&nbsp;&nbsp;else if (x &lt;= 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = RIGHT; // Change direction
+&nbsp;&nbsp;&nbsp;if (direction == RIGHT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, ++x, 350); // Slide to right
+&nbsp;&nbsp;&nbsp;else if (direction == LEFT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, --x, 350); // Slide to left
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;// Declarations
+
+&nbsp;&nbsp;&nbsp;// Ecore Evas init
+
+&nbsp;&nbsp;&nbsp;// Draw Evas objects
+
+&nbsp;&nbsp;&nbsp;// Animations go here
+&nbsp;&nbsp;&nbsp;anim = ecore_animator_add(_slide_back_and_forth, rectangle);
+&nbsp;&nbsp;&nbsp;// Ecore main loop
+
+&nbsp;&nbsp;&nbsp;// Free memory
+}</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To use this code, you have to merge it with the Ecore transition example above.</td>
+</tr>
+</tbody>
+</table>
+
+<h2 id="chain" name="chain">Chaining Animations</h2>
+
+<p>You may sometimes want to delay animating an object. This can be useful if, for example, you want to start an animation only after another one has finished.</p>
+
+<p>You can simply set a delay to the second animation equal to the duration of the first animation:</p>
+
+<pre class="prettyprint">
+static int runtime = 5;
+static int delay = runtime;
+static Eina_Bool
+_start_fold_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _fold_animation, data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+static Eina_Bool
+_start_unfold_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _unfold_animation, data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+_start_fold_animation(my_evas_object);
+ecore_timer_add(delay, _start_unfold_animation, my_evas_object);
+</pre>
+
+<h2 id="pause" name="pause">Pausing and Resuming Animations</h2>
+
+<p>You can pause and resume Ecore animations. To pause a running animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function:</p>
+
+<pre class="prettyprint">ecore_animator_freeze(Ecore_Animator *animator)</pre>
+
+<p>The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to pause.</p>
+
+<p>To resume the paused animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function:</p>
+
+<pre class="prettyprint">ecore_animation_thaw(Ecore_Animator *animator)</pre>
+
+<p>The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to resume.</p>
+
+<p>The following example pauses a transition after 5 seconds and resumes it after 5 more seconds:</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+_freeze_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_freeze(data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+static Eina_Bool
+_thaw_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_thaw(data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+ecore_timer_add(5, _freeze_animation, animator);
+ecore_timer_add(10, _thaw_animation, animator);
+</pre>
+
+<h2 id="free" name="free">Freeing Up Memory</h2>
+
+<p>When you create an animation that does not have a timeout, you will have to manually free up the memory allocated to the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. By comparison, if the animation has a timeout, Ecore implements the mechanisms to automatically delete the animator from the list of pointers: When your animation callback returns 0 or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>, the animator manager takes care of freeing up the allocated memory.</p>
+
+<p>To manually free up the memory, delete the pointer by using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function:</p>
+
+<pre class="prettyprint">ecore_animator_del(Ecore_Animator *animator)</pre>
+
+<p>The argument is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> whose memory allocation to free up.</p>
+
+<p>Regardless of the type of animation, it is good practice to always ensure that the allocated memory is freed up before the program exits:</p>
+
+<pre class="prettyprint">if (animator != NULL)
+&nbsp;&nbsp;&nbsp;ecore_animator_del(animator);</pre>
+
+<h2 id="frame" name="frame">Frametime</h2>
+<p>In most cases, you will want to use the default timer <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_TIMER</span>. This timer ticks every &quot;frametime&quot; seconds and allows you to perform transitions within a predefined timeline. The timer uses the system clock to tick over every Nth second, with the default being 1/30th of a second.</p>
+
+<p>To tweak performance, you can change the frametime value:</p>
+
+<pre class="prettyprint">ecore_animator_frametime_set(double frametime)</pre>
+
+<p>The argument is the new frametime value.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">Too small a value can cause performance issues, whereas too high a value can cause your animation to seem jerky.</td>
+</tr>
+</tbody>
+</table>
+
+<p>If you want to get the current frametime value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</p>
+
+<h2 id="custom" name="custom">Custom Timer</h2>
+
+<p>You may want to specify a custom timer to match your animation to third-party events. For example, the filling speed of a progress bar will mainly depend on the time it takes for a task to complete and the velocity at which the remaining time estimation evolves. This kind of animation requires you to use a custom timer.</p>
+
+<p>To use a custom timer, first set <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_CUSTOM</span> as the timer source, and then drive the timer based on an input tick source (such as another application via IPC or a vertical blanking interrupt):</p>
+
+<pre class="prettyprint">ecore_animator_custom_source_tick_begin_callback_set(Ecore_Cb func, const void *data)</pre>
+
+<p>The first argument is the callback function to call on the tick start. The second argument is the data to pass to the callback function.</p>
+
+<pre class="prettyprint">ecore_animator_custom_source_tick_end_callback_set(Ecore_Cb func, const void *data)</pre>
+
+<p>The first argument is the callback function to call on the tick end. The second argument is the data to pass to the callback function to set the functions that will be called to start and stop the ticking source.</p>
+
+<p>Next, trigger a tick over one frame:</p>
+
+<pre class="prettyprint">ecore_animator_custom_tick(void)</pre>
+
+<p>The following example supposes a progress bar that will be refreshed every time some progress occurs:</p>
+
+<pre class="prettyprint">ecore_animator_source_set(ECORE_ANIMATOR_SOURCE_CUSTOM);
+void _on_progress_update()
+{
+&nbsp;&nbsp;&nbsp;// Called when some progress occurs
+&nbsp;&nbsp;&nbsp;ecore_animator_custom_tick(); // Tick (next frame in progress bar animation)
+}</pre>
+
+<p>Finally, to get the current animator source, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_source_get()</span> function.</p>
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/ecore_animation_tutorial_n.htm b/org.tizen.ui.practices/html/native/efl/ecore_animation_tutorial_n.htm
new file mode 100644
index 0000000..115874a
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/ecore_animation_tutorial_n.htm
@@ -0,0 +1,412 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Ecore Animations</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#setup">Setting Up the Animation Target</a></li>
+			<li><a href="#rotate">Creating a Rotation Effect</a></li>
+			<li><a href="#zoom">Creating a Zoom Effect</a></li>
+			<li><a href="#3d_rotate">Creating a 3D Rotation Effect</a></li>
+			<li><a href="#drop_bounce">Creating Drop and Bounce Effects</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Ecore Animations</h1>
+
+  
+<p>This tutorial demonstrates how you can use Ecore animators to simplify the creation of animations. Using Ecore animators, you can manually create your own animations by changing and manipulating Evas object attributes. Ecore animators work like timers, running callback functions over a given duration (an animation timeline).</p>
+
+ <h2 id="setup" name="setup">Setting Up the Animation Target</h2>
+
+<p>To set up the animation target:</p>
+<ol>
+<li>
+<p>Set up the UI components to use in the application. A <strong>Basic UI Application</strong> template is used as the basis for the application.</p>
+
+<pre class="prettyprint">
+typedef struct 
+appdata 
+{
+&nbsp;&nbsp;&nbsp;// Main window
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;// Application title
+&nbsp;&nbsp;&nbsp;Evas_Object *label;
+
+&nbsp;&nbsp;&nbsp;// Buttons
+&nbsp;&nbsp;&nbsp;Evas_Object *bt1;
+&nbsp;&nbsp;&nbsp;Evas_Object *bt2;
+&nbsp;&nbsp;&nbsp;Evas_Object *bt3;
+
+&nbsp;&nbsp;&nbsp;// Animation target
+&nbsp;&nbsp;&nbsp;Evas_Object *target;
+} appdata_s;
+</pre>
+</li>
+<li><p>Create the actual UI components in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, starting with the main window and application title:</p>
+
+<pre class="prettyprint">
+// Main window
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};
+&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+}
+
+evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+// Application title
+ad-&gt;label = elm_label_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;label, &quot;Ecore Animator Tutorial&quot;);
+evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
+evas_object_show(ad-&gt;label);
+</pre>
+</li>
+<li>
+<p>Create the animation target: an <span style="font-family: Courier New,Courier,monospace">Elm_Image</span> Evas object.</p>
+<ol type="a">
+<li>
+<p>Set the image path by calling the <span style="font-family: Courier New,Courier,monospace">elm_image_file_set()</span> function. This function takes as parameters the <span style="font-family: Courier New,Courier,monospace">ad-&gt;target</span> Evas object and the path of the image file, built with the <span style="font-family: Courier New,Courier,monospace">snprintf()</span> function and stored in a buffer.</p>
+
+<pre class="prettyprint">
+// Set the image path
+char buf[PATH_MAX];
+snprintf(buf, sizeof(buf), &quot;/opt/usr/apps/%s/res/images/tizen-logo.png&quot;, PACKAGE);
+// Add the image
+ad-&gt;target = elm_image_add(ad-&gt;win);
+// Set the image path
+if (!elm_image_file_set(ad-&gt;target, buf, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image \&quot;%s\&quot;\n&quot;, buf);
+evas_object_size_hint_weight_set(ad-&gt;target, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre>
+
+<p>The image that is used in the source code is stored in the <span style="font-family: Courier New,Courier,monospace">res/images</span> folder of the application. The image that is used in the EDC file is stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> folder.</p>
+</li>
+
+<li>
+<p>All images are available in the <span style="font-family: Courier New,Courier,monospace">/opt/usr/apps/&lt;PACKAGE_NAME&gt;/res/images</span> folder of the application. The package name is defined at the begin of the application code.</p>
+
+<pre class="prettyprint">
+#if !defined(PACKAGE)
+#define PACKAGE &quot;org.tizen.ecoreanimator&quot;
+#endif
+</pre></li>
+
+<li>
+<p>You can move and resize the image before showing it:</p>
+
+<pre class="prettyprint">
+// Move the image
+evas_object_move(ad-&gt;target, 130, 100);
+// Resize the image
+evas_object_resize(ad-&gt;target, 200, 100);
+// Show the image
+evas_object_show(ad-&gt;target);
+</pre>
+</li></ol>
+</li>
+</ol>
+
+ <h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
+
+<p>To create a rotation effect:</p>
+
+<ol>
+<li>
+<p>Create a button for triggering the rotation effect. The button is placed and resized, and associated with the <span style="font-family: Courier New,Courier,monospace">_btn_rotate_cb()</span> callback function. This callback function calls the animation on the animation target.</p>
+<pre class="prettyprint">
+// Button 1
+ad-&gt;bt1 = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;bt1, &quot;Rotate&quot;);
+evas_object_size_hint_weight_set(ad-&gt;bt1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(ad-&gt;bt1, 25, 0);
+evas_object_resize(ad-&gt;bt1, 90, 70);
+evas_object_smart_callback_add(ad-&gt;bt1, &quot;clicked&quot;, _btn_rotate_cb, ad);
+evas_object_show(ad-&gt;bt1);
+</pre>
+</li>
+
+<li><p>Create an Ecore animator timeline using the <span style="font-family: Courier New,Courier,monospace">ecore_animator_timeline_add()</span> function. This function adds an animator that runs for a limited time: run the <span style="font-family: Courier New,Courier,monospace">_do_rotate()</span> animation callback function for 1 second on the <span style="font-family: Courier New,Courier,monospace">ad-&gt;target</span> Evas object.</p>
+<pre class="prettyprint">
+static void 
+_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_rotate, ad-&gt;target);
+}
+</pre>
+
+</li>
+<li>
+<p>Define the animation callback function that actually runs the animation. This callback is an <span style="font-family: Courier New,Courier,monospace">Ecore_Timeline_Cb</span> function, meaning it returns an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span> value and takes as parameters some <span style="font-family: Courier New,Courier,monospace">data</span> and the current position along the animation timeline (<span style="font-family: Courier New,Courier,monospace">pos</span>).</p>
+
+<p>To create the rotation animation, use an Evas map. The map handles the necessary map points and allows you to manipulate the target Evas object on the X, Y, and Z axes.</p>
+
+<p>In the animation callback function, first declare the Evas map. To implement the rotation, you must set an X and Y center, and because of this, 4 integer variables are created to store the size and position of the target. This information is provided by the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function, which returns the X and Y coordinates and the width and height of the target Evas object.</p>
+<pre class="prettyprint">static Eina_Bool
+_do_rotate(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;// Get the animation target
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;// Declare Evas_Map
+&nbsp;&nbsp;&nbsp;Evas_Map *m;
+&nbsp;&nbsp;&nbsp;// Variables to store the target size and position
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+
+&nbsp;&nbsp;&nbsp;// Get the size and position of the target
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+</pre>
+
+</li>
+<li>
+<p>Create an Evas map consisting of 4 points, and populate these points with the animation target:</p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Create an Evas_Map of 4 points
+&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
+&nbsp;&nbsp;&nbsp;// Populate the source and destination map points to match object exactly
+&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
+</pre>
+</li>
+<li>
+<p>Define the rotation using the <span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate()</span> function:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Create a rotation of 360° with x+(w/2) &quot;x&quot; center and y +(h/2) &quot;y&quot; center
+&nbsp;&nbsp;&nbsp;evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+</pre>
+</li>
+<li><p>Call the animation callback function. The function is called at several points along the timeline, which is why the rotation angle (360°) is multiplied by the timeline position (<span style="font-family: Courier New,Courier,monospace">pos</span>) to get the actual animation angle. If this is not done, you never see the animation take place. Join the target object to the map and run the animation: </p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Set the object to &quot;animate&quot; in the Evas_Map
+&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
+&nbsp;&nbsp;&nbsp;// Start the animation
+&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
+</pre>
+
+<p>Each call to the animation callback function rotates the object (360 * timeline position) degrees.</p>
+</li>
+<li>
+<p>When you are finished, free up the memory allocated to the Evas map:</p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Free the used memory
+&nbsp;&nbsp;&nbsp;evas_map_free(m);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+</li>
+</ol>
+
+ <h2 id="zoom" name="zoom">Creating a Zoom Effect</h2>
+
+<p>To create a zoom effect:</p>
+
+<ol>
+<li>
+<p>Create a button in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
+
+<pre class="prettyprint">
+// Button 2
+ad-&gt;bt2 = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;bt2, &quot;Zoom&quot;);
+evas_object_size_hint_weight_set(ad-&gt;bt2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(ad-&gt;bt2, 315, 0);
+evas_object_resize(ad-&gt;bt2, 90, 70);
+evas_object_smart_callback_add(ad-&gt;bt2, &quot;clicked&quot;, _btn_zoom_cb, ad);
+evas_object_show(ad-&gt;bt2);
+</pre>
+</li>
+<li>
+<p>Create a button callback function and add a new timeline:</p>
+
+<pre class="prettyprint">
+static void 
+_btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_zoom, ad-&gt;target);
+}
+</pre>
+</li>
+<li>
+<p>Create the <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> animation callback function. It is almost identical to the <span style="font-family: Courier New,Courier,monospace">_do_rotate()</span> callback function (described in the previous use case), except that the <span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span> function is used to create the animation.</p>
+
+<p>In the following example, the horizontal and vertical zoom factor of 2 (second and third parameter), and the X and Y coordinates of the target as the horizontal and vertical center coordinates (fourth and fifth parameter) are used.</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+_do_zoom(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;Evas_Map *m;
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
+&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
+&nbsp;&nbsp;&nbsp;evas_map_util_zoom(m, 2 * pos, 2 * pos, x , y);
+&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
+&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_map_free(m);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> callback function is called at several points along the animation timeline, which is why the horizontal and vertical zoom factor values are multiplied by the timeline position. Each call zooms more than the previous one, thereby creating the animation effect.</p>
+</li>
+</ol>
+
+ <h2 id="3d_rotate" name="3d_rotate">Creating a 3D Rotation Effect</h2>
+
+ <p>To create a 3D rotation:</p>
+ <ol>
+ <li>
+<p>Create a button and its callback function. In this animation, the Evas object is rotated on all 3 axes (X, Y, Z).</p>
+<pre class="prettyprint">
+// Button 3
+ad-&gt;bt3 = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;bt3, &quot;3D&quot;);
+evas_object_size_hint_weight_set(ad-&gt;bt3, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(ad-&gt;bt3, 170, 0);
+evas_object_resize(ad-&gt;bt3, 90, 70);
+evas_object_smart_callback_add(ad-&gt;bt3, &quot;clicked&quot;, _btn_3d_cb, ad);
+evas_object_show(ad-&gt;bt3);
+</pre>
+
+<pre class="prettyprint">
+static void 
+_btn_3d_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_3d, ad-&gt;target);
+}
+</pre>
+</li>
+
+<li>
+<p>Create the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> animation callback function, which is very similar to the rotate and zoom callback functions described in previous use cases. To create the animation, the <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function is used. This function allows you to rotate any Evas object on all 3 axes.</p>
+
+<p>In this example, the map is rotated 360 degrees around each axis (defined in the second, third, and fourth parameter). The horizontal (X) rotation center is the X position of the target plus its width divided by 3 (fifth parameter). The vertical (Y) rotation center is the Y position of the target plus 60 (sixth parameter). The Z rotation center is 0 (seventh parameter).</p>
+<pre class="prettyprint">
+static Eina_Bool
+_do_3d(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;Evas_Map *m;
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
+&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
+&nbsp;&nbsp;&nbsp;evas_map_util_3d_rotate(m, pos * 360, pos * 360, pos * 360, x + (w / 3), y + 60, 0);
+&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
+&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_map_free(m);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>As with the rotation and zoom animations, multiply the angles by the timeline position to gently rotate the target on each call to the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> callback function along the timeline.</p>
+</li>
+</ol>
+ <h2 id="drop_bounce" name="drop_bounce">Creating Drop and Bounce Effects</h2>
+
+ <p>To create drop and bounce effects:</p>
+
+ <ol>
+ <li>
+<p>Add drop and bounce effects to the buttons at the application start. To do this, create one timeline per button after creating the buttons in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
+
+<pre class="prettyprint">
+ecore_animator_timeline_add(2, _do_drop, ad-&gt;bt1);
+ecore_animator_timeline_add(2.3, _do_drop, ad-&gt;bt2);
+ecore_animator_timeline_add(2.5, _do_drop, ad-&gt;bt3);
+</pre>
+</li>
+
+<li>
+<p>Call the same <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> animation callback function for each timeline. In this callback, instead of using an Evas map, simply change the position of the target using the <span style="font-family: Courier New,Courier,monospace">evas_object_move()</span> function.</p>
+<p>To get the bounce effect, use the <span style="font-family: Courier New,Courier,monospace">ecore_animator_pos_map()</span> function, which maps an input position from 0.0 to 1.0 along the timeline to a position on a different curve. The curve can be of different types, such as <span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and <span style="font-family: Courier New,Courier,monospace">BOUNCE</span> (defined as the second parameter).</p>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace">ECORE_POS_MAP_BOUNCE</span> map used starts at 0.0, then drops like a ball bouncing to the ground at 1.0, bouncing 4 times with a decay factor of 1. The bouncing times and the decay factor as defined as the third and fourth parameter.</p>
+<pre class="prettyprint">static Eina_Bool
+_do_drop(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+&nbsp;&nbsp;&nbsp;double frame = pos;
+&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">frame</span> is used in the <span style="font-family: Courier New,Courier,monospace">evas_object_move()</span> function to create the animation. The value increases on each <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> call along the timeline, which produces a nice drop of the buttons from their initial position to 600 pixels on the vertical axis.</p>
+</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>
diff --git a/org.tizen.ui.practices/html/native/efl/edc_optimization_n.htm b/org.tizen.ui.practices/html/native/efl/edc_optimization_n.htm
new file mode 100644
index 0000000..d7e0ac9
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edc_optimization_n.htm
@@ -0,0 +1,556 @@
+<!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>Optimizing EDC</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#remove">Removing Unnecessary Parts</a></li>
+			<li><a href="#text">Using Text instead of Textblock</a></li>
+			<li><a href="#compress">Compressing Images and Embedding into EDC</a></li>
+			<li><a href="#spacer">Using a Spacer</a></li>
+			<li><a href="#border">Using the Image Border Feature</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li> 
+		 </ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Optimizing EDC</h1>
+
+
+<p>To optimize EDC:</p>
+<ul>
+<li><a href="#remove">Remove unnecessary parts</a></li>
+<li><a href="#text">Use text instead of textblock</a></li>
+<li><a href="#compress">Compress images and embed into EDC</a></li>
+<li><a href="#spacer">Use a spacer</a></li>
+<li><a href="#border">Use the image border feature</a></li>
+</ul>
+
+
+<h2 id="remove" name="remove">Removing Unnecessary Parts</h2>
+<p>When you create EDC, there can be obsolete and unnecessary parts. Since they have an effect on performance, remove them.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+	 <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;new&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
+&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;<strong>part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;old&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</strong>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> </td> 
+     <td rowspan="1" colspan="1">
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;new&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
+&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;}
+}
+</pre> </td> 
+	</tr>
+</tbody>
+</table>
+
+<h2 id="text" name="text">Using Text instead of Textblock</h2>
+
+<p>The following EDCs lead to the same result. However, use TEXT for the simple texts for high performance, except when elements or multiple lines are needed.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+	 <tr> 
+     <td rowspan="1" colspan="1">  
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;styles 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_style&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=&quot;Sans&quot; font_size=30 text_class=entry 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color=#0088AA style=shadow,bottom 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shadow_color=#00000080 valign=0.5 ellipsis=1.0 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wrap=none align=center&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;style: &quot;text_style&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&quot;;
+&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;}
+}
+</pre>  </td> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;simple&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: SHADOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;size: 30;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&quot;;
+&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;}
+}
+</pre>  </td> 
+	</tr>
+</tbody>
+</table>
+
+<h2 id="compress" name="compress">Compressing Images and Embedding into EDC</h2>
+
+<p>When you use a fixed image, it is more efficient to call an image within EDC. This saves time in accessing the image data and is more suitable for the data size.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;<strong>images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;logo.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}</strong>
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;logo.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&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;}
+}
+</pre>
+
+<h2 id="spacer" name="spacer">Using a Spacer</h2>
+<p>When you use a part that is invisible but has a size (such as padding), using a spacer is more efficient. Since the spacer is invisible, it does not have the visibility and color options.</p>
+
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+	 <tr> 
+     <td rowspan="1" colspan="1">
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>RECT</strong>;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>color: 0 0 0 0;</strong>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;               
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;        
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_right_bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>RECT</strong>;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>color: 0 0 0 0;</strong>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;               
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;padding_right_bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&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;}
+}
+</pre> </td> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>SPACER</strong>;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;               
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_right_bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>SPACER</strong>;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;               
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;padding_right_bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&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;}
+}
+</pre> </td> 
+	</tr>
+</tbody>
+</table>
+
+<h2 id="border" name="border">Using the Image Border Feature</h2>
+
+<p>When you use an image, you can effectively scale it to an optimal size with the image border option.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+	 <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;test.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;test&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;test.png&quot;;
+
+&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;}
+}
+</pre> </td> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;test.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;test&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;test.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>image.border: 5 5 5 5</strong>;
+&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;}
+}
+</pre> </td> 
+	</tr>
+	 <tr> 
+     <td rowspan="1" colspan="1"> <p align="center"><img alt="Image before" src="../../images/image_before.png" /></p> </td> 
+     <td rowspan="1" colspan="1" class="middle"><p align="center"><img alt="Image after" src="../../images/image_after.png" /></p> </td> 
+	</tr>
+</tbody>
+</table>
+  
+<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.practices/html/native/efl/edc_part_block_n.htm b/org.tizen.ui.practices/html/native/efl/edc_part_block_n.htm
new file mode 100644
index 0000000..c613e64
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edc_part_block_n.htm
@@ -0,0 +1,2054 @@
+<!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>EDJE Data Collection Reference</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+				<li><a href="#group_block">Group Block</a></li>
+				<li><a href="#part_block">Part Block</a></li>
+				<li><a href="#program1">Program Block</a></li>
+				</ul>
+	<p class="toc-title">Related Info</p>
+		<ul class="toc">	
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>EDJE Data Collection Reference</h1> 
+
+<p>A typical Edje file starts with the following definitions:</p>
+
+<pre class="prettyprint">
+<a href="#Images">images</a> {}
+<a href="#Fonts">fonts</a> {}
+<a href="#Color_classes">color_classes</a> {}
+<a href="#Styles">styles</a> {}
+<a href="#Collections">collections</a> 
+{
+&nbsp;&nbsp;&nbsp;<a href="#Sounds">sounds</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Tone">tone</a>: &quot;tone-1&quot; 2300;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Tone">tone</a>: &quot;tone-2&quot; 2300;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sample">sample</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Name">name</a>: &quot;sound1&quot; RAW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sound_Source">source</a>: &quot;sound_file1.wav&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#group_block">group</a> {}
+&nbsp;&nbsp;&nbsp;<a href="#group_block">group</a> {}
+}
+</pre>
+
+
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">This reference is based on original work from Andres Blanc (dresb) <a href="mailto:andresblanc@gmail.com">andresblanc@gmail.com</a>, and it has been heavily expanded and edited since then.</td>
+</tr>
+</tbody>
+</table> 
+<p>The following list shows the details of the top-level blocks.</p>
+<ul>
+<li id="Images" name="Images"><span style="font-family: Courier New,Courier,monospace;">images</span> block:
+
+<pre class="prettyprint">
+images 
+{
+&nbsp;&nbsp;&nbsp;image: &quot;filename1.ext&quot; COMP;
+&nbsp;&nbsp;&nbsp;image: &quot;filename2.ext&quot; LOSSY 99;
+&nbsp;&nbsp;&nbsp;set {}
+&nbsp;&nbsp;&nbsp;set {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">images</span> block is used to list the image files used in the theme. The used compression methods are also defined here. In addition to the top-level, the <span style="font-family: Courier New,Courier,monospace;">images</span> blocks can be included inside other blocks, usually <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. Using the <span style="font-family: Courier New,Courier,monospace;">images</span> block on the top-level makes file list maintenance easier, when the theme is split among multiple files.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
+<p>This property is included for each image file. The full path to the directory holding the image can be defined later with the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool&#39;s <span style="font-family: Courier New,Courier,monospace;">-id</span> option. The available compression methods are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
+<li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
+<li><span style="font-family: Courier New,Courier,monospace;">LOSSY [0-100]</span>: JPEG lossy compression with quality from 0 to 100</li>
+<li><span style="font-family: Courier New,Courier,monospace;">USER</span>: Not embedded in the file, refer to an external file instead</li>
+</ul>
+
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">images.set</span> block
+
+<pre class="prettyprint">
+set 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;image_name_used&quot;;
+&nbsp;&nbsp;&nbsp;image {}
+&nbsp;&nbsp;&nbsp;image {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">set</span> block is used to define an image with different content depending on its size. In addition to the top-level, the <span style="font-family: Courier New,Courier,monospace;">set</span> blocks can be included inside other blocks, normally <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. Using the <span style="font-family: Courier New,Courier,monospace;">set</span> block on the top-level makes file list maintenance easier, when the theme is split among multiple files.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [image name]</span>
+<p>Sets the name of this image description.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">images.set.image</span> block
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;image: &quot;filename4.ext&quot; COMP;
+&nbsp;&nbsp;&nbsp;size: 51 51 200 200;
+&nbsp;&nbsp;&nbsp;border: 0 0 0 0;
+&nbsp;&nbsp;&nbsp;border_scale_by: 0.0;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">image</span> block defines the characteristics of an image. Every block describes one image and the size rule to use it. For full details, see <a href="#description_image">Image</a>.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
+<p>This property is included for each image file. The full path to the directory holding the image can be defined later with the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool&#39;s <span style="font-family: Courier New,Courier,monospace;">-id</span> option.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">size [minw] [minh] [maxw] [maxh]</span>
+<p>Sets the minimum and maximum size that selects a specific image.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span>
+<p>If set, the width (in pixels) of each side of the image is displayed as a fixed size border, from the side inwards, preventing the corners from being changed on a resize.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span>
+<p>If border scaling is enabled, normally the output border sizes scale accordingly. For example, if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always the exact 3 columns of output, or at scale 2.0 they are 6 columns, or 0.33 they merge into a single column. This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to enable higher resolution outputs by always using the highest resolution artwork and then at runtime scaling it down. Valid values are: 0.0 or bigger (0.0 or 1.0 to switch it off).</p>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul></li>
+
+<li id="Fonts" name="Fonts"><span style="font-family: Courier New,Courier,monospace;">fonts</span> block
+
+<pre class="prettyprint">
+fonts
+{
+&nbsp;&nbsp;&nbsp;font: &quot;filename1.ext&quot; &quot;fontname&quot;;
+&nbsp;&nbsp;&nbsp;font: &quot;filename2.ext&quot; &quot;otherfontname&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">fonts</span> block is used to list each font file with an alias used later in the theme. As with the <span style="font-family: Courier New,Courier,monospace;">images</span> block, additional <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks can be included inside other blocks.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">font [font filename] [font alias]</span>
+<p>This property is included for each font, and it defines the <span style="font-family: Courier New,Courier,monospace;">font file</span> and <span style="font-family: Courier New,Courier,monospace;">alias</span>. The full path to the directory containing the font files can be defined later with the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool&#39;s <span style="font-family: Courier New,Courier,monospace;">-fd</span> option.
+</p></li>
+</ul>
+</li>
+<li id="Data" name="Data"><span style="font-family: Courier New,Courier,monospace;">data</span> block
+
+<pre class="prettyprint">
+data 
+{
+&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
+&nbsp;&nbsp;&nbsp;file: &quot;otherkey&quot; &quot;filename.ext&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">data</span> block behaves in the same way as the <span style="font-family: Courier New,Courier,monospace;">data</span> block inside the <span style="font-family: Courier New,Courier,monospace;">parts</span> block, but the usage is different: this block is useful for data that covers the whole theme, such as license information, version, and authors.</p>
+</li>
+<li id="Color_classes" name="Color_classes"><span style="font-family: Courier New,Courier,monospace;">color_classes</span> block
+
+<pre class="prettyprint">
+color_classes 
+{
+&nbsp;&nbsp;&nbsp;color_class 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;colorclassname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: [0-255] [0-255] [0-255] [0-255];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: [0-255] [0-255] [0-255] [0-255];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: [0-255] [0-255] [0-255] [0-255];
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">color_classes</span> block contains one or more <span style="font-family: Courier New,Courier,monospace;">color_class</span> blocks. Each <span style="font-family: Courier New,Courier,monospace;">color_class</span> block allows you to name an arbitrary group of colors to be used in the theme. The application can use that name to alter the color values at runtime.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [color class name]</span>
+<p>Sets the name for the color class, and is used as a reference by both the theme and the application.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span>
+<p>Sets the main color.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span>
+<p>Used as an outline in text and textblock parts.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span>
+<p>Used as a shadow in text and textblock parts.</p>
+</li>
+</ul>
+</li>
+
+<li id="Styles" name="Styles"><span style="font-family: Courier New,Courier,monospace;">styles</span> block
+
+<pre class="prettyprint">
+styles 
+{
+&nbsp;&nbsp;&nbsp;style 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;stylename&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;..default style properties..&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag: &quot;tagname&quot; &quot;..style properties..&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">styles</span> block contains one or more <span style="font-family: Courier New,Courier,monospace;">style</span> blocks. A <span style="font-family: Courier New,Courier,monospace;">style</span> block is used to create style <span style="font-family: Courier New,Courier,monospace;">&lt;tags&gt;</span> for advanced textblock formatting.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [style name]</span>
+<p>Sets the name of the style to be used as a reference later in the theme.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">base [style properties string]</span>
+<p>Sets the default style properties applied to the complete text. The following tags can be used in the style property:</p>
+   <ul>
+	  <li><span style="font-family: Courier New,Courier,monospace;">font</span></li>
+	  <li><span style="font-family: Courier New,Courier,monospace;">font_size</span>
+        <table class="note">
+              <tbody>
+              <tr>
+                      <th class="note">Note</th>
+              </tr>
+              <tr>
+                      <td class="note">The font size is a point size, and the size of the rendered text is affected by the ppi information. The system basic ppi is 96, and you can change it in the Emulator menu.</td>
+              </tr>
+               </tbody>
+      </table>
+
+	  </li>
+	  <li><span style="font-family: Courier New,Courier,monospace;">color</span></li>
+	  <li><span style="font-family: Courier New,Courier,monospace;">color_class</span></li>
+	  <li><span style="font-family: Courier New,Courier,monospace;">text_class</span></li>
+	  <li><span style="font-family: Courier New,Courier,monospace;">ellipsis</span></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">wrap</span></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">style</span></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">valign</span></li>
+      <li><span style="font-family: Courier New,Courier,monospace;">align</span></li>
+	  
+   </ul>
+
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">tag [tag name] [style properties string]</span>
+<p>Sets the style to be applied only to text between style <span style="font-family: Courier New,Courier,monospace;">&lt;tags&gt;..&lt;/tags&gt;</span>. When creating paired tags, like <span style="font-family: Courier New,Courier,monospace;">&lt;bold&gt;&lt;/bold&gt;</span>, a &#39;+&#39; sign must be added at the start of the style properties of the first part (<span style="font-family: Courier New,Courier,monospace;">&lt;bold&gt;</span>). If the second part (<span style="font-family: Courier New,Courier,monospace;">&lt;/bold&gt;</span>) is also defined, a &#39;-&#39; sign must be added to its style properties. This applies only to paired tags; single tags, like <span style="font-family: Courier New,Courier,monospace;">&lt;tab&gt;</span>, must not have a starting &#39;+&#39;.</p>
+   <ul>
+	  <li><span style="font-family: Courier New,Courier,monospace;">br</span></li>
+	  <li><span style="font-family: Courier New,Courier,monospace;">tab</span></li>
+	  <li><span style="font-family: Courier New,Courier,monospace;">b</span></li>
+	  <li><span style="font-family: Courier New,Courier,monospace;">match</span></li>
+   </ul>
+
+
+
+
+<p>The following code is the style sample for the text style:</p>
+
+<pre class="prettyprint">
+style 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;list_text_main&quot;;
+&nbsp;&nbsp;&nbsp;base: &quot;font=Tizen:style=Regular font_size=30 color=#ffffff ellipsis=1.0&quot;;
+&nbsp;&nbsp;&nbsp;tag: &quot;br&quot; &quot;\n&quot;;\
+&nbsp;&nbsp;&nbsp;tag: &quot;ps&quot; &quot;ps&quot;;\
+&nbsp;&nbsp;&nbsp;tag: &quot;tab&quot; &quot;\t&quot;;\
+&nbsp;&nbsp;&nbsp;tag: &quot;b&quot; &quot;+ font_weight=Bold&quot;;
+}
+</pre>
+</li>
+</ul>
+</li>
+
+<li id="Collections" name="Collections"><span style="font-family: Courier New,Courier,monospace;">collections</span> block
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;base_scale: 1.8;
+&nbsp;&nbsp;&nbsp;sounds 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tone: &quot;tone-1&quot; 2300;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tone: &quot;tone-2&quot; 440;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sample 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;sound_file1&quot; RAW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;sound_file1.wav&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alias: &quot;anothername;&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: width height;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: width height;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scripts {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limits {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">collections</span> block is used to list the groups that compose the theme. Additional <span style="font-family: Courier New,Courier,monospace;">collections</span> blocks do not prevent overriding group names.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">base_scale: [scale factor]</span>
+<p>Sets information about the scale factor in the EDC file.</p>
+
+<p>Object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of the application to show the application in a proper size in other devices. However, the scaling must be based on the scale 1.0. If the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the base scale.</p>
+
+<p>The size of a scalable object is multiplied with the device scale value. If the scalable object with the size 10 is created in a device with the scale 1.0, the size of the object is 20 in a device with the scale 2.0, and 40 in a device with the scale 4.0.</p>
+
+<p>For more information about supporting multiple screens in one EDC, see the <a href="multiple_screens_n.htm">Multiple Screen Support</a> guide.</p>
+</li>
+<li id="Sounds" name="Sounds"><span style="font-family: Courier New,Courier,monospace;">sounds</span> block
+<p>The <span style="font-family: Courier New,Courier,monospace;">sounds</span> block contains one or more sound sample and tone items.</p>
+<ul>
+<li id="Tone"><span style="font-family: Courier New,Courier,monospace;">tone [tone name] [frequency]</span>
+<p>Sets the sound of the given frequency.</p>
+</li>
+<li id="Sample" name="Sample"><span style="font-family: Courier New,Courier,monospace;">sounds.sample</span> block
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">sample</span> block defines the sound sample.</p>
+
+<ul>
+<li id="Name"><span style="font-family: Courier New,Courier,monospace;">name [sample name] [compression type] (quality)</span>
+<p>Used to include each sound file. The full path to the directory holding the sounds can be defined later with the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool&#39;s <span style="font-family: Courier New,Courier,monospace;">-sd</span> option. The valid compression types are:</p>
+	<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">LOSSY [-0.1 - 1.0]</span>: Lossy compression with quality from 0.0 to 1.0</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">AS_IS</span>: No compression or encoding, write the file information as it is</li>
+	</ul>
+</li>
+</ul>
+
+<ul>
+<li id="Sound_Source"><span style="font-family: Courier New,Courier,monospace;">source [file name]</span>
+<p>Sets the sound source file name (mono or stereo WAV file; only files with the 44.1 KHz sample rate are supported for now).</p>
+</li>
+</ul>
+</li>
+</ul>
+
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">group</span> block
+<p>The <a href="#group_block">group</a> block defines Edje Objects.</p>
+</li>
+</ul>
+</li>
+
+
+</ul>
+
+  <h2 id="group_block" name="group_block">Group Block</h2>
+
+<pre class="prettyprint">
+group
+{
+&nbsp;&nbsp;&nbsp;<a href="#Group_Name">name</a>: &quot;nameusedbytheapplication&quot;;
+&nbsp;&nbsp;&nbsp;<a href="#Alias">alias</a>: &quot;anothername&quot;;
+&nbsp;&nbsp;&nbsp;<a href="#Min">min</a>: width height;
+&nbsp;&nbsp;&nbsp;<a href="#Max">max</a>: width height;
+&nbsp;&nbsp;&nbsp;<a href="#Parts">parts</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;definitions of parts&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#Script">script</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#Limits">limits</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Vertical">vertical</a>: &quot;limit_name&quot; height_barrier;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Horizontal">horizontal</a>: &quot;limit_name&quot; width_barrier;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#Group_Data">data</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Items">items</a>: &quot;key&quot; &quot;value&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#File">file</a>: &quot;key&quot; &quot;file&quot;;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#Programs">programs</a> {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">group</span> block contains a list of parts and programs that compose a given Edje Object.</p>
+
+<ul>
+<li id="Group_Name"><span style="font-family: Courier New,Courier,monospace;">name [group name]</span>
+<p>Sets the name used by the application to load the resulting Edje object and to identify the group to swallow in a group part. If a group with the same name exists already, it is completely overridden by the new group.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">inherit_only [1 or 0]</span>
+<p>Flags the group as being used only for inheriting, which inhibits the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool from resolving programs and parts that do not exist in this group, but are located in the group which is inheriting this group.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">inherit [parent group name]</span>
+<p>Sets the parent group name for inheritance. The <span style="font-family: Courier New,Courier,monospace;">inherit</span> property is used to inherit any predefined group and change some properties which belong to a <span style="font-family: Courier New,Courier,monospace;">part</span>, <span style="font-family: Courier New,Courier,monospace;">description</span>, <span style="font-family: Courier New,Courier,monospace;">items</span>, or <span style="font-family: Courier New,Courier,monospace;">program</span>. The child group has the same properties as its parent group. If you specify the type again in an inherited part, it causes an error.</p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">script_recursion [1/0]</span>
+<p>Determines whether to error on unsafe calls when recursively running Embryo programs. For example, running an Embryo script which calls EDC that has a <span style="font-family: Courier New,Courier,monospace;">script{}</span> block is unsafe, and the outer-most (first) Embryo stack is corrupted. It is strongly unadvisable to use this flag.</p></li>
+
+<li id="Alias"><span style="font-family: Courier New,Courier,monospace;">alias [additional group name]</span>
+<p>Sets the additional name to be used as an identifier. Defining multiple aliases is supported.</p>
+</li>
+
+<li id="Min"><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span>
+<p>Sets the minimum size for the container defined by the composition of the parts. It is not enforced.</p>
+</li>
+
+<li id="Max"><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span>
+<p>Sets the maximum size for the container defined by the totality of the parts. It is not enforced.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">broadcast_signal [on/off]</span>
+<p>Determines whether a signal gets automatically broadcasted to all sub group parts. The default value is <span style="font-family: Courier New,Courier,monospace;">on</span>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">orientation [AUTO/LTR/RTL]</span>
+<p>Sets the group orientation. It is useful if you want to match the interface orientation with language.</p>
+<ul>
+	<li><span style="font-family: Courier New,Courier,monospace;">AUTO</span>: Follow system defaults</li>
+	<li><span style="font-family: Courier New,Courier,monospace;">LTR</span>: Used in the Left To Right Languages (Latin)</li>
+	<li><span style="font-family: Courier New,Courier,monospace;">RTL</span>: Used in the Right To Left Languages (Hebrew, Arabic)</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span>
+<p>Changes the default value of <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> for every part in this group. The default value is <span style="font-family: Courier New,Courier,monospace;">1</span>, to maintain compatibility.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">program_source [source name]</span>
+<p>Changes the default value of the source in the current group for every program which is declared after this value is set. The value defaults to an unset value to maintain compatibility. The name of the source can be set on every program, but if the name can be defined in the group level, it reduces the effort to indicate it in every program.</p>
+</li>
+<li id="Parts" name="Parts"><span style="font-family: Courier New,Courier,monospace;">group.parts</span> block
+
+<pre class="prettyprint">
+parts 
+{
+&nbsp;&nbsp;&nbsp;part {}
+&nbsp;&nbsp;&nbsp;part {}
+&nbsp;&nbsp;&nbsp;part {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">parts</span> block contains one or more <a href="#part_block">part</a>. Each part describes a visual element and has a type, such as <span style="font-family: Courier New,Courier,monospace;">text</span>, <span style="font-family: Courier New,Courier,monospace;">image</span>, or <span style="font-family: Courier New,Courier,monospace;">table</span>.</p>
+</li>
+<li id="Script" name="Script"><span style="font-family: Courier New,Courier,monospace;">group.script</span> block
+
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">script</span> block is used to inject embryo scripts to a given Edje theme. It functions in two modalities: when it is included inside a <span style="font-family: Courier New,Courier,monospace;">program</span> block, the script is executed every time the <a href="#program1">program</a> is run, and when included directly into a <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">part</span>, or <span style="font-family: Courier New,Courier,monospace;">description</span> block, it is executed once at the load time, in the load order.</p>
+</li>
+
+<li id="Limits" name="Limits"><span style="font-family: Courier New,Courier,monospace;">group.limits</span> block
+
+<pre class="prettyprint">
+limits 
+{
+&nbsp;&nbsp;&nbsp;vertical: &quot;limit_name&quot; height_barrier;
+&nbsp;&nbsp;&nbsp;horizontal: &quot;limit_name&quot; width_barrier;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">limits</span> block is used to trigger signals when the Edje object is resized.</p>
+<ul>
+<li id="Vertical"><span style="font-family: Courier New,Courier,monospace;">vertical [name] [height barrier]</span>
+<p>Sends a <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> signal when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, the <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> signal is sent. This limit is applied on the Y axis and is given in pixels.</p>
+</li>
+<li id="Horizontal"><span style="font-family: Courier New,Courier,monospace;">horizontal [name] [width barrier]</span>
+<p>Sends a <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> signal when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, the <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> signal is sent. This limit is applied on the X axis and is given in pixels.</p>
+</li>
+</ul>
+</li>
+
+<li id="Group_Data" name="Group_Data"><span style="font-family: Courier New,Courier,monospace;">group.data</span> block
+
+<pre class="prettyprint">
+data 
+{
+&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
+&nbsp;&nbsp;&nbsp;file: &quot;key2&quot; &quot;somefile&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">data</span> block is used to pass arbitrary parameters from the theme to the application. Unlike the <span style="font-family: Courier New,Courier,monospace;">images</span> and <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks, additional <span style="font-family: Courier New,Courier,monospace;">data</span> blocks can only be included inside the <span style="font-family: Courier New,Courier,monospace;">group</span> block.</p>
+
+<ul>
+<li id="Items"><span style="font-family: Courier New,Courier,monospace;">items: &quot;key&quot; &quot;value&quot;;</span>
+<p>Sets a new parameter, the value is the string specified next to it.</p>
+</li>
+<li id="File"><span style="font-family: Courier New,Courier,monospace;">file: &quot;key&quot; &quot;file&quot;;</span>
+<p>Sets a new parameter, the value is the content of the specified file formatted as a single string of text. This property only works with plain text files.</p>
+</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">For genlist item styles, keys must be texts and icons, respectively for text parts and swallow parts; values must the names of the parts, separated with spaces.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li id="Programs" name="Programs"><span style="font-family: Courier New,Courier,monospace;">group.programs</span> block
+
+<pre class="prettyprint">
+programs 
+{
+&nbsp;&nbsp;&nbsp;program {}
+&nbsp;&nbsp;&nbsp;program {}
+&nbsp;&nbsp;&nbsp;program {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">programs</span> group contain one or more <a href="#program1">program</a>. Each program contains code related to the interaction and animation of the visual elements.</p>
+</li>
+</ul>
+
+  
+  <h2 id="part_block" name="part_block">Part Block</h2> 
+  
+  <pre class="prettyprint">
+part
+{
+&nbsp;&nbsp;&nbsp;// Inherit all the fields of another part
+&nbsp;&nbsp;&nbsp;<a href="#inherit">inherit</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// Name the part
+&nbsp;&nbsp;&nbsp;<a href="#part_name">name</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// Set the part type
+&nbsp;&nbsp;&nbsp;<a href="#type">type</a>: IMAGE;
+&nbsp;&nbsp;&nbsp;// Enable mouse events on the part
+&nbsp;&nbsp;&nbsp;<a href="#mouse_events">mouse_events</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// Repeat the mouse events to the parts below the current one
+&nbsp;&nbsp;&nbsp;<a href="#repeat_events">repeat_events</a>: 0/1;
+&nbsp;&nbsp;&nbsp;<a href="#ignore_flags">ignore_flags</a>: NONE;
+&nbsp;&nbsp;&nbsp;// Set whether the part sizes scale with the edje scaling factor
+&nbsp;&nbsp;&nbsp;<a href="#scale">scale</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// Set whether fully-transparent pixels are taken into account for collision detection
+&nbsp;&nbsp;&nbsp;<a href="#precise_is_inside">precise_is_inside</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// Only render the area of the part that coincides with the given part
+&nbsp;&nbsp;&nbsp;<a href="#clip_to">clip_to</a>: &quot;anotherpart&quot;;
+&nbsp;&nbsp;&nbsp;// For group/textblock parts: swallow the given group (for textblock: goes below text)
+&nbsp;&nbsp;&nbsp;<a href="#source">source</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// Same as the source but goes on top of text
+&nbsp;&nbsp;&nbsp;<a href="#source2">source2</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// For textblock parts: swallow the given group below the mouse cursor when it hovers over the part
+&nbsp;&nbsp;&nbsp;<a href="#source3">source3</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// Same as source3 but goes on top of the cursor
+&nbsp;&nbsp;&nbsp;<a href="#source4">source4</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// For textblock parts: swallow the given group below text anchors (&lt;a&gt;...&lt;/a&gt;)
+&nbsp;&nbsp;&nbsp;<a href="#source5">source5</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// Same as source5 but goes on to top of the anchor
+&nbsp;&nbsp;&nbsp;<a href="#source6">source6</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// Add a shadow effect to the part
+&nbsp;&nbsp;&nbsp;<a href="#effect">effect</a>: SOFT_SHADOW (BOTTOM_RIGHT);
+&nbsp;&nbsp;&nbsp;// For textblock parts: makes the text editable, possibly with a specific behavior
+&nbsp;&nbsp;&nbsp;<a href="#entry_mode">entry_mode</a>: PASSWORD;
+&nbsp;&nbsp;&nbsp;// For textblock parts: change how the text selection is triggered
+&nbsp;&nbsp;&nbsp;<a href="#select_mode">select_mode</a>: EXPLICIT;
+&nbsp;&nbsp;&nbsp;// For editable textblock parts: where to draw the (blinking) cursor
+&nbsp;&nbsp;&nbsp;<a href="#cursor_mode">cursor_mode</a>: UNDER;
+&nbsp;&nbsp;&nbsp;// For editable textblock parts: allow multiple lines
+&nbsp;&nbsp;&nbsp;<a href="#multiline">multiline</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// For textblock parts: accessibility features are used
+&nbsp;&nbsp;&nbsp;<a href="#access">access</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// No-one uses that
+&nbsp;&nbsp;&nbsp;<a href="#pointer_mode">pointer_mode</a>: AUTOGRAB;
+&nbsp;&nbsp;&nbsp;<a href="#use_alternate_font_metrics">use_alternate_font_metrics</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// Remove the given program; useful when it was inherited
+&nbsp;&nbsp;&nbsp;<a href="#program_remove">program_remove</a>: &quot;programname&quot;;
+&nbsp;&nbsp;&nbsp;// Remove the given part; useful when it was inherited
+&nbsp;&nbsp;&nbsp;<a href="#part_remove">part_remove</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// Insert the current part below the given part, as if it were declared before
+&nbsp;&nbsp;&nbsp;<a href="#insert_before">insert_before</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// Insert the current part above the given part, as if it were declared after
+&nbsp;&nbsp;&nbsp;<a href="#insert_after">insert_after</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// Define a new part inside this one
+&nbsp;&nbsp;&nbsp;<a href="#part_part">part</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;part definition&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#dragable">draggable</a>
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Confine the current part to the given part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_confine">confine</a>: &quot;another part&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Only start drag when it has moved enough to be outside the given part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_threshold">threshold</a>: &quot;another part&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Forward the drag events to the given part instead of handling them
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_events">events</a>: &quot;another draggable part&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable the horizontal drag of the part with step_size steps or with steps_count steps
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_x">x</a>: 0/1 &lt;step_size&gt; &lt;steps_count&gt;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Same as x but vertical
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_y">y</a>: 1 0 100;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// For box or table parts
+&nbsp;&nbsp;&nbsp;<a href="#box_table">box/table</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// List of items
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items">items</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item">item</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Define the item type, can only be GROUP
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_type">type</a>: GROUP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Name the item
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_name">name</a>: &quot;name&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the source for this item, or its content
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_source">source</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the minimum horizontal and vertical item sizes (-1 for expand)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_min">min</a>: -1 -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the maximum horizontal and vertical item sizes (-1 for ignore)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_max">max</a>: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the item padding in pixels
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_padding">padding</a>: 2 2 2 2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_spread">spread</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the item alignment
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_align">align</a>: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set a weight hint in the box for the given object
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_weight">weight</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the aspect ratio hint
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_aspect">aspect</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_aspect_mode">aspect_mode</a>: BOTH;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the number of columns and rows the item takes
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_span">span</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#description">description</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Inherit another description
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_inherit">inherit</a>: &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Name the current description
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_state">state</a>: &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Use another part as content of the current proxy part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This description only works in the proxy part and the current part mirrors the rendering content of the source part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_source">source</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Make the part (in)visible (invisible parts emit no signals)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_visible">visible</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Emit a signal when the given dimension becomes zero or stops being zero
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_limit">limit</a>: WIDTH;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the horizontal and vertical alignment of the part inside its parent
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_align">align</a>: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set that the part does not change size
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_fixed">fixed</a>: 0/1 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the minimum size for the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_min">min</a>: 200 200;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Forcibly multiply the minimum sizes by the given factors
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_minmul">minmul</a>: 1.2 1.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the maximum size for the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_max">max</a>: 400 400;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Make vertical and horizontal resizes happen in steps
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_step">step</a>: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Force the aspect ratio to be kept between min and max between resizes
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_aspect">aspect</a>: 0.8 1.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the dimension to which the aspect ratio applies
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_aspect_preference">aspect_preference</a>: BOTH;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Use the given color class which can be used to factor font colors
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color_class">color_class</a>: &quot;colorclassname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the text color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color">color</a>: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the color of the text shadow
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color2">color2</a>: 0 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the color of the text outline
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color3">color3</a>: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Define the positions of the top-left (rel1) and bottom-right (rel2) corners
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2">rel1/rel2</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Make relative and offset use the given part for their positioning
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to">to</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Position the corner relative to the part given through to (0.0 being axis beginning, 1.0 being its end)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_relative">relative</a>: 0.1 0.1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Add an absolute offset (in pixels) along each axis
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_offset">offset</a>: 10 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Same as to but only for the X axis
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to_x">to_x</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Same as to but only for the Y axis
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to_y">to_y</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Settings specific to parts of the image type
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image">image</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the name (not path) of the regular image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_normal">normal</a>: &quot;imagename&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the image to use while transitioning to the normal image; use several times to create animations
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_tween">tween</a>: &quot;imagename2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the number of pixels that make up each border of the image, and are not resized with the image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border">border</a>: 4 4 4 4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Hide, strip from its alpha, or show (default) the non-border part of the image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_middle">middle</a>: DEFAULT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border_scale_by">border_scale_by</a>: 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set whether to scale the border
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border_scale">border_scale</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_scale_hint">scale_hint</a>: STATIC;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set how the image is going to fill its part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill">fill</a>: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set whether to smooth the image when scaling it
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_smooth">smooth</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_spread">spread</a>: ??;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set whether to scale or tile to fit when resizing the image is needed
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_type">type</a>: SCALE/TILE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Only display the part of the image that is below and to the right of the given point
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin">origin</a> 
+&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;// Specify top-left point as relative coordinates
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin_relative">relative</a>: 0.1 0.1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Specify top-left point as a pixel offset
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin_offset">offset</a>: 10 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Specify bottom-right point as relative coordinates
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size">size</a> 
+&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;// Specify bottom-right point as relative coordinates
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size_relative">relative</a>: 0.1 0.1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Specify bottom-right point as a pixel offset
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size_offset">offset</a>: 10 10;
+&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;// Settings specific to parts of the text and textblock type 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text">text</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the part text
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text">text</a>: &quot;some text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the text font
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_font">font</a>: &quot;Tizen Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the text size
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_size">size</a>: 14;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the text&#39;s class which can be used to factor font and font-size settings
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text_class">text_class</a>: &quot;classname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the styles defined in stylename
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_style">style</a>: &quot;stylename&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// For textblocks in the password mode, replace characters to hide with this string
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_repch">repch</a>: &quot;*&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the min and max font sizes allowed when resizing (default is 0 0, or unrestricted)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_size_range">size_range</a>: 6 18;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Increase the font size as much as possible while still remaining in the container for both axes
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_fit">fit</a>: 0/1 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Make the min size of the container equal to the min size of the current text (0 0 by default)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_min">min</a>: 0/1 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Make the max size of the container equal to the max size of the current text (0 0 by default)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_max">max</a>: 0/1 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the vertical and horizontal alignments of the text
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_align">align</a>: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Reuse the text of another part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text_source">text_source</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// When the text is too long to fit, set the relative position at which to cut the text and put an ellipsis (&quot;...&quot;)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_ellipsis">ellipsis</a>: 0.9;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Settings specific to parts of the box type
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box">box</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set how children are arranged in the box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_layout">layout</a>: horizontal_homogeneous;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the vertical and horizontal alignments of the box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_align">align</a>: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the padding between items of the box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_padding">padding</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Make the box&#39;s min size the min size of its elements (make it shrinkable as much as its items)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_min">min</a>: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table">table</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Make items homogeneous
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_homogeneous">homogeneous</a>: NONE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the vertical and horizontal alignments of the table
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_align">align</a>: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the padding between items of the table
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_padding">padding</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Make the table&#39;s min size the min size of its elements (make it shrinkable as much as its items)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_min">min</a>: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map">map</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective">perspective</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_light">light</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_on">on</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_smooth">smooth</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_alpha">alpha</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_backface_cull">backface_cull</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_on">perspective_on</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_color">color</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation">rotation</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_center">center</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_x">x</a>: 45;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_y">y</a>: 120;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_z">z</a>: 90;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective">perspective</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_zplane">zplane</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_focal">focal</a>: 20;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Simpler syntax to create transitions to the current part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_link">link</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_link_base">base</a>: &quot;edje,signal&quot; &quot;edje&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">part</span> block is used to represent the most basic design elements of the theme, for example, a part can represent a line in a border or a label on a button.</p>
+
+<ul>
+<li id="inherit"><span style="font-family: Courier New,Courier,monospace;">inherit [part name]</span>
+<p>Copies all properties except part name from the referenced part into the current part. All existing properties, except part name, are overwritten.</p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li id="program_remove"><span style="font-family: Courier New,Courier,monospace;">program_remove [program name] (program name) (program name) ...</span>
+<p>Removes the listed programs from an inherited group. Removing non-existing programs is not allowed.</p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">This breaks program sequences if a program in the middle of the sequence is removed.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li id="part_remove"><span style="font-family: Courier New,Courier,monospace;">part_remove [part name] (part name) (part name) ...</span>
+<p>Removes the listed parts from an inherited group. Removing non-existing parts is not allowed.</p>
+</li>
+
+<li id="part_name"><span style="font-family: Courier New,Courier,monospace;">name [part name]</span>
+<p>Sets the part name is used as a reference in the theme&#39;s relative positioning system, by programs and in some cases by the application. The part name must be unique within the group.</p>
+</li>
+
+<li id="type"><span style="font-family: Courier New,Courier,monospace;">type [TYPE]</span>
+<p>Sets the type (<span style="font-family: Courier New,Courier,monospace;">IMAGE</span> by default). The valid types are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">RECT</span>: Rectangle object in the screen</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TEXT</span>: Simple text</li>
+<li><span style="font-family: Courier New,Courier,monospace;">IMAGE</span>: Image area</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>: Area where you can add an object</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span>: Complex text with, for example, multiple lines or mark-up elements</li>
+<li><span style="font-family: Courier New,Courier,monospace;">GROUP</span>: Part which can include other groups in the same group</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOX</span>: Container object as a container. It has a row or a column.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: Container object as a container. It has a row and column.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">PROXY</span>: Clone of another part in the same group. It shares the memory of the source part.</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">SPACER</span>: Rectangle object, but invisible. Recommended for padding, because it does not allocate any memory.</li>
+
+</ul>
+</li>
+
+<li id="part_part"><span style="font-family: Courier New,Courier,monospace;">part [part declaration]</span>
+<p>Sets a nested part that adds hierarchy to Edje. A nested part inherits its location relative to the parent part. To declare a nested part, create a new part within the current part declaration. Define the parent part name before adding nested parts.</p>
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;parent_rect&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;description {}
+&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;nested_rect&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li id="insert_before"><span style="font-family: Courier New,Courier,monospace;">insert_before [another part&#39;s name]</span>
+<p>Sets the part&#39;s name which this part is inserted before. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer to more than one part name by <span style="font-family: Courier New,Courier,monospace;">insert_before</span>.</p>
+</li>
+
+<li id="insert_after"><span style="font-family: Courier New,Courier,monospace;">insert_after [another part&#39;s name]</span>
+<p>Sets the part&#39;s name which this part is inserted after. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer to more than one part name by <span style="font-family: Courier New,Courier,monospace;">insert_after</span>.</p>
+</li>
+
+<li id="mouse_events"><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span>
+<p>Determines whether the part emits signals, although it is named <span style="font-family: Courier New,Courier,monospace;">mouse_events</span>. Disabling (0) prevents the part from emitting a signal. The default value is 1, or the value set to <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> at the group level.</p>
+</li>
+
+<li id="repeat_events"><span style="font-family: Courier New,Courier,monospace;">repeat_events [1 or 0]</span>
+<p>Determines whether a part echoes a mouse event to other parts below the pointer (1). The default value is 0.</p>
+</li>
+
+<li id="ignore_flags"><span style="font-family: Courier New,Courier,monospace;">ignore_flags [FLAG] ...</span>
+<p>Determines whether events with the given flags are ignored, or do not emit signals to the parts. Multiple flags must be separated by spaces, the effect is ignoring all events with one of the flags specified. Possible flags are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: Event is handled properly (default value)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ON_HOLD</span>: Event is not handled or passed in this part</li>
+
+</ul>
+</li>
+
+<li  id="scale"><span style="font-family: Courier New,Courier,monospace;">scale [1 or 0]</span>
+<p>Determines whether the part scales its size with an Edje scaling factor. This is used to scale properties, such as font size or min/max size of the part, and it can also be used to scale based on DPI of the target device. The reason to be selective is that some parts are scaled well, others are not, so choose what works best. By default the scaling is off (0) and the default scale factor is 1.0, which means no scaling.</p>
+</li>
+
+<li id="pointer_mode"><span style="font-family: Courier New,Courier,monospace;">pointer_mode [MODE]</span>
+<p>Sets the mouse pointer behavior for a given part. The default value is <span style="font-family: Courier New,Courier,monospace;">AUTOGRAB</span>. The available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">AUTOGRAB</span>: When the part is clicked and the button remains pressed, the part is the source of all future mouse signals emitted, even outside the object, until the button is released</li>
+<li><span style="font-family: Courier New,Courier,monospace;">NOGRAB</span>: Effect is limited to the part&#39;s container</li>
+</ul>
+</li>
+
+<li id="precise_is_inside"><span style="font-family: Courier New,Courier,monospace;">precise_is_inside [1 or 0]</span>
+<p>Enables precise point collision detection for the part, which is more resource-intensive. This setting is disabled by default.</p>
+</li>
+
+<li id="use_alternate_font_metrics"><span style="font-family: Courier New,Courier,monospace;">use_alternate_font_metrics [1 or 0]</span>
+<p>Determines whether Edje uses different size measurement functions. This setting only affects text and textblock parts, and is disabled by default.</p>
+</li>
+
+<li id="clip_to"><span style="font-family: Courier New,Courier,monospace;">clip_to [another part&#39;s name]</span>
+<p>Renders only the area of the part that coincides with another part&#39;s container. Overflowing content is not displayed. Note that the part being clipped to can only be a rectangle part.</p>
+</li>
+
+<li id="source"><span style="font-family: Courier New,Courier,monospace;">source [another group&#39;s name]</span>
+<p>Swallows the specified group into the part&#39;s container if the source is a group. If the source is a textblock, it is used for the group to be loaded and used for selection display under the selected text. <span style="font-family: Courier New,Courier,monospace;">source2</span> is used on top of the selected text, if <span style="font-family: Courier New,Courier,monospace;">source2</span> is specified.</p>
+<p>Only available to group or textblock parts.</p>
+</li>
+
+<li id="source2"><span style="font-family: Courier New,Courier,monospace;">source2 [another group&#39;s name]</span>
+<p>Used for the group to be loaded and used for selection display over the selected text. <span style="font-family: Courier New,Courier,monospace;">source</span> is used under the selected text, if <span style="font-family: Courier New,Courier,monospace;">source</span> is specified.</p>
+<p>Only available to textblock parts.</p>
+</li>
+
+<li id="source3"><span style="font-family: Courier New,Courier,monospace;">source3 [another group&#39;s name]</span>
+<p>Used for the group to be loaded and used for cursor display under the cursor position. <span style="font-family: Courier New,Courier,monospace;">source4</span> is used over the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source4</span> is specified.</p>
+<p>Only available to textblock parts.</p>
+</li>
+
+<li id="source4"><span style="font-family: Courier New,Courier,monospace;">source4 [another group&#39;s name]</span>
+<p>Used for the group to be loaded and used for cursor display over the cursor position. <span style="font-family: Courier New,Courier,monospace;">source3</span> is used under the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source3</span> is specified.</p>
+<p>Only available to textblock parts.</p>
+</li>
+
+<li id="source5"><span style="font-family: Courier New,Courier,monospace;">source5 [another group&#39;s name]</span>
+<p>Used for the group to be loaded and used for anchors display under the anchor position. <span style="font-family: Courier New,Courier,monospace;">source6</span> is used over the anchor text, if <span style="font-family: Courier New,Courier,monospace;">source6</span> is specified.</p>
+<p>Only available to textblock parts.</p>
+</li>
+
+<li id="source6"><span style="font-family: Courier New,Courier,monospace;">source6 [another group&#39;s name]</span>
+<p>Used for the group to be loaded and used for anchor display over the anchor position. <span style="font-family: Courier New,Courier,monospace;">source5</span> is used under the anchor text, if <span style="font-family: Courier New,Courier,monospace;">source5</span> is specified.</p>
+<p>Only available to textblock parts.</p>
+</li>
+
+<li id="effect"><span style="font-family: Courier New,Courier,monospace;">effect [effect]</span> (shadow direction)
+<p>Applies the selected outline, shadow, or glow effect to a textblock. Note that this effect only works for the textblock. The available effects are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOFT_OUTLINE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOFT_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SOFT_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">FAR_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">FAR_SOFT_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">GLOW</span></li>
+</ul>
+
+<p>The available shadow direction definitions are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_RIGHT</span> (default)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_LEFT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">LEFT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TOP_LEFT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TOP</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TOP_RIGHT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">RIGHT</span></li>
+</ul>
+</li>
+
+<li id="entry_mode"><span style="font-family: Courier New,Courier,monospace;">entry_mode [mode]</span>
+<p>Sets the edit mode for a textblock part. The available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: Textblock is non-editable</li>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span>: Textblock is non-editable, but selectable</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EDITABLE</span>: Textblock is editable</li>
+<li><span style="font-family: Courier New,Courier,monospace;">PASSWORD</span>: Textblock is editable if the Edje object has the keyboard focus and the part has the Edje focus (or selectable always regardless of focus). In case of the password mode, the textblock is not selectable and all text characters are replaced with * characters, but they remain editable and pastable.</li>
+</ul>
+</li>
+
+<li id="select_mode"><span style="font-family: Courier New,Courier,monospace;">select_mode [mode]</span>
+<p>Sets the selection mode for a textblock part. The available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">DEFAULT</span>: Selection mode is what you would expect on any desktop. Press mouse, drag, and release to end.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EXPLICIT</span>: Mode requires the application controlling the Edje object to explicitly begin and end selection modes, and the selection itself is draggable at both ends</li>
+</ul>
+</li>
+
+<li id="cursor_mode"><span style="font-family: Courier New,Courier,monospace;">cursor_mode [mode]</span>
+<p>Sets the cursor mode for a textblock part. The available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">UNDER</span>: Cursor draws below the character pointed at. This is the default setting.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BEFORE</span>: Cursor is drawn as a vertical line before the current character, just like many other GUI toolkits handle it</li>
+</ul>
+</li>
+
+<li id="multiline"><span style="font-family: Courier New,Courier,monospace;">multiline [1 or 0]</span>
+<p>Enables multiple lines for editing in an editable a textblock.</p>
+</li>
+
+<li id="access"><span style="font-family: Courier New,Courier,monospace;">access [1 or 0]</span>
+<p>Determines whether the part uses the accessibility feature (1). The default value is 0.</p>
+</li>
+<li id="dragable" name="dragable"><span style="font-family: Courier New,Courier,monospace;">draggable</span> block
+
+<pre class="prettyprint">
+draggable 
+{
+&nbsp;&nbsp;&nbsp;confine: &quot;another part&quot;;
+&nbsp;&nbsp;&nbsp;threshold: &quot;another part&quot;;
+&nbsp;&nbsp;&nbsp;events:  &quot;another draggable part&quot;;
+&nbsp;&nbsp;&nbsp;x: 0 0 0;
+&nbsp;&nbsp;&nbsp;y: 0 0 0;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">draggable</span> block enables the part to be dragged around the interface. Do not confuse this feature with external drag and drop. By default, Edje (and most applications) attempts to use the smallest possible size for a draggable part. If the <span style="font-family: Courier New,Courier,monospace;">min</span> property is not set in the description, the part is (most likely) set to 0px width and 0px height, thus invisible.</p>
+
+<ul>
+
+<li id="dragable_x"><span style="font-family: Courier New,Courier,monospace;">x [enable/disable] [step] [count]</span>
+<p>Sets up dragging events for the X axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits the movement to values divisible by it, causing the part to jump from position to position. If the step is set to 0, it is calculated as the width of the <span style="font-family: Courier New,Courier,monospace;">confine</span> part divided by count.</p>
+</li>
+
+<li id="dragable_y"><span style="font-family: Courier New,Courier,monospace;">y [enable/disable] [step] [count]</span>
+<p>Sets up dragging events for the Y axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits the movement to values divisible by it, causing the part to jump from position to position. If the step is set to 0, it is calculated as the height of the <span style="font-family: Courier New,Courier,monospace;">confine</span> part divided by count.</p>
+</li>
+
+<li id="dragable_confine"><span style="font-family: Courier New,Courier,monospace;">confine [another part&#39;s name]</span>
+<p>Limits the movement of the dragged part to another part&#39;s container. Set a min size for the part, or the dragged object does not show up.</p>
+</li>
+
+<li id="dragable_threshold"><span style="font-family: Courier New,Courier,monospace;">threshold [another part&#39;s name]</span>
+<p>Allows (when set) the movement of the dragged part start only when it gets moved outside the threshold part.</p>
+</li>
+
+<li id="dragable_events"><span style="font-family: Courier New,Courier,monospace;">events [another draggable part&#39;s name]</span>
+<p>Causes the part to forward the drag events to another part, thus ignoring the drag events for itself.</p>
+</li>
+
+</ul>
+</li>
+<li id="box_table" name="box_table"><span style="font-family: Courier New,Courier,monospace;">box</span> or <span style="font-family: Courier New,Courier,monospace;">table</span> block
+<ul>
+<li id="box_table_items" name="box_table_items"><span style="font-family: Courier New,Courier,monospace;">box.items</span> or <span style="font-family: Courier New,Courier,monospace;">table.items</span> block
+
+<pre class="prettyprint">
+box/table 
+{
+&nbsp;&nbsp;&nbsp;items 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GROUP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;some source&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: -1 -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 1 1 2 2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GROUP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;some other source&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;some name&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>On a box part, the <span style="font-family: Courier New,Courier,monospace;">items</span> block is used to set other groups as elements of the box. These elements can be mixed with external objects set by the application through the <span style="font-family: Courier New,Courier,monospace;">edje_object_part_box*()</span> functions.</p>
+<ul>
+<li id="box_table_items_item" name="box_table_items_item"><span style="font-family: Courier New,Courier,monospace;">box.items.item</span> or <span style="font-family: Courier New,Courier,monospace;">table.items.item</span> block
+<p>The <span style="font-family: Courier New,Courier,monospace;">item</span> block defines an element within the box or table.</p>
+<ul>
+
+<li id="box_table_items_item_type"><span style="font-family: Courier New,Courier,monospace;">type [item type]</span>
+<p>Sets the type of the object this item holds. The supported type is:</p>
+	<ul>
+	<li><span style="font-family: Courier New,Courier,monospace;">GROUP</span> (default)</li>
+	</ul>
+</li>
+
+<li id="box_table_items_item_name"><span style="font-family: Courier New,Courier,monospace;">name [name for the object]</span>
+<p>Sets the name of the object using the <span style="font-family: Courier New,Courier,monospace;">evas_object_name_set()</span> function.</p>
+</li>
+
+<li id="box_table_items_item_source"><span style="font-family: Courier New,Courier,monospace;">source [another group&#39;s name]</span>
+<p>Sets the group this object is made of.</p>
+</li>
+
+<li id="box_table_items_item_min"><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span>
+<p>Sets the minimum size hints for this object. </p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The minimum size hint must be -1 to get the expand behavior.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li id="box_table_items_item_spread"><span style="font-family: Courier New,Courier,monospace;">spread [width] [height]</span>
+<p>Replicates the item in a rectangle of size (width x height) box starting from the defined position of this item. The default value is 1 1;.</p>
+</li>
+
+<li id="box_table_items_item_prefer"><span style="font-family: Courier New,Courier,monospace;">prefer [width] [height]</span>
+<p>Sets the preferred size hints for this object.</p>
+</li>
+
+<li id="box_table_items_item_max"><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span>
+<p>Sets the maximum size hints for this object.</p>
+</li>
+
+<li id="box_table_items_item_padding"><span style="font-family: Courier New,Courier,monospace;">padding [left] [right] [top] [bottom]</span>
+<p>Sets the padding hints for this object.</p>
+</li>
+
+<li id="box_table_items_item_align"><span style="font-family: Courier New,Courier,monospace;">align [x] [y]</span>
+<p>Sets the alignment hints for this object.</p>
+</li>
+
+<li id="box_table_items_item_weight"><span style="font-family: Courier New,Courier,monospace;">weight [x] [y]</span>
+<p>Sets the weight hints for this object.</p>
+</li>
+
+<li id="box_table_items_item_aspect"><span style="font-family: Courier New,Courier,monospace;">aspect [w] [h]</span>
+<p>Sets the aspect width and height hints for this object.</p>
+</li>
+
+<li id="box_table_items_item_aspect_mode"><span style="font-family: Courier New,Courier,monospace;">aspect_mode [mode]</span>
+<p>Sets the aspect control hints for this object. The available hints are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">NEITHER</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+</ul>
+</li>
+
+<li id="box_table_items_item_options"><span style="font-family: Courier New,Courier,monospace;">options [extra options]</span>
+<p>Sets extra options for the object.</p>
+</li>
+
+<li id="box_table_items_item_position"><span style="font-family: Courier New,Courier,monospace;">position [col] [row]</span>
+<p>Sets the position this item has in the table. This is required for the table type parts only.</p>
+</li>
+
+<li id="box_table_items_item_span"><span style="font-family: Courier New,Courier,monospace;">span [col] [row]</span>
+<p>Sets how many columns and rows this item uses. The default value is 1 1.</p>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+<li id="description" name="description"><span style="font-family: Courier New,Courier,monospace;">description</span> block
+
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;inherit: &quot;another_description&quot; INDEX;
+&nbsp;&nbsp;&nbsp;state: &quot;description_name&quot; INDEX;
+&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;min: 0 0;
+&nbsp;&nbsp;&nbsp;max: -1 -1;
+&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;fixed: 0 0;
+&nbsp;&nbsp;&nbsp;step: 0 0;
+&nbsp;&nbsp;&nbsp;aspect: 1 1;
+
+&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">description</span> block is used to define the style and layout properties of a part in a given state. Every part can have one or more description blocks.</p>
+
+<ul>
+
+<li id="description_inherit"><span style="font-family: Courier New,Courier,monospace;">inherit [another description&#39;s name] [another description&#39;s index]</span>
+<p>Sets the description from which all the properties are inherited. The properties defined in this part override the inherited properties, reducing the amount of necessary code for simple state changes. Note that inheritance in Edje is single level only.</p>
+</li>
+
+<li id="description_source"><span style="font-family: Courier New,Courier,monospace;">source [another part&#39;s name]</span>
+<p>Causes the part to use another part&#39;s content as the content of this part. This works only with a proxy part.</p>
+</li>
+
+<li id="description_state"><span style="font-family: Courier New,Courier,monospace;">state [name for the description] [index]</span>
+<p>Sets the name used to identify a description inside a given part. Multiple descriptions are used to declare different states of the same part, like <span style="font-family: Courier New,Courier,monospace;">clicked</span> or <span style="font-family: Courier New,Courier,monospace;">invisible</span>. All state declarations are also coupled with an index number between 0.0 and 1.0. All parts must have at least one description named <span style="font-family: Courier New,Courier,monospace;">default 0.0</span>.</p>
+</li>
+
+<li id="description_visible"><span style="font-family: Courier New,Courier,monospace;">visible [0 or 1]</span>
+<p>Determines whether a part is visible (1). Non-visible parts do not emit signals. The default value is 1.</p>
+</li>
+
+<li id="description_limit"><span style="font-family: Courier New,Courier,monospace;">limit [mode]</span>
+<p>Emits a signal when the part size changes from zero or to zero (<span style="font-family: Courier New,Courier,monospace;">limit,width,over</span>, <span style="font-family: Courier New,Courier,monospace;">limit,width,zero</span>). By default, no signal is emitted. The valid values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">WIDTH</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">HEIGHT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+</ul>
+</li>
+
+<li id="description_align"><span style="font-family: Courier New,Courier,monospace;">align [X axis] [Y axis]</span>
+<p>When the displayed object&#39;s size is smaller or bigger than its container, this property moves it relatively along both axes inside its container. 0.0 means left/top edges of the object touching container&#39;s respective ones, and 1.0 stands for right/bottom edges of the object (on horizontal/vertical axis, respectively). The default value is <span style="font-family: Courier New,Courier,monospace;">0.5 0.5</span>. For a more detailed explanation, see <a href="edc_positioning_n.htm#align_size_hint">Align size hint</a>.</p>
+</li>
+
+<li id="description_fixed"><span style="font-family: Courier New,Courier,monospace;">fixed [width, 0 or 1] [height, 0 or 1]</span>
+<p>Sets the minimum size calculation. See the <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_calc()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_restricted_calc()</span> functions of the Edje Object Geometry API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Geometry__Group.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Geometry__Group.html">wearable</a> applications). The value tells the min size calculation routine where this part does not change size in width or height (1 for it does not, 0 for it does), so the routine does not try to expand or contract the part.</p>
+</li>
+
+<li id="description_min"><span style="font-family: Courier New,Courier,monospace;">min [width] [height] or SOURCE</span>
+<p>Sets the minimum size of the state. When the property is set to <span style="font-family: Courier New,Courier,monospace;">SOURCE</span>, it looks at the original image size and enforces its minimal size to match at least the original one. The part must be an <span style="font-family: Courier New,Courier,monospace;">image</span> or a <span style="font-family: Courier New,Courier,monospace;">group</span> part.</p>
+</li>
+
+<li id="description_minmul"><span style="font-family: Courier New,Courier,monospace;">minmul [width multiplier] [height multiplier]</span>
+<p>Sets the multiplier forcibly applied to whatever minimum size is only during minimum size calculation.</p>
+</li>
+
+<li id="description_max"><span style="font-family: Courier New,Courier,monospace;">max [width] [height] or SOURCE</span>
+<p>Sets the maximum size of the state. A size of -1.0 means that it is ignored in one direction. When the property is set to <span style="font-family: Courier New,Courier,monospace;">SOURCE</span>, Edje enforces the part to be not more than the original image size. The part must be an <span style="font-family: Courier New,Courier,monospace;">image</span> part.</p>
+</li>
+
+<li id="description_step"><span style="font-family: Courier New,Courier,monospace;">step [width] [height]</span>
+<p>Restricts resizing of each dimension to values divisible by its value. This causes the part to jump from value to value while resizing. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>, which disables stepping.</p>
+</li>
+
+<li id="description_aspect"><span style="font-family: Courier New,Courier,monospace;">aspect [min] [max]</span>
+<p>Forces the width to height ratio to be kept between the minimum and maximum set. For example, <span style="font-family: Courier New,Courier,monospace;">1.0 1.0</span> increases the width a pixel for every pixel added to height. The default value is <span style="font-family: Courier New,Courier,monospace;">0.0 0.0</span>, which disables aspect. For a more detailed explanation, see <a href="edc_positioning_n.htm#min_size_hint">Minimum size hint</a>. Normally the width and height can be resized to any values independently.</p>
+</li>
+
+<li id="description_aspect_preference"><span style="font-family: Courier New,Courier,monospace;">aspect_preference [DIMENSION]</span>
+<p>Sets the dimensions to which the <span style="font-family: Courier New,Courier,monospace;">aspect</span> property applies. The available options are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOURCE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+</ul>
+<p>For a more detailed explanation, see <a href="edc_positioning_n.htm#min_size_hint">Minimum size hint</a>.</p>
+</li>
+
+<li id="description_color_class"><span style="font-family: Courier New,Courier,monospace;">color_class [color class name]</span>
+<p>Sets the part to use the color values of the named <span style="font-family: Courier New,Courier,monospace;">color_class</span>. These values can be overridden by the <span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">color2</span>, and <span style="font-family: Courier New,Courier,monospace;">color3</span> properties.</p>
+</li>
+
+<li id="description_color"><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span>
+<p>Sets the main color to the specified values (between 0 and 255).</p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The textblock part is not affected by the color description. Set the color in the text style.</td>
+</tr>
+</tbody>
+</table> 
+
+</li>
+
+<li id="description_color2"><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span>
+<p>Sets the text shadow color to the specified values (0 to 255).</p>
+</li>
+
+<li id="description_color3"><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span>
+<p>Sets the text outline color to the specified values (0 to 255).</p>
+</li>
+
+<li id="description_rel1_2" name="description_rel1_2"><span style="font-family: Courier New,Courier,monospace;">description.rel1</span> or <span style="font-family: Courier New,Courier,monospace;">description.rel2</span> block
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:     0   0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:    -1  -1;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks are used to define the position of each corner of the part&#39;s container. <span style="font-family: Courier New,Courier,monospace;">rel1</span> refers to the left-top corner and <span style="font-family: Courier New,Courier,monospace;">rel2</span> to the right-down corner.</p>
+
+<ul>
+
+<li id="description_rel1_2_relative"><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span>
+<p>Moves the corner to a relative position inside the container of the relative <span style="font-family: Courier New,Courier,monospace;">to</span> part. Values from 0.0 (0%, beginning) to 1.0 (100%, end) on each axis.</p>
+</li>
+
+<li id="description_rel1_2_offset"><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span>
+<p>Affects the corner position a fixed number of pixels along each axis.</p>
+</li>
+
+<li id="description_rel1_2_to"><span style="font-family: Courier New,Courier,monospace;">to [another part&#39;s name]</span>
+<p>Positions the corner relative to another part&#39;s container. Setting to <span style="font-family: Courier New,Courier,monospace;">&quot;&quot;</span> resets this value for inherited parts.</p>
+</li>
+
+<li id="description_rel1_2_to_x"><span style="font-family: Courier New,Courier,monospace;">to_x [another part&#39;s name]</span>
+<p>Positions the corner relative to the X axis of another part&#39;s container. This affects the first parameter of the <span style="font-family: Courier New,Courier,monospace;">relative</span> property. Setting to <span style="font-family: Courier New,Courier,monospace;">&quot;&quot;</span> resets this value for inherited parts.</p>
+</li>
+
+<li id="description_rel1_2_to_y"><span style="font-family: Courier New,Courier,monospace;">to_y [another part&#39;s name]</span>
+<p>Positions the corner relative to the Y axis of another part&#39;s container. This affects the second parameter of the <span style="font-family: Courier New,Courier,monospace;">relative</span> property. Setting to <span style="font-family: Courier New,Courier,monospace;">&quot;&quot;</span> resets this value for inherited parts.</p>
+</li>
+
+</ul>
+</li>
+<li id="description_image" name="description_image"><span style="font-family: Courier New,Courier,monospace;">description.image</span> block
+
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;filename.ext&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tween:  &quot;filename2.ext&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tween:  &quot;filenameN.ext&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:  left right top bottom;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle:  0/1/NONE/DEFAULT/SOLID;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace;">image</span> block defines the settings for an image used in a visual element.</p>
+<ul>
+
+<li id="description_image_normal"><span style="font-family: Courier New,Courier,monospace;">normal [image&#39;s filename]</span>
+<p>Sets the name of the image to be used as previously declared in the <span style="font-family: Courier New,Courier,monospace;">images</span> block. In an animation, this is the first and last image displayed. The file name is required in all image parts.</p>
+</li>
+
+<li id="description_image_tween"><span style="font-family: Courier New,Courier,monospace;">tween [image&#39;s filename]</span>
+<p>Sets the name of an image to be used in an animation loop. An <span style="font-family: Courier New,Courier,monospace;">image</span> block can have none, one, or multiple tween declarations. Images are displayed in the order they are listed, during the transition to the state they are declared in; the <span style="font-family: Courier New,Courier,monospace;">normal</span> image is the final state.</p>
+</li>
+
+<li id="description_image_border"><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span>
+<p>Sets the width (in pixels) of each side of the image displayed as a fixed size border, from the side inwards, preventing the corners from being changed on a resize.</p>
+</li>
+
+<li id="description_image_middle"><span style="font-family: Courier New,Courier,monospace;">middle [mode]</span>
+<p>If a border is set, this value tells Edje whether the rest of the image (not covered by the defined border) is displayed or assumed to be solid (without alpha). The default value is <span style="font-family: Courier New,Courier,monospace;">1/DEFAULT</span>. The available values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">1</span> or <span style="font-family: Courier New,Courier,monospace;">DEFAULT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOLID</span> (strip alpha from the image over the middle zone)</li>
+</ul>
+</li>
+
+<li id="description_image_border_scale_by"><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span>
+<p>If border scaling is enabled, normally the output border sizes scale accordingly. For example, if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always exactly 3 columns of output, or at scale 2.0 they are 6 columns, or 0.33 they merge into a single column. This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to make higher resolution outputs possible by always using the highest resolution artwork and then at runtime scaling it down. The value can be: 0.0 or bigger (0.0 or 1.0 to switch it off)</p>
+</li>
+
+<li id="description_image_border_scale"><span style="font-family: Courier New,Courier,monospace;">border_scale [0/1]</span>
+<p>Tells Edje whether the border is scaled by the object or global Edje scale factors.</p>
+</li>
+
+<li id="description_image_scale_hint"><span style="font-family: Courier New,Courier,monospace;">scale_hint [mode]</span>
+<p>Sets the Evas image scale hint letting the engine more effectively save cached copies of the scaled image, if it makes sense. The valid values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">DYNAMIC</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STATIC</span></li>
+</ul>
+</li>
+
+<li id="description_image_fill" name="description_image_fill"><span style="font-family: Courier New,Courier,monospace;">description.image.fill</span> block
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;fill 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SCALE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 0-1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">fill</span> block is an optional block that defines the way an <span style="font-family: Courier New,Courier,monospace;">image</span> part is going to be displayed inside its container. It can be used for tiling (repeating the image) or displaying only part of an image. For more information, see the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> function of the Image Object Functions API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas__Object__Image.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Image.html">wearable</a> applications).</p>
+
+<ul>
+
+<li id="description_image_fill_smooth"><span style="font-family: Courier New,Courier,monospace;">smooth [0 or 1]</span>
+<p>Determines whether the image is smoothed on scaling (1). The default value is 1.</p>
+</li>
+
+<li id="description_image_fill_spread"><span style="font-family: Courier New,Courier,monospace;">spread</span>
+</li>
+
+<li id="description_image_fill_type"><span style="font-family: Courier New,Courier,monospace;">type [fill type]</span>
+<p>Sets the image fill type. The <span style="font-family: Courier New,Courier,monospace;">min</span> part property must be set, it is the size of the tiled image. If the <span style="font-family: Courier New,Courier,monospace;">max</span> property is set, the tiled area has the size according to the <span style="font-family: Courier New,Courier,monospace;">max</span> value. The valid values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">SCALE</span>: Image is scaled according to the value of the <span style="font-family: Courier New,Courier,monospace;">relative</span> and <span style="font-family: Courier New,Courier,monospace;">offset</span> properties from the <span style="font-family: Courier New,Courier,monospace;">origin</span> and <span style="font-family: Courier New,Courier,monospace;">size</span> blocks. This is the default value.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TILE</span>: Image is tiled according to the value of the <span style="font-family: Courier New,Courier,monospace;">relative</span> and <span style="font-family: Courier New,Courier,monospace;">offset</span> properties from the <span style="font-family: Courier New,Courier,monospace;">origin</span> and <span style="font-family: Courier New,Courier,monospace;">size</span> blocks</li>
+</ul>
+</li>
+
+<li id="description_image_fill_origin" name="description_image_fill_origin"><span style="font-family: Courier New,Courier,monospace;">image.fill.origin</span> block
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;fill 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">origin</span> block is used to place the starting point inside the displayed element that is used to render the tile. By default, the origin is set at the element&#39;s left-top corner.</p>
+
+<ul>
+
+<li id="description_image_fill_origin_relative"><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span>
+<p>Sets the starting point relative to the displayed element&#39;s content.</p>
+</li>
+<li id="description_image_fill_origin_offset"><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span>
+<p>Affects the starting point a fixed number of pixels along each axis.</p>
+</li>
+
+</ul>
+</li>
+
+<li id="description_image_fill_size" name="description_image_fill_size"><span style="font-family: Courier New,Courier,monospace;">image.fill.size</span> block
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;fill 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -1 -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">size</span> block defines the tile size of the content that is displayed.</p>
+
+<ul>
+
+<li id="description_image_fill_size_relative"><span style="font-family: Courier New,Courier,monospace;">relative [width] [height]</span>
+<p>Takes a pair of decimal values that represent the percentage of the original size of the element. For example, <span style="font-family: Courier New,Courier,monospace;">0.5 0.5</span> represents half the size, while <span style="font-family: Courier New,Courier,monospace;">2.0 2.0</span> represents double. The default value is <span style="font-family: Courier New,Courier,monospace;">1.0 1.0</span>.</p>
+</li>
+<li id="description_image_fill_size_offset"><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span>
+<p>Affects the size of the tile a fixed number of pixels along each axis.</p>
+</li>
+
+</ul>
+</li>
+</ul>
+</li>
+</ul></li>
+
+<li id="description_text" name="description_text"><span style="font-family: Courier New,Courier,monospace;">description.text</span> block
+
+<pre class="prettyprint">
+text 
+{
+&nbsp;&nbsp;&nbsp;text: &quot;some string of text to display&quot;;
+&nbsp;&nbsp;&nbsp;font: &quot;font_name&quot;;
+&nbsp;&nbsp;&nbsp;size: SIZE;
+&nbsp;&nbsp;&nbsp;text_class: &quot;class_name&quot;;
+&nbsp;&nbsp;&nbsp;fit: horizontal vertical;
+&nbsp;&nbsp;&nbsp;min: horizontal vertical;
+&nbsp;&nbsp;&nbsp;max: horizontal vertical;
+&nbsp;&nbsp;&nbsp;align: X-axis Y-axis;
+&nbsp;&nbsp;&nbsp;source: &quot;part_name&quot;;
+&nbsp;&nbsp;&nbsp;text_source: &quot;text_part_name&quot;;
+&nbsp;&nbsp;&nbsp;style: &quot;stylename&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">text</span> block defines a text part element.</p>
+
+<ul>
+
+<li id="description_text_text"><span style="font-family: Courier New,Courier,monospace;">text [a string of text, or nothing]</span>
+<p>Sets the default content of a text part, normally the application is the one changing its value.</p>
+</li>
+
+<li id="description_text_text_class"><span style="font-family: Courier New,Courier,monospace;">text_class [text class name]</span>
+<p>Sets the name used by the application to alter the font family and size at runtime (similar to <span style="font-family: Courier New,Courier,monospace;">color_class</span>).</p>
+</li>
+
+<li id="description_text_font"><span style="font-family: Courier New,Courier,monospace;">font [font alias]</span>
+<p>Sets the font family to one of the aliases set up in the <span style="font-family: Courier New,Courier,monospace;">fonts</span> block. This can be overridden by the application settings.</p>
+</li>
+
+<li id="description_text_style"><span style="font-family: Courier New,Courier,monospace;">style [the style name]</span>
+<p>Causes the part to use the default style and tags defined in the <span style="font-family: Courier New,Courier,monospace;">style</span> block with the specified name.</p>
+</li>
+
+<li id="description_text_repch"><span style="font-family: Courier New,Courier,monospace;">repch [the replacement character string]</span>
+<p>In the password mode, this string is used to replace every character to hide the details of the entry. Normally * is used, but you can use any character you like.</p>
+</li>
+
+<li id="description_text_size"><span style="font-family: Courier New,Courier,monospace;">size [font size in points (pt)]</span>
+<p>Sets the default font size for the text part. This can be overridden by the application settings.</p>
+</li>
+
+<li id="description_text_size_range"><span style="font-family: Courier New,Courier,monospace;">size_range [font min size in points (pt)] [font max size in points (pt)]</span>
+<p>Sets the allowed font size for the text part. Setting min and max to 0 means that sizing is not restricted. This is also the default value.</p>
+</li>
+
+<li id="description_text_fit"><span style="font-family: Courier New,Courier,monospace;">fit [horizontal] [vertical]</span>
+<p>When any of the parameters is set to 1, Edje resizes the text for it to fit in its container. Both are disabled by default.</p>
+</li>
+
+<li id="description_text_min"><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span>
+<p>When any of the parameters is enabled (1), it forces the minimum size of the container to be equal to the minimum size of the text. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+</li>
+
+<li id="description_text_max"><span style="font-family: Courier New,Courier,monospace;">max [horizontal] [vertical]</span>
+<p>When any of the parameters is enabled (1), it forces the maximum size of the container to be equal to the maximum size of the text. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+</li>
+
+<li id="description_text_align"><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span>
+<p>Changes the position of the point of balance inside the container. The default value is <span style="font-family: Courier New,Courier,monospace;">0.5 0.5</span>.</p>
+</li>
+
+<li id="description_text_source"><span style="font-family: Courier New,Courier,monospace;">source [another TEXT part&#39;s name]</span>
+<p>Causes the part to use the text properties (like font and size) of another part and update them as they change.</p>
+</li>
+
+<li id="description_text_text_source"><span style="font-family: Courier New,Courier,monospace;">text_source [another TEXT part&#39;s name]</span>
+<p>Causes the part to display the text content of another part and update them as they change.</p>
+</li>
+
+<li id="description_text_ellipsis"><span style="font-family: Courier New,Courier,monospace;">ellipsis [point of balance]</span>
+<p>Balances the text in a relative point from 0.0 to 1.0. This point is the last section of the string to be cut out in case of a resize to a smaller size than the text itself. The default value is 0.0.</p>
+</li>
+
+</ul>
+</li>
+
+<li id="description_box" name="description_box"><span style="font-family: Courier New,Courier,monospace;">description.box</span> block
+
+<pre class="prettyprint">
+box 
+{
+&nbsp;&nbsp;&nbsp;layout: &quot;vertical&quot;;
+&nbsp;&nbsp;&nbsp;padding: 0 2;
+&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;min: 0 0;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">box</span> block can contain other objects and display them in different layouts, any of the predefined set, or a custom one, set by the application.</p>
+
+<ul>
+
+<li id="description_box_layout"><span style="font-family: Courier New,Courier,monospace;">layout [primary layout] (fallback layout)</span>
+<p>Sets the layout for the box:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">horizontal</span> (default)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">vertical</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">horizontal_homogeneous</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">vertical_homogeneous</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">horizontal_max</span> (homogeneous to the max sized child)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">vertical_max</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">horizontal_flow</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">vertical_flow</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">stack</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">some_other_custom_layout_set_by_the_application</span>
+<p>Set a custom layout as a fallback. For more information, see the <span style="font-family: Courier New,Courier,monospace;">edje_box_layout_register()</span> function in the Edje Box Part API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Part__Box.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Part__Box.html">wearable</a> applications). If an unregistered layout is used, it defaults to <span style="font-family: Courier New,Courier,monospace;">horizontal</span>.</p></li>
+
+</ul>
+</li>
+
+<li id="description_box_align"><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span>
+<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
+</li>
+
+<li id="description_box_padding"><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span>
+<p>Sets the space between cells in pixels. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+</li>
+
+<li id="description_box_min"><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span>
+<p>When any of the parameters is enabled (1), it forces the minimum size of the box to be equal to the minimum size of the items. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+</li>
+
+</ul>
+</li>
+
+<li id="description_table" name="description_table"><span style="font-family: Courier New,Courier,monospace;">description.table</span> block
+
+<pre class="prettyprint">
+table 
+{
+&nbsp;&nbsp;&nbsp;homogeneous: TABLE;
+&nbsp;&nbsp;&nbsp;padding: 0 2;
+&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;min: 0 0;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">table</span> block can contain other objects packed in multiple columns and rows, and each item can span across more than one column or row.</p>
+
+<ul>
+
+<li id="description_table_homogeneous"><span style="font-family: Courier New,Courier,monospace;">homogeneous [homogeneous mode]</span>
+<p>Sets the homogeneous mode for the table:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: Default</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: Available space is evenly divided between children (the space overflows onto other children if too little space is available)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ITEM</span>: Size of each item is the largest minimum size of all the items</li>
+</ul>
+</li>
+
+<li id="description_table_align"><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span>
+<p>Changes the position of the point of balance inside the container. The default value is <span style="font-family: Courier New,Courier,monospace;">0.5 0.5</span>.</p>
+</li>
+
+<li id="description_table_padding"><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span>
+<p>Sets the space between cells in pixels. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+</li>
+
+<li id="description_table_min"><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span>
+<p>When any of the parameters is enabled (1), it forces the minimum size of the table to be equal to the minimum size of the items. The default value is <span style="font-family: Courier New,Courier,monospace;">0 0</span>.</p>
+</li>
+
+</ul>
+</li>
+<li id="description_map" name="description_map"><span style="font-family: Courier New,Courier,monospace;">description.map</span> block
+
+<pre class="prettyprint">
+map 
+{
+&nbsp;&nbsp;&nbsp;perspective: &quot;name&quot;;
+&nbsp;&nbsp;&nbsp;light: &quot;name&quot;;
+&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;backface_cull: 1;
+&nbsp;&nbsp;&nbsp;alpha: 1;
+
+&nbsp;&nbsp;&nbsp;rotation 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<ul>
+
+<li id="description_map_perspective"><span style="font-family: Courier New,Courier,monospace;">perspective [another part&#39;s name]</span>
+<p>Sets the part that is used as the perspective point for giving a part a 3D look. The perspective point must have a perspective section that provides zplane and focal properties. The center of this part is used as the focal point, thus size, color, and visibility are not relevant, just the center point, zplane, and focal are used. This also implicitly enables perspective transforms.</p>
+</li>
+
+<li id="description_map_light"><span style="font-family: Courier New,Courier,monospace;">light [another part&#39;s name]</span>
+<p>Sets the part that is used as the light for calculating the brightness (based on how directly the part&#39;s surface is facing the light source point). Like the perspective point part, the center point is used and zplane is used for the z position (0 being the zero-plane where all 2D objects normally live) and positive values being further away into the distance. The light part <span style="font-family: Courier New,Courier,monospace;">color</span> property is used as the light color (alpha not used for light color). The <span style="font-family: Courier New,Courier,monospace;">color2</span> property is used for the ambient lighting when calculating brightness (alpha also not used).</p>
+</li>
+
+<li id="description_map_on"><span style="font-family: Courier New,Courier,monospace;">on [1 or 0]</span>
+<p>Enables mapping for the part. The default value is 0.</p>
+</li>
+
+<li id="description_map_smooth"><span style="font-family: Courier New,Courier,monospace;">smooth [1 or 0]</span>
+<p>Enables smooth map rendering. This can be linear interpolation, anisotropic filtering, or anything the engine decides is smooth. This is a best-effort hint and it may not produce precisely the same results in all engines and situations. The default value is 1.</p>
+</li>
+
+<li id="description_map_alpha"><span style="font-family: Courier New,Courier,monospace;">alpha [1 or 0]</span>
+<p>Enables the alpha channel when map rendering. The default value is 1.</p>
+</li>
+
+<li id="description_map_backface_cull"><span style="font-family: Courier New,Courier,monospace;">backface_cull [1 or 0]</span>
+<p>Enables backface culling (when the rotated part that normally faces the camera is facing away after being rotated). This means that the object is hidden when the backface is culled.</p>
+</li>
+
+<li id="description_map_perspective_on"><span style="font-family: Courier New,Courier,monospace;">perspective_on [1 or 0]</span>
+<p>Enables perspective when rotating even without a perspective point object. This uses a perspective set for the object itself or for the canvas as a whole as the global perspective with the <span style="font-family: Courier New,Courier,monospace;">edje_perspective_set()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_perspective_global_set()</span> functions of the Edje Perspective API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Perspective.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Perspective.html">wearable</a> applications).</p>
+</li>
+
+<li id="description_map_color"><span style="font-family: Courier New,Courier,monospace;">color [point] [red] [green] [blue] [alpha]</span>
+<p>Sets the color of a vertex in the map. The colors are linearly interpolated between vertex points through the map. The default color of a vertex in a map is white solid (255, 255, 255, 255), which means it has no affect on modifying the part pixels. Currently only 4 points are supported:</p>
+<ul>
+<li>0: Left-top point of a part</li>
+<li>1: Right-top point of a part</li> 
+<li>2: Left-bottom point of a part</li>
+<li>3: Right-bottom point of a part</li>
+</ul>
+</li>
+<li id="description_map_rotation" name="description_map_rotation"><span style="font-family: Courier New,Courier,monospace;">map.rotation</span> block
+
+<pre class="prettyprint">
+rotation 
+{
+&nbsp;&nbsp;&nbsp;center: &quot;name&quot;;
+&nbsp;&nbsp;&nbsp;x: 45.0;
+&nbsp;&nbsp;&nbsp;y: 45.0;
+&nbsp;&nbsp;&nbsp;z: 45.0;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">rotation</span> block rotates the part, optionally with the center on another part.</p>
+
+<ul>
+
+<li id="description_map_rotation_center"><span style="font-family: Courier New,Courier,monospace;">center [another part&#39;s name]</span>
+<p>Sets the part that is used as the center of rotation when rotating the part with this description. The part&#39;s center point is used as the rotation center when applying rotation around the X, Y and Z axes. If no center is given, the part&#39;s original center itself is used for the rotation center.</p>
+</li>
+
+<li id="description_map_rotation_x"><span style="font-family: Courier New,Courier,monospace;">x [X degrees]</span>
+<p>Sets the rotation around the X axis of the part considering the center set. The value is given in degrees.</p>
+</li>
+
+<li id="description_map_rotation_y"><span style="font-family: Courier New,Courier,monospace;">y [Y degrees]</span>
+<p>Sets the rotation around the Y axis of the part considering the center set. The value is given in degrees.</p>
+</li>
+
+<li id="description_map_rotation_z"><span style="font-family: Courier New,Courier,monospace;">z [Z degrees]</span>
+<p>Sets the rotation around the Z axis of the part considering the center set. The value is given in degrees.</p>
+</li>
+
+</ul>
+</li>
+<li id="description_map_perspective2" name="description_map_perspective2"><span style="font-family: Courier New,Courier,monospace;">map.perspective</span> block
+
+<pre class="prettyprint">
+perspective 
+{
+&nbsp;&nbsp;&nbsp;zplane: 0;
+&nbsp;&nbsp;&nbsp;focal: 1000;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">perspective</span> block adds focal and plane perspective to the part. Active if the <span style="font-family: Courier New,Courier,monospace;">perspective_on</span> property is <span style="font-family: Courier New,Courier,monospace;">true</span>. This must be provided, if the part is being used by another part as its perspective target.</p>
+
+<ul>
+
+<li id="description_map_perspective_zplane"><span style="font-family: Courier New,Courier,monospace;">zplane [unscaled Z value]</span>
+<p>Sets the Z value that is not scaled. Normally this is 0 as that is the Z distance.</p>
+</li>
+
+<li id="description_map_perspective_focal"><span style="font-family: Courier New,Courier,monospace;">focal [distance]</span>
+<p>Sets the distance from the focal Z plane (zplane) and the camera, for example, equating to focal length of the camera.</p>
+</li>
+
+</ul>
+</li>
+<li id="description_map_link" name="description_map_link"><span style="font-family: Courier New,Courier,monospace;">map.link</span> block
+
+<pre class="prettyprint">
+link 
+{
+&nbsp;&nbsp;&nbsp;base: &quot;edje,signal&quot; &quot;edje&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+&nbsp;&nbsp;&nbsp;in: 0.5 0.1;
+&nbsp;&nbsp;&nbsp;after: &quot;some_program&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">link</span> block can be used to create transitions to the enclosing part description state. The result of the above block is identical to creating a program with the following properties:</p>
+
+
+<pre class="prettyprint">
+action: STATE_SET &quot;default&quot;;
+signal: &quot;edje,signal&quot;;
+source: &quot;edje&quot;;
+</pre> 
+
+<ul>
+
+<li id="description_map_link_base"><span style="font-family: Courier New,Courier,monospace;">base [signal] [source]</span>
+<p>Sets the signal and source which triggers the transition to this state. The source parameter is optional, and it is filled with the current group&#39;s default value if it is not provided.</p>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+  
+<h2 id="program1" name="program1">Program Block</h2>
+
+<pre class="prettyprint">
+program
+{
+&nbsp;&nbsp;&nbsp;// Set the name of the program
+&nbsp;&nbsp;&nbsp;<a href="#program_name">name</a>: &quot;programname&quot;;
+&nbsp;&nbsp;&nbsp;// Set the signals which trigger the program
+&nbsp;&nbsp;&nbsp;<a href="#signal">signal</a>: &quot;signalname&quot;;
+&nbsp;&nbsp;&nbsp;// Filter incoming signals depending on the sender name
+&nbsp;&nbsp;&nbsp;<a href="#program_source">source</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// Filter incoming signals depending on the part&#39;s state
+&nbsp;&nbsp;&nbsp;<a href="#filter">filter</a>: &quot;partname&quot; &quot;statename&quot;;
+&nbsp;&nbsp;&nbsp;// Delay the program by X seconds plus a random time between 0 and Y
+&nbsp;&nbsp;&nbsp;<a href="#in">in</a>: 0.3 0.0;
+&nbsp;&nbsp;&nbsp;// Set the action to perform
+&nbsp;&nbsp;&nbsp;<a href="#action">action</a>: STATE_SET &quot;statename&quot; state_value;
+&nbsp;&nbsp;&nbsp;// If the action is STATE_SET, define a transition from the current to the target state
+&nbsp;&nbsp;&nbsp;<a href="#transition">transition</a>: LINEAR 0.5;
+&nbsp;&nbsp;&nbsp;// If the action is SIGNAL_EMIT, set the name of the part which receives the signal
+&nbsp;&nbsp;&nbsp;<a href="#target">target</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// Run another program after the current one is done
+&nbsp;&nbsp;&nbsp;<a href="#after">after</a>: &quot;programname&quot;;
+&nbsp;&nbsp;&nbsp;<a href="#after">after</a>: &quot;anotherprogram&quot;;
+}
+</pre>
+
+<p id="program">The <span style="font-family: Courier New,Courier,monospace;">program</span> block defines how your interface reacts to events. Programs can change the part state or trigger other events.</p>
+
+<ul>
+
+<li id="program_name"><span style="font-family: Courier New,Courier,monospace;">name [program name]</span>
+<p>Sets the symbolic name of the program as a unique identifier.</p>
+</li>
+
+<li id="signal"><span style="font-family: Courier New,Courier,monospace;">signal [signal name]</span>
+<p>Sets the signals that cause the program to run. The signal received must match the specified source to run. There can be several signals, but only one signal keyword per program can be used. Also, there are some predefined signals for touch event handling. The predefined signals are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">hold,on</span>: Holding on the mouse event matching the source that starts the program</li>
+<li><span style="font-family: Courier New,Courier,monospace;">hold,off</span>: Holding off the mouse event matching the source that starts the program</li>
+<li><span style="font-family: Courier New,Courier,monospace;">focus,part,in</span>: Focusing in the matching source that starts the program</li>
+<li><span style="font-family: Courier New,Courier,monospace;">focus,part,out</span>: Focusing out of the matching source that starts the program</li>
+<li><span style="font-family: Courier New,Courier,monospace;">mouse,in</span>: Moving the mouse into the matching source that starts the program</li>
+<li><span style="font-family: Courier New,Courier,monospace;">mouse,out</span>: Moving the mouse out of the matching source that starts the program</li>
+<li><span style="font-family: Courier New,Courier,monospace;">mouse,move</span>: Moving the mouse in the matching source that starts the program</li>
+<li><span style="font-family: Courier New,Courier,monospace;">mouse,down,*</span>: Pressing the mouse button in the matching source that starts the program</li>
+<li><span style="font-family: Courier New,Courier,monospace;">mouse,up,*</span>: Releasing the mouse button in the matching source that starts the program</li>
+<li><span style="font-family: Courier New,Courier,monospace;">mouse,clicked,*</span>: Clicking any mouse button in the matching source that starts the program</li>
+<li><span style="font-family: Courier New,Courier,monospace;">mouse,wheel,0,*</span>: Moving the mouse wheel in the matching source that starts the program. A positive number moves up and a negative number moves down.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">drag,start</span>: Starting a drag of the mouse in the matching source that starts the program. This signal works only in the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">drag,stop</span>: Stopping a drag of the mouse in the matching source that starts the program. This signal works only in the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">drag</span>: Dragging the mouse in the matching source that starts the program. This signal works only in the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part.</li>
+</ul>
+</li>
+
+<li id="program_source"><span style="font-family: Courier New,Courier,monospace;">source [source name]</span>
+<p>Sets the source of an accepted signal. There can be several signals, but only one source keyword per program can be used. For example, <span style="font-family: Courier New,Courier,monospace;">source: button-*</span> means that signals from any part or program named <span style="font-family: Courier New,Courier,monospace;">button-*</span> are accepted.</p>
+</li>
+
+<li id="filter"><span style="font-family: Courier New,Courier,monospace;">filter [part] [state]</span>
+<p>Filters the signals to be only accepted if the part is in the <span style="font-family: Courier New,Courier,monospace;">[state]</span> state. Only 1 filter per program can be used. If the <span style="font-family: Courier New,Courier,monospace;">[state]</span> parameter is not given, the source of the event is used instead.</p>
+</li>
+
+<li id="in"><span style="font-family: Courier New,Courier,monospace;">in [from] [range]</span>
+<p>Waits <span style="font-family: Courier New,Courier,monospace;">[from]</span> seconds before executing the program and add a random number of seconds (from 0 to <span style="font-family: Courier New,Courier,monospace;">[range]</span>) to the total waiting time.</p>
+</li>
+
+<li id="action"><span style="font-family: Courier New,Courier,monospace;">action [type] (param1) (param2) (param3) (param4)</span>
+<p>Sets the action to be performed by the program. The valid actions (only 1 can be specified) are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">STATE_SET</span>: Set the <span style="font-family: Courier New,Courier,monospace;">target part</span> state as <span style="font-family: Courier New,Courier,monospace;">target state</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>: Stop the ongoing transition</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>: Emit a signal to the application level. The application can register a callback for handling actions based on the EDC state.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_SET</span>: Set a value for the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part (x, y values)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_STEP</span>: Set a step for the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part (x, y values)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_PAGE</span>: Set a page for the <span style="font-family: Courier New,Courier,monospace;">draggable</span> part (x, y values)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">FOCUS_SET</span>: Set the focus to the target group</li>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE &quot;sample name&quot; speed (channel)</span>: Play a music sample clip
+
+<p><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE</span>&#39;s (optional) channel can be one of:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EFFECT/FX</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BACKGROUND/BG</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">MUSIC/MUS</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">FOREGROUND/FG</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">INTERFACE/UI</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">INPUT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ALERT</span></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">PLAY_TONE &quot;tone name&quot; duration_in_seconds (Range 0.1 to 10.0)</span>: Play a predefined tone of a specific duration</li>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAY_VIBRATION &quot;sample name&quot; repeat (repeat count)</span></li>
+</ul></li>
+
+
+<li id="transition"><span style="font-family: Courier New,Courier,monospace;">transition [type] [length] (interp val 1) (interp val 2) (option)</span>
+<p>Determines how transitions occur using the <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action. The <span style="font-family: Courier New,Courier,monospace;">[type]</span> parameter is the style of the transition and the <span style="font-family: Courier New,Courier,monospace;">[length]</span> parameter is a double specifying the number of seconds in which to perform the transition. The valid types are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">SPRING</span></li>
+</ul>
+<p>The types have the following requirements:</p>
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span>, <span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span>, and <span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> need the extra optional <span style="font-family: Courier New,Courier,monospace;">interp val 1</span> to determine the <span style="font-family: Courier New,Courier,monospace;">factor</span> of curviness. 1.0 is the same as their non-factor counterparts and 0.0 is equal to linear. Numbers higher than 1.0 make the curve angles steeper with a more pronounced curve point.</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span>, <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>, and <span style="font-family: Courier New,Courier,monospace;">SPRING</span> also require <span style="font-family: Courier New,Courier,monospace;">interp val 2</span> in addition to <span style="font-family: Courier New,Courier,monospace;">interp val 1</span>.</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> as the initial gradient start (for example, 0.0 is horizontal, 1.0 is diagonal (linear), and 2.0 is twice the gradient of linear). <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is interpreted as an integer factor defining how much the value swings outside the gradient before going back to the final resting spot at the end. 0.0 for <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is equivalent to a linear interpolation. Note that <span style="font-family: Courier New,Courier,monospace;">DIVIS</span> can exceed 1.0.</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> as the number of bounces (so it is rounded down to the nearest integer value), with <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> determining how much the bounce decays; 0.0 gives a linear decay per bounce and higher values give much more decay.</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">SPRING</span> is similar to bounce; <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> specifies the number of spring swings and <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> specifies the decay, but it can exceed 1.0 on the outer swings.</li>
+
+<li>The valid options are:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">CURRENT</span>: Causes the object to move from its current position. Can be used as the last parameter of any transition type.</li>
+</ul>
+</li>
+</ul>
+</li>
+<li id="target"><span style="font-family: Courier New,Courier,monospace;">target [target]</span>
+<p>Sets the program or part on which the specified action acts.</p>
+</li>
+
+<li id="after"><span style="font-family: Courier New,Courier,monospace;">after [after]</span>
+<p>Determines the program that is run after the current program completes. The source and signal parameters of a program run as an <span style="font-family: Courier New,Courier,monospace;">after</span> are ignored. Multiple <span style="font-family: Courier New,Courier,monospace;">after</span> statements can be specified per program.</p>
+</li>
+
+</ul>
+ <table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/edc_positioning_n.htm b/org.tizen.ui.practices/html/native/efl/edc_positioning_n.htm
new file mode 100644
index 0000000..6ef79ed
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edc_positioning_n.htm
@@ -0,0 +1,487 @@
+<!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>Positioning Parts with the EDC File</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">	
+			<li><a href="#offset">Adding an Offset to Relative Positioning</a></li>
+			<li><a href="#calc">Calculating the Edje Object Total Size</a></li>
+			<li><a href="#hint">Using Edje Size Hints</a></li>			
+			<li><a href="#Swallow">Creating an Edje Swallow</a></li>
+			<li><a href="#Layout">Using ELM Layouts</a></li>
+
+		</ul>
+		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Positioning Parts with the EDC File</h1> 
+
+<p>The size of a part in pixels is set using the <span style="font-family: Courier New,Courier,monospace;">min</span> and <span style="font-family: Courier New,Courier,monospace;">max</span> properties. The following code example sets the minimum and maximum size of the rectangle part to 200 x 200 px:</p>
+
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;blue&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the size to 200x200
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 200;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 200;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Blue color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The position of the parts is defined in the <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks, which define the upper-left corner and the lower-right corner of the part. The position can be defined in relation to other parts (with the <span style="font-family: Courier New,Courier,monospace;">relative</span> property) as an offset (<span style="font-family: Courier New,Courier,monospace;">offset</span> property). When using relative positioning, the <span style="font-family: Courier New,Courier,monospace;">to</span>, <span style="font-family: Courier New,Courier,monospace;">to_x</span> and <span style="font-family: Courier New,Courier,monospace;">to_y</span> properties are used to define in relation to which part the positioning is done. If nothing else is specified, the positioning is in relation to the parent&#39;s part.</p>
+
+<p>To demonstrate relative positioning, the following example creates another rectangle part and positions it under the first part. The upper-left corner of the new part starts at the lower-left corner of the previous one.</p>
+
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;rectangle2&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;green&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the size to 200 x 200
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 200;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 200;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Green color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the position
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// rel1 is relative to &quot;rectangle&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// rel2 is relative to the parent
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</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;">align</span> property defines how the parts align themselves in the main window if their size is smaller than the main window. If nothing is specified, the parts are aligned in the center of the window.</td>
+</tr>
+</tbody>
+</table> 
+
+<h2 id="offset" name="offset">Adding an Offset to Relative Positioning</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks also support offset. The offset is a complement to the relative positioning: the corners are first placed according to their relative parameters, and then adjusted using the offsets.</p>
+
+<p>The following figure shows the pixel positions for a 4 x 4 rectangle. The indexes start in the top-left corner at (0, 0), and increase to the right and to the bottom. Since the indexes have started at 0, the 4<sup>th</sup> pixel has an index of 3. To create a 2 x 2 blue rectangle centered inside the green rectangle, the top-left corner must be (1, 1) and the bottom-right one (2, 2).</p>
+
+<p class="figure">Figure: Offset indexes</p> 
+<p align="center"><img alt="Offset indexes" src="../../images/rel1_rel2_offsets.png" /></p> 
+
+<p>To determine the relative position of the blue rectangle, Edje needs the following definitions:</p>
+<ul>
+<li>Part coordinates, depending on the size and position of the green rectangle</li>
+<li>Relative component of the positions must be the same: the top-left corner of the green rectangle</li>
+<li>Top-left pixel (1, 1) and bottom-right pixel (2, 2)</li>
+</ul>
+
+<p>The following code example shows the definitions:</p>
+
+<pre class="prettyprint">
+name: &quot;blue rectangle&quot;;
+
+rel1.to: &quot;green rectangle&quot;;
+rel1.relative: 0 0;
+rel1.offset: 1 1;
+
+rel2.to: &quot;green rectangle&quot;;
+rel2.relative: 0 0;
+rel2.offset: 2 2;
+</pre>
+
+<p>For most tasks, relative positioning is simpler than using offsets. Offsets are usually left for fine-tuning and creating borders.</p>
+
+<p>The following example is similar to the previous one but it uses relative positioning instead of offsets to achieve the same result for the 4 x 4 rectangle (though it can scale to larger sizes as well). The blue rectangle starts at 25% of the green rectangle (both vertically and horizontally) and ends at 75% of it (both vertically and horizontally). Like in the previous example, the blue rectangle is named and Edje is told what the object of reference is:</p>
+
+<pre class="prettyprint">
+name: &quot;blue rectangle&quot;;
+rel1.to: &quot;green rectangle&quot;;
+rel2.to: &quot;green rectangle&quot;;
+</pre>
+
+<p>The following figure shows how to refer to pixels using relative positioning when the offsets are (0, 0).</p>
+
+<p class="figure">Figure: Relative positioning</p> 
+<p align="center"><img alt="Relative positioning" src="../../images/rel1_rel2_offsets_and_relative.png" /></p> 
+
+<p>Note that in addressing the pixels, (0, 0) is addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0 0; offset 0 0;</span> and each additional 0.25 in the relative field gives a 1-pixel move. With this, the pixel addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75; offset: 0 0;</span> is at (3, 3) and not (2, 2).</p>
+
+<p>This addressing method comes from a design choice in Evas and Edje, favoring simplicity. In the examples shown in this guide, there are 4 pixels, and therefore when the <span style="font-family: Courier New,Courier,monospace;">[0; 1)</span> range is divided in 4, the result is <span style="font-family: Courier New,Courier,monospace;">[0; 0.25), [0.25; 0.50), [0.50; 0.75), [0.75; 0.100)</span>. With Edje, the value used to refer to each segment is the left bound and therefore, 0.75 refers to <span style="font-family: Courier New,Courier,monospace;">[0.75; 0.100)</span> (the bottom-right pixel of the green rectangle and not the 3/4th one).</p>
+
+<p>To refer to the previous pixel is to set the <span style="font-family: Courier New,Courier,monospace;">rel2</span> bound to <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75;</span>, as expressed naturally, and <span style="font-family: Courier New,Courier,monospace;">offset: -1 -1;</span>. This can also be understood as extending the rectangle up to 75% of its parent with the upper bound excluded (as shown in the <span style="font-family: Courier New,Courier,monospace;">[0.50; 0.75)</span>).</p>
+
+<p>Since <span style="font-family: Courier New,Courier,monospace;">-1 -1</span> is the most common offset wanted for <span style="font-family: Courier New,Courier,monospace;">rel2</span>, it is the default value as the default behavior is the most practical.</p>
+
+<h2 id="calc" name="calc">Calculating the Edje Object Total Size</h2>
+
+<p>When the EDC file is composed of several parts, Edje calculates the size of the global Edje object, by taking all the parts and their properties into account. The following properties have a role in this calculation and affect the global size:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">min</span> and <span style="font-family: Courier New,Courier,monospace;">max</span>: define the minimum and the maximum size of a part.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span>: specify the relative position of a part.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">align</span>: relates to the alignment of the part in the parent object.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">fixed</span>: defines if the part has a fixed size.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The <span style="font-family: Courier New,Courier,monospace;">fixed</span> property can only be used on the <span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span> type parts. Setting this property to <span style="font-family: Courier New,Courier,monospace;">fixed: 1 1</span> does not take into account the part for the calculation of the global size.</td>
+</tr>
+</tbody>
+</table> 
+
+<h2 id="hint" name="hint">Using Edje Size Hints</h2>
+
+<p>Any <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> can have hints for the object to know how to properly position and resize. Edje uses these hints when swallowing an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> to a position and resizing it in the <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part of the EDC file.</p>
+
+<p>The size hints are not a size enforcement, they only tell the parent object the desired size for the child object. The parent tries to get as close as possible to the hint.</p>
+
+<p>Hints are set in an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> using the following <span style="font-family: Courier New,Courier,monospace;">evas_object_size_hint_*()</span> functions:</p>
+
+<ul>
+<li id="min_size_hint" name="min_size_hint">Minimum size hint
+
+<p>Set the hint for the object&#39;s minimum size, given in pixels. In the following example, the horizontal and vertical minimum size hint of an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> is set to 0 pixels:</p>
+
+<pre class="prettyprint">
+Evas_Object *object;
+evas_object_size_hint_min_set(object, 0, 0);
+</pre>
+</li>
+
+<li>Maximum size hint
+
+<p>Set the hint for the object&#39;s maximum size, given in pixels. In the following example, the horizontal and vertical maximum size hint of an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> is set to 200 pixels:</p>
+<pre class="prettyprint">evas_object_size_hint_max_set(object, 200, 200);</pre>
+</li>
+
+<li>Aspect size hint
+
+<p>Set the hint for the object&#39;s aspect ratio. The available aspect size hints are:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_HORIZONTAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_VERTICAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span></li>
+</ul>
+
+<p>The other parameters are the aspect width and height ratio. These integers are used to calculate the proportions of the object. If the aspect ratio terms are <span style="font-family: Courier New,Courier,monospace;">null</span>, the object&#39;s container ignores the aspect and scale of the object and occupies the whole available area.</p>
+
+<p class="figure">Figure: Aspect control</p> 
+<p align="center"><img alt="Aspect control" src="../../images/aspect-control-none.png" /></p> 
+ 
+<p align="center"><img alt="Aspect control" src="../../images/aspect-control-horizontal.png" /></p> 
+
+<p align="center"><img alt="Aspect control" src="../../images/aspect-control-both.png" /></p> 
+
+<p>The following example sets the aspect size hint to <span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span> with a width of 100 and a height of 200. So the aspect ratio must be 1/2.</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_aspect_set(object, EVAS_ASPECT_CONTROL_BOTH, 100, 200);
+</pre>
+</li>
+
+<li id="align_size_hint" name="align_size_hint">Align size hint
+<p>Set the hint for the object&#39;s alignment. This hint is used when the object is smaller than its parent. The special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter uses the maximum size hints with a higher priority, if they are set. Also, any padding hints set on objects are added up to the alignment space on the final scene composition.</p>
+
+<p class="figure">Figure: Alignment</p> 
+<p align="center"><img alt="Alignment" src="../../images/align_hints.png" /></p> 
+
+<p>In the following example, the special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter is used:</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_align_set(object, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre>
+</li>
+
+<li>Weight size hint
+<p>Set the hint for the object&#39;s weight. The weight tells to a container object how the given child is resized. If the <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_EXPAND</span> parameter is used, the child object&#39;s dimensions are expanded to fit the container&#39;s own.</p> 
+
+<p>When several child objects have different weights in a container object, the container distributes the space it has to layout them by those factors. Most weighted children get larger in this process than the lighter ones.</p> 
+
+<p>In the following example, the container is asked to expand the object in both directions:</p> 
+
+<pre class="prettyprint">
+evas_object_size_hint_weight_set(object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+</li>
+
+<li>Padding size hint
+
+<p>Set the hint for the object&#39;s padding space. Padding is extra space an object takes on each of its delimiting rectangle sides. The padding space is rendered transparent. Four hints can be defined for the left, right, top, and bottom padding.</p>
+
+<p class="figure">Figure: Padding</p> 
+<p align="center"><img alt="Padding" src="../../images/padding-hints.png" /></p> 
+
+<p>In the following example, the padding hints are set to 5 pixels on each side of the object:</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_padding_set(object, 5, 5, 5, 5);
+</pre>
+</li>
+</ul>
+
+
+<h2 id="Swallow" name="Swallow">Creating an Edje Swallow</h2>
+
+<p>The parent of all layout components is Edje. Edje, as detailed in the <a href="edc_part_block_n.htm">EDJE Data Collection Reference</a>, is a library which converts EDC files into Evas objects. One of its main features is the possibility to create <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> objects. When a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> object is added in Evas, it can contain any other <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>.</p>
+
+<p>To create a swallow part: </p>
+<ol>
+<li>Create the EDC file.
+<p>The file describes a group named <span style="font-family: Courier New,Courier,monospace;">container</span>, which contains a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> type part named <span style="font-family: Courier New,Courier,monospace;">part.swallow</span>. The part is centered inside the parent (it is the default behavior) but there are 32 pixels free all around this part.</p>
+<pre class="prettyprint">
+collections
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;container&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;part.swallow&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 31 31;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -32 -32;
+&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;}
+}
+</pre>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool to compile the EDC file into a binary <span style="font-family: Courier New,Courier,monospace;">.edj</span> file:</p>
+
+<pre class="prettyprint">
+edje_cc -o container.edj container.edc
+</pre>
+</li>
+<li>Create an Edje object and load the file:
+
+<pre class="prettyprint">
+edje = edje_object_add(evas_object_evas_get(parent));
+edje_object_file_set(edje, &quot;container.edj&quot;, &quot;container&quot;);
+</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;">edje_object_add()</span> function, as opposed to an elementary object, does not take an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> as a parent. You must give the function the Evas on which the object is added. As the parent is already added on the Evas by elementary, retrieve a reference to it by using the <span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get()</span> function.</td>
+</tr>
+</tbody>
+</table> 
+
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">edje_object_file_set()</span> function to set the Edje file from which the object is loaded. The object itself is the name of the group as defined in the EDC file. In this case it is <span style="font-family: Courier New,Courier,monospace;">container</span>.
+</p>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">edje_object_part_swallow()</span> function to swallow any kind of <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> inside it:
+
+<pre class="prettyprint">
+ic = elm_icon_add(parent);
+elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
+edje_object_part_swallow(edje, &quot;part.swallow&quot;, ic);
+</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;">elm_image_file_set()</span> function parameters are linked to Edje. The second parameter in this example is a PNG file, but it can also be an Edje file. In that case, the third parameter must be the Edje group to load, exactly as previously shown with the <span style="font-family: Courier New,Courier,monospace;">edje_object_file_set()</span> function.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+</ol>
+
+<h2 id="Layout" name="Layout">Using ELM Layouts</h2>
+
+<p>A layout is a container component. For the basic use of the <span style="font-family: Courier New,Courier,monospace;">elm_layout</span> component with a default style, see the <a href="containers_n.htm#layout">Layout</a> guide. The ELM layout takes a standard Edje design file and wraps it in a UI component. Layouts are the basis of graphical UI components used in Elementary.</p>
+
+<p>To create a layout:</p>
+<ol>
+<li>Create a new elementary layout using the <span style="font-family: Courier New,Courier,monospace;">elm_layout_add()</span> function:
+
+<pre class="prettyprint">
+Evas_Object *layout;
+layout = elm_layout_add(parent);
+</pre>
+</li>
+
+<li>For Edje swallows, load an Edje file:
+<ol type="a"><li>Create an Edje file that contains a black rectangle and an icon in the center:
+
+<pre class="prettyprint">
+images
+{
+&nbsp;&nbsp;&nbsp;image: &quot;c1.png&quot; COMP;
+}
+
+collections
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;my_layout&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;background&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT; description 
+&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;state: &quot;default&quot; 0.0; color: 0 0 0 255; 
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;background&quot;; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 31 31; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -32 -32; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default.image: &quot;c1.png&quot;; 
+&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;} 
+}
+</pre>
+</li>
+<li>Compile the file with the <span style="font-family: Courier New,Courier,monospace;">edje_cc -o edje_example.edj edje_example.edc</span> command.
+</li>
+
+<li>Load the file with the <span style="font-family: Courier New,Courier,monospace;">elm_layout_file_set()</span> function:
+
+<pre class="prettyprint">
+elm_layout_file_set(layout, &quot;edje_example.edj&quot;, &quot;my_layout&quot;);
+</pre>
+
+<p>The layout component can contain as many parts and children as described in its theme file (EDC). Some of these children can have special types:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> (content holder): 
+<p>Only one object can be added to a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>. The <span style="font-family: Courier New,Courier,monospace;">elm_layout_content_*()</span> functions are used to manage the objects in a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part. After being set to this part, the object&#39;s size, position, visibility, clipping, and other description properties are controlled by the description of the given part inside the Edje theme file.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOX</span>:
+<p>The <span style="font-family: Courier New,Courier,monospace;">BOX</span> layout can be used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_box_*()</span> functions. It is very similar to the <span style="font-family: Courier New,Courier,monospace;">elm_box</span> component, but the <span style="font-family: Courier New,Courier,monospace;">BOX</span> layout&#39;s behavior is completely controlled by the Edje theme.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>:
+<p>The <span style="font-family: Courier New,Courier,monospace;">TABLE</span> layout is like the <span style="font-family: Courier New,Courier,monospace;">BOX</span> layout, but it is used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_table_*()</span> functions.</p></li>
+</ul>
+</li>
+</ol></li></ol>
+
+<p>ELM can send Edje signals to the EDC part using the <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_emit()</span> function. You can also use the <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_callback_add()</span> function to receive signals.</p>
+
+<p>Use the following code to listen to any signals sent by the layout:</p>
+
+<pre class="prettyprint">
+elm_layout_signal_callback_add(layout, &quot;*&quot;, &quot;*&quot;, _signal_cb, NULL);
+
+static void 
+_signal_cb(void *data, Evas_Object *obj, const char *emission, const char *source)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Info received from layout : %s %s\n&quot;, emission, source);
+}
+</pre>
+
+<p>For more information on signals, see <a href="event_types_n.htm#events_guide_edje_with_layout">Managing Multiple Signal Emitters in Layouts</a>.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/edje_animation_n.htm b/org.tizen.ui.practices/html/native/efl/edje_animation_n.htm
new file mode 100644
index 0000000..28c4beb
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_animation_n.htm
@@ -0,0 +1,535 @@
+<!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>Edje Animations</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+				<li><a href="#Animating_Rectangle">Animating a Rectangle</a></li>
+				<li><a href="#Actions">Actions</a></li>
+				<li><a href="#Transitions">Transitions</a></li>
+				<li><a href="#Chaining">Chaining Edje Programs</a></li>
+				<li><a href="#Playing_Signals">Playing on Signals</a></li>
+				<li><a href="#Rotate">Rotating with Edje</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Mobile Wearable</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Edje Animations</h1> 
+
+<p>One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> can create predefined animations, but you can also use the Edje library to create your own animations.</p>
+  
+<p>The Edje animations are based on a very simple principle: going from one state to another. If you want to animate something with Edje, you must define two states and move from the first state to the second.</p>
+
+<h2 id="Animating_Rectangle" name="Animating_Rectangle">Animating a Rectangle</h2>
+
+<p>This example shows how to animate a rectangle. It is positioned in the top left corner of the window and is moved to the bottom right corner in five seconds. To do that with Edje, define a <span style="font-family: Courier New,Courier,monospace;">part</span> called &quot;rectangle&quot; with the <span style="font-family: Courier New,Courier,monospace;">type RECT:</span> this part has two descriptions (or states). In the first state, the rectangle is in is the top left corner. In the second state, it is in is the bottom right corner. To create the transition, set this EDC code for Edje to switch the object from its current state to another.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.3 0.1;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.7 0.9;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&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;programs 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The &quot;rectangle&quot; part has two descriptions that share the same name, but have a different &quot;version&quot;.</p>
+
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The program defines when and how to move from one state to another. A program is called upon reception of a signal from a source. Here the program is called when the signal load is received from any source.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+}
+</pre>
+
+<p>An action is performed upon the signal reception. In this example, the state is changed.</p>
+
+<pre class="prettyprint">
+action: STATE_SET &quot;default&quot; 0.5;
+</pre>
+
+<p>The program has a target, here the &quot;rectangle&quot;.</p>
+
+<pre class="prettyprint">
+target: &quot;rectangle&quot;;
+</pre>
+
+<p>The program uses a transition to perform the action.</p>
+
+<pre class="prettyprint">
+transition: LINEAR 5;
+</pre>
+
+<p>This example produces a blue rectangle that moves from the upper left to the lower right corner with a linear transition in five seconds.</p>
+
+<h2 id="Actions" name="Actions">Actions</h2>
+
+<p>The Edje programs are not only for animations. There are different actions, for example <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> and <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>. You may also send signals with <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action changes the state of the &quot;target&quot;.</p>
+
+<p>In the following example, the state of the part named &quot;image&quot; changes to &quot;default&quot; &quot;0.0&quot;.</p>
+
+<pre class="prettyprint">
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;animate&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;animate&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 3.0;
+&nbsp;&nbsp;&nbsp;target: &quot;image&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span> stops the program specified by &quot;target&quot;.</p>
+
+<pre class="prettyprint">
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;animate_stop&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;animate_stop&quot;;
+&nbsp;&nbsp;&nbsp;action: ACTION_STOP;
+&nbsp;&nbsp;&nbsp;target: &quot;animate_loop&quot;;
+}
+</pre>
+
+<p>The previous example stops the program defined as &quot;target&quot; named <span style="font-family: Courier New,Courier,monospace;">animate_loop</span>. This program runs on the <span style="font-family: Courier New,Courier,monospace;">animate_stop</span> signal.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span> emits a signal that is used to communicate with the application directly from the theme.</p>
+
+<p>The following example emits a signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> &quot;start&quot; when it receives the signal <span style="font-family: Courier New,Courier,monospace;">mouse,down,*</span> from the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part. In other words, it sends the signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> &quot;start&quot; when the mouse is pressed in the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;video_move_start&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,down,*&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;video_mover&quot;;
+&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;frame_move&quot; &quot;start&quot;;
+}
+</pre>
+
+<h2 id="Transitions" name="Transitions">Transitions</h2>
+
+<p>The transitions available are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span>: makes a linear transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span>: makes a sinusoidal transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span>: makes an accelerated transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span>: makes a decelerated transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span>: makes an accelerated transition and takes the duration and the factor as the parameters</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span>: makes a decelerated transition and takes the duration and the factor as the parameters</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span>: makes a sinusoidal transition and takes the duration and the factor as the parameters</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span>: takes 3 parameters:
+	<ul>
+		<li>the duration</li>
+        <li>the initial gradient start (0.0 is horizontal, 1.0 is diagonal (linear), 2.0 is twice the gradient of linear, and so on)</li>
+        <li>an integer factor that defines how much the value swings outside the gradient to come back to the final resting spot at the end. 0.0 for the third parameter is equivalent to linear interpolation. Note that DIVIS may exceed 1.0.</li>
+	</ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>: makes a bounce transition and takes 3 parameters:
+	<ul>
+        <li>the duration</li>
+        <li>how much the bounce decays, with 0.0 giving linear decay per bounce, and higher values giving more decay</li>
+        <li>the number of bounces (rounded down to the nearest integer value)</li>
+	</ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SPRING</span>: makes a spring transition and takes 3 parameters:
+	<ul>
+        <li>the duration</li>
+        <li>the decay, with the level exceeding 1.0 on the outer swings</li>
+        <li>the number of spring swings</li>
+	</ul>
+</li>
+</ul>
+
+<p>There are graphical representations of these effects in the <span style="font-family: Courier New,Courier,monospace;">Ecore_Evas</span> section above.</p>
+
+<h2 id="Chaining" name="Chaining">Chaining Edje Programs</h2>
+
+<p>To define a couple of Edje programs and chain them, we can, for example, create a program to make the rectangle return to its initial state with another transition (such as <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>).</p>
+
+<p>Use the statement <span style="font-family: Courier New,Courier,monospace;">after</span> in the first <span style="font-family: Courier New,Courier,monospace;">program</span>. <span style="font-family: Courier New,Courier,monospace;">after</span> takes the name of the transition to run when the program is done.</p>
+
+<pre class="prettyprint">
+after: &quot;animation,state0&quot;;
+</pre>
+
+<p>This is how to add the bounce animation. To return the blue rectangle to its initial position with a <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> transition: it bounces with a factor of 1.8, six times. This program is only to be used at the end of the first one, so it does not have any signal statement.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,state0&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;transition: BOUNCE 5 1.8 6;
+}
+</pre>
+
+<h2 id="Playing_Signals" name="Playing_Signals">Playing on Signals</h2>
+
+<p>The programs start when they receive a signal from a source. Edje handles many kind of signals, including mouse events.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To show the signals, use <span style="font-family: Courier New,Courier,monospace;">edje_player -p myfile.edj</span>.</td>
+</tr>
+</tbody>
+</table> 
+
+<p>For example, in another transition the rectangle is left clicked. The corresponding signal name is <span style="font-family: Courier New,Courier,monospace;">mouse,clicked,1</span>.</p>
+
+<p>For this transition, define a new state. This state changes the color and the position of the rectangle.</p>
+
+<pre class="prettyprint">
+// To be placed in the &quot;part&quot; definition
+description 
+{ 
+&nbsp;&nbsp;&nbsp;state: &quot;color&quot; 0.0;
+&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.3;}
+&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.4;}
+&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+}
+</pre>
+
+<p>The program is as follows:</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 2;
+}
+</pre>
+
+<p>This starts when the rectangle is left clicked.</p>
+
+<p>If you want to send a signal from your application when you use signals to start transitions, create a program waiting for your own special signal. For example:</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side,hide&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;hide,sidemenu&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+}
+</pre>
+
+<p>This program changes the state of the target named <span style="font-family: Courier New,Courier,monospace;">animation,menu_side,hide</span> to <span style="font-family: Courier New,Courier,monospace;">&quot;default&quot; 1.0</span>. It waits for the <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> signal emitted by a source called <span style="font-family: Courier New,Courier,monospace;">MenuButton</span>.</p>
+
+<pre class="prettyprint">
+edje_object_signal_emit(layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
+</pre>
+
+<p>This statement sends a signal named <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> with a source named <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> to the object called <span style="font-family: Courier New,Courier,monospace;">layout</span>.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit</span> function emits a signal on an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> part of the application.</p>
+
+<pre class="prettyprint">
+edje_object_signal_emit(Evas_Object *obj,
+&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 *emission,
+&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 *source)
+</pre>
+
+<ul>
+<li>The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>, which emits the signal (<span style="font-family: Courier New,Courier,monospace;">layout</span> in the example).</li>
+<li>The second parameter is the <span style="font-family: Courier New,Courier,monospace;">emission</span> string (the name of the signal <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> in the example).</li>
+<li>The third parameter is the <span style="font-family: Courier New,Courier,monospace;">source</span> of the signal (the name of the source, <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> in the example).</li>
+</ul>
+
+<p>If you use the Elementary in the application, you can use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span>. It functions exactly the same way as <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit</span> and takes the same parameters.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To find a complete example, use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span> in <a href="menu_tutorial_mn.htm">Creating Mobile Menus</a>.</td>
+</tr>
+</tbody>
+</table> 
+
+<h2 id="Rotate" name="Rotate">Rotating with Edje</h2>
+
+<p>The Edje library allows you to rotate objects, using the <span style="font-family: Courier New,Courier,monospace;">map</span> statement. For example, if you want to rotate the blue rectangle on a right click, you must define a new rotate state. To enable the <span style="font-family: Courier New,Courier,monospace;">map</span> on you object you must add a <span style="font-family: Courier New,Courier,monospace;">map</span> part to your default state.</p>
+
+<pre class="prettyprint">
+map 
+{
+&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;rotation.x: 0;
+&nbsp;&nbsp;&nbsp;rotation.y: 0;
+&nbsp;&nbsp;&nbsp;rotation.z: 0;
+}
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">on</span>: 1; enables the map on the object</li>
+<li><span style="font-family: Courier New,Courier,monospace;">perspective_on</span>: 1, enables the perspective when rotating, even without a perspective point object</li>
+<li><span style="font-family: Courier New,Courier,monospace;">smooth</span>: 1; enables a smooth map rendering</li>
+<li>The rotation statements define the default rotation of the object on x, y, and z axes.</li>
+</ul>
+
+<p>To add a new rotate state with a rotation around any axis, do the following.</p>
+
+<pre class="prettyprint">
+description 
+{ 
+&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;map.rotation.z: 120;
+}
+</pre>
+
+<p>This rotate state inherits all the default state properties, but changes the value of <span style="font-family: Courier New,Courier,monospace;">map.rotation.z</span> from 0&deg; to 120&deg;.</p>
+
+<p>To set a program to run the rotate state, do the following.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,rotate&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,3&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;transition: LIN 5;
+}
+</pre>
+
+<p>This program runs on a right click on the rectangle object.</p>
+
+<p>The complete code of this example is as follows.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.3 0.1;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map 
+&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;on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
+&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;z: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 0;
+&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;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.7 0.9;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;color&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.3;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.4;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map.rotation.z: 120;
+&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;programs 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,state0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: BOUNCE 2 1.8 26;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SIN 2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,rotate&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LIN 5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/edje_animation_tutorial_n.htm b/org.tizen.ui.practices/html/native/efl/edje_animation_tutorial_n.htm
new file mode 100644
index 0000000..76b99cc
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_animation_tutorial_n.htm
@@ -0,0 +1,459 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Edje Animations</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#startup">Animating on Application Start-up</a>
+			</li>
+			<li><a href="#click">Animating Objects on Click</a>
+			</li>
+		</ul>	
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">		
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Mobile Wearable</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Edje Animations</h1>
+
+  
+<p>One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> can create predefined animations, but you can also use the Edje library to create your own animations.</p>
+
+ <h2 id="startup" name="startup">Animating on Application Start-up</h2>
+
+
+<p>The goal of this tutorial is to create, in an EDC (Edje Data Collection) file, an animation target and buttons to start animations.</p>
+<p>To create an animation on the application start-up:</p>
+<ol>
+<li>
+<p>Create an application using the <strong>Basic EDC UI Application</strong> template.</p>
+<p>By default, the Basic EDC UI Application model produces an empty window with a title. In this example, a Tizen logo is added to the window and the behavior of the window title is changed.</p>
+<p>The images used by the Edje file are stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> directory of the application. Copy the Tizen logo available in <span style="font-family: Courier New,Courier,monospace">shared/res/&lt;yourapplicationname&gt;.png</span> into the <span style="font-family: Courier New,Courier,monospace">edje/images</span> Edje image directory, and add the image to the Edje <span style="font-family: Courier New,Courier,monospace">images</span> block:</p>
+<pre class="prettyprint">
+images 
+{
+&nbsp;&nbsp;&nbsp;image: &quot;edceffects.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;image: &quot;tizen-logo.png&quot; COMP;
+}
+</pre>
+</li>
+<li>
+<p>Add an Edje <span style="font-family: Courier New,Courier,monospace">part</span> block using the small logo.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">logo</span> part has the <span style="font-family: Courier New,Courier,monospace">IMAGE</span> type and 2 states. The state describes the appearance of a part, such as its size, position, and color.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">default</span> state definition is in the first <span style="font-family: Courier New,Courier,monospace">description</span> block of the part:</p>
+<ul>
+<li>Maximum and minimum sizes in the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> properties</li>
+<li>Image to use in this part</li>
+<li>Default position</li>
+</ul>
+<p>The second state, <span style="font-family: Courier New,Courier,monospace">down-state</span>, inherits all of the <span style="font-family: Courier New,Courier,monospace">default</span> state properties, and only changes the position to put the image at the bottom of the application window.</p>
+<p>These 2 states are the start and end states of the animation.</p>
+<pre class="prettyprint">
+// Image using the Tizen logo
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 63 63;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 63 63;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image { normal: &quot;small-logo.png&quot;; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.1 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;down-state&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.1 0.92;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.05 1.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>Add a <span style="font-family: Courier New,Courier,monospace">program</span> block to the Edje <span style="font-family: Courier New,Courier,monospace">programs</span> block to create the animation.</p>
+<p>This program is named <span style="font-family: Courier New,Courier,monospace">animation,state1</span> and is started when the application receives the <span style="font-family: Courier New,Courier,monospace">load</span> signal immediately on startup. It runs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action and changes the object state from default to down-state. The target of the program is the <span style="font-family: Courier New,Courier,monospace">logo</span> part.</p>
+<p>To switch from one state to another, the program uses a <span style="font-family: Courier New,Courier,monospace">transition</span> property of the <span style="font-family: Courier New,Courier,monospace">BOUNCE</span> type with 3 parameters, the <span style="font-family: Courier New,Courier,monospace">bounce_decay</span>, the <span style="font-family: Courier New,Courier,monospace">number_of_bounces</span>, and the duration which is set to 5 seconds. This produces a falling and bouncing effect.</p>
+<pre class="prettyprint">
+// Icon drop animation
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;down-state&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;transition: BOUNCE 2.5 0.0 5.0;
+}
+</pre>
+</li>
+<li>
+<p>Add an animation for the window title to make it move from left to right with a bounce effect while growing the font size.</p>
+<p>Create a new <span style="font-family: Courier New,Courier,monospace">part</span> block called <span style="font-family: Courier New,Courier,monospace">&quot;txt_title&quot;</span>, with 2 states that change the font size and position of the window title.</p>
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;txt_title&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;mouse_events: 0;
+
+&nbsp;&nbsp;&nbsp;// default state
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.0 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.0 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=regular&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 24;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Bigger state
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;Bigger&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.75 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.0 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=regular&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 28;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>Create a <span style="font-family: Courier New,Courier,monospace">program</span> block to animate the <span style="font-family: Courier New,Courier,monospace">&quot;txt_title&quot;</span> part on start-up, just like the small Tizen logo.</p>
+<pre class="prettyprint">
+// Make the title bigger
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,bigtitle&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;Bigger&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;txt_title&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 5.0;
+}
+</pre>
+<p>This program goes from the start to the end state in 5 seconds with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> effect. It automatically runs on the application start-up.</p>
+</li>
+</ol>
+
+
+ <h2 id="click" name="click">Animating Objects on Click</h2>
+
+<p>The animations in the previous use case are automatic and require no user interaction. This use case takes advantage of user actions, by animating a part when another part is clicked, and by making the title restore its default aspect when the small logo is clicked.</p>
+
+<p>To animate an object based on a click:</p>
+<ol>
+<li>To animate the title:
+<p>Use the parts and states already defined in step 2 of the previous use case. After the start-up animation, the application goes back to the <span style="font-family: Courier New,Courier,monospace">default</span> state, and there is no need to add any parts or states. You only need to add a <span style="font-family: Courier New,Courier,monospace">program</span> block that makes the transition when the user clicks the <span style="font-family: Courier New,Courier,monospace">logo</span> part.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">program</span> starts when the application receives the <span style="font-family: Courier New,Courier,monospace">mouse,clicked,*</span> signal (any mouse button is clicked) from the <span style="font-family: Courier New,Courier,monospace">logo</span> part (<span style="font-family: Courier New,Courier,monospace">source</span>). It performs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action and sets the <span style="font-family: Courier New,Courier,monospace">default</span> state on the target (<span style="font-family: Courier New,Courier,monospace">txt_file</span> part) with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> transition.</p>
+<pre class="prettyprint">
+// Make the title go back to normal
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;animation,normaltitle&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;txt_title&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.5;
+}
+</pre>
+<p>When clicking any mouse button on the small logo, the title goes back to its original state.</p>
+</li>
+<li>
+<p>Create the rotate part.</p>
+<p>It is possible to create a button with Edje from scratch, but to save time, the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is used in this example to store the Elementary UI components.</p>
+<p>This <span style="font-family: Courier New,Courier,monospace">part</span> is called <span style="font-family: Courier New,Courier,monospace">btn/rotate</span>, and it only has a <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> type and a <span style="font-family: Courier New,Courier,monospace">default</span> state with its position being on the bottom left of the screen.</p>
+<pre class="prettyprint">
+// Container for the rotate button
+part 
+{
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;name: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.10 0.80;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.30 0.90;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>Create the grow part.</p>
+<p>This second <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is very similar to the first one. It is placed relatively to <span style="font-family: Courier New,Courier,monospace">btn/rotate</span> part and it is to remain next to it.</p>
+<pre class="prettyprint">
+// Container for the grow button
+part 
+{
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;name: &quot;btn/grow&quot;;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.02 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 2.02 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>Create the actual UI components in the <span style="font-family: Courier New,Courier,monospace">.c</span> file. The code is added to the <span style="font-family: Courier New,Courier,monospace">create_base_ui()</span> function.</p>
+<p>In the default Basic EDC UI Application, the Edje layout is loaded by default. Create 2 Elementary buttons and add them to the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> containers, without having to set up sizes or positions as this is done in the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> container.</p>
+<p>Note that the <span style="font-family: Courier New,Courier,monospace">part</span> name is very important, because it is used to merge the Elementary UI component and the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part.</p>
+<pre class="prettyprint">
+// Create a button in the app window
+ad-&gt;button = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;button, &quot;Rotate&quot;);
+// Add the button to the edje layout container called &quot;btn/rotate&quot;
+elm_object_part_content_set(ad-&gt;layout, &quot;btn/rotate&quot;, ad-&gt;button);
+evas_object_show(ad-&gt;button);
+
+// Create up button in the app window
+ad-&gt;btn_up = elm_button_add(ad-&gt;win);
+// Add the button to the edje layout container called &quot;btn/grow&quot;
+elm_object_text_set(ad-&gt;btn_up, &quot;Grow&quot;);
+elm_object_part_content_set(ad-&gt;layout, &quot;btn/grow&quot;, ad-&gt;btn_up);
+evas_object_show(ad-&gt;btn_up);
+</pre>
+</li>
+<li>
+<p>Create the animation target in the EDC file.</p>
+<p>The following example shows the part initialization and the <span style="font-family: Courier New,Courier,monospace">default</span> state.</p>
+<pre class="prettyprint">
+// Animation target
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+
+&nbsp;&nbsp;&nbsp;// Default state
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image { normal: &quot;tizen-logo.png&quot;; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255; // Red
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.3 0.3; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.7 0.4; }
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>This part is an image displaying a big Tizen logo, placed on the top of the screen more or less centered.</p>
+</li>
+<li>
+<p>Create a state to change the color and add the <span style="font-family: Courier New,Courier,monospace">map</span> block.</p>
+<p>This part changes the color to green and defines the <span style="font-family: Courier New,Courier,monospace">map</span>. This statement makes rotations possible on an Edje <span style="font-family: Courier New,Courier,monospace">part</span>. Rotations are done around the X, Y, or Z axes. In this example, the map is enabled and a 0&#176; rotation is applied around each axis.</p>
+<pre class="prettyprint">
+// rotate state
+description 
+{
+&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+
+&nbsp;&nbsp;&nbsp;map 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable map on the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable smooth rendering
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable perspective
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Apply rotations on the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.x: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.y: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.z: 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;color: 0 255 0 255; // Green
+}
+</pre>
+</li>
+<li>
+<p>Add a state with a rotation around the Z axis of 360&#176;.</p>
+<p>This state inherits from the <span style="font-family: Courier New,Courier,monospace">default</span> state properties and adds a rotation around the Z axis.</p>
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 1.0;
+&nbsp;&nbsp;&nbsp;inherit: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;map.rotation.z: 360;
+}
+</pre>
+</li>
+<li>
+<p>Add a state to the other button for the grow animation. Change the size of the animation target and add an offset.</p>
+<pre class="prettyprint">
+// grow state
+description 
+{
+&nbsp;&nbsp;&nbsp;state: &quot;grow&quot; 0.0;
+&nbsp;&nbsp;&nbsp;color: 0 0 255 255; // Blue
+&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0.3 0.3;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.7 0.4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0.3 0.3;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>Create the programs to make all these states animate.</p>
+<p>To make the rotation animation smoother, create and chain several <span style="font-family: Courier New,Courier,monospace">program</span> blocks with different durations.</p>
+<ol class="a">
+
+<li><p>Create the main program.</p>
+<p>The main program goes from the <span style="font-family: Courier New,Courier,monospace">default</span> state to the <span style="font-family: Courier New,Courier,monospace">rotate 0.0</span> state in 0.2 seconds.</p>
+<p>Note that the states are all named the same way (<span style="font-family: Courier New,Courier,monospace">rotate</span>) but not with the same version. The version allows you to have more than one state with the same name, in fact, the actual name of the state is the name plus the version.</p>
+<p>The program starts when the <span style="font-family: Courier New,Courier,monospace">btn/rotate</span> part is clicked with any mouse button.</p>
+<pre class="prettyprint">
+// Change the color of the target to green
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;rotate,target&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 0.2;
+&nbsp;&nbsp;&nbsp;after: &quot;rotate,target,2&quot;;
+}
+</pre>
+
+</li>
+<li>
+<p>Create the 2nd program.</p>
+<p>When the main program animation ends, it calls the next program called <span style="font-family: Courier New,courier,monospace">rotate,target,2</span>. This program sets the part state to <span style="font-family: Courier New,Courier,monospace">rotate 1.0</span> in 0.7 seconds.</p>
+<pre class="prettyprint">
+// Rotate 360&#176;
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;rotate,target,2&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 0.7;
+&nbsp;&nbsp;&nbsp;after: &quot;rotate,end&quot;;
+}
+</pre>
+</li>
+<li>
+<p>Create the 3rd program.</p>
+<p>When the 2nd program animation ends, it calls the next program called <span style="font-family: Courier New,Courier,monospace">rotate,end</span>. It is the last program of the rotation effect, and it sets the state to <span style="font-family: Courier New,Courier,monospace">rotate 0.0</span> very fast.</p>
+<pre class="prettyprint">
+// Go back to the normal
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;rotate,end&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+}
+</pre>
+</li>
+<li>
+<p>Create the last program, which is the grow effect that switches from one state to another.</p>
+<p>The program starts when the <span style="font-family: Courier New,Courier,monospace">btn/grow</span> part is clicked, and it goes from the current state to <span style="font-family: Courier New,Courier,monospace">grow 1.0</span> in one second. In this program, both size and color change during the transition. At the end, it calls the <span style="font-family: Courier New,Courier,monospace">go,default</span> program.</p>
+<pre class="prettyprint">
+// Grow the target and go back to normal state
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;grow,target&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;btn/grow&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;grow&quot; 1.0;
+&nbsp;&nbsp;&nbsp;after: &quot;go,default&quot;;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+}
+</pre>
+</li>
+<li>
+<p>Return to the <span style="font-family: Courier New,Courier,monospace">default</span> state.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">go,default</span> program sets the state back to <span style="font-family: Courier New,Courier,monospace">default</span> for the animation target.</p>
+<pre class="prettyprint">
+// Go back to normal (default) state
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;go,default&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 1.0;
+}
+</pre>
+</li>
+</ol>
+</li>
+</ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</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>
diff --git a/org.tizen.ui.practices/html/native/efl/edje_color_n.htm b/org.tizen.ui.practices/html/native/efl/edje_color_n.htm
new file mode 100644
index 0000000..2010a5e
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_color_n.htm
@@ -0,0 +1,354 @@
+<!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>Using Edje Color Classes</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Using Edje Color Classes</h1>
+
+<p>This tutorial demonstrates how you can change the color of 2 or more parts using Edje color classes.</p>
+<p>If a part is assigned with a color class, setting color values to this class causes all those parts to have their colors multiplied by the values. Setting the values to a color class affects all parts within that color class at process level, while at object level, it only affects the parts inside a specified object.</p>
+
+<p>Create a simple application with a menu and separate screens for each Edje Animation function:</p>
+
+<ol>
+<li>In the Tizen IDE, go to <strong>Tizen Native project &gt; UI application &gt; EDC</strong> and create a new project named <span style="font-family: Courier New,Courier,monospace">colorclass</span>.</li>
+
+<li>Open the <span style="font-family: Courier New,Courier,monospace">colorclass.edc</span> file and replace it with the following code:
+<pre class="prettyprint">color_classes 
+{
+&nbsp;&nbsp;&nbsp;color_class 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;A&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;color_class 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;B&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;color_class 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;C&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 125 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;}
+}
+
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textA&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: OUTLINE_SHADOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;A&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;A:&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 44;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textB&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: OUTLINE_SHADOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;B&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;B:&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 44;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textC&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: OUTLINE_SHADOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;C&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.6;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;C:&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 44;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;A&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.4 0.2;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;B&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.4 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.6 0.4;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;A&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.6 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.2;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect4&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;B&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.8 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.4;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect5&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 125 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;C&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.6 0.4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.6;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect6&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;C&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.8 0.4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.6;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.btn1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.45 1.0;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.btn2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.55 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&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;}
+}</pre>
+
+<p>Setting the color class of a part causes its colors to be multiplied by <span style="font-family: Courier New,Courier,monospace">color_class</span> <span style="font-family: Courier New,Courier,monospace">color</span> values. To see how the color class affects the shadow and outline colors, set those colors as white in the part:</p>
+
+<pre class="prettyprint">color2: 255 255 255 255;
+color3: 255 255 255 255;</pre>
+
+<p>Parts with <span style="font-family: Courier New,Courier,monospace">color_class &quot;C&quot;</span>  have different colors because their base colors are different.</p>
+</li>
+
+<li>Replace the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span>  function with the following code:
+
+<pre class="prettyprint">static void
+btn1_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;edje_color_class_set(&quot;A&quot;, rand()%255, rand()%255, rand()%255, 255,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255);
+}
+static void
+btn2_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;edje_color_class_set(&quot;B&quot;, rand()%255, rand()%255, rand()%255, 255,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255);
+}
+
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
+
+&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;// Base layout
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+&nbsp;&nbsp;&nbsp;ad-&gt;layout = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;layout, edj_path, GRP_MAIN);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;layout);
+
+&nbsp;&nbsp;&nbsp;// Buttons
+&nbsp;&nbsp;&nbsp;ad-&gt;btn1 = elm_button_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;swallow.btn1&quot;, ad-&gt;btn1);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;btn1, &quot;clicked&quot;, btn1_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;btn1, NULL, &quot;Change A&quot;);
+&nbsp;&nbsp;&nbsp;ad-&gt;btn2 = elm_button_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;swallow.btn2&quot;, ad-&gt;btn2);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;btn2, &quot;clicked&quot;, btn2_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;btn2, NULL, &quot;Change B&quot;);
+
+&nbsp;&nbsp;&nbsp;// Show the window
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}</pre>
+
+<p>Pressing the <strong>Change A</strong> button changes all colors of all parts with <span style="font-family: Courier New,Courier,monospace">color_class</span>  set as <span style="font-family: Courier New,Courier,monospace">&quot;A&quot; </span> but does not affect other parts. The actual <span style="font-family: Courier New,Courier,monospace">color</span>, <span style="font-family: Courier New,Courier,monospace">color2</span>, and <span style="font-family: Courier New,Courier,monospace">color3</span> values remain unchanged but they are multiplied by values from the color class.</p>
+<p>You can omit the color class declaration in the <span style="font-family: Courier New,Courier,monospace">.edc</span>  file and still use it in parts. There are no visual effects unless you change the color class in the code. For example, you can comment out the color class <span style="font-family: Courier New,Courier,monospace">&quot;B&quot;</span>  and see what happens when you press the <strong>Change B</strong> button.</p>
+</li>
+
+<p class="figure">Figure: Edje colorclass application</p> 
+<p align="center"><img alt="Edje colorclass application" src="../../images/edje_color.png" /></p>
+
+</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>
diff --git a/org.tizen.ui.practices/html/native/efl/edje_files_n.htm b/org.tizen.ui.practices/html/native/efl/edje_files_n.htm
new file mode 100644
index 0000000..6754ab6
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_files_n.htm
@@ -0,0 +1,213 @@
+<!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>Handling Edje Files</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+		<li><a href="#init">Initializing the Application</a></li>
+		<li><a href="#load">Loading the Collection List from an EDJ File</a></li>
+		<li><a href="#create">Creating an Edje Object</a></li>
+		</ul>	
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Handling Edje Files</h1>
+
+<p>This tutorial demonstrates how you can manage EDJ files. An EDJ file is a specific eet file that collects layouts. The Edje layout is called <span style="font-family: Courier New,Courier,monospace">Style</span> and created using the <a href="edc_part_block_n.htm">EDC language</a>. The file that contains the layout collection called <span style="font-family: Courier New,Courier,monospace">Theme</span>. </p>
+
+<h2 id="init" name="init">Initializing the Application</h2>
+
+<p>The following example shows a typical Elementary application that creates a window entitled <span style="font-family: Courier New,Courier,monospace">Genlist Basic Tutorial</span>. It is consisted of a conformant widget that contains a naviframe widget. The genlist goes inside the naviframe.</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
+
+&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, ad);
+
+&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;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;navifr = elm_naviframe_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;navifr);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;navifr, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Genlist
+&nbsp;&nbsp;&nbsp;ad-&gt;itc = elm_genlist_item_class_new();
+&nbsp;&nbsp;&nbsp;ad-&gt;itc-&gt;func.text_get =_genlist_item_text_get;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;genlist = elm_genlist_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;genlist);
+
+&nbsp;&nbsp;&nbsp;// Show window after base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Initialize UI resources and application data
+&nbsp;&nbsp;&nbsp;// If this function returns true, the main loop of application starts
+&nbsp;&nbsp;&nbsp;// If this function returns false, the application is terminated
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}</pre>
+
+<p>Declare the <span style="font-family: Courier New,Courier,monospace">struct appdata</span>:</p>
+
+<pre class="prettyprint">typedef struct appdata
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *conform;
+&nbsp;&nbsp;&nbsp;Evas_Object *navifr;
+&nbsp;&nbsp;&nbsp;Evas_Object *genlist;
+&nbsp;&nbsp;&nbsp;Eina_List *list;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
+} 
+appdata_s;</pre>
+
+<h2 id="load" name="load">Loading the Collection List from an EDJ File</h2>
+
+<p>Edje provides the functionality to manipulate the EDJ files. First, get the list of styles from EDJ file:</p>
+ 
+<pre class="prettyprint">// Get the collection list from the EDJ file
+app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ad-&gt;list = edje_file_collection_list(edj_path);</pre>
+
+<p>When you do not use the collection list, delete it:</p>
+
+<pre class="prettyprint">static void
+win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;// Free the collection list
+&nbsp;&nbsp;&nbsp;edje_file_collection_list_free(ad-&gt;list);
+&nbsp;&nbsp;&nbsp;ui_app_exit();
+}</pre>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The list returned after using the <span style="font-family: Courier New,Courier,monospace">edje_file_collection_list()</span> function must only be deleted using the <span style="font-family: Courier New,Courier,monospace">edje_file_collection_list_free()</span> function.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>Add the item in the genlist to display the list:</p>
+
+<pre class="prettyprint">EINA_LIST_FOREACH(ad-&gt;list, l, str)
+{
+&nbsp;&nbsp;&nbsp;elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, str, NULL, ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);
+}</pre>
+
+
+<h2 id="create" name="create">Creating an Edje Object</h2>
+
+<p>Implement callbacks for the clicked (tapped) event. Check that the required style exists using the <span style="font-family: Courier New,Courier,monospace">edje_file_group_exists()</span> function. The first argument is the path to EDJ file and style name. Create the Edje object and load the given style.</p>
+
+<pre class="prettyprint">static void
+_genlist_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL;
+&nbsp;&nbsp;&nbsp;const char *str;
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
+&nbsp;&nbsp;&nbsp;Evas_Object *edje_object;
+
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_selected_item_get(obj);
+
+&nbsp;&nbsp;&nbsp;str = elm_object_item_part_text_get(eoi, &quot;elm.text&quot;);
+&nbsp;&nbsp;&nbsp;// Check whether a group matching glob exists in an edje file
+&nbsp;&nbsp;&nbsp;// If there is no matching group
+&nbsp;&nbsp;&nbsp;if (!edje_file_group_exists(edj_path, str)) return;
+
+&nbsp;&nbsp;&nbsp;// Load the given style to the object
+&nbsp;&nbsp;&nbsp;edje_object = edje_object_add(evas_object_evas_get(ad-&gt;win));
+&nbsp;&nbsp;&nbsp;edje_object_file_set(edje_object, edj_path, str);
+&nbsp;&nbsp;&nbsp;// Check object loading errors
+&nbsp;&nbsp;&nbsp;if (edje_object_load_error_get(edje_object) != EDJE_LOAD_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(edje_object);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(edje_object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, edje_object);
+}</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>
diff --git a/org.tizen.ui.practices/html/native/efl/edje_intro_n.htm b/org.tizen.ui.practices/html/native/efl/edje_intro_n.htm
new file mode 100644
index 0000000..1582d13
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_intro_n.htm
@@ -0,0 +1,305 @@
+<!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>Introduction to EDC Programming</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">	
+			<li><a href="#simple_edc_file">Writing a Simple EDC File</a></li>		
+			<li><a href="#compile">Compiling the EDC File</a></li>
+			<li><a href="#howtos">Tips for Using EDC Blocks</a></li>
+		</ul>
+		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>	
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>		
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Introduction to EDC Programming</h1> 
+
+   
+<p>An EDC (Edje data collection) file is a text file that contains the code describing the position, size, and other parameters of graphical elements that compose the visual aspect of your application. In addition to graphical elements, it can also handle sounds. EDC is a description language where the objects of an interface are described by using a text description.</p>
+
+<p>The EDC file has the <span style="font-family: Courier New,Courier,monospace;">.edc</span> file extension. The syntax for the EDC files follows a simple structure of blocks that can contain properties and more blocks. For more information on the blocks and their content, see the extensive language references included in the <a href="edc_part_block_n.htm">EDC Reference documentation</a>.</p>
+
+
+<h2 id="simple_edc_file" name="simple_edc_file">Writing a Simple EDC File</h2>
+
+<p>The following example shows the basic structure of an EDC file:</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;my_group&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>An EDC file is a collection of groups that contain parts and programs:</p>
+
+<ul><li>A group can define the content of the entire screen of your application, or some smaller section of it. The group is identified with a name.</li>
+
+<li>The parts within the group correspond to the graphical elements on the screen. Each part can have several states that describe a specific position, size, and visual aspect of the element.</li>
+<li>The programs within the group contain the program code related to the graphical elements, such as interaction with the main application through signals. Animations are also defined within a program (for example, changing a part state using an animated transition).</li>
+</ul>
+
+<p>The state of the part is defined in the <span style="font-family: Courier New,Courier,monospace;">description</span> field:</p>
+
+<pre class="prettyprint">
+part
+{
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state1&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The following example shows an EDC file that contains only 1 part and 1 program. The part is a rectangle with a blue state and a red state, and the program changes the state from blue to red when the user clicks the rectangle:</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;example&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the type to RECT (rectangle)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Default state (blue color)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Blue color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Second state (red color)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;red&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Red color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&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;programs 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create a program
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The program is triggered on a mouse click
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the red state of the &quot;rectangle&quot; part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;red&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The program is triggered when a signal arrives from a specific source (in the above example, all the sources are taken into account). When launched, the program does the action (changing the part state) on the target (the rectangle).</p>
+
+<h2 id="compile" name="compile">Compiling the EDC File</h2>
+
+<p>An EDC file needs to be compiled into a <span style="font-family: Courier New,Courier,monospace;">.edj</span> file using the Edje library tools. After compiling, the <span style="font-family: Courier New,Courier,monospace;">.edj</span> file can be used by a native Tizen application.</p>
+
+<p>The following example shows how to compile the <span style="font-family: Courier New,Courier,monospace;">helloworld.edc</span> file to create a <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file using the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool:</p>
+
+<pre class="prettyprint">
+$ edje_cc helloworld.edc
+</pre>
+
+<p>The EDC file can use external files, such as sounds, images, or fonts. The path to these resources is passed to the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool so that they are included in the final <span style="font-family: Courier New,Courier,monospace;">.edj</span> file:</p>
+
+<pre class="prettyprint">
+$ edje_cc -sd $SOUNDS_DIR -fd $FONTS_DIR -id $IMAGES_DIR
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">SOUNDS_DIR</span>, <span style="font-family: Courier New,Courier,monospace;">FONTS_DIR</span>, and <span style="font-family: Courier New,Courier,monospace;">IMAGES_DIR</span> are the paths for the sound, font, and image resources.</p>
+
+<p>The Tizen SDK automatically calls the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool during the project building, if it finds an EDC source file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> directory.</p>
+
+
+<p>The following Tizen SDK compilation log extract shows that if your EDC file uses images, they must be copied to the <span style="font-family: Courier New,Courier,monospace;">./edje/images</span> directory. Fonts and sounds go to the <span style="font-family: Courier New,Courier,monospace;">./edje/fonts</span> and <span style="font-family: Courier New,Courier,monospace;">./edje/sounds</span> directories. The SDK builds the <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> folder.</p>
+
+<pre class="prettyprint">
+Building file: ../res/edje/helloworld.edc
+Invoking: EDC Resource Compiler
+edje_cc -sd ../edje/sounds -fd ../edje/fonts -id ../edje/images ../res/edje/helloworld.edc ../res/edje/helloworld.edj
+</pre>
+
+<h2 id="howtos" name="howtos">Tips for Using EDC Blocks</h2>
+
+<p>See the following tips for using EDC blocks:</p>
+
+<ul>
+<li>To add an element on the screen:
+<p>Add a new <a href="edc_part_block_n.htm#part_block">part</a> inside the <a href="edc_part_block_n.htm#Parts">parts block</a>.</p>
+</li>
+
+<li>To use an image: 
+<p>List the image in the <a href="edc_part_block_n.htm#Images">images block</a>, make sure the <a href="edc_part_block_n.htm#part_block">part</a> has the <a href="edc_part_block_n.htm#type">IMAGE type</a>, and set the <a href="edc_part_block_n.htm#description_image_normal">normal</a> property inside the <a href="edc_part_block_n.htm#description_image">description.image</a> of the part.</p>
+</li>
+
+<li>To use the same color definitions across multiple elements:
+<p>Define a <a href="edc_part_block_n.htm#Color_classes">color class</a> and set the <a href="edc_part_block_n.htm#description_color_class">description.color_class</a> property.</p>
+</li>
+
+<li>To position and resize a part with relative and absolute positioning:
+<p>Fill in the <a href="edc_part_block_n.htm#description_rel1_2">rel1 and rel2</a> structures inside the <a href="edc_part_block_n.htm#description">description</a> block of the part.</p>
+</li>
+
+<li>To hide a part:
+<p>Set the <a href="edc_part_block_n.htm#description_visible">visible</a> property inside the <a href="edc_part_block_n.htm#description">description</a> block of the part to 0.</p>
+</li>
+
+<li>To animate a part:
+<ol>
+<li>Create several <a href="edc_part_block_n.htm#description">description</a> blocks inside the <a href="edc_part_block_n.htm#part_block">part</a>, and give each of them a different <a href="edc_part_block_n.htm#description_state">state</a> value. Set 1 description for the initial state and 1 for the end state.</li>
+
+<li>Create a <a href="edc_part_block_n.htm#program">program</a> with an <a href="edc_part_block_n.htm#action">action</a> that is <span style="font-family: Courier New,Courier,monospace;">STATE_SET end_state 0.0;</span> and with a <a href="edc_part_block_n.htm#target">target</a> that is the <a href="edc_part_block_n.htm#part_name">name</a> of the part. You can also set a non-default <a href="edc_part_block_n.htm#transition">transition</a>.</li>
+
+<li>When defining the second <a href="edc_part_block_n.htm#description">description</a>, <a href="edc_part_block_n.htm#description_inherit">inherit</a> from the first part in order to re-use the values which are already defined.</li>
+
+<li>The <a href="edc_part_block_n.htm#after">after</a> property of the <a href="edc_part_block_n.htm#program">program</a> block is used to trigger another program after the animation is done. It can be used to trigger another animation or to emit a signal to the C part of the program.</li>
+
+</ol>
+</li>
+
+<li>To make a genlist item theme:
+<p>Create a <a href="edc_part_block_n.htm#group_block">group</a> with one <a href="edc_part_block_n.htm#part_block">part</a> for each list item part that can be filed from the C code and set the <a href="edc_part_block_n.htm#Items">items</a> properties inside the <a href="edc_part_block_n.htm#group_block">group</a>:</p>
+
+<pre class="prettyprint">
+items: &quot;texts&quot; &quot;text_part_1 text_part_2&quot;;
+items: &quot;icons&quot; &quot;image_part_1 image_part_2&quot;;
+</pre>
+<p>On the C side, the <span style="font-family: Courier New,Courier,monospace;">text_get()</span> and <span style="font-family: Courier New,Courier,monospace;">content_get()</span> callbacks are called respectively with <span style="font-family: Courier New,Courier,monospace;">text_part_1</span> and <span style="font-family: Courier New,Courier,monospace;">text_part_2</span>, and <span style="font-family: Courier New,Courier,monospace;">image_part_1</span> and <span style="font-family: Courier New,Courier,monospace;">image_part_2</span>. </p>
+</li> 
+<li>To use the image masking effect:
+<p>EDC files support an image masking effect that applies the transparency of a mask image to a content object.</p>
+
+<p class="figure">Figure: Masking effect</p>
+<p align="center"><img alt="Masking effect" src="../../images/edc_masking.png" /></p>
+
+<p>To use the image masking effect, add 2 new <a href="edc_part_block_n.htm#part_block">part</a> blocks inside the <a href="edc_part_block_n.htm#Parts">parts</a> block to be used as content and mask. Set the mask using the <span style="font-family: Courier New,Courier,monospace;">clip_to</span> property in the content part.</p>
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+}
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
+&nbsp;&nbsp;&nbsp;clip_to: &quot;mask&quot;;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style: &quot;text_style&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&lt;br&gt;WITH&lt;br&gt;MASK&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;mask&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;mask.png&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>The content part is cropped off in the mask shape, which depends on the alpha value per pixel. The content part <a href="edc_part_block_n.htm#type">type</a> can be almost anything in the EDC files, but the mask part type can only be <span style="font-family: Courier New,Courier,monospace;">IMAGE</span>.</p>
+</li>
+</ul>
+
+ <table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/edje_manage_animation_n.htm b/org.tizen.ui.practices/html/native/efl/edje_manage_animation_n.htm
new file mode 100644
index 0000000..9b2a5be
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_manage_animation_n.htm
@@ -0,0 +1,728 @@
+<!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>Edje Animations</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+		<li><a href="#layout">Creating the Application Layout</a></li>
+		<li><a href="#logic">Creating the Application Logic</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Edje Animations</h1> 
+
+<p>This tutorial demonstrates how you can turn Edje animations on and off, pause, stop and resume them, and check the status of Edje parts.</p>
+
+
+<h2 id="layout" name="layout">Creating the Application Layout</h2>
+
+<p>Create a simple application with a menu and separate screens for each Edje Animation function:</p>
+
+<ol>
+<li>
+<p>Create a simple main layout with a swallow for demo animation and another for controls:</p>
+
+<pre class="prettyprint">collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;demo&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.demo&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.control&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.control&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.0 0.8;
+&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;}
+}
+</pre>
+</li>
+
+<li>
+<p>Create a group for the cycled animation:</p>
+<pre class="prettyprint">group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;cycled_animation&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 100 100 100 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;clicked&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 200 100 100 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;a&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;relative: 0.3 0.3;
+&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;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;red&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.35 0.7;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;relative: 0.65 1.0;
+&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;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;blue&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.7 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;relative: 1.0 0.3;
+&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;programs 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg_click&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;clicked&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;step1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;red&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;a&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;step2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;step2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;blue&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;a&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;step3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;step3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;a&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;step1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+</li>
+
+<li>
+<p>Create another group for animation that can be activated by clicking:</p>
+<pre class="prettyprint">group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;clickme&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 100 100 100 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;to: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;to: &quot;text&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;:-)&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 42;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;:-D&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_bg2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 200 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;to: &quot;text2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;to: &quot;text2&quot;;
+&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;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 200 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;Click me&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 42;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;Click me&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 42;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;programs 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;clicked&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;text3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;state2&quot; 0.00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 3.00000;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text_bg2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;return&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;text2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.00000;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text_bg2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+</li>
+</ol>
+
+<h2 id="logic" name="logic">Creating the Application Logic</h2>
+
+<ol>
+<li>Create new project named <span style="font-family: Courier New,Courier,monospace">test</span>.</li>
+
+<li>Add 2 new files to the application project:<span style="font-family: Courier New,Courier,monospace">edje_animation.h</span> and <span style="font-family: Courier New,Courier,monospace">edje_animation.c</span>.</li>
+<li>To access the application data from the newly created files, move the <span style="font-family: Courier New,Courier,monospace">appdata_s</span> structure from the <span style="font-family: Courier New,Courier,monospace">test.c</span> file to the <span style="font-family: Courier New,Courier,monospace">test.h</span> file and remove the <span style="font-family: Courier New,Courier,monospace">static</span> specifier.</li>
+
+<li>Add the following code to the <span style="font-family: Courier New,Courier,monospace">edje_animation.h</span> file:
+<pre class="prettyprint">#ifndef __edje_animation_H__
+#define __edje_animation_H__
+#include &quot;test.h&quot;
+
+typedef struct _edje_animation_item_s 
+{
+&nbsp;&nbsp;&nbsp;const char *name;
+&nbsp;&nbsp;&nbsp;Evas_Object* (*func)(appdata_s *ap);
+} 
+Edje_Animation_Menu_Item;
+
+#endif // __edje_animation_H__</pre>
+
+<p>This structure will define menu items and their callbacks.</p>
+</li>
+
+<li>
+<p>Create a global menu array in the <span style="font-family: Courier New,Courier,monospace">edje_animation.c</span> file and fill it with necessary items:</p>
+<pre class="prettyprint">Edje_Animation_Menu_Item edje_animation_items[] =
+{
+&nbsp;&nbsp;&nbsp;{&quot;test1&quot;, _test1_func },
+&nbsp;&nbsp;&nbsp;{&quot;test2&quot;, _test2_func },
+
+&nbsp;&nbsp;&nbsp;{NULL, NULL } // Do not delete
+};</pre>
+</li>
+
+<li>
+<p>Use the array to fill the  main menu:</p>
+<pre class="prettyprint">extern Edje_Animation_Menu_Item edje_animation_items[];
+
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Genlist
+&nbsp;&nbsp;&nbsp;ad-&gt;itc = elm_genlist_item_class_new();
+&nbsp;&nbsp;&nbsp;ad-&gt;itc-&gt;func.text_get =_genlist_item_text_get;
+&nbsp;&nbsp;&nbsp;ad-&gt;genlist = elm_genlist_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; edje_animation_items[i].name; ++i)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, edje_animation_items[i].name, 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_item_data_set(eoi, (void *)&amp;edje_animation_items[i]);
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+</li>
+
+<li>All examples use the same basic layout:
+<pre class="prettyprint">static void
+app_get_resource(const char *edj_file_in, char *edj_path_out, int edj_path_max)
+{
+&nbsp;&nbsp;&nbsp;char *res_path = app_get_resource_path();
+&nbsp;&nbsp;&nbsp;if (res_path) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  snprintf(edj_path_out, edj_path_max, &quot;%s%s&quot;, res_path, edj_file_in);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  free(res_path);
+&nbsp;&nbsp;&nbsp;}
+}
+
+static void
+_example_layout_create(appdata_s *ad,
+&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 *layout_group,
+&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 *demo_group,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object **layout_out,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object **animation_out)
+{
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
+
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+
+&nbsp;&nbsp;&nbsp;*layout_out = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(*layout_out, edj_path, layout_group);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(*layout_out, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;*animation_out = edje_object_add(evas_object_evas_get(ad-&gt;win));
+&nbsp;&nbsp;&nbsp;edje_object_file_set(*animation_out, edj_path, demo_group);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(*animation_out, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(*layout_out, SWALLOW_DEMO, *animation_out);
+&nbsp;&nbsp;&nbsp;evas_object_show(*animation_out);
+}</pre>
+</li>
+
+<li>You can try out the following operations to see how the application works:
+
+<ul>
+<li>Check the time for each frame.
+
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_frametime_get()</span> function allows you to check how much time is elapsed for single frame. This is a value of an internal parameter and not actual frame time. You can change it using the <span style="font-family: Courier New,Courier,monospace">edje_frametime_set()</span> function.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Changing the frame time affects all objects on the same canvas, not only on the given one.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+<p>Use the <span style="font-family: Courier New,Courier,monospace">edje_frametime_get()</span> function and <span style="font-family: Courier New,Courier,monospace">edje_frametime_set()</span> function in the <span style="font-family: Courier New,Courier,monospace">edje_animation.c</span> file:</p>
+<pre class="prettyprint">// edje_frametime_set/get
+static void
+_frametime_test_spinner_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;edje_frametime_set(elm_spinner_value_get(obj));
+}
+
+Evas_Object *
+frametime_test(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *spinner;
+&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CYCLED_ANIM, &amp;layout, &amp;animation);
+
+&nbsp;&nbsp;&nbsp;spinner = elm_spinner_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_spinner_label_format_set(spinner, &quot;Frame_t: %1.3f&quot;);
+&nbsp;&nbsp;&nbsp;double framerate = edje_frametime_get();
+&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(spinner, 0.001, 2.0);
+&nbsp;&nbsp;&nbsp;elm_spinner_step_set(spinner, 0.005);
+&nbsp;&nbsp;&nbsp;elm_spinner_value_set(spinner, framerate);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(spinner, &quot;changed&quot;, _frametime_test_spinner_changed_cb, NULL);
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, spinner);
+&nbsp;&nbsp;&nbsp;evas_object_show(spinner);
+
+&nbsp;&nbsp;&nbsp;return layout;
+}
+
+Edje_Animation_Menu_Item edje_animation_items[] =
+{
+&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},
+
+&nbsp;&nbsp;&nbsp;{NULL, NULL}
+};</pre>
+
+<p>The spinner displays the current frame time value and enables changing it. Extreme values (&gt; 0.9) are affecting animation.</p>
+
+<p class="figure">Figure: Displaying the frame time</p> 
+<p align="center"><img alt="Displaying the frame time" src="../../images/show_frametime.png" /></p>
+
+</li>
+
+<li>Pause and resume animation and check its status.
+
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_object_play_set()</span> function allows you to pause or resume animation for a given object. A resumed animation starts from the same point.</p>
+<p>To check whether the animation is paused, use the <span style="font-family: Courier New,Courier,monospace">edje_object_play_get()</span> function.</p>
+
+<pre class="prettyprint">// edje_object_play_set/get
+static void
+_play_test_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;
+&nbsp;&nbsp;&nbsp;if (edje_object_play_get(anim))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_play_set(anim, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Play&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_play_set(anim, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Pause&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+
+Evas_Object *
+play_test(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;
+&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CYCLED_ANIM, &amp;layout, &amp;animation);
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pause&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _play_test_button_cb, animation);
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+
+&nbsp;&nbsp;&nbsp;return layout;
+}
+
+Edje_Animation_Menu_Item edje_animation_items[] =
+{
+&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},
+&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;{NULL, NULL}
+};</pre>
+</li>
+
+<li>Stop the animation.
+
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_object_freeze()</span> function allows you to stop animation rendering. This function puts all changes on hold. Successive freezes are nested, requiring an equal number of thaws. Using the <span style="font-family: Courier New,Courier,monospace">edje_object_thaw()</span> function, you can apply all changes immediately.</p>
+
+<pre class="prettyprint">// edje_object_freeze/thaw
+static void
+_freeze_test_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;
+&nbsp;&nbsp;&nbsp;static int i = 0;
+&nbsp;&nbsp;&nbsp;if(!i)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = edje_object_freeze(anim);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Thaw&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = edje_object_thaw(anim);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Freeze&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+
+Evas_Object *
+freeze_test(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;
+&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CYCLED_ANIM, &amp;layout, &amp;animation);
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Freeze&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _freeze_test_button_cb, animation);
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+
+&nbsp;&nbsp;&nbsp;return layout;
+}
+
+Edje_Animation_Menu_Item edje_animation_items[] =
+{
+&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},
+&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},
+&nbsp;&nbsp;&nbsp;{&quot;freeze/thaw test&quot;, freeze_test},
+
+&nbsp;&nbsp;&nbsp;{NULL, NULL}
+};</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_freeze()</span> function and <span style="font-family: Courier New,Courier,monospace">edje_thaw()</span> function freeze or thaw all objects in the entire application.</p>
+</li>
+
+<li>Enable and disable the animation.
+
+<p>All transitions in edje programs are ignored and parts go directly to their final states.</p>
+
+<pre class="prettyprint">// edje_object_animation_set/get
+static void
+_animation_test_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;
+&nbsp;&nbsp;&nbsp;if (edje_object_animation_get(anim))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_animation_set(anim, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Turn animation on&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_animation_set(anim, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Turn animation off&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+
+Evas_Object *
+animation_test(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;
+&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CLICKME, &amp;layout, &amp;animation);
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Turn animation off&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _animation_test_button_cb, animation);
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+
+&nbsp;&nbsp;&nbsp;return layout;
+}
+
+Edje_Animation_Menu_Item edje_animation_items[] =
+{
+&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},
+&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},
+&nbsp;&nbsp;&nbsp;{&quot;freeze/thaw test&quot;, freeze_test},
+&nbsp;&nbsp;&nbsp;{&quot;animation test&quot;, animation_test},
+
+&nbsp;&nbsp;&nbsp;{NULL, NULL}
+};</pre>
+</li>
+
+<li>Get the current state of given part.
+
+<p>Parts that are in transition return the transition&#39;s starting state.</p>
+
+<pre class="prettyprint">// edje_object_part_state_get
+static void
+_state_get_test_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;
+&nbsp;&nbsp;&nbsp;const char *state;
+&nbsp;&nbsp;&nbsp;double state_val = 0;
+&nbsp;&nbsp;&nbsp;state = edje_object_part_state_get(anim, &quot;text&quot;, &amp;state_val);
+&nbsp;&nbsp;&nbsp;edje_object_part_text_set(anim, &quot;text&quot;, state);
+}
+
+Evas_Object *
+state_get_test(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;
+&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CLICKME, &amp;layout, &amp;animation);
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Get state&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _state_get_test_button_cb, animation);
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+
+&nbsp;&nbsp;&nbsp;return layout;
+}
+
+Edje_Animation_Menu_Item edje_animation_items[] =
+{
+&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},
+&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},
+&nbsp;&nbsp;&nbsp;{&quot;freeze/thaw test&quot;, freeze_test},
+&nbsp;&nbsp;&nbsp;{&quot;animation test&quot;, animation_test},
+&nbsp;&nbsp;&nbsp;{&quot;part state get test&quot;, state_get_test},
+
+&nbsp;&nbsp;&nbsp;{NULL, 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.ui.practices/html/native/efl/edje_message_signal_n.htm b/org.tizen.ui.practices/html/native/efl/edje_message_signal_n.htm
new file mode 100644
index 0000000..1e9b448
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_message_signal_n.htm
@@ -0,0 +1,457 @@
+<!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>Managing Signals and Messages</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">	
+			<li><a href="#signals">Signals</a></li>
+			<li><a href="#messages">Messages</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Managing Signals and Messages</h1> 
+
+   
+<p>Edje objects have 2 communication interfaces between the application logic (code) and GUI (theme). You can either emit a signal from the code to the theme, or create handles for the signals emitted from the theme. Signals are identified by strings. With Edje messages, you can communicate values, such as strings, float numbers, and integer numbers. Messages can also be identified by integer numbers.</p>
+
+  
+ <h2 id="signals" name="signals">Signals</h2>
+   <p>You can emit signals from code to a theme, or create handles for the signals emitted from themes. Signals are identified by strings.</p>
+   
+   <p>Using signals in the EDC file is simple. Create a program and set the signal name to the <span style="font-family: Courier New,Courier,monospace;">signal</span> attribute.</p>
+   
+   <pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.check&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
+&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;programs 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+  
+ <h3 id="emit" name="emit">Emitting Signals from the C Code</h3>
+ 
+   <p>Create the Edje Object and widget check. When a <span style="font-family: Courier New,Courier,monospace;">changed</span>  event is triggered, a signal is emitted from the C code to the EDC file.</p>
+   
+   <pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
+&nbsp;&nbsp;&nbsp;
+&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;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+&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;// Base layout
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+&nbsp;&nbsp;&nbsp;ad-&gt;edje_object = edje_object_add(evas_object_evas_get(ad-&gt;win));
+&nbsp;&nbsp;&nbsp;edje_object_file_set(ad-&gt;edje_object, edj_path, GRP_MAIN);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;ad-&gt;check = elm_check_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;edje_object_part_swallow(ad-&gt;edje_object, &quot;swallow.check&quot;, ad-&gt;check);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;check, &quot;changed&quot;, _check_toggled, ad);
+
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;edje_object);
+&nbsp;&nbsp;&nbsp;// Show the window
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+</pre>
+
+   <p>The following figure displays the result.</p>
+   
+	<p class="figure">Figure: Signal implemented on the screen</p> 
+	<p align="center"><img alt="Signal implemented on the screen" src="../../images/edje_signal1.png" /></p>
+	
+<p>The following example implements the callback for the <span style="font-family: Courier New,Courier,monospace;">changed</span> event from the widget check.</p>
+<pre class="prettyprint">
+static void
+_check_toggled(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;if (elm_check_state_get(obj))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_signal_emit(ad-&gt;edje_object, &quot;to,state,default,1&quot;, &quot;&quot;);
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_signal_emit(ad-&gt;edje_object, &quot;to,state,default,0&quot;, &quot;&quot;);
+}
+</pre>
+
+<p>The following figure displays the result.</p>
+
+	<p class="figure">Figure: Widget check status changed</p> 
+	<p align="center"><img alt="Widget check status changed" src="../../images/edje_signal2.png" /></p>
+	
+	
+<h2 id="messages" name="messages">Messages</h2>
+ 
+<p>Edje messages are used for communication between code and a given Edje object&#39;s theme. With messages, you can communicate values, such as strings, float numbers, and integer numbers. Messages can also be identified by integer numbers.</p>
+	
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">rect1</span>  part is made draggable and 2 sliders added to change the part position.</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;drag_area&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.check&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.slider_hor&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dragable 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 1 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 1 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;confine: &quot;drag_area&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description { state: &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.check&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.slider_ver&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.check&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.slider_hor&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.slider_hor&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
+&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;programs 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;drag&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Float:x, Float:y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get_drag(PART:&quot;rect1&quot;, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 2, x);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 3, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>  
+	
+	<p>Add the sliders:</p>
+	
+	<pre class="prettyprint">
+ad-&gt;slider_ver = elm_slider_add(ad-&gt;win);
+edje_object_part_swallow(ad-&gt;edje_object, &quot;swallow.slider_ver&quot;, ad-&gt;slider_ver);
+elm_slider_horizontal_set(ad-&gt;slider_ver, EINA_FALSE);
+evas_object_smart_callback_add(ad-&gt;slider_ver, &quot;changed&quot;, _slider_changed, ad);
+
+ad-&gt;slider_hor = elm_slider_add(ad-&gt;win);
+evas_object_smart_callback_add(ad-&gt;slider_hor, &quot;changed&quot;, _slider_changed, ad);
+</pre>
+
+	<p>The following figure displays the result.</p>
+	<p class="figure">Figure: Sliders added</p> 
+	<p align="center"><img alt="Sliders added" src="../../images/edje_message.png" /></p>
+	
+	<p>To handle the message in the Style, add the following script to the EDC file:</p>
+	
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;{      	
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public message(Msg_Type:type, id, ...) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((type == MSG_FLOAT_SET) &amp;&amp; (id == 1)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Float:x, Float: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;x = getfarg(2);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y = getfarg(3);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set_drag(PART:&quot;rect1&quot;, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+	
+	<p>This script is called when an incoming message is detected.</p>
+
+ <h3 id="send_message" name="send_message">Sending Messages</h3>
+ 
+	<p>Add a callback for the <span style="font-family: Courier New,Courier,monospace;">changed</span>  event to send a message to the Style:</p>
+	
+	<pre class="prettyprint">
+static void
+_slider_changed(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Edje_Message_Float_Set *msg;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;msg = malloc(sizeof(*msg) + 1 * sizeof(float));
+&nbsp;&nbsp;&nbsp;msg-&gt;count = 2;
+&nbsp;&nbsp;&nbsp;msg-&gt;val[0] = elm_slider_value_get(ad-&gt;slider_hor);
+&nbsp;&nbsp;&nbsp;msg-&gt;val[1] = elm_slider_value_get(ad-&gt;slider_ver);
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;edje_object_message_send(ad-&gt;edje_object, EDJE_MESSAGE_FLOAT_SET, 1, msg);
+&nbsp;&nbsp;&nbsp;free(msg);
+}
+</pre>
+
+<p>The same message can be sent in the opposite direction. To send messages in EDC script (Embryo – link to Embryo), use the <span style="font-family: Courier New,Courier,monospace;">sent_message()</span>  function.</p>
+	
+	<pre class="prettyprint">
+program 
+{
+&nbsp;&nbsp;&nbsp;signal: &quot;drag&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Float:x, Float:y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get_drag(PART:&quot;rect1&quot;, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 2, x);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 3, y);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+	
+	<p>2 messages are sent using the <span style="font-family: Courier New,Courier,monospace;">drag</span> signal from the <span style="font-family: Courier New,Courier,monospace;">rect1</span> part.</p>
+	
+	<p>Add a message handler in the C code:</p>
+	
+	<pre class="prettyprint">
+edje_object_message_handler_set(ad-&gt;edje_object, _message_handle, ad);
+</pre>
+	
+	<p>Add a callback:</p>
+
+	<pre class="prettyprint">
+static void
+_message_handle(void *data, Evas_Object *obj, Edje_Message_Type type,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int id, void *msg)
+{
+&nbsp;&nbsp;&nbsp;Edje_Message_Float *m;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;if (type != EDJE_MESSAGE_FLOAT) return;
+&nbsp;&nbsp;&nbsp;m = msg;
+&nbsp;&nbsp;&nbsp;if (id == 2) elm_slider_value_set(ad-&gt;slider_hor, m-&gt;val);
+&nbsp;&nbsp;&nbsp;if (id == 3) elm_slider_value_set(ad-&gt;slider_ver, m-&gt;val);
+}
+</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.practices/html/native/efl/edje_objects_n.htm b/org.tizen.ui.practices/html/native/efl/edje_objects_n.htm
new file mode 100644
index 0000000..9ea2292
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_objects_n.htm
@@ -0,0 +1,87 @@
+<!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>Edje Objects: Managing Layouts and Layout Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Edje Objects: Managing Layouts and Layout Components</h1> 
+
+   
+<p>You can build and handle layouts using Edje objects. An Edje object is a type of Evas object for displaying units, such as rectangles, lines, polygons, text, and images. Edje objects are only used in Edje and provide functions that deal with Edje layouts and layout components. Namely, there is no Edje object type in the source code for implementing an application. The objects are mainly <a href="edc_part_block_n.htm">layouts or themes defined by groups and parts</a>, and declared in EDC files. </p> 
+<p>Edje provides functions for the following features:</p>
+
+  <ul>
+ <li><a href="edje_files_n.htm">Handling Edje Files</a>
+   <p>Edje layouts are called themes and created using the EDC language. The EDC language is declarative and must be compiled before being used. The output of this compilation is an EDJ file, which can be loaded by Edje, and the result is an Edje object.</p></li>
+   
+   <li><a href="edje_scaling_n.htm">Scaling Edje Objects</a>
+   <p>Edje enables you to build scalable interfaces. There are 2 types of scaling factors, which are set to neutral (1.0) values by default (no scaling, actual sizes): global and individual. Scaling affects the minimum and maximum values of the part sizes, which are multiplied. Font sizes are scaled, too.</p></li>
+   
+   <li><a href="edje_color_n.htm">Using Edje Color Classes</a>
+   <p>To change the color and text of 2 or more parts simultaneously, you can use color classes. If parts are assigned with a color class, setting the color values to this class causes all the parts to have their colors multiplied by the values. Setting the values to a color class at a process level affects all parts with that color class, while at the object level, only the parts inside a specified object are affected.</p></li>
+   
+   <li><a href="edje_text_n.htm">Using Edje Text Classes</a>
+   <p>To change the text of 2 or more parts simultaneously, you can use text classes. If parts are assigned with a text class, setting the font attributes to this class updates all these parts with the new font attributes. Setting the values to a text class at a process level affects all parts with that text class, while at the object level, only the parts inside a specified object are affected.</p></li>
+   
+   <li><a href="edje_perspective_n.htm">Using Edje Perspective</a> 
+   <p>Perspective is a graphical tool that makes 2D objects appear as 3D. The perspective can be used with all Edje objects.</p></li>
+   
+   <li><a href="edje_message_signal_n.htm">Managing Signals and Messages</a>
+   <p>Edje objects have 2 communication interfaces between the logic and GUI. You can either emit a signal from the logic to the GUI, or create handles for the signals emitted from the GUI. Signals are identified by strings. With Edje messages, you can communicate values, such as strings, float numbers, and integer numbers. Messages can also be identified by integer numbers.</p></li> 
+   
+   <li><a href="edje_manage_animation_n.htm">Managing Edje Animations</a>
+   <p>Edje has the ability to animate their objects. You can start, stop, play, pause, freeze, and thaw Edje animations, and check their status.</p></li>
+  </ul>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/edje_perspective_n.htm b/org.tizen.ui.practices/html/native/efl/edje_perspective_n.htm
new file mode 100644
index 0000000..31bb4d3
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_perspective_n.htm
@@ -0,0 +1,486 @@
+<!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>Using Edje Perspective</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">	
+			<li><a href="#application_skeleton">Creating the Basic Application</a></li>
+			<li><a href="#play">Playing with the Perspective</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Using Edje Perspective</h1> 
+
+   
+<p>This tutorial demonstrates how you can create a 3D projection of a 2D object.</p> 
+<p>Edje Perspective is a graphical tool that makes 2D objects appear like they have a 3D appearance.</p>
+<p>Edje Perspective can be used in all Edje objects to create and configure a perspective objects and to set the to an Edje object or a canvas, affecting all the objects within that have no specific perspective already defined.</p>
+
+  <h2 id="application_skeleton" name="application_skeleton">Creating the Basic Application</h2>
+  <p>The perspective application has buttons to move the Edje object and change its perspective. The Edje object is a 2D object that changes its position so that the perspective point can be applied.</p>
+  
+ <table>
+  <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The loaded Edje object must have the perspective option enabled in its EDC source code.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+  <p>Create a simple Edje object that has 4 states: left-top, right-top, left-bottom, and right-bottom. Clicking a button emits signals into the object and makes the object move.</p>
+  
+  <ol>
+  <li>
+  
+  <p>The following example implements the Edje object:</p>
+  
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;example/group&quot;;
+&nbsp;&nbsp;&nbsp;min: 480 320;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;           
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;offset: -5 -5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;offset: 4 4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map 
+&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;on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
+&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;x: 45;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 15;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 200 200 200 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;Perspective example&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 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;map 
+&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;on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
+&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;x: 45;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 15;
+&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;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;right&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;bottom&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;bottomright&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;programs 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,right&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,1,0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;right&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,0,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;bottom&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,bottomright&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,1,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;bottomright&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,default&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,0,0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,end&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;animation,end&quot; &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+</li>
+
+<li>
+<p>Create the application. Create a basic window widget that is going to be loaded and created in the main starting function:</p>
+
+<pre class="prettyprint">
+// Window
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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);
+}
+</pre> 
+</li>
+
+<li>
+<p>Add a conformant and set the main layout of the application. </p>
+<p>The main layout is described in the EDC part and consists of 2 swallows. The first swallow has the Edje object loaded into it. The second contains a box of buttons to manipulate the perspective of the Edje object.</p>
+
+<pre class="prettyprint">
+// Conformant
+ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
+evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+evas_object_show(ad-&gt;conform);
+
+// Base layout
+app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ad-&gt;layout = elm_layout_add(ad-&gt;win);
+elm_layout_file_set(ad-&gt;layout, edj_path, GRP_MAIN);
+evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
+eext_object_event_callback_add(ad-&gt;layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+elm_object_content_set(ad-&gt;conform, ad-&gt;layout);
+</pre> 
+</li>
+
+<li>
+<p>Create the Edje object on Evas using the <span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get()</span> function. This function is very useful because you must operate on the canvas, but have only an object pointer to a window object.</p>
+
+<pre class="prettyprint">
+Evas *evas;
+evas = evas_object_evas_get(ad-&gt;win);
+ad-&gt;edje_obj = edje_object_add(evas);
+</pre> 
+</li>
+
+<li>
+<p>Instantiate a new Edje object by creating a new Edje smart object and returning its <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> handle:</p>
+
+<pre class="prettyprint">
+ad-&gt;edje_obj = edje_object_add(evas);
+</pre>
+</li>
+
+<li>
+<p>An Edje object is useless without a source file set to it, so use the <span style="font-family: Courier New,Courier,monospace;">edje_object_file_set()</span> function to set the object into the main layout:</p>
+
+<pre class="prettyprint">
+ad-&gt;edje_obj = edje_object_add(evas);
+edje_object_file_set(ad-&gt;edje_obj, edj_path, &quot;example/group&quot;);
+evas_object_move(ad-&gt;edje_obj, 0, 0);
+evas_object_show(ad-&gt;edje_obj);
+elm_object_part_content_set(ad-&gt;layout, &quot;swallow&quot;, ad-&gt;edje_obj);
+</pre>
+
+<p class="figure">Figure: Main layout with the swallow part highlighted</p> 
+<p align="center"><img alt="Main layout with the swallow part highlighted" src="../../images/perspective_swallow.png" /></p>  
+</li>
+
+<li>
+<p>Create the actual perspective object, define its position, focal distance and Z plane position, and set it as global:</p>
+
+<pre class="prettyprint">
+ad-&gt;ps = edje_perspective_new(evas);	
+edje_perspective_set(ad-&gt;ps, 160, 320, 0, ad-&gt;focal);
+edje_perspective_global_set(ad-&gt;ps, EINA_TRUE);
+</pre>
+
+<p>To set the perspective of the Edje object, instead of setting it as global to the entire canvas, you can use the <span style="font-family: Courier New,Courier,monospace">edje_object_perspective_set()</span> function.
+</p>
+</li>
+
+<li>
+<p>Create a new perspective in the canvas by setting up the transformation for the perspective object:</p>
+
+<pre class="prettyprint">
+void 
+edje_perspective_set(Edje_Perspective * ps, Evas_Coord px, Evas_Coord py, Evas_Coord z0, Evas_Coord foc)
+</pre>
+
+<p>This sets the parameters of the perspective transformation. X, Y, and Z values are used. The <span style="font-family: Courier New,Courier,monospace">px</span> and <span style="font-family: Courier New,Courier,monospace">py</span> points specify the infinite distance point in the 3D conversion, where all lines converge. The <span style="font-family: Courier New,Courier,monospace">z0</span> point specifies the Z value at which there is a 1:1 mapping between spatial coordinates and screen coordinates. Any points on the Z value do not have their X and Y values modified in the transformation. The points further away (with a higher Z value) shrink into the distance, and those that are closer expand and become bigger.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">foc</span> value determines the focal length of the camera. This is the distance between the camera lens plane and the <span style="font-family: Courier New,Courier,monospace">z0</span> Z value. This allows for some depth control. The <span style="font-family: Courier New,Courier,monospace">foc</span> value must be greater than 0.</p>
+</li>
+
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">Swallow buttons</span> layout part contains a box of buttons to manipulate the perspective of the loaded Edje object.</p>
+
+<p class="figure">Figure: Main layout with swallow buttons highlighted</p> 
+<p align="center"><img alt="Main layout with swallow buttons highlighted" src="../../images/perspective_buttons.png" /></p>  
+
+<p>Add the box and pack the buttons into it. Name the first button <strong>Global</strong> and register a callback for clicking:</p>
+
+<pre class="prettyprint">
+Evas_Object *box, *button;
+// Adding box
+box = elm_box_add(ad-&gt;layout);
+evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, 0.0);
+evas_object_size_hint_align_set(box, EVAS_HINT_FILL, 0.0);
+elm_box_horizontal_set(box, EINA_TRUE);
+evas_object_show(box);
+elm_object_part_content_set(ad-&gt;layout, &quot;swallow.buttons&quot;, box);
+
+button = elm_button_add(ad-&gt;layout);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button, &quot;move&quot;);
+evas_object_show(button);
+elm_box_pack_end(box, button);
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _on_btn_clicked, ad);
+
+button = elm_button_add(ad-&gt;layout);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button, &quot;more&quot;);
+evas_object_show(button);
+elm_box_pack_end(box, button);
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _on_btn_more_clicked, ad);
+
+button = elm_button_add(ad-&gt;layout);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button, &quot;less&quot;);
+evas_object_show(button);
+elm_box_pack_end(box, button);
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _on_btn_less_clicked, ad);
+
+ad-&gt;edje_obj = edje_object_add(evas);
+edje_object_file_set(ad-&gt;edje_obj, edj_path, &quot;example/group&quot;);
+evas_object_move(ad-&gt;edje_obj, 0, 0);
+evas_object_show(ad-&gt;edje_obj);
+elm_object_part_content_set(ad-&gt;layout, &quot;swallow&quot;, ad-&gt;edje_obj);
+</pre>
+</li>
+
+<li>
+<p>Show the main window:</p>
+
+<pre class="prettyprint">
+evas_object_show(ad-&gt;win);
+</pre>
+
+<p class="figure">Figure: Main screen</p> 
+<p align="center"><img alt="Figure: Main screen" src="../../images/perspective_screen.png" /> </p>
+
+</li>
+</ol>
+
+<h2 id="play" name="play">Playing with the Perspective</h2>
+
+<ol>
+<li>
+<p>The callback for a clicked button is converted to a signal determining where the text and rectangle must be moved:</p>
+
+<pre class="prettyprint">
+static void
+_part_move(appdata_s *ad, int dx, int dy)
+{
+&nbsp;&nbsp;&nbsp;char emission[64];
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, &quot;AAAA&quot;, &quot;x,y = %d, %d&quot;, dx, dy);
+&nbsp;&nbsp;&nbsp;snprintf(emission, sizeof(emission), &quot;move,%d,%d&quot;, dx, dy);
+&nbsp;&nbsp;&nbsp;edje_object_signal_emit(ad-&gt;edje_obj, emission, &quot;&quot;);
+}
+</pre>
+</li>
+
+<li>
+<p>The callback representing the Edje object move calls the <span style="font-family: Courier New,Courier,monospace">part_move()</span> function that directly sends a signal to the Edje part. The moving action is treated in the <span style="font-family: Courier New,Courier,monospace">program</span> according to the passed signal.</p>
+
+<pre class="prettyprint">
+static void
+_on_btn_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;static int i = 0;
+&nbsp;&nbsp;&nbsp;switch (i) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 0:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 1, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 1:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 1, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 2:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 0, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 3:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 0, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;i++;
+&nbsp;&nbsp;&nbsp;i = i%4;
+}
+</pre>
+
+<p class="figure">Figure: Moving process</p> 
+<p align="center">-><img alt="Figure: Moving process" src="../../images/moving1.png" /> <img alt="Figure: Moving process" src="../../images/moving2.png" /></p>
+</li>
+
+<li>
+<p>By clicking the <strong>More</strong> and <strong>Less</strong> buttons, you can increase or decrease the focal length of the camera:</p>
+
+<pre class="prettyprint">
+static void
+_on_btn_more_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;ad-&gt;focal += 5;
+&nbsp;&nbsp;&nbsp;edje_perspective_set(ad-&gt;ps, 160, 320, 0, ad-&gt;focal);
+&nbsp;&nbsp;&nbsp;edje_perspective_global_set(ad-&gt;ps, EINA_TRUE);
+}
+
+static void
+_on_btn_less_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;ad-&gt;focal -= 5;
+&nbsp;&nbsp;&nbsp;edje_perspective_set(ad-&gt;ps,160, 320, 0, ad-&gt;focal);
+&nbsp;&nbsp;&nbsp;edje_perspective_global_set(ad-&gt;ps, EINA_TRUE);
+}
+</pre>
+
+<p class="figure">Figure: Decreasing and increasing the focal length</p>
+
+<p align="center"><img alt="Decreasing and increasing the focal length" src="../../images/focal_length.png" /></p>
+</li>
+</ol>
+ 
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(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.practices/html/native/efl/edje_scaling_n.htm b/org.tizen.ui.practices/html/native/efl/edje_scaling_n.htm
new file mode 100644
index 0000000..694956d
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_scaling_n.htm
@@ -0,0 +1,794 @@
+<!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>Scaling Edje Objects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+		<li><a href="#init">Initializing the EDC File</a></li>
+		<li><a href="#init_app">Initializing the Application</a></li>
+		<li><a href="#global">Setting Global Scales</a></li>
+		<li><a href="#set">Setting Scales for Edje Objects</a></li>
+		<li><a href="#scales">Personal, Global, and Base Scales</a></li>
+		</ul>	
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Scaling Edje Objects</h1>
+
+<p>This demonstrates how you can scale Edje objects. Scalability is important when building user interfaces for different environments, such as mobile phones and laptops.</p>
+<p>The natural value of scale factors is 1.0. Scaling affects minimum and maximum part size and font size, and multiplies them.</p>
+
+<p>You can disable scaling of certain parts.</p>
+
+<h2 id="init" name="init">Initializing the EDC File</h2>
+
+<p>Set up and prepare the EDC source code for loading the Edje objects in your application:</p>
+
+<ol>
+<li>
+<p>To demonstrate Edje scale usability, set up 2 groups. The first group contains only one scalable part.</p>
+
+<pre class="prettyprint">group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;scale_group_1&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scalable_rect&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 16 16;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<p class="figure">Figure: First scalable group</p> 
+<p align="center"><img alt="First scalable group" src="../../images/scalable_group1.png" /></p>
+
+<p>For this example, the group is used for showing Edje&#39;s global scale.</p>
+
+<p>The other group is used for showing usability of the edje_object_scale function. The group has 2 non-scalable parts (<span style="font-family: Courier New,Courier,monospace">not_scalable_rect1</span> and <span style="font-family: Courier New,Courier,monospace">not scalable_rect2</span> ), which are related to the scalable parts. It can be seen that scalability actually changes the scalable parts and all UI can be changed according to new relatives.</p>
+
+<p>Scalability of certain parts is usually preset in the EDC source code with the <span style="font-family: Courier New,Courier,monospace">scale</span>  property:</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;scale_group_2&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;not_scalable_rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 40 40;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 40 40;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scalable_rect&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 25 19;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 25 19;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;not_scalable_rect1&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;not_scalable_rect2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 40 40;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 40 40;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;scalable_rect&quot;;
+&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;}
+}
+</pre>
+
+<p class="figure">Figure: Second scalable group</p> 
+<p align="center"><img alt="Second scalable group" src="../../images/scalable_group2.png" /></p>
+</li>
+
+<li>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">base_scale</span>  factor can be used when the whole collection in the EDC file contains it:</p>
+
+<pre class="prettyprint">collections 
+{
+&nbsp;&nbsp;&nbsp;base_scale: 1.2;
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_1&quot;;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_2&quot;;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main_layout&quot;;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+</li>
+
+<li>
+<p>An application must contain controls, such as a spinner, to change the scale and see the result.</p>
+
+<p>Add a box with 2 groups loaded as edje objects, and spinners for changing the scale values:</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;main_application&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 20;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title2&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 32;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;edje scale:&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 150 32;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;scale.swallow&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;edje object scale:&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;title2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;to_y: &quot;title1&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;to_y: &quot;title2&quot;;
+&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;}
+}
+</pre>
+
+<p class="figure">Figure: Main application layout</p> 
+<p align="center"><img alt="Main application layout" src="../../images/main_app_layout.png" /></p>
+
+<p>In the example, there are the following swallows:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">edje.swallow.content</span> is used for the box containing the Edje objects.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scale.swallow</span> is used for the spinner that changes the scale value a loaded Edje object.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scale.swallow2</span> is used for the spinner that changes the global scale, so changing this value changes the scale of all Edje objects  if they do not have their own scales set using the <span style="font-family: Courier New,Courier,monospace">edje_object_scale_set()</span> function.</li>
+</ul>
+</li>
+</ol>
+
+<h2 id="init_app" name="init_app">Initializing the Application</h2>
+
+<p>All application code lays in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function that creates and loads all objects and forms, and creates application&#39;s main look.</p>
+
+<ol>
+<li>
+<p>Create a window and get the path to the EDJ file:</p>
+
+<pre class="prettyprint">
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+if (elm_win_wm_rotation_supported_get(ad-&gt;win))
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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);
+}
+// Path to edj group with three groups
+app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+</pre>
+</li>
+
+<li>
+<p>Set the conformant containing the main layout into the window:</p>
+
+<pre class="prettyprint">
+ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
+evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+evas_object_show(ad-&gt;conform);
+// Main layout
+ad-&gt;main_layout = elm_layout_add(ad-&gt;win);
+evas_object_size_hint_weight_set(ad-&gt;main_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_layout_file_set(ad-&gt;main_layout, edj_path, &quot;main_application&quot;);
+elm_object_content_set(ad-&gt;conform, ad-&gt;main_layout);
+evas_object_show(ad-&gt;main_layout);
+app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+</pre>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">If you have layout for your window written in the EDC file, use and load it as Layout with Elementary layout API (using, for example, the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> , <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> , and <span style="font-family: Courier New,Courier,monospace">elm_layout_file_set()</span>  functions).</td> 
+    </tr> 
+   </tbody> 
+  </table>
+</li>
+
+<li>
+<p>Add the box and set it into the <span style="font-family: Courier New,Courier,monospace">edje.swallow.content</span>  main layout swallow:</p>
+
+<pre class="prettyprint">
+// Add the box
+ad-&gt;box = elm_box_add(ad-&gt;main_layout);
+evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, 0.0);
+evas_object_size_hint_align_set(ad-&gt;box, EVAS_HINT_FILL, 0.0);
+elm_box_horizontal_set(ad-&gt;box, EINA_TRUE);
+evas_object_show(ad-&gt;box);
+// Set the box into the main layout
+elm_object_part_content_set(ad-&gt;main_layout, &quot;edje.swallow.content&quot;, ad-&gt;box);</pre>
+</li>
+
+<li>
+<p>Load the Edje objects:</p>
+
+<pre class="prettyprint">
+// Add group1
+ad-&gt;edje_object_1 = edje_object_add(evas_object_evas_get(ad-&gt;win));
+evas_object_size_hint_weight_set(ad-&gt;edje_object_1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+edje_object_file_set(ad-&gt;edje_object_1, edj_path, &quot;scale_group_1&quot;);
+// Check object loading errors
+if (edje_object_load_error_get(ad-&gt;edje_object_1) != EDJE_LOAD_ERROR_NONE)
+{
+&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;edje_object_1);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+evas_object_show(ad-&gt;edje_object_1);</pre>
+</li>
+
+<li>
+<p>Pack the Edje objects into the box:</p>
+
+<pre class="prettyprint">
+elm_box_pack_end(ad-&gt;box, ad-&gt;edje_object_1);
+elm_box_pack_end(ad-&gt;box, ad-&gt;edje_object_2);</pre>
+</li>
+
+<li>
+<p>Add 2 spinners that change the scale values:</p>
+
+<pre class="prettyprint">
+ad-&gt;edje_scale = elm_spinner_add(ad-&gt;win);
+evas_object_size_hint_weight_set(ad-&gt;edje_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(ad-&gt;edje_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);
+elm_spinner_min_max_set(ad-&gt;edje_scale, 1, 300);
+elm_spinner_step_set(ad-&gt;edje_scale, 10);
+evas_object_show(ad-&gt;edje_scale);
+elm_spinner_value_set(ad-&gt;edje_scale, 100);
+elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow&quot;, ad-&gt;edje_scale);
+
+ad-&gt;edje_object_scale = elm_spinner_add(ad-&gt;win);
+evas_object_size_hint_weight_set(ad-&gt;edje_object_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(ad-&gt;edje_object_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);
+elm_spinner_min_max_set(ad-&gt;edje_object_scale, 1, 300);
+elm_spinner_step_set(ad-&gt;edje_object_scale, 10);
+evas_object_show(ad-&gt;edje_object_scale);
+elm_spinner_value_set(ad-&gt;edje_object_scale, 100);
+elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow2&quot;, ad-&gt;edje_scale);</pre>
+</li>
+
+<li><p>Display the window:</p>
+
+<pre class="prettyprint">
+evas_object_show(ad-&gt;win);</pre>
+
+<p class="figure">Figure: Scale testing application</p> 
+<p align="center"><img alt="Scale testing application" src="../../images/scale_testing_app.png" /></p>
+</li>
+</ol>
+
+
+<h2 id="global" name="global">Setting Global Scales</h2>
+
+<ol>
+<li>
+<p>Add a callback for the second spinner that changes Edje global scale value and, as a result, affects all loaded Edje objects:</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Add scale spinners
+&nbsp;&nbsp;&nbsp;ad-&gt;edje_object_scale = elm_spinner_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;edje_object_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(ad-&gt;edje_object_scale, 1, 300);
+&nbsp;&nbsp;&nbsp;elm_spinner_step_set(ad-&gt;edje_object_scale, 10);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_object_scale);
+&nbsp;&nbsp;&nbsp;elm_spinner_value_set(ad-&gt;edje_object_scale, 100);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow2&quot;, ad-&gt;edje_object_scale);
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;edje_object_scale, &quot;changed&quot;, _on_global_scale_change, ad);
+}</pre>
+</li>
+
+<li>
+
+<p>Set the scale using the <span style="font-family: Courier New,Courier,monospace">edje_scale_set()</span> function:</p>
+
+<pre class="prettyprint">static void
+_on_global_scale_change(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;edje_scale_set(elm_spinner_value_get(obj) / 100);
+}</pre>
+
+<p>By clicking the spinner buttons, you can change the scale of all loaded Edje objects. The Edje object on the right has its own scale values, so global scale values do not apply to it.</p>
+
+<p class="figure">Figure: Different global scales</p> 
+<p align="center"><img alt="Different global scales" src="../../images/global_scales.png" /></p>
+</li>
+
+</ol>
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Using the <span style="font-family: Courier New,Courier,monospace">edje_scale_set()</span>  function that changes the global scale values can affect your whole application and destroy the UI layout. Be careful with this function.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2 id="set" name="set">Setting Scales for Edje Objects</h2>
+
+<p>Add a callback to get the value of the first spinner and apply it to the Edje object on the right:</p>
+
+<pre class="prettyprint">static void
+_on_scale_change(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;edje_object_scale_set(ad-&gt;edje_object_2, elm_spinner_value_get(obj) / 100);
+}
+
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Add scale spinners
+&nbsp;&nbsp;&nbsp;ad-&gt;edje_scale = elm_spinner_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;edje_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(ad-&gt;edje_scale, 1, 300);
+&nbsp;&nbsp;&nbsp;elm_spinner_step_set(ad-&gt;edje_scale, 10);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_scale);
+&nbsp;&nbsp;&nbsp;elm_spinner_value_set(ad-&gt;edje_scale, 100);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow&quot;, ad-&gt;edje_scale);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;edje_scale, &quot;changed&quot;, _on_scale_change, ad);
+}</pre>
+
+
+<p>By clicking on spinner buttons, you can change the scale of the second Edje object in the box.</p>
+
+<p class="figure">Figure: Edje object scales</p> 
+<p align="center"><img alt="Edje object scales" src="../../images/edje_object_scales.png" /></p>
+
+
+<h2 id="scales" name="scales">Personal, Global, and Base Scales</h2>
+
+<p>Modify the main layout and add a swallow for the buttons. The buttons are used for showing the current scale:</p>
+
+<ol>
+<li>
+<p>Modify the main layout EDC code by creating another swallow part, <span style="font-family: Courier New,Courier,monospace">swallow.buttons</span> , and modifying the <span style="font-family: Courier New,Courier,monospace">edje.swallow.content</span>  part:</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;main_application&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 20;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.buttons&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 32;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;edje scale:&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 150 32;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;scale.swallow&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;edje object scale:&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;title2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;to_y: &quot;title1&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&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;to_y: &quot;title2&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.buttons&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 60;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: -1 60;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>
+<p>Add a box with buttons and set it into the main layout:</p>
+
+<pre class="prettyprint">static void
+_edje_object_scale_get(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;char title[PATH_MAX] = {0, };
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;snprintf(title, (int)PATH_MAX, &quot;object %.2f&quot;, edje_object_scale_get(ad-&gt;edje_object_2));
+&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, title);
+}
+static void
+_edje_scale_get(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;char title[PATH_MAX] = {0, };
+&nbsp;&nbsp;&nbsp;snprintf(title, (int)PATH_MAX, &quot;global %.2f&quot;, edje_scale_get());
+&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, title);
+}
+static void
+_edje_object_base_scale_get(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;char title[PATH_MAX] = {0, };
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;snprintf(title, (int)PATH_MAX, &quot;base %.2f&quot;, edje_object_base_scale_get(ad-&gt;edje_object_2));
+&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, title);
+}
+
+static void
+create_base_gui(appdata_s *ad) 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box, *button;
+&nbsp;&nbsp;&nbsp;// Add the box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;main_layout);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, 0.0);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, 0.0);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;main_layout, &quot;swallow.buttons&quot;, box);
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;main_layout);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;object &quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_scale_get, ad);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;main_layout);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;global &quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_scale_get, ad);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;main_layout);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;base &quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_base_scale_get, ad);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+}</pre>
+
+
+<p>Clicking a button gets a specific scale and prints its value on the button. For example, clicking the <strong>Global</strong> button shows the global scale value.</p>
+
+<p class="figure">Figure: Scale values</p> 
+<p align="center"><img alt="Scale values" src="../../images/scale_values.png" /></p>
+</li>
+
+<li>
+<p>The loaded Edje object does not have its own scale value (0.00), so it uses the global scale value defined in the EFL configuration based on the device. A mobile device that is being used here, has the global scale ~1.8). The base scale is set to 1.2.</p>
+
+<pre class="prettyprint">collections 
+{
+&nbsp;&nbsp;&nbsp;base_scale: 1.2;
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_1&quot;;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_2&quot;;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main_layout&quot;;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<p class="figure">Figure: Scale values after changing the Edje object scale</p> 
+<p align="center"><img alt="Figure: Scale values after changing the Edje object scale" src="../../images/scale_values2.png" /></p>
+
+<p>After applying the scale of the new object, the global scale does not apply to this Edje object anymore. While all other objects have the scale value 1.8, the new object has the scale value 1.37.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The default base scale value is 1.0. All scale values in Edje objects, either set with the global scale value using the <span style="font-family: Courier New,Courier,monospace">edje_scale_set()</span> function or with a personal scale factor using the <span style="font-family: Courier New,Courier,monospace">edje_object_scale_set()</span> function are divided by base scale.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p class="figure">Figure: Base scale</p> 
+<p align="center"><img alt="Base scale" src="../../images/base_scales.png" /></p>
+
+<p>Setting a scale value that is same as the base scale makes the layout appear as if it had the scale value 1.0.</p>
+</li>
+</ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.practices/html/native/efl/edje_text_n.htm b/org.tizen.ui.practices/html/native/efl/edje_text_n.htm
new file mode 100644
index 0000000..f37599a
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/edje_text_n.htm
@@ -0,0 +1,712 @@
+<!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>Using Edje Text Classes</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+		<li><a href="#create">Creating the Basic Application</a></li>
+		<li><a href="#display">Getting, Deleting, and Displaying Text Classes</a></li>
+		<li><a href="#layout">Application Layout</a></li>
+		<li><a href="#all">Setting the Text Class for All Edje Objects</a></li>
+		<li><a href="#specific">Setting the Text Class of a Specific Object</a></li>
+		<li><a href="#get">Getting the Text Class of an Object</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Using Edje Text Classes</h1>
+
+<p>This tutorial demonstrates how you can change the text of 2 or more parts using Edje text classes.</p>
+<p>If a part is assigned with a text class, setting font attributes to this class updates all those parts with the new font attributes. Setting the values to a text class affects all parts in that text class at process level, while at the object level, it only affects the parts inside a specified object.</p>
+
+<h2 id="create" name="create">Creating the Basic Application</h2>
+
+<p>The example application has 2 screen with different UIs. The screens demonstrate different text class APIs. The screen contains a genlist with 2 items set into a naviframe. Clicking an item opens displays a screen. Pressing the hardware <strong>Back</strong> button displays the main screen with the genlist.</p>
+
+<ol>
+<li>Create the basic application:
+
+<pre class="prettyprint">static void
+win_back_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_pop(ad-&gt;navifr);
+}</pre>
+</li>
+
+<li>
+<p>Get the path to the EDC file that contains the main layout and the Edje object to load:</p>
+
+<pre class="prettyprint">static void
+app_get_resource(const char *edj_file_in, char *edj_path_out, int edj_path_max)
+{
+&nbsp;&nbsp;&nbsp;char *res_path = app_get_resource_path();
+&nbsp;&nbsp;&nbsp;if (res_path) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(edj_path_out, edj_path_max, &quot;%s%s&quot;, res_path, edj_file_in);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(res_path);
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<p>Create a window and register an event callback that calls the <span style="font-family: Courier New,Courier,monospace">win_back_cb()</span> function after pressing the <strong>Back</strong> button on the device:</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = 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;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+}
+</pre>
+</li>
+
+<li>
+<p>Add a conformant that contains the naviframe and genlist. Add item selection callbacks for the genlist items to show different screens:</p>
+
+<pre class="prettyprint">static char *
+_genlist_item_text_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;Eina_Stringshare *text_class = (Eina_Stringshare *)data;
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(text_class);
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+}
+
+static void
+create_base_gui(appdata_s *ad)
+{
+&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;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;navifr = elm_naviframe_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;navifr);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;navifr, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Genlist
+&nbsp;&nbsp;&nbsp;ad-&gt;itc = elm_genlist_item_class_new();
+&nbsp;&nbsp;&nbsp;ad-&gt;itc-&gt;func.text_get =_genlist_item_text_get;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;genlist = elm_genlist_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Text Class List&quot;), 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, NULL, ad);
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Object Text Class API&quot;), 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, NULL, ad);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;genlist);
+
+&nbsp;&nbsp;&nbsp;// Show the window
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}</pre>
+
+
+<p>The following figure shows the result.</p>
+
+<p class="figure">Figure: Main screen</p> 
+<p align="center"><img alt="Main screen" src="../../images/edje_text_main.png" /></p></li>
+</ol>
+
+<h2 id="display" name="display">Getting, Deleting, and Displaying Text Classes</h2>
+
+<p>The first screen of the application shows an example of the <span style="font-family: Courier New,Courier,monospace">edje_text_class_del()</span>, <span style="font-family: Courier New,Courier,monospace">edje_text_class_list()</span>, and <span style="font-family: Courier New,Courier,monospace">edje_text_class_get()</span> functions.</p>
+
+<p>The following code implements the layout:</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;class_list_application&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_view&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;text part number 3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 20;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.list&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;text_view&quot;;
+&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;}
+}
+</pre>
+
+<p class="figure">Figure: First screen EDC layout</p> 
+<p align="center"><img alt="First screen EDC layout" src="../../images/first_screen_edc.png" /></p>
+
+<p>The first part (<span style="font-family: Courier New,Courier,monospace">text_view</span>) shows the properties of the selected text class. Clicking a text class in the genlist shows its properties, such as font, size, and name in the text part.</p>
+
+<ol>
+<li>
+<p>Add the base genlist:</p>
+
+<pre class="prettyprint">
+ad-&gt;genlist = elm_genlist_add(ad-&gt;win);
+evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Text Class List&quot;), 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;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, _create_class_list_gui, ad);
+eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Object Text Class API&quot;), 
+&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, ELM_GENLIST_ITEM_NONE, NULL, ad);
+elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;genlist);
+</pre>
+</li>
+
+<li>
+<p>Load the layout:</p>
+
+<pre class="prettyprint">static void
+_create_class_list_gui(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data; // Get application&#39;s data
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, }; // path to edc file
+&nbsp;&nbsp;&nbsp;Eina_List *l;  //  Used later
+&nbsp;&nbsp;&nbsp;const char *str; // Used later
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL; // Used later
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+
+&nbsp;&nbsp;&nbsp;// Main layout
+&nbsp;&nbsp;&nbsp;ad-&gt;gui1_layout = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;gui1_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;gui1_layout, edj_path, &quot;class_list_application&quot;);
+}
+</pre>
+</li>
+
+<li>
+<p>Get a list of all text classes loaded into the system.In the following example, the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> list is a field in application data.</p>
+
+<pre class="prettyprint">ad-&gt;list = edje_text_class_list();</pre>
+</li>
+
+<li>
+<p>Create the genlist:</p>
+
+<pre class="prettyprint">// Genlist
+ad-&gt;itc_text_classes = elm_genlist_item_class_new();
+ad-&gt;itc_text_classes-&gt;func.text_get =_genlist_item_text_get;
+
+ad-&gt;genlist_text_classes = elm_genlist_add(ad-&gt;win);
+evas_object_size_hint_weight_set(ad-&gt;genlist_text_classes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+</li>
+
+<li>
+<p>Go through the text class list and insert each text class to the genlist. Set the genlist into the main layout of the current screen and show it in the naviframe:</p>
+
+<pre class="prettyprint">
+EINA_LIST_FOREACH(ad-&gt;list, l, str)
+{
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist_text_classes, ad-&gt;itc_text_classes, str, NULL, ELM_GENLIST_ITEM_NONE, NULL, ad);
+&nbsp;&nbsp;&nbsp;elm_object_item_data_set(eoi, (void *)str);
+}
+elm_object_part_content_set(ad-&gt;gui1_layout, &quot;edje.swallow.list&quot;, ad-&gt;genlist_text_classes);
+evas_object_show(ad-&gt;genlist_text_classes);
+elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui1_layout);
+</pre>
+
+
+<p>Clicking <strong>Text Class List</strong> displays the screen with a genlist of text classes.</p>
+
+<p class="figure">Figure: Text class list</p> 
+<p align="center"><img alt="Text class list" src="../../images/text_class_list.png" /></p>
+</li>
+
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_text_class_del()</span> function deletes a text class (in the following example, <span style="font-family: Courier New,Courier,monospace">T094</span>):</p>
+
+<pre class="prettyprint">
+// Main layout
+ad-&gt;gui1_layout = elm_layout_add(ad-&gt;win);
+evas_object_size_hint_weight_set(ad-&gt;gui1_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_layout_file_set(ad-&gt;gui1_layout, edj_path, &quot;class_list_application&quot;);
+evas_object_show(ad-&gt;gui1_layout);
+
+// Get the collection list
+app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+edje_text_class_del(&quot;T094&quot;);
+ad-&gt;list = edje_text_class_list();
+
+// Genlist
+ad-&gt;itc_text_classes = elm_genlist_item_class_new();
+ad-&gt;itc_text_classes-&gt;func.text_get =_genlist_item_text_get;
+</pre>
+
+<p class="figure">Figure: Text class list after deleting a class</p> 
+<p align="center"><img alt="Text class list after deleting a class" src="../../images/text_class_list_del.png" /></p>
+</li>
+
+<li>
+<p>Every text class contains specific information, such as the font name, font size, and text class name. To show the properties when the text class name is clicked, create a callback that uses the <span style="font-family: Courier New,Courier,monospace">edje_text_class_get()</span> function:</p>
+
+<pre class="prettyprint">static void
+_genlist_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;char text_class[PATH_MAX] = {0, };
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL;
+&nbsp;&nbsp;&nbsp;const char *str;
+&nbsp;&nbsp;&nbsp;char *font;
+&nbsp;&nbsp;&nbsp;Evas_Font_Size size;
+
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_selected_item_get(obj);
+&nbsp;&nbsp;&nbsp;str = elm_object_item_data_get(eoi);
+&nbsp;&nbsp;&nbsp;edje_text_class_get(str, &amp;font, &amp;size);
+&nbsp;&nbsp;&nbsp;snprintf(text_class, PATH_MAX, &quot;%s font{%s} size{%d}&quot;, str, font, size);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;gui1_layout, &quot;text_view&quot;, text_class);
+}</pre>
+</li>
+
+<li>
+<p>Register the added callback function in the genlist:</p>
+
+<pre class="prettyprint">
+EINA_LIST_FOREACH(ad-&gt;list, l, str)
+{
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist_text_classes, ad-&gt;itc_text_classes, str, NULL, ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);
+&nbsp;&nbsp;&nbsp;elm_object_item_data_set(eoi, (void *)str);
+}
+elm_object_part_content_set(ad-&gt;gui1_layout, &quot;edje.swallow.list&quot;, ad-&gt;genlist_text_classes);
+
+evas_object_show(ad-&gt;genlist_text_classes);
+elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui1_layout);
+</pre>
+
+<p class="figure">Figure: Displaying text class properties</p> 
+<p align="center"><img alt="Displaying text class properties" src="../../images/text_class_properties.png" /></p>
+</li>
+</ol>
+
+
+<h2 id="layout" name="layout">Application Layout</h2>
+
+<p>The second screen contains 2 Edje object with text parts containing the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class. When a text class is modified, all text parts assigned to it are changed as well.</p>
+
+<p>The following example shows a simple Edje object layout:</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;edje_example&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_example&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;text part number 3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;custom_text_class&quot;;
+&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;}
+}</pre>
+
+<ol>
+<li>
+<p>After loading the Edje objects, add a spinner for changing the font size.</p>
+
+<p>Add 2 buttons for changing the text class of a specific object or setting the font size of the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class. The <strong>Set1</strong> button sets a new size for the text class of the first Edje object and the <strong>Set2</strong> button for the second object, respectively.</p>
+
+<p>The <strong>Get1</strong> and <strong>Get2</strong> buttons get the text class properties and display them on the screen.</p>
+<p>The <strong>Global</strong> button changes the text class globally, causing all Edje object parts to be changed in case they contain the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class.</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;class_list_application&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_view&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;text: &quot;text part number 3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 20;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.list&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&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;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;text_view&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>
+<p>Create a view for the new screen:</p>
+
+<pre class="prettyprint">static void
+_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
+
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+
+&nbsp;&nbsp;&nbsp;// Main Layout
+&nbsp;&nbsp;&nbsp;ad-&gt;gui2_layout = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;gui2_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;gui2_layout, edj_path, &quot;object_text_class_application&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;gui2_layout);
+
+&nbsp;&nbsp;&nbsp;// Add group1
+&nbsp;&nbsp;&nbsp;ad-&gt;edje_object_1 = edje_object_add(evas_object_evas_get(ad-&gt;win));
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object_1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;edje_object_file_set(ad-&gt;edje_object_1, edj_path, &quot;edje_example&quot;);
+&nbsp;&nbsp;&nbsp;// Check the object loading error
+&nbsp;&nbsp;&nbsp;if (edje_object_load_error_get(ad-&gt;edje_object_1) != EDJE_LOAD_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;edje_object_1);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_object_1);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.group1&quot;, ad-&gt;edje_object_1);
+
+&nbsp;&nbsp;&nbsp;// Addgroup2
+&nbsp;&nbsp;&nbsp;ad-&gt;edje_object_2 = edje_object_add(evas_object_evas_get(ad-&gt;win));
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object_2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;edje_object_file_set(ad-&gt;edje_object_2, edj_path, &quot;edje_example&quot;);
+&nbsp;&nbsp;&nbsp;// Check object loading errors
+&nbsp;&nbsp;&nbsp;if (edje_object_load_error_get(ad-&gt;edje_object_2) != EDJE_LOAD_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;edje_object_2);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_object_2);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.group2&quot;, ad-&gt;edje_object_2);
+
+&nbsp;&nbsp;&nbsp;// Add spinner
+&nbsp;&nbsp;&nbsp;ad-&gt;spinner = elm_spinner_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;spinner, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;spinner, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(ad-&gt;spinner, 1, 64);
+&nbsp;&nbsp;&nbsp;elm_spinner_step_set(ad-&gt;spinner, 1);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;spinner);
+&nbsp;&nbsp;&nbsp;elm_spinner_value_set(ad-&gt;spinner, 10);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.spinner&quot;, ad-&gt;spinner);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui2_layout);
+}</pre>
+
+
+<p class="figure">Figure: Second application screen</p> 
+<p align="center"><img alt="Second application screen" src="../../images/text_screen_2.png" /></p></li>
+</ol>
+
+<h2 id="all" name="all">Setting the Text Class for All Edje Objects</h2>
+
+<p>To set the text class globally, use the <span style="font-family: Courier New,Courier,monospace">edje_test_class_set()</span> function:</p>
+
+<ol>
+<li>
+<p>Add a box and pack the buttons into it. Add the <strong>Global</strong> button and register a callback for clicking:</p>
+
+<pre class="prettyprint">static void
+_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box, *button;
+&nbsp;&nbsp;&nbsp;// Add the box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;gui2_layout);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, 0.0);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, 0.0);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Global&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_text_class_set, ad);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.buttons&quot;, box);
+
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui2_layout);
+}</pre>
+</li>
+
+<li>
+<p>The callback contains functions for setting the text class globally:</p>
+
+<pre class="prettyprint">static void
+_edje_text_class_set(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;edje_text_class_set(&quot;custom_text_class&quot;, &quot;Sans&quot;, elm_spinner_value_get(ad-&gt;spinner));
+}</pre>
+
+<p>Clicking the <strong>Global</strong> button recalculates all text parts in every Edje object that contains the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class and changes their size.</p>
+
+
+<p class="figure">Figure: Changing the text class globally</p> 
+<p align="center"><img alt="Changing the text class globally" src="../../images/change_text_globally.png" /></p></li>
+
+</ol>
+
+<h2 id="specific" name="specific">Setting the Text Class of a Specific Object</h2>
+
+<p>To set the text class of a specific Edje object, use the <span style="font-family: Courier New,Courier,monospace">edje_object_test_class_set()</span> function.</p>
+
+<ol>
+<li>
+<p>Add 2 more buttons, <strong>Set1</strong> and <strong>Set2</strong>.</p>
+ <p>The first button sets the text class of the first Edje object on the left, and the second sets the text class of the other object, respectively.</p>
+
+<pre class="prettyprint">static void
+_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Set1);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_set_1, ad);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Set2);
+&nbsp;&nbsp;&nbsp;evas_object_show(button); 
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_set_2, ad);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+}</pre>
+</li>
+
+<li>
+<p>Add callbacks:</p>
+
+<pre class="prettyprint">static void
+_edje_object_text_class_set_1(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;edje_object_text_class_set(ad-&gt;edje_object_1, &quot;custom_text_class&quot;, &quot;Sans&quot;, elm_spinner_value_get(ad-&gt;spinner));
+}
+
+static void
+_edje_object_text_class_set_2(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;edje_object_text_class_set(ad-&gt;edje_object_2, &quot;custom_text_class&quot;, &quot;Sans&quot;, elm_spinner_value_get(ad-&gt;spinner));
+}</pre>
+</li>
+
+<li>
+<p>Test the functionality:</p>
+
+<ol>
+<li>Set the size of the left object to 16.
+
+<p align="center"><img alt="Font size 16" src="../../images/object_size_16.png" /></p></li>
+
+<li>Set the size of the right object to 44.
+
+<p align="center"><img alt="Font size 44" src="../../images/object_size_44.png" /></p></li>
+
+<li>Set the size of the right object to 22.
+
+<p align="center"><img alt="Font size 22" src="../../images/object_size_22.png" /></p></li>
+</ol>
+</li>
+</ol>
+
+
+<h2 id="get" name="get">Getting the Text Class of an Object</h2>
+
+<p>To get the text class of a specific Edje object, use the <span style="font-family: Courier New,Courier,monospace">edje_object_test_class_get()</span> function.</p>
+
+<ol>
+<li>
+<p>Add 2 more buttons, <strong>Get1</strong> and <strong>Get2</strong>. The first gets the text class of the first Edje object on the left and sets into that object result, and the second gets the text class of the other object, respectively.</p>
+
+<pre class="prettyprint">static void
+_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Get1);
+&nbsp;&nbsp;&nbsp;evas_object_show(button); 
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_get_1, ad);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Get2);
+&nbsp;&nbsp;&nbsp;evas_object_show(button); 
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_get_2, ad);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+}</pre>
+</li>
+
+<li>
+<p>Add callbacks:</p>
+<pre class="prettyprint">static void
+_edje_object_text_class_get_1(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;char *font;
+&nbsp;&nbsp;&nbsp;Evas_Font_Size size;
+&nbsp;&nbsp;&nbsp;char text_class[PATH_MAX] = {0, };
+
+&nbsp;&nbsp;&nbsp;edje_object_text_class_get(ad-&gt;edje_object_1, &quot;custom_text_class&quot;, &amp;font, &amp;size);
+&nbsp;&nbsp;&nbsp;snprintf(text_class, PATH_MAX, &quot;font{%s} size{%d}&quot;, font, size);
+&nbsp;&nbsp;&nbsp;edje_object_part_text_set(ad-&gt;edje_object_1, &quot;text_example&quot;, text_class);
+}
+
+static void
+_edje_object_text_class_get_2(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;char *font;
+&nbsp;&nbsp;&nbsp;Evas_Font_Size size;
+&nbsp;&nbsp;&nbsp;char text_class[PATH_MAX] = {0, };
+
+&nbsp;&nbsp;&nbsp;edje_object_text_class_get(ad-&gt;edje_object_2, &quot;custom_text_class&quot;, &amp;font, &amp;size);
+&nbsp;&nbsp;&nbsp;snprintf(text_class, PATH_MAX, &quot;font{%s} size{%d}&quot;, font, size);
+&nbsp;&nbsp;&nbsp;edje_object_part_text_set(ad-&gt;edje_object_2, &quot;text_example&quot;, text_class);
+}</pre>
+
+
+<p>The following figure shows the result.</p>
+
+<p class="figure">Figure: Displaying text class changes</p> 
+<p align="center"><img alt="Displaying text class changes" src="../../images/display_text_classes.png" /></p>
+
+
+<p>Changing the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> for the first object changed its font size to 16 size, while changing the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> for the second object changes its font size to 22.</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>
diff --git a/org.tizen.ui.practices/html/native/efl/efl_overview_n.htm b/org.tizen.ui.practices/html/native/efl/efl_overview_n.htm
new file mode 100644
index 0000000..3e89915
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/efl_overview_n.htm
@@ -0,0 +1,135 @@
+<!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>EFL Overview: Getting Started with EFL UI Programming</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+		  <li><a href="#features">EFL Features</a></li>	
+		  <li><a href="#characteristic">EFL Characteristics</a></li>
+		  <li><a href="#library">EFL Libraries</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">	
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>	
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>EFL Overview: Getting Started with EFL UI Programming</h1> 
+	
+<p>EFL stands for Enlightenment Foundation Libraries. Enlightenment is a project consisting of the Enlightenment window manager, EFL libraries, and various utilities and applications. The Enlightenment team needed powerful libraries to handle, among others, rendering, main loops, and events, so EFL was introduced during the development of the Enlightenment window manager to fill these gaps. EFL is now widely used outside of the Enlightenment window manager.</p>
+
+<h2 id="features" name="features">EFL Features</h2>
+
+<p>The general UI design features include:</p>	
+<ul>
+	<li>UI component support
+	<p>You can use basic core UI components, such as buttons, genlists, and sliders, and also create a layout for the Tizen native application by using container UI components.</p></li>
+	<li>Theme support
+	<p>You can create and change a theme that is a preset package containing graphical details. Tizen supports specifying the UI look and feel through a default theme.</p></li>
+	<li>Font settings
+	<p>Tizen supports various methods to <a href="font_setting_n.htm">change the font</a> of your application to another system default font or your own font.</p></li>
+	<li>Scalability
+	<p>Elementary provides a way to <a href="ui_components_n.htm#scalability">scale UI components</a> in order to be comfortably used with a finger and to make the text more readable.</p></li>
+	<li>Event handling and main loop
+	<p>The user interface relies on callbacks designed to react to EFL events generated by the system or the user. You can <a href="event_handling_n.htm">handle various events</a>, from low-level Ecore system events to Evas smart object events that happen on object collections.</p>
+	<p>The Ecore library provides a main loop abstraction that gets you data when it is available and sends you events. You can <a href="main_loop_n.htm">handle the main loop</a> and <a href="threads_n.htm">use threads</a> with the Ecore main loop.</p></li>
+	<li>UI animating with animators and effects
+	<p>Tizen supports various methods to <a href="animation_effects_n.htm">create animations and effects</a> in your application.</p></li>
+	<li>Data types and tools support
+	<p>Tizen supports a core library for data types and some useful tools.</p></li>
+	<li>Hardware input event support
+	<p>Tizen supports the <a href="hw_input_n.htm">handling of hardware input events</a>.</p></li> 
+</ul>
+
+<h2 id="characteristic" name="characteristic">EFL Characteristics</h2>
+
+<p>EFL is aimed at not only desktop computers but also touch-screen and embedded devices, making EFL applications portable to many different types of devices. Applications do not need to care about the types of devices and profiles they run on. Instead of changing the code, it is typically enough to simply configure the applications for different devices.</p>
+
+<p>The key characteristics of EFL include:</p>
+
+<ul>
+ <li><strong>Performance</strong>
+  <p>The main reason Tizen adopted EFL as its native toolkit is its speed. EFL is highly optimized by using a scene graph and retained-mode rendering. EFL is fast even in software rendering.</p></li>
+ <li><strong>Small memory footprint</strong>
+  <p>Despite its fast performance, EFL's memory footprint is smaller than that of other toolkits with similar features. A small memory footprint is useful in the embedded world, since embedded devices do not normally have much memory.</p></li>
+ <li><strong>Back-end engine support</strong>
+  <p>EFL supports several back-end engines, such as X11 (OpenGL, Xlib, Xcb), Wayland (OpenGL, SHM), Direct Framebuffer, DRM, memory buffers, PS3 native, Windows, and Mac OS. Applications do not need to deal with each back-end engine separately.</p></li>
+ <li><strong>GUI and logic separation</strong>
+  <p>EFL supports GUI layout and logic separation by having the layout description in a plain text file and the logic code in the C or C++ source files.</p></li>
+ <li><strong>Themeable</strong>
+  <p>An EFL theme can be changed at runtime without restarting the application. UI components are customizable so that each application can create its own customized theme to overlay above the default theme, adding customized versions of UI components to achieve a specific look and feel.</p></li>
+ <li><strong>Scalable</strong>
+  <p>EFL supports a scale factor that affects the size of objects in the application at runtime. By configuring the scale factor, applications can scale up and down as needed. The scale factor also supports a default setting that allows applications to scale nicely out-of-the-box.</p></li>
+ <li><strong>Animations</strong>
+  <p>EFL supports different types of animations. Evas supports Evas maps with low-level APIs for performing 2D, 2.5D, and 3D object transformations. Edje supports pre-defined transitions and wrapping of Evas maps. Elementary supports transit APIs for various types of animations, which can be combined.</p></li>
+ <li><strong>Hardware acceleration</strong>
+  <p>EFL supports OpenGL&reg; and OpenGL-ES acceleration.</p></li>
+</ul>
+	
+	
+<h2 id="library" name="library">EFL Libraries</h2>
+	
+<p>The EFL are a set of layered libraries, as shown in the following diagram:</p>
+
+<p class="figure">Figure: EFL layers</p>
+<p align="center"><img alt="EFL layers" src="../../images/efllibs.png" /></p>
+
+<p>When you create a basic EFL application, you use the following main libraries as a basis:</p>
+
+<ul>
+    <li>Elementary is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life cycle of a view, and add UI components. The full list of UI components that can be used in Tizen can be found in <a href="ui_components_mn.htm">Mobile UI Components</a> and <a href="ui_components_wn.htm">Wearable UI Components</a>.</li>
+    <li>Edje is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application. You may also want to extend the default theme. You will find more information about Edje and the EDC format in <a href="theme_n.htm">Themes</a> and <a href="component_custom_n.htm">Customizing Components</a>.</li>
+    <li>Ecore is the library which manages the main loop of your application. The main loop is one of the most important concepts you need to know about to develop an application. The main loop is where events are handled, and where you interact with the user through the callback mechanism. The main loop mechanisms are explained in the <a href="main_loop_n.htm">Handling the Main Loop</a> guide.</li>
+    <li>Evas is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows the developer to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, calculate minimum drawing calls needed to get the job done, and so on.</li>
+    <li>Eina is the basis of all the EFL libraries. Eina is a toolbox that implements an API for data types in an efficient way. It contains all the functions needed to create lists and hashes, manage shared strings, open shared libraries, and manage errors and memory pools. Eina concepts are explained in <a href="data_types_tools_n.htm">Data Types and Tools</a>.</li>
+</ul>
+
+<p>The EFL include more than just the above libraries, but the above are the most important libraries to get started with. The other libraries, such as Eet, Embryo, and Emotion, will be explored later in the programming guides and the API Reference (in <a href="../../../../org.tizen.native.mobile.apireference/index.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/index.html">wearable</a> applications).</p>
+
+<p>The <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a> shows you how to develop your first application with the EFL.</p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/elementary_animation_n.htm b/org.tizen.ui.practices/html/native/efl/elementary_animation_n.htm
new file mode 100644
index 0000000..2dc4ea5
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/elementary_animation_n.htm
@@ -0,0 +1,872 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Elementary Animations</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+				<li><a href="#Getting_Started">Getting Started</a></li>
+				<li><a href="#Adding_Objects">Adding Objects to an Animation</a></li>
+				<li><a href="#Add_Image">Adding Images to an Animation</a></li>
+				<li><a href="#Animation_Duration">Animation Duration</a></li>
+				<li><a href="#Acceleration_Mode">Animation Acceleration Mode (&quot;Tween Mode&quot;)</a></li>
+				<li><a href="#Animation_Repeat">Animation Repeat</a></li>
+				<li><a href="#Auto_Reverse">Animation Auto-reverse</a></li>
+				<li><a href="#Transitions2">Transitions</a></li>
+				<li><a href="#Combine_Transitions">Combining Transitions</a></li>
+				<li><a href="#Animation_Chain">Animation Chain</a></li>
+				<li><a href="#Animation_Timeline">Animation Timeline</a></li>
+				<li><a href="#Custom_Transition">Custom Transitions</a></li>
+				
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Elementary Animations</h1> 
+
+<p>Elementary transitions (<span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>) allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary transitions are mostly based on Ecore animators, but provide some transition methods at a higher level of abstraction. Elementary transitions provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
+
+<p>To use Elementary transitions, you must create an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object and define the desired transitions using the methods of this object. After the transitions are registered, they will be automatically managed: their callback functions will be called for the set duration, and they will be deleted upon completion.</p>
+
+<p>Use Elementary transitions only when Edje animations are not sufficient. Edje animations are better at handling transitions, have more flexibility, and can be manipulated inside themes. The only drawback is that Edje animations have their own definition language. If you want to code with the C language, use Elementary transitions.</p>
+
+<h2 id="Getting_Started" name="Getting_Started">Getting Started</h2>
+<p>The first thing you need to do when creating an transition with <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> is to build your transit object using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_add()</span> function:</p>
+
+<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();</pre>
+
+<p>You now have an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that will allow you to perform transitions on one or more objects. The transit object holds the information about the target objects and the transition effects that will be used. The transit object also contains information about animation duration, number of repetitions, auto-reverse, and so on. The transit object starts playing as soon as the application enters the main loop.</p>
+
+<h2 id="Adding_Objects" name="Adding_Objects">Adding Objects to an Animation</h2>
+
+<p>You can add your Evas objects to your transition using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_object_add()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_object_add(Elm_Transit *transit, Evas_Object *obj)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the Evas object to animate.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note"><p>The Evas object can be a low-level component, such as a rectangle, but also a UI component, such as a button, image, or calendar.</p>
+<p>If you want to animate an Evas object handled by a container, such as a box, you need to either unpack the object before the animation or animate the whole container.</p></td>
+</tr>
+</tbody>
+</table>
+
+<p>If you want to know which objects are currently in your transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_objects_get()</span> function. You will get a list of all the objects that are subject to the transition.</p>
+
+<p>At any time, you can remove objects from the transition:</p>
+
+<pre class="prettyprint">elm_transit_object_remove(Elm_Transit *transit, Evas_Object *obj)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the Evas object to remove from the transition.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">After you have added at least one Evas object to your transition, if the list of objects gets emptied somehow, be it because the transition has been terminated or all objects have been deleted, the transition will be automatically deleted. Otherwise, you will have to delete the transition by yourself using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del()</span> function. If you delete the transit while the transition is running, the transition will stop.</td>
+</tr>
+</tbody>
+</table>
+
+<h2 id="Add_Image" name="Add_Image">Adding Images to an Animation</h2>
+
+<p>If you do not want to manage UI components for animating images, <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for directly manipulating images:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_image_animation_add(Elm_Transit *transit, Eina_List *images)
+</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is a list of the image paths.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">This list and its contents will be deleted after the effect ends by the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_context_free()</span> function.</td>
+</tr>
+</tbody>
+</table>
+
+<p>You can now define your image transitions exactly the same way as with any Evas object.</p>
+
+<p>The following example shows how to use <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> with images:</p>
+
+<pre class="prettyprint">char buf[PATH_MAX];
+Eina_List *images = NULL;
+Elm_Transit *transit = elm_transit_add();
+snprintf(buf, sizeof(buf), &quot;%s/images/btn_default.png&quot;, PACKAGE_DATA_DIR);
+images = eina_list_append(images, eina_stringshare_add(buf));
+snprintf(buf, sizeof(buf), &quot;%s/images/btn_hover.png&quot;, PACKAGE_DATA_DIR);
+images = eina_list_append(images, eina_stringshare_add(buf));
+elm_transit_effect_image_animation_add(transit, images);</pre>
+
+<h2 id="Animation_Duration" name="Animation_Duration">Animation Duration</h2>
+
+<p>With <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, setting the transition duration is mandatory. To set the duration, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_set()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_duration_set(Elm_Transit *transit, double duration)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the duration in seconds.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The purpose of <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> is to abstract the low-level details of object interpolation, so you cannot create an infinite transition by specifying the duration. However, you can make your transition last forever using the repeat function.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example shows how to make a complete revolution of the target Evas object in 2 seconds:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<p>To get the duration of the transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_get()</span> function.</p>
+
+<h2 id="Acceleration_Mode" name="Acceleration_Mode">Animation Acceleration Mode (&quot;Tween Mode&quot;)</h2>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> supports a number of built-in interpolation methods. By default, all interpolations are linear. If you want to change the animation&#39;s dynamics, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_set()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_tween_mode_set(Elm_Transit *transit, Elm_Transit_Tween_Mode tween_mode)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the tween mode of the transition, which can be one of the following:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_LINEAR</span>: The default mode.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_SINUSOIDAL</span>: The transition starts with acceleration and ends with deceleration.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_DECELERATE</span>: The transition decelerates over time.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_ACCELERATE</span>: The transition accelerates over time.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_BEZIER_CURVE</span>: The transition uses an interpolated cubic-bezier curve adjusted with parameters.</li>
+</ul>
+
+<p>To get the current tween mode, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_get()</span> function.</p>
+
+<h2 id="Animation_Repeat" name="Animation_Repeat">Animation Repeat</h2>
+
+<p>To set a transition to repeat, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_set()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_repeat_times_set(Elm_Transit *transit, int repeat)</pre>
+
+<p>The function takes the following arguments:</p>
+<ul>
+<li>The transition you want to repeat.</li>
+<li>The number of times the transition repeats.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">If the <span style="font-family: Courier New,Courier,monospace;">repeat</span> argument is set to 0, the transition will not loop at all. If set to 1, the transition will run twice. If set to a negative value, the transition will repeat forever.</td>
+</tr>
+</tbody>
+</table>
+
+<p>To get the repeat value, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_get()</span> function. The default value is 0.</p>
+
+<p>The following example shows how to make an Evas object spin for 3 complete revolutions in 6 seconds:</p>
+
+<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_repeat_set(transit, 3.0);
+elm_transit_go(transit);</pre>
+
+<h2 id="Auto_Reverse" name="Auto_Reverse">Animation Auto-reverse</h2>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for automatically reversing the transition once it finishes:</p>
+
+<pre class="prettyprint">elm_transit_auto_reverse_set(Elm_Transit *transit, Eina_Bool reverse)</pre>
+
+<p>The first argument is the transition you want to reverse. The second argument is the reverse state. If the reverse state is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, this function will perform the same transition backwards as soon as the first transition is complete.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">
+    <p>Reversing the transition doubles the duration of the transition. Moreover, if the transition is set to repeat, the transition will run back and forth until the repeat count is finished.</p>
+    <p>You can calculate the duration as follows if both auto-reverse and repeat are set: 2 * duration * repeat.</p>
+</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example shows how to make an object perform half a turn and then reverse the animation to its original position in 4 seconds:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_auto_reverse_set(transit, EINA_TRUE);
+elm_transit_go(transit);
+</pre>
+
+<p>To determine whether the auto-reverse mode is enabled, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_auto_reverse_get()</span> function.</p>
+
+<h2 id="Transitions2" name="Transitions2">Transitions</h2>
+
+<p>We distinguish two main transition types:</p>
+<ul>
+<li>Transitions that are applied to the properties of objects, such as position, size, angle, and color.</li>
+<li>Transitions from one object to another, where the first object is hidden to let the second one appear.</li>
+</ul>
+<p>All transitions are based on the same principle: we set the starting and the ending values for the properties we want to animate, we then set the lifespan of the animation, and finally we inquire the preferred interpolation method (such as linear, acceleration, or bounce).</p>
+
+<p>You must declare the transitions after the parent window has been created, since the transition effects make use of the geometric properties of the parent window. If the parent window does not yet exist when calculating the interpolation, the interpolation may end up being based on wrong information.</p>
+
+<h3 id="Built-in_Transitions" name="Built-in_Transitions">Built-in Transitions</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides several built-in transition definitions that are useful for the most common cases, so you that will not have to code them from scratch.</p>
+
+<p>All these built-in effects are implemented as follows:</p>
+
+<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();
+elm_transit_effect_add(transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_op,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_context_new(),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_context_free);</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object that contains the target Evas objects and all the information needed to setup the transition.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_op</span>: The callback function that performs the transition (resizing interpolation in this example).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_context_new()</span>: The callback function that returns the context used in the transition for calculations. In this example, the context is the coordinates of the before and after objects.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_context_free</span>: The callback function that frees up the memory once the transition is complete.</li>
+</ul>
+
+<p>All the definitions above can be rewritten as follows:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_effect_translation_add(transit, from_x, from_y, to_x, to_y);
+</pre>
+
+<h3>Translation</h3>
+<p>To perform a translation on an Evas object, use the following method:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_translation_add(Elm_Transit *transit,
+&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;Evas_Coord from_dx,
+&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;Evas_Coord from_dy,
+&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;Evas_Coord to_dx,
+&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;Evas_Coord to_dy)
+</pre>
+
+<ul>
+<li>The first argument is the transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_dx</span>: The starting X coordinate (source).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_dy</span>: The starting Y coordinate (source).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_dx</span>: The ending X coordinate (destination).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_dy</span>: The ending Y coordinate (destination).</li>
+</ul>
+
+<p>The following example shows how to slide an Evas object (a rectangle) on a 45-degree diagonal, from bottom-left to top-right, at a constant speed, and in 1 second:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, rectangle);
+elm_transit_effect_translation_add(transit, 0, 0, 280, 280);
+elm_transit_duration_set(transit, 1);
+elm_transit_go(transit);
+</pre>
+
+<h3>Color Transition</h3>
+
+<p>Color transitions allow you to dynamically change the color of Evas objects. The first argument is the transit object, while the other arguments will be used to define the color transition using RGB colors. There is also an alpha channel that controls the opacity of the color (the background of the object, not the object itself).</p>
+
+<pre class="prettyprint">
+elm_transit_effect_color_add(Elm_Transit *transit,
+&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;unsigned int from_r,
+&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;unsigned int from_g,
+&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;unsigned int from_b,
+&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;unsigned int from_a,
+&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;unsigned int to_r,
+&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;unsigned int to_g,
+&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;unsigned int to_b,
+&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;unsigned int to_a)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_r</span>: The start value for &quot;Red&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_g</span>: The start value for &quot;Green&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_b</span>: The start value for &quot;Blue&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_a</span>: The start value for &quot;Alpha&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_r</span>: The end value for &quot;Red&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_g</span>: The end value for &quot;Green&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_b</span>: The end value for &quot;Blue&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_a</span>: The end value for &quot;Alpha&quot;.</li>
+</ul>
+
+<p>The following example shows how to transit a rectangle from red to blue in 3 seconds:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, rectangle);
+elm_transit_effect_color_add(transit, // Target object
+&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;255, 0, 0, 255, // From color
+&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;0, 0, 255, 255); // To color
+elm_transit_duration_set(transit, 3);
+elm_transit_go(transit);
+</pre>
+
+<h3>Rotation</h3>
+
+<pre class="prettyprint">elm_transit_effect_rotation_add(Elm_Transit *transit, float from_degree, float to_degree)</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_degree</span>: The start degree of rotation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_degree</span>: The end degree of rotation.</li>
+</ul>
+
+<p>This function can be used to perform a rotation on any Evas object. It works the same way as the other transit effects and takes two arguments for the starting and ending angles. Note that if you apply a rotation on multiple objects, they will individually mill around and not act as a group. If you want several objects to revolve around a common point, you must encapsulate the objects into a single parent object and apply the rotation to the parent object. The following example shows how to achieve this:</p>
+
+<pre class="prettyprint">
+// Parent container
+Evas_Object *parent = elm_box_add(my_window);
+evas_object_show(parent);
+elm_box_horizontal_set(parent, EINA_TRUE);
+elm_box_homogeneous_set(parent, EINA_TRUE);
+
+// Button 1
+Evas_Object *btn1 = elm_button_add(parent);
+elm_object_text_set(btn1, &quot;Btn1&quot;);
+elm_box_pack_start(parent, btn1);
+evas_object_show(btn1);
+
+// Button 2
+Evas_Object *btn2 = elm_button_add(parent);
+elm_object_text_set(btn2, &quot;Btn2&quot;);
+elm_box_pack_end(parent, btn2);
+evas_object_show(btn2);
+
+// Make the parent container do a 360 degrees spin
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, parent);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h3>Wipe Effect</h3>
+
+<p>The wipe effect is designed to dynamically hide or show any element on the scene.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_wipe_add(Elm_Transit *transit,
+&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;Elm_Transit_Effect_Wipe_Type type,
+&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;Elm_Transit_Effect_Wipe_Dir dir)
+</pre>
+
+<p>In addition to the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance passed as the first argument, the function takes the following arguments:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">type</span>: The wipe type <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Effect_Wipe_Type</span> defines whether to show or hide the target elements. The value can be one of the following:
+    <ul>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_TYPE_SHOW</span></li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">dir</span>: The wipe direction <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Effect_Wipe_Dir</span> defines in which direction the target will progressively appear or disappear. The value can be one of the following:
+    <ul>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_LEFT</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_UP</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_DOWN</span></li>
+    </ul>
+</li>
+</ul>
+
+<p>The following example shows how to make an object disappear progressively from left to right:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_wipe_add(transit,
+&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;ELM_TRANSIT_EFFECT_TYPE_HIDE,
+&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;ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h3>Zoom Effect</h3>
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a zoom function.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_zoom_add(Elm_Transit *transit,
+&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;float from_rate,
+&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;float to_rate)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_rate</span>: The starting level of the zoom.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_rate</span>: The ending level of the zoom.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">from_rate</span> argument defines the scale of the target objects at the beginning of the animation. A value of 1 represents the initial scale of the objects.</p>
+
+<p>Setting the value of the <span style="font-family: Courier New,Courier,monospace;">to_rate</span> argument to 2 will double the size of the target objects (double the width and double the height). When using this effect, the width and height of a target object will remain proportional to one another. If you want to customize the zoom effect, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizing_add()</span> function.</p>
+
+<p>The following example shows how to implement a zoom-out transition. At the end of the 2-secondstransition, the animated object will be half its original size.</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_zoom_add(transit, 1, 0.5);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h3>Resizing Effect</h3>
+
+<p>The resizing effect allows you to design an interpolation of the width and height attributes of one or more target elements.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_resizing_add(Elm_Transit *transit,
+&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;Evas_Coord from_w,
+&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;Evas_Coord from_h,
+&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;Evas_Coord to_w,
+&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;Evas_Coord to_h)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_w</span>: The starting width.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_h</span>: The starting height.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_w</span>: The ending width.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_h</span>: The ending height.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">from_w</span> and <span style="font-family: Courier New,Courier,monospace;">from_h</span> arguments define the size at the beginning of the animation. The <span style="font-family: Courier New,Courier,monospace;">to_w</span> and <span style="font-family: Courier New,Courier,monospace;">to_h</span> arguments define the size at the end.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">If you are planning to use this method to hide an Evas object by setting one of the length attributes to zero, consider using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_wipe_add()</span> function instead.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example shows how to make a rectangle exchange its width and height properties in a 2-second transition:</p>
+
+<pre class="prettyprint">
+Evas_Coord w, h;
+evas_object_geometry_get(my_evas_object, NULL, NULL, &amp;w, &amp;h);
+
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_resize_add(transit, // Transition object
+&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;w, h, // Original sizing
+&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;h, w); // Target sizing
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h3>Flip Effect</h3>
+<p>This transition combines the target Evas objects in pairs, so that one object will show up while the other one disappears. This association relates the even objects in the transit list of objects with the odd ones. The even objects are shown at the beginning of the animation, and the odd objects shown when the transition is complete. In other words, the effect applies to each pair of objects in the order in which they are listed in the transit list of objects.</p>
+
+<p>The flip effect itself is a pseudo-3D effect where the first object in the pair is the front object and the second one is the back object. When the transition launches, the front object rotates around a preferred axis in order to let the back object take its place.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_flip_add(Elm_Transit *transit,
+&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;Elm_Transit_Effect_Flip_Axis axis,
+&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;Eina_Bool cw)
+</pre>
+
+<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_X</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_Y</span></li>
+</ul>
+
+<p>The third argument is the direction of the rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counter-clockwise.</li>
+</ul>
+
+<p>The following example shows how to create a coin that flips indefinitely. Note that we use images as Elementary UI components for demonstration purposes. You can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_add()</span> function if you do not want to bother creating UI components.</p>
+
+<pre class="prettyprint">
+// Coin Heads
+Evas_Object *coin_heads = elm_image_add(ad-&gt;win);
+if (!elm_image_file_set(coin_heads, IMG_DIR&quot;/coin_heads.png&quot;, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
+elm_win_resize_object_add(ad-&gt;win, coin_heads);
+
+// Coin Tails
+Evas_Object *coin_tails = elm_image_add(ad-&gt;win);
+if (!elm_image_file_set(coin_tails, IMG_DIR&quot;/coin_tails.png&quot;, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
+elm_win_resize_object_add(ad-&gt;win, coin_tails);
+
+// Transition definition
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_object_add(transit, coin_tails);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_auto_reverse_set(transit, EINA_TRUE);
+elm_transit_repeat_times_set(transit, -1);
+elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
+elm_transit_go(transit);
+</pre>
+
+<p class="figure">Figure: Coin flip</p>
+<p align="center"><img alt="Coin flip" src="../../images/coin_flip_effect.png" /></p>
+
+<h3>Resizable Flip Effect</h3>
+<p>In the flip example above, we used two objects that have the same size. However, you may sometimes want to flip from one object to another object with different size attributes. The most common example would be using buttons with dimensions that depend on their contents (such as labels). If you decide to use the classic <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_flip_add()</span> function, the size of the object will change at the moment one object becomes completely hidden and the other one begins to show up. If you wish to interpolate the size attributes as well, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizable_flip_add()</span> function:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_resizable_flip_add(Elm_Transit *transit,
+&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;Elm_Transit_Effect_Flip_Axis axis,
+&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;Eina_Bool cw)
+</pre>
+
+<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_X</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_Y</span></li>
+</ul>
+
+<p>The third argument is the direction of the rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counter-clockwise.</li>
+</ul>
+
+<p>This function works the exact same way as the standard flip effect function.</p>
+
+<h3>Fade Effect</h3>
+
+<p>This effect is used to transition from one Evas object to another one using a fading effect: the first object will slowly disappear to let the second object take its place.</p>
+
+<pre class="prettyprint">elm_transit_effect_fade_add(Elm_Transit *transit)</pre>
+
+<p>This effect is applied to each pair of objects in the order in which they are listed in the transit list of objects. The first object in the pair will be the before object and the second one will be the after object.</p>
+
+<p>Building on the coin flip example, the following example shows how to fade out one face of the coin while fading in the other face:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_object_add(transit, coin_tails);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_effect_fade_add(transit);
+elm_transit_go(transit);
+</pre>
+
+<p>If you simply want to hide an object with a fade transition, consider using a transparent after object.</p>
+
+<h3>Blend Effect</h3>
+
+<p>Another transition involving at least two Evas objects is the blend effect. This transition makes the before object blurry before the after object appears.</p>
+
+<pre class="prettyprint">elm_transit_effect_blend_add(Elm_Transit *transit)</pre>
+
+<p>The argument is the transition target of the blend effect.</p>
+
+<p>Building on the coin flip example, the following example shows how to blur out one face of the coin while blurring in the other face:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_object_add(transit, coin_tails);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_effect_blend_add(transit);
+elm_transit_go(transit);
+</pre>
+
+<p>If you simply want to hide an object with a blur transition, consider using a transparent after object.</p>
+
+<h2 id="Combine_Transitions" name="Combine_Transitions">Combining Transitions</h2>
+
+<p>To use multiple transitions at the same time on the same objects, simply declare the transitions one after the other.</p>
+
+<p>Building on the coin flip example, the following example shows how to roll the coin on the ground using a rotation and a translation effect:</p>
+
+<pre class="prettyprint">
+Evas_Object *coin_heads = elm_image_add(ad-&gt;win);
+if (!elm_image_file_set(coin_heads, IMG_DIR&quot;/coin_heads.png&quot;, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
+evas_object_resize(coin_heads, 100, 100);
+evas_object_show(coin_heads);
+
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_duration_set(transit, 5.0);
+elm_transit_effect_translation_add(transit, 0, 0, 3.1415 * 2 * 100, 0);
+elm_transit_effect_rotation_add(transit, 0, 360);
+elm_transit_go(transit);
+</pre>
+
+<h2 id="Animation_Chain" name="Animation_Chain">Animation Chain</h2>
+
+<p>Now that we have listed all the effects that can be implemented using <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, we will see how to chain transitions into sequences. To create complex, chained animations without worrying about synchronization between the transitions, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_add()</span> function. This function takes as arguments two <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> objects and will automatically take care of the chaining for you: the second transition will start as soon as the first transition is finished.</p>
+
+<p>The following example shows how to move a datetime component on a square trajectory:</p>
+
+<pre class="prettyprint">
+Evas_Object *dt = elm_datetime_add(ad-&gt;win);
+evas_object_resize(dt, 350, 50);
+evas_object_show(dt);
+
+// The first transition
+Elm_Transit *t1 = elm_transit_add();
+elm_transit_object_add(t1, dt);
+elm_transit_duration_set(t1, 2);
+elm_transit_effect_translation_add(t1, 0, 0, 100, 0);
+
+// The second transition
+Elm_Transit *t2 = elm_transit_add();
+elm_transit_object_add(t2, dt);
+elm_transit_duration_set(t2, 2);
+elm_transit_effect_translation_add(t2, 100, 0, 100, 100);
+
+// The third transition
+Elm_Transit *t3 = elm_transit_add();
+elm_transit_object_add(t3, dt);
+elm_transit_duration_set(t3, 2);
+elm_transit_effect_translation_add(t3, 100, 100, 0, 100);
+
+// The fourth transition
+Elm_Transit *t4 = elm_transit_add();
+elm_transit_object_add(t4, dt);
+elm_transit_duration_set(t4, 2);
+elm_transit_effect_translation_add(t4, 0, 100, 0, 0);
+
+// Chaining the transitions
+elm_transit_chain_transit_add(t1, t2);
+elm_transit_chain_transit_add(t2, t3);
+elm_transit_chain_transit_add(t3, t4);
+
+// Starting the transitions
+elm_transit_go(t1);
+</pre>
+
+<p>Note that we cannot use transition chaining to make a loop animation, since the transit object is automatically destroyed as soon as the transition completes. Therefore, you cannot do something like this:</p>
+
+<pre class="prettyprint">elm_transit_chain_transit_add(t4, t1);</pre>
+
+<p>To create a looped animation chain, you have to use low-level components provided by the Ecore and Evas transition libraries, or you can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del_cb_set()</span> function to define a callback function for when a transition gets deleted. This way, you could recreate your objects and reiterate the transition chain as soon as the last transition ends.</p>
+
+<pre class="prettyprint">
+elm_transit_del_cb_set(Elm_Transit *transit, Elm_Transit_Del_Cb cb, void *data)
+</pre>
+
+<p>The first argument is the transition object. The second argument is the callback function to run on transition delete. The third argument is the data to pass to the callback function.</p>
+
+<p>You can severe the chain relationship between two transits by using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_del()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_chain_transit_del(Elm_Transit *transit, Elm_Transit *chain_transit)</pre>
+
+<p>The first argument is the first transition in the chain. The second argument is the second transition in the chain.</p>
+
+<p>To get the current chain transit list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transits_get()</span> function.</p>
+
+<h2 id="Animation_Timeline" name="Animation_Timeline">Animation Timeline</h2>
+
+<p>After you have defined all the properties that define your transition, start the transition with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_go()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_go(Elm_Transit *transit)</pre>
+
+<p>You can maintain full control over the execution process even after the transition has started. You can pause the transition by setting the paused argument to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>:</p>
+
+<pre class="prettyprint">elm_transit_paused_set(Elm_Transit *transit, Eina_Bool paused)</pre>
+
+<p>You can resume the transition by using the same method but setting the paused argument to <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>. If you want to know whether the transition is currently paused, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_paused_get()</span> function.</p>
+
+<p>You can remain informed about the present transition flow and get the current frame by using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_progress_value_get()</span> function. This function will return the timeline position of the animation, ranging between 0.0 (start) and 1.0 (end).</p>
+
+<h2 id="Custom_Transition" name="Custom_Transition">Custom Transitions</h2>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a standard function for defining any effect of your choosing that will be applied to some context data:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_add(Elm_Transit *transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Transition_Cb transition_cb,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect *effect,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_End_Cb end_cb)
+</pre>
+
+<p>The first argument is the transition target of the new effect. The second argument is the transition callback function. The third argument is the new effect. The fourth argument is the callback function to call at the end of the effect.</p>
+
+<p>As described earlier in this programming guide, this function embraces three callbacks that will allow you to define every aspects of your transition from its creation to its deletion. The following is an example of how to build a custom resizing animation.</p>
+
+<p>First, we define a structure capable of holding the context information about resizing an Evas object:</p>
+
+<pre class="prettyprint">
+typedef struct
+{
+&nbsp;&nbsp;&nbsp;struct _size
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;from, to;
+}
+Custom_Effect;
+</pre>
+
+<p>We can now implement our custom resizing callback function. This function takes the following arguments:</p>
+
+<ul>
+<li>The context data that holds the custom properties of our transition, which are used as parameters to calculate the interpolation.</li>
+<li>The transit object that contains the list of our Evas objects to animate and all the information about duration, auto-reverse, looping, and so on.</li>
+<li>The progress (position along the animation timeline) that ranges from 0.0 to 1.0 and allows us to calculate the desired interpolation for each frame.</li>
+</ul>
+
+<pre class="prettyprint">
+static void
+_custom_op(void *data, Elm_Transit *transit, double progress)
+{
+&nbsp;&nbsp;&nbsp;if (!data) return;
+&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
+&nbsp;&nbsp;&nbsp;Evas_Object *obj;
+&nbsp;&nbsp;&nbsp;const Eina_List *elist;
+&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect = data;
+&nbsp;&nbsp;&nbsp;const Eina_List *objs = elm_transit_objects_get(transit);
+&nbsp;&nbsp;&nbsp;if (progress &lt; 0.5)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = custom_effect-&gt;from.h + (custom_effect-&gt;to.h * progress * 2);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = custom_effect-&gt;from.w;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = custom_effect-&gt;from.h + custom_effect-&gt;to.h;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = custom_effect-&gt;from.w + (custom_effect-&gt;to.w * (progress - 0.5) * 2);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;EINA_LIST_FOREACH(objs, elist, obj)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(obj, w, h);
+}
+</pre>
+
+<p>The callback function above resizes our Evas objects in two steps. During the first half of the transition, only the height changes, while the width remains the same. During the second half, it is the other way around until we get to the desired size.</p>
+
+<p>You must then define the context used by your animation:</p>
+
+<pre class="prettyprint">
+static void*
+_custom_context_new(Evas_Coord from_w, Evas_Coord from_h, Evas_Coord to_w, Evas_Coord to_h)
+{
+&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect;
+
+&nbsp;&nbsp;&nbsp;custom_effect = calloc(1, sizeof(Custom_Effect));
+&nbsp;&nbsp;&nbsp;if (!custom_effect) return NULL;
+
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.w = from_w;
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.h = from_h;
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.w = to_w - from_w;
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.h = to_h - from_h;
+
+&nbsp;&nbsp;&nbsp;return custom_effect;
+}
+</pre>
+
+<p>You must define the function that will take care of deleting all the context objects used by your custom transition and free up the allocated memory:</p>
+
+<pre class="prettyprint">
+static void
+_custom_context_free(void *data, Elm_Transit *transit __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;free(data);
+}
+</pre>
+
+<p>Finally, apply your custom transition to your <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_effect_add(transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_op,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_context_new(),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_context_free);
+</pre>
+
+<p>If you want to delete an effect from your effects list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_del()</span> function.</p>
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/elementary_animation_tutorial_n.htm b/org.tizen.ui.practices/html/native/efl/elementary_animation_tutorial_n.htm
new file mode 100644
index 0000000..cf6e719
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/elementary_animation_tutorial_n.htm
@@ -0,0 +1,662 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Elementary Animations</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#setup">Setting Up the Application</a></li>
+			<li><a href="#rotate">Creating a Rotation Effect</a></li>
+			<li><a href="#zoom">Creating a Zoom Effect</a></li>
+			<li><a href="#flip">Creating a Flip Effect</a></li>
+			<li><a href="#blend">Creating a Blend Transition</a></li>
+			<li><a href="#fade">Creating a Fade Effect</a></li>
+			<li><a href="#flip_y">Creating a Flip on the Y Axis</a></li>
+			<li><a href="#wipe">Creating a Wipe Effect</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">		
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Elementary Animations</h1>
+
+  
+<p>This tutorial demonstrates how you can use Elm Transit to create animated transitions effects, such as rotation, wiping, zooming, resizing, and fading, to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+
+	
+ <h2 id="setup" name="setup">Setting Up the Application</h2>
+
+ <p>To set up the application and create a resize effect:</p>
+ <ol>
+ <li>
+<p>Create a basic application as explained in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a> and <a href="basic_tutorial_mn.htm">Creating Basic Mobile Interactions</a>.</p>
+</li>
+<li>
+<p>Create Evas objects and animate them. In this example, one single object is animated with different type of animations.</p>
+
+<p>Create the structure of the application, represented by the <span style="font-family: Courier New,Courier,monospace">appdata</span> struct, that holds the main UI components of the application:</p>
+
+<pre class="prettyprint">
+typedef struct 
+appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win; // Main window
+&nbsp;&nbsp;&nbsp;Evas_Object *label; // Title label
+&nbsp;&nbsp;&nbsp;Evas_Object *button; // Button object, the target of the animations
+&nbsp;&nbsp;&nbsp;Evas_Object *buttonbck; // Button representing the back of the target button
+&nbsp;&nbsp;&nbsp;Evas_Object *hbox; // Horizontal box to store the vertical boxes
+&nbsp;&nbsp;&nbsp;Evas_Object *left_vbox; // Vertical box for the first button column
+&nbsp;&nbsp;&nbsp;Evas_Object *center_vbox; // // Vertical box for the second button column
+&nbsp;&nbsp;&nbsp;Evas_Object *right_vbox; // // Vertical box for the last button column
+&nbsp;&nbsp;&nbsp;float rt_angle, zto, zfrom; // Variables used to store values for animations
+} appdata_s;
+</pre>
+</li>
+<li>
+<p>Place the UI components on the application canvas:</p>
+
+<ol type="a"><li>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function takes <span style="font-family: Courier New,Courier,monospace">appdata_s *ad</span> as its only parameter. This function is called by the creation of the <span style="font-family: Courier New,Courier,monospace">app_create</span> callback of the Tizen application (<span style="font-family: Courier New,Courier,monospace">event_callback.create = app_create;</span>) in the <span style="font-family: Courier New,Courier,monospace">main()</span> function of the application.</p>
+<pre class="prettyprint">
+create_base_gui(appdata_s *ad)
+{
+</pre>
+</li>
+<li>
+<p>Set up the rotation angle, the original zoom value (<span style="font-family: Courier New,Courier,monospace">zfrom</span>), and the destination zoom value (<span style="font-family: Courier New,Courier,monospace">zto</span>):</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;ad-&gt;rt_angle = 360.0;
+&nbsp;&nbsp;&nbsp;ad-&gt;zfrom = 1.0;
+&nbsp;&nbsp;&nbsp;ad-&gt;zto = 2.0;
+</pre>
+</li>
+<li>
+<p>Create the main window with a title and add the <span style="font-family: Courier New,Courier,monospace">delete</span> callback:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&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;// Label
+&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Effects Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
+</pre>
+</li>
+<li>
+<p>Create the animation target button and the back button. Call the button box creation function with the application data as its parameter.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Create a button in the app window
+&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;// Move the button to x = 50 y = 100
+&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;button, 50, 100);
+
+&nbsp;&nbsp;&nbsp;// Resize the button 100 x 50
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;button, 200, 50);
+
+&nbsp;&nbsp;&nbsp;// Show the button
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;button);
+
+&nbsp;&nbsp;&nbsp;// Create a back button in the app window
+&nbsp;&nbsp;&nbsp;ad-&gt;buttonbck = elm_button_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;buttonbck, &quot;Button back&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;buttonbck, 50, 100);
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;buttonbck, 200, 50);
+
+&nbsp;&nbsp;&nbsp;_create_btn_box(ad);
+
+} // End of create_base_gui
+</pre>
+</li></ol></li>
+<li>
+<p>Create the structure of the buttons box with 3 columns (vertical boxes) and one horizontal for the main container:</p>
+<pre class="prettyprint">
+// Create the main container box
+ad-&gt;hbox = elm_box_add(ad-&gt;win);
+elm_box_horizontal_set(ad-&gt;hbox, EINA_TRUE);
+elm_box_homogeneous_set(ad-&gt;hbox, EINA_TRUE);
+evas_object_move(ad-&gt;hbox, 10, 500);
+evas_object_show(ad-&gt;hbox);
+
+// Create the first column
+ad-&gt;left_vbox = elm_box_add(ad-&gt;hbox);
+elm_box_horizontal_set(ad-&gt;left_vbox, EINA_FALSE);
+elm_box_homogeneous_set(ad-&gt;left_vbox, EINA_TRUE);
+evas_object_show(ad-&gt;left_vbox);
+elm_box_pack_start(ad-&gt;hbox, ad-&gt;left_vbox);
+
+// Create the second column
+ad-&gt;center_vbox = elm_box_add(ad-&gt;hbox);
+elm_box_horizontal_set(ad-&gt;center_vbox, EINA_FALSE);
+elm_box_homogeneous_set(ad-&gt;center_vbox, EINA_TRUE);
+evas_object_show(ad-&gt;center_vbox);
+elm_box_pack_end(ad-&gt;hbox, ad-&gt;center_vbox);
+
+// Create the last column
+ad-&gt;right_vbox = elm_box_add(ad-&gt;hbox);
+elm_box_horizontal_set(ad-&gt;right_vbox, EINA_FALSE);
+elm_box_homogeneous_set(ad-&gt;right_vbox, EINA_TRUE);
+evas_object_show(ad-&gt;right_vbox);
+elm_box_pack_end(ad-&gt;hbox, ad-&gt;right_vbox);
+</pre>
+</li>
+<li>
+<p>Create the first action button for the resize effect.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function defines the callback function that is to be called when the button is clicked. In this example, set a <span style="font-family: Courier New,Courier,monospace">_btn_resize_cb()</span> function and pass the application data <span style="font-family: Courier New,Courier,monospace">ad</span> to this callback function.</p>
+<pre class="prettyprint">
+// Create the button
+btn_resize = elm_button_add(ad-&gt;win);
+// Set the button text
+elm_object_text_set(btn_resize, &quot;Resize&quot;);
+// Set the hint weight policy
+evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL);
+// Show the button
+evas_object_show(btn_resize);
+// Set the &quot;clicked&quot; callback
+evas_object_smart_callback_add(btn_resize, &quot;clicked&quot;, _btn_resize_cb, ad);
+// Add the button to the first column
+elm_box_pack_end(ad-&gt;left_vbox, btn_resize);
+</pre>
+
+<p>The callback by itself only sets a new text for the animation target button, and calls the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback</span> function, which actually animates the button.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback</span> function needs its specific prototype: it returns nothing and receives the data to be passed, the callback object, and the actual event (seldom used) as parameters.</p>
+
+<p>In this case, pass the application data to the callback. However, note that the parameter&#39;s type is <span style="font-family: Courier New,Courier,monospace">void *</span> and not <span style="font-family: Courier New,Courier,monospace">appdata_s *</span>, so you must initialize a variable of the correct type with the pointer.</p>
+<pre class="prettyprint">
+static void 
+_btn_resize_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Set the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Resize&quot;);
+&nbsp;&nbsp;&nbsp;_resize_effect(ad-&gt;button);
+}
+</pre>
+</li>
+<li>
+<p>Use the application data in the callback function. At this point, you can create the animation directly in the callback function, but it is more straightforward to encapsulate the animation process into a dedicated function. The <span style="font-family: Courier New,Courier,monospace">_resize_effect()</span> function implements the following animation code:</p>
+<ol type="a">
+<li>
+<p>Create an <span style="font-family: Courier New,Courier,monospace">Elm_Transit *</span> object representing the transition:</p>
+<pre class="prettyprint">
+static void 
+_resize_effect(Evas_Object *obj)
+{
+&nbsp;&nbsp;&nbsp;// Elementary Transition declaration and creation
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
+</pre>
+</li>
+<li>
+<p>Add the target object to the transition:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Add the transition target object
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+</pre>
+</li>
+<li>
+<p>Add a resizing transition to the object with the origin and destination width and height in pixels:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Set the resize effect
+&nbsp;&nbsp;&nbsp;elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+</pre>
+<p>100 and 50 are respectively the object&#39;s width and height when the effect begins, whereas 300 and 150 are respectively the object&#39;s width and height when the effect ends: the object grows from 100 x 50 to 300 x 150.</p>
+</li>
+<li>
+<p>Set the transition duration with the <span style="font-family: Courier New,Courier,monospace">elm_transit_duration_set()</span> function:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Set the transition duration
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+</pre>
+<p>The animation lasts 3 seconds. The duration parameter is a <span style="font-family: Courier New,Courier,monospace">double</span>.</p>
+</li>
+<li>
+<p>Start the animation by calling the <span style="font-family: Courier New,Courier,monospace">elm_transit_go()</span> function with the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> object:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Start the transition
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+<p>When the resize button is clicked, the animation target button grows.</p>
+
+<p>All the action buttons are created exactly the same way as the resize button, with a callback and an animation function.</p>
+</li>
+</ol>
+</li>
+</ol>
+
+ <h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
+
+<p>The rotation effect rotates the animation target button with an angle of 360&deg;. This angle is stored in the application data as <span style="font-family: Courier New,Courier,monospace">ad-&gt;rt_angle</span>.</p>
+<p>To create the rotation effect:</p>
+<ol>
+<li>
+<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box()</span> function:</p>
+<pre class="prettyprint">
+// Rotation button
+btn_rotate = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_rotate, &quot;Rotate&quot;);
+evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_rotate);
+evas_object_smart_callback_add(btn_rotate, &quot;clicked&quot;, _btn_rotate_cb, ad);
+elm_box_pack_end(ad-&gt;center_vbox, btn_rotate);
+</pre>
+</li>
+<li>
+<p>Call the effect function with the target button as the first parameter and the rotation angle as the second parameter:</p>
+<pre class="prettyprint">
+static void 
+_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Set the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Rotate&quot;);
+&nbsp;&nbsp;&nbsp;_rotation_effect(ad-&gt;button, ad-&gt;rt_angle);
+}
+</pre>
+</li>
+<li>
+<p>Define the animation function. The animation function rotates the animation target by adding a rotation effect with the <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_rotation_add()</span> function. This function takes 3 parameters:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_Transit</span></li>
+<li>Rotation position at which the effect begins (0&deg;)</li>
+<li>Rotation position at which the effect ends (360&deg;)</li>
+</ul>
+<p>The animation lasts 2 seconds.</p>
+
+<pre class="prettyprint">
+static void 
+_rotation_effect(Evas_Object *obj, float angle)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+
+&nbsp;&nbsp;&nbsp;// Rotate the object from its original angle to given degrees to the right
+&nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(trans, 0.0, angle);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 2.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+</li>
+</ol>
+
+ <h2 id="zoom" name="zoom">Creating a Zoom Effect</h2>
+
+<p>The zoom effect zooms on the animation target to make it twice as big. Store the source and destination zoom level in the application data using <span style="font-family: Courier New,Courier,monospace">ad-&gt;zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad-&gt;zto</span>.</p>
+
+<p>To create a zoom effect:</p>
+<ol>
+<li>
+<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box()</span> function:</p>
+
+<pre class="prettyprint">
+// Zoom button
+btn_zoom = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_zoom, &quot;Zoom&quot;);
+evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_zoom);
+evas_object_smart_callback_add(btn_zoom, &quot;clicked&quot;, _btn_zoom_cb, ad);
+elm_box_pack_end(ad-&gt;right_vbox, btn_zoom);
+</pre>
+</li>
+<li>
+<p>Add a callback function to perform the animation:</p>
+
+<pre class="prettyprint">
+static void 
+_btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Set the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Zoom&quot;);
+&nbsp;&nbsp;&nbsp;_zoom_effect(ad-&gt;button, ad-&gt;zfrom, ad-&gt;zto);
+}
+</pre>
+</li>
+<li>
+<p>Create the function which runs the animation.</p>
+<p>To create the zoom effect, use the <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_zoom_add()</span> function with the start and destination zoom level stored in the application data (<span style="font-family: Courier New,Courier,monospace">ad-&gt;zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad-&gt;zto</span>).</p>
+
+<pre class="prettyprint">
+static void 
+_zoom_effect(Evas_Object *obj, float from, float to)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+
+&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(trans, from, to);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 2.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+</li>
+</ol>
+
+ <h2 id="flip" name="flip">Creating a Flip Effect</h2>
+ 
+<p>This effect is applied to a pair of objects, in the order they are added, in the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> transition. In this example, add the animation target button and the button called buttonbck, which represents the back of the target button.</p>
+<p>To create a flip effect:</p>
+<ol>
+<li>
+<p>Create the action button for the flip effect:</p>
+
+<pre class="prettyprint">
+// Flip button
+btn_flip = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_flip, &quot;Flip x&quot;);
+evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_flip);
+evas_object_smart_callback_add(btn_flip, &quot;clicked&quot;, _btn_flip_cb, ad);
+elm_box_pack_end(ad-&gt;left_vbox, btn_flip);
+</pre>
+</li>
+<li>
+<p>Create and start the animation with the 2 objects (target button and back button) to animate:</p>
+
+<pre class="prettyprint">
+static void 
+_btn_flip_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Set the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Flip&quot;);
+&nbsp;&nbsp;&nbsp;_flip_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+</pre>
+</li>
+<li>
+<p>Create the function which runs the animation.</p>
+<p>This flip animation is created using the <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_flip_add()</span> function. The second parameter is the axis of the flip: in this example it is the X axis, so the button flips down from top to show the back button. The last parameter is the flip direction: <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> means clockwise.</p>
+<pre class="prettyprint">
+static void 
+_flip_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+</li>
+</ol>
+
+ <h2 id="blend" name="blend">Creating a Blend Transition</h2>
+
+<p>The blend effect works the same way as the flip, but without the axis or direction information. Use the back button in this case as well.</p>
+
+<p>To create a blend transition:</p>
+<ol>
+<li>
+<p>Create the blend effect button:</p>
+<pre class="prettyprint">
+// Blend button
+btn_blend = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_blend, &quot;Blend&quot;);
+evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_blend);
+evas_object_smart_callback_add(btn_blend, &quot;clicked&quot;, _btn_blend_cb, ad);
+elm_box_pack_end(ad-&gt;center_vbox, btn_blend);
+</pre>
+</li>
+<li>
+<p>Create the blend transition callback:</p>
+<pre class="prettyprint">
+static void 
+_btn_blend_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Set the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Blend&quot;);
+&nbsp;&nbsp;&nbsp;_blend_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+</pre>
+</li>
+<li>
+<p>Create and start the blend animation.</p>
+<p>This animation is created by adding 2 objects to <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> and using  the <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_blend_add()</span> function.</p>
+
+<pre class="prettyprint">
+static void 
+_blend_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_blend_add(trans);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+</li>
+</ol>
+
+
+ <h2 id="fade" name="fade">Creating a Fade Effect</h2>
+
+<p>The fade effect works exactly the same way as the blend effect.</p>
+
+<p>To create a fade effect:</p>
+<ol>
+<li>
+<p>Create the fade button:</p>
+<pre class="prettyprint">
+// Fade button
+btn_fade = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_fade, &quot;Fade&quot;);
+evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_fade);
+evas_object_smart_callback_add(btn_fade, &quot;clicked&quot;, _btn_fade_cb, ad);
+elm_box_pack_end(ad-&gt;right_vbox, btn_fade);
+</pre>
+</li>
+<li>
+<p>Add the button callback:</p>
+<pre class="prettyprint">
+static void 
+_btn_fade_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Set the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Fade&quot;);
+&nbsp;&nbsp;&nbsp;_fade_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+</pre>
+</li>
+<li>
+<p>Create and start the animation. Call the <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_fade_add()</span> function.</p>
+
+<pre class="prettyprint">
+static void 
+_fade_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_fade_add(trans);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+</li>
+</ol>
+
+ <h2 id="flip_y" name="flip_y">Creating a Flip on the Y Axis</h2>
+
+<p>This is same as the flip transition, but on the Y axis.</p>
+<p>To create a flip on the Y axis:</p>
+<ol>
+<li>
+<p>Create the flip y button:</p>
+<pre class="prettyprint">// Flip y button
+btn_flip_y = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_flip_y, &quot;Flip y&quot;);
+evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_flip_y);
+evas_object_smart_callback_add(btn_flip_y, &quot;clicked&quot;, _btn_flip_y_cb, ad);
+elm_box_pack_end(ad-&gt;left_vbox, btn_flip_y);
+</pre>
+</li>
+<li>
+<p>Add the button callback:</p>
+<pre class="prettyprint">
+static void 
+_btn_flip_y_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Set the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Flip 2&quot;);
+&nbsp;&nbsp;&nbsp;_flip_y_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+</pre>
+</li>
+<li>
+<p>Create and start the animation:</p>
+<pre class="prettyprint">
+static void 
+_flip_y_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+</li>
+</ol>
+
+ <h2 id="wipe" name="wipe">Creating a Wipe Effect</h2>
+
+<p>The wipe transition is applied on an Evas object considering the wipe type and the direction.</p>
+<p>To create a wipe effect:</p>
+<ol>
+<li>
+<p>Create the wipe animation button:</p>
+
+<pre class="prettyprint">
+// Wipe button
+btn_wipe = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_wipe, &quot;Wipe&quot;);
+evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_wipe);
+evas_object_smart_callback_add(btn_wipe, &quot;clicked&quot;, _btn_wipe_cb, ad);
+elm_box_pack_end(ad-&gt;right_vbox, btn_wipe);
+</pre>
+</li>
+<li>
+<p>Add the button callback:</p>
+
+<pre class="prettyprint">
+static void 
+_btn_wipe_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Set the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Wipe&quot;);
+&nbsp;&nbsp;&nbsp;_wipe_effect(ad-&gt;button);
+}
+</pre>
+</li>
+<li>
+<p>Create and start the wipe animation.</p>
+<p>The animation function calls the <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_wipe_add()</span> function with <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span> as the second parameter to hide the button and <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span> as the last parameter to set the direction (left to right).</p>
+
+<pre class="prettyprint">
+static void 
+_wipe_effect(Evas_Object *obj)
+{
+&nbsp;&nbsp;&nbsp; Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp; trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp; elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp; elm_transit_effect_wipe_add(trans, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+&nbsp;&nbsp;&nbsp; elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp; elm_transit_go(trans);
+}
+</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>
diff --git a/org.tizen.ui.practices/html/native/efl/elementary_transit_effect_tutorial_n.htm b/org.tizen.ui.practices/html/native/efl/elementary_transit_effect_tutorial_n.htm
new file mode 100644
index 0000000..41961fe
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/elementary_transit_effect_tutorial_n.htm
@@ -0,0 +1,232 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Elementary Transit Effects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#initial">Initializing the Application Layout</a></li>
+			<li><a href="#rotation">Implementing the Rotation Effect</a></li>
+			<li><a href="#zoom">Implementing the Zoom Effect</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Elementary Transit Effects</h1>
+
+<p>This tutorial demonstrates how you can implement a variety of EFL animation effects using the APIs available in the EFL library.</p>
+
+ <h2 id="initial" name="initial">Initializing the Application Layout</h2>
+<p>The application uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> and <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> for view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_list</span> for the composition of the screen, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
+<p>The transit is designed to apply various animated transition effects to the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. The following transition effects are supported in the Tizen native applications:</p>
+<ul>
+<li>Blend</li>
+<li>Color</li>
+<li>Fade</li>
+<li>Flip</li>
+<li>Rotation</li>
+<li>Transition</li>
+<li>Wipe</li>
+<li>Zoom</li>
+</ul>
+
+<p>To initialize the application layout:</p>
+<ol>
+<li>
+<p>Create the layout with the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function. First, a window is created and the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component is added to it to decorate the window with an indicator. The <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component is added to act as a view manager for the window and provide the window title functionality.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&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;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;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = create_main_view(ad);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+
+&nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
+}
+</pre>
+</li>
+<li>
+<p>Create the main view with the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function. The main view consists of a naviframe containing a list. This function returns a list of naviframe object pointers for the content set.</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
+&nbsp;&nbsp;&nbsp;Evas_Object *navi, *list;
+
+&nbsp;&nbsp;&nbsp;navi = elm_naviframe_add(ad-&gt;conform);
+
+&nbsp;&nbsp;&nbsp;list = elm_list_add(navi);
+&nbsp;&nbsp;&nbsp;elm_list_mode_set(list, ELM_LIST_COMPRESS);
+
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Blend&quot;, NULL, NULL, blend_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Color&quot;, NULL, NULL, color_cb, navi
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Fade&quot;, NULL, NULL, fade_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Flip&quot;, NULL, NULL, flip_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Rotation&quot;, NULL, NULL, rotation_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;ResizableFlip&quot;, NULL, NULL, resizable_flip_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Translation&quot;, NULL, NULL, translation_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Wipe&quot;, NULL, NULL, wipe_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Zoom&quot;, NULL, NULL, zoom_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Custom&quot;, NULL, NULL, custom_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_go(list);
+
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(navi, &quot;Transit&quot;, NULL, NULL, list, NULL);
+
+&nbsp;&nbsp;&nbsp;return navi;
+}
+</pre>
+
+<p>This tutorial describes only the rotation and zoom implementations. For more information about other effects, see the <span style="font-family: Courier New,Courier,monospace">transit.c</span> file and the <a href="../../../../org.tizen.native.mobile.apireference/group__Transit.html">Transit</a> API. The following figure illustrates the rotation and zoom effects.</p>
+
+<p class="figure">Figure: Rotation and zoom</p>
+<p align="center"><img alt="Rotation and zoom" src="../../images/transit_rotation_zoom.png" /></p> 
+
+</li>
+</ol>
+
+
+ <h2 id="rotation" name="rotation">Implementing the Rotation Effect</h2>
+
+<p>When the rotation effect is selected in the list, a related callback function that implements the animation effect is called. The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+<p>To implement the rotation effect:</p>
+<ol>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">elm_transit</span> object with the <span style="font-family: Courier New,Courier,monospace">elm_transit_add()</span> function to add the transit effect:
+<pre class="prettyprint">
+static void
+rotation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = (Evas_Object *) data;
+&nbsp;&nbsp;&nbsp;Elm_Transit *transit = elm_transit_add();
+</pre>
+</li>
+<li>Set the transit rotation amount and duration:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// 360 degree rotation effect in the clockwise direction
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(transit, 0, 360);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 1);
+&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit, transit_del_cb, NULL);
+</pre>
+</li>
+<li>To start the transit animation, use the <span style="font-family: Courier New,Courier,monospace">elm_transit_go()</span> function:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;elm_transit_go(transit);
+}
+</pre>
+</li>
+</ol>
+
+ <h2 id="zoom" name="zoom">Implementing the Zoom Effect</h2>
+
+<p>When the zoom effect is selected in the list, a related callback function that implements the animation effect is called. The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+<p>To implement the zoom effect:</p>
+<ol>
+<li>After adding the transit object, add an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> to get the zoom effect:
+<pre class="prettyprint">
+static void
+zoom_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = (Evas_Object *) data;
+</pre>
+</li>
+<li>Set the zoom from the original size (1.0) to 0.4 times the original size, and set the duration:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Zoom out to scale 0.6
+&nbsp;&nbsp;&nbsp;Elm_Transit *transit = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_smooth_set(transit, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit, 1.0, 0.4);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 0.5);
+</pre>
+</li>
+<li>Similarly, set the zoom size (0.4) back to the original size (1.0), and set the duration:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Zoom in to the original size
+&nbsp;&nbsp;&nbsp;Elm_Transit *transit2 = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_smooth_set(transit2, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit2, layout);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit2, 0.5);
+&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit2, transit_del_cb, NULL);
+</pre>
+</li>
+<li>Set both effects to be applied in sequence, and start the animation:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;elm_transit_chain_transit_add(transit, transit2);
+&nbsp;&nbsp;&nbsp;elm_transit_go(transit);
+}
+</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>
diff --git a/org.tizen.ui.practices/html/native/efl/evas_advanced_objects_n.htm b/org.tizen.ui.practices/html/native/efl/evas_advanced_objects_n.htm
new file mode 100644
index 0000000..5fb12ed
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/evas_advanced_objects_n.htm
@@ -0,0 +1,379 @@
+<!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>Advanced Manipulation of Evas Objects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+		<li><a href="#create">Creating the Basic Application</a></li>
+		<li><a href="#attach">Attaching Data to the Object</a></li>
+		<li><a href="#scale">Using Scale Functions</a></li>
+		<li><a href="#render">Configuring the Evas Object Render Mode</a></li>
+		</ul>	
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Advanced Manipulation of Evas Objects</h1>
+
+  
+<p>This tutorial demonstrates how you can use Evas object extra functions.</p>
+
+<p>This tutorial shows how to create an application that enables scaling of an Evas text object by clicking buttons. Data setter and getter functions are used to pass the scalable object through the clicked button object to a callback.</p>
+<p>The tutorial also shows how to change the Evas object rendering mode using the extra object manipulation API. </p>  
+
+<p class="figure">Figure: Advanced Evas application</p> 
+<p align="center"><img alt="Advanced Evas application" src="../../images/evas_advanced.png" /></p>
+
+
+<h2 id="create" name="create">Creating the Basic Application</h2>
+<p>To create the basic application:</p>
+<ol>
+<li>
+<p>To use the required APIs, include the following libraries:</p>
+
+<pre class="prettyprint">#include &lt;app.h&gt;
+#include &lt;Elementary.h&gt;
+#include &lt;system_settings.h&gt;
+#include &lt;efl_extension.h&gt;</pre>
+</li>
+
+<li>
+<p>Create objects for an Elementary window and buttons for scaling and changing the object render mode. Also create a text object and 2 rectangle objects to connect to the application data structure:</p>
+
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *scale_incr_button;
+&nbsp;&nbsp;&nbsp;Evas_Object *scale_decr_button;
+
+&nbsp;&nbsp;&nbsp;Evas_Object *render_text;
+&nbsp;&nbsp;&nbsp;Evas_Object *blend_mode_button;
+&nbsp;&nbsp;&nbsp;Evas_Object *copy_mode_button;
+&nbsp;&nbsp;&nbsp;Evas_Object *render_rect1;
+&nbsp;&nbsp;&nbsp;Evas_Object *render_rect2;
+} 
+appdata_s;</pre>
+</li>
+</ol>
+
+<h3 id="window" name="window">Creating the Elementary Window</h3>
+<p>To create an elementary window:</p>
+<ol>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function and give there the name and title of the application. To set a callback for the Back hardware button, use the <span style="font-family: Courier New,Courier,monospace">eext_object_event_callback_add()</span> function. To display the Evas object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function.</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;Extra object function&quot;, &quot;Extra object function&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;// Window callbacks
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Show the window
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}</pre>
+</li>
+
+<li>
+
+<p>Implement callback functions to enable closing the application: </p>
+
+<pre class="prettyprint">static void
+back_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+}
+
+static void
+win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ui_app_exit();
+}</pre>
+</li>
+</ol>
+
+<h3 id="create_app" name="create_app">Creating an Application</h3>
+<p>Create an Elementary application with a GUI:</p>
+
+<pre class="prettyprint">static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Create the application UI
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
+
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+
+&nbsp;&nbsp;&nbsp;// Run the main loop
+&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+}</pre>
+
+<h3 id="button" name="button">Creating Buttons</h3>
+<p>To create buttons:</p>
+<ol>
+<li>
+<p>Create the scale buttons. The <span style="font-family: Courier New,Courier,monospace">move()</span> and <span style="font-family: Courier New,Courier,monospace">resize()</span> functions configure the buttons&#39; custom geometry.</p>
+
+<pre class="prettyprint">// Scale increasing button
+ad-&gt;scale_incr_button = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;scale_incr_button, &quot;Scale +&quot;);
+evas_object_resize(ad-&gt;scale_incr_button, 120, 50);
+evas_object_move(ad-&gt;scale_incr_button, 180, 20);
+evas_object_show(ad-&gt;scale_incr_button);
+
+// Scale decreasing button
+ad-&gt;scale_decr_button = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;scale_decr_button, &quot;Scale -&quot;);
+evas_object_resize(ad-&gt;scale_decr_button, 120, 50);
+evas_object_move(ad-&gt;scale_decr_button, 180, 170);
+evas_object_show(ad-&gt;scale_decr_button);</pre>
+</li>
+
+<li>
+<p>Create the render mode change buttons:</p>
+
+<pre class="prettyprint">// Blend render mode button
+ad-&gt;blend_mode_button = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;blend_mode_button, &quot;BLEND Mode&quot;);
+evas_object_resize(ad-&gt;blend_mode_button, 190, 50);
+evas_object_move(ad-&gt;blend_mode_button, 30, 280);
+evas_object_show(ad-&gt;blend_mode_button);
+
+// Copy render mode button
+ad-&gt;copy_mode_button = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;copy_mode_button, &quot;COPY Mode&quot;);
+evas_object_resize(ad-&gt;copy_mode_button, 190, 50);
+evas_object_move(ad-&gt;copy_mode_button, 260, 280);
+evas_object_show(ad-&gt;copy_mode_button);</pre>
+</li>
+</ol>
+
+<h3 id="callback" name="callback">Creating Callbacks for the Button Click Signal</h3>
+<p>To create the callbacks:</p>
+<ol>
+<li>
+<p>Create callbacks:</p>
+
+<pre class="prettyprint">
+evas_object_smart_callback_add(ad-&gt;scale_incr_button, &quot;clicked&quot;, scale_incr_cb, NULL);
+evas_object_smart_callback_add(ad-&gt;scale_decr_button, &quot;clicked&quot;, scale_decr_cb, NULL);
+evas_object_smart_callback_add(ad-&gt;blend_mode_button, &quot;clicked&quot;, blend_mode_cb, ad);
+evas_object_smart_callback_add(ad-&gt;copy_mode_button, &quot;clicked&quot;, copy_mode_cb, ad);</pre>
+</li>
+
+<li>
+<p>Implement callback functions to enable changing the scale and render mode:</p>
+
+<pre class="prettyprint">static void
+scale_incr_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *evas_text = evas_object_data_get(obj, &quot;evas_text&quot;);
+&nbsp;&nbsp;&nbsp;if (!evas_text)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;double current_scale = evas_object_scale_get(evas_text);
+
+&nbsp;&nbsp;&nbsp;if (current_scale &gt;= 5.0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;evas_object_scale_set(evas_text, current_scale + 0.2);
+}
+
+static void
+scale_decr_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *evas_text = evas_object_data_get(obj, &quot;evas_text&quot;);
+&nbsp;&nbsp;&nbsp;if (!evas_text)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;double current_scale = evas_object_scale_get(evas_text);
+
+&nbsp;&nbsp;&nbsp;if (current_scale &lt;= 0.0)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_scale_set(evas_text, current_scale - 0.2);
+}
+
+static void
+blend_mode_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;evas_object_text_text_set(ad-&gt;render_text, &quot;EVAS_RENDER_BLEND: d = d * (1-sa) + s&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_render_op_set(ad-&gt;render_rect2, EVAS_RENDER_BLEND);
+}
+
+static void
+copy_mode_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;evas_object_text_text_set(ad-&gt;render_text, &quot;EVAS_RENDER_COPY: d = s&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_render_op_set(ad-&gt;render_rect2, EVAS_RENDER_COPY);
+}</pre>
+</li>
+</ol>
+
+<h2 id="attach" name="attach">Attaching Data to the Object</h2>
+<p>To attach data to the object:</p>
+<ol>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_set()</span> function. To create the keyword to get the data, use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_get()</span> function.</p>
+
+<p>Create the text object using the <span style="font-family: Courier New,Courier,monospace">evas_object_text_add()</span> function.</p>
+
+<pre class="prettyprint">
+evas = evas_object_evas_get(ad-&gt;win);</pre>
+</li>
+
+<li>
+<p>Create the Evas text object to be used as data attached to the button:</p>
+
+<pre class="prettyprint">
+evas_text = evas_object_text_add(evas);
+evas_object_text_text_set(evas_text, &quot;Scalable Text Object&quot;);
+evas_object_text_font_set(evas_text, &quot;Sans&quot;, 10);
+evas_object_color_set(evas_text, 50, 100, 200, 255);
+evas_object_move(evas_text, 10, 90);
+evas_object_show(evas_text);</pre>
+</li>
+</ol>
+
+<h3 id="atdata" name="atdata">Attaching Data</h3>
+
+<p>The data is passed to the function through buttons. Use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_set()</span> function for the button. Give a pointer to the attach data, and the key name to associate it with the data.</p>
+
+<pre class="prettyprint">
+evas_object_data_set(ad-&gt;scale_incr_button, &quot;evas_text&quot;, evas_text);
+evas_object_data_set(ad-&gt;scale_decr_button, &quot;evas_text&quot;, evas_text);</pre>
+
+<h3 id="getdata" name="detdata">Getting data</h3>
+
+<p>To get the file data attached to the object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_get()</span> function and give the data key name added when you attached this data:</p>
+
+<pre class="prettyprint">Evas_Object *evas_text = evas_object_data_get(obj, &quot;evas_text&quot;);</pre>
+
+<h3 id="deldata" name="deldata">Deleting data</h3>
+
+<p>To delete the data attached to the object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_del()</span> function and give the data key name added when you attached this data:</p>
+
+<pre class="prettyprint">evas_object_data_del(obj, &quot;evas_text&quot;);</pre>
+
+<h2 id="scale" name="scale">Using Scale Functions</h2>
+
+<p>To set the scale factor to a single Evas object instead of setting scale to the entire application, use the <span style="font-family: Courier New,Courier,monospace">evas_object_scale_set()</span> function. This is useful when you want scalable UI elements at runtime. However, only text and textblock objects have scaling change handlers. Other objects do not change visually on this call. In this application, the scale is defined in the button click callbacks.</p>
+
+<pre class="prettyprint">double current_scale = evas_object_scale_get(evas_text);
+
+if (current_scale &gt;= 5.0)
+&nbsp;&nbsp;&nbsp;return;
+
+evas_object_scale_set(evas_text, current_scale + 0.2);</pre>
+
+<p>Get the current scale of the Evas text object and check its maximum size. If the current size is smaller than the maximum size, the scale factor for the object is increased using the evas_object_scale_set function. The text object is updated on display and its size changes.</p>
+
+<h2 id="render" name="render">Configuring the Evas Object Render Mode</h2>
+
+<p>To change the render operation to be used for rendering the Evas object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_render_op_set()</span> function. To get the current render operation, use the <span style="font-family: Courier New,Courier,monospace">evas_object_render_op_get()</span> function.</p>
+
+<h3 id="rect" name="rect">Creating Rectangle Objects</h3>
+
+<p>Creates Evas rectangle objects to change the Evas rendering mode for them:</p>
+
+<pre class="prettyprint">// Rectangle with yellow background
+ad-&gt;render_rect1 = evas_object_rectangle_add(evas);
+evas_object_color_set(ad-&gt;render_rect1, 240, 220, 50, 191);
+evas_object_resize(ad-&gt;render_rect1, 260, 260);
+evas_object_move(ad-&gt;render_rect1, 60, 400);
+evas_object_show(ad-&gt;render_rect1);
+
+// Translucent rectangle with blue foreground
+ad-&gt;render_rect2 = evas_object_rectangle_add(evas);
+evas_object_color_set(ad-&gt;render_rect2, 25, 110, 220, 127);
+evas_object_resize(ad-&gt;render_rect2, 260, 260);
+evas_object_move(ad-&gt;render_rect2, 170, 500);
+evas_object_show(ad-&gt;render_rect2);</pre>
+
+<h3 id="change" name="change">Changing the Render Operation</h3>
+
+<p>To change the rendering mode, use the <span style="font-family: Courier New,Courier,monospace">evas_object_render_op_set()</span> function and give the render operation constant, which informs Evas of the function to use when drawing the eEvas object on canvas. By default, all evas objects use the <span style="font-family: Courier New,Courier,monospace">EVAS_RENDER_BLEND</span> mode and all colors are drawn using the &quot;d = d*(1-sa) + s&quot; formula, where &quot;d&quot; is destination color, &quot;sa&quot; is source alpha, and &quot;s&quot; is source color.</p>
+
+<p>Change the rendering mode to copy mode (d = s):</p>
+
+<pre class="prettyprint">evas_object_render_op_set(ad-&gt;render_rect2, EVAS_RENDER_COPY);</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>
diff --git a/org.tizen.ui.practices/html/native/efl/evas_basic_objects_n.htm b/org.tizen.ui.practices/html/native/efl/evas_basic_objects_n.htm
new file mode 100644
index 0000000..c6ade95
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/evas_basic_objects_n.htm
@@ -0,0 +1,349 @@
+<!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>Basic Manipulation of Evas Objects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+		<li><a href="#work">Working with Evas</a></li>
+		<li><a href="#clip">Clipping an Object</a></li>
+		<li><a href="#color">Changing Colors and Visibility</a></li>
+		<li><a href="#ref">Reference Counting</a></li>
+		<li><a href="#order">Changing the Object Order on Canvas</a></li>
+		</ul>	
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Basic Manipulation of Evas Objects</h1>
+
+  
+<p>Most Evas objects can be manipulated using generic functions.</p>
+
+<p>The list of available basic actions does not depend on the object&#39;s type. Evas implements functionality that allows performing basic manipulation, such as showing, hiding, setting, and getting geometry, bringing a layer up or down, managing color, clipping, and reference counting.</p>
+
+<p>This tutorial introduces the basic manipulations available for <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> object.</p>
+
+
+<h2 id="work" name="work">Working with Evas</h2>
+
+<ol>
+<li>
+<p>To start interacting with Evas, first create an Evas instance or get a reference to an already allocated Evas object:</p>
+
+<pre class="prettyprint">ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+Evas *evas = evas_object_evas_get(ad-&gt;win);</pre>
+</li>
+
+<li>
+<p>When an instance of Evas object exists, you can start creating basic Evas objects using obtained reference to Evas as a parent for child objects. The following example creates an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> with size 480x800, position on window at 0,0 by x and y axis, and set as a background:</p>
+
+<pre class="prettyprint">
+ad-&gt;bg = evas_object_rectangle_add(evas);
+evas_object_color_set(ad-&gt;bg, 255, 255, 255, 255);
+evas_object_resize(ad-&gt;bg, 480, 800);
+evas_object_move(ad-&gt;bg, 0, 0);
+evas_object_show(ad-&gt;bg);
+</pre>
+
+<p class="figure">Figure: Empty window</p> 
+<p align="center"><img alt="Empty window" src="../../images/empty_window.png" /></p>
+
+</li>
+</ol>
+
+
+<h2 id="clip" name="clip">Clipping an Object</h2>
+
+<p>You can set an Evas object as a clipper for another Evas object. To obtain a clipper object, create an Evas object, set its width and height parameters, and call the <span style="font-family: Courier New,Courier,monospace">evas_object_clip_set()</span> function to set the object as a clipper for other Evas objects:</p>
+
+<pre class="prettyprint">ad-&gt;img = evas_object_image_filled_add(evas);
+_app_get_resource(&quot;images/enlightenment.png&quot;, image_path, PATH_MAX);
+evas_object_image_file_set(ad-&gt;img, image_path, NULL);
+if (evas_object_image_load_error_get(ad-&gt;img) != EVAS_LOAD_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;return;
+
+evas_object_geometry_get(ad-&gt;spacer, NULL, NULL, &amp;w, &amp;h);
+evas_object_name_set(ad-&gt;img, &quot;background&quot;);
+evas_object_resize(ad-&gt;img, WIDTH, HEIGHT);
+evas_object_move(ad-&gt;img, w, h);
+evas_object_show(ad-&gt;img);
+
+ad-&gt;clipper = evas_object_rectangle_add(evas);
+evas_object_geometry_get(ad-&gt;img, &amp;x, &amp;y, &amp;w, &amp;h);
+evas_object_move(ad-&gt;clipper, WIDTH / 4 + x, HEIGHT / 4 + y);
+evas_object_resize(ad-&gt;clipper, w / 2, h / 2);
+evas_object_clip_set(ad-&gt;img, ad-&gt;clipper);
+evas_object_show(ad-&gt;clipper);
+</pre>
+
+<p class="figure">Figure: Using the clipper</p> 
+<p align="center"><img alt="Using the clipper" src="../../images/using_clipper.png" /></p>
+
+
+<p>You can also unset the clipper object using the <span style="font-family: Courier New,Courier,monospace">evas_object_clip_unset()</span> function. As a result, there are 2 objects, an image and a rectangle. The rectangle is on top of the image object according to the creation order.</p>
+
+<pre class="prettyprint">static void
+_clipper_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+
+&nbsp;&nbsp;&nbsp;const char *object_name = evas_object_name_get(ad-&gt;img);
+&nbsp;&nbsp;&nbsp;if (strcmp(object_name, &quot;background&quot;) != 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;if (evas_object_clip_get(ad-&gt;img) == ad-&gt;clipper)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_clip_unset(ad-&gt;img);
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_clip_set(ad-&gt;img, ad-&gt;clipper);
+}</pre>
+
+<p class="figure">Figure: Using the clipper</p> 
+<p align="center"><img alt="Using the clipper" src="../../images/using_clipper2.png" /></p>
+
+<h2 id="color" name="color">Changing Colors and Visibility</h2>
+
+<p>You can manage the object colors and visibility. To change a color of a valid <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>, use the <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span> and pass a color value:</p>
+
+<pre class="prettyprint">static void
+_color_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+
+&nbsp;&nbsp;&nbsp;int alpha, r, g, b;
+
+&nbsp;&nbsp;&nbsp;evas_object_color_get(ad-&gt;clipper, &amp;r, &amp;g, &amp;b, &amp;alpha);
+&nbsp;&nbsp;&nbsp;evas_color_argb_unpremul(alpha, &amp;r, &amp;g, &amp;b);
+
+&nbsp;&nbsp;&nbsp;if (g &gt; 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = b = 0;
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = b = 255;
+
+&nbsp;&nbsp;&nbsp;evas_color_argb_premul(alpha, &amp;r, &amp;g, &amp;b);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;clipper, r, g, b, alpha);
+}</pre>
+
+<p class="figure">Figure: Applying color</p> 
+<p align="center"><img alt="Applying color" src="../../images/applying_color.png" /></p>
+
+<p>You can also change the opacity of the object:</p>
+
+<pre class="prettyprint">static void
+_opacity_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+
+&nbsp;&nbsp;&nbsp;int alpha, r, g, b;
+
+&nbsp;&nbsp;&nbsp;evas_object_color_get(ad-&gt;clipper, &amp;r, &amp;g, &amp;b, &amp;alpha);
+&nbsp;&nbsp;&nbsp;evas_color_argb_unpremul(alpha, &amp;r, &amp;g, &amp;b);
+
+&nbsp;&nbsp;&nbsp;alpha -= 20;
+&nbsp;&nbsp;&nbsp;if (alpha &lt; 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alpha = 255;
+
+&nbsp;&nbsp;&nbsp;evas_color_argb_premul(alpha, &amp;r, &amp;g, &amp;b);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;clipper, r, g, b, alpha);
+}</pre>
+
+<p class="figure">Figure: Changing opacity</p> 
+<p align="center"><img alt="Changing opacity" src="../../images/changing_opacity.png" /></p>
+
+<p>You can also hide the object when it is not needed:</p>
+
+<pre class="prettyprint">static void
+_visibility_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+
+&nbsp;&nbsp;&nbsp;if (evas_object_visible_get(ad-&gt;clipper))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_hide(ad-&gt;clipper);
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;clipper);
+}</pre>
+
+<p class="figure">Figure: Changing visibility</p> 
+<p align="center"><img alt=" Changing visibility" src="../../images/applying_invisibility.png" /></p>
+
+<h2 id="ref" name="ref">Reference Counting</h2>
+
+<p>Evas has a simple reference counting mechanism that is useful for scenarios like inside a code block, callbacks exist which would possibly delete an object we are operating on afterwards.</p>
+<p>To increment the reference count of an object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_ref()</span> function. If the reference count is greater than 0, the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function is called until all references are released. References cannot go below 0 and are limited to 2&#94;32 - 1 for each object:</p>
+
+<pre class="prettyprint">ad-&gt;spacer = evas_object_rectangle_add(evas);
+evas_object_color_set(ad-&gt;spacer, 0, 255, 100, 255);
+evas_object_move(ad-&gt;spacer, 0, 0);
+evas_object_resize(ad-&gt;spacer, 120, 20);
+evas_object_show(ad-&gt;spacer);
+evas_object_ref(ad-&gt;spacer);
+
+static void
+_unref_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;spacer)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;if (evas_object_ref_get(ad-&gt;spacer) != 0)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_unref(ad-&gt;spacer);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+int x, y, w, h;
+
+evas_object_geometry_get(ad-&gt;spacer, &amp;x, &amp;y, NULL, NULL);
+evas_object_move(ad-&gt;img, x, y);
+evas_object_geometry_get(ad-&gt;img, &amp;x, &amp;y, &amp;w, &amp;h);
+evas_object_move(ad-&gt;clipper, x + (w / 4), y + (h / 4));
+evas_object_move(ad-&gt;clipper_border, x + (w / 4) - 3, y + (h / 4) - 3);
+evas_object_del(ad-&gt;spacer);
+ad-&gt;spacer = NULL;
+}</pre>
+
+
+<p>A green rectangle is used as a padding and the clipper object calculates its x, y coordinates based on the rectangle position. The rectangle reference count is increased by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_ref()</span> function and now it is equal to 1. When the <span style="font-family: Courier New,Courier,monospace">_unref_cb</span> callback is triggered, the reference count value is higher than 0 and the <span style="font-family: Courier New,Courier,monospace">evas_object_del(ad-&gt;spacer)</span> function has no effect on the object. After the second callback call, the <span style="font-family: Courier New,Courier,monospace">evas_object_ref_get(ad-&gt;spacer)</span> function returns 0 and the <span style="font-family: Courier New,Courier,monospace">evas_object_del(ad-&gt;spacer)</span> function marks the rectangle object for deletion.</p>
+
+<p class="figure">Figure: Removing padding</p> 
+<p align="center"><img alt="Removing padding" src="../../images/removing_padding.png" /></p>
+
+<h2 id="order" name="order">Changing the Object Order on Canvas</h2>
+
+<p>By default, the placing of objects on canvas is based on their creation order.</p>
+
+<pre class="prettyprint">
+ad-&gt;order_rect1 = evas_object_rectangle_add(evas);
+evas_object_name_set(ad-&gt;order_rect1, &quot;red&quot;);
+evas_object_color_set(ad-&gt;order_rect1, 255, 0, 0, 255);
+evas_object_move(ad-&gt;order_rect1, 120, 310);
+evas_object_resize(ad-&gt;order_rect1, 200, 200);
+evas_object_show(ad-&gt;order_rect1);
+
+ad-&gt;order_rect2 = evas_object_rectangle_add(evas);
+evas_object_name_set(ad-&gt;order_rect2, &quot;blue&quot;);
+evas_object_color_set(ad-&gt;order_rect2, 0, 0, 255, 255);
+evas_object_move(ad-&gt;order_rect2, 180, 350);
+evas_object_resize(ad-&gt;order_rect2, 200, 200);
+evas_object_show(ad-&gt;order_rect2);
+</pre>
+
+<p class="figure">Figure: Default order of objects on canvas</p> 
+<p align="center"><img alt="Default order of objects on canvas" src="../../images/default_order.png" /></p>
+ 
+<p>You can change the object triggering the <span style="font-family: Courier New,Courier,monospace">_object_order_cb()</span> callback, which switches the order of the rectangles.</p>
+
+<pre class="prettyprint">static void
+_object_order_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+
+&nbsp;&nbsp;&nbsp;Evas_Object *rect = evas_object_below_get(ad-&gt;order_rect2);
+&nbsp;&nbsp;&nbsp;if (!rect)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;const char *name = evas_object_name_get(rect);
+&nbsp;&nbsp;&nbsp;if (name)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(name, &quot;red&quot;) == 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_stack_below(ad-&gt;order_rect2, rect);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;rect = evas_object_below_get(ad-&gt;order_rect1);
+&nbsp;&nbsp;&nbsp;if (!rect)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;name = evas_object_name_get(rect);
+&nbsp;&nbsp;&nbsp;if (name)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(name, &quot;blue&quot;) == 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_stack_below(ad-&gt;order_rect1, rect);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<p class="figure">Figure: Changed order of objects on canvas</p> 
+<p align="center"><img alt="Changed order of objects on canvas" src="../../images/changed_order.png" /></p>
+
+<p>Evas allows placing an object to top and bottom layer of the canvas object stack. The <span style="font-family: Courier New,Courier,monospace">of _raise_cb</span> callback puts the canvas background on the top position of the screen. The <span style="font-family: Courier New,Courier,monospace">call of _lower_cb</span> callback puts the background to the bottom.</p>
+
+<pre class="prettyprint">static void
+_lower_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+
+&nbsp;&nbsp;&nbsp;evas_object_lower(ad-&gt;bg);
+}
+
+static void
+_raise_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+
+&nbsp;&nbsp;&nbsp;evas_object_raise(ad-&gt;bg);
+&nbsp;&nbsp;&nbsp;ad-&gt;isBgOnTop = EINA_TRUE;
+}</pre>
+
+<p class="figure">Figure: Canvas background by default and on top</p> 
+<p align="center"><img alt="Canvas background by default and on top" src="../../images/background_order.png" /></p>
+
+
+
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.practices/html/native/efl/evas_map_animation_n.htm b/org.tizen.ui.practices/html/native/efl/evas_map_animation_n.htm
new file mode 100644
index 0000000..d658dd6
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/evas_map_animation_n.htm
@@ -0,0 +1,389 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Evas Map Effects</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+				<li><a href="#Map_Points">Map Points</a></li>
+				<li><a href="#Utility_Functions">Utility Functions</a></li>
+				<li><a href="#Zoom">Zoom</a></li>
+				<li><a href="#threeD_Maps">3D Maps</a></li>
+				<li><a href="#threeD_Rotation">3D Rotation and Perspective</a></li>
+				<li><a href="#Color_Light">Color and Lighting</a></li>
+				<li><a href="#Mapping">Mapping</a></li>
+				<li><a href="#Lighting">Lighting</a></li>
+				<li><a href="#Alpha_Channel">Alpha Channel</a></li>
+				<li><a href="#Smoothing">Smoothing</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>	
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Evas Map Effects</h1> 
+
+<p>Evas Map animations allow you to apply transformations to all types of objects by way of UV mapping.</p>
+
+<p>In UV mapping, you map points in the source object to 3D space positions in the target object. This allows for rotation, perspective, scale, and other transformation effects, depending on the map. In addition, each map point can carry a multiplier color, which, if properly calculated, can be used to apply 3D shading effects on the target object.</p>
+
+<p>Evas provides both raw and easy-to-use functions for UV mapping. The raw functions allow you to create UV maps outside Evas and import them into your application, for example by loading them from an external file. The easy-to-use functions allow you to create UV maps directly in Evas by calculating the map points based on high-level parameters, such as rotation angle and ambient light.</p>
+
+<h2 id="Map_Points" name="Map_Points">Map Points</h2>
+
+<p>A map consists of a set of points. (Currently, only four points are supported.) Each point contains X and Y canvas coordinates that can be used to alter the geometry of the mapped object, and a Z coordinate that indicates the depth of the point. The Z coordinate does not normally affect the map, but several utility functions use it to calculate the right position of the point given the other parameters.</p>
+
+<p>First, create an <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object using the <span style="font-family: Courier New,Courier,monospace;">evas_map_new()</span> function. This function creates the specified number of map points (currently only up to four points). Each point is empty and ready to be modified with <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> functions.</p>
+
+<pre class="prettyprint">Evas_Map *m = evas_map_new(4);</pre>
+
+<p>If you want to get the size (number of points) of an existing map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_count_get()</span> function.</p>
+
+<p>To set the coordinates for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_point_coord_set(Evas_Map *m, int idx, Evas_Coord x, Evas_Coord y, Evas_Coord z)</pre>
+
+<p>The following example shows a common way to define a map that matches the geometry of a rectangle (a square in this case):</p>
+
+<pre class="prettyprint">
+evas_map_point_coord_set(m, 0, 100, 100, 0);
+evas_map_point_coord_set(m, 1, 300, 100, 0);
+evas_map_point_coord_set(m, 2, 300, 300, 0);
+evas_map_point_coord_set(m, 3, 100, 300, 0);
+</pre>
+
+<p class="figure">Figure: Map</p>
+<p align="center"><img alt="Map" src="../../images/evas_map_1.png" /></p>
+
+<p>The following examples all produce the same result as the above example, but with simpler code:</p>
+
+<ul>
+    <li>
+        <p>To create a rectangle map using the starting X and Y coordinates combined with width and height, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_geometry()</span> function:</p>
+        <pre class="prettyprint">evas_map_util_points_populate_from_geometry(Evas_Map *m, Evas_Coord x, Evas_Coord y, Evas_Coord w, Evas_Coord h, Evas_Coord z)</pre>
+        <p>The following example creates the same map as above:</p>
+        <pre class="prettyprint">evas_map_util_points_populate_from_geometry(m, 100, 100, 200, 200, 0);</pre>
+    </li>
+    <li>
+        <p>To create a map based on the geometry of a given object, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object()</span> or <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object_full()</span> function. The former sets the Z coordinate of all points to 0, whereas the latter allows you to define the same custom Z coordinate for all points:</p>
+        <pre class="prettyprint">evas_map_util_points_populate_from_object(Evas_Map *m, const Evas_Object *obj)</pre>
+        <pre class="prettyprint">evas_map_util_points_populate_from_object_full(Evas_Map *m, const Evas_Object *obj, Evas_Coord z)</pre>
+        <p>The following example creates the same map as above:</p>
+        <pre class="prettyprint">
+Evas_Object *o;
+evas_object_move(o, 100, 100);
+evas_object_resize(o, 200, 200);
+evas_map_util_points_populate_from_object(m, o);
+// OR
+evas_map_util_points_populate_from_object_full(m, o, 0);</pre>
+    </li>
+</ul>
+
+<p>You can apply several effects to an object by simply setting each point of the map to the appropriate coordinates. The following example shows how to create a simulated perspective:</p>
+
+<p class="figure">Figure: Simulated perspective</p>
+<p align="center"><img alt="Simulated perspective" src="../../images/evas_map_2.png" /></p>
+
+<pre class="prettyprint">
+evas_map_point_coord_set(m, 0, 100, 100, 0);
+evas_map_point_coord_set(m, 1, 250, 120, 0);
+evas_map_point_coord_set(m, 2, 250, 280, 0);
+evas_map_point_coord_set(m, 0, 100, 300, 0);
+</pre>
+
+<p>In the above example, the Z coordinate is unused: when setting points by hand, the Z coordinate is irrelevant.</p>
+
+<p>If you want to get the actual coordinates of a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_get()</span> function:</p>
+
+<pre class="prettyprint">evas_map_point_coord_get(const Evas_Map *m, int idx, Evas_Coord *x, Evas_Coord *y, Evas_Coord *z)</pre>
+
+<p>After you have defined the map points, apply them to your map for transformation:</p>
+
+<pre class="prettyprint">
+evas_object_map_set(o, m);
+evas_object_map_enable_set(o, EINA_TRUE);
+</pre>
+
+<p>Finally, after you are done with the map, release the memory allocated to it using the <span style="font-family: Courier New,Courier,monospace;">evas_map_free()</span> function:</p>
+
+<pre class="prettyprint">evas_map_free(m);</pre>
+
+<p>The utility functions described in the next section allow you to perform the above tasks with less coding work.</p>
+
+<h2 id="Utility_Functions" name="Utility_Functions">Utility Functions</h2>
+
+<p>Utility functions take an already configured map and allow you to easily modify it to produce specific effects. For example, to rotate an object around its center, you need the rotation angle and the coordinates of each corner of the object to perform the math required to get the new set of coordinates that needs to be set for the map. Evas provides a utility function that does the math for you:</p>
+
+<pre class="prettyprint">evas_map_util_rotate(Evas_Map *m, double degrees, Evas_Coord cx, Evas_Coord cy)</pre>
+
+<p>This function rotates the map based on the angle and the center coordinates of the rotation provided as arguments. A positive angle rotates the map clockwise, while a negative angle rotates the map counter-clockwise.</p>
+
+<p>The following example shows how to rotate an object around its center point by 45 degrees clockwise. In the following figure, the center of rotation is the red dot.</p>
+
+<pre class="prettyprint">
+evas_object_geometry_get(o, &amp;x, &amp;y, &amp;w, &amp;h);
+m = evas_map_new(4);
+evas_map_util_points_populate_from_object(m, o);
+evas_map_util_rotate(m, 45, x + (w / 2), y + (h / 2));
+evas_object_map_set(o, m);
+evas_object_map_enable_set(o, EINA_TRUE);
+evas_map_free(m);
+</pre>
+
+<p class="figure">Figure: Rotating around the center point</p>
+<p align="center"><img alt="Rotating around the center point" src="../../images/evas_map_3.png" /></p>
+
+<p>You can rotate the object around any other point simply by setting the last two arguments of the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_rotate()</span> function to the appropriate values:</p>
+
+<pre class="prettyprint">evas_map_util_rotate(m, 45, x + w - 20, y + h - 20);</pre>
+
+<p class="figure">Figure: Rotating around other points</p>
+<p align="center"><img alt="Rotating around other points" src="../../images/evas_map_4.png" /></p>
+
+<p>You can also set the center of the window as the center of the rotation using the appropriate coordinates of the Evas canvas:</p>
+
+<pre class="prettyprint">
+evas_output_size_get(evas, &amp;w, &amp;h);
+m = evas_map_new(4);
+evas_map_util_points_populate_from_object(m, o);
+evas_map_util_rotate(m, 45, w, h);
+evas_object_map_set(o, m);
+evas_object_map_enable_set(o, EINA_TRUE);
+evas_map_free(m);
+</pre>
+
+<h2 id="Zoom" name="Zoom">Zoom</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_zoom()</span> function zooms the points of the map from a center point, defined by <span style="font-family: Courier New,Courier,monospace;">cx</span> and <span style="font-family: Courier New,Courier,monospace;">cy</span>. The <span style="font-family: Courier New,Courier,monospace;">zoomx</span> and <span style="font-family: Courier New,Courier,monospace;">zoomy</span> arguments specify how much to zoom in on the X and Y axes. A value of 1.0 means no zoom, 2.0 means double the size, 0.5 means half the size, and so on. All the coordinates are global canvas coordinates.</p>
+
+<pre class="prettyprint">
+evas_map_util_zoom(Evas_Map *m, double zoomx, double zoomy, Evas_Coord cx, Evas_Coord cy)
+</pre>
+
+<h2 id="threeD_Maps" name="threeD_Maps">3D Maps</h2>
+
+<p>Maps can also be used to achieve a 3D effect. In a 3D effect, the Z coordinate of each point is meaningful: the higher the value, the further back the point is located. Smaller values (usually negative) mean that the point is closer to the user.</p>
+
+<p>3D also introduces the concept of the back face of an object. An object is said to be facing the user when all its points are placed in a clockwise formation, as shown in the left map in the following figure. Rotating the map around its Y axis swaps the order of the points into a counter-clockwise formation, making the object face away from the user, as shown in the right map in the following figure. The back face is especially relevant in lighting (see below).</p>
+
+<p class="figure">Figure: Rotating around the Y axis</p>
+<p align="center"><img alt="Rotating around the Y axis" src="../../images/evas_map_5.png" /></p>
+
+<p>To determine whether a map is facing the user, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_clockwise_get()</span> function. This function returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the map is facing the user and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if the map is facing away from the user. This is normally done after all the other operations are applied to the map.</p>
+
+<pre class="prettyprint">evas_map_util_clockwise_get(Evas_Map *m)</pre>
+
+<h2 id="threeD_Rotation" name="threeD_Rotation">3D Rotation and Perspective</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_rotate()</span> function transforms a map to apply a 3D rotation to the mapped object. You can apply the rotation around any point in the canvas (including a Z coordinate). You can also apply the rotation around any of the three axes.</p>
+
+<pre class="prettyprint">evas_map_util_3d_rotate(Evas_Map *m, double dx, double dy, double dz, Evas_Coord cx, Evas_Coord cy, Evas_Coord cz)</pre>
+
+<p>Starting from this simple setup, and setting the maps so that the blue square rotates around the Y axis, we get the following:</p>
+
+<p class="figure">Figure: 3D rotation</p>
+<p align="center"><img alt="3D rotation" src="../../images/evas_map_6.png" /></p>
+
+<p>A simple overlay over the image shows the original geometry of each object and the axis around which they are being rotated. The Z axis is not shown, since it is orthogonal to the screen. To show the Z axis, that is, to add 3D perspective to the transformation, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_perspective()</span> function on the map after its position has been set:</p>
+
+<pre class="prettyprint">evas_map_util_3d_perspective(Evas_Map *m, Evas_Coord px, Evas_Coord py, Evas_Coord z0, Evas_Coord foc)</pre>
+
+<p>The result makes the vanishing point the center of each object:</p>
+
+<p class="figure">Figure: Adding perspective</p>
+<p align="center"><img alt="Adding perspective" src="../../images/evas_map_7.png" /></p>
+
+<h2 id="Color_Light" name="Color_Light">Color and Lighting</h2>
+
+<p>Each point in a map can be set to a color, which will be multiplied with the object’s own color and linearly interpolated between adjacent points. To set the color separately for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_color_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_point_color_set(Evas_Map *m, int idx, int r, int g, int b, int a)</pre>
+
+<p>To set the same color for every point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_color_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_util_points_color_set(Evas_Map *m, int r, int g, int b, int a)</pre>
+
+<p>When using a 3D effect, colors can be used to improve its look by simulating a light source. The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_lighting()</span> function makes this task easier by taking the coordinates of the light source and its color, along with the color of the ambient light. Evas then sets the color of each point based on its distance to the light source, the angle at which the object is facing the light source, and the ambient light. Here, the orientation of each point is important.</p>
+
+<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
+
+<p>If the map points are defined counter-clockwise, the object faces away from the user and is therefore obscured, since no light is reflecting back from it.</p>
+
+<p class="figure">Figure: Obscured object</p>
+<p align="center"><img alt="Obscured object" src="../../images/evas_map_8.png" /></p>
+
+<h2 id="Mapping" name="Mapping">Mapping</h2>
+
+<p>Images need special handling when mapped. While Evas can easily handle objects, it is completely oblivious to the contents of images. This means that each point in a map needs to be mapped to a specific pixel in the source image. Failing to do this can result in unexpected behavior.</p>
+
+<p>Let's get started with the following three images, each sized at 200 × 200 pixels:</p>
+
+<p class="figure">Figure: Starting point</p>
+<p align="center"><img alt="Starting point" src="../../images/evas_map_9.png" /></p>
+
+<p>The following three images illustrate the case where a map is set to an image object without setting the right UV mapping for each map point. The objects themselves are mapped properly to their new geometries, but the images are not displayed correctly within the mapped objects.</p>
+
+<p class="figure">Figure: Questionable result</p>
+<p align="center"><img alt="Questionable result" src="../../images/evas_map_10.png" /></p>
+
+<p>To transform an image correctly, Evas needs to know how to handle the image within the map. You can do this using the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_image_uv_set()</span> function, which allows you to map a given point in a map to a given pixel in a source image:</p>
+
+<pre class="prettyprint">
+evas_map_point_image_uv_set(Evas_Map *m, int idx, double u, double v)
+</pre>
+
+<p>To match our example images to the maps above, all we need is the size of each image, which we can get using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_size_get()</span> function.</p>
+
+<pre class="prettyprint">
+// Tux 1: Some cropping and stretch up
+evas_map_point_image_uv_set(m, 0, 0, 20);
+evas_map_point_image_uv_set(m, 1, 200, 20);
+evas_map_point_image_uv_set(m, 2, 200, 180);
+evas_map_point_image_uv_set(m, 3, 0, 180);
+evas_object_map_set(tux1, m);
+evas_object_map_enable_set(tux1, EINA_TRUE);
+
+// Inverted texture for shadow:
+evas_map_point_image_uv_set(m, 0, 0, 180);
+evas_map_point_image_uv_set(m, 1, 200, 180);
+evas_map_point_image_uv_set(m, 2, 200, 20);
+evas_map_point_image_uv_set(m, 3, 0, 20);
+evas_object_map_set(tux1_shadow, m);
+evas_object_map_enable_set(tux1_shadow, EINA_TRUE);
+
+// Tux 2: Make it fit to the map:
+evas_map_point_image_uv_set(m, 0, 0, 0);
+evas_map_point_image_uv_set(m, 1, 200, 0);
+evas_map_point_image_uv_set(m, 2, 200, 200);
+evas_map_point_image_uv_set(m, 3, 0, 200);
+evas_object_map_set(tux2, m);
+evas_object_map_enable_set(tux2, EINA_TRUE);
+
+// Tux 3: Zoom and fit relatively to image size
+evas_object_image_size_get(evas_object_image_source_get(tux3), &amp;w, &amp;h);
+evas_map_point_image_uv_set(m, 0, 0.1 * w, 0.1 * h);
+evas_map_point_image_uv_set(m, 1, 0.9 * w, 0.1 * h);
+evas_map_point_image_uv_set(m, 2, 0.9 * w, 0.9 * h);
+evas_map_point_image_uv_set(m, 3, 0.1 * w, 0.9 * h);
+evas_object_map_set(tux3, m);
+evas_object_map_enable_set(tux3, EINA_TRUE);
+</pre>
+
+<p class="figure">Figure: Correct result</p>
+<p align="center"><img alt="Correct result" src="../../images/evas_map_11.png" /></p>
+
+<p>You can also set a map to use only part of an image, or you can even map the points in inverted order. Combined with the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_source_set()</span> function, you can achieve more interesting results still.</p>
+
+<h2 id="Lighting" name="Lighting">Lighting</h2>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> allows you to define an ambient light and a light source within the scene. Both of these light sources have their own colors.</p>
+
+<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
+
+<p>The above function is used to apply lighting calculations (from a single light source) to a given map. The red, green, and blue values of each vertex will be modified to reflect the lighting based on the light source coordinates, its color, the ambient color, and the angle at which the map faces the light source. The points of a surface should be defined in a clockwise formation if the surface is facing the user, since faces have a logical side for lighting.</p>
+
+<p>To get the reflections (gradient) in the shadow of our previous example, you have to define a source of light close enough to the user and a very bright ambient light, for example:</p>
+
+<pre class="prettyprint">
+evas_map_util_3d_lighting(m, // Evas_Map object
+&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;250/2, 150/2, -100, // Spot light coordinates
+&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;255, 255, 255, // Spot light color
+&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;200, 200, 200); // Ambient light color
+</pre>
+
+<h2 id="Alpha_Channel" name="Alpha_Channel">Alpha Channel</h2>
+
+<p>You can also use an alpha channel on your map by enabling the alpha channel feature:</p>
+
+<pre class="prettyprint">evas_map_alpha_set(Evas_Map *m, Eina_Bool enabled)</pre>
+
+<p>Next, set the alpha value separately for each map point:</p>
+
+<pre class="prettyprint">evas_map_point_color_set(Evas_Map *m, int idx, int r, int g, int b, int a)</pre>
+
+<p>Alternatively, you can set the same alpha value to all map points:</p>
+
+<pre class="prettyprint">evas_map_util_points_color_set(Evas_Map *m, int r, int g, int b, int a)</pre>
+
+<p>The following code sets the shadow transparency for the first image in the above three-image example:</p>
+
+<pre class="prettyprint">
+// Set object transparency to 50%:
+evas_map_util_points_color_set(m, 255, 255, 255, 127);
+
+// Tux&#39;s head is almost invisible in the shadow:
+evas_map_point_color_set(m, 3, 255, 255, 255, 15);
+evas_map_point_color_set(m, 4, 255, 255, 255, 15);
+</pre>
+
+<h2 id="Smoothing" name="Smoothing">Smoothing</h2>
+
+<p>To enable smoothing when rendering a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_smooth_set(Evas_Map *m, Eina_Bool enabled)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object to apply smoothing to. The second argument sets whether to enable the smoothing:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>: Enable smoothing.</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>: Disable smoothing.</li>
+</ul>
+
+<p>If the object is of a type that has its own smoothing settings, the smoothing settings must be disabled for both the object and the map. Map smoothing is enabled by default. To check whether map smoothing is enabled, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_get()</span> function.</p>
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/evas_map_effects_n.htm b/org.tizen.ui.practices/html/native/efl/evas_map_effects_n.htm
new file mode 100644
index 0000000..79f4d71
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/evas_map_effects_n.htm
@@ -0,0 +1,253 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Evas Map Effects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+		<li><a href="#create">Creating the Basic Application</a></li>
+		<li><a href="#data">Creating Map Data</a></li>
+		<li><a href="#apply">Applying the Map to the Evas Object</a></li>
+		<li><a href="#clear">Clearing Map Data and Enabling Map Features</a></li>
+		</ul>	
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Evas Map Effects</h1>
+
+  
+<p>This tutorial demonstrates how you can use Evas map functions to create an application in which you can change the map point coordinates of Evas objects. You can modify the map point U and V texture source point using Evas map mapping APIs. &quot;U&quot; and &quot;V&quot; denote the axes of the 2D texture.</p>
+
+<p class="figure">Figure: Evas map mapping application</p> 
+<p align="center"><img alt="Evas map mapping application" src="../../images/evas_map_effect.png" /></p>
+ 
+<h2 id="create" name="create">Creating the Basic Application</h2>
+<p>To create a basic application:</p>
+<ol>
+<li>
+<p>To use the required APIs, include the following libraries:</p>
+
+<pre class="prettyprint">#include &lt;app.h&gt;
+#include &lt;Elementary.h&gt;
+#include &lt;system_settings.h&gt;
+#include &lt;efl_extension.h&gt;</pre>
+</li>
+
+<li>
+<p>Create an Evas object for an Elementary window and a button for mapping the map information:</p>
+
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+Evas_Object *default_btn;
+} 
+appdata_s;</pre>
+</li>
+<li>
+<p>To create an Elementary window, use the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function and give the name and title of the application. To set a callback on hardware Back button, the use <span style="font-family: Courier New,Courier,monospace">eext_object_event_callback_add()</span> function. To display the Evas object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function.</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp; Evas_Object *evas_text = NULL;
+&nbsp;&nbsp;&nbsp; Evas *evas&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; = NULL;
+
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;Extra object function&quot;, &quot;Extra object function&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;// Window callbacks
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;evas = evas_object_evas_get(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;evas_text = evas_object_text_add(evas);
+&nbsp;&nbsp;&nbsp;evas_object_text_text_set(evas_text, &quot;Evas Map Mapping&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_text_font_set(evas_text, &quot;Sans&quot;, 18);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(evas_text, 50, 100, 200, 255);
+&nbsp;&nbsp;&nbsp;evas_object_move(evas_text, 10, 90);
+&nbsp;&nbsp;&nbsp;evas_object_show(evas_text);
+
+&nbsp;&nbsp;&nbsp;// Evas map source code
+
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}</pre>
+</li>
+
+<li>
+<p>Implement callback functions to enable closing the application:</p>
+
+<pre class="prettyprint">static void
+back_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+}
+
+static void
+win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ui_app_exit();
+}</pre>
+</li>
+
+<li>
+<p>Create an elementary application with a GUI:</p>
+
+<pre class="prettyprint">static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Create the application UI
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
+
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+
+&nbsp;&nbsp;&nbsp;// Run the main loop
+&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+}</pre>
+</li>
+
+<li>
+<p>Create the button for mapping. Use the move and resize functions to configure the button&#39;s custom geometry:</p>
+
+<pre class="prettyprint">// Create a button for mapping
+ad-&gt;button = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;button, &quot;Evas Map Mapping &quot;);
+evas_object_move(ad-&gt;button, 15, 100);
+evas_object_resize(ad-&gt;button, ELM_SCALE_SIZE(250), ELM_SCALE_SIZE(200));
+evas_object_show(ad-&gt;button);
+
+// Create a default button
+ad-&gt;default_btn = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;default_btn, &quot;Default Button &quot;);
+evas_object_move(ad-&gt;default_btn, 15, 300);
+evas_object_resize(ad-&gt;default_btn, ELM_SCALE_SIZE(250), ELM_SCALE_SIZE(200));
+evas_object_show(ad-&gt;default_btn);</pre>
+</li>
+</ol>
+
+<h2 id="data" name="data">Creating Map Data</h2>
+
+<p>By using the <span style="font-family: Courier New,Courier,monospace">evas_map_new()</span> and <span style="font-family: Courier New,Courier,monospace">evas_map_*()</span> functions, you can create map data to be attached to the button:</p>
+
+<ol>
+<li>
+<p>Get the <span style="font-family: Courier New,Courier,monospace">Evas_Map</span> object to create map data using the <span style="font-family: Courier New,Courier,monospace">evas_map_new()</span> function:</p>
+
+<pre class="prettyprint">
+Evas_Map *map;
+map = evas_map_new(4);</pre>
+
+<p>The map of transformation points is used later with an Evas object.</p>
+</li>
+
+<li>
+<p>Set the coordinates for each point using the <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set()</span> function. You can apply several effects to the Evas object by setting each point of the map to the right coordinates.</p>
+
+<pre class="prettyprint">// Set map coordinates
+evas_map_point_coord_set(map, 0, 15, 100, 0);
+evas_map_point_coord_set(map, 1, 265, 100, 0);
+evas_map_point_coord_set(map, 2, 265, 300, 0);
+evas_map_point_coord_set(map, 3, 15, 400, 0);</pre>
+</li>
+
+<li>
+<p>Set UV data using the <span style="font-family: Courier New,Courier,monospace">evas_map_point_image_uv_set()</span> function, which informs the map of the correct pixels in the image it is mapping:</p>
+
+<pre class="prettyprint">// Set image UV
+evas_map_point_image_uv_set(map, 0, 0, 0);
+evas_map_point_image_uv_set(map, 1, 500, 50);
+evas_map_point_image_uv_set(map, 2, 500, 400);
+evas_map_point_image_uv_set(map, 3, 0, 200);</pre>
+</li>
+</ol>
+
+
+<h2 id="apply" name="apply">Applying the Map to the Evas Object</h2>
+
+<p>To set the map on a given object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_map_set()</span> function for the object. A map contains 4 points, each having canvas x, y coordinates with an optional z point value for perspective correction, if available. Each point also has U an V coordinates.</p>
+
+<pre class="prettyprint">// Apply map to button evas object
+
+evas_object_map_set(ad-&gt;button, map);</pre>
+
+<h2 id="clear" name="clear">Clearing Map Data and Enabling Map Features</h2>
+
+<p>Free the map data and all memory associated with it when you no longer need it:</p>
+
+<pre class="prettyprint">// Free map resources
+
+evas_map_free(map);</pre>
+
+<p>You can enable or disable the map features for the object. When enabled, the object geometry is saved, and the new geometry changes its position and size to reflect the set map geometry.</p>
+
+<pre class="prettyprint">// Enable map features
+
+evas_object_map_enable_set(ad-&gt;button, EINA_TRUE);</pre>
+
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.practices/html/native/efl/evas_objects_n.htm b/org.tizen.ui.practices/html/native/efl/evas_objects_n.htm
new file mode 100644
index 0000000..8cb88d4
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/evas_objects_n.htm
@@ -0,0 +1,824 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Evas Objects</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#renderable">Primitive Renderable Objects</a></li>
+            <li><a href="#smart">Primitive Smart Objects</a></li>
+			<li><a href="#container_objects">Primitive Container Objects</a></li>
+			<li><a href="#image">Image Objects</a></li>
+			<li><a href="#block">Textblock Objects</a></li>
+			<li><a href="#clip">Clipping Objects</a></li>
+			<li><a href="#map">Mapping Objects</a></li>
+        </ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+		</ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Evas Objects</h1>
+  
+<p>An Evas object is the most basic visual entity used in Evas. Everything, be it a single line or a complex list of UI components, is an Evas object.</p>
+
+<h2 id="renderable" name="renderable">Primitive Renderable Objects</h2>
+<p>Primitive objects are the base upon which to build a complex interface: rectangles, lines, polygons, <a href="#image">images</a>, <a href="#block">textblocks</a>, and texts.</p>
+<h3>Rectangle</h3>
+<p>There is only one function to deal with rectangle objects. However, the rectangle is manipulated using the generic evas object functions.</p>
+<p>The evas rectangle serves a number of key functions when working on Evas programs.</p>
+<ul>
+<li>background</li>
+<li>debugging</li>
+<li>clipper</li>
+</ul>
+
+<h4>Background</h4>
+<p>A common requirement of Evas programs is to have a solid color background, which can be accomplished with the following code.</p>
+<pre class="prettyprint">Evas_Object *bg = evas_object_rectangle_add(evas_canvas);
+
+// Here we set the rectangles red, green, blue and opacity levels
+evas_object_color_set(bg, 255, 255, 255, 255); // opaque white background
+evas_object_resize(bg, WIDTH, HEIGHT); // covers full canvas
+evas_object_show(bg);
+</pre>
+
+<h4>Debugging</h4>
+<p>When debugging visual issues with evas programs, the rectangle is a useful tool. The rectangle&#39;s simplicity means that it is easier to pinpoint issues with it than with more complex objects. A common technique to use when writing an evas program and not getting the desired visual result is to replace an object for a solid color rectangle and seeing how it interacts with the other elements. This often allows us to notice clipping, parenting or positioning issues. Once the issues are identified and corrected, the rectangle can be replaced for the original object, and in all likelihood any remaining issues are specific to that object&#39;s type.</p>
+
+<h4>Clipping</h4>
+<p><a href="#clip">Clipping</a> serves two main functions:</p>
+<ul>
+<li>limiting visibility</li>
+<li>applying a layer of color to an object</li>
+</ul>
+
+
+<h3>Text</h3>
+<p>An Evas text object shows a basic single-line single-style text.</p>
+<pre class="prettyprint">Evas_Object *text = evas_object_text_add(evas_canvas);
+evas_object_text_text_set(text, &quot;some text&quot;);
+evas_object_color_set(text, 127, 0, 0, 127);
+evas_object_show(text);
+</pre>
+
+<p>To set the text, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_set(text, some_text)</span>. You can set the current text with <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_get(text)</span>.</p>
+<p>To set the font, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set(text, font, size)</span>:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">text</span>: The text object</li>
+<li><span style="font-family: Courier New,Courier,monospace">font</span>: The font name you want to use</li>
+<li><span style="font-family: Courier New,Courier,monospace">size</span>: The font size you want to use. To query the current font, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set(text, font, size)</span>.</li>
+</ul>
+<p>To set the text style, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_set(text, style)</span>. The following styles are supported:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_PLAIN</span>: Plain, standard text</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW</span>: Text with shadow underneath</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE</span>: Text with an outline</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SOFT_OUTLINE</span>: Text with a soft outline</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_GLOW</span>: Text with a glow effect</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE_SHADOW</span>: Text with both outline and shadow effects</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_FAR_SHADOW</span>: Text with (far) shadow underneath</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE_SOFT_SHADOW</span>: Text with outline and soft shadow effects combined</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SOFT_SHADOW</span>: Text with (soft) shadow underneath</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_FAR_SOFT_SHADOW</span>: Text with (far soft) shadow underneath</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM_RIGHT</span>: Shadow growing to bottom right</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM</span>: Shadow growing to the bottom</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM_LEFT</span>: Shadow growing to bottom left</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_LEFT</span>: Shadow growing to the left</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP_LEFT</span>: Shadow growing to top left</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP</span>: Shadow growing to the top</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP_RIGHT</span>: Shadow growing to top right</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_RIGHT</span>: Shadow growing to the right. To query the current style, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_get(text)</span>.</li>
+</ul>
+<p>If the text does not fit, make an ellipsis on it by using <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_set(text, ellipsis)</span>. The (float) value specifies, which part of the text is shown.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">0.0</span>: The beginning is shown and the end trimmed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">1.0</span>: The beginning is trimmed and the end shown.</li>
+<li>Any value in between means that both ends of the text have ellipsis and the set part is shown.</li>
+<li><span style="font-family: Courier New,Courier,monospace">-1.0</span>: Ellipsis is disabled. To query the current ellipsis value, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_get(text)</span>.</li>
+</ul>
+<p>When the text style is set to glow, set the glow color using <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. The effect is placed at a short distance from the text but not touching it. For glows set right at the text, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_set(text, r, g, b, a)</span>. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_get(text, r, g, b, a)</span>, respectively <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_get(text, r, g, b, a)</span>.</p>
+<p>If your text style is set to display a shadow, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_get(text, r, g, b, a)</span></p>
+<p>If your text style is set to display an outline, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_get(text, r, g, b, a)</span></p>
+
+
+<h2 id="smart" name="smart">Primitive Smart Objects</h2>
+<p>A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object&#39;s user. They could be, for example, a group of objects that move together, or implementations of whole complex UI components, providing some intelligence and extension to simple Evas objects.</p>
+
+<h2 id="container_objects" name="container_objects">Primitive Container Objects</h2>
+<p>A container is a Smart object that holds children Evas objects in a specific fashion.</p>
+<h3>Table</h3>
+<p>A table is a smart object that packs children using a tabular layout.</p>
+<pre class="prettyprint">table = evas_object_table_add(evas);
+evas_object_table_homogeneous_set(table, EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE);
+evas_object_table_padding_set(table, 0, 0);
+evas_object_resize(table, WIDTH, HEIGHT);
+evas_object_show(table);
+
+rect = evas_object_rectangle_add(evas);
+evas_object_color_set(rect, 255, 0, 0, 255);
+evas_object_size_hint_min_set(rect, 100, 50);
+evas_object_show(rect);
+evas_object_table_pack(table, rect, 1, 1, 2, 1);
+
+rect = evas_object_rectangle_add(d.evas);
+evas_object_color_set(rect, 0, 255, 0, 255);
+evas_object_size_hint_min_set(rect, 50, 100);
+evas_object_show(rect);
+evas_object_table_pack(table, rect, 1, 2, 1, 2);
+
+rect = evas_object_rectangle_add(d.evas);
+evas_object_color_set(rect, 0, 0, 255, 255);
+evas_object_size_hint_min_set(rect, 50, 50);
+evas_object_show(rect);
+evas_object_table_pack(table, rect, 2, 2, 1, 1);
+
+rect = evas_object_rectangle_add(d.evas);
+evas_object_color_set(rect, 255, 255, 0, 255);
+evas_object_size_hint_min_set(rect, 50, 50);
+evas_object_show(rect);
+evas_object_table_pack(table, rect, 2, 3, 1, 1);
+</pre>
+
+<p>In this example, we add a non-homogeneous table to the canvas with its padding set to 0.</p>
+<p>We then add four different colored rectangles with different properties.</p>
+<ul>
+<li>the first one, at the first column and first line, spans two columns and one line</li>
+<li>the second one, at the first column and second line, spans one columns and two lines</li>
+<li>the third one, at the second column and second line, fits in one cell</li>
+<li>the fourth one, at the second column and third line, also fits in one cell</li>
+</ul>
+<p>To create a table, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_add(evas)</span>.</p>
+<p>To set the table layout (the cells), use <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_set(table, homogeneous)</span>. The following values can be homogeneous:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE</span>: This default value has columns and rows calculated based on hints of individual cells. This is flexible, but much heavier on computations.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_TABLE</span>: The table size is divided equally among children, filling the whole table area. If the children have a minimum size that is larger than this (including padding), then the table overflows and is aligned respecting the alignment hint, possibly overlapping sibling cells.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_ITEM</span>: The greatest minimum cell size is used: if no element is set to expand, the contents of the table are the minimum size and the bounding box of all the children is aligned relatively to the table object using <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get()</span>. If the table area is too small to hold this minimum bounding box, then the objects keep their size and the bounding box overflows the box area, still respecting the alignment. To set the current mode, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_get(table)</span>.</li>
+</ul>
+<p>The table&#39;s content alignment is set using <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_set(table, horizontal, vertical)</span>, where <span style="font-family: Courier New,Courier,monospace">horizontal</span> and <span style="font-family: Courier New,Courier,monospace">vertical</span> are floating values. To see them, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get(table, horizontal, vertical)</span>.</p>
+<p>To set the padding, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_set(table, horizontal, vertical)</span>. To see the current value, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_get(table, horizontal, vertical)</span>.</p>
+<p>_To see the current column and row count, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_col_row_size_get(table, columns, rows)</span>.</p>
+
+<h3>Grid</h3>
+<p>A grid is a smart object that packs its children as with a regular grid layout.</p>
+<p>Grids are added to the canvas with <span style="font-family: Courier New,Courier,monospace">evas_object_grid_add(evas)</span>.</p>
+<p>To change a grid&#39;s virtual resolution, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_set(grid, width, height)</span>, to see it, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_get(grid, width, height)</span>.</p>
+<p>To add an object, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_pack(grid, child, x, y, w, h)</span>, where</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">x</span> is the virtual X coordinate of the child</li>
+<li><span style="font-family: Courier New,Courier,monospace">y</span> is the virtual y coordinate of the child</li>
+<li><span style="font-family: Courier New,Courier,monospace">w</span> is the virtual width of the child</li>
+<li><span style="font-family: Courier New,Courier,monospace">h</span> is the virtual height of the child</li>
+</ul>
+<h3>Box</h3>
+<p>A box is a simple container that sets its children objects linearly.</p>
+<p>To add a box to your canvas, use <span style="font-family: Courier New,Courier,monospace">evas_object_box_add(evas)</span>.</p>
+<p>To add a child to the box, use</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_append(box, child)</span>: The child is appended.</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_after(box, child, reference)</span>: The child is added after <span style="font-family: Courier New,Courier,monospace">reference</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_before(box, child, reference)</span>: The child is added before <span style="font-family: Courier New,Courier,monospace">reference</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_at(box, child, pos)</span>: The child is added at the specified position.</li>
+</ul>
+<p>To set the alignment, use <span style="font-family: Courier New,Courier,monospace">evas_object_box_align_set(box, horizontal, vertical)</span>.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">horizontal</span>: 0.0 means aligned to the left, 1.0 means to the right;</li>
+<li><span style="font-family: Courier New,Courier,monospace">vertical</span>: 0.0 means aligned to the top, 1.0 means to the bottom.</li>
+</ul>
+<p>Evas has predefined box layouts available:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_horizontal()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_vertical()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_horizontal()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_vertical()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_horizontal()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_vertical()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_horizontal()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_vertical()</span>;</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_stack()</span>.</li>
+</ul>
+
+<h2 id="image" name="image">Image Objects</h2> 
+
+
+<p>Using Evas, you can create and manipulate image objects. Evas supports image loaders of various formats as plug-in modules.</p>
+<p>The image formats that Evas supports include <span style="font-family: Courier New,Courier,monospace">bmp</span>, <span style="font-family: Courier New,Courier,monospace">edj</span>, <span style="font-family: Courier New,Courier,monospace">gif</span>, <span style="font-family: Courier New,Courier,monospace">ico</span>, <span style="font-family: Courier New,Courier,monospace">jpeg</span>, <span style="font-family: Courier New,Courier,monospace">pmaps</span>, <span style="font-family: Courier New,Courier,monospace">png</span>, <span style="font-family: Courier New,Courier,monospace">psd</span>, <span style="font-family: Courier New,Courier,monospace">svg</span>, <span style="font-family: Courier New,Courier,monospace">tga</span>, <span style="font-family: Courier New,Courier,monospace">tiff</span>, <span style="font-family: Courier New,Courier,monospace">wbmp</span>, <span style="font-family: Courier New,Courier,monospace">webp</span>, and <span style="font-family: Courier New,Courier,monospace">xpm</span>.</p>
+
+	<p class="figure">Figure: Evas image loader</p> 
+	<p align="center"><img alt="Evas image loader" src="../../images/evas_image_loader.png" /></p>  
+
+<h3>Evas Object Image Functions</h3>
+
+<p>Evas has over 70 image object functions. The following functions are discussed in this document:</p>
+<pre class="prettyprint">
+Evas_Object *evas_object_image_add(Evas *e);
+void evas_object_image_file_set(Evas_Object *obj, const char *file, const char *key);
+void evas_object_image_fill_set(Evas_Object *obj, int x, int y, int w, int h);
+void evas_object_image_filled_set(Evas *e, Eina_Bool setting);
+Evas_Object *evas_object_image_filled_add(Evas *e);
+void evas_object_image_smooth_scale_set(Evas_Object *obj, Eina_Bool smoothscale);
+void evas_object_image_load_size_set(Evas_Object *obj, int w, int h);
+void evas_object_image_data_set(Evas_Object *obj, void *data);
+void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);
+void evas_object_image_size_set(Evas_Object *obj, int w, int h);
+void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);
+Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);
+</pre>
+
+<h3>Creating an Image Object and Setting the Image Data Source</h3>
+<p>A common use case of an image object is to set a file as the image data source. The process has 3 steps and each one involves the following API calls:</p>
+	<ul>
+	 <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> function creates an image object and returns the pointer.
+	 <pre class="prettyprint">Evas_Object *evas_object_image_add(Evas *e);</pre>
+	 </li>
+	 <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_file_set()</span> function sets a source file on the image object. The object fetches the image pixel data from the source file.
+	 <pre class="prettyprint">void evas_object_image_file_set(Evas_Object *obj, const char *file, const char *key);</pre>
+	 </li>
+	 <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> sets how to fill the image object's area with the given pixel data.
+	 <pre class="prettyprint">void evas_object_image_fill_set(Evas_Object *obj, int x, int y, int w, int h);</pre>
+	 </li>
+	</ul>
+
+<p>In the following code example, the <span style="font-family: Courier New,Courier,monospace">main()</span> function creates an image object and displays it on a window. The image object size is 300x300 and the source image resolution is 100x127. The image is scaled into 300 by 300 to fill the image object area using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+
+&nbsp;&nbsp;&nbsp;// Create a window object
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 400);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;// Return Evas handle from window
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+
+&nbsp;&nbsp;&nbsp;// Create an image object
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);
+
+&nbsp;&nbsp;&nbsp;// Set a source file to fetch pixel data
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
+
+&nbsp;&nbsp;&nbsp;// Set the size and position of the image on the image object area
+&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(img, 0, 0, 300, 300);
+
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);
+&nbsp;&nbsp;&nbsp;evas_object_show(img);
+
+&nbsp;&nbsp;&nbsp;elm_run();
+
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+	<p class="figure">Figure: Image object display</p> 
+	<p align="center"><img alt="Image object display" src="../../images/evas_object_display.png" /></p>  
+  
+<h3 id="manage" name="manage">Managing Images</h3>
+
+<p>To manage image objects in Evas:</p>
+
+<h4>Limiting Visibility</h4>
+<p>Evas always supports the image file type it was compiled with. Check your software packager for the information and use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_extension_can_load_get()</span> function.</p>
+
+<p>Create the image object. Set a source file on it, so that the object knows where to fetch the image data.</p>
+<p>Define how to fill the image object area with the given pixel data. You can use a sub-region of the original image, or have it tiled repeatedly on the image object.</p>
+
+<pre class="prettyprint">
+img = evas_object_image_add(canvas);
+evas_object_image_file_set(img, &quot;path/to/img&quot;, NULL);
+evas_object_image_fill_set(img, 0, 0, w, h);
+</pre>
+
+
+<p>If the entire source image is to be displayed on the image object, stretched to the destination size, use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function helper that you can use instead of the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> function:</p>
+
+<pre class="prettyprint">
+evas_object_image_filled_set(img, EINA_TRUE);
+</pre>
+
+<h4>Scaling Images</h4>
+<p>Resizing image objects scales the source images to the image object size, if the source images are set to fill the object area using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function.</p>
+<p>Control the aspect ratio of an image for different sizes with functions to load images scaled up or down in memory.</p>
+
+<p>Evas has a scale cache, which caches scaled versions of images used often. You can also have Evas rescale the images smoothly, however, that is computationally expensive.</p>
+
+<p>Users can decide how to fill the image object area with the given image pixel data by setting the position, width, and height of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function. Without setting this information, the image is not displayed. If the size of the image is bigger than the image object area, only a sub-region of the original image is displayed. If the image is smaller than the area, images are tiled repeatedly to fill the object area.</p>
+
+	<p class="figure">Figure: Image scaling</p> 
+	<p align="center"><img alt="Image scaling" src="../../images/evas_image_scaling.png" /></p>  
+
+	<table>
+	<tbody>
+	<tr>
+	 <td><p align="center"><img alt="" src="../../images/evas_scaling1.png" /></p></td>
+	 <td><p align="center"><img alt="" src="../../images/evas_scaling2.png" /></p></td>
+	 <td><p align="center"><img alt="" src="../../images/evas_scaling3.png" /></p></td>
+	</tr>
+	<tr>
+     <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 50, 0, 300, 300)</span></td>
+	 <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 200, 200)</span></td>
+	 <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 100, 127)</span></td>
+	</tr>
+	</tbody>
+	</table>  
+ 	
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> function scales the image to fit the object area. Resizing the image object automatically triggers an internal call to the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>
+<pre class="prettyprint">
+void evas_object_image_filled_set(Evas *e, Eina_Bool setting);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_add()</span> function creates a new image object that automatically scales its bound image to the object area. This is a helper function around the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> functions.</p>
+
+<pre class="prettyprint">Evas_Object *evas_object_image_filled_add(Evas *e);</pre>
+
+<p>Scaled images&#39; quality can differ according to scaling algorithms. Smooth scaling improves the image quality in the process of size reducing or enlarging. Evas runs its own smooth scaling algorithm by default and provides an API so users can disable the function.</p>
+
+<pre class="prettyprint">
+void evas_object_image_smooth_scale_set(Evas_Object *obj, Eina_Bool smoothscale);</pre>
+
+<p>The algorithm is implemented using the SIMD (Single Instruction Multiple Data) vectorization in case of software rendering. It is optimized on Intel and ARM CPU through MMX and NEON command respectively.</p>
+
+<p>There is a trade-off between image smoothness and rendering performance. The load gets bigger as the image gets bigger. Users can avoid such scaling overload by using the same size of the image object and the source image.</p>
+
+<p>In the following code, 2 image objects are created to show the effects of smooth scaling. The one with smooth scaling applied appears softer on the screen.</p>
+
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+
+&nbsp;&nbsp;&nbsp;// Create a window object
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;// Return Evas handle from window
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+
+&nbsp;&nbsp;&nbsp;// Create an image object
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 0, 0);
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(img);
+
+&nbsp;&nbsp;&nbsp;// Create another image object
+&nbsp;&nbsp;&nbsp;Evas_Object *img2 = evas_object_image_filled_add(e);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img2, &quot;./logo.png&quot;, NULL);
+
+&nbsp;&nbsp;&nbsp;// Disable smooth scaling
+&nbsp;&nbsp;&nbsp;evas_object_image_smooth_scale_set(img2, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;evas_object_move(img2, 200, 0);
+&nbsp;&nbsp;&nbsp;evas_object_resize(img2, 200, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(img2);
+
+&nbsp;&nbsp;&nbsp;elm_run();
+
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+  <table>
+  <caption>Figure: Smooth scaling effects</caption>
+  <tbody>
+  <tr>
+   <td><p align="center"><img alt="Smooth scaling effects" src="../../images/evas_smooth_enabled.png" /></p></td>
+   <td><p align="center"><img alt="Smooth scaling effects" src="../../images/evas_smooth_disabled.png" /></p></td>
+  </tr>
+  <tr>
+   <td style="text-align:center;">Smooth scaling enabled</td>
+   <td style="text-align:center;">Smooth scaling disabled</td>
+  </tr>
+  </tbody></table>
+
+
+<p>Evas caches scaled image data and reuses them. Users can save the memory by loading the image in the scaled size to the memory at the beginning. This option is available only for <span style="font-family: Courier New,Courier,monospace">jpeg</span> format at the moment.</p>
+<pre class="prettyprint">
+void evas_object_image_load_size_set(Evas_Object *obj, int w, int h);</pre>
+
+<p>An example code is as follows.</p>
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+ 
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+ 
+&nbsp;&nbsp;&nbsp;// Create a window object
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+ 
+&nbsp;&nbsp;&nbsp;// Return Evas handle from window
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+ 
+&nbsp;&nbsp;&nbsp;// Create an image object
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e); 
+ 
+&nbsp;&nbsp;&nbsp;// Load the image scaled into the object size 
+&nbsp;&nbsp;&nbsp;// before evas_object_image_file_set() is called
+&nbsp;&nbsp;&nbsp;evas_object_image_load_size_set(img, 300, 300);
+ 
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL); 
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);
+&nbsp;&nbsp;&nbsp;evas_object_show(img); 
+ 
+&nbsp;&nbsp;&nbsp;elm_run();
+ 
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h3>Setting Raw Data to Image Object</h3>
+<p>Users can set raw data to the image object manually using  the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function instead of setting an image file as the data source. The image data should be in raw data form. In case of an 200x200 sized image with alpha channel enabled (32 bits per pixel), the size of the image data is 14000 (=200*200*4) bytes.</p>
+
+<pre class="prettyprint">void evas_object_image_data_set(Evas_Object *obj, void *data);</pre>
+
+<p>Image objects fetch metadata such as width or height from the header of the image files. Since the raw data does not have the metadata, users must set the size of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_size_set()</span> function.</p>
+
+<pre class="prettyprint">void evas_object_image_size_set(Evas_Object *obj, int w, int h);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_get()</span> function returns the data pointer of an image object and requires a parameter to determine whether the data is modified or not. If users pass <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for <span style="font-family: Courier New,Courier,monospace">for_writing</span>, Evas updates the image pixels in the next rendering cycle.</p>
+
+<pre class="prettyprint">void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_update_add()</span> helps to mark the updated area for rendering efficiency.</p>
+
+<pre class="prettyprint">void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);</pre>
+
+<p>The following example code and figure show how to specify the area to update.</p>
+<pre class="prettyprint">
+evas_object_image_data_update_add(image, 100, 100, 50, 50);
+evas_object_image_data_update_add(image, 180, 100, 50, 50);
+evas_object_image_data_update_add(image, 85, 200, 160, 80);
+</pre>
+ 
+  <p class="figure">Figure: Partial image update</p> 
+  <p align="center"><img alt="Partial image update" src="../../images/evas_partial_update.png" /></p>  
+
+<p>The following code creates an image object and sets a source file on it. Then it implements the blur effect to the pixel data and saves them using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_save()</span> function.</p>
+
+<pre class="prettyprint">Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);</pre>
+
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+
+void image_blur(Evas_Object *img)
+{
+&nbsp;&nbsp;&nbsp;unsigned char *img_src = evas_object_image_data_get(img, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;int w, h;
+&nbsp;&nbsp;&nbsp;evas_object_image_size_get(img, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;int blur_size = 4;
+&nbsp;&nbsp;&nbsp;int x, y, xx, yy;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; h; y++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; w; x++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int avg_color[3] = {0, 0, 0};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int blur_pixel_cnt = 0;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++)
+&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;int idx = (yy * w * 4) + (xx * 4);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[0] += img_src[idx + 0];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] += img_src[idx + 1];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] += img_src[idx + 2];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++blur_pixel_cnt;
+&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;avg_color[0] /= blur_pixel_cnt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] /= blur_pixel_cnt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] /= blur_pixel_cnt;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++)
+&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;int idx = (yy * w * 4) + (xx * 4);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 0] = avg_color[0];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 1] = avg_color[1];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 2] = avg_color[2];
+&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;evas_object_image_data_update_add(img, 0, 0, w, h);
+}
+
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 200, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
+&nbsp;&nbsp;&nbsp;evas_object_show(img);
+
+&nbsp;&nbsp;&nbsp;image_blur(img);
+
+&nbsp;&nbsp;&nbsp;evas_object_image_save(img, &quot;logo2.png&quot;, NULL, &quot;quality=100 compress=8&quot;);
+
+&nbsp;&nbsp;&nbsp;elm_run();
+
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+  <table>
+  <caption>Figure: Blur effect</caption>
+  <tbody>
+  <tr>
+   <td><p align="center"><img alt="Blur effect" src="../../images/evas_blur1.png" /></p></td>
+   <td><p align="center"><img alt="Blur effect" src="../../images/evas_blur2.png" /></p></td>
+  </tr>
+  <tr>
+   <td style="text-align:center;">Before</td>
+   <td style="text-align:center;">After</td>
+  </tr>
+  </tbody></table>  
+
+<h4>Giving Performance Hints</h4>
+<p>In image viewer applications, you can display an image in full size. The navigation to the adjacent images on your album must be fluid and fast. Thus, while displaying a given image, the program can load the next and previous image in the background to be able to immediately repaint the screen with a new image.</p>
+
+<p>Evas addresses this issue with image preloading:</p>
+
+<pre class="prettyprint">
+prev = evas_object_image_filled_add(canvas);
+evas_object_image_file_set(prev, &quot;/path/to/prev&quot;, NULL);
+evas_object_image_preload(prev, EINA_TRUE);
+next = evas_object_image_filled_add(canvas);
+evas_object_image_file_set(next, &quot;/path/to/next&quot;, NULL);
+evas_object_image_preload(next, EINA_TRUE);
+</pre>
+
+<p>If you are loading an image which is too big, set its loading size smaller.</p>
+
+<p>Load a scaled down version of the image in the memory if that is the size you are displaying (this can speed up the loading considerably):</p>
+<pre class="prettyprint">evas_object_image_load_scale_down_set(img, zoom);</pre>
+<p>If you know you are showing a sub-set of the image pixels, you can avoid loading the complementary data:</p>
+<pre class="prettyprint">evas_object_image_load_region_set(img, x, y, w, h);
+</pre>
+
+<h4>Specifying Borders</h4>
+<p>With Evas, you can specify image margins to be treated as borders. The margins then maintain their aspects when the image is resized. This makes setting frames around other UI objects easier. The following figure illustrates the border behavior, when the image is resized.</p>
+
+<p class="figure">Figure: Borders in Evas</p> 
+<p align="center"><img alt="Borders in Evas" src="../../images/9patch.png" /></p> 
+ 
+
+ <h2 id="block" name="block">Textblock Objects</h2>
+
+<p>Unlike basic text objects, a textblock handles complex text, managing multiple styles and multiline text based on HTML-like tags. However, these extra features are heavier on memory and processing cost.</p>
+<p>The textblock objects is an object that shows big chunks of text. Textblock supports many features, including text formatting, automatic and manual text alignment, embedding items (icons, for example). Textblock has three important parts: the text paragraphs, the format nodes and the cursors.</p>
+<p>To set markup to format text, use for example <span style="font-family: Courier New,Courier,monospace">&lt;font_size=50&gt;Big!&lt;/font_size&gt;</span>. Set more than one style directive in one tag with <span style="font-family: Courier New,Courier,monospace">&lt;font_size=50 color=#F00&gt;Big and Red!&lt;/font_size&gt;</span>. Please note that we used <span style="font-family: Courier New,Courier,monospace">&lt;/font_size&gt;</span> although the format also included color. This is because the first format determines the matching closing tag&#39;s name. You can use anonymous tags, such as <span style="font-family: Courier New,Courier,monospace">&lt;font_size=30&gt;Big&lt;/&gt;</span>, which pop any type of format, but it is advisable to use the named alternatives instead.</p>
+<p>Textblock supports the following formats:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">font</span>: Font description in fontconfig such as format, for example &quot;Sans:style=Italic:lang=hi&quot;. or &quot;Serif:style=Bold&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_weight</span>: Overrides the weight defined in &quot;font&quot;. For example, &quot;font_weight=Bold&quot; is the same as &quot;font=:style=Bold&quot;. The supported weights are &quot;normal&quot;, &quot;thin&quot;, &quot;ultralight&quot;, &quot;light&quot;, &quot;book&quot;, &quot;medium&quot;, &quot;semibold&quot;, &quot;bold&quot;, &quot;ultrabold&quot;, &quot;black&quot;, and &quot;extrablack&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_style</span>: Overrides the style defined in &quot;font&quot;. For example, &quot;font_style=Italic&quot; is the same as &quot;font=:style=Italic&quot;. The supported styles are &quot;normal&quot;, &quot;oblique&quot;, and &quot;italic&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_width</span>: Overrides the width defined in &quot;font&quot;. For example, &quot;font_width=Condensed&quot; is the same as &quot;font=:style=Condensed&quot;. The supported widths are &quot;normal&quot;, &quot;ultracondensed&quot;, &quot;extracondensed&quot;, &quot;condensed&quot;, &quot;semicondensed&quot;, &quot;semiexpanded&quot;, &quot;expanded&quot;, &quot;extraexpanded&quot;, and &quot;ultraexpanded&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">lang</span>: Overrides the language defined in &quot;font&quot;. For example, &quot;lang=he&quot; is the same as &quot;font=:lang=he&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_fallbacks</span>: A comma delimited list of fonts to try if finding the main font fails.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_size</span>: The font size in points.</li>
+<li><span style="font-family: Courier New,Courier,monospace">font_source</span>: The source of the font, for example an eet file.</li>
+<li><span style="font-family: Courier New,Courier,monospace">color</span>: The text color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">underline_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">underline2_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">outline_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">shadow_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">glow_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">glow2_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">strikethrough_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">align</span>: The text alignment in one of the following formats: &quot;auto&quot; (according to text direction), &quot;left&quot;, &quot;right&quot;, &quot;center&quot; or &quot;middle&quot;, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
+<li><span style="font-family: Courier New,Courier,monospace">valign</span>: The vertical text alignment in one of the following formats: &quot;top&quot;, &quot;bottom&quot;, &quot;middle&quot;, &quot;center&quot;, &quot;baseline&quot; or &quot;base&quot;, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The text wrap in one of the following formats: &quot;word&quot;, &quot;char&quot;, &quot;mixed&quot;, or &quot;none&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">left_margin</span>: Either &quot;reset&quot; or a pixel value indicating the margin.</li>
+<li><span style="font-family: Courier New,Courier,monospace">right_margin</span>: Either &quot;reset&quot; or a pixel value indicating the margin.</li>
+<li><span style="font-family: Courier New,Courier,monospace">underline</span>: The style of underlining in one of the following formats: &quot;on&quot;, &quot;off&quot;, &quot;single&quot;, or &quot;double&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">strikethrough</span>: The style of text that is either &quot;on&quot; or &quot;off&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">backing_color</span>: The background color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">backing</span>: The background color enabled or disabled: &quot;on&quot; or &quot;off&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">style</span>: The style of the text in one of the following formats: &quot;off&quot;, &quot;none&quot;, &quot;plain&quot;, &quot;shadow&quot;, &quot;outline&quot;, &quot;soft_outline&quot;, &quot;outline_shadow&quot;, &quot;outline_soft_shadow&quot;, &quot;glow&quot;, &quot;far_shadow&quot;, &quot;soft_shadow&quot; or &quot;far_soft_shadow&quot;. The direction is selected by adding &quot;bottom_right&quot;, &quot;bottom&quot;, &quot;bottom_left&quot;, &quot;left&quot;, &quot;top_left&quot;, &quot;top&quot;, &quot;top_right&quot; or &quot;right&quot;. For example, &quot;style=shadow,bottom_right&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace">tabstops</span>: The pixel value for tab width.</li>
+<li><span style="font-family: Courier New,Courier,monospace">linesize</span>: To force a line size in pixels.</li>
+<li><span style="font-family: Courier New,Courier,monospace">linerelsize</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
+<li><span style="font-family: Courier New,Courier,monospace">linegap</span>: To force a line gap in pixels.</li>
+<li><span style="font-family: Courier New,Courier,monospace">linerelgap</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item</span>: Creates an empty space that is filled by an upper layer. Use &quot;size&quot;, &quot;abssize&quot;, or &quot;relsize&quot; to define the item&quot;s size, and an optional vsize = full/ascent to define the item&#39;s position in the line.</li>
+<li><span style="font-family: Courier New,Courier,monospace">linefill</span>: Either a float value or percentage indicating how much to fill the line.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ellipsis</span>: A value between 0.0 and 1.0 to indicate the type of ellipsis, or -1.0 to indicate that an ellipsis is not wanted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">password</span>: Either &quot;on&quot; or &quot;off&quot;, this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. </li>
+</ul>
+
+
+<h2 id="clip" name="clip">Clipping Objects</h2>
+
+<h3>Limiting Visibility </h3>
+<p>An Evas object can be clipped – in other words, its visible area is restricted with the clipper object.</p>
+
+<p>It is often necessary to show only parts of an object, and while it may be possible to create an object that corresponds only to the part that must be shown (which is not always possible), it is usually easier to use a clipper. A clipper is a rectangle that defines what is visible and what is not. The way to do this is to create a solid white rectangle (by default, so you need not use <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span>) and give it a position and size of what is wanted visible. The following code exemplifies showing the center half of my_evas_object: </p>
+<pre class="prettyprint">Evas_Object *clipper = evas_object_rectangle_add(evas_canvas);
+evas_object_move(clipper, my_evas_object_x / 4, my_evas_object_y / 4);
+evas_object_resize(clipper, my_evas_object_width / 2, my_evas_object_height / 2);
+evas_object_clip_set(my_evas_object, clipper);
+evas_object_show(clipper);
+</pre>
+
+<h3>Layer of Color </h3>
+<p>A solid white clipper does not produce a change in the color of the clipped object, only hides what is outside the clipper&#39;s area.  Changing the color of an object is accomplished by using a colored clipper. Clippers with color function by multiplying the colors of the clipped object. The following code shows how to remove all the red from an object.</p>
+<pre class="prettyprint">Evas_Object *clipper = evas_object_rectangle_add(evas);
+evas_object_move(clipper, my_evas_object_x, my_evas_object_y);
+evas_object_resize(clipper, my_evas_object_width, my_evas_object_height);
+evas_object_color_set(clipper, 0, 255, 255, 255);
+evas_object_clip_set(obj, clipper);
+evas_object_show(clipper);
+</pre> 
+
+
+<h2 id="map" name="map">Mapping Objects</h2>
+
+<p>Evas allows different transformations to be applied to all kinds of objects. These are applied by means of UV mapping. With UV mapping, one map points in the source object to a 3D space positioning at target. This allows rotation, perspective, scale, and many other effects depending on the map that is used.</p>
+
+<h3>Creating a Map </h3>
+<p>A map consists of a set of points, but currently only four are supported. Each of these points contains a set of canvas coordinates x and y that are used to alter the geometry of the mapped object, and a z coordinate that indicates the depth of that point. This last coordinate does not normally affect the map, but is used by several of the utility functions to calculate the right position of the point given other parameters.</p>
+<p>The coordinates for each point are set with <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set(map, index, x, y, z)</span>. In the example below, there is a rectangle whose coordinates are (100, 100) and (300, 300).</p>
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
+evas_object_move(object, 100, 100);
+evas_object_resize(object, 200, 200);
+Evas_Map map = evas_map_new(4);
+evas_map_point_coord_set(map, 0, 100, 100, 0);
+evas_map_point_coord_set(map, 1, 300, 100, 0);
+evas_map_point_coord_set(map, 2, 300, 300, 0);
+evas_map_point_coord_set(map, 3, 100, 300, 0);
+</pre>
+<p>There are functions to ease the process.</p>
+<p>Use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_geometry(map, x, y, w, h, z)</span>, where the map coordinates are set to the given rectangle, and <span style="font-family: Courier New,Courier,monospace">z</span> is the coordinate in the Z axis, which is the same for all points.</p>
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
+evas_object_move(object, 100, 100);
+evas_object_resize(object, 200, 200);
+Evas_Map map = evas_map_new(4);
+evas_map_util_points_populate_from_geometry(map, 100, 100, 200, 200, 0);
+</pre>
+
+<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object(map, object)</span>. </p>
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
+evas_object_move(object, 100, 100);
+evas_object_resize(object, 200, 200);
+Evas_Map map = evas_map_new(4);
+evas_map_util_points_populate_from_object(map, object);
+</pre>
+
+<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object_full(map, object, z)</span>, where <span style="font-family: Courier New,Courier,monospace">z</span> is the coordinate in the Z axis, which is the same for all points. </p>
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
+evas_object_move(object, 100, 100);
+evas_object_resize(object, 200, 200);
+Evas_Map map = evas_map_new(4);
+evas_map_util_points_populate_from_object_full(map, object, 0);
+</pre>
+
+<h3>Manual Point Setting</h3>
+<p>Several effects are applied to an object by setting each point of the map to the right coordinates. For example, a simulated perspective is achieved as follows.</p>
+<pre class="prettyprint">evas_map_point_coord_set(map, 0, 300, 100, 0);
+evas_map_point_coord_set(map, 1, 450, 120, 0);
+evas_map_point_coord_set(map, 2, 450, 260, 0);
+evas_map_point_coord_set(map, 3, 300, 300, 0);
+</pre>
+
+<p>The Z coordinate is not used when setting points by hand; thus its value is not important.</p>
+
+<h3>Applying a Map </h3>
+<p>Regardless of the specific way you create a map, to apply it to a specific object, use</p>
+<pre class="prettyprint">evas_object_map_set(object, map);
+evas_object_map_enable_set(object, EINA_TRUE);
+</pre>
+
+<h3>Basic Utility Functions </h3>
+<p>Evas provides utility functions for common transformations:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate(map, angle, cx, cy)</span>: This performs a rotation of the <span style="font-family: Courier New,Courier,monospace">angle</span> degrees around the center point with the coordinates (cx, cy).</li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom(map, zoomx, zoomy, cx, cy)</span>: This performs a <span style="font-family: Courier New,Courier,monospace">zoomx</span> and <span style="font-family: Courier New,Courier,monospace">zoomy</span> zoom in the X and Y directions respectively, with the center point with the coordinates (cx, cy).</li>
+</ul>
+
+<p>For example, the following code rotates an object around its center.</p>
+<pre class="prettyprint">int x, y, w, h;
+evas_object_geometry_get(object, &amp;x, &amp;y, &amp;w, &amp;h);
+Evas_Map *map = evas_map_new(4);
+evas_map_util_points_populate_from_object(map, object);
+evas_map_util_rotate(map, 45, x + (w / 2), y + (h / 2));
+evas_object_map_set(object, map);
+evas_object_map_enable_set(object, EINA_TRUE);
+evas_map_free(m);
+</pre>
+
+<p>The following code rotates an object around the center of the window.</p>
+<pre class="prettyprint">int w, h;
+evas_output_size_get(evas, &amp;w, &amp;h);
+Evas_Map *map = evas_map_new(4);
+evas_map_util_points_populate_from_object(map, object);
+evas_map_util_rotate(map, 45, w / 2, h / 2);
+evas_object_map_set(object, map);
+evas_object_map_enable_set(object, EINA_TRUE);
+evas_map_free(m);
+</pre>
+
+<h3>3D Utility Functions </h3>
+<p>Evas provides utility functions for 3D transformations.</p>
+<p>To make a 3D rotation, use <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate(map, anglex, angley, anglez, cx, cy, cz)</span>. With this code, you can set the Z coordinate of the rotation center, and the angles to rotate through around all axes.</p>
+<p>Rotating in the 3D space does not look natural. A more natural look becomes by adding perspective to the transformation, which is done with <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_perspective(map, px, py, z0, focal)</span> on the map after its position has been set.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">px</span> and <span style="font-family: Courier New,Courier,monospace">py</span> specify the &quot;infinite distance&quot; point in the 3D conversion, where all lines converge to.</li>
+<li><span style="font-family: Courier New,Courier,monospace">z0</span> specifies the Z value at which there is a 1:1 mapping between spatial coordinates and screen coordinates: any points on this Z value do not have their X and Y coordinates modified in the transform, while those further away (Z value higher) shrink into the distance, and those less than this value expand.</li>
+<li><span style="font-family: Courier New,Courier,monospace">focal</span> determines the &quot;focal length&quot; of the camera: this is the distance in reality between the camera lens plane (the rendering results are undefined at or closer than this) and the <span style="font-family: Courier New,Courier,monospace">z0</span> value; this function allows for some &quot;depth&quot; control.</li>
+</ul>
+<h3>Color and Lighting </h3>
+<p>Each point in a map can be set to a color, which is multiplied with the object&#39;s own color and linearly interpolated in between adjacent points. To do this, use <span style="font-family: Courier New,Courier,monospace">evas_map_point_color_set(map, index, r, g, b, a)</span> for each point of the map, or <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_color_set(map, r, g, b, a)</span> to set every point into the same color.</p>
+<p>To add lighting for the objects, which is useful with 3D transforms, use <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_lighting(map, lightx, lighty, lightz, lightr, lightg, lightb, ambientr, ambientg, ambientb)</span>:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">lightx</span>, <span style="font-family: Courier New,Courier,monospace">lighty</span> and <span style="font-family: Courier New,Courier,monospace">lightz</span> are the local light source coordinates;</li>
+<li><span style="font-family: Courier New,Courier,monospace">lightr</span>, <span style="font-family: Courier New,Courier,monospace">lightg</span> and <span style="font-family: Courier New,Courier,monospace">lightb</span> are the local light source colors;</li>
+<li><span style="font-family: Courier New,Courier,monospace">ambientr</span>, <span style="font-family: Courier New,Courier,monospace">ambientg</span> and <span style="font-family: Courier New,Courier,monospace">ambientb</span> are the ambient light colors. Evas sets the color of each point based on the distance to the light source, the angle with which the object is facing the light and the ambient light. The orientation of each point is important. If the map is defined counter-clockwise, the object faces away from the user and becomes obscured, since no light does not reflect from it.</li>
+</ul>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/evas_optimization_n.htm b/org.tizen.ui.practices/html/native/efl/evas_optimization_n.htm
new file mode 100644
index 0000000..61223fd
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/evas_optimization_n.htm
@@ -0,0 +1,227 @@
+<!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>Optimizing Evas</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#rectangle">Using a Rectangle Object instead of a Solid Color Image</a></li>
+			<li><a href="#invisible">Making an Object Invisible instead of Setting Alpha as 0</a></li>
+			<li><a href="#image">Using evas_object_image for Maximum Optimization</a></li>
+			<li><a href="#parent">Setting the Parent to Avoid the Elementary Tree Reconstruction</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+		 </ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Optimizing Evas</h1>
+
+<p>To optimize Evas:</p>
+
+<ul>
+<li><a href="#rectangle">Use a rectangle object instead of a solid color image</a></li>
+<li><a href="#invisible">Make an object invisible instead of setting its alpha as 0</a></li>
+<li><a href="#image">Use the <span style="font-family: Courier New,Courier,monospace">evas_object_image</span> object for maximum optimization</a></li>
+<li><a href="#parent">Set the parent to avoid the elementary tree reconstruction</a></li>
+</ul>
+
+<h2 id="rectangle" name="rectangle">Using a Rectangle Object instead of a Solid Color Image</h2>
+<p>When you need a solid color object, it is more efficient to use a rectangle object than an image.</p>
+<table>
+   <colgroup> 
+    <col width="100%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+    </tr> 
+	 <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+image = elm_image_add(win);
+snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
+elm_image_file_set(image, buf, NULL);
+evas_object_size_hint_weight_set(image, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, image);
+evas_object_show(image);
+</pre>  </td> 
+	</tr>
+    <tr> 
+     <th>After</th> 
+    </tr> 
+	 <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+rect = evas_object_rectangle_add(evas_object_evas_get(win));
+evas_object_color_set(rect, 255, 255, 255, 255);
+evas_object_size_hint_weight_set(rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, rect);
+evas_object_show(rect);
+</pre></td> 
+	</tr>
+</tbody>
+</table>
+
+
+<h2 id="invisible" name="invisible">Making an Object Invisible instead of Setting Alpha as 0</h2>
+
+<p>To make an object invisible, it is more efficient to use the <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span> function instead of changing its alpha value to 0.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+	<col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+	 <th>After</th>
+    </tr> 
+	 <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+static void
+_invisible_cb(void *data, Evas_Object *obj, void *ev)
+{
+&nbsp;&nbsp;&nbsp;evas_object_color_set(obj, 0, 0, 0, 0);   
+}
+</pre>  </td>
+<td rowspan="1" colspan="1">
+<pre class="prettyprint">
+static void
+_invisible_cb(void *data, Evas_Object *obj, void *ev)
+{
+&nbsp;&nbsp;&nbsp;evas_object_hide(obj);   
+}
+</pre> </td>  
+	</tr>
+</tbody>
+</table>
+
+<h2 id="image" name="image">Using evas_object_image for Maximum Optimization</h2>
+
+<p>If you need maximum optimization, use the <span style="font-family: Courier New,Courier,monospace">evas_object_image</span> object instead of the <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">elm_icon</span> objects.</p>
+<table>
+   <colgroup> 
+    <col width="100%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+    </tr> 
+	 <tr> 
+     <td rowspan="1" colspan="1">
+<pre class="prettyprint">
+img = elm_image_add((parent);
+snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
+elm_image_file_set(img, buf, NULL);
+evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(img);
+</pre> </td> 
+	</tr>
+    <tr> 
+     <th>After</th> 
+    </tr> 
+	 <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+img = evas_object_image_add(evas_object_evas_get(parent));
+snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
+evas_object_image_file_set(img, buf, NULL);
+evas_object_image_filled_set(img, EINA_TRUE);
+evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(img);
+</pre> </td> 
+	</tr>
+</tbody>
+</table>
+
+
+<h2 id="parent" name="parent">Setting the Parent to Avoid the Elementary Tree Reconstruction</h2>
+<p>Before creating an object, make sure that the relationship between the parent and child is set correctly to avoid having to reconstruct later.</p>
+<table>
+   <colgroup> 
+    <col width="50%" />
+    <col width="50%" />	
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+	  <th>After</th>
+    </tr> 
+	 <tr> 
+     <td rowspan="1" colspan="1">
+<pre class="prettyprint">
+win = elm_win_add();
+
+scroller = elm_scroller_add(win);
+
+box = elm_box_add(win);
+
+button = elm_button_add(win);
+</pre> </td> 
+<td rowspan="1" colspan="1">
+<pre class="prettyprint">
+win = elm_win_add();
+
+scroller = elm_scroller_add(win);
+
+box = elm_box_add(scroller);
+
+button = elm_button_add(box);
+</pre>  </td> 
+	</tr>
+</tbody>
+</table>
+
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+  <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script> 
+  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/evas_rendering_n.htm b/org.tizen.ui.practices/html/native/efl/evas_rendering_n.htm
new file mode 100644
index 0000000..4f49d4e
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/evas_rendering_n.htm
@@ -0,0 +1,288 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Evas Rendering Concept and Method</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+			<li><a href="#engine">Evas Engines Concept</a></li>
+			<li><a href="#ui_rendering">UI Rendering Mode</a></li>
+        </ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>		
+		</ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Evas Rendering Concept and Method</h1>
+ 
+<p>Evas is a canvas display library. It is markedly different from most display and windowing systems as the canvas is structural and is also a state engine, whereas most display and windowing systems are immediate mode display targets. Evas handles the logic between a structural display via its state engine, and controls the target windowing system in order to produce rendered results of the current canvas&#39; state on the display.</p>
+<p>Immediate mode display systems retain very little or no state. A program executes a series of commands, as in the following pseudo code.</p>
+<pre class="prettyprint">
+draw line from position (0, 0) to position (100, 200);
+
+draw rectangle from position (10, 30) to position (50, 500);
+
+bitmap_handle = create_bitmap();
+scale bitmap_handle to size 100 x 100;
+draw image bitmap_handle at position (10, 30);
+</pre>
+<p>The series of commands is executed by the windowing system and the results are typically displayed on the screen. Once the commands are executed, the display system does not know how to reproduce this image again, and has to be instructed by the application on how to redraw sections of the screen if needed. Each successive command is executed as instructed by the application and either emulated by software or sent to the graphics hardware on the device to be performed.</p>
+<p>The advantage of such a system is that it is simple and gives a program tight control over how something looks and is drawn. Given the increasing complexity of displays and demands by users to have better looking interfaces, more work needs to be done at this level by the internals of UI component sets, custom display components and other programs. This means that more logic and display rendering code needs to be written again each time the application needs to figure out how to minimize redraws so that display is fast and interactive, and keep track of redraw logic.</p>
+<p>For example, if in the scene below, the windowing system requires the application to redraw the area from 0, 0 to 50, 50 (also referred to as the &quot;expose event&quot;). Then the programmer calculates manually the updates and repaints it again.</p>
+<pre class="prettyprint">
+Redraw from position (0, 0) to position (50, 50):
+
+// What was in area (0, 0, 50, 50)?
+
+// 1. intersection part of line (0, 0) to (100, 200)?
+&nbsp;&nbsp;&nbsp;draw line from position (0, 0) to position (25, 50);
+
+// 2. intersection part of rectangle (10, 30) to (50, 500)?
+&nbsp;&nbsp;&nbsp;draw rectangle from position (10, 30) to position (50, 50)
+
+// 3. intersection part of image at (10, 30), size 100 x 100?
+&nbsp;&nbsp;&nbsp;bitmap_subimage = subregion from position (0, 0) to position (40, 20)
+&nbsp;&nbsp;&nbsp;draw image bitmap_subimage at position (10, 30);
+</pre>
+
+<p>If all elements in the above scene are opaque, the system is doing useless paints: part of the line is behind the rectangle, and part of the rectangle is behind the image. These useless paints tend to be very costly.</p>
+<p>Evas is a structural system in which the programmer creates and manages display objects and their properties, and as a result of this higher level state management, the canvas is able to redraw the set of objects when needed to represent the current state of the canvas.</p>
+<p>For example, see the following pseudo code.</p>
+<pre class="prettyprint">
+line_handle = create_line();
+set line_handle from position (0, 0) to position (100, 200);
+show line_handle;
+
+rectangle_handle = create_rectangle();
+move rectangle_handle to position (10, 30);
+resize rectangle_handle to size 40 x 470;
+show rectangle_handle;
+
+bitmap_handle = create_bitmap();
+scale bitmap_handle to size 100 x 100;
+move bitmap_handle to position (10, 30);
+show bitmap_handle;
+
+render scene;
+</pre>
+
+<p>This looks longer, but when the display needs to be refreshed or updated, the programmer only moves, resizes, shows, hides etc. the objects that need to change. The programmer thinks at the object logic level, and the canvas software does the rest of the work, figuring out what changed in the canvas since it was last drawn, how to most efficiently redraw the canvas and its contents to reflect the current state, and doing the actual drawing of the canvas.</p>
+<p>This allows the programmer think in a more natural way when dealing with a display, and saves time and effort of working out how to load and display images, to render given the current display system etc. Since Evas is portable across different display systems, this gives the programmer the ability to port and display the code on different display systems with little work.</p>
+<p>Evas is a display system somewhere between a UI component set and an immediate mode display system. It retains basic display logic, but does little high-level logic such as scrollbars, sliders, push buttons etc.</p>
+
+<p>For more information on the UI rendering modes (immediate and retained), see <a href="#ui_rendering">UI Rendering Mode</a>.</p>
+
+
+<h2 id="engine" name="engine">Evas Engines Concept </h2>
+<p>Evas delegates most of the actual rendering work to its engines. Engines are the backends that Evas uses to render (primitive) objects on a canvas. The canvas can be the screen, or a buffer in the memory.</p>
+<p>Evas can work with and provides multiple engines, such as (this list is non-exhaustive):</p>
+<ul>
+<li>buffer: all the rendering takes place in a buffer</li>
+<li>fb: the rendering takes place in the system&#39;s framebuffer</li>
+<li>software_x11: this is the most used, using X11</li>
+<li>gl_x11: this also renders to an X11 window, except that it uses OpenGL</li>
+</ul>
+<p>These implement the rendering of all the basic objects by themselves, because they often can be accelerated by the hardware or backend software libraries to provide fast rendering.</p>
+<p>If a particular engine does not have the provision for a certain primitive object, it reverts back to using a default software version. </p> 
+
+<h2 id="ui_rendering" name="ui_rendering">UI Rendering Mode</h2> 
+
+<p>Evas removes the need to know about the characteristics of your display system or what graphics calls are used to draw them and how. It deals on an object level where all you do is create and manipulate objects in a canvas, set their properties, and the rest is done for you. This rendering method is called the retained mode, whereas the immediate mode is an alternative rendering method.</p>
+
+<h3 id="immediate" name="immediate">Immediate Mode</h3>
+
+<p>The immediate mode is the most commonly used in graphics toolkit libraries, such as GTK+, GDI, and GDI+. The application is responsible for repainting the portion of the client area that is invalidated.</p>
+
+<p class="figure">Figure: Immediate mode</p> 
+<p align="center"><img alt="Immediate mode" src="../../images/immediate_mode.png" /></p> 
+
+<p>The application commands any drawing issues as it needs, and the display system draws some GUIs. After the drawing is done, it appears in the destination. This mode allows you to have a exact control over the render cycles. However, if the draw commands are misused, unnecessary drawing can be performed or drawing never happen at all.</p> 
+<p>The following example explains the common usage of the immediate mode:</p> 
+
+<pre class="prettyprint">
+void update()
+{
+&nbsp;&nbsp;&nbsp;Image *img = load_image(NEW_IMG);
+
+&nbsp;&nbsp;&nbsp;// Switch button image to new one
+&nbsp;&nbsp;&nbsp;update_button_image(img);
+
+&nbsp;&nbsp;&nbsp;// Issue the invalidate area (button area) to be redrawn on the screen
+&nbsp;&nbsp;&nbsp;invalidate_area(button_x, button_y, button_w, button_h);
+
+&nbsp;&nbsp;&nbsp;// Move rectangle from (200, 200) to (300, 300)
+&nbsp;&nbsp;&nbsp;int rect_prev_x = rect_x;
+&nbsp;&nbsp;&nbsp;int rect_prev_y = rect_y;
+&nbsp;&nbsp;&nbsp;rectangle_x = 300;
+&nbsp;&nbsp;&nbsp;rectangle_y = 300;
+&nbsp;&nbsp;&nbsp;set_rect_position(rect_x, rect_y);
+   
+&nbsp;&nbsp;&nbsp;// Issue the invalidate area (changed area) to be redrawn on the screen
+&nbsp;&nbsp;&nbsp;int diff_x = rect_x – rect_prev_x;
+&nbsp;&nbsp;&nbsp;int diff_y = rect_y – rect_prev_y;
+&nbsp;&nbsp;&nbsp;invalidate_area(rect_prev_x, rect_prev_y, (rect_w + diff_x), (rect_h + diff_y));
+
+
+&nbsp;&nbsp;&nbsp;// After setting the invalidate area, request rendering to update the screen
+&nbsp;&nbsp;&nbsp;render();
+
+&nbsp;&nbsp;&nbsp;// Now you can see how the button image and rectangle position are changed
+}
+</pre>
+
+<h3 id="retained" name="retained">Retained Mode</h3>
+
+<p>A graphics system adopting the retained mode is basically responsible for responding to all repaint requests for rendering the application objects. Clients do not directly cause actual rendering, but objects are redrawn when parts of them are updated.</p>
+
+<p class="figure">Figure: Retained mode</p> 
+<p align="center"><img alt="Retained mode" src="../../images/retained_mode.png" /></p> 
+
+<p>Since Evas works with the retained mode, there is no need to command any drawings. The following example shows how to write a GUI code with Evas for your application:</p>
+
+<pre class="prettyprint">
+void create_image()
+{
+&nbsp;&nbsp;&nbsp;// Initialize an image object to be displayed on the screen
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);
+
+&nbsp;&nbsp;&nbsp;// Set image resource
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, IMG, NULL);
+
+&nbsp;&nbsp;&nbsp;// Set image position 
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 100, 100);
+
+&nbsp;&nbsp;&nbsp;// Set image size
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
+
+&nbsp;&nbsp;&nbsp;// Set image visibility (show or hide)
+&nbsp;&nbsp;&nbsp;evas_object_show(img);
+}
+
+void create_rectangle()
+{
+&nbsp;&nbsp;&nbsp;// Initialize an rectangle object to be displayed on the screen
+&nbsp;&nbsp;&nbsp;Evas_Object *rect = evas_object_rectangle_add(e);
+
+&nbsp;&nbsp;&nbsp;// Set rectangle color
+&nbsp;&nbsp;&nbsp;evas_object_color_set(rect, 255, 0, 0, 255);
+
+&nbsp;&nbsp;&nbsp;// Set rectangle position
+&nbsp;&nbsp;&nbsp;evas_object_move(rect, 200, 200);
+
+&nbsp;&nbsp;&nbsp;// Set rectangle size
+&nbsp;&nbsp;&nbsp;evas_object_resize(rect, 200, 200);
+
+&nbsp;&nbsp;&nbsp;// Set rectangle visibility (show or hide)
+&nbsp;&nbsp;&nbsp;evas_object_show(rect);
+}
+</pre>
+
+<p>A few main loops later you can replace the image with another one and move the rectangle. You only need to set a new image file to the image object and move the rectangle object. Evas computes the invalidate area and redraws the image and rectangle behind the application when it&#39;s on rendering time.</p>
+
+<pre class="prettyprint">
+void update()
+{
+&nbsp;&nbsp;&nbsp;// Set new image resource
+&nbsp;&nbsp;&nbsp;elm_image_file_set(img, NEW_IMG, NULL);
+
+&nbsp;&nbsp;&nbsp;// Set new rectangle position
+&nbsp;&nbsp;&nbsp;evas_object_move(rect, 300, 300);
+}
+</pre>
+
+<h3 id="evas_rendering" name="evas_rendering">Evas Rendering</h3>
+
+<p>Tizen Native applications work on the ecore main loop, and the loop goes on a few steps for every frame. Evas redraws some changes in the objects when the main loop goes to the idle enterer step. If there are no changes, Evas rendering is skipped. Otherwise, Evas calculates any changed portions of all display objects and redraws them.</p>
+
+<p class="figure">Figure: Evas rendering in the main loop</p> 
+<p align="center"><img alt="Evas rendering in the main loop" src="../../images/rendering1.png" /></p> 
+
+<p>To minimize the rendering, Evas tracks the states of all display objects, such as position, size, visibility, and color. Even if some of these states are changed but the object is hidden by other obscured objects, it is not redrawn. In other words, Evas draws only the necessary changes in the screen.</p>
+
+<p>The following figures illustrate how Evas redraws the changed area:</p>
+
+<ul><li><p>In the first example, there is a blue-color background object (a sky-blue color rectangle) and a partially hidden cloud image object. Above them, there are a red and green rectangle, and the &quot;Hello out there&quot; text is printed on the green rectangle.</p>
+
+<p class="figure">Figure: Evas redrawing example 1</p> 
+<p align="center"><img alt="Evas redrawing example 1" src="../../images/redrawing01.png" /></p> </li>
+
+<li><p>In the second example, some of the objects have moved (the cloud image is moved to right and the green rectangle is moved downwards).</p>
+
+<p class="figure">Figure: Evas redrawing example 2</p> 
+<p align="center"><img alt="Evas redrawing example 2" src="../../images/redrawing02.png" /></p> </li>
+
+<li><p>As a result, the third example illustrates some regions that require updates.</p>
+
+<p class="figure">Figure: Evas redrawing example 3</p> 
+<p align="center"><img alt="Evas redrawing example 3" src="../../images/redrawing03.png" /></p> </li>
+
+<li><p>Evas decides which portions are invalid and to be redrawn. The fourth example shows the cleaned portion of the screen, which is the redrawn area.</p>
+<p>Evas redraws the content only in the redrawn portions.</p> 
+<p class="figure">Figure: Evas redrawing example 4</p> 
+<p align="center"><img alt="Evas redrawing example 4" src="../../images/redrawing04.png" /></p></li> 
+
+<li><p>Finally, the fifth example shows how the screen is updated and the result is visible.</p> 
+
+<p class="figure">Figure: Evas redrawing example 5</p> 
+<p align="center"><img alt="Evas redrawing example 5" src="../../images/redrawing05.png" /></p>
+
+<p>If Evas worked in an immediate mode style, the application would need to calculate the changed areas themselves, adding extra work. With Evas, you can let Evas figure out the updates and you can yourself concentrate on the application and UI core and logic.</p></li></ul>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/event_handling_n.htm b/org.tizen.ui.practices/html/native/efl/event_handling_n.htm
new file mode 100644
index 0000000..4ef258f
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/event_handling_n.htm
@@ -0,0 +1,119 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Event Handling: Managing the Event Flow</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#events_types">EFL Event Types</a></li>
+			<li><a href="#basic_events_flow">Basic Event Flow</a></li>
+		</ul>
+		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>	
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>			
+			
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Event Handling: Managing the Event Flow</h1> 
+  
+<p>The EFLs rely on events and callbacks. In case of an event, (for example, a key press, mouse click or a battery running low), the mainloop calls the callback functions that are associated to that specific event. After the callbacks have finished, the mainloop takes over and waits for new events, upon which to trigger new callbacks.</p>
+<p>It is important to do light work in the callbacks and to return to the mainloop relatively quickly. If there is heavy work to do, it is best to use an asynchronous mechanism like Ecore_con for network I/O or threads for CPU-intensive tasks. Failure to return quickly to the mainloop blocks the application&#39;s UI and it appears frozen.</p>
+
+<h2 id="events_types" name="events_types">EFL Event Types</h2>
+<p>There are several event types in the EFLs, and their use depends on the level of the event. The event types from lower- to higher-level are:</p>
+<ul>
+<li><a href="event_types_n.htm#evas_smart_object">Evas smart events</a> are the most often used and take place on collections of evas objects (which are most typically handled). They are called &quot;smart&quot; because they have internal logic and can define their own events while other event types are fixed.</li>
+<li><a href="event_types_n.htm#ecore">Ecore events</a> are the lowest-level events and come directly from the system. Except for application-wide shortcuts, it is not advisable to use them.</li>
+<li><a href="event_types_n.htm#evas_object">Evas object events</a> concern the objects that are on the canvas.</li>
+<li><a href="event_types_n.htm#evas">Evas events</a> are events on the graphical canvas as a whole. They are fairly low-level and mostly useful when drawing directly on the canvas.</li>
+</ul>
+
+  <p class="figure">Figure: Event types in the EFLs: Inner boxes are more specific than outer ones</p> 
+  <p align="center"><img alt="Event types in the EFLs: Inner boxes are more specific than outer ones" src="../../images/events_scope.png" /></p>
+  
+       
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">There are also <a href="event_types_n.htm#edje">Edje signals</a>, which come from program sections in themes; they can be used from high-level Elementary APIs or a low-level Edje API.</td> 
+	 </tr>
+   </tbody> 
+  </table> 
+
+<h2 id="basic_events_flow" name="basic_events_flow">Basic Event Flow</h2>
+<p>A realistic scenario involving various types of events is an application showing a button, which triggers the download of a file to be processed. There are progress bars for the operations.</p>
+<p>Create the window, create a box, set it vertical and add a button and two progress bars. At first, only the button is fully visible.</p>
+<p>When the user clicks on the button, an evas smart object event named &quot;clicked&quot; is emitted. The callback then starts the download in Ecore_con, displays the first progress bar and adds a callback to monitor the download progress. When the download progress changes, the callback updates the progress bar.</p>
+<p>After the download is finished, the second progress bar is displayed and the file processing is offloaded to another thread through Ecore_thread. The processing function regularly updates the progress bar (wrapped in ecore_main_loop_thread_safe_call_async() because GUI operations are not thread-safe).</p>
+<p>Events enable operations taking more than a few milliseconds&#39; time to be executed outside of the mainloop, therefore not blocking UI redraws.</p>
+<p>Below is an illustration for the event flow that follows a click on the screen.</p>
+
+  <p class="figure">Figure: Event flow for a user click</p> 
+  <p align="center"><img alt="Event flow for a user click" src="../../images/events_flow.png" /></p>
+  
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/event_types_n.htm b/org.tizen.ui.practices/html/native/efl/event_types_n.htm
new file mode 100644
index 0000000..a9ca786
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/event_types_n.htm
@@ -0,0 +1,461 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Event Types</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+				
+				<li><a href="#ecore">Ecore Events</a></li>
+				<li><a href="#edje">Edje Events</a></li>
+				<li><a href="#evas">Evas Events</a></li>
+				<li><a href="#evas_object">Evas Object Events</a></li>
+				<li><a href="#evas_smart_object">Evas Smart Object Events</a></li>
+		</ul>
+	<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>	
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>			
+			
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>			
+				
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Event Types</h1> 
+  
+<p>EFL provides various event types that you can use to monitor and react to user interactions and system events in the UI.</p>  
+  
+<h2 id="ecore" name="ecore">Ecore Events</h2>
+
+<p>Ecore events are used for low-level handling of events, such as key presses, network connections, and communication with sub-processes. In case of shortcuts, the low-level handling of key presses is particularly useful: instead of adding a signal handler to a specific graphical element, you can add one globally to guarantee that no matter which UI component is currently receiving events, the shortcut is caught correctly.</p>
+<p>Ecore events can also be used to implement new graphical back-ends. However, they are low-level and not useful for most applications.</p>
+
+<p>In addition to using predefined Ecore events, you can create your own events with the <span style="font-family: Courier New,Courier,monospace">ecore_event_type_new()</span> function. The function generates a new unique identifier, which you can use as the event type parameter when managing your events and event handlers.</p>
+
+
+<h3 id="ecore_events_useful_for_shortcuts">Shortcut Events</h3>
+
+<p>The following Ecore events are available for shortcuts. The event callbacks receive additional data through a <span style="font-family: Courier New,Courier,monospace">void *</span> object, whose type depends on the received event.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_UP</span> events: 
+<pre class="prettyprint">
+typedef struct _Ecore_Event_Key Ecore_Event_Key;
+
+struct _Ecore_Event_Key 
+{
+&nbsp;&nbsp;&nbsp;const char *keyname;
+&nbsp;&nbsp;&nbsp;const char *key;
+&nbsp;&nbsp;&nbsp;const char *string;
+&nbsp;&nbsp;&nbsp;const char *compose;
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+
+&nbsp;&nbsp;&nbsp;int same_screen;
+};
+</pre>
+
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_BUTTON_DOWN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_BUTTON_UP</span> events: 
+<pre class="prettyprint">typedef struct _Ecore_Event_Mouse_Button Ecore_Event_Mouse_Button;
+struct _Ecore_Event_Mouse_Button 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+&nbsp;&nbsp;&nbsp;unsigned int buttons;
+&nbsp;&nbsp;&nbsp;unsigned int double_click;
+&nbsp;&nbsp;&nbsp;unsigned int triple_click;
+&nbsp;&nbsp;&nbsp;int same_screen;
+
+&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;} root;
+
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 0 if normal mouse, 1+ for other mouse-devices (such as multi-touch - other fingers)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Radius of press point - radius_x and radius_y if it is an ellipse (radius is the average of the 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius, radius_x, radius_y; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Angle relative to perpendicular (0.0 == perpendicular), in degrees
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Same as x, y, root.x, root.y, but with sub-pixel precision, if available
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
+&nbsp;&nbsp;&nbsp;} multi;
+};
+</pre>
+ 
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_MOVE</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_WHEEL</span> events: 
+<pre class="prettyprint">
+typedef struct _Ecore_Event_Mouse_Wheel Ecore_Event_Mouse_Wheel;
+struct _Ecore_Event_Mouse_Wheel 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+
+&nbsp;&nbsp;&nbsp;int same_screen;
+&nbsp;&nbsp;&nbsp;int direction;
+&nbsp;&nbsp;&nbsp;int z;
+
+&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;} root;
+};
+</pre>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_IN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_OUT</span> events: 
+<pre class="prettyprint">
+typedef struct _Ecore_Event_Mouse_Move Ecore_Event_Mouse_Move;
+struct _Ecore_Event_Mouse_Move 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+
+&nbsp;&nbsp;&nbsp;int same_screen;
+
+&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;} root;
+
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 0 if normal mouse, 1+ for other mouse-devices (such as multi-touch - other fingers)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Radius of press point - radius_x and radius_y if it is an ellipse (radius is the average of the 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius, radius_x, radius_y; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Angle relative to perpendicular (0.0 == perpendicular), in degrees
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Same as x, y, root.x, root.y, but with sub-pixel precision, if available
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
+&nbsp;&nbsp;&nbsp;} multi;
+};
+</pre>
+
+</li>
+</ul>
+<h3 id="ecore_event_handler" name="ecore_event_handler">Managing Ecore Event Handlers</h3>
+
+<p>To manage Ecore event handlers:</p>
+
+<ol><li>To add an Ecore event handler, register a callback for a specific event with the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function. 
+<p>The function takes as parameters the event type (such as <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> for key presses), callback function, and additional data delivered to the callback. The function returns an event handler pointer, which you can use to remove the handler later.</p></li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Handler_Cb()</span> callback function.
+<p>The function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function parameters, the event type, and the event object (<span style="font-family: Courier New,Courier,monospace">Ecore_Event_Key</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Button</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Wheel</span>, or <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Move</span>). The function returns <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_PASS_ON</span> to allow other callbacks for that event be called, or <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_DONE</span> to not call them.</p></li>
+
+<li>When no longer needed, remove the event handler with the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_del()</span> function, using the event handler pointer as a parameter.</li></ol>
+
+<p>The following example shows how you can set a global variable to <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> when the <strong>Ctrl</strong> key is pressed:</p>
+<pre class="prettyprint">
+Eina_Bool ctrl_pressed = EINA_FALSE;
+
+static Eina_Bool
+_key_down_cb(void *data __UNUSED__, int type __UNUSED__, void *ev)
+{
+&nbsp;&nbsp;&nbsp;// The callback is used with the ECORE_EVENT_KEY_DOWN signal: the
+&nbsp;&nbsp;&nbsp;// parameter &quot;void *ev&quot; is therefore of the actual type Ecore_Event_Key
+&nbsp;&nbsp;&nbsp;// The following renders its fields accessible
+&nbsp;&nbsp;&nbsp;Ecore_Event_Key *event = ev;
+
+&nbsp;&nbsp;&nbsp;// Test whether the key that is pressed is Ctrl.
+&nbsp;&nbsp;&nbsp;if (!strcmp(&quot;Control_L&quot;, event-&gt;key))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If it is, store that piece of information
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl_pressed = EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Let the event continue to other callbacks which have not been called yet
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_PASS_ON;
+}
+
+ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, _key_down_cb, NULL);
+</pre>
+
+<h3 id="ecore_event_manage" name="ecore_event_manage">Sending Ecore Events to the Main Loop</h3>
+
+<p>You can send Ecore events to the main loop yourself to handle actions of various origins through the same codepath. This is a thread-safe operation.</p>
+<p>To send an event, use the <span style="font-family: Courier New,Courier,monospace">ecore_event_add()</span> function. The function takes as parameters the event type (such as <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> for key presses), additional data delivered to the callback, the <span style="font-family: Courier New,Courier,monospace">Ecore_End_Cb()</span> function used to free the additional data after it is deliver to the callback function, and the pointer to additional data delivered to the free function. The free function and the pointer to its additional data are optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need them.</p>
+
+  
+<h2 id="edje" name="edje">Edje Events</h2>
+
+<p>Edje <a href="theme_n.htm">themes</a> have small <span style="font-family: Courier New,Courier,monospace">program</span> sections, which are triggered upon the reception of a signal that can execute actions, such as changing the state of an Edje part and running another program.</p>
+
+<h3 id="events_guide_edje_without_layout" name="events_guide_edje_without_layout">Managing a Single Signal Emitter</h3>
+<p>The following example shoes a <span style="font-family: Courier New,Courier,monospace">program</span> section. The program is called &quot;change_color&quot;, it is triggered on mouse clicks on the current part, and it emits a &quot;got.a.click&quot; signal where the source is set to &quot;color_changer&quot;.</p>
+<pre class="prettyprint">program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
+&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;got.a.click&quot; &quot;color_changer&quot;;
+}
+</pre>
+
+<p>To catch the emitted signal from the C side, use either the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function. Their only difference is that the previous one operates on an Edje object and the latter one on an Elementary object. Unless you do not use the Elementary library at all, use the Elementary variant.</p>
+
+<p>Both the functions take as parameters the object emitting the signal, the signal name (&quot;*&quot; acts as a wildcard), the signal source, the <span style="font-family: Courier New,Courier,monospace">Edje_Signal_Cb()</span> callback function called when the signal name and source match, and additional data delivered to the callback. For the signal name and source, &quot;*&quot; acts as a wildcard. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
+
+<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function parameters, the object emitting the signal, the signal name, and the signal source.</p>
+
+
+<h3 id="events_guide_edje_with_layout" name="events_guide_edje_with_layout">Managing Multiple Signal Emitters in Layouts</h3>
+
+<p>Most of the time, Edje and Elementary are used together. In particular, you can define a group in Edje and use it as a <a href="containers_n.htm#layout">layout</a> (containing several parts) in Elementary. The layouts enable you to perform theming and object placement in Edje while benefiting from the higher-level functions of Elementary.</p>
+<p>Since the layout contains multiple parts, you cannot use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> functions, as they require a single emitter object. The solution is to use the dedicated <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> function.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> function works similarly as the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> functions. The only difference is the type of the object in the first parameter. For <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span>, it is a pointer to an Evas_Object, which is obtained through the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function. For more information, see <a href="containers_n.htm#layout">Layout</a>.</p>
+
+  
+<h2 id="evas" name="evas">Evas Events</h2>
+
+<p>Evas events happen on a canvas as a whole. These events are too low-level for writing applications and are mostly used when writing the graphical toolkit itself.</p>
+
+<p>The following Evas event types are available:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_PRE</span>: Rendering on the canvas is about to be updated.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_POST</span>: Rendering on the canvas is updated.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_IN</span>: Canvas receives focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_OUT</span>: Canvas loses focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_IN</span>: Any object on the canvas receives focus.
+<p>Instead of this event type, use the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span> type with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_OUT</span>: Any object on the canvas loses focus. 
+<p>Instead of this event type, use the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span> type with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_PRE</span>: Rendering on the canvas starts.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_POST</span>: Rendering on the canvas finishes.</li>
+</ul>
+
+<p>To register the event handler, use the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function. The function takes as parameters the Evas canvas on which the event happens (to obtain the canvas, use the Evas_Object through the <span style="font-family: Courier New,Courier,monospace">evas_object_evas_get()</span> function), the event type, the <span style="font-family: Courier New,Courier,monospace">Evas_Event_Cb</span> callback function, and the pointer to the additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
+
+<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function parameters, the canvas where the event happened, and the event info data, which depends on the object type and the event at play.</p>
+
+
+<h2 id="evas_object" name="evas_object">Evas Object Events</h2>
+
+<p>Each Evas object on a specific Evas canvas can be manipulated independently. Each object can send events, which you can handle by registering callback functions for them. The events all relate to single objects, not the whole canvas.</p>
+
+<p>The following Evas object event types are available:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span>: Pointer got over an object (with no other object between the 2). This takes place no matter how the pointer becomes directly above the object. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_OUT</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event, but when the pointer goes outside the object area. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Out</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: Mouse button is pressed while the object is receiving events (either because the pointer is on top of the object or because the object had focus). The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Down</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Up</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Move</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_WHEEL</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Wheel</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Down</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Up</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Move</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_DOWN</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Down</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_UP</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Up</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span>: Object gained focus. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span>: Object lost focus. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_SHOW</span>: Object is shown by a call to the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HIDE</span>: Object is hidden by a call to the <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span> function. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOVE</span>: Object origin was moved (origin is the top-left corner at the creation time of the object). The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span>: Object is resized. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESTACK</span>: Object is re-stacked by the <span style="font-family: Courier New,Courier,monospace">evas_object_stack_below()</span> or <span style="font-family: Courier New,Courier,monospace">evas_object_stack_above()</span> function, or other events. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_DEL</span>: Object is deleted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FREE</span>: For internal use only. Do not use (the object resources are about to be freed). The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HOLD</span>: For internal use only. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Hold</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CHANGED_SIZE_HINTS</span>: Object size hints changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_PRELOADED</span>: Image preloaded through the <span style="font-family: Courier New,Courier,monospace">evas_object_image_preload()</span> function is loaded. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_UNLOADED</span>: Image data is unloaded. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+</ul>
+
+<p>To register the callback, use the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function. The function takes as parameters the object to which the callback is attached, the event type, the <span style="font-family: Courier New,Courier,monospace">Evas_Object_Event_Cb</span> callback function, and the pointer to the additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
+
+<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function parameters, the canvas where the event happened, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
+
+<p>When no longer needed, remove the callback with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_del()</span> function.</p>
+
+
+<h2 id="evas_smart_object" name="evas_smart_object">Evas Smart Object Events</h2>
+
+<p>Evas smart object events are the most widely-used type of events in graphical applications, since they are used for signals, such as &quot;clicked&quot;, &quot;clicked,double&quot; (double-click), and &quot;pressed&quot;. They are identified by strings, and each smart object is able to define its own events (although the names follow conventions).</p>
+
+<h3 id="evas_object_smart_callback" name="evas_object_smart_callback">Managing Evas Smart Object Event Handlers</h3>
+
+<ol><li>To add an Evas Smart Object event handler, register a callback for a specific event to an object with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function. 
+<p>The function takes as parameters the object to which the callback is added, the event name, the callback function, and additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p></li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">Evas_Smart_Cb()</span> callback function.
+<p>The function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function parameters, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
+<p>If some of the parameters are not used by the callback function, the compiler can raise the &quot;unused parameter&quot; warning. To avoid it, annotate the parameter with the <span style="font-family: Courier New,Courier,monospace">__UNUSED__</span> macro, which is a compiler-independent way to let the compiler know that the parameter is unused willingly, rather than by a mistake:</p>
+<pre class="prettyprint">void cb(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__);</pre>
+</li>
+
+<li>When no longer needed, remove the event handler with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_del()</span> function.
+<p>The function removes the first match for the given event and callback, and returns the data pointer that was used in the corresponding call to the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function.</p></li></ol>
+
+<p>The following example shows the <span style="font-family: Courier New,Courier,monospace">_button_clicked()</span> function and sets it as the callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> event of an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> button:</p>
+
+<pre class="prettyprint">
+static void
+_button_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;// Insert function body here
+}
+
+static void
+some_function(void) 
+{
+&nbsp;&nbsp;&nbsp;// Code to build the window object
+&nbsp;&nbsp;&nbsp;Evas_Object *button = elm_button_add(window);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+}
+</pre>
+
+<p>For a specific object and event, callbacks are called in the order they have been registered. The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function does not execute any special processing, if it is called several times with the same callback function or data. Callbacks are called as many times as they have been added and in the order they have been added.</p>
+
+
+
+<h3 id="evas_smart_objects_examples" name="evas_smart_objects_examples">Evas Smart Object Event Handling Examples</h3>
+
+<p>The following example shows a button with a callback for the &quot;clicked&quot; signal:</p>
+
+<pre class="prettyprint">static void
+_button_clicked(void *data __UNUSED__, Evas_Object *obj __UNUSED__, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
+&nbsp;&nbsp;&nbsp;fflush(stdout);
+&nbsp;&nbsp;&nbsp;elm_exit();
+}
+
+static void
+_add_button(Evas_Object *window) 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me To Exit!&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+}
+</pre>
+
+<p>The following example shows a button with a callback for the &quot;clicked&quot; signal. Clicking the button removes the callback:</p>
+
+<pre class="prettyprint">static void
+_button_clicked(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
+&nbsp;&nbsp;&nbsp;fflush(stdout);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_del(obj, &quot;clicked&quot;, _button_clicked);
+}
+
+static void
+_add_button(Evas_Object *window) 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me!&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/font_resource_n.htm b/org.tizen.ui.practices/html/native/efl/font_resource_n.htm
new file mode 100644
index 0000000..3069993
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/font_resource_n.htm
@@ -0,0 +1,94 @@
+<!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>Font Resources</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Font Resources</h1> 
+	
+<p>The font metrics of the default font resource can be used as a guideline for designing your own font resources, which can be distributed as a downloadable font package in the Tizen Store.</p>
+<p>The font resource details can also be used to determine the layout of the UI components for a better user experience.</p>
+
+<p>The following guidelines show how to design a font resource:</p>
+<ul>
+<li>The EM size of TTF must be 1000.</li>
+
+<li>TTF must not contain any hinting information.</li> 
+<li>When exporting the font to TTF, the TTF files must be smaller than 1 MB.</li>
+<li>The font metrics must follow the following values:
+<pre class="prettyprint">
+OS/2 table:
+&nbsp;&nbsp;&nbsp;TypoAscender:775
+&nbsp;&nbsp;&nbsp;TypoDescender:-225
+&nbsp;&nbsp;&nbsp;TypoLineGap:0
+&nbsp;&nbsp;&nbsp;WinAscent:930
+&nbsp;&nbsp;&nbsp;WinDescent:270
+
+hhea table:
+&nbsp;&nbsp;&nbsp;Ascender:930
+&nbsp;&nbsp;&nbsp;Descender:-270
+&nbsp;&nbsp;&nbsp;LineGap:0
+
+head table:
+&nbsp;&nbsp;&nbsp;xMin:-515
+&nbsp;&nbsp;&nbsp;yMin:-297
+&nbsp;&nbsp;&nbsp;xMax:1261
+&nbsp;&nbsp;&nbsp;yMax:1022
+</pre>
+</li>
+
+<li>The font family name must contain the company name and font family name. This is recommended to avoid multiple font resources having the same family name.</li>
+<li>It is recommended that the font package icon stands for the identity of the font resource.</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.practices/html/native/efl/font_setting_n.htm b/org.tizen.ui.practices/html/native/efl/font_setting_n.htm
new file mode 100644
index 0000000..8e94ab5
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/font_setting_n.htm
@@ -0,0 +1,441 @@
+<!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>Fonts: Setting Application Text Fonts</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+			<ul class="toc">
+				<li><a href="#apply">Applying System Font Settings</a></li>
+				<li><a href="#supported">Supported Font Styles</a></li>
+				<li><a href="#component">Setting the Font for a UI Component</a></li>
+				<li><a href="#edc">Setting the Font Using EDC</a></li>
+				<li><a href="#edje">Using the Edje Text Class</a></li>			
+			</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Fonts: Setting Application Text Fonts</h1> 
+	
+
+<p>Tizen provides various methods for setting fonts of the application text. Basically, all UI components have a default font, which can be changed according to the system settings.</p>
+
+<p>The font handling methods include:</p>
+
+<ul> 
+   <li><a href="#component">Setting the font for a UI component</a> using the Elementary Fonts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications)</li> 
+   <li><a href="#edc">Setting the font using EDC</a></li>
+   <li><a href="#edje">Changing the font and text size</a> using the Edje Class: Text API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) 
+   
+<p>In the application, you can set a system-wide font and font size to text(textblock) parts with text classes (except <span style="font-family: Courier New,Courier,monospace;">tizen</span>). When the system applies a new system-wide font and font size to the application, the font size of text(textblock) parts with the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class are not affected. </p>
+<p>The following words in the <span style="font-family: Courier New,Courier,monospace;">text_class</span> definition are reserved for the system:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">button</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">label</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">entry</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">title_bar</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">list_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">grid_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">toolbar_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">menu_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">tizen</span></li>
+</ul>
+
+
+<p>Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.</p>
+<pre class="prettyprint">
+elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, -150);
+elm_config_font_overlay_apply();
+</pre>
+</li>
+
+<li><a href="font_resource_n.htm">Creating your own font resources</a>
+<p>You can create your own font resources in the SDK to be distributed as a downloadable font package in the Tizen Store.</p>
+</li>
+</ul>
+
+<h2 id="apply" name="apply">Applying System Font Settings</h2>
+
+<p>Tizen provides a special &quot;Tizen&quot; font name. The &quot;Tizen&quot; font name does not match with any specific font; it is just an alias for a system-defined font (system font). When you create a text(textblock) part with the &quot;Tizen&quot; font name in the application&#39;s EDC, the system font is loaded into the user application when those objects are created. Additionally, you can apply the system font to a text or textblock part by using the text class, as described above.</p>
+
+<p>The following EDC example shows how to apply the system font to a TEXT or TEXTBLOCK part by using the &quot;Tizen&quot; font name and the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class. As font name is &quot;Tizen&quot; and the font size is set to 36, the system font is loaded in size 36. If the system setting changes, this part loads the new system font. However, its font size is not changed, because the text class is <span style="font-family: Courier New,Courier,monospace;">tizen</span>.</p>
+
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=Regular&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 36;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;tizen&quot;;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<p>If the part has a predefined text classes other than <span style="font-family: Courier New,Courier,monospace;">tizen</span>, its font size is resized as well.</p>
+
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=Regular&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 36;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;label&quot;;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+
+<h2 id="supported" name="supported">Supported Font Styles</h2>
+<p>The font styles supported by the EFL are listed in the following table.</p>
+
+<table>
+<caption>Table: Supported font styles</caption>
+<tbody>
+ <tr>
+  <th>Font feature</th>
+  <th>Style attribute</th>
+ </tr>
+<tr>
+ <td rowspan="3"><span style="font-family: Courier New,Courier,monospace;">font_style</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">oblique</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">italic</span></td>
+</tr>
+<tr>
+ <td rowspan="9"><span style="font-family: Courier New,Courier,monospace;">font_width</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultracondensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">extracondensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">condensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">semicondensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">semiexpanded</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">expanded</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">extraexpanded</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultraexpanded</span></td>
+</tr>
+<tr>
+ <td rowspan="11"><span style="font-family: Courier New,Courier,monospace;">font_weight</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">thin</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultralight</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">light</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">book</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">medium</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">semibold</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">bold</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultrabold</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">black</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">extrablack</span></td>
+</tr>
+</tbody>
+</table>
+	
+<p>The style attributes are not case-sensitive (however, the font feature names are).</p>
+<p>If you set the weight or width attribute to <span style="font-family: Courier New,Courier,monospace;">style=</span>, it is processed to the right attribute.</p>
+<pre class="prettyprint">
+font=TizenSans:style=Bold // Textblock
+&quot;TizenSans:style=Bold&quot;; // Text font
+&lt;font=TizenSans:style=Bold&gt; // Markup tag
+</pre>
+
+<p>You can also use each attribute separately:</p>
+
+<pre class="prettyprint">
+font=TizenSans font_style=Regular font_weight=Bold // Textblock
+&lt;font=TizenSans font_style=Regular font_weight=Bold&gt; // Markup tag
+</pre>
+
+
+<h2 name="component" id="component">Setting the Font for a UI Component</h2>
+
+<p>You can use the Elementary Fonts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications) to set the font for an application.</p>
+<p>To set a font for a UI component:</p>
+<ul>
+<li>Set the font for a common UI component:
+
+ <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">You can set the font for a textblock in the code, but not in EDC (Edje Data Collection). If you add markup tags for the font inside the text, you can change the font of the text. However, you cannot set the font for a text part in this way because the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> type does not support markup tags.</td> 
+    </tr> 
+   </tbody>
+  </table>
+
+<pre class="prettyprint">
+char *buf = &quot;&lt;font=Sans:style=Regular font_size=50&gt;Hello&lt;/font/&gt;Font&quot;;
+elm_object_part_text_set(layout, &quot;textblock1&quot;, buf);
+</pre>
+</li>
+<li>Set the font for an entry component (in <a href="../../../../org.tizen.native.mobile.apireference/group__Entry.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Entry.html">wearable</a> applications) using the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. It overrides the default style of the entry component for each attribute.
+
+ <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function only affects the main text of the UI component. To change the font of the guide text, you have to add markup tags.</td> 
+    </tr> 
+   </tbody>
+  </table>
+<pre class="prettyprint">
+char *user_style = &quot;DEFAULT=&#39;font=Sans:style=Regular font_size=40&#39;&quot;;
+elm_entry_text_style_user_push(entry, user_style);
+elm_object_part_text_set(entry, &quot;elm.guide&quot;,
+&nbsp;&nbsp;&nbsp;&quot;&lt;font=Sans:style=Regular font_size=40&gt;Guide Text&lt;/font&gt;&quot;);
+</pre>
+</li>
+</ul>
+
+<h2 name="edc" id="edc">Setting the Font Using EDC</h2>
+
+<p>To create a layout with text using the EDC, you can set the font for each text part or textblock:</p>
+<ul>
+<li id="TEXT">Set the font of a text part using the font family name and a specific style of the font family:
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans:style=Bold&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Enventor&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Add style information, which can be used for multiple textblock parts:
+<pre class="prettyprint">
+styles 
+{
+&nbsp;&nbsp;&nbsp;style 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textblock_style1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=Sans:style=Regular font_size=30&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.style: &quot;textblock_style1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ul>
+
+<h2 name="edje" id="edje">Using the Edje Text Class</h2>
+
+<p>You can use the Edje Class: Text API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.</p>
+
+ <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Note that the <span style="font-family: Courier New,Courier,monospace;">text_class</span> cannot be used in a UI component with markup text or the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. You must set the <span style="font-family: Courier New,Courier,monospace;">text_class</span> in EDC.</td> 
+    </tr> 
+   </tbody>
+  </table>
+
+
+<p>To set the text class, you can use reserved words for text class, but you can also make your own text class:</p>
+
+<ul>
+	<li>Set a class for a text part:
+
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans:style=Bold&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Enventor&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;my_class&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Set a class for a textblock:
+<pre class="prettyprint">
+styles 
+{
+&nbsp;&nbsp;&nbsp;style 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textblock_style1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=Sans:style=Regular font_size=30 ... text_class=my_class&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.style: &quot;textblock_style1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>You can handle font and font style per <span style="font-family: Courier New,Courier,monospace;">text_class</span>. If you set your own <span style="font-family: Courier New,Courier,monospace;">text_class</span> in the EDC, you can change the font and font size:</p>
+
+<pre class="prettyprint">
+elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, 30);
+elm_config_font_overlay_apply();
+</pre>
+</li>
+<li>
+<p>Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.</p>
+<pre class="prettyprint">
+elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, -150);
+elm_config_font_overlay_apply();
+</pre>
+</li>
+</ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/form_tutorial_n.htm b/org.tizen.ui.practices/html/native/efl/form_tutorial_n.htm
new file mode 100644
index 0000000..5fafeae
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/form_tutorial_n.htm
@@ -0,0 +1,342 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating a Form for a Basic Application Layout</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#create">Creating a Single-window Application</a></li>
+			<li><a href="#naviframe">Creating a Naviframe for Switching Views</a></li>
+			<li><a href="#list">Creating a Contact List</a></li>
+			<li><a href="#form">Creating a Contact Details Form</a></li>	
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating a Form for a Basic Application Layout</h1>
+
+  
+<p>This tutorial explains how to create a basic application that has a single window and multiple views: contact list view and contact details form view (displaying and editing contact information when an item is selected on the contact list).</p>
+
+ <h2 id="create" name="create">Creating a Single-window Application</h2>
+
+<p>To create an elementary application with a single window, use the following code:</p>
+<pre class="prettyprint">static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_gui(ad);
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = { 0 };
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+
+&nbsp;&nbsp;&nbsp;// Zero out the structure
+&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x0, sizeof(struct appdata));
+
+&nbsp;&nbsp;&nbsp;// Run the mainloop
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}
+</pre> 
+
+ <h2 id="naviframe" name="naviframe">Creating a Naviframe for Switching Views</h2>
+
+<p>Use a naviframe in this application to switch between different views. The first displayed view is the contact list. When an item is selected in this list, information on the contact is displayed in a contact details form. Both the list and form views are opened in a naviframe, which handles the animations between the views. It also creates a back button in the top bar, and when the button is clicked, launches the back animation, deletes the form view, and shows the contact list again.</p>
+
+	<p class="figure">Figure: Views (list and form)</p> 
+    <p align="center"><img alt="Form tutorial: list" src="../../images/screenshot_2.png" /> <img alt="Form tutorial: form" src="../../images/screenshot_1.png" /></p>
+
+<p>Since the naviframe is the main layout of the window, it takes all the available space. To configure the naviframe size, use the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> function to add the naviframe object (second parameter) to the main window (first parameter). To ensure that the naviframe covers the entire window area, call the <span style="font-family: Courier New,Courier,monospace">evas_object_resize_hint_weight_set()</span> function on the naviframe object to force the naviframe to fill its parent (the main window). The naviframe object expands in both X and Y directions.</p>
+<p>In the end, show the naviframe object on the screen.</p>
+<pre class="prettyprint">
+// Create the naviframe
+nav = elm_naviframe_add(win);
+evas_object_size_hint_weight_set(nav, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, nav);
+evas_object_show(nav);
+</pre> 
+
+ <h2 id="list" name="list">Creating a Contact List</h2>
+
+<p>To create a contact list:</p>
+<ol>
+<li>
+<p>Handle the contact list with the <span style="font-family: Courier New,Courier,monospace">_create_contact_list()</span> function. This function takes the parent object (naviframe) as the parameter and returns the genlist. To create the genlist, use the following code:</p>
+<pre class="prettyprint">
+static Evas_Object *
+_create_contact_list(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;// Create a new genlist
+&nbsp;&nbsp;&nbsp;list = elm_genlist_add(parent);
+&nbsp;&nbsp;&nbsp;evas_object_show(list);
+
+&nbsp;&nbsp;&nbsp;// Create a new item class for the genlist
+&nbsp;&nbsp;&nbsp;itc = elm_genlist_item_class_new();
+&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;default&quot;;
+&nbsp;&nbsp;&nbsp;// Set the callback used when the genlist text is created
+&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = _genlist_text_get;
+&nbsp;&nbsp;&nbsp;// Set the callback be used when the content of the item is created
+&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get = _genlist_content_get;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.state_get = NULL;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.del = NULL;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">itc</span> static variable contains the item class. The item class contains all functions that are called back when an item is created. In this case, create the <span style="font-family: Courier New,Courier,monospace">_genlist_text_get()</span> (for labels) and <span style="font-family: Courier New,Courier,monospace">_genlist_content_get()</span> (for icons) callbacks. These functions are called when labels and icons of the genlist item are created.</p>
+
+<p>The contact list is contained in an array of Contacts.</p>
+<pre class="prettyprint">
+typedef struct 
+_Contact Contact;
+
+struct 
+_Contact
+{
+&nbsp;&nbsp;&nbsp;const char *name;
+&nbsp;&nbsp;&nbsp;const char *mobile;
+&nbsp;&nbsp;&nbsp;const char *address;
+&nbsp;&nbsp;&nbsp;const char *email;
+&nbsp;&nbsp;&nbsp;const char *icon;
+};
+
+static 
+Contact contacts[] = 
+{
+&nbsp;&nbsp;&nbsp;{&quot;Alexander Holmes&quot;, &quot;+1234567896&quot;, &quot;&quot;, &quot;alexander_holmes@tizen.org&quot;, &quot;c1.png&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Lara Alvaréz&quot;, &quot;+9876543216&quot;, &quot;&quot;, &quot;lara_alvares@tizen.org&quot;, &quot;c2.png&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Aksel Møller&quot;, &quot;+1679432846&quot;, &quot;&quot;, &quot;aksel_moller@tizen.org&quot;, &quot;c3.png&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Anir Amghar&quot;, &quot;+1679432846&quot;, &quot;&quot;, &quot;anir_amghar@tizen.org&quot;, &quot;c4.png&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Noémie Cordier&quot;, &quot;+1679432846&quot;, &quot;&quot;, &quot;noemie_cordier@tizen.org&quot;, &quot;c5.png&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Henry Thompson&quot;, &quot;+1679432846&quot;, &quot;&quot;, &quot;henry_thompson@tizen.org&quot;, &quot;c6.png&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Mai Phan&quot;, &quot;+1679432846&quot;, &quot;&quot;, &quot;mai_phan@tizen.org&quot;, &quot;c7.png&quot;},
+};
+</pre>
+</li>
+<li>
+<p>Create a genlist item for each item of the array with the following code:</p>
+<pre class="prettyprint">
+// Create a genlist item for each item in the contacts array
+for (i = 0; i &lt; EINA_C_ARRAY_LENGTH(contacts); i++)
+{
+&nbsp;&nbsp;&nbsp;// Append the item, add a callback when the item is selected, and use the
+&nbsp;&nbsp;&nbsp;// current contact item as data pointer for the callbacks
+&nbsp;&nbsp;&nbsp;elm_genlist_item_append(list, itc, &amp;contacts[i], 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;ELM_GENLIST_ITEM_NONE, _contact_selected_cb, &amp;contacts[i]);
+}
+</pre>
+
+<p>Attach the <span style="font-family: Courier New,Courier,monospace">_contact_selected_cb()</span> callback function to the genlist item. When an item is selected in the list, the data pointer passed as the parameter calls this function. In this example, it is a pointer on the contact. Pass the contact in the array to all the item class callbacks.</p>
+</li>
+<li>
+<p>Push the list at the top of the naviframe:</p>
+<pre class="prettyprint">
+// Create the list of contacts
+list = _create_contact_list(win);
+
+// Push the list on top of the naviframe
+elm_naviframe_item_push(nav, NULL, NULL, NULL, list, NULL);
+</pre>
+</li>
+<li>
+<p>Call the item class functions, the <span style="font-family: Courier New,Courier,monospace">_genlist_text_get()</span> function first:</p>
+<pre class="prettyprint">
+static char *
+_genlist_text_get(void *data, Evas_Object *obj EINA_UNUSED, const char *part)
+{
+&nbsp;&nbsp;&nbsp;Contact *contact = data;
+
+&nbsp;&nbsp;&nbsp;// Return a new allocated string for the contact name
+&nbsp;&nbsp;&nbsp;return strdup(contact-&gt;name);
+}
+</pre>
+
+<p>These functions show the index of the contact in the array and return a freshly allocated string with the name of the contact.</p>
+<p>When an item in the list is selected, a callback registers on the select signal and calls the corresponding function; in this case, <span style="font-family: Courier New,Courier,monospace">_contact_selected_cb()</span>. The index of the array passed in the data is retrieved and the form on contact information based on this index is created.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> function is called several times depending on the style of the created item. In this case, with the default style for the genlist item, there are 2 different swallow parts. A swallow part is a container in the edje file of the genlist item, which can contain an Evas object. The following figure shows the layout of different parts in the theme.</p>
+
+
+<p class="figure">Figure: Genlist item</p> 
+<p align="center"><img alt="Genlist item" src="../../images/genlist_item.png" /></p>   
+ 
+
+<p>There are 2 <span style="font-family: Courier New,Courier,monospace">elm.swallow</span> parts. When the callback function for the icon creation is called, the part name is passed through the <span style="font-family: Courier New,Courier,monospace">part</span> variable. Compare this variable to <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> for the first object and to <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> for the icon at the end.</p>
+</li>
+</ol>
+
+<h3>Creating the Icon</h3>
+<p>Create the icon when the callback is recognized. This example uses an <span style="font-family: Courier New,Courier,monospace">elm_icon</span> object.</p>
+<pre class="prettyprint">
+static Evas_Object *
+_genlist_content_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;Contact *contact = data;
+
+&nbsp;&nbsp;&nbsp;// Test which part is being created
+&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.swallow.icon&quot;))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char filename[PATH_MAX];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create a new icon
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ic = elm_icon_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the filename of the file which is to be loaded
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(filename, sizeof(filename), &quot;%s%s&quot;, ICON_PATH, contact-&gt;icon);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, filename, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Keep the ratio squared
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Return the icon
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ic;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+</pre>
+
+<p>In case the part is <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>, the return is NULL and no icon is added.</p>
+<p>A genlist can seem like an unnecessarily complex structure with its separate callbacks for creating items. However, in a list with thousands of elements, it is quite efficient not to create the graphical items for all list elements at once. Instead only the elements currently displayed on the screen are created through the callbacks. And when the list is scrolled, further callbacks create new elements as they are needed.</p>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">When the genlist is first created, the Elementary needs to know the height of the list. All elements in the list are not necessarily the same size due to different kind of styles. Thus, the Elementary creates all elements once to know the size, and display the scroll bars correctly. If all your items have the same height, you can save CPU time by using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function to impose the same height to all items. In this case, the Elementary does not create the complete list, as the global size is a multiple of the height of the first item.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+  
+ <h2 id="form" name="form">Creating a Contact Details Form</h2>
+<p>The contact details form is created inside the <span style="font-family: Courier New,Courier,monospace">_create_contact_form()</span> function. This function takes a parent <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and a contact item as parameters, and returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. The parent is the naviframe object, and the contact item contains the information on the contact.</p>
+<p>To display the various information about the contact, this example uses boxes.</p>
+
+   <p class="figure">Figure: Contact form layout</p> 
+   <p align="center"><img alt="Contact form layout" src="../../images/form_contact_layout.png" /></p>
+
+<p>To create a contact form:</p>
+<ol>
+<li>
+<p>Create a vertical box:</p>
+<pre class="prettyprint">
+vbox = elm_box_add(parent);
+elm_box_align_set(vbox, 0, 0);
+evas_object_show(vbox);
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function keeps the box element aligned to the top left corner.</p>
+</li>
+<li>
+<p>Create an icon in the genlist item with the <span style="font-family: Courier New,Courier,monospace">_genlist_content_get()</span> function. For a bigger icon, set the minimum size of the icon object to 96 x 96 px.</p>
+</li>
+<li>
+<p>Add the icon object at the end of the vertical box with the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function. As the icon is the first object added, it is displayed at the top of the box.</p>
+<pre class="prettyprint">
+ic = elm_icon_add(vbox);
+snprintf(filename, sizeof(filename), &quot;%s%s&quot;, ICON_PATH, contact-&gt;icon);
+elm_image_file_set(ic, filename, NULL);
+evas_object_size_hint_min_set(ic, 96, 96);
+evas_object_show(ic);
+elm_box_pack_end(vbox, ic);
+</pre>
+</li>
+<li>
+<p>Add the information on the contact: the name, the mobile phone number, the postal address, and the email address. For each information item, create a label and an edit line. The label defines the information type, and the edit box contains the actual information. To set the UI components in a horizontal layout, use a horizontal box.</p>
+</li>
+<li>
+<p>Change the orientation of the box with the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function. To add space between the elements of the vertical box, set padding to 32 px. To set the item of the box not to expand vertically, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function.</p>
+<pre class="prettyprint">
+hbox = elm_box_add(vbox);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+elm_box_padding_set(hbox, 32, 32);
+evas_object_size_hint_weight_set(hbox, EVAS_HINT_EXPAND, 0);
+evas_object_size_hint_align_set(hbox, EVAS_HINT_FILL, 0);
+evas_object_show(hbox);
+</pre>
+</li>
+<li>
+<p>Create the label object, which is an <span style="font-family: Courier New,Courier,monospace">elm_label</span>. Set its text, and do not align or expand it.</p>
+<pre class="prettyprint">
+label = elm_label_add(hbox);
+elm_object_text_set(label, form_items[i]);
+evas_object_size_hint_weight_set(label, 0, 0);
+evas_object_size_hint_align_set(label, 0, 0);
+evas_object_show(label);
+</pre>
+</li>
+<li>
+<p>Create the edit line, which is an <span style="font-family: Courier New,Courier,monospace">elm_entry</span>:</p>
+<pre class="prettyprint">
+edit = elm_entry_add(hbox);
+evas_object_size_hint_weight_set(edit, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(edit, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(edit);
+</pre>
+</li>
+<li>
+<p>Add the label and the edit inside the horizontal box and add the horizontal box to the vertical box:</p>
+<pre class="prettyprint">
+elm_box_pack_end(hbox, label);
+elm_box_pack_end(hbox, edit);
+
+elm_box_pack_end(vbox, hbox);
+</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>
diff --git a/org.tizen.ui.practices/html/native/efl/genlist_tutorial_mn.htm b/org.tizen.ui.practices/html/native/efl/genlist_tutorial_mn.htm
new file mode 100644
index 0000000..8139e6b
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/genlist_tutorial_mn.htm
@@ -0,0 +1,475 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Mobile Genlists</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#genlist_creation">Creating a Genlist</a></li>
+			<li><a href="#entries_creation">Adding List Entries</a></li>
+			<li><a href="#item_style">Managing Item Style and Size</a></li>
+			<li><a href="#item_modes">Using Item Modes</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Mobile Genlists</h1>
+
+  
+<p>This tutorial shows how to create genlists, which are list components for large sets of elements. Genlists use callbacks to populate entries. The same UI component handles both flat lists and trees.</p>
+
+<p>This feature is supported in mobile applications only.</p>
+
+ <h2 id="genlist_creation" name="genlist_creation">Creating a Genlist</h2>
+
+   
+<p>To initialize the application for a genlist and create the genlist component:</p>
+<ol>
+<li>
+<p>Create a window entitled <strong>Genlist Basic Tutorial</strong>. It consists of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.</p>
+<pre class="prettyprint">
+static bool
+_app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *app = data;
+
+&nbsp;&nbsp;&nbsp;app-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Genlist Basic Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(app-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_resize(app-&gt;win, 480, 800);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(app-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;app-&gt;conformant = elm_conformant_add(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;conformant);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;conformant);
+
+&nbsp;&nbsp;&nbsp;app-&gt;naviframe = elm_naviframe_add(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(app-&gt;conformant, app-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;_create_list(app);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(app-&gt;naviframe, NULL, NULL, NULL, app-&gt;list, NULL);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;// Declare a few structures and zero-initialize (C99 feature)
+&nbsp;&nbsp;&nbsp;struct app_data app = {0};
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = _app_create;
+
+&nbsp;&nbsp;&nbsp;// Run the mainloop
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}
+</pre>
+</li>
+<li>
+<p>Declare the <span style="font-family: Courier New,Courier,monospace">app_data</span> struct:</p>
+<pre class="prettyprint">struct 
+app_data
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
+&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc2;
+};
+</pre>
+</li>
+
+
+<li>
+ <p>To create the genlist, call the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *list = elm_genlist_add(parent);
+</pre></li>
+</ol>
+   <p class="figure">Figure: Genlist example</p> 
+   <p align="center"><img alt="Genlist example" src="../../images/genlist_1line.png" /></p>
+
+ <h2 id="entries_creation" name="entries_creation">Adding List Entries</h2>
+ 
+ <p>To add entries to the list:</p>
+ <ol>
+<li>
+<p>Build a basic item class:</p>
+<pre class="prettyprint">Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;func.text_get = NULL;
+itc-&gt;func.content_get = NULL;
+itc-&gt;func.state_get = NULL;
+itc-&gt;func.del = NULL;
+</pre>
+
+<p>This example uses the item class to set the <span style="font-family: Courier New,Courier,monospace">item_style</span> to <span style="font-family: Courier New,Courier,monospace">default</span> and all other fields to <span style="font-family: Courier New,Courier,monospace">NULL</span>. Note that this leaves out the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> fields, which are used to add text and an icon to the list entry. In general, the item class fields define the APIs that are used to manage the list items.</p>
+</li>
+<li>
+<p>Add a new element to the list by calling the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function. Its second parameter is the item class structure which describes how to populate entries. Typically this structure is built once and re-used across calls to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function.</p>
+<pre class="prettyprint">
+elm_genlist_item_append(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;itc,
+&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, // Item data
+&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, // Parent item for trees, NULL if 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;ELM_GENLIST_ITEM_NONE, // Item type; this is the common one
+&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, // Callback on selection of the item
+&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 // Data for that callback function
+);
+</pre>
+<p>With most parameters as <span style="font-family: Courier New,Courier,monospace">NULL</span> and <span style="font-family: Courier New,Courier,monospace">itc</span> having most of its members <span style="font-family: Courier New,Courier,monospace">NULL</span> too, the elements of the list are blank and do not trigger anything when selected.</p>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">text_get()</span> callback to add text in the elements in the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure.</p>
+<p>The callback must follow a prototype that takes data, an Evas Object, and a part variable as parameters. It returns a C string that is displayed in the part named after the <span style="font-family: Courier New,Courier,monospace">part</span> parameter. The callback is called for each user-settable text part according to the current theme.</p>
+
+<p>For more information on parts as used in the EFL files, see <a href="edje_intro_n.htm#simple_edc_file">Writing a Simple EDC File</a>.</p>
+
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The value returned by the callback is freed by the EFL. The value must be freshly allocated: do not free it yourself and do not reuse it across list elements.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>The <span style="font-family: Courier New,Courier,monospace">default</span> theme (style defined for the item class) contains an <span style="font-family: Courier New,Courier,monospace">elm.text</span> part. The following example shows a possible implementation of the <span style="font-family: Courier New,Courier,monospace">text_get()</span> callback displaying text in the <span style="font-family: Courier New,Courier,monospace">elm.text</span> part:</p>
+<pre class="prettyprint">
+static char *
+_genlist_text_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;// Check this is text for the expected part
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;Some text&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The part names and positions depend on the <span style="font-family: Courier New,Courier,monospace">item_style</span> chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. For more information, see <a href="edje_intro_n.htm">Introduction to EDC Programming</a>.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to vary the list behavior according to the data given to the EFL in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter of the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function call. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, you can get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
+<pre class="prettyprint">
+static char *
+_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
+{
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *buf = malloc(16);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 16, &quot;Entry %d.&quot;, (int)(uintptr_t)data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return buf;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+</li>
+<li>
+<p>Add icons to the list with the <span style="font-family: Courier New,Courier,monospace">content_get()</span> callback. It returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and is called for each part whose content can be set. The callback must follow a prototype that takes data, an Evas Object, and a part variable as parameters. The only difference with the <span style="font-family: Courier New,Courier,monospace">text_get()</span> callback is that the <span style="font-family: Courier New,Courier,monospace">content_get()</span> function returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> rather than a <span style="font-family: Courier New,Courier,monospace">char *</span>.</p>
+
+<p>The following example creates colored rectangles in the parts that are to be set. In the <span style="font-family: Courier New,Courier,monospace">default</span> theme, this displays a red rectangle on the left side of each list item and a green one on the right side.</p>
+<pre class="prettyprint">
+static Evas_Object *
+_genlist_content_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;int i = (int) (uintptr_t) data;
+
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.swallow.icon&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (strcmp(part, &quot;elm.swallow.end&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>Implement the genlist item events.</p>
+<p>Genlist items trigger a callback when clicked. The callback is chosen when adding the new item, for example, when calling the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function:</p>
+<pre class="prettyprint">
+elm_genlist_item_append(list, itc, NULL,  NULL,  ELM_GENLIST_ITEM_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;_genlist_selected_cb, // Callback on selection of the item
+&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);
+</pre>
+
+<p>The callback must follow a prototype that takes data, an Evas Object, and event information as parameters. The following implementation changes the item&#39;s style when the item is selected.</p>
+<pre class="prettyprint">
+static void
+_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;struct app_data *app = data;
+
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+}
+</pre>
+</li>
+</ol>
+
+	<h2 id="item_style" name="item_style">Managing Item Style and Size</h2>
+ 
+
+<p>You can manage the item style and size:</p> 
+
+<ul>
+<li>Managing the item style:
+<p>The number of parts that you can fill for an item depends on the item style that you select when creating the item class ( <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct) for the genlist:</p>
+<pre class="prettyprint">
+app-&gt;itc-&gt;item_style = &quot;default&quot;;
+</pre>
+<p>For all available styles, see <a href="component_genlist_mn.htm">Genlist</a>.</p>
+<p>You can customize the styles by <a href="edje_intro_n.htm">modifying the theme</a> in the EDC file. In case the customization is only visual, it is a good practice to keep the same item style names for new themes. This makes it possible to change the theme and keep the code the same while also retaining the same overall item placement.</p>
+</li>
+<li>Setting a homogeneous item size:
+<p>To set the scroller correctly, the actual height and width of the genlist must be computed at the beginning. Since this means computing the size of each item and adding all item sizes together, it has a cost and slows down the process of adding items to a genlist.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function solves the problem by assuming that all items are the same size as the first item of the list. This assumption speeds up large insertions; however, it can lead to serious graphical issues if the items are not actually the same size. Use this function with care.</p></li>
+<li id="item_class_update">Changing the item class after the item has been created:
+<p>Changing the item class of a UI component is an easy way to change its appearance based on user actions (for example, when it is selected). To change the item class, call the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span> function:</p>
+<pre class="prettyprint">static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;// Change the appearance and possibly content of the item being expanded
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+</li>
+</ul>
+
+ <h2 id="item_modes" name="item_modes">Using Item Modes</h2>
+
+<p>The previous genlist examples have all featured bare lists. However, the genlist component is able to display items in a tree or group mode:</p>
+
+<ul>
+<li><strong>Tree</strong> mode uses the parenting relationship with other items.
+<p>The child elements are created on-demand when their parent is expanded, and deleted when it is contracted.</p></li>
+<li><strong>Group</strong> mode keeps an element visible as long as one of its children is visible.
+<p>When scrolling, the parent element remains at the top of the UI component until all its child elements have been scrolled through and another group replaces it. The group mode is very useful for &quot;title&quot; items.</p></li>
+</ul>
+<p>A common UI design is to mix the group and tree modes to allows for a tree behavior while keeping the group header item visible.</p>
+
+<ul>
+<li>
+<p>To use the group mode:</p>
+<ol>
+<li>
+<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
+<p>Since there are 2 kind of items, create 2 item classes. Give them different styles and callback functions.</p>
+<pre class="prettyprint">
+app-&gt;itc = elm_genlist_item_class_new();
+app-&gt;itc-&gt;item_style = &quot;default_style&quot;;
+app-&gt;itc-&gt;func.text_get = _genlist_text_get_size;
+app-&gt;itc-&gt;func.content_get = _genlist_content_get_bg;
+app-&gt;itc-&gt;func.state_get = NULL;
+app-&gt;itc-&gt;func.del = NULL; 
+
+app-&gt;itc2 = elm_genlist_item_class_new();
+app-&gt;itc2-&gt;item_style = &quot;icon_top_text_bottom&quot;;
+app-&gt;itc2-&gt;func.text_get = _genlist_text_get_nosize;
+app-&gt;itc2-&gt;func.content_get = _genlist_content_get_icon;
+app-&gt;itc2-&gt;func.state_get = NULL;
+app-&gt;itc2-&gt;func.del = NULL; 
+</pre>
+</li>
+<li>
+<p>Add a group header and follow it with 10 children. This is repeated 1000 times.</p>
+<p>The parent has the <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> type, while the children have the <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span> type.</p>
+<p>Note that the value returned by the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function for a group header is stored and sent to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> call that adds the children. This creates the parent-child relationship.</p>
+<pre class="prettyprint">
+for (i = 0; i &lt; 1000; i++) 
+{
+&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(app-&gt;list, app-&gt;itc2, (void *)(uintptr_t) (10 * i), 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP, NULL, NULL);
+&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; 10; j++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (10 * i + j), it,
+&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;ELM_GENLIST_ITEM_NONE, NULL, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ol>
+</li>
+
+<li><p>To use the tree mode:</p>
+<ol>
+<li>
+<p>Register the callbacks (<span style="font-family: Courier New,Courier,monospace">expand,request</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">contract,request</span>, and <span style="font-family: Courier New,Courier,monospace">contracted</span>) using the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function on the genlist object:</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(app-&gt;list, &quot;expand,request&quot;,
+&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;_tree_item_expand_request, NULL);
+evas_object_smart_callback_add(app-&gt;list, &quot;expanded&quot;,
+&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;_tree_item_expanded, NULL);
+
+evas_object_smart_callback_add(app-&gt;list, &quot;contract,request&quot;,
+&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;_tree_item_contract_request, NULL);
+evas_object_smart_callback_add(app-&gt;list, &quot;contracted&quot;,
+&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;_tree_item_contracted, NULL);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">expand,request</span> and <span style="font-family: Courier New,Courier,monospace">contract,request</span> callbacks do only one thing: decide whether the element is expanded or contracted. This is done by using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function; if it changes the expansion status of the item, the next callback is called (either <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span>, depending on whether it was an <span style="font-family: Courier New,Courier,monospace">expand,request</span> or <span style="font-family: Courier New,Courier,monospace">contract,request</span> event). The following examples show a minimal implementation of these callbacks.</p>
+<pre class="prettyprint">
+static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+
+<pre class="prettyprint">
+static void
+_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_FALSE);
+}
+</pre>
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The above examples have an extra line: the call to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span> function. This function <a href="#item_class_update">changes the item style after the item creation</a>.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+</li>
+<li>
+<p>Expand the list. Once the genlist item status is set to expanded, the <span style="font-family: Courier New,Courier,monospace">expanded</span> event is triggered and it is the duty of a callback for that event to populate the list with the item&#39;s children. This relies on the <span style="font-family: Courier New,Courier,monospace">parent</span> parameter of functions (such as <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>), similar to the group mode.</p>
+<p>The following function is a callback implementation for the <span style="font-family: Courier New,Courier,monospace">expanded</span> event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not <span style="font-family: Courier New,Courier,monospace">NULL</span>. Conveniently, the parent <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> pointer that is passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is given in the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback and needs to be cast.</p>
+<pre class="prettyprint">
+static void
+_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+&nbsp;&nbsp;&nbsp;int i_parent = (int)(uintptr_t) data;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 10; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (i + i_parent), it_parent,
+&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;ELM_GENLIST_ITEM_NONE, NULL, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>Contract the list. The following code has the callback function for the <span style="font-family: Courier New,Courier,monospace">contracted</span> event. It simply calls the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> function to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter to the callback.</p>
+<pre class="prettyprint">static void
+_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_subitems_clear(it_parent);
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>
+<p>To mix group and tree modes:</p>
+<ol>
+<li>Create an item of the group type, and an item of the tree type whose parent is the group type item.</li>
+<li>Add the callbacks to populate the children of the tree item in the regular way.</li>
+</ol>
+</li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.practices/html/native/efl/genlist_tutorial_wn.htm b/org.tizen.ui.practices/html/native/efl/genlist_tutorial_wn.htm
new file mode 100644
index 0000000..becad45
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/genlist_tutorial_wn.htm
@@ -0,0 +1,486 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Wearable Genlists</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#genlist_creation">Creating a Genlist</a></li>
+			<li><a href="#entries_creation">Adding List Entries</a></li>
+			<li><a href="#item_style">Managing Item Style and Size</a></li>
+			<li><a href="#item_modes">Using Item Modes</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Wearable Genlists</h1>
+
+<p>This tutorial shows how to create genlists, which are list components for large sets of elements. Genlists use callbacks to populate entries. The same UI component handles both flat lists and trees.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+
+ <h2 id="genlist_creation" name="genlist_creation">Creating a Genlist</h2>
+
+<p>To initialize the application for a genlist and create the genlist component:</p>
+<ol>
+<li>
+<p>Create a window entitled <strong>Genlist Basic Tutorial</strong>. It consists of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.</p>
+<pre class="prettyprint">
+static bool
+_app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *app = data;
+
+&nbsp;&nbsp;&nbsp;app-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Genlist Basic Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(app-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_resize(app-&gt;win, 480, 800);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(app-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;app-&gt;conformant = elm_conformant_add(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;conformant);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;conformant);
+
+&nbsp;&nbsp;&nbsp;app-&gt;naviframe = elm_naviframe_add(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(app-&gt;conformant, app-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;_create_list(app);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(app-&gt;naviframe, NULL, NULL, NULL, app-&gt;list, NULL);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;// Declare a few structures and zero-initialize (C99 feature)
+&nbsp;&nbsp;&nbsp;struct app_data app = {0};
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = _app_create;
+
+&nbsp;&nbsp;&nbsp;// Run the mainloop
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}
+</pre>
+</li>
+<li>
+<p>Declare the <span style="font-family: Courier New,Courier,monospace">app_data</span> struct:</p>
+<pre class="prettyprint">struct 
+app_data
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
+&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc2;
+};
+</pre>
+</li>
+
+
+<li>
+ <p>To create the genlist, call the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *list = elm_genlist_add(parent);
+</pre></li>
+</ol>
+   <p class="figure">Figure: Genlist example</p> 
+   <p align="center"><img alt="Genlist example" src="../../images/genlist_wn.png" /></p>
+
+ <h2 id="entries_creation" name="entries_creation">Adding List Entries</h2>
+ 
+ <p>To add entries to the list:</p>
+ <ol>
+<li>
+<p>Build a basic item class:</p>
+<pre class="prettyprint">Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;func.text_get = NULL;
+itc-&gt;func.content_get = NULL;
+itc-&gt;func.state_get = NULL;
+itc-&gt;func.del = NULL;
+</pre>
+
+<p>This example uses the item class to set the <span style="font-family: Courier New,Courier,monospace">item_style</span> to <span style="font-family: Courier New,Courier,monospace">default</span> and all other fields to <span style="font-family: Courier New,Courier,monospace">NULL</span>. Note that this leaves out the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> fields, which are used to add text and an icon to the list entry. In general, the item class fields define the APIs that are used to manage the list items.</p>
+</li>
+<li>
+<p>Add a new element to the list by calling the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function. Its second parameter is the item class structure which describes how to populate entries. Typically this structure is built once and re-used across calls to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function.</p>
+<pre class="prettyprint">
+elm_genlist_item_append(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;itc,
+&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, // Item data
+&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, // Parent item for trees, NULL if 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;ELM_GENLIST_ITEM_NONE, // Item type; this is the common one
+&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, // Callback on selection of the item
+&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 // Data for that callback function
+);
+</pre>
+<p>With most parameters as <span style="font-family: Courier New,Courier,monospace">NULL</span> and <span style="font-family: Courier New,Courier,monospace">itc</span> having most of its members <span style="font-family: Courier New,Courier,monospace">NULL</span> too, the elements of the list are blank and do not trigger anything when selected.</p>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">text_get()</span> callback to add text in the elements in the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure.</p>
+<p>The callback must follow a prototype that takes data, an Evas Object, and a part variable as parameters. It returns a C string that is displayed in the part named after the <span style="font-family: Courier New,Courier,monospace">part</span> parameter. The callback is called for each user-settable text part according to the current theme.</p>
+
+<p>For more information on parts as used in the EFL files, see <a href="edje_intro_n.htm#simple_edc_file">Writing a Simple EDC File</a>.</p>
+
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The value returned by the callback is freed by the EFL. The value must be freshly allocated: do not free it yourself and do not reuse it across list elements.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>The <span style="font-family: Courier New,Courier,monospace">default</span> theme (style defined for the item class) contains an <span style="font-family: Courier New,Courier,monospace">elm.text</span> part. The following example shows a possible implementation of the <span style="font-family: Courier New,Courier,monospace">text_get()</span> callback displaying text in the <span style="font-family: Courier New,Courier,monospace">elm.text</span> part:</p>
+<pre class="prettyprint">
+static char *
+_genlist_text_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;// Check this is text for the expected part
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;Some text&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The part names and positions depend on the <span style="font-family: Courier New,Courier,monospace">item_style</span> chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. For more information, see <a href="edje_intro_n.htm">Introduction to EDC Programming</a>.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to vary the list behavior according to the data given to the EFL in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter of the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function call. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, you can get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
+<pre class="prettyprint">
+static char *
+_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
+{
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *buf = malloc(16);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 16, &quot;Entry %d.&quot;, (int)(uintptr_t)data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return buf;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+</li>
+<li>
+<p>Add icons to the list with the <span style="font-family: Courier New,Courier,monospace">content_get()</span> callback. It returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and is called for each part whose content can be set. The callback must follow a prototype that takes data, an Evas Object, and a part variable as parameters. The only difference with the <span style="font-family: Courier New,Courier,monospace">text_get()</span> callback is that the <span style="font-family: Courier New,Courier,monospace">content_get()</span> function returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> rather than a <span style="font-family: Courier New,Courier,monospace">char *</span>.</p>
+
+<p>The following example creates colored rectangles in the parts that are to be set. In the <span style="font-family: Courier New,Courier,monospace">default</span> theme, this displays a red rectangle on the left side of each list item and a green one on the right side.</p>
+<pre class="prettyprint">
+static Evas_Object *
+_genlist_content_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;int i = (int) (uintptr_t) data;
+
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.swallow.icon&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (strcmp(part, &quot;elm.swallow.end&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The swallow parts have no minimum size. This means that if you do not fix the minimum size, the part cannot be seen.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<li>
+<p>Implement the genlist item events.</p>
+<p>Genlist items trigger a callback when clicked. The callback is chosen when adding the new item, for example, when calling the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function:</p>
+<pre class="prettyprint">
+elm_genlist_item_append(list, itc, NULL,  NULL,  ELM_GENLIST_ITEM_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;_genlist_selected_cb, // Callback on selection of the item
+&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);
+</pre>
+
+<p>The callback must follow a prototype that takes data, an Evas Object, and event information as parameters. The following implementation changes the item&#39;s style when the item is selected.</p>
+<pre class="prettyprint">
+static void
+_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *app = data;
+
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+}
+</pre>
+</li>
+</ol>
+
+	<h2 id="item_style" name="item_style">Managing Item Style and Size</h2>
+ 
+
+<p>You can manage the item style and size:</p> 
+
+<ul>
+<li>Managing the item style:
+<p>The number of parts that you can fill for an item depends on the item style that you select when creating the item class ( <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct) for the genlist:</p>
+<pre class="prettyprint">
+app-&gt;itc-&gt;item_style = &quot;default&quot;;
+</pre>
+<p>For all available styles, see <a href="component_genlist_wn.htm">Genlist</a>.</p>
+<p>You can customize the styles by <a href="edje_intro_n.htm">modifying the theme</a>in the EDC file. In case the customization is only visual, it is a good practice to keep the same item style names for new themes. This makes it possible to change the theme and keep the code the same while also retaining the same overall item placement.</p>
+</li>
+<li>Setting a homogeneous item size:
+<p>To set the scroller correctly, the actual height and width of the genlist must be computed at the beginning. Since this means computing the size of each item and adding all item sizes together, it has a cost and slows down the process of adding items to a genlist.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function solves the problem by assuming that all items are the same size as the first item of the list. This assumption speeds up large insertions; however, it can lead to serious graphical issues if the items are not actually the same size. Use this function with care.</p></li>
+<li id="item_class_update">Changing the item class after the item has been created:
+<p>Changing the item class of a UI component is an easy way to change its appearance based on user actions (for example, when it is selected). To change the item class, call the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span> function:</p>
+<pre class="prettyprint">static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;// Change the appearance and possibly content of the item being expanded
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+</li>
+</ul>
+
+ <h2 id="item_modes" name="item_modes">Using Item Modes</h2>
+
+<p>The previous genlist examples have all featured bare lists. However, the genlist component is able to display items in a tree or group mode:</p>
+
+<ul>
+<li><strong>Tree</strong> mode uses the parenting relationship with other items.
+<p>The child elements are created on-demand when their parent is expanded, and deleted when it is contracted.</p></li>
+<li><strong>Group</strong> mode keeps an element visible as long as one of its children is visible.
+<p>When scrolling, the parent element remains at the top of the UI component until all its child elements have been scrolled through and another group replaces it. The group mode is very useful for &quot;title&quot; items.</p></li>
+</ul>
+<p>A common UI design is to mix the group and tree modes to allows for a tree behavior while keeping the group header item visible.</p>
+<ul>
+<li>
+<p>To use the group mode:</p>
+<ol>
+<li>
+<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
+<p>Since there are 2 kind of items, create 2 item classes. Give them different styles and callback functions.</p>
+<pre class="prettyprint">
+app-&gt;itc = elm_genlist_item_class_new();
+app-&gt;itc-&gt;item_style = &quot;default&quot;;
+app-&gt;itc-&gt;func.text_get = _genlist_text_get_size;
+app-&gt;itc-&gt;func.content_get = _genlist_content_get_bg;
+app-&gt;itc-&gt;func.state_get = NULL;
+app-&gt;itc-&gt;func.del = NULL; 
+
+app-&gt;itc2 = elm_genlist_item_class_new();
+app-&gt;itc2-&gt;item_style = &quot;1text.1icon&quot;;
+app-&gt;itc2-&gt;func.text_get = _genlist_text_get_nosize;
+app-&gt;itc2-&gt;func.content_get = _genlist_content_get_icon;
+app-&gt;itc2-&gt;func.state_get = NULL;
+app-&gt;itc2-&gt;func.del = NULL; 
+</pre>
+</li>
+<li>
+<p>Add a group header and follow it with 10 children. This is repeated 1000 times.</p>
+<p>The parent has the <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> type, while the children have the <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span> type.</p>
+<p>Note that the value returned by the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function for a group header is stored and sent to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> call that adds the children. This creates the parent-child relationship.</p>
+<pre class="prettyprint">
+for (i = 0; i &lt; 1000; i++) 
+{
+&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(app-&gt;list, app-&gt;itc2, (void *)(uintptr_t) (10 * i), 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP, NULL, NULL);
+&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; 10; j++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (10 * i + j), it,
+&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;ELM_GENLIST_ITEM_NONE, NULL, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ol>
+</li>
+
+<li><p>To use the tree mode:</p>
+<ol>
+<li>
+<p>Register the callbacks (<span style="font-family: Courier New,Courier,monospace">expand,request</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">contract,request</span>, and <span style="font-family: Courier New,Courier,monospace">contracted</span>) using the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function on the genlist object:</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(app-&gt;list, &quot;expand,request&quot;,
+&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;_tree_item_expand_request, NULL);
+evas_object_smart_callback_add(app-&gt;list, &quot;expanded&quot;,
+&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;_tree_item_expanded, NULL);
+
+evas_object_smart_callback_add(app-&gt;list, &quot;contract,request&quot;,
+&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;_tree_item_contract_request, NULL);
+evas_object_smart_callback_add(app-&gt;list, &quot;contracted&quot;,
+&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;_tree_item_contracted, NULL);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">expand,request</span> and <span style="font-family: Courier New,Courier,monospace">contract,request</span> callbacks do only one thing: decide whether the element is expanded or contracted. This is done by using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function; if it changes the expansion status of the item, the next callback is called (either <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span>, depending on whether it was an <span style="font-family: Courier New,Courier,monospace">expand,request</span> or <span style="font-family: Courier New,Courier,monospace">contract,request</span> event). The following examples show a minimal implementation of these callbacks.</p>
+<pre class="prettyprint">
+static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+
+<pre class="prettyprint">
+static void
+_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_FALSE);
+}
+</pre>
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The above examples have an extra line: the call to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span> function. This function <a href="#item_class_update">changes the item style after the item creation</a>.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+</li>
+<li>
+<p>Expand the list. Once the genlist item status is set to expanded, the <span style="font-family: Courier New,Courier,monospace">expanded</span> event is triggered and it is the duty of a callback for that event to populate the list with the item&#39;s children. This relies on the <span style="font-family: Courier New,Courier,monospace">parent</span> parameter of functions (such as <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>), similar to the group mode.</p>
+<p>The following function is a callback implementation for the <span style="font-family: Courier New,Courier,monospace">expanded</span> event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not <span style="font-family: Courier New,Courier,monospace">NULL</span>. Conveniently, the parent <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> pointer that is passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is given in the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback and needs to be cast.</p>
+<pre class="prettyprint">
+static void
+_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+&nbsp;&nbsp;&nbsp;int i_parent = (int)(uintptr_t) data;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 10; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (i + i_parent), it_parent,
+&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;ELM_GENLIST_ITEM_NONE, NULL, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>Contract the list. The following code has the callback function for the <span style="font-family: Courier New,Courier,monospace">contracted</span> event. It simply calls the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> function to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter to the callback.</p>
+<pre class="prettyprint">static void
+_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_subitems_clear(it_parent);
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>
+<p>To mix group and tree modes:</p>
+<ol>
+<li>Create an item of the group type, and an item of the tree type whose parent is the group type item.</li>
+<li>Add the callbacks to populate the children of the tree item in the regular way.</li>
+</ol>
+</li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.practices/html/native/efl/graphical_objects_n.htm b/org.tizen.ui.practices/html/native/efl/graphical_objects_n.htm
new file mode 100644
index 0000000..30474de
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/graphical_objects_n.htm
@@ -0,0 +1,78 @@
+<!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>Graphical Objects: Managing and Rendering Evas Objects</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+		</ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Graphical Objects: Managing and Rendering Evas Objects</h1>
+  
+<p>Evas is a clean display canvas API for several target display systems that can draw anti-aliased text, smooth super and sub-sampled scaled images, alpha-blend objects and much more.</p>
+<p>It abstracts any need to know much about what the characteristics of your display system are, what graphics calls are used to draw them, and how. It deals on an object level where all you do is create and manipulate objects in a canvas and set their properties.</p>
+<p>Evas optimizes the rendering pipeline to minimize effort in redrawing changes made to the canvas and so takes this work out of the programmers hand, saving a lot of time and energy.</p>
+<p>It is designed to work on embedded systems all the way to large and powerful multi-cpu workstations. It can be compiled to only have the features you need for your target platform if you so wish. It has several display back-ends, allowing it display on several display systems, making it portable for cross-device and cross-platform development.</p>
+
+<p>Evas is not a UI component set or a UI component toolkit, but it is their base. See Elementary for a toolkit based on Evas, Edje, Ecore and other Enlightenment technologies.</p>
+<p>It is not dependent or aware of main loops, input or output systems. Input must be polled from various sources and fed to Evas. It does not create windows or report windows updates to your system, but draws the pixels and reports to the user the areas that are changed. These operations are ready to be used in Ecore, particularly in Ecore_Evas wrapper/helper set of functions.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/guides_efl_n.htm b/org.tizen.ui.practices/html/native/efl/guides_efl_n.htm
new file mode 100644
index 0000000..5ec6712
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/guides_efl_n.htm
@@ -0,0 +1,95 @@
+<!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>EFL</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>EFL</h1>
+
+<p>EFL is an open-source UI toolkit that provides a set of libraries that offer useful features to applications. EFL covers a number of areas from UI component sets to data structures. EFL is one of the Tizen native UI modules and is available in various Tizen profiles. In Tizen, EFL is commonly used for UI applications, although you can also use it for non-UI applications.</p>
+
+<p>When creating an EFL application, make sure you understand the following main features:</p>
+
+<ul>
+	<li><a href="efl_overview_n.htm">EFL Overview: Getting Started with EFL UI Programming</a>
+	<p>Enables you to get started with the EFL UI programming.</p></li>
+	<li><a href="ui_components_n.htm">UI Components: Handling Elementary UI Component Libraries</a>
+	<p>Enables you to handle Elementary UI components.</p></li>
+	<li><a href="component_infra_n.htm">UI Component Infrastructure Modules: Managing Component Properties</a>
+	<p>Enables you to handle infrastructure modules to manage the common properties of UI components.</p></li>
+	<li><a href="ui_containers_n.htm">UI Containers: Creating Layouts Using Container UI Components</a>
+	<p>Enables you to create layouts using container UI components.</p></li>
+	<li><a href="theme_n.htm">Themes: Specifying the UI Look and Feel</a>
+	<p>Enables you to specify the UI look and feel.</p></li>
+	<li><a href="edje_objects_n.htm">Edje Objects: Managing Layouts and Layout Components</a>
+	<p>Enables you to manage layouts and layout components.</p></li>
+	<li><a href="font_setting_n.htm">Fonts: Setting Application Text Fonts</a>
+	<p>Enables you get and set font information.</p></li>
+	<li><a href="ui_scalability_n.htm">Scaling: Handling Screen and Object Sizes</a>
+	<p>Enables you to manage various screen and object sizes.</p></li>
+	<li><a href="notification_window_n.htm">Notification Windows: Supporting Notification Levels, Screenshots, and Input Generators</a>
+	<p>Enables you to handle EFL utilities, such as notification windows, screenshots, and input generators.</p></li>
+	<li><a href="core_loop_n.htm">Core Loop and OS Interfacing: Handling the Main Loop and Threads</a>
+	<p>Enables you to use the main loop and handle threads.</p></li>
+	<li><a href="graphical_objects_n.htm">Graphical Objects: Managing and Rendering Evas Objects</a>
+	<p>Enables you to manage and render Evas objects.</p></li>
+	<li><a href="event_handling_n.htm">Event Handling: Managing the Event Flow</a>
+	<p>Enables you to manage polling, timers, events, and file descriptors.</p></li>
+	<li><a href="animation_effects_n.htm">Animations and Effects: Creating Transformations</a>
+	<p>Enables you to create physics-related animations and effects.</p></li>
+	<li><a href="data_types_tools_n.htm">Data Types and Tools: Using Eina Resources</a>
+	<p>Enables you to take advantage of data types and tools used in multiple places.</p></li>
+	<li><a href="hw_input_n.htm">Hardware Input Handling: Managing Hardware Events with EFL Extension</a>
+	<p>Enables you to use the EFL extension to manage hardware input events.</p></li>
+</ul>
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/native/efl/hw_input_n.htm b/org.tizen.ui.practices/html/native/efl/hw_input_n.htm
new file mode 100644
index 0000000..89686b1
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/hw_input_n.htm
@@ -0,0 +1,64 @@
+<!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>Hardware Input Handling: Managing Hardware Events with EFL Extension</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>		
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Hardware Input Handling: Managing Hardware Events with EFL Extension</h1> 
+
+   <p>The Tizen platform offers the <strong>Menu</strong>, <strong>Back</strong>, and <strong>Home</strong> keys as <a href="key_events_mn.htm">physical hardware keys</a> for mobile devices and <a href="rotary_events_wn.htm">rotary component parts</a> for wearable devices. You can also utilize the hardware keys in other applications with <a href="key_grab_n.htm">key grabbing</a>.</p>
+   
+   <p>Basically, EFL does not depend on any specific hardware input methods, such as hardware keys, to generate back and home events, or rotary component parts to generate rotary events. Instead these hardware input events have tightly related to the Tizen UX. As a result, EFL has created the EFL extension library to support common UX behavior between applications and hardware events.</p>
+   
+   <p>When the user presses the <strong>Menu</strong> or <strong>Back</strong> key, the key generates a signal with its key property. The Ecore library receives the signal and propagates it to application layers as an event. The EFL extension library consumes the events and handles the views of the application according to key properties. Otherwise, EFL extension manages the rotary events, which are generated from rotary components in wearable devices and delivered to application layers by defining an event callback or a handler function, and registering it.</p>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/key_events_mn.htm b/org.tizen.ui.practices/html/native/efl/key_events_mn.htm
new file mode 100644
index 0000000..1707301
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/key_events_mn.htm
@@ -0,0 +1,178 @@
+<!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>Managing Menu and Back Key Events</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>		
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Managing Menu and Back Key Events</h1>
+
+<p>The <strong>Menu</strong> and <strong>Back</strong> functions are common UX behaviors in applications. Generally, the user taps the <strong>Back</strong> hardware key to return to the previous screen. The applications usually also provide option menus to manipulate their functions through the tapping of the <strong>Menu</strong> hardware key.</p>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>Normally, the key events are only delivered to the object in focus. However, with the EFL Extension functions, you can let visible objects without focus get events from the <strong>Menu</strong> and <strong>Back</strong> keys.</p>
+
+ <p class="figure">Figure: Menu and Back keys</p> 
+<p align="center"><img alt="Menu and Back keys" src="../../images/efl_phone.png" /></p> 
+
+<p>The EFL Extension maintains its own object stack for determining which object to deliver events to. Only visible objects are added to this stack. The stack is based on the Evas layer. It means that if 2 objects are registered for the same EFL Extension event, the object on the higher Evas layer gets the event.</p>
+
+<p>The following figure shows an example of objects and their layers. Objects 1, 2, and 3 are registered with EFL Extension callbacks for the same event, such as a <strong>Back</strong> key event. When the event occurs, object 3, which is on the highest layer (layer 3), gets the event callback.</p>
+
+<p class="figure">Figure: Objects with layers</p> 
+<p align="center"><img alt="Objects with layers" src="../../images/efl_layers.png" /></p> 
+
+<p>If objects stay on the same layer, the object which is registered to the callback first gets the event.</p>
+
+<p>To register a callback for the <strong>Menu</strong> or <strong>Back</strong> key, use the <span style="font-family: Courier New,Courier,monospace;">eext_object_event_callback_add()</span> function with the application callback type:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_BACK</span>: Hardware <strong>Back</strong> key event</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_MORE</span>: Hardware <strong>Menu</strong> key event</li>
+</ul>
+
+<p>To delete a registered event in the EFL Extension, use the <span style="font-family: Courier New,Courier,monospace;">eext_object_event_callback_del()</span> function.</p>
+
+<p>The EFL Extension also provides other convenient functions to work with the <strong>Menu</strong> and <strong>Back</strong> keys for <a href="component_popup_mn.htm">popup</a>, <a href="component_ctxpopup_mn.htm">ctxpopup</a>, <a href="containers_n.htm#naviframe">naviframe</a>, and <a href="component_entry_mn.htm">entry</a> components.</p>
+
+<h2 id="hw" name="hw">Managing Hardware Key Events</h2>
+
+<p>The application has a window that contains a naviframe and registers the EFL Extension <strong>Menu</strong> and <strong>Back</strong> key events for the naviframe.</p>
+<p>When the <strong>Menu</strong> key is pressed, a popup is created and an EFL Extension <strong>Back</strong> key event for this popup is registered. If the popup is shown and the <strong>Back</strong> key is pressed, the popup is removed. Otherwise, if the <strong>Back</strong> key is pressed and there is no popup, the application is hidden.</p>
+
+<p>To manage hardware key events:</p>
+<ol>
+<li>
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;efl_extension.h&gt;
+</pre>
+</li>
+
+<li>Create objects using the window and naviframe:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL;
+
+&nbsp;&nbsp;&nbsp;// Create the window
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, _win_del, NULL);
+
+&nbsp;&nbsp;&nbsp;// Create the naviframe
+&nbsp;&nbsp;&nbsp;Evas_Object *nf = NULL;
+&nbsp;&nbsp;&nbsp;nf = elm_naviframe_add(win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(win, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(nf);
+
+&nbsp;&nbsp;&nbsp;// Content
+&nbsp;&nbsp;&nbsp;Evas_Object *label = NULL;
+&nbsp;&nbsp;&nbsp;label = elm_label_add(nf);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(label, &quot;Press menu key to show popup,&lt;br/&gt;back key to exit.&quot;);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(nf, &quot;Efl Extension usage&quot;, NULL, NULL, label, NULL);
+
+&nbsp;&nbsp;&nbsp;// Show the window
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+}
+</pre>
+</li>
+
+<li>Register EFL Extension callbacks for the naviframe:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Register the EFL extension callbacks for Menu and Back key events
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(nf, EEXT_CALLBACK_MORE, _create_popup, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(nf, EEXT_CALLBACK_BACK, _nf_back_cb, win);
+}
+</pre>
+</li>
+
+<li>Create a popup and register EFL Extension <strong>Back</strong> key event callbacks for it:
+<pre class="prettyprint">
+static void
+_create_popup(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *parent = obj;
+
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL, *content = NULL;
+&nbsp;&nbsp;&nbsp;popup = elm_popup_add(parent);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
+&nbsp;&nbsp;&nbsp;elm_popup_orient_set(popup, ELM_POPUP_ORIENT_CENTER);
+
+&nbsp;&nbsp;&nbsp;// Popup content
+&nbsp;&nbsp;&nbsp;content = elm_label_add(parent);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(content, &quot;Press back key to remove popup.&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(popup, content);
+
+&nbsp;&nbsp;&nbsp;// Register the EFL extension callback for the Back key event
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_show(popup);
+}
+</pre>
+
+<p>To remove the popup when a <strong>Back</strong> key event occurs, use the <span style="font-family: Courier New,Courier,monospace;">eext_popup_back_cb</span> callback.</p>
+
+<p>The callback function for menu key callback:</p>
+<pre class="prettyprint">
+static void
+_nf_back_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = data;
+
+&nbsp;&nbsp;&nbsp;// Hide the window
+&nbsp;&nbsp;&nbsp;elm_win_lower(win);
+}
+</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.ui.guides/html/native/efl/key_events_n.htm b/org.tizen.ui.practices/html/native/efl/key_events_n.htm
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/native/efl/key_events_n.htm
rename to org.tizen.ui.practices/html/native/efl/key_events_n.htm
diff --git a/org.tizen.ui.practices/html/native/efl/key_grab_n.htm b/org.tizen.ui.practices/html/native/efl/key_grab_n.htm
new file mode 100644
index 0000000..fcca868
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/key_grab_n.htm
@@ -0,0 +1,699 @@
+<!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>Grabbing Hardware Key Events</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>		
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Grabbing Hardware Key Events</h1> 
+
+<p>The applications do not normally grab hardware key events, because each key event is delivered to the focused window by default. Some applications, however, have more advanced functionalities and behavior. For example, a memo application can use the volume key to resize the text. However, in most cases, if the volume keys are pressed, a volume control popup opens. To receive special hardware key events in the application, use the <span style="font-family: Courier New,Courier,monospace;">eext_win_keygrab_set()</span>  and <span style="font-family: Courier New,Courier,monospace;">eext_win_keygrab_unset()</span> functions.</p>   
+
+<p>To grab hardware key events:</p>
+<ol>
+<li>To use the functions and data types of the EFL Extension API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;">&lt;efl_extension.h&gt;</span> header in your application: 
+<pre class="prettyprint">
+#include &lt;efl_extension.h&gt;
+</pre>
+</li>
+
+<li>Create the objects using the window. For more information, see <a href="ui_containers_n.htm">UI Containers</a>.
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL;
+
+&nbsp;&nbsp;&nbsp;// Create the window
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, _win_del, NULL);
+
+&nbsp;&nbsp;&nbsp;// Show the window
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+}
+</pre>
+</li>
+
+<li>Register the key event callbacks for the window. For more information, see <a href="event_types_n.htm#ecore">Ecore Events</a>. 
+<pre class="prettyprint">
+Eina_Bool ctrl_pressed = EINA_FALSE;
+
+static Eina_Bool
+_key_down_cb(void *data __UNUSED__, int type __UNUSED__, void *ev)
+{
+&nbsp;&nbsp;&nbsp;// The callback is used with the ECORE_EVENT_KEY_DOWN signal: the
+&nbsp;&nbsp;&nbsp;// parameter &quot;void *ev&quot; is therefore of the actual Ecore_Event_Key type
+&nbsp;&nbsp;&nbsp;// The following renders its fields accessible
+&nbsp;&nbsp;&nbsp;Ecore_Event_Key *event = ev;
+
+&nbsp;&nbsp;&nbsp;// Test whether the key that is pressed is Ctrl
+&nbsp;&nbsp;&nbsp;if (!strcmp(&quot;Control_L&quot;, event-&gt;key))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If it is, store that piece of information
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl_pressed = EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Let the event continue to other callbacks which have not been called yet
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_PASS_ON;
+}
+
+ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, _key_down_cb, NULL);
+</pre>
+</li>
+
+<li>Grab the key events using the <span style="font-family: Courier New,Courier,monospace;">eext_win_keygrab_set()</span> function. The parameters are the window object created in step 2 above, and the <a href="#keystring">key string</a>. 
+<pre class="prettyprint">
+eext_win_keygrab_set(win, &quot;XF86AudioRaiseVolume&quot;)
+</pre>
+</li>
+
+<li>When the application no longer needs to grab the key events, use the <span style="font-family: Courier New,Courier,monospace;">eext_win_keygrab_unset()</span> function to ungrab them:
+<pre class="prettyprint">
+eext_win_keygrab_unset(win, &quot;XF86AudioRaiseVolume&quot;)
+</pre>
+</li>   
+</ol>
+
+<p>The following table lists the hardware keys from which you can grab events in different profiles.</p>
+
+<table id="keystring">
+	<caption>
+		Table: Supported hardware keys
+	</caption>
+	<tbody>
+		<tr>
+			<th>Key</th>
+			<th>Description</th>
+			<th>Mobile</th>
+			<th>Wearable</th>
+			<th>TV</th>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioRaiseVolume&quot;</span></td>
+			<td>Key to raise the volume</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioLowerVolume&quot;</span></td>
+			<td>Key to lower the volume</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86PowerOff&quot;</span></td>
+			<td>Power key to switch the device on and off</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Menu&quot;</span></td>
+			<td>Application-specific menu key</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Home&quot;</span></td>
+			<td>Key to go to the home screen</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Back&quot;</span></td>
+			<td>Key to go back to the previous status or page</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Camera&quot;</span></td>
+			<td>Half shutter key to do something before taking a picture on the camera</td>
+			<td>Yes</td>
+			<td>-</td>
+			<td>-</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Camera_Full&quot;</span></td>
+			<td>Key to take a picture on the camera</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Search&quot;</span></td>
+			<td>Key to go to the search application</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioPlay&quot;</span></td>
+			<td>Key to play media</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioPause&quot;</span></td>
+			<td>Key to pause the media being played</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioStop&quot;</span></td>
+			<td>Key to stop the media being played</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioNext&quot;</span></td>
+			<td>Key to go to the next media item</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioPrev&quot;</span></td>
+			<td>Key to go to the previous media item</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioRewind&quot;</span></td>
+			<td>Key to rewind the playing position of the media</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioForward&quot;</span></td>
+			<td>Key to forward the playing position of the media</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioMedia&quot;</span></td>
+			<td>Key to go to the media player</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioPlayPause&quot;</span></td>
+			<td>Key to toggle between play and pause</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioMute&quot;</span></td>
+			<td>Key to mute the media</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioRecord&quot;</span></td>
+			<td>Key to start recording media</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;Cancel&quot;</span></td>
+			<td>Key to cancel the action triggered by the previous keys</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86SoftKBD&quot;</span></td>
+			<td>Key to show and hide the soft keyboard</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86QuickPanel&quot;</span></td>
+			<td>Key to toggle the quick panel</td>
+			<td>Yes</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86TaskPane&quot;</span></td>
+			<td>Key to toggle the task switcher</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86HomePage&quot;</span></td>
+			<td>Key to go to the homepage of the user-defined Web browser</td>
+			<td>Yes</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86WWW&quot;</span></td>
+			<td>Key to launch the user-defined Web browser</td>
+			<td>Yes</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Mail&quot;</span></td>
+			<td>Key to go to the user-defined email application</td>
+			<td>Yes</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86ScreenSaver&quot;</span></td>
+			<td>Key to activate the screen lock (such as a pattern lock or a PIN lock)</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86MonBrightnessDown&quot;</span></td>
+			<td>Key to lower the screen brightness</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86MonBrightnessUp&quot;</span></td>
+			<td>Key to raise the screen brightness</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Voice&quot;</span></td>
+			<td>Key to activate a voice-related application</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;Hangul&quot;</span></td>
+			<td>Key to toggle the current language</td>
+			<td>Yes</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Apps&quot;</span></td>
+			<td>Key to call the application holder application</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Call&quot;</span></td>
+			<td>Key to launch the call application</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Game&quot;</span></td>
+			<td>Key to go to the game application</td>
+			<td>Yes</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86VoiceWakeUp_LPSD&quot;</span></td>
+			<td>Key to wake up from voice input (LPSD)</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86VoiceWakeUp&quot;</span></td>
+			<td>Key to wake up from voice input</td>
+			<td>Yes</td>
+			<td>Yes</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86TV&quot;</span></td>
+			<td>Key to display the TV screen directly</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Display&quot;</span></td>
+			<td>Key to toggle the video source </td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86RCConfig&quot;</span></td>
+			<td>Key to set the remote control&#39;s specific configuration</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86RCMode&quot;</span></td>
+			<td>Key to show and hide the virtual remote control on the screen</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;1&quot;</span></td>
+			<td>Numeric key 1 on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;2&quot;</span></td>
+			<td>Numeric key 2 on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;3&quot;</span></td>
+			<td>Numeric key 3 on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;4&quot;</span></td>
+			<td>Numeric key 4 on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;5&quot;</span></td>
+			<td>Numeric key 5 on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;6&quot;</span></td>
+			<td>Numeric key 6 on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;7&quot;</span></td>
+			<td>Numeric key 7 on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;8&quot;</span></td>
+			<td>Numeric key 8 on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;9&quot;</span></td>
+			<td>Numeric key 9 on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;0&quot;</span></td>
+			<td>Numeric key 0 on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;-&quot;</span></td>
+			<td>Minus key on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86LowerChannel&quot;</span></td>
+			<td>Key to lower the channel number</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86RaiseChannel&quot;</span></td>
+			<td>Key to raise the channel number</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86ChannelList&quot;</span></td>
+			<td>Key to display the channel list</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86PreviousChannel&quot;</span></td>
+			<td>Key to display the previous channel</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86SysMenu&quot;</span></td>
+			<td>Key to launch the system menu</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86SimpleMenu&quot;</span></td>
+			<td>Key to launch the simple menu</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86History&quot;</span></td>
+			<td>Key to launch the history functionality</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Favorites&quot;</span></td>
+			<td>Key to launch the favorite channels functionality</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;Up&quot;</span></td>
+			<td>Arrow key UP on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;Down&quot;</span></td>
+			<td>Arrow key DOWN on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;Left&quot;</span></td>
+			<td>Arrow key LEFT on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;Right&quot;</span></td>
+			<td>Arrow key RIGHT on the remote control</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;Return&quot;</span></td>
+			<td>OK key on the remote control to confirm or select an item</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Close&quot;</span></td>
+			<td>Exit key on the remote control to terminate the current menu or application</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Info&quot;</span></td>
+			<td>Key to display the basic and auxiliary information on the screen</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Red&quot;</span></td>
+			<td>Key to execute the functionality registered to the RED key</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Green&quot;</span></td>
+			<td>Key to execute the functionality registered to the GREEN key</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Yellow&quot;</span></td>
+			<td>Key to execute the functionality registered to the YELLOW key</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Blue&quot;</span></td>
+			<td>Key to execute the functionality registered to the BLUE key</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86ProgInfo&quot;</span></td>
+			<td>Key to display the program information</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86PictureMode&quot;</span></td>
+			<td>Key to change the screen mode</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86PictureSize&quot;</span></td>
+			<td>Key to change the screen size and aspect ratio</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86PIP&quot;</span></td>
+			<td>Key to set the PIP (Picture-In-Picture) mode to display one screen on the other</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Guide&quot;</span></td>
+			<td>Key to display the user guide</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86AudioMode&quot;</span></td>
+			<td>Key to set or change the audio mode</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF86Subtitle&quot;</span></td>
+			<td>Key to display or hide the subtitles</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace;">&quot;XF863D&quot;</span></td>
+			<td>Key to set or change the 3D mode</td>
+			<td>-</td>
+			<td>-</td>
+			<td>Yes</td>
+		</tr>
+	</tbody>
+</table>
+		
+		
+		
+		
+   
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/layout_tutorial_n.htm b/org.tizen.ui.practices/html/native/efl/layout_tutorial_n.htm
new file mode 100644
index 0000000..775e358
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/layout_tutorial_n.htm
@@ -0,0 +1,782 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating UI Screen Layouts</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#init">Creating the UI Layout</a></li>
+			<li><a href="#add_content">Adding Content to the Screen</a></li>
+			<li><a href="#layout">Using the Base Layout</a></li>		
+			<li><a href="#ClockSimple">Creating a Simple Clock View</a></li>
+			<li><a href="#ClockComplex">Creating a Complex Clock View</a></li>			
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Creating UI Screen Layouts</h1>
+
+  
+<p>This tutorial demonstrates how you can compose a UI screen layout using the layout classes available in the EFL UI component library. It also highlights the capabilities of the EFL layout classes in free style layouting as well as layouting in a particular sequence (such as linear or grid).</p>
+
+
+ <h2 id="init" name="init">Creating the UI Layout</h2>
+
+<p>The sample application uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> and <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> for the view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_table</span>, <span style="font-family: Courier New,Courier,monospace">elm_box</span>, and <span style="font-family: Courier New,Courier,monospace">elm_grid</span> for the composition of the screen, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_label</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
+
+<p>To create the UI layout:</p>
+<ol>
+<li>
+<p>Create the application layout 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;Elm_Object_Item *nf_it, *tabbar_it;
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+</pre>
+</li>
+<li>
+<p>Add the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component to the application to decorate the window with an indicator:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&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);
+</pre>
+</li>
+<li>
+<p>Add the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component to act as a view manager for the window and provide the window title functionality:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;UiLayout&quot;, NULL, NULL, NULL, &quot;tabbar/icon/notitle&quot;);
+
+&nbsp;&nbsp;&nbsp;// Tabbar
+&nbsp;&nbsp;&nbsp;ad-&gt;tabbar = create_toolbar(ad);
+&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, ad-&gt;tabbar);
+
+&nbsp;&nbsp;&nbsp;// Set the first view
+&nbsp;&nbsp;&nbsp;tabbar_it = elm_toolbar_first_item_get(ad-&gt;tabbar);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(tabbar_it, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, NULL);
+}
+</pre>
+</li>
+<li>
+<p>Add the toolbar to the naviframe using the <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function:</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_toolbar(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *tabbar;
+
+&nbsp;&nbsp;&nbsp;tabbar = elm_toolbar_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_object_style_set(tabbar, &quot;tabbar&quot;);
+&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(tabbar, ELM_TOOLBAR_SHRINK_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(tabbar, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Box&quot;, tabbar_item_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Grid&quot;, tabbar_item_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Table&quot;, tabbar_item_cb, ad);
+
+&nbsp;&nbsp;&nbsp;return tabbar;
+}
+</pre>
+
+<p>The following figure illustrates the UI Layout.</p>
+
+  <p class="figure">Figure: UI Layout screen</p> 
+  <p align="center"><img alt="UI Layout screen" src="../../images/uilayout_view2.png" /></p> 
+</li>
+</ol>
+
+ <h2 id="add_content" name="add_content">Adding Content to the Screen</h2>
+
+ <p>To add content to the screen:</p>
+ <ol>
+ <li>
+<p>Compose a box layout using a recursive composition with the <span style="font-family: Courier New,Courier,monospace">create_box_view()</span> function:</p> 
+<pre class="prettyprint">
+static Evas_Object*
+create_box_view(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box, *box1, *box2, *box3;
+
+&nbsp;&nbsp;&nbsp;box = elm_box_add(parent);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box, 10, 10);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;box1 = elm_box_add(box);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box1, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box1, 8, 8);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(box1);
+
+&nbsp;&nbsp;&nbsp;box2 = elm_box_add(box);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box2, 6, 6);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(box2);
+
+&nbsp;&nbsp;&nbsp;box3 = elm_box_add(box);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box3, 5, 5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box3, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(box3, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;evas_object_show(box3);
+} 
+</pre>
+</li>
+<li>
+<p>Add content or another box layout to the box.</p> 
+<pre class="prettyprint">
+// Add an item to the box
+Evas_Object *item1 = create_content(box, &quot;Item 1&quot;);
+evas_object_size_hint_min_set(item1, 0, 40);
+elm_box_pack_end(box, item1);
+elm_box_pack_end(box, box1);
+elm_box_pack_end(box, box3);
+elm_box_pack_end(box, create_content(box, &quot;Item 4&quot;));
+
+// Add an item to the box1
+elm_box_pack_end(box1, create_content(box1, &quot;Item 2.1&quot;));
+elm_box_pack_end(box1, box2);
+elm_box_pack_end(box1, create_content(box1, &quot;Item 2.3&quot;));
+
+// Add an item to the box2
+elm_box_pack_end(box2, create_content(box2, &quot;Item 2.2.1&quot;));
+elm_box_pack_end(box2, create_content(box2, &quot;Item 2.2.2&quot;));
+
+// Add an item to the box3
+elm_box_pack_end(box3, create_content(box3, &quot;Item 3.1&quot;));
+elm_box_pack_end(box3, create_content(box3, &quot;Item 3.2&quot;));
+</pre>
+<p>The box layout implements the size policy during the size calculation.</p>
+</li>
+<li>
+<p>Compose a table layout with a content and grid view with the <span style="font-family: Courier New,Courier,monospace">create_table_view()</span> function:</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_table_view(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *table, *item;
+
+&nbsp;&nbsp;&nbsp;table = elm_table_add(parent);
+&nbsp;&nbsp;&nbsp;elm_table_padding_set(table, 10, 10);
+&nbsp;&nbsp;&nbsp;elm_table_homogeneous_set(table, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(table, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 1&quot;);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 0, 2, 1);
+
+&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 2&quot;);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 2, 0, 1, 1);
+
+&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 3&quot;);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 1, 3, 1);
+
+&nbsp;&nbsp;&nbsp;// Add a grid view item
+&nbsp;&nbsp;&nbsp;item = create_grid_view(table);
+&nbsp;&nbsp;&nbsp;evas_object_show(item);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 2, 3, 10);
+
+&nbsp;&nbsp;&nbsp;return table;
+}
+</pre>
+<p>The table layout can be used for freestyle layouting, and for standard layouts, such as lists and grids. It does not consider the size policy of the child item during size calculation.</p>
+</li>
+<li>
+<p>Compose a grid layout with the <span style="font-family: Courier New,Courier,monospace">create_grid_view()</span> function, and also use the box and table layouts as child items to pack inside a grid.</p>
+
+<pre class="prettyprint">
+static Evas_Object*
+create_grid_view(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *grid, *item;
+
+&nbsp;&nbsp;&nbsp;grid = elm_grid_add(parent);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;// Red background for the grid
+&nbsp;&nbsp;&nbsp;item = create_bg(grid, 255, 0, 0);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 0, 0, 100, 100);
+
+&nbsp;&nbsp;&nbsp;// Add the item to the grid
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item1&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 1, 1, 98, 98);
+
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item2&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 2, 5, 20, 20);
+
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item3&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 23, 5, 76, 94);
+
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item4&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 2, 27, 20, 70);
+
+&nbsp;&nbsp;&nbsp;// Black background for the box view item
+&nbsp;&nbsp;&nbsp;item = create_bg(grid, 40, 40, 40);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 25, 10, 73, 87);
+
+&nbsp;&nbsp;&nbsp;// Add the box view item to the grid
+&nbsp;&nbsp;&nbsp;item = create_box_view(grid);
+&nbsp;&nbsp;&nbsp;evas_object_show(item);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 26, 11, 71, 85);
+
+&nbsp;&nbsp;&nbsp;return grid;
+}
+</pre>
+<p>The grid layout uses free style layouting, and during size evaluation of the child item, it does not take the size policy of the child item into consideration.</p>
+</li>
+</ol>
+
+ <h2 id="layout" name="layout">Using the Base Layout</h2>
+
+<p>When developing a Tizen native application, it is recommended that you base your application layout on the base layout. The base layout supports the indicator and view management. The following figure shows the wireframe and UI component hierarchy of the base layout:</p>
+
+<p class="figure">Figure: Base layout wireframe and UI component hierarchy</p>
+<p align="center"><img alt="Base layout wireframe and UI component hierarchy" src="../../images/base_layout.png"/></p>
+
+<p>The UI components have the following roles:</p>
+
+<ul>
+ <li>Window (<span style="font-family: Courier New,Courier,monospace">Elm_win</span>): Every UI component from Elementary is rendered in a window.</li>
+ <li>Conformant (<span style="font-family: Courier New,Courier,monospace">Elm_Conformant</span>): Conformant supports the indicator area and resizing the application due to rotation or the ISF (keypad).</li>
+ <li>Naviframe (<span style="font-family: Courier New,Courier,monospace">Elm_Naviframe</span>): Naviframe acts as a view manager and optionally provides the application title. The main layout of the application is added to the naviframe&#39;s view area.</li>
+</ul>
+
+
+<h3>Sample Setting Application with the Base Layout</h3>
+
+<p>The mobile <a href="../../../../org.tizen.sampledescriptions/html/mobile_n/ui_setting_sd_mn.htm">Setting</a> application consists of a list to show as a menu. To organize the application, create the application layout with a screen-size list and place the layout into the naviframe&#39;s view area.</p>
+
+<p class="figure">Figure: Setting UI and layout</p>
+<p align="center"><img alt="Settings UI and layout" src="../../images/setting_sd.png"/></p>
+
+<h3>Sample Application Store Application with the Base Layout</h3>
+
+<p>To organize the mobile <a href="../../../../org.tizen.sampledescriptions/html/mobile_n/ui_app_store_sd_mn.htm">Application Store</a> application, add a scroller to the base layout, since the total height of the layout is greater than the screen size, and you therefore need to scroll the screen content up and down. If the layout is larger than the screen, the scroller makes the view itself scrollable.</p>
+
+<p>You can use a list or grid if the same objects are shown repeatedly. In this sample application, however, the various items are shown in a layout.</p>
+
+<p class="figure">Figure: Application Store UI and layout</p>
+<p align="center"><img alt="Application Store UI and layout" src="../../images/application_store_sd.png"/></p>
+
+<h3>Sample Calculator Application with a Customized Layout</h3>
+
+<p>The mobile <a href="../../../../org.tizen.sampledescriptions/html/mobile_n/calculator_sd_mn.htm">Calculator</a> is a good example of an exception to the base layout. The application has no view changes and no application title. As these are the 2 reasons why you must use a Naviframe, you do not need to add a naviframe to the Calculator.</p>
+
+<p>You can organize the application layout with container components. Container components are used for arranging UI components, both basic UI components and other container components.</p>
+
+<p class="figure">Figure: Calculator UI and layout</p>
+<p align="center"><img alt="Calculator UI and layout" src="../../images/calculator_sd.png"/></p>
+
+
+<h3>Sample Email Application with a Customized Layout</h3>
+
+<p>The mobile <a href="../../../../org.tizen.sampledescriptions/html/mobile_n/ui_email_sd_mn.htm">Email</a> application shows information using a list. The main view is the same as in the Setting application, consisting of a screen-size list for displaying emails. However, the Email application has an additional feature called drawer, which is used for displaying the menu with a hierarchy.</p>
+
+<p>To develop the application as a Tizen native application, add a layout on the conformant, and add a naviframe to the layout. This layout has a content area for the drawer and naviframe, and its style name is <span style="font-family: Courier New,Courier,monospace">&quot;layout/drawer/panel&quot;</span>. To use this layout, use the following code:</p>
+
+<pre class="prettyprint">
+layout = elm_layout_add(parent);
+elm_layout_theme_set(layout, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
+</pre>
+
+<p>The style includes parts for locating the drawer and the main view. In the drawer area, you can add a list to indicate the menu. In the main view, you can add a naviframe to organize the view of the layout.</p>
+
+<p class="figure">Figure: Email UI and layout</p>
+<p align="center"><img alt="Email UI and layout" src="../../images/email_sample.png"/></p>
+
+
+ <h2 id="ClockSimple" name="ClockSimple">Creating a Simple Clock View</h2>
+
+<p>The following sample creates a basic clock view that shows the time, current city, and date. This sample demonstrates how to use a box (container component) and label to create a basic layout. The application includes the following UI components:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support for the indicator area</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager component</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container component for layouting other UI components</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic UI component for showing text with a tag</li>
+</ul> 
+
+<p>The following figure illustrates the main view of the simple clock application and its wireframe structure.</p>
+  
+<p class="figure">Figure: Simple clock screen</p>
+<p align="center"><img alt="Simple clock screen" src="../../images/efl_simple_clock.png" /></p>
+
+<p>To create a simple clock view:</p>
+<ol>
+<li>
+<p>Implement the data structure for the application in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file:</p>
+<pre class="prettyprint">
+typedef struct appdata
+{
+&nbsp;&nbsp;&nbsp;// Save the window
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+} 
+appdata_s;
+</pre>
+
+<p>The information in <span style="font-family: Courier New,Courier,monospace">appdata</span> is used for the entire system. In this sample application, the information is related to handling the hardware back key.</p> 
+</li>
+<li>
+<p>Create the basic UI with the <span style="font-family: Courier New,Courier,monospace">app_create()</span> function:</p>
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;app_event_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&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;ad);
+&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;ui_app_main() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function to create a basic layout with a window, conformant, and naviframe. This is the basic layout in the Tizen mobile environment.</p>
+<pre class="prettyprint">
+// Window
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+// Conformant
+conform = elm_conformant_add(ad-&gt;win);
+elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, conform);
+evas_object_show(conform);
+
+// Naviframe
+nf = elm_naviframe_add(conform);
+elm_object_content_set(conform, nf);
+evas_object_show(nf);
+</pre>
+</li>
+<li>
+<p>Create the main layout for the application. In this sample, it contains a box with 3 labels. The labels show the time, city, and date. </p>
+<p>Set the text to the labels. You can set or decorate the text in the labels using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function. You can modify the text size, color and thickness with the <span style="font-family: Courier New,Courier,monospace">&lt;font_size&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;color&gt;</span>, and <span style="font-family: Courier New,Courier,monospace">&lt;b&gt;</span> elements. To add the labels to the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function.</p>
+<pre class="prettyprint">
+// Add the box
+box = elm_box_add(nf);
+// Create a label
+label1 = elm_label_add(box);
+// Set text to the label with a tag
+elm_object_text_set(label1, &quot;&lt;font_size=110&gt;&lt;color=#000000&gt;07:26&lt;/color&gt;&lt;/font_size&gt;&quot;);
+// Add the label to the box
+elm_box_pack_end(box, label1);
+// Change label visibility
+evas_object_show(label1);
+
+// Repeat with other labels
+
+evas_object_show(box);
+</pre>
+</li>
+<li>
+<p>Set the box as a new view. You can also set the title of the application. These operations are handled by the naviframe using the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_item_push()</span> function. The parameters include the title, the name of the UI component added as a new view, and the naviframe style. The basic style is used for a simple view with a normal title.</p>
+<pre class="prettyprint">
+elm_naviframe_item_push(nf, _(&quot;World Clock&quot;), NULL, NULL, box, &quot;basic&quot;);
+</pre>
+  
+  <p>The following figure illustrates the UI component hierarchy of the application.</p>
+
+<p class="figure">Figure: Simple clock components</p>
+<p align="center"><img alt="Simple clock components" src="../../images/efl_simple_clock_tree.png" /></p>
+</li>
+<li>
+<p>Set the hardware key handler. The Tizen mobile environment supports multiple hardware keys, but only the back key is handled in this sample.</p> 
+<pre class="prettyprint">
+eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+</pre> 
+
+<p>After setting the callback function, the <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback is invokes when a back key is pressed. The <span style="font-family: Courier New,Courier,monospace">win_back_cb()</span> callback hides the window.</p> 
+<pre class="prettyprint">
+static void
+win_back_cb(void *data , int type , void *event)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+}
+</pre>
+</li>
+</ol>
+
+ <h2 id="ClockComplex" name="ClockComplex">Creating a Complex Clock View</h2>
+ 
+<p>The following sample creates a complex clock view. The sample demonstrates how to organize a basic layout using boxes. The application includes the following UI components:</p>
+
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support for the indicator area</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager component</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container component for layouting other UI components</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic UI component for showing text with a tag</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_genlist</span>: List component</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_button</span>: Simple push button</li>
+</ul> 
+  
+<p>The following figure illustrates the main view of the complex clock sample application and its wireframe structure.</p>
+  
+<p class="figure">Figure: Complex clock screen</p>
+<p align="center"><img alt="Complex clock screen" src="../../images/efl_complex_clock.png" /></p>
+
+<p>To create a complex clock view:</p>
+<ol>
+<li>
+<p>Implement the data structure for the basic UI in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file:</p>
+<pre class="prettyprint">
+typedef struct appdata
+{
+&nbsp;&nbsp;&nbsp;// Save the window
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+} 
+appdata_s;
+</pre>
+
+<p>The information in <span style="font-family: Courier New,Courier,monospace">appdata</span> is used for the entire system. In this sample application, the information is related to handling the hardware back key.</p> 
+</li>
+<li>
+<p>Create the base UI for the application with the <span style="font-family: Courier New,Courier,monospace">app_create()</span> function:</p>
+
+<pre class="prettyprint">int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;app_event_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&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;ad);
+&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;dlog_print(DLOG_ERROR, LOG_TAG, &quot;ui_app_main() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>The base UI of the application contains the clock, list, and main layout with buttons.</p>
+</li>
+<li>
+<p>Create the clock element. The clock element contains 3 labels. The labels are packed as a single box component, which is part of the main layout.</p> 
+<pre class="prettyprint">
+static Evas_Object *
+create_clock(Evas_Object *nf)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box, *label1, *label2, *label3;
+
+&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(nf);
+
+&nbsp;&nbsp;&nbsp;label1 = elm_label_add(box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(label1, &quot;&lt;font_size=110&gt;&lt;color=#000000&gt;07:26&lt;/color&gt;&lt;/font_size&gt;&quot;);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, label1);
+&nbsp;&nbsp;&nbsp;evas_object_show(label1);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+
+&nbsp;&nbsp;&nbsp;return box;
+}
+</pre>
+</li>
+<li>
+<p>Create the list element. This element contains a list of cities. The UI component used is <span style="font-family: Courier New,Courier,monospace">genlist</span>, which is a complex list able to show information with various styles.</p> 
+<pre class="prettyprint">
+static Evas_Object *
+create_list(Evas_Object *nf)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object* list;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc = NULL;
+&nbsp;&nbsp;&nbsp;int i, num_of_item;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it;
+
+&nbsp;&nbsp;&nbsp;list = elm_genlist_add(nf);
+}
+</pre> 
+</li>
+<li>
+<p>Add a new item class using the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> class. After adding a new class, set a callback function to detect when the item is rendered. </p> 
+<pre class="prettyprint">
+itc = elm_genlist_item_class_new();
+itc-&gt;item_style = &quot;2line.top.4&quot;;
+itc-&gt;func.text_get = gl_text_get_cb;
+itc-&gt;func.content_get = NULL;
+itc-&gt;func.del = NULL;
+</pre> 
+<p>In this application, all the list items are similar and use the same <span style="font-family: Courier New,Courier,monospace">gl_text_get_cb()</span> callback function for setting text, so only 1 item class is created:</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 = data;
+&nbsp;&nbsp;&nbsp;char buf[1024];
+
+&nbsp;&nbsp;&nbsp;if (id-&gt;index == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.text.main.left.top&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;07:26&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.right.top&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;Cardiff&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.left.bottom&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;Wen, Jan 1&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.right.bottom&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;wales&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+</pre> 
+</li>
+<li>
+<p>Append items to the list using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function. In this application, 3 items are added:</p> 
+<pre class="prettyprint">
+num_of_item = 3;
+
+for (i = 0; i &lt; num_of_item; i++) 
+{
+&nbsp;&nbsp;&nbsp;item_data_s *id = calloc(sizeof(item_data_s), 1);
+&nbsp;&nbsp;&nbsp;id-&gt;index = i;
+&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(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;&nbsp;&nbsp;itc,
+&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;id,
+&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,
+&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;ELM_GENLIST_ITEM_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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id);
+&nbsp;&nbsp;&nbsp;id-&gt;item = it;
+}
+</pre>
+</li>
+<li>
+<p>Create the main layout. In the main layout, the other layout elements are merged together and a button is added.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *conform, *nf, *box, *clock, *layout, *rect, *button;
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(conform);
+
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;nf = elm_naviframe_add(conform);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(conform, nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(nf);
+</pre> 
+</li>
+<li>
+<p>Add a box component. The box component is used to organize the main layout. The box is expanded as much as possible to fill the entire view.</p> 
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre> 
+
+<p>The box contains the following elements:</p> 
+
+<ul>
+
+<li><p>The clock element contains 3 labels. The parameter for the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function is 0.1 meaning that the height of the clock box occupies 30% of the available area. </p> 
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;clock = create_clock(nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(clock, EVAS_HINT_EXPAND, 0.3);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(clock, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, clock);
+</pre> 
+</li>
+
+<li><p>The list element is packed into the box. As the <span style="font-family: Courier New,Courier,monospace">genlist</span> elements do not have a determined size, their size depends on the <span style="font-family: Courier New,Courier,monospace">layout</span> parameter.</p> 
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(box);
+&nbsp;&nbsp;&nbsp;elm_layout_theme_set(layout, &quot;layout&quot;, &quot;application&quot;, &quot;default&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, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;rect = create_list(nf);
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, &quot;elm.swallow.content&quot;, rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(layout);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, layout);
+</pre> 
+</li>
+
+<li><p>The button element has a callback function to detect when the button is clicked.</p> 
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;button = elm_button_add(box);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, btn_clicked_cb, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, 0.1);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Terminate&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+}
+</pre> 
+</li>
+</ul>
+
+<p>The following figure illustrates the UI component hierarchy of the application.</p>
+
+<p class="figure">Figure: Complex clock components</p>
+<p align="center"><img alt="Complex clock components" src="../../images/efl_complex_clock_tree.png" /></p>
+</li>
+<li>
+<p>Set the hardware key handler:</p> 
+<pre class="prettyprint">
+eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+</pre> 
+
+<p>After setting the callback function, the <span style="font-family: Courier New,Courier,monospace">win_back_cb()</span> callback is invokes when a back key is pressed. The <span style="font-family: Courier New,Courier,monospace">win_back_cb()</span> callback hides the window.</p> 
+<pre class="prettyprint">
+static void
+win_back_cb(void *data , int type , void *event)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+}
+</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>
diff --git a/org.tizen.ui.practices/html/native/efl/main_loop_n.htm b/org.tizen.ui.practices/html/native/efl/main_loop_n.htm
new file mode 100644
index 0000000..07ce510
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/main_loop_n.htm
@@ -0,0 +1,409 @@
+<!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>Handling the Main Loop</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#start">Starting the Main Loop</a></li>
+			<li><a href="#Timers">Timers</a></li>
+			<li><a href="#Animators">Animators</a></li>
+			<li><a href="#Descriptors_Handling">File Descriptors</a></li>
+			<li><a href="#Threads">Threads</a></li>
+			<li><a href="#Idlers">Idlers</a></li>
+		</ul>
+		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Handling the Main Loop</h1> 
+  
+<p>The EFL is event-driven. This means that the application polls for data, and listens for events to interact with it.</p>
+
+<p>The Ecore library provides the main loop abstraction. It gets data when data is available and sends the events so that costly polling threads are not needed. Ecore manages polling, timers, events, and file descriptors. When there is no ongoing event, the main loop automatically enters an idle mode, minimizing the power consumption. The loop wakes up when needed.</p>
+  
+ <h2 id="start" name="start">Starting the Main Loop</h2>
+
+<p>To start the Ecore main loop and move your application into the running state, call the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function. The Ecore main loop handles all general events, such as touch, mouse, key, and network events.</p>
+
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>  
+
+<p>When your application is running:</p> 
+<ol><li>Create a window and organize the UI components inside the window.</li>
+<li>Create the application logic code to be called when callbacks or timed events occurs (for example, animators for animations and timers for timeouts).</li></ol>
+
+  
+<h2 id="Timers" name="Timers">Timers</h2>
+
+<p>Ecore provides timers, which schedule events that are executed later at a specific time. The event can occur once or several times at specific intervals.</p>
+
+<p>A timer callback prototype looks like the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> callback function. This function receives data from the application, and returns a Boolean value to specify whether it is called again or completed. The following macros are also provided:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>: the function is called again after the timeout.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>: the function is not called again, Ecore destroys automatically everything associated with the timer.</li>
+</ul>
+
+<p>To create and destroy a timer:</p>
+
+<ul>
+<li>To create a timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add()</span> function. The interval, specified in seconds, indicates when the given function is called, and receives the specified data as a parameter. It returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Timer</span> object.
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> function is run after 2 seconds and it receives <span style="font-family: Courier New,Courier,monospace;">my_data</span>. It is renewed while its count variable value is under 5, and stops after that.</p>
+<pre class="prettyprint">
+Eina_Bool my_timed_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;count++;
+
+&nbsp;&nbsp;&nbsp;if (count &lt; 5) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+ecore_timer_add(2.0, my_timed_cb, my_data);
+</pre>
+</li>
+
+<li>To delete the timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_del()</span> function. The timer to delete must still be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the timer is not running, the function cannot be called.</li>
+</ul>
+
+<p>To manage a timer:</p>
+<ul>
+<li>To change the timer&#39;s interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_set()</span> function. The interval is specified in seconds. If set during a timer call, this affects the next interval. Use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_get()</span> function to get the timer&#39;s current interval.</li>
+
+<li>To get the timer&#39;s pending time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_pending_get()</span> function.</li>
+
+<li>To delay the timer&#39;s next occurrence, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_delay()</span> function. The function adds the specified time to the current interval. It does not change the future occurrences&#39; interval. You can also reset the current interval to its full value by using the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_reset()</span> function.</li>
+
+<li>To pause the currently running timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_freeze()</span> function. The remaining time is saved and used again when the timer is resumed with the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_thaw()</span> function.</li>
+
+<li>To query the current value of the defined timer infrastructure precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_get()</span> function. A higher delay means that more timers can be run together. It diminishes the need to use system wake-ups and thus lowers the power consumption.
+<p>To set the precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_set()</span> function. This sets the precision for all timers. For example, there are 2 timers, one that expires in 2.0 seconds and another that expires in 2.1 seconds. If the precision is set to 0.1 seconds, Ecore requests the next expiration to happen in 2.1 seconds and runs both callbacks at once, instead of one at 2.0 seconds and the other one 0.1 seconds later. However, if there is no timer expiring in 2.1 seconds, the timeout is at the minimum interval, 2 seconds.</p></li>
+</ul>
+
+<h2 id="Animators" name="Animators">Animators</h2>
+
+<p>Animators are a specific type of timer, specially designed for on-screen animation purposes:</p>
+
+<ul>
+<li>The time interval is usually known when they are created.</li>
+<li>They are called at each screen refresh and their interval can vary. The interval can depend on the system load, the target power consumption, and other factors. The exact interval is not relevant.</li>
+</ul>
+
+<p>To implement animators, Ecore provides the Ecore animator subsystem.</p>
+
+<h3>Forever-running Animator</h3>
+
+<p>To create an animation that runs for an indefinite time: </p>
+
+<pre class="prettyprint">
+Eina_Bool my_anim_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;count++;
+&nbsp;&nbsp;&nbsp;if (count &lt; 5) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+ecore_animator_add(my_anim_cb, my_data);
+</pre>
+
+<p>This example looks the same as the one using an Ecore timer. The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function takes the callback function and data to pass to it, and returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. The function is called at a system-defined interval until it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> instead of <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>.</p>
+
+<h3>Specific-duration Animator</h3>
+
+<p>An animator callback for an animator running a specific time has a different prototype than the forever running animator.</p>
+
+<p>This callback function receives both data and a position which represents the current time among the full timeline, 0 meaning the beginning of the animation, and 1 meaning the end of the animation, returning <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to abort, or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to continue.</p>
+
+<p>To create and destroy the animator:</p>
+<ul>
+<li>To create the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function. The first parameter specifies the animator duration, the second parameter is the callback function, and the third parameter is the data to pass to the callback. The data parameter is optional.
+<pre class="prettyprint">
+Eina_Bool my_anim_cb(void *data, double position)
+{
+&nbsp;&nbsp;&nbsp;if (position &lt; .5) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+ecore_animator_timeline_add(5., my_anim_cb, my_data);
+</pre>
+
+<p>In this example, the animator is specified to run for five seconds. The function returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> as soon as the position among the timeline passes half of the duration, 2.5 seconds.</p>
+
+<p>Ecore can generate a virtual position from the original one using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map(position, map, v1, v2)</span>. Several maps are available:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear from 0.0 to 1.0.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), and 3.0 is cubed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), and 3.0 is cubed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.0 is a much more pronounced sinusoidal (squared), and 3.0 is cubed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient <span style="font-family: Courier New,Courier,monospace;">* v1</span>, interpolated with the power of <span style="font-family: Courier New,Courier,monospace;">v2</span> curve.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then wobble like a spring to the rest position 1.0, and wobble <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
+</ul>
+
+<p class="figure">Figure: Position maps</p> 
+<p align="center"><img alt="Position maps" src="../../images/pos_map_all.png" /></p> 
+</li>
+
+<li>To destroy the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function. The animator to destroy must be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the animator is not running, the function cannot be called.</li>
+</ul>
+
+<p>To manage the animator:</p>
+<ul>
+<li>To pause the currently running animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function. Note that time continues ticking even if the animator is frozen, and that resuming the animation using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function does not actually resume, if the full runtime has been passed in the meanwhile.</li>
+
+<li>To query Ecore for the interval between 2 animator calls, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</li>
+
+<li>To change the interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set(interval)</span> function. Note that too small a value causes performance and power consumption issues, and too high a value makes the animation jerky.</li>
+</ul>
+
+<h2 id="Descriptors_Handling" name="Descriptors_Handling">File Descriptors</h2>
+
+<p>Ecore provides an infrastructure to monitor file descriptors, so that files do not have to be blocked or polled to read or write on them. Instead, monitor sockets, pipes, or other streams are used to get a file descriptor.</p>
+
+<p>To manage the file descriptors:</p>
+<ul>
+<li>To set a callback, use the <span style="font-family: Courier New,Courier,monospace;">_my_cb_func()</span> function. Its first parameter is the data passed to it (optional), and the second one is the Ecore file descriptor handler. Its return value is, as in most Ecore callbacks, <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>. It tells Ecore whether it wants to be called again or whether its treatment is finished.</li>
+
+<li>To listen to events, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_add()</span> function.</li>
+
+<li>To wait for incoming data (that is, to read data) on the <span style="font-family: Courier New,Courier,monospace;">my_fd</span> file descriptor, passing <span style="font-family: Courier New,Courier,monospace;">my_data</span>:
+
+<pre class="prettyprint">
+Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
+{
+&nbsp;&nbsp;&nbsp;int fd;
+&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
+&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); // This is guaranteed not to block
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+ecore_main_fd_handler_add(my_fd, ECORE_FD_READ, my_fd_cb, my_data, NULL, NULL);
+</pre>
+</li>
+
+<li>To delete a file descriptor handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_del()</span> function. This does not close the file descriptor. Always delete the handlers before closing the actual file descriptors.</li>
+
+<li>To get the handler&#39;s file descriptor, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_fd_get()</span> function.</li>
+
+<li>To select whether a flag is active on a handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_get()</span> function. For example, the handler is set to monitor both <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ</span> and <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_ERROR</span>. The following example finds out whether the function was called because of an error:
+
+<pre class="prettyprint">
+Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
+{
+&nbsp;&nbsp;&nbsp;int fd;
+&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
+&nbsp;&nbsp;&nbsp;if (ecore_main_fd_handler_active_get(handler, ECORE_FD_ERROR) == EINA_TRUE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// We have an error!
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); // This is guaranteed not to block
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+ecore_main_fd_handler_add(my_fd, ECORE_FD_READ | ECORE_FD_ERROR, my_fd_cb, my_data, NULL, NULL);
+</pre>
+</li>
+
+<li>To change the flags the handler is monitoring, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_set()</span> function.</li>
+</ul>
+
+<h2 id="Threads" name="Threads">Threads</h2>
+
+<p>EFL is not entirely thread-safe. This means that if a task is running in another thread and, for example, an Evas object shows the status progress of this task, the object cannot be updated from within the thread. Updating can only be done from the main thread that runs the main loop.</p>
+
+<p>Ecore provides a facility to perform tasks on separate worker threads. It is not a simple wrapper around standard threads provided by the operating system. With Ecore threads, it is easier to dispatch a worker function to perform some heavy tasks and get the result once it completes. It does not block the application UI. It is also easy to cancel and reschedule threads. Several threads can be launched simultaneously, since Ecore schedules them according to the number of processors the system has and the maximum amount of concurrent threads set for the application.</p>
+
+<p>Ecore has 2 kinds of threads:</p>
+<ul>
+<li>Short jobs do not give any kind of information on their status to the parent. They are best used for short computing-intensive snippets of code.</li>
+<li>Feedback jobs give information on their status to the parent. They are best used for longer snippets requiring a feedback loop, such as an ongoing file download.</li>
+</ul>
+
+<p>Ecore creates a pool of worker threads. The exact count is computed from the number of CPUs or cores, or it can be specified by the application itself.</p>
+
+<p>When a worker thread is idle, it picks a job to execute from the waiting list until there is none left. In the following example, there are 2 threads defined by <span style="font-family: Courier New,Courier,monospace;">my_short_job()</span> and <span style="font-family: Courier New,Courier,monospace;">my_feedback_job()</span>. Both threads take 2 parameters: some data passed to them, and the actual thread running. Call a callback when the jobs end, whether they are cancelled (<span style="font-family: Courier New,Courier,monospace;">my_job_cancel()</span>) or end normally (<span style="font-family: Courier New,Courier,monospace;">my_job_end()</span>).</p>
+
+<pre class="prettyprint">
+struct feedback_msg
+{
+&nbsp;&nbsp;&nbsp;int pos;
+};
+
+void my_short_job(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;usleep(200000);
+}
+
+void my_feedback_job(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 100; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usleep(50000); // You can have some real computation done
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct feedback_msg *message = malloc(sizeof(struct feedback_msg));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (message) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message-&gt;pos = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, message);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ecore_thread_check(thread))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+}
+
+void my_feedback_job_notify(void *data, Ecore_Thread *thread, void *msg)
+{
+&nbsp;&nbsp;&nbsp;struct feedback_msg *message = msg;
+&nbsp;&nbsp;&nbsp;free(message);
+}
+
+void my_job_end(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has normally ended.\n&quot;);
+}
+
+void my_job_cancel(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has been cancelled.\n&quot;);
+}
+
+ecore_thread_run(my_short_job, my_job_end, my_job_cancel, my_data);
+ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end, 
+&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;my_job_cancel, my_data, EINA_FALSE);
+</pre>
+
+<p>To manage threads:</p>
+
+<ul>
+<li>To cancel a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_cancel()</span> function. However, note that this is done cooperatively: the thread continues to run until it exists. Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check()</span> function regularly to check whether the thread has been marked for cancellation and exit if <span style="font-family: Courier New,Courier,monospace;">true</span>.</li>
+
+<li>To run threads that are not accounted for in the worker thread pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function with the last parameter set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.
+
+<p>The feedback message a thread sends as notification can be any kind of data. In the above example, it is a simple integer, but it can be as complex as needed.</p>
+</li>
+
+<li>To execute a thread later, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_reschedule()</span> function. This function is added to the end of the pending tasks.</li>
+
+<li>To get the maximum number of concurrent threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function. If needed, set it by using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function, or reset the default value using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.</li>
+
+<li>To query the number of active threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span> function. To query the number of available worker threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function, which is basically the same as the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> - <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span>.</li>
+</ul>
+
+<h2 id="Idlers" name="Idlers">Idlers</h2>
+
+<p>When the rendering is done and all work is finished, the main loop enters its idle state until the next loop. You can get the functions of your application called back before the main loop enters or exits the idle state, or when it is in the idle state. They are respectively called <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Enterer</span>, <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Exiter</span>, and <span style="font-family: Courier New,Courier,monospace;">Ecore_Idler</span>.</p>
+
+<p class="figure">Figure: Idle loop</p> 
+<p align="center"><img alt="Idle loop" src="../../images/idlers.png" /></p> 
+
+<p>The idle enterers, exiters, and idlers all have the same prototype, <span style="font-family: Courier New,Courier,monospace;">my_idler()</span>, which receives data and returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to tell Ecore whether it wants to be called again or is finished.</p>
+
+<p>To manage the idlers:</p>
+<ul>
+<li>To add an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_add()</span> function.</li>
+<li>To delete an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> function.</li>
+
+<li>To add and delete idle exiters, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_del()</span> functions.</li>
+
+<li>To add and delete idle enterers, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_del()</span> functions. The <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_before_add()</span> function is also available, if you want your function to be added at the top of the list so that it is called before the others.</li>
+</ul>
+
+<pre class="prettyprint">
+Eina_Bool my_idle_enterer_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+
+Eina_Bool my_idle_exiter_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+
+Eina_Bool my_idler(void *data)
+{
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+
+ecore_idle_enterer_add(my_idle_enterer_cb, my_data);
+ecore_idle_exiter_add(my_idle_exiter_cb, my_data);
+ecore_idler_add(my_idler_cb, my_data);
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/menu_tutorial_mn.htm b/org.tizen.ui.practices/html/native/efl/menu_tutorial_mn.htm
new file mode 100644
index 0000000..7287e25
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/menu_tutorial_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>Creating Mobile Menus</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#structure">Defining the Menu Application Structure</a></li>
+			<li><a href="#theme">Defining the Menus in the Application Theme</a></li>
+			<li><a href="#basic_ui">Creating the Menu Bar and Views</a></li>
+			<li><a href="#hidden_menu">Creating a Hidden Menu</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Mobile Menus</h1>
+
+  
+<p>This tutorial shows how to add menus to the application. The example code creates an application with 3 views, which can be accessed from a menu bar at the top of the application window. The application also has a hidden menu that appears only when the menu button is pressed.</p>
+
+<p>This feature is supported in mobile applications only.</p>
+
+		
+  <h2 id="structure" name="structure">Defining the Menu Application Structure</h2>
+
+ <p>To define the application structure:</p>
+ <ol>
+ <li>
+<p>Define the main structure of the application:</p>
+<pre class="prettyprint">
+typedef struct 
+appdata
+{
+&nbsp;&nbsp;&nbsp;Evas_Object* win; // Main window
+&nbsp;&nbsp;&nbsp;Evas_Object* layout; // Edje layout
+&nbsp;&nbsp;&nbsp;Evas_Object* conform; // Conform
+&nbsp;&nbsp;&nbsp;Evas_Object *nf; // Naviframe to handle the views
+&nbsp;&nbsp;&nbsp;appmenu_s *menu; // Main menu
+&nbsp;&nbsp;&nbsp;appmenu_s *sidemenu; // Side menu
+&nbsp;&nbsp;&nbsp;mainview_s *main_view; // Main view (dayselector)
+&nbsp;&nbsp;&nbsp;calview_s *cal_view; // Calendar view
+&nbsp;&nbsp;&nbsp;dateview_s *date_view; // Date and time view
+&nbsp;&nbsp;&nbsp;settview_s *settings_view; // Settings view
+&nbsp;&nbsp;&nbsp;Eina_Bool sdmenu_up; // Boolean variable to keep the side menu status
+} appdata_s;
+</pre>
+<p>This structure contains some specific variables for the views and the menus.</p>
+</li>
+<li>
+<p>Define the main view by using the <span style="font-family: Courier New,Courier,monospace">mainview</span> structure. It is composed of a <span style="font-family: Courier New,Courier,monospace">box</span> (the main container), a <span style="font-family: Courier New,Courier,monospace">dayselector</span>, an <span style="font-family: Courier New,Courier,monospace">img</span> image, and an <span style="font-family: Courier New,Courier,monospace">lb_main</span> label.</p>
+ <pre class="prettyprint">
+typedef struct 
+mainview
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box; // Main container of the view
+&nbsp;&nbsp;&nbsp;Evas_Object *colorselector; // Color selector
+&nbsp;&nbsp;&nbsp;Evas_Object *img; // Image 
+&nbsp;&nbsp;&nbsp;Evas_Object *lb_day; // Label
+} mainview_s;
+</pre>
+</li>
+<li>
+<p>Define the date view. The date view is very similar to the main view. It contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">datetime</span> component and an <span style="font-family: Courier New,Courier,monospace">lb_date</span> label.</p>
+<pre class="prettyprint">
+typedef struct 
+dateview
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box; // Main container of the view 
+&nbsp;&nbsp;&nbsp;Evas_Object *datetime; // Datetime component 
+&nbsp;&nbsp;&nbsp;Evas_Object *lb_date; // Label 
+} dateview_s;
+</pre>
+</li>
+<li>
+<p>Define the calendar view. It contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">calendar</span> and an <span style="font-family: Courier New,Courier,monospace">lb_cal</span> label.</p>
+<pre class="prettyprint">
+typedef struct 
+calview
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box; // Main container of the view 
+&nbsp;&nbsp;&nbsp;Evas_Object *calendar; // Calendar component  
+&nbsp;&nbsp;&nbsp;Evas_Object *lb_cal; // Label component
+} calview_s;
+</pre>
+</li>
+<li>
+<p>Define the toolbar and submenu items. The main menu is fixed and visible, and the side menu is hidden on application start. These menus are represented by the <span style="font-family: Courier New,Courier,monospace">appmenu</span> structure.</p>
+ <pre class="prettyprint">
+typedef struct 
+appmenu
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *tb; // Toolbar
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *submenu; // Submenu item
+} appmenu_s;
+</pre>
+</li>
+</ol>
+
+ <h2 id="theme" name="theme">Defining the Menus in the Application Theme</h2>
+
+<p>This tutorial uses the <strong>Basic EDC UI Application</strong> template, which defines the application theme in an EDC file.</p>
+<p>The following figure shows the application theme structure.</p>
+
+<p class="figure">Figure: Theme structure</p> 
+<p align="center"><img alt="Theme structure" src="../../images/menu_skeleton.png" /></p>
+<p>The window, conformant, and layout are set by the <strong>Basic EDC UI Application</strong> template. You only need to set up the containers for the UI components and views.</p>
+
+<p>To define the application theme for the menus and views:</p>
+<ol>
+<li>
+<p>To define the main menu at the top of the screen, create the <span style="font-family: Courier New,Courier,monospace">menu/main</span> <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part in the <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
+<p>This part has 2 descriptions, one for the real menu position at the top named <span style="font-family: Courier New,Courier,monospace">up</span>, and another that is placed out of the screen as the default position.</p>
+ <pre class="prettyprint">
+part
+{
+&nbsp;&nbsp;&nbsp;name: &quot;menu/main&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.01;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.18;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;}
+} // End menu/main
+</pre>
+</li>
+<li>
+<p>Create the <span style="font-family: Courier New,Courier,monospace">animation,menu_main</span> program to change the main menu state at the application start. The state is changed from <span style="font-family: Courier New,Courier,monospace">default</span> to <span style="font-family: Courier New,Courier,monospace">up</span>, and linearly moves the menu from its out-of-the-screen position to the top of the screen.</p>
+ <pre class="prettyprint">
+program
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_main&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/main&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.5;
+} // END animation,menu_main
+</pre>
+</li>
+<li>
+<p>Create another <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part as a container for the views. This part also has 2 descriptions for animation purposes.</p>
+ <pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;view/main&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;menu/main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255; 
+&nbsp;&nbsp;&nbsp;}
+} // END view/main 
+</pre>
+</li>
+<li>
+<p>Create the <span style="font-family: Courier New,Courier,monospace">animation,view_main</span> program to move the view along the main menu:</p>
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,view_main&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;view/main&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+} // END animation,view_main
+</pre>
+</li>
+<li>
+<p>Create the <span style="font-family: Courier New,Courier,monospace">menu/side</span> side menu container. In the <span style="font-family: Courier New,Courier,monospace">default</span> state, the side menu is hidden, and in the <span style="font-family: Courier New,Courier,monospace">up</span> state, it is shown on the left of the screen.</p>
+ <pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: -0.3 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: -0.3 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255; 
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.01;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.3 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;}
+} // END menu/side
+</pre>
+</li>
+<li>
+<p>You can show the side menu by clicking the menu button.</p> 
+<p>Create the <span style="font-family: Courier New,Courier,monospace">animation,menu_side</span> program to run the related animation. This program runs when it receives a <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> event from the <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source, and changes the side menu state to <span style="font-family: Courier New,Courier,monospace">up</span>, making the menu visible.</p>
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;show,sidemenu&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+} // END animation,menu_side
+</pre>
+</li>
+<li>
+<p>You can hide the side menu with another menu button click.</p>
+<p>Create the <span style="font-family: Courier New,Courier,monospace">animation,menu_side,hide</span> program that starts when it receives a <span style="font-family: Courier New,Courier,monospace">hide,sidemenu</span> signal from the <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source. It changes the side menu state back to <span style="font-family: Courier New,Courier,monospace">default</span>, hiding the menu.</p>
+ <pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side,hide&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;hide,sidemenu&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+} // END animation,menu_side,hide
+</pre>
+</li>
+</ol>
+
+ <h2 id="basic_ui" name="basic_ui">Creating the Menu Bar and Views</h2>
+
+<p>The naviframe handles views, which in this example are implemented as box containers. For more information, see the <a href="ui_containers_n.htm">UI Container</a> guide.</p>
+<p>The following figure shows the structure of the <span style="font-family: Courier New,Courier,monospace">view/main</span> container.</p>
+
+<p class="figure">Figure: Main view</p> 
+<p align="center"><img alt="Main view" src="../../images/view_main.png" /></p>
+
+
+<p>To create the menu bar and views for the UI:</p>
+<ol>
+<li>
+<p>Create the naviframe with the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function and allocate the memory to handle the views of the application:</p>
+ <pre class="prettyprint">
+// Memory allocation
+ad-&gt;main_view = calloc(1, sizeof(mainview_s)); // Allocate memory for the main view 
+ad-&gt;cal_view = calloc(1, sizeof(calview_s)); // Allocate memory for the calendar view 
+ad-&gt;date_view = calloc(1, sizeof(dateview_s)); // Allocate memory for the date view 
+ad-&gt;settings_view = calloc(1, sizeof(settview_s)); // Allocate memory for the settings view
+// END of memory allocation
+</pre>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">app_terminate()</span> function to free the memory for the views and menus:</p>
+ <pre class="prettyprint">
+app_terminate(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Release all resources
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;free(ad-&gt;menu);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;sidemenu);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;main_view);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;cal_view);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;settings_view);
+} // END of app_terminate
+</pre>
+</li>
+<li>
+<p>Create the main menu after most of the containers are created:</p>
+<ol type="a">
+<li>
+<p>Create a new <span style="font-family: Courier New,Courier,monospace">_build_main_menu()</span> function that takes <span style="font-family: Courier New,Courier,monospace">appdata_s</span> as a parameter. This function is called by the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function.</p>
+ <pre class="prettyprint">
+static void 
+_build_main_menu(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Memory allocation for the main menu function
+&nbsp;&nbsp;&nbsp;appmenu_s *menu = calloc(1, sizeof(appmenu_s));
+&nbsp;&nbsp;&nbsp;// Put the main menu in the application data
+&nbsp;&nbsp;&nbsp;ad-&gt;menu = menu;
+</pre>
+</li>
+
+<li>
+<p>Create a toolbar with the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_add()</span> function. This toolbar is a child of the main window. Set <span style="font-family: Courier New,Courier,monospace">ad-&gt;win</span> as its parameter.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Create the main menu toolbar
+&nbsp;&nbsp;&nbsp;menu-&gt;tb = elm_toolbar_add(ad-&gt;win);
+</pre>
+</li>
+<li>
+<p>Set up the behavior of the toolbar.</p>
+<p>The display mode is set by using the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_shrink_mode_set()</span> function. The toolbar does not scroll under the <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_NONE</span> mode, but it enforces a minimum size, so that all the items fit inside it. It does not scroll or show the items that do not fit under the <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_HIDE</span> mode. Finally, it scrolls under the <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_SCROLL</span> mode, and it creates a button to aggregate items which did not fit with the <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_MENU</span> mode.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Set the &quot;Menu&quot; Toolbar properties
+&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(menu-&gt;tb, ELM_TOOLBAR_SHRINK_NONE);
+</pre>
+<p>In this example, there is only a limited number of menu elements and the <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span> mode is used.</p></li>
+<li>
+<p>Expand the transverse length of the item according to the transverse length of the toolbar, giving <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as second parameter of the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_transverse_expanded_set()</span> function.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(menu-&gt;tb, EINA_TRUE);
+</pre>
+</li>
+<li>
+<p>Make the menu items have the same size by setting <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> to the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_homogeneous_set()</span> function. This activates the homogeneous mode of the toolbar.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;elm_toolbar_homogeneous_set(menu-&gt;tb, EINA_FALSE);
+</pre>
+</li>
+<li>
+<p>Add menu items to the toolbar using the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> functions. It takes 5 parameters:</p>
+<ul>
+<li>Target toolbar</li>
+<li>Icon path for the menu item</li>
+<li>Item label (also used in the callback function)</li>
+<li>Function to call when the item is clicked</li>
+<li>Data to associate with the item for related callbacks.</li>
+</ul>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Add menu items to the main menu toolbar
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/home.png&quot;, &quot;Home&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/calendar.png&quot;, &quot;Calendar&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/clock.png&quot;, &quot;Date&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/settings.png&quot;, &quot;Settings&quot;, _menu_item_selected_cb, ad);
+</pre>
+<p>For the icons, add some images in the <span style="font-family: Courier New,Courier,monospace">res/images</span>  application resource directory, and define a macro to contain this path in the application <span style="font-family: Courier New,Courier,monospace">.h</span> file. In this example, it is <span style="font-family: Courier New,Courier,monospace">inc/menututorial.h</span>.</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">PACKAGE</span> macro to setup this <span style="font-family: Courier New,Courier,monospace">ICON_DIR</span> macro. This way you can add items to the toolbar using icon images placed in the resource directory of the application.</p>
+
+<pre class="prettyprint">
+#define ICON_DIR &quot;/opt/usr/apps/&quot;PACKAGE&quot;/res/images&quot;
+</pre>
+</li>
+<li>Show the toolbar and add the UI component to the main menu container:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Show the UI component
+&nbsp;&nbsp;&nbsp;evas_object_show(menu-&gt;tb);
+
+&nbsp;&nbsp;&nbsp;// Add the UI component to the &quot;menu/main&quot; SWALLOW container
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;menu/main&quot;, menu-&gt;tb);
+
+&nbsp;&nbsp;&nbsp;// Set the default view 
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(elm_toolbar_first_item_get(menu-&gt;tb), EINA_TRUE);
+}
+</pre>
+</li></ol>
+</li>
+<li>
+<p>Enable switching between views based on the menu item selection.</p>
+
+<p>When a menu item is selected, the <span style="font-family: Courier New,Courier,monospace">_menu_item_selected_cb()</span> callback is triggered. In this example, this same callback is used for all menu items. However, you can also create a separate callback for each item.</p> 
+
+<p>The callback must follow the <span style="font-family: Courier New,Courier,monospace">Evas_Smart_Cb</span> prototype that takes the application data, Evas Object, and event info as parameters. </p>
+
+<p>In this example, the callback creates the requested view by recovering the calling object text to call the correct view creation function. The available views are Calendar, Date, Settings, and Home (main view). The view names are stored as the menu item labels, to be able to compare the returned string with the view names. When the name matches, the view is built by calling the correct function. Store the view in the application data and set up a new content to the naviframe before exiting.</p>
+
+<p>The naviframe component destroys its content on each call of the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function. That is why the content must be built again on each item click.</p>
+<pre class="prettyprint">
+it = ev;
+
+// Get the menu item text
+str = elm_object_item_text_get(it);
+
+// Compare with the possible view names
+if (!strcmp(str, &quot;Calendar&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Calendar View&quot;
+&nbsp;&nbsp;&nbsp;_build_calendar_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;cal_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Date&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Date View&quot;
+&nbsp;&nbsp;&nbsp;_build_date_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;date_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Home&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Home or main View&quot;
+&nbsp;&nbsp;&nbsp;_build_main_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;main_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Settings&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Settings&quot; view
+&nbsp;&nbsp;&nbsp;_build_settings_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;settings_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Clock&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Date View&quot; 
+&nbsp;&nbsp;&nbsp;_build_date_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;date_view-&gt;box;
+}
+
+// Show the view in the naviframe 
+elm_object_content_set(ad-&gt;nf, view);
+</pre>
+</li>
+<li>
+<p>Define the functions which create the views. Each function creates a view and stores it in the application data.</p>
+ <pre class="prettyprint">
+static void 
+_build_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;mainview_s *view = ad-&gt;main_view;
+&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
+
+&nbsp;&nbsp;&nbsp;// Main box
+&nbsp;&nbsp;&nbsp;view-&gt;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(view-&gt;box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(view-&gt;box, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;view-&gt;colorselector = elm_colorselector_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_colorselector_mode_set(view-&gt;colorselector, ELM_COLORSELECTOR_PALETTE);
+&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;colorselector);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;colorselector);
+
+&nbsp;&nbsp;&nbsp;view-&gt;img = elm_image_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;img, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(view-&gt;img, 0.5, 0.5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(view-&gt;img, 256, 256);
+&nbsp;&nbsp;&nbsp;;snprintf(buf, sizeof(buf), &quot;%s/%s&quot;, ICON_DIR, &quot;tizen-logo.png&quot;);
+&nbsp;&nbsp;&nbsp;if (!elm_image_file_set(view-&gt;img, buf, NULL))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_day, &quot;Problem loading image&quot;);
+&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;img);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;img);
+
+&nbsp;&nbsp;&nbsp;view-&gt;lb_day = elm_label_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_day, &quot;Main view&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;lb_day, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(view-&gt;box, view-&gt;lb_day);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;lb_day);
+}
+
+static void
+_build_calendar_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;calview_s *view = ad-&gt;cal_view;
+
+&nbsp;&nbsp;&nbsp;// Main box image = elm_image_add(win);
+
+&nbsp;&nbsp;&nbsp;view-&gt;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(view-&gt;box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(view-&gt;box, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;view-&gt;calendar = elm_image_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;calendar, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(view-&gt;calendar, 0.5, 0.5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(view-&gt;calendar, 256, 256);
+&nbsp;&nbsp;&nbsp;elm_image_file_set(view-&gt;calendar, ICON_DIR&quot;/calendar.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;calendar);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;calendar);
+
+&nbsp;&nbsp;&nbsp;view-&gt;lb_cal = elm_label_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_cal, &quot;The calendar view&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;lb_cal, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(view-&gt;box, view-&gt;lb_cal);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;lb_cal);
+} // End of_build_calendar_view
+</pre>
+
+</li>
+</ol>
+
+ <h2 id="hidden_menu" name="hidden_menu">Creating a Hidden Menu</h2>
+
+<p>To create a hidden menu:</p>
+<ol>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">_build_side_menu()</span> function to create the side menu toolbar and add some items to it. This function takes the application data as parameter and stores the built menu in the <span style="font-family: Courier New,Courier,monospace">sidemenu</span> attribute of the structure.</p>
+ <pre class="prettyprint">
+static void 
+_build_side_menu(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;appmenu_s *sidemenu = calloc(1, sizeof(appmenu_s));
+&nbsp;&nbsp;&nbsp;ad-&gt;sidemenu = sidemenu;
+
+&nbsp;&nbsp;&nbsp;sidemenu-&gt;tb = elm_toolbar_add(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(sidemenu-&gt;tb, ELM_TOOLBAR_SHRINK_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(sidemenu-&gt;tb, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/home.png&quot;, &quot;Home&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/account.png&quot;, &quot;Account&quot;, NULL, NULL);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/contacts.png&quot;, &quot;Friends&quot;, NULL, NULL);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/clock.png&quot;, &quot;Clock&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_homogeneous_set(sidemenu-&gt;tb, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;evas_object_show(sidemenu-&gt;tb);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;menu/side&quot;, sidemenu-&gt;tb);
+&nbsp;&nbsp;&nbsp;elm_toolbar_horizontal_set(sidemenu-&gt;tb, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(elm_toolbar_first_item_get(sidemenu-&gt;tb), EINA_TRUE);
+}
+</pre>
+<p>The side menu is created, but hidden by default. To make it appear, the menu (<strong>Home</strong>) button must be clicked.</p>
+</li>
+<li>
+<p>Create the hidden menu functionality.</p>
+<p>By default, the <strong>Basic EDC UI Application</strong> template creates a <span style="font-family: Courier New,Courier,monospace">keydown_cb()</span> function to handle the key down events. In the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, an <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function is called with the <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> macro and with the <span style="font-family: Courier New,Courier,monospace">keydown_cb()</span> function as a callback. In this callback, the <span style="font-family: Courier New,Courier,monospace">KEY_END</span> event puts the window in the lower state.</p>
+ <pre class="prettyprint">
+keydown_cb(void *data , int type , void *event)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Ecore_Event_Key *ev = event;
+&nbsp;&nbsp;&nbsp;if (!strcmp(ev-&gt;keyname, KEY_END)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Let window go to hidden state
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_DONE;
+}
+</pre>
+</li>
+<li>
+<p>Add the menu button key press handling to the <span style="font-family: Courier New,Courier,monospace">keydown_cb()</span> callback. The key name of the menu button is <span style="font-family: Courier New,Courier,monospace">XF86Send</span>. The menu is shown on the first press and hidden on the second press. Use <span style="font-family: Courier New,Courier,monospace">Eina_Bool sdmenu_up</span> on the application data to store the menu status during the application execution. If <span style="font-family: Courier New,Courier,monospace">ad-&gt;sdmenu_up</span> is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the menu is visible.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">animation,menu_side</span> program is defined in the <span style="font-family: Courier New,Courier,monospace">.edc</span> theme file. This program is run when the <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> signal is received from the <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source. In addition, the program that hides the side menu is defined and is called <span style="font-family: Courier New,Courier,monospace">animation,menu_side,hide</span>, starting on the <span style="font-family: Courier New,Courier,monospace">hide,sidemenu</span> signal.</p>
+
+<p>Test the side menu status by sending the signals using the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_emit()</span> function.</p>
+ <pre class="prettyprint">
+if (!strcmp(ev-&gt;keyname, &quot;XF86Send&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;if (ad-&gt;sdmenu_up == EINA_TRUE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If the menu is visible send a &quot;hide,sidemenu&quot; signal
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Store the new menu status (hidden)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sdmenu_up = EINA_FALSE;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>Now the menu appears and disappears when the menu button is pressed.</p>
+</li>
+<li>
+<p>When the user clicks the first side menu button (<strong>Home</strong>), the menu disappears:</p>
+ <pre class="prettyprint">
+// Hide the side menu if it&#39;s visible
+if (ad-&gt;sdmenu_up == EINA_TRUE) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sdmenu_up = EINA_FALSE;
+}
+</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>
diff --git a/org.tizen.ui.practices/html/native/efl/multiple_screens_n.htm b/org.tizen.ui.practices/html/native/efl/multiple_screens_n.htm
new file mode 100644
index 0000000..04b31e6
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/multiple_screens_n.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>Multiple Screen Support</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">	
+			<li><a href="#key_concepts">Key Concepts</a></li>
+			<li><a href="#apply">Applying the Base Scale</a></li>
+			<li><a href="#without">Scaling without the Base Scale</a></li>			
+		</ul>
+	<p class="toc-title">Related Info</p>
+		<ul class="toc">	
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Multiple Screen Support</h1> 
+
+  <p>Tizen is available in various devices which support different screen sizes and resolutions. When developing Tizen applications, you must take this into account if you want your application to function well in various device models.</p> 
+  <p>Before <a href="#apply">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key_concepts">key concepts of multiple screen support</a>.</p> 
+  
+   <h2 id="key_concepts" name="key_concepts">Key Concepts</h2> 
+  <p>Before building a native application for multiple resolutions using Tizen native UI framework, make sure you are familiar with the following concepts:</p> 
+  <ul>
+  <li><a href="#multi">Multi-scale</a></li>
+  <li><a href="#base">Base scale</a></li>
+  </ul>
+
+  <h3 id="multi" name="multi">Multi-scale in Tizen Native UI Framework</h3> 
+  <p>Tizen native UI framework supports multiple scaling. If the application is implemented considering scalability, it is enough to change the <span style="font-family: Courier New,Courier,monospace;">elm_scale</span> value in different device environments without modifying the application code.</p> 
+  
+  <p>Scale 1.0 in Tizen native UI framework means that the application is displayed in a set size and is not scaled. Scale 1.0 is used in a display environment, such as a desktop. In the desktop environment, the monitor has a resolution between 1280 x 800 and 1920 x 1080, with a size between 20 and 27 inch, and the dpi between 80 and 100.</p>
+  
+  <p>If an application is scaled up or down after implementing it in a desktop environment, it can be used in another device without modifying the code. Each device has a proper scale value for adjusting the application size. Edje, which handles layout and themes in Tizen native UI framework, gets the size of an object by multiplying the size specified by an application using the scale value.</p> 
+  
+  <p>The following figure illustrates a 50 px wide object in a 1280 px wide monitor. If the same object is displayed with not scaling in mobile environment, it looks very small. To show the object in mobile environment in the similar size as in the monitor, define the scale is 2.0, so that the object size is 100 px instead of 50 px.</p>
+  
+  <p class="figure">Figure: Scaling from desktop to mobile</p> 
+  <p align="center"><img alt="Scaling from desktop to mobile" src="../../images/scaling.png" /> </p> 
+  
+  <h3 id="base" name="base">Base Scale</h3> 
+  <p>The object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of this application to show the application in a proper size in other devices. However, the scaling must be based on scale 1.0 or, if the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the &quot;base scale&quot;. </p> 
+ 
+  <p>The size of a scalable object is multiplied with the device scale value, as illustrated in the following figure. If the scalable object (on the left) with the size 10 is created in a device with scale 1.0, the size of the object is 20 in a device with scale 2.0, and 40 in a device with scale 4.0.</p>
+  
+  <p class="figure">Figure: Base scale</p> 
+  <p align="center"><img alt="Base scale" src="../../images/base_scale.png" /> </p> 
+  
+  <p>The middle object has a base scale 2.0. The following example shows its scaling in a device with scale 4.0:</p>
+  
+  <table>
+<tbody>
+<tr>
+ <td>Scale = Device scale (information in the target) / Base scale (information in the application)
+<p>For example: 2.0 = 4.0 / 2.0</p>
+</td>
+</tr>
+</tbody>
+</table>
+ 
+  
+  <h2 id="apply" name="apply">Applying the Base Scale</h2> 
+  <p>To create an application that supports multiple screen sizes, you must learn how to set the base scale in:</p> 
+  <ul> 
+   <li><a href="#set_edc">EDC</a></li> 
+   <li><a href="#set_c">C code</a></li> 
+  </ul> 
+  
+  <h3 id="calc_base" name="calc_base">Calculating the Base Scale</h3>
+
+<p>To get the base scale value of your own display, you must know the DPI of the display. Based on the display DPI, you can calculate the base scale, since it is basically proportional to the display DPI with the following formula:</p>
+
+<pre class="prettyprint">
+base_scale = (DPI / 90) * profile_factor</pre>
+
+<p>The profile factor is the value for fitting the object size as a profile. The distance between the user eye and the display differs for each profile. This means that the object size must be different if the device display is changed.</p>
+
+<p>The following table lists the profile factors for various profiles.</p>
+
+<table>
+<caption>Table: Profile factors</caption>
+<tbody>
+<tr>
+ <th>Profile</th>
+ <th>Profile factor</th>
+</tr>
+ <tr>
+ <td>Wearable</td>
+ <td>0.4</td>
+ </tr>
+  <tr>
+ <td>Mobile - small screen (until 4.4 inch)</td>
+  <td>0.7</td>
+ </tr>
+ <tr>
+ <td>Mobile - normal screen (4.5 inch and upwards)</td>
+ <td>0.8</td>
+  </tr> 
+
+ <tr>
+ <td>Desktop</td>
+ <td>1.0</td>
+ </tr>
+ </tbody></table>
+
+<p>For example, if your display has 233 dpi and the platform uses the mobile profile (small screen), the base scale is calculated like this:</p>
+<pre class="prettyprint">
+1.8 = (233 / 90) * 0.7</pre>
+
+<p>The base scale of the device is 1.8. If the application is made in the environment using 233 dpi and mobile profile, its base scale must be set to 1.8. For a desktop, the DPI is 90, and its base scale is 1.0.</p>
+
+ 
+<h3 id="set_edc" name="set_edc">Setting the Base Scale in EDC</h3> 
+  <p>The application must specify the scale its base scale. The edje objects are scaled properly if the base scale is set in the collection of the edc file, as in the following example:</p> 
+  
+  <table class="note"><tbody>
+<tr>
+<th class="note">Note</th> 
+      </tr>
+<tr>
+<td class="note">The base scale for WVGA is 1.8, and for HD application, 2.4.</td> 
+      </tr>
+</tbody></table>
+<pre class="prettyprint">collections 
+{
+&nbsp;&nbsp;&nbsp;base_scale: 1.8; // This value is for WVGA application
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;box&quot;; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+  <h3 id="set_c" name="set_c">Setting the Base Scale in C</h3> 
+  <p>The size of the object must be specified in EDC. However, sometimes it is better for an application to the object size in a C file. If the size is defined with no scaling in the C file, the application is displayed in the same size even if the scale changes. To avoid this, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro, as in the following example:</p> 
+
+<pre class="prettyprint">#define ELM_SCALE_SIZE(x) x / elm_app_base_scale_get() * elm_config_scale_get()</pre>
+
+  <p>in the definition, the size (<span style="font-family: Courier New,Courier,monospace;">x</span>) is changed to a size based on 1.0 (<span style="font-family: Courier New,Courier,monospace;">x/elm_app_base_scale_get()</span>) and it is multiplied with the scale of the current target (<span style="font-family: Courier New,Courier,monospace;">elm_config_scale_get()</span>).</p>
+  
+  <p>Set the base scale using the <span style="font-family: Courier New,Courier,monospace;">elm_app_base_scale_set()</span> function:</p>
+  
+<pre class="prettyprint">int app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;elm_app_base_scale_set(1.8); // This value is for WVGA application
+}
+</pre> 
+  <p>After setting the base scale, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro to set the size of an object in the application:</p> 
+
+<pre class="prettyprint">evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
+evas_object_resize(object, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
+</pre> 
+ 
+  <p>You can use <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro in any API related with setting objects sizes in Tizen native applications.</p> 
+  
+  <h2 id="without" name="without">Scaling without the Base Scale</h2>   
+
+<p>In Tizen, each device has a scale value in proportion to the display. If scaling is enabled, the objects are drawn on the display by multiplying with the user-defined object size and the device scale. If the base scale is set, the objects are drawn by dividing the user-defined object size with the base scale and multiplying it by the device scale.</p>
+
+<p>If you use the scale feature without setting the base scale, the result is the same as if you set the base scale to 1.0. Then you do not need to care about the base scale variables, because the pixels roll like a virtual pixel. For example, if you set 1 pixel in 129 dpi without setting the base scale value, the 1 pixel before scaling is equivalent to 1 real physical pixel after scaling. In case of 233 dpi, it is the same with 1.8 pixels after scaling. </p>
+
+<p>Always consider the pixel before scaling when defining the application UI, in order to ensure a proper UI display on the screen with a diversity of densities.</p>
+
+<pre class="prettyprint">int app_create(void *data)
+[ Conversion Formula ]
+Real physical pixel = (a pixel before scaling) x (dpi / 90) x 0.7
+</pre> 
+<p>Where  90 is the default DPI on a desktop and 0.7 is the mobile profile factor.</p>
+
+<p>The following table shows some examples.</p>
+
+<table>
+<caption>Table: Pixel conversions</caption>
+<tbody>
+<tr>
+ <th></th>
+ <th>Base</th>
+ <th>Low-density device (such as WVGA, 4 inch)</th>
+ <th>High-density device (such as HD, 5 inch)</th>
+</tr>
+ <tr>
+ <td>DPI</td>
+ <td>129</td>
+ <td>233</td>
+ <td>294</td> 
+ </tr>
+ <tr>
+ <td>A pixel before scaling</td>
+ <td>100</td>
+ <td>100</td>
+ <td>100</td> 
+ </tr>
+ <tr>
+ <td>Real physical pixel</td>
+ <td>100</td>
+ <td>180</td>
+ <td>260</td> 
+ </tr>
+ <tr>
+ <td>Actual base scale</td>
+ <td>1.0</td>
+ <td>1.8</td>
+ <td>2.6</td> 
+ </tr> 
+ </tbody></table>
+
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/multipoint_touch_n.htm b/org.tizen.ui.practices/html/native/efl/multipoint_touch_n.htm
new file mode 100644
index 0000000..9289034
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/multipoint_touch_n.htm
@@ -0,0 +1,266 @@
+<!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>Tracking Multi-point Touch Events</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#init">Initializing Multi-point Touch</a></li>
+			<li><a href="#canvas">Handling the Canvas</a></li>
+			<li><a href="#touch">Managing Touch Events</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>				
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>			
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Tracking Multi-point Touch Events</h1>
+
+  
+<p>This tutorial demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> to paint on a canvas and track touch events.</p>
+
+ <h2 id="init" name="init">Initializing Multi-point Touch</h2>
+
+<p>This sample is a fully functional application able to track multiple simultaneous clicks. For every click, a black rectangle spot is drawn on the screen. This way it is easy to test the multi-point touch operation with the application.</p>
+
+<p>Initialization is implemented in the <span style="font-family: Courier New,Courier,monospace">multitouch.c</span> file.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">appdata</span> structure includes <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> pointers, a list, and a Boolean flag.</p>
+<pre class="prettyprint">
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *conform;
+&nbsp;&nbsp;&nbsp;Evas_Object *nf;
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+&nbsp;&nbsp;&nbsp;Evas_Object *box;
+&nbsp;&nbsp;&nbsp;Evas_Object *rect;
+&nbsp;&nbsp;&nbsp;Evas_Object *label;
+
+&nbsp;&nbsp;&nbsp;// List of mouse spots
+&nbsp;&nbsp;&nbsp;Eina_List *spots;
+
+&nbsp;&nbsp;&nbsp;// Flag for checking the mouse down event
+&nbsp;&nbsp;&nbsp;Eina_Bool down; 
+} 
+appdata_s;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">main()</span> function initializes event callbacks and calls the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function to start the EFL application.</p>
+<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;ad);
+&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;return ret;
+}
+</pre>
+
+
+<p>The following figure illustrates the Multi-point Touch.</p>
+
+  <p class="figure">Figure: Multi-point Touch screens</p> 
+  <p align="center"><img alt="Multi-point Touch screens" src="../../images/multipoint_touch.png" /></p> 
+
+ <h2 id="canvas" name="canvas">Handling the Canvas</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates base GUI elements including Naviframe and the Naviframe button. Naviframe includes each view screen as an item, which in turn includes the title and a button which clears spots when clicked.</p> 
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
+
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
+
+&nbsp;&nbsp;&nbsp;// Button
+&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Clear&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, button_clicked_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Create main view
+&nbsp;&nbsp;&nbsp;ad-&gt;box = create_main_view(ad);
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;Multi-point Touch&quot;,
+&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, ad-&gt;box, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_right_btn&quot;, ad-&gt;button);
+} 
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main view including the label and an event rectangle. </p> 
+<p>The label displays information on mouse event status and coordinates (x, y positions). The event rectangle is received completely through mouse (touch) events. To show 2 elements in a Naviframe content area, a container combining those elements is necessary. A box container functions in that role. The label and rectangle pack end the box and the box is embedded into the Naviframe content area.</p> 
+
+<pre class="prettyprint">static Evas_Object *
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box;
+
+&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+
+&nbsp;&nbsp;&nbsp;// Label
+&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;None&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, 0);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;label, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;label, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;label);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
+
+&nbsp;&nbsp;&nbsp;// Event Rect
+&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(box));
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
+&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_spot()</span> function creates a rectangle, resizes the rectangle according to received size input, and moves the rectangle according to received coordinates (x, y positions) input.</p>
+
+<pre class="prettyprint">Evas_Object *
+create_spot(Evas_Object *parent, Evas_Coord x, Evas_Coord y, int size)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *spot;
+&nbsp;&nbsp;&nbsp;spot = evas_object_rectangle_add(evas_object_evas_get(parent));
+&nbsp;&nbsp;&nbsp;evas_object_resize(spot, size, size);
+&nbsp;&nbsp;&nbsp;// Adjust x, y positions to be center of object
+&nbsp;&nbsp;&nbsp;evas_object_move(spot, x - (size/2), y - (size/2));
+&nbsp;&nbsp;&nbsp;evas_object_show(spot);
+
+&nbsp;&nbsp;&nbsp;return spot;
+}
+</pre>
+
+<p>The rectangle object is stored in <span style="font-family: Courier New,Courier,monospace">Eina_List (ad-&gt;spots)</span> for managing other functions. The <span style="font-family: Courier New,Courier,monospace">button_clicked_cb()</span> function removes all <span style="font-family: Courier New,Courier,monospace">evas_objects</span> into the <span style="font-family: Courier New,Courier,monospace">ad-&gt;spots</span> list, meaning all spot rectangles are cleared.</p>
+
+<pre class="prettyprint">static void
+button_clicked_cb(void *data, Evas *evas, Evas_Object *object, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Evas_Object *spot;
+
+&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(ad-&gt;spots, spot)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(spot);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spot = NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Clear&quot;);
+}
+</pre>
+
+ <h2 id="touch" name="touch">Managing Touch Events</h2>
+
+<p>On the bottom of the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function, event callbacks are added to the event rectangle. An event callback is added using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
+
+<p>The following touch event types are supported:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: This event is called when the given object receives the mouse down event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: This event is called when the given object receives the mouse up event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: This event is called when the given object receives the mouse move event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: This event is called when the given object has already received the mouse down event and receives the multi-mouse down event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: This event is called when the given object receives the multi-mouse up event. </li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: This event is called when the given object receives the multi-mouse move event.</li>
+</ul>
+<p>If the given object receives a mouse event, a callback function is called, and event information, such as coordinates (x, y positions) is passed. The <span style="font-family: Courier New,Courier,monospace">mousemove_cb()</span> function sets the mouse status, positions text in the label, and draws a spot rectangle. To distinguish down and up positions, set different colors for the down and up rectangles.</p>
+
+<pre class="prettyprint">
+static void
+mousemove_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Evas_Object *spot;
+&nbsp;&nbsp;&nbsp;char buf[1024];
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev = event_info;
+&nbsp;&nbsp;&nbsp;Evas_Coord x = ev-&gt;cur.canvas.x;
+&nbsp;&nbsp;&nbsp;Evas_Coord y = ev-&gt;cur.canvas.y;
+&nbsp;&nbsp;&nbsp;int size = (int) 5 * elm_config_scale_get();
+
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;down)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Mouse Move, %d, %d&quot;, x, y);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
+
+&nbsp;&nbsp;&nbsp;// Draw spot on event position
+&nbsp;&nbsp;&nbsp;spot = create_spot(ad-&gt;rect, x, y, size);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(spot, 0, 0, 0, 255);
+&nbsp;&nbsp;&nbsp;ad-&gt;spots= eina_list_append(ad-&gt;spots, spot);
+}
+</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>
diff --git a/org.tizen.ui.practices/html/native/efl/naviframe_tutorial_n.htm b/org.tizen.ui.practices/html/native/efl/naviframe_tutorial_n.htm
new file mode 100644
index 0000000..f3de69b
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/naviframe_tutorial_n.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>Creating a Naviframe for Navigation</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">	
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating a Naviframe for Navigation</h1>
+
+<p>Naviframes are containers useful for implementing interfaces where several screens have a previous/next relationship.</p>
+
+<p>This tutorial shows a UI with 3 naviframes. Each naviframe is made of 20 screens, each made up of a label with the text <strong>label&lt;n&gt;</strong>, a title with the same text, and the <strong>Previous</strong> and <strong>Next</strong> buttons, which are used to navigate between the screens.</p>
+<p>The naviframe is &quot;one-way&quot;. This means that elements are added, and when the <strong>Previous</strong> button is clicked, they are removed, and there is no <strong>Next</strong> button by default. To add the <strong>Next</strong> button, define a structure that holds the naviframe object along with a stack of the elements that the user has popped by using the <strong>Previous</strong> button.</p>
+<p>You can also create the elements on the fly each time the <strong>Next</strong> button is pressed. Both approaches are valid.</p>
+
+<p>To create a naviframe:</p>
+<ol>
+<li><p>Create a <span style="font-family: Courier New,Courier,monospace;">naviframe_zipper</span> structure:</p>
+<pre class="prettyprint">
+// NOTE: A zipper is a data structure for an ordered set of elements and a
+// cursor in this set, meaning there are elements before the cursor (which are
+// stored inside the naviframe) and after (which are stored in the &quot;popped&quot; list
+struct 
+naviframe_zipper 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
+&nbsp;&nbsp;&nbsp;Eina_List *popped;
+};
+</pre>
+</li>
+<li><p>Create a function that factors the creation of several naviframes and initializes the <span style="font-family: Courier New,Courier,monospace;">naviframe_zipper</span> structure:</p>
+<pre class="prettyprint">
+static struct naviframe_zipper *
+_naviframe_add(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = malloc(sizeof(struct naviframe_zipper));
+&nbsp;&nbsp;&nbsp;z-&gt;naviframe = elm_naviframe_add(parent);
+&nbsp;&nbsp;&nbsp;z-&gt;popped = NULL;
+
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(z-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(z-&gt;naviframe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(z-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;// By default, objects are destroyed when they are popped from the naviframe
+&nbsp;&nbsp;&nbsp;// To save and reuse them, enable &quot;preserve_on_pop&quot;
+&nbsp;&nbsp;&nbsp;elm_naviframe_content_preserve_on_pop_set(z-&gt;naviframe, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;return z;
+}
+</pre>
+</li>
+<li>
+<p>Create the buttons that are at the top of the naviframe and allow the user to go back and forth between the screens. The naviframe component builds a <strong>Previous</strong> button by default, but you can create your own buttons as well. The naviframe has a specific slot for the <strong>Next</strong> button.</p>
+<pre class="prettyprint">
+// Save the element that is popped from the naviframe
+static void
+_naviframe_prev(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = data;
+&nbsp;&nbsp;&nbsp;z-&gt;popped = eina_list_prepend(z-&gt;popped, elm_naviframe_item_pop(z-&gt;naviframe));
+}
+
+// Set the first element after the current one available and push it to the naviframe
+static void
+_naviframe_next(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = data;
+&nbsp;&nbsp;&nbsp;Evas_Object *label, *prev, *next;
+&nbsp;&nbsp;&nbsp;const char *text;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it;
+
+&nbsp;&nbsp;&nbsp;label = eina_list_data_get(z-&gt;popped);
+&nbsp;&nbsp;&nbsp;z-&gt;popped = eina_list_remove_list(z-&gt;popped, z-&gt;popped);
+&nbsp;&nbsp;&nbsp;if (label != NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// UI component is saved inside the naviframe but nothing more 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// You need to create new buttons and set the title text again 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// (copy the one from the label that is saved)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text = elm_object_text_get(label);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// _button function creates a button which is
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// either Previous (-1) or Next (1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prev = _button(z, -1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next = _button(z, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_naviframe_item_push(z-&gt;naviframe, text, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>Populate the naviframe when the naviframe and the pages that go inside it are built.</p>
+<p>Remember that 3 naviframes are created, each populated in a different way. The common bits have been factored out as a function and the specific parts are executed through a callback. The generic function is shown in the following example.</p>
+<pre class="prettyprint">
+// Generic naviframe-populate function:
+// Its third (and last) parameter is a callback for customization. It pushes
+// the new items to a specific position and returns a &quot;context&quot; value that is
+// used between its calls and enables behaviors such as &quot;push after the
+// previously pushed item&quot; 
+static struct naviframe_zipper*
+_naviframe_populate_gen(Evas_Object *parent, const char *id,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void * (*populate_cb) (Evas_Object *nav, const char *title, Evas_Object
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*prev, Evas_Object *next, Evas_Object *label, Elm_Object_Item *context))
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z;
+&nbsp;&nbsp;&nbsp;Evas_Object *label, *prev, *next;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *context = NULL;
+&nbsp;&nbsp;&nbsp;char buf[256];
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_add(parent);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 20; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label = elm_label_add(z-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s [%d]&quot;, id, i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(label, buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(label);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(label, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// _button function creates a button which is
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// either Previous (-1) or Next (1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prev = _button(z, -1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next = _button(z, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Use the populate_cb callback to provide the customization of the way the
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// elements are added inside the naviframe
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context = populate_cb(z-&gt;naviframe, buf, prev, next, label, context);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return z;
+}
+</pre>
+<p>The prototype of the callbacks is fairly large, but that is because of the syntax for callbacks in C.</p>
+<pre class="prettyprint">
+// Push items one after the other
+static Elm_Object_Item *
+_populate_cb__push(Evas_Object *nav, const char *title,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
+{
+&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
+}
+
+// Push items one after the other but use insert_after
+static Elm_Object_Item *
+_populate_cb__push_then_insert_after(Evas_Object *nav, const char *title,
+&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;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
+&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;Elm_Object_Item *context)
+{
+&nbsp;&nbsp;&nbsp;if (context == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_insert_after(nav, context, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+
+// Push one item and repeatedly insert new items before the last inserted item
+static Elm_Object_Item *
+_populate_cb__push_then_insert_before(Evas_Object *nav, const char *title,
+&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;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
+&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;Elm_Object_Item *context)
+{
+&nbsp;&nbsp;&nbsp;if (context == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_insert_before(nav, context, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>Create a window with a vertical box, which holds the 3 naviframes from the Appcore&#39;s <span style="font-family: Courier New,Courier,monospace">app_create</span> callback.</p>
+
+<pre class="prettyprint">
+static bool
+_app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *w, *box;
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z;
+
+&nbsp;&nbsp;&nbsp;w = elm_win_util_standard_add(&quot;Naviframe Test&quot;, &quot;Naviframe Test&quot;);
+
+&nbsp;&nbsp;&nbsp;box = elm_box_add(w);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(box, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(w, box);
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;Before&quot;, _populate_cb__push_then_insert_before);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;After&quot;, _populate_cb__push_then_insert_after);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;Push&quot;, _populate_cb__push);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(w);
+}
+</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>
diff --git a/org.tizen.ui.practices/html/native/efl/notification_window_n.htm b/org.tizen.ui.practices/html/native/efl/notification_window_n.htm
new file mode 100644
index 0000000..6c0fbff
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/notification_window_n.htm
@@ -0,0 +1,426 @@
+<!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>Notification Windows: Supporting Notification Levels, Screenshots, and Input Generators</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+         <ul class="toc">
+			<li><a href="#noti">Notification Window</a></li>
+            <li><a href="#shot">Screenshot</a></li>
+            <li><a href="#input_gen">Input Generator</a></li>
+			<li><a href="#init">Initializing EFL Utility</a></li>			
+			<li><a href="#create">Creating a Notification Window and Setting a Notification Window Level</a></li>
+			<li><a href="#getting">Getting the Notification Window Level</a></li>
+            <li><a href="#screenshot">Getting a Screenshot</a></li>
+            <li><a href="#input_gen_key">Generating a Key Input Event </a></li>
+            <li><a href="#input_gen_touch">Generating a Touch Input Event </a></li>			
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Notification Windows: Supporting Notification Levels, Screenshots, and Input Generators</h1> 
+ 
+<p>The EFL UTIL utility package supports the following EFL functionalities:</p>
+
+<ul><li><a href="#noti">Notification Window and Level</a>
+<p>You can <a href="#init">initialize the EFL Utility</a>, <a href="#create">create a notification window and set a window level</a>, and <a href="#getting">get the notification window level</a>.</p></li>
+    <li><a href="#shot">Screenshot</a>
+<p>You can <a href="#init">initialize the EFL Utility</a> and <a href="#screenshot">capture a screenshot</a>.</p></li>
+    <li><a href="#input_gen">Input Generator</a>
+<p>You can <a href="#init">initialize the EFL Utility</a>, and generate a <a href="#input_gen_key">key input event</a> and <a href="#input_gen_touch">touch input event</a>.</p></li></ul>
+
+	
+<h2 id="noti" name="noti">Notification Window and Level</h2>
+
+<p>The EFL UTIL API allows you to set and get the notification level of the notification window (which is of the EFL window type):</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span></li></ul>
+
+<p>To understand notification levels, you must first learn about the Tizen window layer hierarchy. Window layers are logical containers used to control the window stack order. Each window belongs to 1 layer and can change the stack order in the layer. Windows in same layer are always placed on or under a window in another layer. In addition to the default &quot;normal layer&quot;, there exists a &quot;notification layer&quot;, which is always placed above the normal layer.</p>
+
+
+<p class="figure">Figure: Window layers</p> 
+<p align="center"><img alt="Window layers" src="../../images/efl_windowlayer.png" /></p> 
+
+
+<p>Each window is set to  a specific layer according to its type or properties. Most application windows belong to the normal layer. However, in case of an important alarm or other information crucial to the user, you can set the window to belong to the notification layer. This ensures that the user notices the information immediately, because the window belonging to the notification layer is always shown above the windows in the normal layer.</p> 
+
+<h3>Using the Notification Windows</h3>
+
+<p>A window that belongs to the notification layer is called a &quot;notification window&quot;. To make a notification window:</p>
+
+<ol><li>Set the window type to <span style="font-family: Courier New,Courier,monospace;">NOTIFICATION</span>, by calling the <span style="font-family: Courier New,Courier,monospace;">elm_win_add()</span> function with the third parameter set to <span style="font-family: Courier New,Courier,monospace;">ELM_WIN_NOTIFICATION</span>.</li>
+<li>Set the notification level by calling the <span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span> function.
+<p>The notification level defines the priority of the window, and the notification layer contains 3 levels (<span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>, <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span>, and <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_3</span>).</p>
+<p>The default notification window level is <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>. Most of notification windows can be set to this level. The <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span> is a higher level than <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>, which means that the window set to <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span> is always on the <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span> level window. The <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_3</span> is the highest level in notification windows. Very few applications can use this level.</p>
+
+<p>If there are notification windows that have the same level, the most recently created notification window is placed on top of the other window. </p>
+
+</li></ol>
+
+<p class="figure">Figure: Notification levels</p> 
+<p align="center"><img alt="Notification levels" src="../../images/efl_notilevels.png" /></p> 
+
+<p>In general, notification levels in Tizen are used as follows:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_LEVEL_1</span> is the basic level which is used as a normal notification popup.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_LEVEL_2</span> is used for the lock screen window.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">NOTIFICATION_LEVEL_3</span>, the highest layer, is used in case the user needs to be notified in any circumstances. For example, the incoming call popup can use this level.</li>
+</ul>
+
+<p>The following code snippets shown how to make a notification window with a higher level.</p>
+
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+#include &lt;efl_util.h&gt;
+#include &lt;dlog.h&gt;
+
+static Evas_Object *create_win(const char *name)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *eo;
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;// Create the NOTIFICATION window object
+&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
+
+&nbsp;&nbsp;&nbsp;if (!eo) return NULL;
+
+&nbsp;&nbsp;&nbsp;// Set the NOTIFICATION level
+&nbsp;&nbsp;&nbsp;error = efl_util_set_notification_window_level(eo, EFL_UTIL_NOTIFICATION_LEVEL_1);
+
+&nbsp;&nbsp;&nbsp;elm_win_title_set(eo, name);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(eo, EINA_TRUE); 
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(eo, &quot;delete,request&quot;, _quit_cb, NULL); 
+	
+&nbsp;&nbsp;&nbsp;return eo;
+}</pre>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span> function to get the currently set notification level of a window. If the window is not of the notification type, the function returns the <span style="font-family: Courier New,Courier,monospace;">-EFL_UTIL_ERROR_NOT_SUPPORTED_WINDOW_TYPE</span> error.</p>
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+#include &lt;efl_util.h&gt;
+#include &lt;dlog.h&gt;
+
+void get_notification_level (Evas_Object *eo)
+{
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;efl_util_notification_level_e  notification_level;
+
+&nbsp;&nbsp;&nbsp;if (!eo) return;
+
+&nbsp;&nbsp;&nbsp;// Get the window notification level
+&nbsp;&nbsp;&nbsp;error = efl_util_get_notification_window_level (eo, &amp;notification_level);
+
+&nbsp;&nbsp;&nbsp;// Check the return value
+&nbsp;&nbsp;&nbsp;if (error== EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (notification_level)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_1:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for level 1
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_2:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for level 2
+&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;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+  
+<h2 id="shot" name="shot">Screenshot</h2>
+
+<p>The EFL UTIL SCREENSHOT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__SCREENSHOT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__SCREENSHOT__MODULE.html">wearable</a> applications) allows you to get the screen image to the user.</p>
+
+<p>First you must make the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_h</span> structure and initialize the structure members with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_initialize()</span> function. To take the actual screenshot, create screen capture data and return it to the <span style="font-family: Courier New,Courier,monospace;">tbm_surface</span> handler with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_take_tbm_surface()</span> function.</p>
+<p>When no longer needed, remember to free the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_h</span> structure with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_deinitialize()</span> function.</p>
+
+
+<h2 id="input_gen" name="input_gen">Input Generator</h2>
+
+<p>The 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 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>
+
+
+
+
+ <h2 id="init" name="init">Initializing EFL Utility</h2>
+ 
+ <p>To use the EFL UTIL API, the following header file has to be included:</p>
+  <pre class="prettyprint">#include &lt;efl_util.h&gt;</pre> 
+
+ <h2 id="create" name="create">Creating a Notification Window and Setting a Notification Window Level</h2>
+
+<p>To create a notification window and set the window level, use the <span style="font-family: Courier New,Courier,monospace">efl_util_set_notification_window_level()</span> function. If the window type is not notification type, the function returns an error.</p> 
+<pre class="prettyprint">#include &lt;Elementary.h&gt;
+#include &lt;dlog.h&gt;
+
+void create_win() 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *eo;
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;char *name = &quot;Notification window&quot;;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Create notification window
+&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
+&nbsp;&nbsp;&nbsp;if (!eo) return;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Set notification level
+&nbsp;&nbsp;&nbsp;error = efl_util_set_notification_window_level
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(eo, EFL_UTIL_NOTIFICATION_LEVEL_1);
+&nbsp;&nbsp;&nbsp;if (error != EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+
+ <h2 id="getting" name="getting">Getting the Notification Window Level</h2>
+
+<p>To get the notification window level, use the <span style="font-family: Courier New,Courier,monospace">efl_util_get_notification_window_level()</span> function:</p>
+
+<pre class="prettyprint">void create_win() 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *eo;
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;efl_util_notification_level_e notification_level;
+&nbsp;&nbsp;&nbsp;char *name = &quot;Notification window&quot;;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Create notification window
+&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
+&nbsp;&nbsp;&nbsp;if (!eo) return;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Get notification level
+&nbsp;&nbsp;&nbsp;error = efl_util_get_notification_window_level
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(eo, &amp;notification_level);
+&nbsp;&nbsp;&nbsp;if (error == EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (notification_level) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_1:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for notification level 1
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_2:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for notification level 2
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+  
+<h2 id="screenshot" name="screenshot">Getting a Screenshot</h2>
+
+ <p>To get a screenshot:</p>
+ 
+<ol><li>Initialize with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_initialize()</span> function:
+  <pre class="prettyprint">
+#include &lt;tbm_surface.h&gt;
+#include &lt;X11/Xlib.h&gt;
+
+void capture()
+{
+&nbsp;&nbsp;&nbsp;efl_util_screenshot_h screenshot = NULL;
+&nbsp;&nbsp;&nbsp;tbm_surface_h tbm_surface = NULL;
+&nbsp;&nbsp;&nbsp;tbm_surface_info_s tsuri;
+
+&nbsp;&nbsp;&nbsp;screenshot = efl_util_screenshot_initialize(width, height);
+</pre></li>
+
+<li>After getting the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_h</span> structure, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_take_tbm_surface()</span> function to get the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> handler which has the screenshot data.
+  <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;if (screenshot) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tbm_surface = efl_util_screenshot_take_tbm_surface(screenshot);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tbm_surface) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Treat tbm_surface handler (screenshot data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+</pre></li>
+
+<li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_deinitialize()</span> function:
+  <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_screenshot_deinitialize(screenshot);
+&nbsp;&nbsp;&nbsp;}
+}</pre></li></ol>
+
+ <h2 id="input_gen_key" name="input_gen_key">Generating a Key Input Event</h2>
+
+<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">
+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;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 the input generator system
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+</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;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(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;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;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>
+
+  <p>To generate touch 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">
+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;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 the input generator system
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+</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;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(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;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(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;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;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>
+</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.practices/html/native/efl/panes_tutorial_mn.htm b/org.tizen.ui.practices/html/native/efl/panes_tutorial_mn.htm
new file mode 100644
index 0000000..362b985
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/panes_tutorial_mn.htm
@@ -0,0 +1,328 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Panes</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#init">Initializing the Panes Application</a></li>
+		<li><a href="#create">Creating a Panes Component</a></li>
+		<li><a href="#config">Configuring the Panes</a></li>
+		<li><a href="#signals">Handling Signals</a></li>
+		</ul>	
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Panes</h1>
+
+  
+<p>This tutorial explains how to use panes in the application.</p>
+
+<p>This feature is supported in mobile applications only.</p>
+
+ <h2 id="init" name="init">Initializing the Panes Application</h2>
+ 
+<p>Create a window entitled <strong>Panes tutorial</strong>, composed of a conformant component that contains a naviframe component.</p>
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+#include &lt;app.h&gt;
+
+struct _appdata 
+{
+&nbsp;&nbsp;&nbsp;const char *name;
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+};
+
+static void app_terminate(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;struct _appdata *ad;
+
+&nbsp;&nbsp;&nbsp;if (!user_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;ad = user_data;
+
+&nbsp;&nbsp;&nbsp;if (ad-&gt;win)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;win);
+}
+
+static bool app_create(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;struct _appdata *ad;
+&nbsp;&nbsp;&nbsp;Evas_Object *win, *conformant, *naviframe, *panes, *panes_h, *nav_it, *bt;
+
+&nbsp;&nbsp;&nbsp;if (!user_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;ad = user_data;
+
+&nbsp;&nbsp;&nbsp;// Create window 
+&nbsp;&nbsp;&nbsp;elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(&quot;panes&quot;, &quot;Panes tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;if (!win)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;win = win;
+
+&nbsp;&nbsp;&nbsp;// Add elm_conformant 
+&nbsp;&nbsp;&nbsp;conformant = elm_conformant_add(win);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, conformant);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(conformant);
+
+&nbsp;&nbsp;&nbsp;// Add naviframe to conformant 
+&nbsp;&nbsp;&nbsp;naviframe = elm_naviframe_add(conformant);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(conformant, naviframe);
+&nbsp;&nbsp;&nbsp;evas_object_show(naviframe);
+
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 320, 400);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+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;ad);
+&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;return ret;
+}
+</pre>
+
+
+ <h2 id="create" name="create">Creating a Panes Component</h2>
+ 
+<p>To add a new panes object to the application, do it within the <span style="font-family: Courier New,Courier,monospace">_create()</span> function.</p>
+
+<p>When you create a panes component, the <span style="font-family: Courier New,Courier,monospace">elm_panes</span> component adds a draggable bar between 2 contents. When dragged, this bar resizes the contents&#39; size. To create a new panes component into an Elementary object, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function.</p>
+<p>In the following example, the panes component is created and added in the naviframe:</p>
+<pre class="prettyprint">
+// Add an elm_panes 
+panes = elm_panes_add(naviframe);
+evas_object_size_hint_weight_set(panes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, panes);
+evas_object_show(panes);
+
+nav_it = elm_naviframe_item_push(naviframe, &quot;Panes view&quot;, NULL, NULL, panes, NULL);
+</pre>
+
+
+ <h2 id="config" name="config">Configuring the Panes</h2>
+
+<p>To configure the panes component:</p>
+<ul>
+<li>
+<p>Modify the panes component orientation with the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
+<p>By default, the orientation of the panes component is vertical.</p>
+<pre class="prettyprint">
+// Add a horizontal elm_panes 
+panes_h = elm_panes_add(naviframe);
+elm_panes_horizontal_set(panes_h, EINA_TRUE);
+</pre>
+<p>The above code creates a panes object and sets the horizontal orientation. To add content in a panes, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. In the following example, a horizontal panes component (<span style="font-family: Courier New,Courier,monospace">panes_h</span>) is added to the <span style="font-family: Courier New,Courier,monospace">&quot;left&quot;</span> part of the panes component (<span style="font-family: Courier New,Courier,monospace">panes</span>) created in the previous use case.</p>
+<pre class="prettyprint">
+elm_object_part_content_set(panes, &quot;left&quot;, panes_h);
+</pre>
+</li>
+<li>
+<p>Set a button object to the <span style="font-family: Courier New,Courier,monospace">&quot;right&quot;</span> side of the vertical panes component:</p>
+<pre class="prettyprint">
+// Create a button object 
+bt = elm_button_add(naviframe);
+elm_object_text_set(bt, &quot;Right&quot;);
+evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(bt);
+
+// Set the button object to the &quot;right&quot; part of the vertical panes 
+elm_object_part_content_set(panes, &quot;right&quot;, bt);
+</pre>
+</li>
+<li>
+<p>Set the content of the horizontal panes component with 2 button objects (up and down).</p>
+<p>When populating a vertically displayed panes component, the left content is placed at the top, and the right content is placed at the bottom.</p>
+<pre class="prettyprint">
+// Create an &quot;Up&quot; button 
+bt = elm_button_add(naviframe);
+elm_object_text_set(bt, &quot;Up&quot;);
+evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(bt);
+elm_object_part_content_set(panes_h, &quot;left&quot;, bt);
+
+// Create a &quot;Down&quot; button 
+bt = elm_button_add(naviframe);
+elm_object_text_set(bt, &quot;Down&quot;);
+evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(bt);
+elm_object_part_content_set(panes_h, &quot;right&quot;, bt);
+</pre>
+</li>
+<li>
+<p>Resize the panes component.</p>
+<p>To change the size of the panes component, drag the <span style="font-family: Courier New,Courier,monospace">elm_panes</span> with the mouse. The proportion can also be set with the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions. The following example shows how to set the left size of both panes to 80%.</p>
+<pre class="prettyprint">
+// Set the proportion of the panes to 80% 
+elm_panes_content_left_size_set(panes, 0.8);
+elm_panes_content_left_size_set(panes_h, 0.8);
+</pre>
+</li>
+<li>
+<p>Set a fixed size for the panes component&#39;s size and proportions with the <span style="font-family: Courier New,Courier,monospace">elm_panes_fixed_set()</span> function.</p>
+<pre class="prettyprint">
+// Fix the panes proportion 
+elm_panes_fixed_set(panes_h, EINA_TRUE);
+</pre>
+</li>
+</ul>
+
+<p class="figure">Figure: Panes tutorial</p> 
+<p align="center"><img alt="Panes tutorial" src="../../images/pane_tuto.png" /></p>
+
+ <h2 id="signals" name="signals">Handling Signals</h2>
+
+<p>The panes component emits 4 different signals, depending on the user interaction with the draggable bar:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span> - Pane is clicked.
+<p>The following example, a callback function is registered to the vertical panes component, and it prints <strong>Clicked</strong> to standard output:</p>
+<pre class="prettyprint">
+// clicked callback 
+static void
+_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Clicked\n&quot;);
+}
+
+evas_object_smart_callback_add(panes, &quot;clicked&quot;, _clicked_cb, panes);
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">press</span> - Pane is pressed.
+<p>The following example, a callback function is registered to the vertical panes component, and it prints <strong>Pressed</strong> to standard output:</p>
+<pre class="prettyprint">
+// press callback 
+static void
+_press_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Pressed\n&quot;);
+}
+
+evas_object_smart_callback_add(panes, &quot;press&quot;, _press_cb, panes);
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">unpressed</span> - Pane is released after being pressed.
+<p>The following example, a callback function is registered to the vertical panes component, and it prints the proportion size of the left content of the panes component to standard output using the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> function:</p>
+<pre class="prettyprint">
+// unpress callback 
+static void
+_unpress_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Unpressed, size : %f\n&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_get(obj));
+}
+
+evas_object_smart_callback_add(panes, &quot;unpress&quot;, _unpress_cb, panes);
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">clicked,double</span> - Pane is double-clicked.
+<p>The following example, a callback function is registered to the vertical panes component. It hides the left part of the panes component and sets the left proportion to 0.0. To restore the left part proportion with a double-click on the hidden part of the panes component, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> functions, and a variable to store the value of the current proportion.</p>
+
+<pre class="prettyprint">
+// clicked,double callback 
+static void
+_clicked_double_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;static double size = 0.0;
+&nbsp;&nbsp;&nbsp;double tmp_size = 0.0;
+&nbsp;&nbsp;&nbsp;tmp_size = elm_panes_content_left_size_get(obj);
+&nbsp;&nbsp;&nbsp;if (tmp_size &gt; 0)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_set(obj, 0.0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Double clicked, hidden.\n&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_set(obj, size);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Double clicked, restoring size.\n&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;size = tmp_size;
+}
+
+evas_object_smart_callback_add(panes, &quot;clicked,double&quot;, _clicked_double_cb, panes);
+</pre>
+</li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.practices/html/native/efl/popup_tutorial_wn.htm b/org.tizen.ui.practices/html/native/efl/popup_tutorial_wn.htm
new file mode 100644
index 0000000..89d6648
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/popup_tutorial_wn.htm
@@ -0,0 +1,235 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+	<title>Creating Wearable Popups</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#init">Initializing the Popup Application</a></li>
+			<li><a href="#style">Using Popup Styles</a></li>
+			<li><a href="#event">Managing Popup Events</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Wearable Popups</h1>
+
+  
+<p>This tutorial teaches the basics of popup component interactions.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<h2 id="init" name="init">Initializing the Popup Application</h2>
+	
+<p>Create an application with a window entitled <strong>Popup Basic Tutorial</strong>. The window consists of a conformant component, and you can add the popup inside the conformant with the <span style="font-family: Courier New,Courier,monospace">create_popup()</span> function.</p>
+	
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Popup Basic Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+&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;create_popup(ad-&gt;conform);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;struct app_data ad = {0,};
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}</pre>	
+	
+ <h2 id="style" name="style">Using Popup Styles</h2>
+
+<p>To create popups using various styles:</p>
+
+<ul><li>Create a basic text-only popup:
+
+<pre class="prettyprint">
+Evas_Object *popup;
+struct appdata *ad;
+ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad-&gt;win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+elm_object_text_set(popup, &quot;This has only texts&quot;);
+evas_object_show(popup);
+</pre></li>
+
+<li>Create a popup with a title and text. The <span style="font-family: Courier New,Courier,monospace">title,text</span> attribute is the title area text part that defines the title label.
+<pre class="prettyprint">
+Evas_Object *popup;
+struct appdata *ad;
+ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad-&gt;win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
+elm_object_text_set(popup,&quot;This Popup has title area and text&quot;);
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+evas_object_show(popup);
+</pre></li>
+
+<li>Create a popup with a title, text, and 2 buttons:
+<pre class="prettyprint">
+Evas_Object *popup;
+Evas_Object *btn;
+struct appdata *ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad-&gt;win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+elm_object_text_set(popup, &quot;This is title text 2button popup&quot;);
+
+btn = elm_button_add(popup);
+elm_object_style_set(btn, &quot;popup&quot;);
+evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(btn, &quot;Cancel&quot;);
+elm_object_part_content_set(popup, &quot;button1&quot;, btn);
+evas_object_smart_callback_add(btn, &quot;clicked&quot;, _response_cb, popup);
+
+btn = elm_button_add(popup);
+elm_object_style_set(btn, &quot;popup&quot;);
+evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(btn, &quot;OK&quot;);
+elm_object_part_content_set(popup, &quot;button2&quot;, btn);
+evas_object_smart_callback_add(btn, &quot;clicked&quot;, _response_cb, popup);
+
+evas_object_show(popup);
+</pre></li>
+
+<li>Create a toast popup:
+<pre class="prettyprint">
+Evas_Object *popup;
+struct appdata *ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad-&gt;win_main);
+elm_object_style_set(popup, &quot;toast&quot;);
+elm_popup_orient_set(popup, ELM_POPUP_ORIENT_BOTTOM);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+elm_object_part_text_set(popup,&quot;elm.text&quot;, &quot;Saving Contacts to sim&quot;);
+
+evas_object_smart_callback_add(popup, &quot;block,clicked&quot;, _block_clicked_cb, NULL);
+elm_popup_timeout_set(popup, 2.0);
+evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, NULL);
+
+evas_object_show(popup);
+</pre></li>
+</ul>
+
+ <h2 id="event" name="event">Managing Popup Events</h2>
+<p>The Elementary popups respond to user interactions with several events.</p>
+<p>To manage popup events:</p>
+
+<ul> 
+<li>Handle timeout events:
+<p>The <span style="font-family: Courier New,Courier,monospace">timeout</span> event is triggered whenever a popup is closed as a result of a timeout:</p>
+<pre class="prettyprint">
+static void 
+_timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;evas_object_del(obj);
+}
+elm_popup_timeout_set(popup, 3.0);
+evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, NULL);
+</pre></li>
+
+<li>Handle block clicked events:
+<p>The <span style="font-family: Courier New,Courier,monospace">block,clicked</span> event is triggered whenever the user taps on a blocked event area:</p>
+<pre class="prettyprint">
+static void 
+_block_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;evas_object_del(obj);
+}
+evas_object_smart_callback_add(popup, &quot;block,clicked&quot;, _block_clicked_cb, NULL);
+</pre></li>
+
+</ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.practices/html/native/efl/resource_fallback_n.htm b/org.tizen.ui.practices/html/native/efl/resource_fallback_n.htm
new file mode 100644
index 0000000..efe9679
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/resource_fallback_n.htm
@@ -0,0 +1,164 @@
+<!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>Resource Fallback Support</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Resource Fallback Support</h1> 
+  
+<p>Tizen native applications can run on different types of devices, such as wearable, phone, tablets, and TVs. Tizen also supports various resolutions (WVGA ~ XQXGA) and resources. Regardless of these advantages, remember that you must always polish your work to create an optimal application for each device.</p>
+
+<p>For more information, see <a href="../../../../org.tizen.devtools/html/native_tools/resource_explorer_n.htm">Resource Explorer</a>.</p>
+
+<h2 id="imageset" name="imageset">Providing an Alternative Image Set through Edje</h2>
+<p>The image set elements are used to display a specific image on the screen based on the container size. The image sets can have the following properties:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">name: image-name</span>
+<p>Specifies the name of the image file.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">size: minw minh maxw maxh</span>
+<p>Specifies the minimum and maximum size that causes a specified image to be selected and shown. The image set is used to control the resource quality when the image part is scaled to multiple devices. According to the size of the part&#39;s container, an appropriate image is loaded.</p></li></ul>
+
+<table>
+<tbody>
+ <tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;image: &quot;pig.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 640 800 1200 1500;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;image: &quot;monkey.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 400 500 639 799;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;image: &quot;cat.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 240 300 399 499;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;image: &quot;mouse.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 80 100 239 299;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;image: &quot;snail.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 79 99;
+&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;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.45;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.5;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.75;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&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;}
+}	 
+</pre>
+</td>
+ <td><p align="center"><img alt="Image set" src="../../images/fallback_imageset.png" /></p></td>
+ </tr>
+ </tbody></table>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/rotary_events_n.htm b/org.tizen.ui.practices/html/native/efl/rotary_events_n.htm
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/native/efl/rotary_events_n.htm
rename to org.tizen.ui.practices/html/native/efl/rotary_events_n.htm
diff --git a/org.tizen.ui.practices/html/native/efl/rotary_events_wn.htm b/org.tizen.ui.practices/html/native/efl/rotary_events_wn.htm
new file mode 100644
index 0000000..3608a56
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/rotary_events_wn.htm
@@ -0,0 +1,276 @@
+<!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>Managing Rotary Events</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#handler">Rotary Event Handler</a></li>
+			<li><a href="#callback">Rotary Object Event Callback</a></li>
+			<li><a href="#rotary">Managing Rotary Events</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>		
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Managing Rotary Events</h1>
+
+  
+<p>You can use various functions to work with the rotary events. The functions manage the rotary events, which are fired from the rotary device and delivered to a suitable target. To receive rotary events, you must define an event callback or a handler function, and register it using the EFL Extension functions. There are 2 ways to receive the rotary events: the rotary event handler and the rotary object event callback.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<h2 id="handler">Rotary Event Handler</h2>
+
+<p>The rotary event handler is suitable when you want to handle rotary events without taking care about an Evas Object or when the application is not implemented using an Evas Object. The handler works like the Ecore event in EFL:</p>
+
+<ul><li><p>The application registers a rotary event handler with the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_event_handler_add()</span> function.</p>
+
+<p>The rotary event handlers are treated &quot;first come first served&quot;. It means that the first registered handler is called first when rotary events happens. If the handler returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the next handler is called. Otherwise, EFL Extension stops delivering the rotary events.</p>
+</li>
+<li><p>To remove a rotary event handler, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_event_handler_del()</span> function.</p></li></ul>
+
+
+
+<h2 id="callback">Rotary Object Event Callback</h2>
+
+<p>The rotary object event callback is suitable when you want EFL Extension to handle the event delivery between objects. It means that EFL Extension manages a callback and an object list and decides which object&#39;s callback must be called when rotary events happen:</p> 
+
+<ul><li><p>The application registers a callback using the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_add()</span> function.</p>
+
+<p>EFL Extension treats callbacks based on the callback priority. If the application registers callbacks for a same object, the callback with the lowest priority number is called first. If this callback returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the higher priority number is called. The above function registers the rotary event callback with a default priority number (value is 0). To register the rotary event callback with another priority number, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_priority_add()</span> function.</p></li>
+<li><p>To remove a registered callback from an object, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_del()</span> function:</p></li></ul>
+
+<p>The rotary events are only delivered to 1 object named the activated object. If there is no activated object, the rotary event is not delivered to any object. If the activated object has registered callbacks and the callbacks return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the rotary events are delivered to the upper parents of the activated object until there is 1 callback that consumes the rotary event or it reaches the top parent object.</p>
+<p>To set the object as the activated object, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_activated_set()</span> function.</p>
+
+<p>Providing the activated parameter with the <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> value sets the object as the activated object. Providing the <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> value deactivates the object. Since there is only 1 object which is the activated object, if an object is set as the activated object, the previously activated object is deactivated and becomes a normal object. An activated signal named <span style="font-family: Courier New,Courier,monospace;">rotary,activated</span> is sent when an object is set as the activated object, and the <span style="font-family: Courier New,Courier,monospace;">rotary,deactivated</span> signal is sent when an object is deactivated.</p>
+
+<p>You can register callbacks for activated or deactivated signals with the <span style="font-family: Courier New,Courier,monospace;">evas_object_smart_callback_add()</span> function.</p>
+
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Evas__Smart__Object__Group.html">Evas smart callback function</a>.</p>
+
+<h2 id="rotary">Managing Rotary Events</h2>
+
+<p>To manage rotary events:</p>
+<ol>
+<li>Create the rotary event handler:
+<ol type="a">
+<li>Create the window:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+Evas_Object *win = NULL;
+
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension circle sample&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Show the window after base gui is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+}
+</pre>
+</li>
+
+<li>Register the rotary event handler:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Register the rotary event handler
+&nbsp;&nbsp;&nbsp;eext_rotary_event_handler_add(_rotary_handler_cb, NULL);
+}
+</pre></li>
+<li>Define the callback function:
+<pre class="prettyprint">
+Eina_Bool _rotary_handler_cb(void *data, Eext_Rotary_Event_Info *ev)
+{
+&nbsp;&nbsp;&nbsp;if (ev-&gt;direction == EEXT_ROTARY_DIRECTION_CLOCKWISE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;ROTARY HANDLER: Rotary device rotated in clockwise direction&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Rotary device rotated in counter clockwise direction&quot;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+</pre>
+</li>
+
+<li>Remove the rotary event handler and release all resources when you do not need it anymore.
+<pre class="prettyprint">
+static void
+app_terminate(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Release all resources
+&nbsp;&nbsp;&nbsp;eext_rotary_event_handler_del(_rotary_handler_cb);
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Create a rotary event callback for a normal Evas object. 
+<p>When a rotary event occurs, the slider value is adjusted accordingly.</p>
+<ol type="a">
+<li>Create the objects.
+<p>The window and the slider are created using the Elementary APIs.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL, *slider = NULL;
+
+&nbsp;&nbsp;&nbsp;// Window 
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Slider
+&nbsp;&nbsp;&nbsp;slider = elm_slider_add(win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(slider, 0, 50);
+&nbsp;&nbsp;&nbsp;elm_slider_step_set(slider, 1.0);
+&nbsp;&nbsp;&nbsp;evas_object_show(slider);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, slider);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up 
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+}
+</pre>
+</li>
+<li>Register the rotary event callback.
+<p>To receive the rotary event, register the rotary event callback and set the activated object as the slider object.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Register rotary event callback 
+&nbsp;&nbsp;&nbsp;ext_rotary_object_event_callback_add(slider, _rotary_event_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+}
+</pre>
+<p>Define the rotary callback function:</p>
+<pre class="prettyprint">
+Eina_Bool _rotary_event_cb(void *data, Evas_Object *obj, Eext_Rotary_Event_Info *ev)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *slider = obj;
+&nbsp;&nbsp;&nbsp;int val = elm_slider_value_get(slider);
+&nbsp;&nbsp;&nbsp;if (ev-&gt;direction == EEXT_ROTARY_DIRECTION_CLOCKWISE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_slider_value_set(slider, val + 1);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_slider_value_set(slider, val - 1);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Create a rotary event callback for an EFL Extension object. 
+<p>When a rotary event occurs, the slider value is adjusted accordingly.</p>
+<ol type="a">
+<li>Create the objects:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL, *conform = NULL;
+&nbsp;&nbsp;&nbsp;Eext_Circle_Surface *sur = NULL;
+
+&nbsp;&nbsp;&nbsp;// Window 
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension circle sample&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;conform = elm_conformant_add(win);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_SHOW);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(win, ELM_WIN_INDICATOR_OPAQUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(conform);
+
+&nbsp;&nbsp;&nbsp;// Surface 
+&nbsp;&nbsp;&nbsp;sur = eext_circle_surface_conformant_add(conform);
+
+&nbsp;&nbsp;&nbsp;// Slider
+&nbsp;&nbsp;&nbsp;slider = eext_circle_object_slider_add(conform, sur);
+&nbsp;&nbsp;&nbsp;eext_circle_object_value_min_max_set(slider, 0.0, 30.0);
+&nbsp;&nbsp;&nbsp;eext_circle_object_value_set(slider, 0.0);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+}
+</pre>
+</li>
+<li>Set the activated object.
+<p>Since the EFL Extension API is used to create the slider object, the created slider object already registers the rotary event callbacks internally. To receive a rotary event, you only need to set the activated object as the desired object (slider).</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Activate circle slider&#39;s rotary object event
+&nbsp;&nbsp;&nbsp;// Its value increases/decreases its value by 1.0 to clockwise or 
+&nbsp;&nbsp;&nbsp;// counter-clockwise rotary event
+&nbsp;&nbsp;&nbsp;eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;eext_circle_object_slider_step_set(slider, 1.0);
+}
+</pre>
+</li>
+</ol>
+</li>
+</ol>  
+  
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</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.practices/html/native/efl/scalability_n.htm b/org.tizen.ui.practices/html/native/efl/scalability_n.htm
new file mode 100644
index 0000000..d2d918b
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/scalability_n.htm
@@ -0,0 +1,762 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Scalability Support</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">	 
+		 <li><a href="#key">Key Concepts</a></li>	
+		 <li><a href="#elementary">Scalability Using Elementary UI Components</a></li>
+	     <li><a href="#edje">Scalability Using Edje</a></li>
+	     <li><a href="#aspect">Aspect Ratio</a></li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Scalability Support</h1> 
+  <p>To ensure that your application works well in diverse devices, you must consider scalability when designing the application layout:</p>
+  <ul>
+<li><a href="#key">Key concepts</a></li>
+<li><a href="#elementary">Scalability using Elementary UI components</a></li>
+<li><a href="#edje">Scalability using Edje</a></li>
+<li><a href="#aspect">Aspect ratio</a></li></ul>
+
+<h2 id="key" name="key">Key Concepts</h2>	
+
+<p>When designing the application layout to be scalable, you must pay attention to the following key concepts:</p>
+
+<ul><li>Understand the character of the relative position and the fixed position
+
+<p>In the <strong>relative position</strong>, the size is determined in proportion to the size of the referred object. For example, if an orange rectangle occupies 30% of the green rectangle, and the green rectangle is expanded, the orange rectangle is expanded accordingly. However, if the scaling value is changed and the green rectangle is not scaled, the orange rectangle remains unchanged too.</p>
+
+<p class="figure">Figure: Relative position</p> 
+<p align="center"> <img alt="Relative position" src="../../images/scale_relative.png" /> </p> 
+ 
+<p>In the <strong>fixed position</strong>, the size is determined by a value set for the object. For example, the orange rectangle set to the size of 10. If the green rectangle is expanded, the orange rectangle does not change. However, if the scaling value is, for example, doubled, the size of the orange rectangle grows to 20.</p>
+ 
+<p class="figure">Figure: Fixed position</p> 
+<p align="center"> <img alt="Fixed position" src="../../images/scale_fixed.png" /> </p>  </li>
+
+<li>Use the relative position
+<p>If you set the object size as a percentage, the ratio remains fixed regardless of the changes in the screen size or resolution. If you want the object size changed in proportion of the window size, use the relative position.</p>
+
+<p class="figure">Figure: Scaling relative position</p> 
+<p align="center"> <img alt="Scaling relative position" src="../../images/scale_relative_scaled.png" /> </p>  </li> 
+
+<li>Multiply the scaling value, if you use the fixed size
+<p>If you use the EDC file to set up the layout, you can set the scale in the <span style="font-family: Courier New,Courier,monospace">part</span> element:</p>
+<pre class="prettyprint">
+parts 
+{
+&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;box&quot;; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>If you set the fixed size in C code, you can use the <span style="font-family: Courier New,Courier,monospace">ELM_SCALE_SIZE</span> macro:</p>
+<pre class="prettyprint">evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));</pre>
+
+<p>For more information see <a href="multiple_screens_n.htm#apply">Applying the Base Scale</a>.</p></li>
+
+<li>Do not fill the width or height out with a fixed size only
+<p>If you fill the entire height out with a fixed size only and it is scaled, the end result can be larger than the screen size. </p>
+ 
+<p class="figure">Figure: Height filled with a fixed size</p> 
+<p align="center"> <img alt="Height filled with a fixed size" src="../../images/scale_fixed_height.png" /> </p> 
+
+<p>If you set a partial width or height with a fixed size and leave the remaining area flexible, the layout does not expand outside the screen.</p> 
+ 
+<p class="figure">Figure: Height with a flexible area</p> 
+<p align="center"> <img alt="Height with a flexible area" src="../../images/scale_flexible_height.png" /> </p> </li></ul>
+
+
+
+<h2 id="elementary" name="elementary">Scalability Using Elementary UI Components</h2>
+
+<p>The Tizen platform provides a UI component toolkit library, called Elementary, that includes an extensive set of UI components. You can use elementary UI components to compose your application user interface (UI). While creating the UI, you can set specific properties for the UI components to control the scalable behavior of the UI. Before you try to create a scalable UI using elementary UI components, make sure you understand the following core concepts on how scalability works with elementary UI components.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Elementary library provides 3 groups of APIs:
+	 <ul><li>Infrastructure: to control the behavior of elementary.</li>
+	 <li>Container: UI components that can contain other UI components.</li>
+	 <li>UI components: elementary UI components, such as buttons, lists, and check and radio boxes.</li></ul></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h3>Using Containers for Effective Layouts</h3>
+
+<p>The Elementary library provides several containers to display UI components in an effective layout. The containers have no visual identity of their own.</p>
+
+<ul><li>Box
+
+<p>The box container makes a layout where child UI components are stacked in either horizontal or vertical direction. The box size is the sum of its child UI components&#39; size:</p>
+<ul><li>A vertical box calculates its height as the sum of its children&#39;s height and its width as the width of the widest child.</li>
+<li>A horizontal box calculates its width as the sum of its children&#39;s width and its height as the height of the tallest child.</li></ul>
+
+<p class="figure">Figure: Box layout</p> 
+<p align="center"> <img alt="Box layout" src="../../images/scale_box.png" /> </p> 
+ 
+<p>The box-based linear layout is the best solution to ensure a minimum size for the child UI components in any device or any orientation.</p></li>
+
+<li>Grid
+
+<p>The grid container makes a layout where child UI components set their position and size relative to the container position and size. You can define the virtual width and height of the grid (by default: 100 x 100). You then packs the child UI components into the grid while setting their position and size based on the virtual size of the grid.</p>
+
+<p class="figure">Figure: Grid layout</p> 
+<p align="center"> <img alt="Grid layout" src="../../images/scale_grid.png" /> </p> 
+ 
+<p>The grid-based relative layout can always fill the full screen in any device or any orientation. However, the size of the child UI components is changed based on the screen size.</p></li></ul>
+
+
+<h3>Using Weight and Align Properties</h3>
+
+<p>To make a layout scalable with UI components, the UI components must be packed into a container using only the weight and align properties based on their minimum size. Do not resize the UI components directly using pixels.</p>
+
+<p>The weight and align properties are associated with every elementary UI component, and they serve as hints for the container they are in. They tell the container how the UI component wants to occupy the space and pack itself with other UI components in the container.</p>
+
+<h4>Weight</h4>
+
+<p>You can set the weight property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set(x_weight, y_weight)</span> function:</p>
+
+<ul><li>Containers use the weights of the child UI components by normalizing them across all child UI components along both X and Y directions.</li>
+<li>The parameter values can be 0 or positive values (default: 0.0).
+<p>0.0 means that the container allocates a minimum size of the UI component area.</p>
+<p>1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span>) means that the container allocates all of the remaining area to the UI component.</p></li>
+<li>If the container has several UI components, it allocates the UI component area relative to the weights of other UI components.</li></ul>
+
+<p class="figure">Figure: Weight hint</p> 
+<p align="center"> <img alt="Weight hint" src="../../images/scale_weight_hint.png" /> </p> 	
+ 
+<p class="figure">Figure: Weight hint across multiple child UI components</p> 
+<p align="center"> <img alt="Weight hint across multiple child UI components" src="../../images/scale_weight_hint_multiple.png" /> </p> 
+
+<h4>Align</h4>
+
+<p>You can set the align property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set(x_align, y_align)</span> function:</p>
+
+<ul><li>UI components use the alignment for their position or size along both X and Y directions.</li>
+<li>The parameter values can be from 0.0 to 1.0 or -1.0 (default: 0.5).</li>
+<li>The values define positions as follows: left is (x=0.0), right is (x=1.0), top is (y=0.0), and bottom is (y=1.0). The center is (x=0.5, y=0.5).
+<p>-1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span>) means that the UI component fills all of the allocated area.</p></li></ul>
+
+<p class="figure">Figure: Alignment hint</p> 
+<p align="center"> <img alt="Alignment hint" src="../../images/scale_align_hint.png" /> </p> 	
+
+<h2 id="edje" name="edje">Scalability Using Edje</h2>
+
+<p>The Tizen platform provides a complex graphical design and layout library called Edje, which provides an abstraction layer between the application code and the interface. You can use Edje in your Tizen applications to create visual elements and control the layout, look, and feel.</p>
+<p>Internally, Edje holds a geometry state machine and a state graph that defines, for example, what is visible, where, at what size, and with what colors. These details are described to Edje using an Edje <span style="font-family: Courier New,Courier,monospace">.edj</span> file. The file can be produced by using <span style="font-family: Courier New,Courier,monospace">Edje_cc</span> to take a text file (a <span style="font-family: Courier New,Courier,monospace">.edc</span> file) and &quot;compile&quot; an output <span style="font-family: Courier New,Courier,monospace">.edj</span> file that contains the state graph information, images, and any other needed data.</p>
+
+<p>While creating Edje, you set specific element properties to control the scalable behavior of the UI. Before creating a scalable UI using Edje, you must be familiar with the following scalability properties and part types.</p>
+
+<h3>Part</h3>
+<p>Parts are used to represent the most basic layout elements, such as a line in a border or a text on an image.</p>
+<p>The parts can have the following property:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">scale</span>: 0-1
+<p>Specifies whether the part scales its size with the scaling factor (Tizen has a scaling factor to resize the application layout and object). This property is used to scale properties, such as font size or min/max size of the part.</p>
+<p>The default value is 0 (off) and the default scaling factor is 1.0. To make a part scalable, set the property to 1 (on).</p>
+</li></ul>
+
+<h3>Description</h3>
+<p>Every part can have one or more description blocks to define the layout properties of the part.</p>
+<p>The descriptions can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">min</span>/<span style="font-family: Courier New,Courier,monospace">max</span>: width height
+<p>Specifies the minimum or maximum size of the part in pixels. It has no effect on the container size.</p>
+<p>When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">fixed</span>: 0-1 0-1
+<p>When the <span style="font-family: Courier New,Courier,monospace">min</span> or <span style="font-family: Courier New,Courier,monospace">max</span> property is set, this property sets a boolean value for each dimension (horizontal and vertical, respectively) that tells the application whether it must be scaled when resized.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>. To fix a part size to its min or max, set the value to 1.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">align</span>: X-axis Y-axis
+<p>When the displayed object size is smaller than its container, this property moves it along both axes using the relative position.</p>
+<p>To move the property, use x = 0.0 to move to left, x = 1.0 to move to right, y = 0.0 to move to the top, and y = 1.0 to move to the bottom. The x = 0.5, y = 0.5 value sets the object at the center of its container.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.5 0.5</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">rel1</span>/<span style="font-family: Courier New,Courier,monospace">rel2</span>
+<p>Specifies the position of the left-top and bottom-right corners of the part&#39;s container.</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">relative</span>: X-axis Y-axis
+<p>Specifies the relative position of the part&#39;s container.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span> for <span style="font-family: Courier New,Courier,monospace">rel1.relative</span> and <span style="font-family: Courier New,Courier,monospace">1.0 1.0</span> for <span style="font-family: Courier New,Courier,monospace">rel2.relative</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">to</span>/<span style="font-family: Courier New,Courier,monospace">to_x</span>/<span style="font-family: Courier New,Courier,monospace">to_y</span>
+<p>Specified that a corner must be positioned relatively to another part&#39;s container.</p>
+<p>By default, the corners of a part are placed to the whole interface.</p></li></ul>
+
+<table>
+<caption>Table: Edje part property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+                                                                 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;panorama.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
+                                                                 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.4;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.6;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 127 255 255;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Height: 100 pixels (when the scaling factor is 1.0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Bottom-aligned
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 127 0 255;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Image size: 720 x 180 pixels (when the scaling factor is 1.0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 720 180;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Y-axis is positioned relative to &quot;rect2&quot; part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.5 0.0; to_y: &quot;rect2&quot;;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.5 0.0; to_y: &quot;rect2&quot;;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Bottom-aligned
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;panorama.png&quot;;
+&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;}
+}</pre>	 
+</td>
+ <td><p align="center"> <img alt="Part example" src="../../images/scale_example_part.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">aspect</span>: min max
+<p>Specifies the width to height ratio to keep when the part is resized. When both values are the same, the ratio is fixed. When they differ, the part is forced to keep the ratio between the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> properties when resized.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">aspect_preference</span>: dimension
+<p>Specifies the scope of the <span style="font-family: Courier New,Courier,monospace">aspect</span> property to a given dimension.</p>
+<p>The possible values are	<span style="font-family: Courier New,Courier,monospace">BOTH</span>, <span style="font-family: Courier New,Courier,monospace">VERTICAL</span>, <span style="font-family: Courier New,Courier,monospace">HORIZONTAL</span>, and <span style="font-family: Courier New,Courier,monospace">NONE</span>. The default is <span style="font-family: Courier New,Courier,monospace">NONE</span>.</p>
+
+<table>
+<caption>Table: Edje part property aspect example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;island.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+   
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;island.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 8/5 8/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Keep the aspect ratio based on the part width
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: HORIZONTAL;
+&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;}
+}</pre>	 
+</td>
+ <td><p align="center"> <img alt="Part aspect example" src="../../images/scale_example_part_aspect.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+</li></ul>
+
+<h3>Text</h3>
+<p>The text elements are used to display text on the screen.</p>
+<p>The texts can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">size</span>: font-size
+<p>Specifies the font size for the text. When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
+	
+<li><span style="font-family: Courier New,Courier,monospace">min</span>: horizontal vertical
+<p>Specifies a pair of boolean values that define whether the container can be reduced further than the text size. The property is used to prevent the container from chopping the text.</p>
+<p>When <span style="font-family: Courier New,Courier,monospace">min</span> is set horizontally or vertically, the minimum height or width of the part is decided by the text size.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">max</span>: horizontal vertical
+<p>Specifies a pair of boolean values that define whether the container can be expanded further than the text size.</p>
+<p>When <span style="font-family: Courier New,Courier,monospace">max</span> is set horizontally or vertically, the maximum height or width of the part is decided by the text size.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
+
+<table>
+<caption>Table: Edje text property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 108 108 108 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;font: &quot;TIZEN&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 80;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Minimum height of the part container is decided by the text size
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Test properties!!&quot;;
+&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;}
+}</pre>	 
+</td>
+ <td><p align="center"> <img alt="Text example" src="../../images/scale_example_text.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">fit</span>: horizontal vertical
+<p>Specifies a pair of values that define whether the text is scaled to fill its container horizontally and/or vertically.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
+
+<table>
+<caption>Table: Edje text property fit example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.1;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 108 108 108 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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;font: &quot;TIZEN&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Resize text to fill the container height
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fit: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Test properties!!&quot;;
+&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;}
+}</pre>	 
+</td>
+ <td><p align="center"> <img alt="Text fit example" src="../../images/scale_example_text_fit.png" /> </p> </td>
+ </tr>
+ </tbody></table></li></ul>
+
+ 
+ <h3>Image</h3>
+<p>The image elements are used to display images on the screen.</p>
+<p>The images can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">border</span>: left right top bottom
+<p>Specifies the border size of the image in pixels. This property sets the area of each side of the image to be displayed as a fixed size border, preventing the corners from being changed on a resize.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">border_scale</span>
+<p>Specifies whether the border scales its size according to the scaling factor.</p>
+<p>The default value is 0 (off). To make the border scalable, the value must be set to 1 (on).</p>
+
+<table>
+<caption>Table: Edje image property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;00_button_01_normal.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.6;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.7;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;00_button_01_normal.png&quot;;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;ninepatch_image&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.9;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;normal: &quot;00_button_01_normal.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 4 4 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border_scale: 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;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>	 
+</td>
+ <td><p align="center"> <img alt="Image example" src="../../images/scale_example_image.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+
+</li></ul>
+<h3>Image Set</h3>
+<p>The image set elements are used to display a specific image on the screen based on the container size.</p>
+<p>The image sets can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">name</span>: image-name
+<p>Specifies the name of the image file.</p></li>
+	
+<li><span style="font-family: Courier New,Courier,monospace">size</span>: minw minh maxw maxh
+<p>Specifies the minimum and maximum size that causes a specified image to be selected and shown.</p>
+<p>The image set is used to control resource quality when the image part is scaled to multiple devices. According to the size of the part&#39;s container, an appropriate image is loaded.</p>
+
+<table>
+<caption>Table: Edje image set property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;image: &quot;pig.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 640 800 1200 1500;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;image: &quot;monkey.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 400 500 639 799;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;image: &quot;cat.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 240 300 399 499;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;image: &quot;mouse.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 80 100 239 299;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&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;image: &quot;snail.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 79 99;
+&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;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.45;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.5;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.75;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&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;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&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;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&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;}
+}</pre>	
+</td>
+ <td><p align="center"> <img alt="Image set example" src="../../images/scale_example_image_set.png" /> </p> </td>
+ </tr>
+ </tbody></table> 
+</li></ul>
+
+<h3>Part Types</h3>
+<p>You can use fixed and flexible parts:</p>
+
+<ul><li>Fixed parts
+
+<ul><li>Fixed parts have a minimum size (at least width or height).</li>
+<li>When the part <span style="font-family: Courier New,Courier,monospace">scale</span> property is set to 1 (on), the scaling factor has an effect on the minimum size.</li>
+<li>Fixed parts are used when the parts must keep a fixed size in any device or any orientation.</li></ul></li>
+<li>Flexible parts
+<ul><li>Flexible parts resize according to the container size and other fixed parts&#39; size.</li>
+<li>Flexible parts are used when the parts can be resized in any device or any orientation.</li></ul></li></ul>
+
+<p class="figure">Figure: Fixed and flexible parts</p> 
+<p align="center"> <img alt="Fixed and flexible parts" src="../../images/scale_fixed_flexible.png" /> </p> 
+
+
+<h2 id="aspect" name="aspect">Aspect Ratio</h2>
+
+<p>In Tizen, the application generally fills out the screen. However, sometimes you want the application to be shown in a specific aspect ratio, regardless of the screen size.</p>
+<p>As images are scaled in different devices, they are resized based on the container size. The images have specific properties that define the area to be shown when resized.</p>
+
+<p>For example, the following table illustrates what happens to the parts marked with yellow rectangles in the following figures, when scaling properties are applied.</p>
+  
+<p class="figure">Figure: Original image [1920x1280 (8:5)]</p> 
+<p align="center"> <img alt="Original image [1920x1280 (8:5)]" src="../../images/scale_original_image.png" /> </p> 
+
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">To set the required aspect ratio, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span> function or the <span style="font-family: Courier New,Courier,monospace">aspect_preference</span> attribute in the EDC.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+<table>
+<caption>Table: Image resizing effects with a specific aspect ratio</caption>
+<col width="40%" />
+<tbody>
+<tr>
+ <th rowspan="2">Aspect</th>
+ <th colspan="2">Container area</th>
+</tr>
+<tr>
+ <th>720x384 (15:8)</th>
+ <th>720x640 (9:8)</th>
+</tr>
+ <tr>
+ <td>HORIZONTAL
+<p>Resizing based on the container width while keeping the image aspect ratio.</p>
+<p>Extra height goes outside the image area and is clipped.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_1.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_2.png" /></p></td>
+ </tr>
+ <tr>
+ <td>VERTICAL
+<p>Resizing based on the container height while keeping the image aspect ratio.</p> 
+<p>Extra width goes outside the image area and is clipped.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_3.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_4.png" /></p></td>
+ </tr>
+ <tr>
+ <td>BOTH
+<p>Resizing based on the container area while keeping the image aspect ratio.</p>
+<p>No extra width or height goes outside the image area, so the entire image is always shown.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_5.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_6.png" /></p></td>
+ </tr>
+ <tr>
+ <td>NONE
+<p>Resizing to fill the available area while keeping the image aspect ratio.</p> 
+<p>Extra width or height goes outside the image area and is clipped.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_7.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_8.png" /></p></td>
+ </tr> 
+ </tbody></table>
+
+<h3>Setting the Image Aspect Ratio</h3>
+<p>In case of an image object, you can set its aspect ratio with additional APIs:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span>
+<p>If the function is set to <span style="font-family: Courier New,Courier,monospace">TRUE</span>, the image resizes to fill the entire area while keeping its aspect ratio. It lets the extra width or height go outside of the area (same result as with the aspect NONE in the above table).</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">elm_image_aspect_fixed_set()</span>
+
+<p>If the function is set to <span style="font-family: Courier New,Courier,monospace">FALSE</span>, the image resizes to fill the entire area without keeping its original aspect ratio. The image can be distorted to fit the area.</p>
+<table>
+<caption>Table: Image resizing without keeping the aspect ratio</caption>
+<tbody>
+<tr>
+ <th colspan="2">Container area</th>
+</tr>
+<tr>
+ <th>720x384 (15:8)</th>
+ <th>720x640 (9:8)</th>
+</tr>
+ <tr>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_9.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_10.png" /></p></td>
+ </tr>
+ </tbody></table>
+</li></ul>
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/theme_n.htm b/org.tizen.ui.practices/html/native/efl/theme_n.htm
new file mode 100644
index 0000000..8683d01
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/theme_n.htm
@@ -0,0 +1,72 @@
+<!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>Themes: Specifying the UI Look and Feel</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Themes: Specifying the UI Look and Feel</h1> 
+
+   
+<p>Tizen provides powerful theme features you can use to easily change your applications&#39; UI look and feel. A theme is a collection of visual identities, which provide the graphical appearance of applications. A theme comprises a layout, shapes, fonts, and colors for the UI components.</p> 
+
+<p>The Tizen platform provides a default theme for UI components implemented based on the Tizen UX design concept (AIR – light and simple). To change the current look and feel, you can replace the default theme with a customized theme package.</p>
+
+<p>The Edje library used by Elementary provides themes. You can also use Edje to create your own objects to modify the application appearance with a unique GUI. The UI components are customizable so that each application can have its own customized theme to overlay the default theme.</p>
+
+<p>Edje supports separation between layout and logic. While it is possible to implement both GUI and logic in the C code, a loose coupling of GUI and logic is more convenient when you want to revise, add, or delete application UI components. In EFL, the GUI is handled by Edje, while application logic is handled in the C code.</p>
+
+<p>Edje was designed as a theme layer for moving the look, feel, and animation of objects into separate data files loaded at runtime. Using a plain text <a href="edje_intro_n.htm">EDC file</a> you can create your application&#39;s layout without writing a single line of code. EFL can even change the theme of application at runtime without restarting the application.</p>
+
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<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.practices/html/native/efl/threads_n.htm b/org.tizen.ui.practices/html/native/efl/threads_n.htm
new file mode 100644
index 0000000..2ff6f1b
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/threads_n.htm
@@ -0,0 +1,507 @@
+<!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>Using Threads</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#Thread_safety">Thread Safety</a></li>
+			<li><a href="#Costs">Thread Pools</a></li> 
+			<li><a href="#Functions">Thread Management with Ecore</a></li>
+			<li><a href="#low_level">Low-level Functions</a></li>
+			<li><a href="#Examples">Thread Use Examples</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">	
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Using Threads</h1> 
+
+<p>Threads are concurrent execution environments that are lighter than full-blown processes because they share some operating system resources. Threads make it possible to do several things at the same time while using less resources and offering simpler synchronization and data exchange compared to processes.</p>
+
+<p>If you move a blocking operation to a separate thread, it cannot block the event loop and keeps the user interface reactive. Blocking the event loop and using long-running callbacks means the application cannot update its graphical user interface.</p>
+
+<p>While threads can be useful, they are not always the best choice:</p>
+
+<ul><li>The first rule to using threads is to avoid them as much as possible, as there are often better tools and approaches. For example, to do network transfers, use <span style="font-family: Courier New,Courier,monospace;">Ecore_Con</span> that integrates with the event loop to use a function based on callbacks. Being able to use such a function means that specific support work has been done in libraries. In some cases, using a function and libraries is impossible, and in those situations threads are required.</li>
+<li>Use threads in CPU-intensive tasks and disk IOs. For example, a thread is the appropriate way to apply filters to an image or to a video without blocking the interface.</li>
+<li>Use threads to take advantage of multiple available CPU cores, if the workload can be split into several units of work and spread across the cores. A typical example for an image processing application on a quad-core CPU is to process 4 images at once, each on 1 thread. For such tasks, the thread pool helps with the creation and scheduling of the threads, handling all the grunt work.</li></ul>
+
+<h2 id="Thread_safety" name="Thread_safety">Thread Safety</h2>
+
+<p>If several strings have to work on the same resources, conflicts can happen as the threads are run in parallel. For example, if thread A modifies several values while thread B is reading them, it is likely that some of the values read by B are outdated. Similar issues can happen if both threads are modifying data concurrently.</p>
+
+<p>These kinds of conflicts are called race-conditions: depending on which thread is faster, the output changes and can be incorrect. Avoiding such issues is called thread safety. Thread safety involves critical sections, which are blocks of code that operate on shared resources and must not be accessed concurrently by another thread.</p>
+
+<p>The usual solution for ensuring exclusive access to shared resources is mutual exclusion: only 1 thread can operate on the data at any given time. Mutual exclusion is often implemented through locks. Before attempting to operate on a shared resource, the thread waits until it can lock something called a mutex (stands for mutual exclusion), then operates on the resource, and unlocks the mutex. Operating systems guarantee that only 1 thread can lock a mutex at a given time: this ensures that only 1 thread operates on the shared resource at one time.</p>
+
+<p>For more information on thread safety, see <a href="#low_level">Low-level Functions</a>.</p>
+
+<h2 id="Costs" name="Costs">Thread Pools</h2>
+
+<p>Threads are operating system resources: while much lighter than processes, they still have a cost. Moreover, spawning a thousand threads means that each of them only gets 1/1000th of the total CPU time: each thread is progressed slowly and, in the worst case, the system wastes all of its time switching between threads without doing any actual work.</p>
+
+<p>Thread pools solve this problem. In thread pools, up to a maximum number of threads are created on-demand and used to execute tasks. When the tasks are finished, they are kept alive but sleeping. This avoids the cost of creating and destroying them.</p>
+
+<p>In EFL, the thread pool is controlled by a <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter, which defines the maximum number of threads running at the same time. Another control feature is the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback that runs from the main loop thread after a task has completed and is typically used to extract the data from the finished task and make it available to the main loop.</p>
+
+<p>To manage the maximum number of threads:</p>
+
+<ul>
+<li>To retrieve the current value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function.
+</li>
+
+<li>To set the value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function. The value has a maximum of 16 times the CPU count.
+</li>
+
+<li>To reset the maximum number of threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.
+
+</li>
+
+<li>To get the number of available threads in the pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function. The function returns the current maximum number of threads minus the number of running threads. The number can be a negative value, if the maximum number of threads has been lowered.
+</li>
+</ul>
+
+<p>The following figures illustrate the thread pool. The first figure shows the occupancy of a hypothetical thread pool. There are several tasks, of which 4 are running. The  <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter of the pool is 4, and the other tasks are waiting. There is no thread with its <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback currently called.</p>
+
+<p class="figure">Figure: Thread pool, step 1</p> 
+<p align="center"><img alt="Thread pool, step 1" src="../../images/thread_pool_lifecycle_1.png" /></p> 
+
+<p>When a task, applying the sepia filter on image1, finishes, the corresponding <span style="font-family: Courier New,Courier,monospace;">func_end()</span> function is invoked from the main loop.</p>
+
+<p class="figure">Figure: Thread pool, step 2</p> 
+<p align="center"><img alt="Thread pool, step 2" src="../../images/thread_pool_lifecycle_2.png" /></p> 
+
+<p>With the task done, one of the threads from the pool becomes available, and another thread, adding the reverberation effect on audio3, can run in it.</p>
+
+<p class="figure">Figure: Thread pool, step 3</p> 
+<p align="center"><img alt="Thread pool, step 3" src="../../images/thread_pool_lifecycle_3.png" /></p> 
+
+<p>As long as there are tasks to be done, the thread pool continues the same way, running tasks in its threads whenever a thread is available.</p>
+
+
+<h2 id="Functions" name="Functions">Thread Management with Ecore</h2>
+
+<p>Ecore offers a simplified API for managing threads in EFL applications. The Ecore API applies to a typical scenario where the main thread creates another thread, which in turn sends data back to the main thread or calls GUI-related functions. GUI-related functions are not thread-safe.</p>
+
+<h3>Creating Threads with Ecore</h3>
+
+<p>The threads created with Ecore are by default integrated with the thread pool and offer simple callback-based ways to interact with the main loop. New threads are created as needed until the maximum capacity of the thread pool is reached.</p>
+
+<ul><li>To return values to the main thread:
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to send intermediate feedback from the thread to the main loop.</p></li>
+
+<li>To return only the final value to the main thread:
+<p>To create and run a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function. It runs a function inside a thread from the thread pool and takes care of all the low-level work. It returns the corresponding thread handler or <span style="font-family: Courier New,Courier,monospace;">NULL</span> on failure.</p>
+
+<p>The most common way to return data from one thread to the main thread is to put a pointer to it in the data. When the thread is aborted or finishes, either <span style="font-family: Courier New,Courier,monospace;">func_cancel()</span> or <span style="font-family: Courier New,Courier,monospace;">func_end()</span> is called from the main loop. The functions are running in the simpler context of a single thread running at once and therefore avoid race-conditions.</p>
+
+<p>The data pointer approach can only be used when the data is shared between the one thread and the main thread only. However, this does not prevent you from using the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback to merge the results into a single data structure. For example, you can add all the values computed by the threads to an <span style="font-family: Courier New,Courier,monospace;">Eina_List</span>, as all the operations on the list happen from a single thread and therefore one after the other and not concurrently.</p></li></ul>
+
+
+<h3>Running Callbacks from the Main Loop</h3>
+
+<p>If you are performing operations in another thread and want to update a progress bar, the update operation must be done from the main thread. The simplest way is to use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span> function, which takes a function and some data as parameters and instructs the main loop to execute the given function with the given data.</p>
+
+<p>Depending on the kind of thread the function is called from, the process differs:</p>
+<ul>
+<li>If the function is called from a thread that is not the main one, the function sends a message to the main loop and returns quickly. The message is processed in order, similarly to others.</li>
+
+<li>If the function is called from the main thread, the function is called immediately as if it were a direct call.</li>
+</ul>
+
+<p>If you want to wait until the callback is called and returns, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function, which is similar but synchronous. Since it is synchronous, it can also return the value returned by the callback.</p>
+
+<h2 id="low_level" name="low_level">Low-level Functions</h2>
+
+<p>Eina offers low-level functions that are portable across the operating system, such as locks, conditions, semaphores, barriers, and spinlocks. The functions follow closely the logic of pthreads.</p>
+
+<p>While these functions are useful, they are building blocks and not usually useful in EFL applications considering the higher-level functions that are available in Ecore.</p>
+
+<p>For an introduction to threads and pthreads in particular, see:</p>
+
+<ul>
+<li><a href="http://www.ibm.com/developerworks/library/l-pthred/index.html" target="_blank">Basic use of pthreads</a> (IBM developerWorks)</li>
+<li><a href="https://computing.llnl.gov/tutorials/pthreads/" target="_blank">POSIX Threads Programming</a> (Lawrence Livermore National Laboratory)</li>
+<li><a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/pthread.h.html" target="_blank">POSIX 2003 specification</a> (opengroup)</li>
+</ul>
+
+<p>If you are already familiar with threads, see the standard pthreads documentation and the Eina reference documentation, or the following function lists. Remember that the Eina functions map very closely to the pthreads functions.</p>
+
+<table>
+<caption>Locks (mutual exclusions)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_new()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_new()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_destroy()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_lock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_trylock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take_try()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_unlock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_release()</span></td> 
+</tr>
+<tr> 
+<td>none (prints debug information on the lock)</td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_debug()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>Conditions (notifications when condition objects change)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_init()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_new()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_destroy </span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_wait()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_wait()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_timedwait()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_timedwait()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_broadcast()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_broadcast()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_signal()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_signal()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>RWLocks (Read-write locks, for multiple-readers/single-writer scenarios)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_init()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_new() </span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_destroy()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_rwlock_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_rdlock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_take_read()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_wrlock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_take_write()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_unlock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_release()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>TLS (Thread-Local Storage)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_create()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_new()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_delete()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_getspecific()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_get()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_setspecific</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_set()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>Semaphores (access restrictions for a set of resources)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">sem_init()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_new()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">sem_destroy()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">sem_wait()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_lock()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">sem_post()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_release()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>Barriers</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_init()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_new()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_destroy()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_wait()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_wait()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Thread Use Examples</h2>
+
+<p>The following examples display a window with a label. An auxiliary thread semi-regularly changes the text of the label. If you want to display a regular animation, use the Ecore animators described in the <a href="main_loop_n.htm">Main Loop</a> guide.</p>
+
+<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function:</p>
+
+<ol>
+
+<li>Implement the GUI function that sets the text of a label and can be called from the main thread.
+
+<pre class="prettyprint">
+static void
+_set_label_text(void *data, Ecore_Thread *thread __UNUSED__, void *msgdata)
+{
+&nbsp;&nbsp;&nbsp;char buf[64];
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Tick %d&quot;, (int)(uintptr_t)msgdata);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
+}
+</pre>
+</li>
+<li>Send the feedback from the other thread using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function. The following function does nothing besides sending the feedback and sleeping.
+
+<pre class="prettyprint">
+static void
+_long_function(void *data __UNUSED__, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;int iteration;
+&nbsp;&nbsp;&nbsp;// Change the text roughly every 1 second. This is only an example; if you
+&nbsp;&nbsp;&nbsp;// want regular animations, use Ecore animators!
+&nbsp;&nbsp;&nbsp;for (iteration = 0; ; iteration++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Since you are running from another thread, you need to take special
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// care and instead send data to the main thread and have it run the
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// feedback function given when creating the thread
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, (void*)(uintptr_t)iteration);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Sleep for roughly one second
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Create an end function that is called when the thread exits. In this example, the end function is called only right before the application exits. However, if the blocking function is more complex, it can trigger the end function.
+
+<pre class="prettyprint">
+static void
+_end_func(void *data, Ecore_Thread *thread __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Ticks over&quot;);
+}
+</pre>
+</li>
+
+<li>Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to start the thread:
+
+<pre class="prettyprint">
+ecore_thread_feedback_run(_long_function, _set_label_text, _end_func, NULL, ad, EINA_FALSE);
+</pre>
+</li>
+</ol>
+
+<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function:</p>
+
+<ol>
+<li>Implement the GUI function that sets the text of a label and can be called from the main thread. The function receives data as a structure and alternatively displays &quot;Tick d&quot; or &quot;Tock d&quot;.
+
+<pre class="prettyprint">
+struct thd 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad;
+&nbsp;&nbsp;&nbsp;Eina_Bool tick_not_tock;
+&nbsp;&nbsp;&nbsp;int iteration;
+};
+static void *
+_set_label_text_tick_tock(void *data)
+{
+&nbsp;&nbsp;&nbsp;char buf[64];
+&nbsp;&nbsp;&nbsp;struct thd *thd = data;
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s %d&quot;, (thd-&gt;tick_not_tock ? &quot;Tick&quot; : &quot;Tock&quot;), thd-&gt;iteration);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(thd-&gt;ad-&gt;label, buf);
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+</pre>
+</li>
+
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function call the GUI function. Differentiate between the ticks and the tocks:
+
+<pre class="prettyprint">
+static void
+_long_function_tick_tock(void *data, Ecore_Thread *thread __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;struct thd *thd = malloc(sizeof(struct thd));
+&nbsp;&nbsp;&nbsp;thd-&gt;ad = data;
+&nbsp;&nbsp;&nbsp;for (thd-&gt;iteration = 0; ; (thd-&gt;iteration)++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_TRUE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_FALSE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;free(thd);
+}
+</pre>
+</li>
+
+<li>Start the thread through the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function:
+
+<pre class="prettyprint">
+ecore_thread_run(_long_function_tick_tock, _end_func, NULL, ad);
+</pre>
+</li>
+</ol>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/tools_n.htm b/org.tizen.ui.practices/html/native/efl/tools_n.htm
new file mode 100644
index 0000000..5234fea
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/tools_n.htm
@@ -0,0 +1,243 @@
+<!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>Tools</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">             
+			<li><a href="#string">String</a></li>
+			<li><a href="#memory">Memory Pool</a></li>
+			<li><a href="#safety">Safety Checks</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+		<li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
+		<li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+   
+   <h1>Tools</h1>
+ <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding applications:</p>
+
+<ul>
+<li>Convert fast: conversion from, for example, strings to integers and double</li>
+<li>Counter: measures the number of calls and their time</li>
+<li>Error: error identifiers</li>
+<li>File: file list and path split</li>
+<li>Lazy allocator: lazy allocator</li>
+<li>Log: full-featured logging system</li>
+<li>Magic: provides runtime type checking</li>
+<li><a href="#memory">Memory Pool</a>: abstraction for various memory allocators</li>
+<li>Module lists: loads and shares modules using the <span style="font-family: Courier New,Courier,monospace;">Eina_Module</span> standard</li>
+<li>Rectangle: rectangle structure and standard manipulation methods</li>
+<li><a href="#safety">Safety Checks</a>: extra checks that report unexpected conditions and can be disabled during compilation</li>
+<li><a href="#string">String</a>: set of functions that manage C strings</li>
+</ul>    
+  
+<h2 id="string" name="string">String</h2>
+
+<p>When creating applications, you always need to manipulate strings. Eina provides a very useful API for manipulating C strings:</p>
+
+<ul><li>
+
+<p>The most common string manipulation is the &quot;split&quot;. If you have a string, such as &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;, and you want to print it in an easily readable format, you can use the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function to split the string using a delimiter. The first parameter is the string to split, the second determines where to split the string, and the final parameter is the maximum number of strings to split the string into. If you set a number less than 1, it splits the string as many times as possible.</p>
+<p>The function returns a newly-allocated NULL-terminated array of strings, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>, if it fails to allocate the array. Always remember to free the memory allocated by the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function.</p>
+
+<pre class="prettyprint">
+char *nicks = &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;;
+char **result_arr;
+int i;
+
+// Splitting the string with &#39;:&#39; delimiter
+result_arr = eina_str_split(names, &quot;:&quot;, 0);
+// Printing the result
+for (i = 0; result_arr[i]; i++)
+&nbsp;&nbsp;&nbsp;printf(&quot;Nick : %s\n&quot;, result_arr[i]);
+// Remember to free memory
+free(arr[0]);
+free(arr);
+</pre></li>
+
+
+<li><p>To change the string to lowercase or uppercase, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_tolower()</span> and <span style="font-family: Courier New,Courier,monospace;">eina_str_toupper()</span> functions. They change the case for all characters of the given string. These functions modify the original strings.</p>
+
+<pre class="prettyprint">
+char *str;
+// Initialize the string
+str = malloc(sizeof(char) * 4);
+strcpy(str, &quot;bsd&quot;);
+// Change the string to uppercase
+eina_str_toupper((char **)&amp;str);
+printf(&quot;%s\n&quot;, str);
+// Change the string to lowercase
+eina_str_tolower(&amp;str);
+printf(&quot;%s\n&quot;, str);
+// Free the allocated memory
+free(str);
+</pre></li>
+<li><p>If you need to &quot;join&quot; 2 strings of known length, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_join()</span> function. The fist parameter is the buffer to store the result, the second is the size of the buffer, the third is the separator between the 2 strings, and the 2 final parameters are the stings to be joined.</p>
+
+<pre class="prettyprint">
+char *part1 = &quot;Tizen powered by&quot;;
+char *part2 = &quot;Enlightenment Foundation Libraries&quot;;
+char *res;
+size_t size;
+// Calculate the string size + 1 for the delimiter
+size = strlen(part1) + strlen(part2) + 1
+// Allocate memory for the result
+res = malloc(sizeof(char) * size);
+// Join the strings
+eina_str_join(res, size, &#39; &#39;, part1, part2);
+printf(&quot;%s\n&quot;, res);
+// Free the allocated memory
+free(res):
+</pre></li>
+<li><p>To check whether a string starts or ends with another string, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_prefix()</span> or <span style="font-family: Courier New,Courier,monospace;">eina_str_has_suffix()</span> function. You can also check whether a string has a particular extension with the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_extension()</span> function.</p>
+
+<p>These functions return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the given string contains the specified prefix, suffix, or extension, and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if it does not.</p>
+
+<pre class="prettyprint">
+char *names = &quot;Carsten;Cedric;Tom;Chidambar;Boris;Philippe&quot;
+if (eina_str_has_prefix(names, &quot;Carsten&quot;))
+&nbsp;&nbsp;&nbsp;printf(&quot;String starts with &#39;Carsten&#39;&quot;)
+if (eina_str_has_suffix(names, &quot;Philippe&quot;))
+&nbsp;&nbsp;&nbsp;printf(&quot;String ends with &#39;Philippe&#39;&quot;)
+if (eina_str_has_extension(names, &quot;philippe&quot;))
+&nbsp;&nbsp;&nbsp;printf(&quot;String has extension &#39;philippe&#39;&quot;)
+else
+&nbsp;&nbsp;&nbsp;printf(&quot;String does not have extension &quot;philippe)
+</pre></li></ul>
+
+<h2 id="memory" name="memory">Memory Pool</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Eina_Mempool</span> tool provides memory pool functionality. With a memory pool, you can preallocate fixed-size memory spaces for easy memory management.</p>
+
+<p>The following mempools are available:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">buddy</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">chained_pool</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ememoa_fixed and ememoa_unknown</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">fixed_bitmap</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">pass_through</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">one_big</span></li>
+</ul>
+
+<h2 id="safety" name="safety">Safety Checks</h2>
+
+<p>Eina safety checks are a set of macros that can be used to check for parameters or values that must never occur. The concept is similar to the <span style="font-family: Courier New,Courier,monospace;">assert()</span> function, but safety checks log the parameter or value and return instead of aborting your program.</p>
+
+<p>The following safety checks are available:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN(exp)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL(exp, val)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO(exp, label)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN(exp)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN_VAL(exp, val)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_GOTO(exp, label)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN(exp)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN_VAL(exp, val)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_GOTO(exp, label)</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_ARG_NONNULL(...)</span></li>
+</ul>
+
+<p>To return if a variable is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro calls return if the given parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<pre class="prettyprint">
+Eina_Bool myfunction(char *param) 
+{
+&nbsp;&nbsp;&nbsp;// If my param is NULL, EINA_SAFETY_ON_NULL_RETURN calls &quot;return&quot;
+&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN(param);
+
+&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+} 
+</pre>
+
+<p>To return a specific value, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL()</span> function instead of the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro returns the given value.</p>
+
+<pre class="prettyprint">
+Eina_Bool void myfunction(char *param)
+{
+&nbsp;&nbsp;&nbsp;// If the parameter is NULL, return EINA_FALSE;
+&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN_VAL(param, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>To call another function if a parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function. This macro works similarly to the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function except that it calls goto with the given function instead of return.</p>
+
+<pre class="prettyprint">
+static void isnullcb()
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;The parameter is NULL\n&quot;);
+}
+Eina_Bool void myfunction(char *param)
+{
+&nbsp;&nbsp;&nbsp;// If the parameter is NULL we return EINA_FALSE;
+&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_GOTO(param, isnullcb);
+&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>Eina also provides macros that check whether a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span> or <span style="font-family: Courier New,Courier,monospace;">FALSE</span>. For example, to call return if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN()</span> function. To call &quot;goto&quot; in a given function if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function.</p>
+
+  
+  <table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+   
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/touch_gesture_n.htm b/org.tizen.ui.practices/html/native/efl/touch_gesture_n.htm
new file mode 100644
index 0000000..624be6c
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/touch_gesture_n.htm
@@ -0,0 +1,265 @@
+<!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>Handling Component Touch Gestures</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+	
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#init">Initializing Touch Gestures</a></li>
+			<li><a href="#touch">Implementing Touch Gestures</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Handling Component Touch Gestures</h1>
+
+  
+<p>This tutorial demonstrates how you can implement different types of gestures provided by the EFL library and instructions on how to use them.</p>
+
+ <h2 id="init" name="init">Initializing Touch Gestures</h2>
+
+<p>The EFL library provides a wide range of touch gestures, such as tap, double tap, triple tap, long tap, momentum, line, zoom and rotate, which can be used by the application to build a dynamic user interface interaction which is simple to use as well as intuitive.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component which acts as a view manager for the window and provides the window title functionality. After this it creates a gesture view by using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function and adds it to naviframe.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it, *tabbar_it;
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+&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_conformant_set(ad-&gt;win, EINA_TRUE);
+&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;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;layout);
+&nbsp;&nbsp;&nbsp;// Calendar View
+&nbsp;&nbsp;&nbsp;create_main_view(ad);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;nf, &quot;Calendar&quot;, NULL, NULL, ad-&gt;calendar, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;elm.swallow.content&quot;, ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view</span> function creates the application layout by arranging the labels and rectangles by using recursive composition of the box layout:</p>
+<pre class="prettyprint">
+static void
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;ad-&gt;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(ad-&gt;box, 0, 5 * elm_config_scale_get());
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;box);
+&nbsp;&nbsp;&nbsp;// Event Rect
+&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(ad-&gt;box));
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
+&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;gl = create_gesture_layer(ad);
+
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;box, ad-&gt;rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
+}
+</pre>
+
+<p>A gesture layer is added to the rectangle object. This layer is able to receive the gesture event:</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_gesture_layer(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *g = elm_gesture_layer_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_gesture_layer_attach(g, ad-&gt;rect);
+}
+</pre>
+
+<p>The following figure illustrates the Gesture Detector.</p>
+
+  <p class="figure">Figure: Gesture Detector screen</p> 
+  <p align="center"><img alt="Gesture Detector screen" src="../../images/gesture_view2.png" /></p> 
+
+ <h2 id="touch" name="touch">Implementing Touch Gestures</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_attach()</span> is the function to which a gesture layer for a particular object is attached.</p>
+<p>A gesture can have 4 different states:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_MOVE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span></li></ul>
+<p>Every gesture starts with the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span> state and finishes with either the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span> or <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span> state depending on whether the gesture is completed or aborted on that object. </p>
+<p>If an application only needs to track a finished gesture, it can listen for the finished state only. For a more complete control of the gesture, an application can listen for all state changes for that particular gesture.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function is used for registering state change callback for a particular gesture.</p>
+<p>For more information about the gestures, see the gesture documentation.</p>
+
+<p>To detect touch gestures:</p>
+<ul>
+<li><p>The following example adds callbacks for listening to the tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, n_finger_tap_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, n_finger_tap_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, n_finger_tap_abort, ad);
+</pre></li>
+<li><p>The following example adds callbacks for listening to the double tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, dbl_click_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, dbl_click_move, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, dbl_click_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, dbl_click_abort, ad);
+</pre></li>
+
+<li><p>The following example adds callbacks for listening to the triple tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, triple_click_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, triple_click_move, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, triple_click_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, triple_click_abort, ad);
+</pre></li>
+<li><p>The following example adds callbacks for listening to the long tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, momentum_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, momentum_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, momentum_move, ad);
+</pre></li>
+
+<li><p>The following example adds callbacks for listening to the momentum gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, momentum_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, momentum_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, momentum_move, ad);
+</pre></li>
+
+<li><p>The following example adds callbacks for listening to the line gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, line_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, line_move, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, line_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, line_abort, ad);
+</pre></li>
+ 
+<li><p>The following examples add callbacks for listening to the flick gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, flick_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, flick_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, flick_abort, ad);
+</pre></li>
+
+<li><p>The following examples add callbacks for listening to the zoom gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, zoom_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, zoom_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, zoom_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, zoom_move, ad);
+</pre></li>
+ 
+<li><p>The following example adds callbacks for listening to the rotate gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, rotate_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, rotate_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, rotate_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, rotate_move, ad);
+</pre></li>
+
+<li><p>The following example adds a callback for getting the tap gesture finishing notification:</p>
+<pre class="prettyprint">
+static Evas_Event_Flags
+n_finger_tap_end(void *data, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *) event_info;
+&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+}
+</pre></li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>	
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.practices/html/native/efl/ui_components_mn.htm b/org.tizen.ui.practices/html/native/efl/ui_components_mn.htm
new file mode 100644
index 0000000..032b728
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/ui_components_mn.htm
@@ -0,0 +1,1088 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Mobile UI Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Mobile UI Components</h1> 
+  
+<p>The EFL Elementary is a set of fast, finger-friendly, scalable, and themeable UI component libraries. The number of supported UI components is around 80, including both containers and non-containers. Originally, the Elementary was developed as part of the Window Manager development on Desktop devices. For the mobile profile, Tizen reused the proper UI components and created new ones, and then enhanced and adjusted all of them for Tizen native applications.</p>
+
+<p>This feature is supported in mobile applications only.</p>
+
+<p>The UI components are mobile-friendly: for example, the Naviframe component supports view-managing for multiple views, the Entry component supports many modes (such as Password, Single/Multi-line, Edit/No-Edit), the Index component supports fast access to another group of UI items, and the Toolbar component shows a menu when an item is selected.</p>
+<p>The mobile UI components were designed to allow the user to interact with touch screen-equipped mobile devices. Therefore, when developing mobile applications, you can easily use them through the mobile-related infrastructure in company with view managing and when reacting to touch events and the user finger size.</p>
+  
+  <table border="1"> 
+   <caption>
+     Table: Available UI components
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th> 
+	 <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+    </tr> 
+	<tr> 
+     <td rowspan="3">Navigation elements</td>
+	<td><a href="component_toolbar_mn.htm">Toolbar</a></td> 
+     <td>The toolbar component is a scrollable list of items. It can also show a menu when an item is selected. Only one item can be selected at a time.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_index_mn.htm">Index</a></td> 
+     <td>The index component provides an index for fast access to another group of UI items.</td>
+    </tr>	
+	<tr> 
+	 <td><a href="component_segmentcontrol_mn.htm">Segmentcontrol</a></td> 
+     <td>The segmentcontrol component is a horizontal control made of multiple segment items, each segment item functioning similarly as a discrete 2-state button.</td>
+    </tr>	
+	<tr> 
+	<td rowspan="11">Presentation views</td>
+     <td><a href="component_win_mn.htm">Win</a></td> 
+     <td>The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_background_mn.htm">Background</a></td> 
+     <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_genlist_mn.htm">Genlist</a></td> 
+     <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
+    </tr>
+	<tr> 
+     <td><a href="component_gengrid_mn.htm">Gengrid</a></td> 
+     <td>The gengrid component displays objects on a grid layout and renders only the visible objects.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_panel_mn.htm">Panel</a></td> 
+     <td>The panel component is an animated object that can contain child objects. It can be expanded or contracted by clicking on the button on its edge.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_list_mn.htm">List</a></td> 
+     <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_label_mn.htm">Label</a></td> 
+     <td>The label component displays text with simple HTML-like markup.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_image_mn.htm">Image</a></td> 
+     <td>The image component can load and display an image from a file or from memory.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_icon_mn.htm">Icon</a></td> 
+     <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_progressbar_mn.htm">Progressbar</a></td> 
+     <td>The progressbar component can be used to display the progress status of a given job.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_photocam_mn.htm">Photocam</a></td> 
+     <td>The photocam component is designed to display high-resolution photos taken with a digital camera. It allows you to zoom photos, load photos fast, and fit photos. It is optimized for JPEG images and has a low memory footprint.</td>
+    </tr>	
+	<tr> 
+		<td rowspan="8">User input</td>
+     <td><a href="component_button_mn.htm">Button</a></td> 
+     <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_check_mn.htm">Check</a></td> 
+     <td>The check component toggles the value of a Boolean between true and false.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_radio_mn.htm">Radio</a></td> 
+     <td>The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_entry_mn.htm">Entry</a></td> 
+     <td>The entry component is a box to which the user can enter text.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_slider_mn.htm">Slider</a></td> 
+     <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_datetime_mn.htm">Datetime</a></td> 
+     <td>The datetime component can display and input date and time values.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_colorselector_mn.htm">Colorselector</a></td> 
+     <td>The colorselector component provides a color selection solution to the user. It has different modes available, each of them showing a different configuration of the color selection.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_spinner_mn.htm">Spinner</a></td> 
+     <td>The spinner component enables the user to increase or decrease a numeric value by using arrow buttons.</td>
+    </tr>	
+	<tr> 
+	<td rowspan="4">Assist views</td>
+     <td><a href="component_popup_mn.htm">Popup</a></td> 
+     <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_ctxpopup_mn.htm">Ctxpopup</a></td> 
+     <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
+    </tr>
+		<tr> 
+     <td><a href="component_notify_mn.htm">Notify</a></td> 
+     <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_tooltip_mn.htm">Tooltip</a></td> 
+     <td>The tooltip component is a smart object used to show tips or information about a parent object when the mouse hovers over the parent object.</td>
+    </tr>
+	<tr> 
+	<td rowspan="2">Transition</td>
+     <td><a href="elementary_transit_effect_tutorial_n.htm">Transit</a></td> 
+     <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_flip_mn.htm">Flip</a></td> 
+     <td>The flip component can hold two Evas objects and let the user flip between these objects using a variety of predefined animations.</td>
+    </tr>
+	<tr> 
+		<td>Hardware acceleration</td>
+     <td><a href="component_glview_mn.htm">GLView</a></td> 
+     <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
+    </tr>
+
+	<tr> 
+	<td rowspan="2">Miscellaneous</td>
+     <td><a href="component_map_mn.htm">Map</a></td> 
+     <td>The map component can display a geographic map. The default map data is provided by the OpenStreetMap project (<a target="_blank" href="http://www.openstreetmap.org/">http://www.openstreetmap.org/</a>).</td>
+    </tr>
+	<tr> 
+     <td><a href="component_plug_mn.htm">Plug</a></td> 
+     <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
+    </tr>
+   </tbody> 
+  </table> 
+ 
+ 
+<h2 id="styles" name="styles">Mobile UI Component Styles</h2> 
+  
+<p>EFL can separate the GUI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
+
+<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component. For more detailed information, see the <a href="theme_n.htm">Themes</a>.</p>
+
+<table>
+<caption>Table: Button styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/button/base/default</td>
+ <td><img src="../../images/button_default.png" /> </td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/anchor</td>
+ <td><img src="../../images/button_anchor.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/bottom</td>
+ <td><img src="../../images/bottom.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>This style is used widely at the bottom of the screen.</td>
+ </tr>
+  <tr>
+ <td>elm/button/base/circle</td>
+ <td><img src="../../images/button_circle.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/dropdown</td>
+ <td><img src="../../images/button_dropdown.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_horizontal/default</td>
+ <td><img src="../../images/button_hoversel.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_horizontal_entry/default</td>
+ <td><img src="../../images/button_hoversel_entry.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_vertical/default</td>
+ <td><img src="../../images/button_hover_v.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_vertical_entry/default</td>
+ <td><img src="../../images/button_hover_v_entry.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/icon_reorder</td>
+ <td><img src="../../images/button_recorder.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/naviframe/drawers</td>
+ <td><img src="../../images/button_drawers.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/naviframe/title_cancel</td>
+ <td><img src="../../images/button_title_cancel.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/naviframe/title_done</td>
+ <td><img src="../../images/button_title_done.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/option</td>
+ <td><img src="../../images/button_option.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Check styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>elm/check/base/default</td>
+ <td><img src="../../images/check_default.png" /></td>
+ </tr>
+ <tr>
+ <td>elm/check/base/favorite</td>
+ <td><img src="../../images/check_favorite.png" /></td>
+ </tr>
+  <tr>
+ <td>elm/check/base/on&amp;off</td>
+ <td><img src="../../images/check_on_off.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Colorselector styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/colorselector/item/color/colorplane</td>
+ <td><img src="../../images/color_colorplane.png" /></td>
+ <td>Use the following command: <span style="font-family: Courier New,Courier,monospace">elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);</span></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Progressbar styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/progressbar_default.png" /></td>
+ </tr>
+ <tr>
+ <td>wheel</td>
+ <td><img src="../../images/progressbar_wheel.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Radio styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/radio_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: List styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/styleguide_genlist_def.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Multi Button Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/multibuttonentry/base/default</td>
+ <td><img src="../../images/multi_button_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>, guide</td>
+ <td>The guide text part is used when there is no item in the Multi Button Entry. It is removed automatically when an item is appended in the Multi Button Entry.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Toolbar styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/toolbar/base/default</td>
+ <td><img src="../../images/toolbar_default.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/toolbar/base/navigationbar</td>
+ <td><img src="../../images/toolbar_navigation.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/toolbar/base/tabbar_with_title</td>
+ <td><img src="../../images/toolbar_tabbar.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/toolbar/item/default</td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td>This style is for the toolbar&#39;s item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
+ </tr>
+  <tr>
+ <td>elm/toolbar/item/navigationbar</td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td>This style is for the toolbar&#39;s item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Flipselector styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/flipsel_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<p>The style of the genlist&#39;s item is not set by external APIs. Check the guide of Genlist to check how to use the item class to set the item&#39;s style.</p>
+<table>
+<caption>Table: Genlist styles</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/styleguide_genlist_def.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_style</td>
+ <td><img src="../../images/styleguide_genlist_defstyle.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>double_label</td>
+ <td><img src="../../images/styleguide_genlist_doublelabel.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.sub</span>: for the sub text.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>end_icon</td>
+ <td><img src="../../images/styleguide_genlist_end.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>full</td>
+ <td><img src="../../images/styleguide_genlist_full.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>The swallow part is the full size of the item. There is no padding in the item.</td>
+ </tr>
+  <tr>
+ <td>group_index</td>
+ <td><img src="../../images/styleguide_genlist_group.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>one_icon</td>
+ <td><img src="../../images/styleguide_genlist_oneicon.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>message</td>
+ <td><img src="../../images/styleguide_genlist_message.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the text on the top. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.title.1</span>: for the text in the middle.</p>
+<p><span style="font-family: Courier New,Courier,monospace">elm.title.2</span>: for the text on the bottom.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<p>The style of the gengrid&#39;s item is not set by external APIs. For more information on using the item class to set the item&#39;s style, see the guide of gengrid.</p>
+<table>
+<caption>Table: Gengrid styles</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/gengrid_default.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>album-preview</td>
+ <td><img src="../../images/gengrid_album_pre.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>block</td>
+ <td><img src="../../images/gengrid_block.png" /></td>
+ <td></td>
+ <td></td>
+ <td>This style is used to show an empty area.</td>
+</tr>
+ <tr>
+ <td>group_index</td>
+ <td><img src="../../images/gengrid_grp_index.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>default_grid</td>
+ <td><img src="../../images/gengrid_def.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+<tr>
+ <td>default_gridtext2</td>
+ <td><img src="../../images/gengrid_def_gridtext2.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_gridtext</td>
+ <td><img src="../../images/gengrid_def_gridtext.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_style</td>
+ <td><img src="../../images/gengrid_def_style.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Segmentation Control styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/segm_control_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Index styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/index_default.png" /></td>
+ <td>This style is for supporting the vertical style.</td>
+ </tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/index_default02.png" /></td>
+ <td>This style is for supporting the horizontal style. To set a horizontal index, use the <span style="font-family: Courier New,Courier,monospace">elm_index_horizontal_set</span>.</td>
+ </tr>
+  <tr>
+ <td>pagecontrol</td>
+ <td><img src="../../images/index_pagecontrol.png" /></td>
+ <td>This style is used for the &quot;page control&quot; layout. For more information, refer to the Core Control sample application.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Contextual Popup (Ctxpopup) styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/ctxpopup_default.png" /></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>dropdown/list</td>
+ <td><img src="../../images/ctxpopup_dropdown.png" /></td>
+ <td>The size of the item and the ctxpopup follow the size of the screen.</td>
+ </tr>
+  <tr>
+ <td>dropdown/label</td>
+ <td><img src="../../images/ctxpopup_dropdown_label.png" /></td>
+ <td>The size of the item and the ctxpopup follow the maximum length of the item.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Icon styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>apps</td>
+ <td><img src="../../images/icon_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>arrow_down</td>
+ <td><img src="../../images/icon_arrowdown.png" /></td>
+ </tr>
+  <tr>
+ <td>arrow_left</td>
+ <td><img src="../../images/icon_arrowleft.png" /></td>
+ </tr>
+  <tr>
+ <td>arrow_right</td>
+ <td><img src="../../images/icon_arrowright.png" /></td>
+ </tr>
+  <tr>
+ <td>arrow_up</td>
+ <td><img src="../../images/icon_arrowup.png" /></td>
+ </tr>
+  <tr>
+ <td>chat</td>
+ <td><img src="../../images/icon_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>clock</td>
+ <td><img src="../../images/icon_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>close</td>
+ <td><img src="../../images/icon_close.png" /></td>
+ </tr>
+ <tr>
+ <td>delete</td>
+ <td><img src="../../images/icon_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>edit</td>
+ <td><img src="../../images/icon_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>file</td>
+ <td><img src="../../images/icon_file.png" /></td>
+ </tr>
+ <tr>
+ <td>home</td>
+ <td><img src="../../images/icon_home.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/forward</td>
+ <td><img src="../../images/icon_forward.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/info</td>
+ <td><img src="../../images/icon_info.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/next</td>
+ <td><img src="../../images/icon_next.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/pause</td>
+ <td><img src="../../images/icon_pause.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/play</td>
+ <td><img src="../../images/icon_play.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/prev</td>
+ <td><img src="../../images/icon_prev.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/rewind</td>
+ <td><img src="../../images/icon_rewind.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/stop</td>
+ <td><img src="../../images/icon_stop.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/apps</td>
+ <td><img src="../../images/icon_menu_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_down</td>
+ <td><img src="../../images/icon_menu_arrdown.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_left</td>
+ <td><img src="../../images/icon_menu_arrleft.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_right</td>
+ <td><img src="../../images/icon_menu_arrright.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_up</td>
+ <td><img src="../../images/icon_menu_arrup.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/chat</td>
+ <td><img src="../../images/icon_menu_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/clock</td>
+ <td><img src="../../images/icon_menu_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/close</td>
+ <td><img src="../../images/icon_menu_close.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/delete</td>
+ <td><img src="../../images/icon_menu_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/edit</td>
+ <td><img src="../../images/icon_menu_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/file</td>
+ <td><img src="../../images/icon_menu_file.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/folder</td>
+ <td><img src="../../images/icon_menu_folder.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/home</td>
+ <td><img src="../../images/icon_menu_home.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/refresh</td>
+ <td><img src="../../images/icon_menu_refresh.png" /></td>
+ </tr>
+ <tr>
+ <td>no_photo</td>
+ <td><img src="../../images/icon_menu_nophoto.png" /></td>
+ </tr>
+ <tr>
+ <td>photo/no_photo</td>
+ <td><img src="../../images/icon_photo_nophoto.png" /></td>
+ </tr>
+ <tr>
+ <td>refresh</td>
+ <td><img src="../../images/icon_refresh.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/apps</td>
+ <td><img src="../../images/icon_toolbar_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_down</td>
+ <td><img src="../../images/icon_toolbar_arrdown.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_left</td>
+ <td><img src="../../images/icon_toolbar_arrleft.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_right</td>
+ <td><img src="../../images/icon_toolbar_arrright.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_up</td>
+ <td><img src="../../images/icon_toolbar_arrup.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/chat</td>
+ <td><img src="../../images/icon_toolbar_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/clock</td>
+ <td><img src="../../images/icon_toolbar_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/close</td>
+ <td><img src="../../images/icon_toolbar_close.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/delete</td>
+ <td><img src="../../images/icon_toolbar_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/edit</td>
+ <td><img src="../../images/icon_toolbar_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/file</td>
+ <td><img src="../../images/icon_toolbar_file.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/folder</td>
+ <td><img src="../../images/icon_toolbar_folder.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/home</td>
+ <td><img src="../../images/icon_home.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/more_menu</td>
+ <td><img src="../../images/icon_toolbar_moremenu.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/refresh</td>
+ <td><img src="../../images/icon_toolbar_refresh.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/entry_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td></td>
+ <td>The guide text is automatically erased when the main text is entered.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Datetime styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>date_layout</td>
+ <td><img src="../../images/datetime_date_layout.png" /></td>
+ </tr>
+ <tr>
+ <td>time_layout</td>
+ <td><img src="../../images/datetime_time_layout.png" /></td>
+ </tr>
+  <tr>
+ <td>time_layout_24hr</td>
+ <td><img src="../../images/datetime_time_24h.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Panel (drawer) styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/panel_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>For more information on the drawer, see the [UI Sample] Core Control guide.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Slider styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+
+</tr>
+ <tr>
+ <td>horizontal/default</td>
+ <td><img src="../../images/slider_hor.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+ <tr>
+ <td>horizontal/center_point</td>
+ <td><img src="../../images/slider_hor_center.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+  <tr>
+ <td>vertical/center_point</td>
+ <td><img src="../../images/slider_ver_center.png" /></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>vertical/default</td>
+ <td><img src="../../images/slider_ver.png" /></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Popup styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/popup_default.png" /></td>
+ </tr>
+ <tr>
+ <td>toast</td>
+ <td><img src="../../images/popup_toast.png" /></td>
+ </tr>
+ </tbody>
+</table>
+ 
+ <table>
+<caption>Table: Spinner styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>horizontal</td>
+ <td><img src="../../images/spinner_hor.png" /></td>
+ </tr>
+  <tr>
+ <td>vertical</td>
+ <td><img src="../../images/spinner_ver.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/ui_components_n.htm b/org.tizen.ui.practices/html/native/efl/ui_components_n.htm
new file mode 100644
index 0000000..0079e6f
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/ui_components_n.htm
@@ -0,0 +1,693 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>UI Components: Handling Elementary UI Component Libraries</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+				<li><a href="#components">Using UI Components</a></li>
+				<li><a href="#first">Getting Started with the Elementary Library</a></li>
+				<li><a href="#objects">Elementary Objects</a></li>
+				<li><a href="#callbacks">Elementary Callbacks</a></li>
+				<li><a href="#config">Managing Elementary Profiles</a></li>
+				<li><a href="#options">Configuring Elementary Options</a></li>
+				<li><a href="#scalability">Scaling UI Components</a></li>
+		</ul>		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>UI Components: Handling Elementary UI Component Libraries</h1> 
+
+<p>Before writing an application, you should already have an answer to the following question: What is an application? An application is a process launched by the user. Every application has at least one window for presenting its content. Users can interact with the content through events. Different sources of events can modify the life cycle of the application. The application may receive data from a network connection, and it may also receive touch and key events. From the computer&#39;s point of view, an application is a collection of code that reacts to events and displays content on the screen. Elementary bridges this divide between the user and the code.</p>
+
+<p>Elementary provides a variety of pre-built UI components, such as layout objects and components, that allow you to build rich graphical user interfaces for your applications. Every Elementary application has at least one window for presenting its content. The window provides the area in which to display the content and where the Evas canvas is placed.</p>
+
+<p>There are three main groups of objects provided by Elementary:</p>
+
+<ul>
+    <li>UI components: These are the components with which you build your application UI.</li>
+    <li>Containers: These are the containers that hold the components.</li>
+    <li>Infrastructure: These are the modules that deal with Elementary as a whole.</li>
+</ul>
+
+  <h2 id="components" name="components">Using UI Components</h2>
+  
+<p>The Elementary library is a simple toolkit. It provides several UI components than can be used to compose the user interface of your application. UI components allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. UI components will often generate signals that can be caught in the application when the user interacts with the UI components. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common UI components.</p>
+
+  <p class="figure">Figure: Elementary</p>
+<p align="center"><img alt="Elementary" src="../../images/elementary.png" /></p>
+
+
+<h2 id="first" name="first">Getting Started with the Elementary Library</h2>
+
+
+<p>Elementary UI components are built in a hierarchical fashion. The idea is to factorize as much code as possible between UI components that behave in a similar manner to facilitate the creation of new UI components. The Elementary UI components inherit a lot of their code from the container UI components and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). You can use the container and layout functions on the Elementary UI components, as well as the Elementary object functions, such as <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span>, <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_get()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_unset()</span>.</p>
+
+<p>To use the Elementary library:</p>
+
+<ol><li>Initialize the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function.</li>
+<li>Start the Elementary main loop with the <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function.
+<p>The function does not return, instead, it constantly loops and runs the event and the processing tasks.</p></li>
+<li>Add Elementary UI components in the main loop.
+<p>Generally, an Elementary UI component can be added with the <span style="font-family: Courier New,Courier,monospace">elm_&lt;UI component name&gt;_add()</span> function, which returns an Evas object (<span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>). The Evas object is passed to the functions that are used to configure the UI component.</p></li>
+<li>Stop the main loop and return to the <span style="font-family: Courier New,Courier,monospace">main()</span> function with the <span style="font-family: Courier New,Courier,monospace">elm_exit()</span> function.</li>
+<li>When your application terminates, shut down the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function.
+<p>The function frees the Elementary objects that were allocated in the main loop, so you do not need to separately deallocate them.</p></li></ol>
+
+
+<p>The following code snippet shows the <span style="font-family: Courier New,Courier,monospace">main()</span> function of a minimal Elementary application:</p>
+
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+&nbsp;&nbsp;&nbsp;elm_run();
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}</pre>
+
+
+<h2 id="objects" name="objects">Elementary Objects</h2>
+
+<p>All objects created using Elementary are of the <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> type. This means that both Evas and Elementary functions can be used on an Elementary object. However, use Elementary functions on Elementary objects only when you do not know which API to use.</p>
+
+<p>Since an Elementary object can take up a lot of memory, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid component, and to save memory. Using the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type, an Elementary UI component can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> instance is bigger than expected, but can still help in saving memory.</p>
+
+<p>For more information, see <a href="evas_objects_n.htm">Evas Objects</a>.</p>
+
+<h2 id="callbacks" name="callbacks">Elementary Callbacks</h2>
+
+<p>Several callbacks can be registered to handle Elementary object events:</p>
+
+<ul>
+<li>Evas event callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function to add a callback for input events (key up, key down, mouse wheel) on an Evas object. In case of an Elementary object, the callback is registered on the underlying Evas object without considering the Elementary object infrastructure (no event propagation).</p>
+</li>
+
+<li>Evas smart callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function to add a callback for a smart event emitted by an Elementary object. Smart callbacks can only be registered on smart objects, and the &quot;smart event&quot; to register must be implemented by the corresponding smart object. Otherwise, the callback does nothing. The callback does not apply to input events (keyboard or mouse).</p>
+</li>
+
+<li>Edje signal callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> function to add a callback for a signal coming from an Edje object (a theme object).</p>
+</li>
+
+<li>Elementary signal callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function to add a callback for a signal coming from an Elementary UI component&#39;s theme. The callback does not apply to input events (keyboard or mouse).</p>
+</li>
+
+<li>Elementary event callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_event_callback_add()</span> function to add a callback for an input event (keyboard or mouse) coming from an Elementary object. In contrast to the Evas event callback, the Elementary event callback takes the hierarchy of the object into account: the event can be propagated to the parents of the object, and the parents can process the event.</p>
+</li>
+</ul>
+
+<p>For more information about events related to Elementary objects, see <a href="event_handling_n.htm">Event Handling</a>. For more information about Evas objects and smart objects, see <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>.</p>
+
+ <h2 id="config" name="config">Managing Elementary Profiles</h2> 
+
+<p>An Elementary profile is a set of preconfigured options that affects the entire look and feel of an application. The options linked to a specific profile form an Elementary configuration, which can be used to store the desired set of options for use in multiple sessions. Once loaded, the Elementary profile configures all the options and sets the look and feel of your Elementary application.</p>
+
+<p>To manage Elementary profiles:</p>
+<ul>
+<li>List the existing profiles:
+<pre class="prettyprint">
+Eina_List *list = elm_config_profile_list_get();
+</pre>
+</li>
+<li>Set a particular profile:
+<pre class="prettyprint">
+elm_config_profile_set(&quot;myprofile&quot;);
+</pre>
+</li>
+<li>Get the current profile:
+<pre class="prettyprint">
+char *profile = elm_config_profile_get();
+</pre>
+</li>
+<li>To save the current option values as an Elementary configuration for later use, use the <span style="font-family: Courier New,Courier,monospace">Elementary Configuration Save</span> function.
+</li>
+<li>To reload the Elementary configuration saved for the current profile:
+<pre class="prettyprint">
+elm_config_reload();
+</pre>
+</li>
+</ul>
+
+<h2 id="options" name="options">Configuring Elementary Options</h2>
+
+<p>You can set the following options in the Elementary configuration. In addition, you can <a href="#customizing_themes">customize themes</a> and <a href="#config_focus">manage focus</a>.</p>
+<ul>
+
+<li>To scale UI components:
+<p>You can configure <a href="ui_components_n.htm#scalability">UI component scaling</a> in terms of both interactive and readable areas.</p>
+<ul>
+<li>Set the global scaling factor (for example, setting it to 2.0 doubles the size of all scalable UI components):
+<pre class="prettyprint">
+elm_config_scale_set(2.0);
+</pre>
+</li>
+
+<li>Set the finger size:
+<pre class="prettyprint">
+elm_config_finger_size_set(1.5);
+</pre>
+</li>
+</ul>
+</li>
+
+<li>To manage caches:
+<ul>
+<li>Enable the globally configured cache flush, and set the flush interval (in this example, to 60 seconds):
+<pre class="prettyprint">
+elm_config_cache_flush_enabled_set(EINA_TRUE);
+elm_config_cache_flush_interval_set(60);
+</pre>
+</li>
+
+<li>Configure the font and image cache sizes (to 500 and 5 000 000 bytes, respectively):
+<pre class="prettyprint">
+elm_config_cache_font_cache_size_set(500);
+elm_config_cache_image_cache_size_set(5000000);
+</pre>
+</li>
+
+<li>Set the Edje collection and Edje file cache sizes:
+<pre class="prettyprint">
+elm_config_cache_edje_file_cache_size_set(500);
+elm_config_cache_edje_collection_cache_size_set(500);
+</pre>
+</li>
+</ul>
+</li>
+
+
+<li>To configure the gesture layer:
+<p>You can set the duration of the long tap and double tap events on the gesture layer objects. The following example sets the duration to 500 ms.</p>
+
+<pre class="prettyprint">
+elm_config_glayer_long_tap_start_timeout_set(0.5);
+elm_config_glayer_double_tap_timeout_set(0.5);
+</pre>
+</li>
+<li>To manage scrolling:
+<ul>
+<li>Make the scroller bounce when it reaches its viewport&#39;s edge during scrolling by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_enabled_set()</span> function:
+<pre class="prettyprint">
+elm_config_scroll_bounce_enabled_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>Control the inertia of the bounce animation by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_friction_set()</span> function:
+<pre class="prettyprint">
+elm_config_scroll_bounce_friction_set(0.5);
+</pre>
+<p>You can also set the friction for a page scroll, include animations, and zoom animations.</p>
+</li>
+
+<li>Set the scroller to be draggable by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_thumbscroll_enabled_set()</span> function. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.
+
+<p>The following example sets the scroller to be draggable, defines that the number of pixels one must travel while dragging the scroller view to actually trigger  scrolling is 20 pixels.</p>
+<pre class="prettyprint">
+elm_config_scroll_thumbscroll_enabled_set(EINA_TRUE);
+elm_config_scroll_thumbscroll_threshold_set(20);
+</pre>
+</li>
+</ul>
+</li>
+
+<li>To configure long press events:
+<p>Get the current timeout before a long press event is retrieved, and modify it. The following example increases the timeout by 1 second.</p>
+<pre class="prettyprint">
+double lp_timeout = elm_config_longpress_timeout_get();
+elm_config_longpress_timeout_set(lp_timeout + 1.0);
+</pre>
+</li>
+
+<li>To configure tooltips:
+<p>Set the duration after which a tooltip is shown. The following example sets the delay to 2 seconds.</p>
+
+<pre class="prettyprint">
+elm_config_tooltip_delay_set(2.0);
+</pre>
+</li>
+
+<li>To configure the password show last feature:
+<p>The password show last feature enables the user to view the last input entered for a few seconds before it is masked.</p>
+
+<ul>
+<li>Enable the password show last feature:
+<pre class="prettyprint">
+elm_config_password_show_last_set(EINA_TRUE);
+</pre>
+</li>
+<li>Set the visibility timeout (how many seconds the input is visible): 
+<pre class="prettyprint">
+elm_config_password_show_last_timeout_set(5.0);
+</pre>
+</li>
+</ul>
+</li>
+<li>To set the Elementary engine:
+<p>You can define the rendering engine that Elementary uses to draw the windows. The following rendering engines are supported:</p>
+
+<ul>
+    <li>&quot;software_x11&quot;</li>
+    <li>&quot;fb&quot;</li>
+    <li>&quot;directfb&quot;</li>
+    <li>&quot;software_16_x11&quot;</li>
+    <li>&quot;software_8_x11&quot;</li>
+    <li>&quot;xrender_x11&quot;</li>
+    <li>&quot;opengl_x11&quot;</li>
+    <li>&quot;software_gdi&quot;</li>
+    <li>&quot;software_16_wince_gdi&quot;</li>
+    <li>&quot;sdl&quot;</li>
+    <li>&quot;software_16_sdl&quot;</li>
+    <li>&quot;opengl_sdl&quot;</li>
+    <li>&quot;buffer&quot;</li>
+    <li>&quot;ews&quot;</li>
+    <li>&quot;opengl_cocoa&quot;</li>
+    <li>&quot;psl1ght&quot;</li>
+</ul>
+
+<pre class="prettyprint">
+elm_config_engine_set(&quot;opengl_x11&quot;);
+</pre>
+</li>
+
+<li>To activate the access mode: 
+<p>Set the access mode as active, so that information about an Elementary object is read when the object receives an <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event.</p>
+</li>
+
+<li>To configure the selection mode: 
+<p>Set the selection mode so that the selection is cleared when the entry component is unfocused:</p>
+<pre class="prettyprint">
+elm_config_selection_unfocused_clear_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To enable mirroring: 
+<p>Elementary allows UI mirroring both on a single object and on the entire UI. If mirroring is enabled, an Elementary UI component displays as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the UI component are mirrored. Text is not mirrored.</p>
+
+<pre class="prettyprint">
+elm_config_mirrored_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To set the frame rate:
+<p>Define the frames per second (FPS) value for the <span style="font-family: Courier New,Courier,monospace">ecore_animator_frametime</span> and <span style="font-family: Courier New,Courier,monospace">edje_frametime</span> calculations. This example sets the FPS 60.</p>
+
+<pre class="prettyprint">
+elm_config_fps_set(60.0);
+</pre>
+</li>
+</ul>
+
+<h3 id="customizing_themes" name="customizing_themes">Customizing Themes</h3>
+
+<p>Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component in an application. You can change the theme using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable. You can also modify the theme globally with the <span style="font-family: Courier New,Courier,monospace">elementary_config</span> utility.</p>
+
+<p>For <a href="component_custom_n.htm">custom styles</a>, use extensions. Extensions allow you to write styles for specific UI components. Add a new extension to the list of Elementary themes with the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function, and apply the new style to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. Once set, the extension replaces the default theme of the UI component.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, you must know how the UI component is themed. If something is missing from the extension, it can break the UI component&#39;s behavior.</td>
+        </tr>
+    </tbody>
+</table>
+
+<p>To modify Elementary themes, you can also use overlays. An overlay can replace the look of all UI components by overriding the default styles. As with extensions, you must write the correct overlay theme for a UI component. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. To add or remove an overlay, use the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> and <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> functions.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">With overlays, you can replace the default view and affect every UI component. This is very similar to setting the theme for the whole application, and probably clashes with end user options. Using overlays also runs the risk of non-matching styles across the application. Unless you have a very good reason to use them, avoid overlays.</td>
+        </tr>
+    </tbody>
+</table>
+
+<h3 id="config_focus" name="config_focus">Managing Focus</h3>
+
+<p>When an Elementary object has the focus, input events are directly passed to that object in the application window. The focused object can also change its decoration to show the user where the focus is. In an Elementary application, only one object can have the focus at a time.</p>
+
+<p>To set the focus to a new Elementary object and take the focus away from the previous focused object, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function. You can make an object unfocusable with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_allow_set()</span> function.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Only visible objects can have the focus.</td>
+        </tr>
+    </tbody>
+</table>
+
+<p>Elementary supports focus chains that allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the UI components are added to the code. It is also possible to define custom focus chains, when needed.</p>
+
+<p>For more information on focus, see <a href="component_focus_n.htm">Component Focus</a>.</p>
+
+<p>To manage the focus:</p>
+
+<ul>
+<li>To define a custom focus chain, create an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, and add the Elementary objects to it in the desired focus order. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_set()</span> function to set the final list as the custom focus chain of the parent object (in the following example, <span style="font-family: Courier New,Courier,monospace">container_object</span> is the parent object).
+
+<pre class="prettyprint">Eina_List *obj_list = NULL;
+
+list = eina_list_append(list, obj1); 
+list = eina_list_append(list, obj4);
+list = eina_list_append(list, obj2); 
+list = eina_list_append(list, obj3);
+
+elm_object_focus_custom_chain_set(container_object, list);</pre>
+</li>
+
+<li>To remove the custom focus chain and use the default focus chain instead, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_unset()</span> function.
+</li>
+
+<li>To programmatically cycle through the focus chain, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_next()</span> function.
+</li>
+
+<li>To show a highlight on the focused object:
+
+<pre class="prettyprint">
+elm_config_focus_highlight_enabled_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To activate an animation when the focus shifts from one object to another:
+
+<pre class="prettyprint">
+elm_config_focus_highlight_animate_set(EINA_TRUE);
+</pre>
+</li>
+</ul>
+
+ <h2 id="scalability" name="scalability">Scaling UI Components</h2> 
+  
+<p>Elementary, through its configuration API (<span style="font-family: Courier New,Courier,monospace;">elm_config</span>), provides a way to scale UI components with two different parameters. <span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter is used when the interactive zones (clickable, editable) of the UI components need to be scaled in order to be comfortably used with a finger. <span style="font-family: Courier New,Courier,monospace;">Scale</span> parameter is responsible for scaling readable parts of a UI component (text or icons for example), so that it is more visible in the user interface.</p>
+
+<h3 id="Finger_Size" name="Finger_Size">Finger Size</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter scales UI components based on the user&#39;s finger size. This is useful when using a touchscreen with a finger rather than with a stylus. The finger size parameter is in pixels and determines the minimum size of a square on the screen that is reliably hittable with a finger. This parameter scales the input and interactive areas.</p>
+
+<p>The global finger size is set with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_set()</span> function. This adjusts the size and hit area of UI components so they are easy to hit with a finger. The current value is retrieved with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_get()</span> call. The finger size is always in pixel.</p>
+
+<p>To increase the current global finger size by 20px:</p>
+
+<pre class="prettyprint">
+Evas_Coord finger_size;
+
+// Get the current finger size
+finger_size = elm_config_finger_size_get();
+
+// Add 20px to finger size parameter and set it 
+// to the global Elementary configuration
+elm_config_finger_size_set(finger_size + 20);
+</pre>
+
+<h3 id="Scale" name="Scale">Scale</h3>
+
+<p>This parameter only scales the readable areas of the UI component (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">elm_config_scale_set()</span> function is used to set the global scaling factor, that affects to all the UI components. It is also possible to use <span style="font-family: Courier New,Courier,monospace;">elm_object_scale_set()</span> to set the scaling factor on a given Elementary UI component and all its children.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The scaling factor is multiplicative, if a child already has a scale size set, it is multiplied by its parent&#39;s scale size.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example sets the global scaling factor to 2.0. Then, the scaling factor of an existing Elementary object is set to 2.0, meaning that this object appears as if it had a 4.0 scale factor, the rest of the application is displayed with a 2.0 scaling factor:</p>
+
+<pre class="prettyprint">
+Evas_Object *button;
+
+// The button object is created and configured
+
+// Set the global scale factor to 2.0
+elm_config_scale_set(2.0);
+
+// Set the scaling factor of the button component to 2.0, this component
+// appears 4 times bigger than its initial size
+elm_object_scale_set(button, 2.0);
+</pre>
+
+<h3 id="Example" name="Example">Example</h3>
+
+<p>This chapter shows the visual result of finger size and scaling factors modification.</p>
+
+<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application</p> 
+<p align="center"><img alt="elementary_config application" src="../../images/scale_1_finger_50.png" /></p> 
+
+<p>The previous picture shows the <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application that enables the user to set global scale factor and finger size parameter. As the user drags the sliders, the UI is updated, directly showing the result of the new parameter value.</p>
+
+<p>The next picture shows the behavior when the finger size parameter has been increased to 1.30. The text of the sliders and the text of the items in the toolbar are bigger.</p>
+
+<p class="figure">Figure: Scale increased (1.30)</p> 
+<p align="center"><img alt="Scale increased (1.30)" src="../../images/scale_1.3_finger_50.png" /></p> 
+
+<p>A finger size increase is showed in the image below (increase from 50px to 90 px). Now, the buttons in the toolbar are bigger, so the user can more reliably hit them with a big finger.</p>
+
+<p class="figure">Figure: Finger size increased (90px)</p> 
+<p align="center"><img alt="Finger size increased (90px)" src="../../images/scale_1_finger_90.png" /></p> 
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">It is up to the theme (Edje file) to set the parts that are scalable. This is something that needs to be taken into account when developing a new Edje theme. This can be done in EDC with the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter. For more information on how to do that, see <a href="edje_intro_n.htm">Introduction to EDC Programming</a>.</td>
+</tr>
+</tbody>
+</table> 
+
+<h3 id="Scalable_EDC_Object" name="Scalable_EDC_Object">Creating Scalable EDC Objects</h3>
+
+<h4>Scale Parameter </h4>
+
+<p>This chapter explains how to make a scalable Edje object and give hints how to write an EDC file that is scalable. The example shows a basic button that is composed of a background image part and a swallow part that can receive some content.</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>To have a scalable object, set the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter to 1 on the parts you want to be scalable. Here the <span style="font-family: Courier New,Courier,monospace;">bg</span> and <span style="font-family: Courier New,Courier,monospace;">elm.swallow.content</span> parts must be scalable.</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;parts
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h4>Image Set</h4>
+
+<p>If your application needs to be used at different resolutions it is recommended to have 2 images for the background image <span style="font-family: Courier New,Courier,monospace;">bg.png</span>. Here the <span style="font-family: Courier New,Courier,monospace;">bg_low.png</span> is added to the application. It is used when the size of the image is under 500 px, and a <span style="font-family: Courier New,Courier,monospace;">bg_high.png</span> image is for higher resolutions. Use a set on the <span style="font-family: Courier New,Courier,monospace;">bg.png</span> image.</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_low.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 200 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_high.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 201 101 5000 5000;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The image below shows three buttons with only a background part visible (the SWALLOW part is empty).</p>
+
+<p class="figure">Figure: Image set example</p> 
+<p align="center"><img alt="Image set example" src="../../images/scale.png" /></p> 
+
+<p>The first button&#39;s size is 100x50 pixels, the background image (<span style="font-family: Courier New,Courier,monospace;">bg_low.png</span>) is the same size. The second button is twice bigger than the first one (200x100 pixels). The image is scaled and it does not render well, the borders are quite blurry.</p>
+
+<p>To prevent this, the image set has a bigger image to use when the size is bigger than 200x100 pixels (<span style="font-family: Courier New,Courier,monospace;">bg_high.png</span>). The third button size is 201x101 pixels and it uses the new image, which has a better quality than the scaled image.</p>
+
+<h4>Image Borders</h4>
+
+<p>When the button is resized, the image part is also resized because it is marked as scalable. To get the image resized but to keep the image border as it is, use the <span style="font-family: Courier New,Courier,monospace;">border</span> parameter. It specifies the border size which is not resized even if the image is.</p>
+
+<p>To add a 40 pixel border on the left and right part of the <span style="font-family: Courier New,Courier,monospace;">bg</span> image and a 20 pixel border on top and bottom borders:</p>
+
+<pre class="prettyprint">
+parts 
+{
+&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.border: 40 40 20 20;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The image below shows that when resizing the button, the corners keep their initial ratio. Only the middle part of the button is resized.</p>
+
+<p class="figure">Figure: Border example</p> 
+<p align="center"><img alt="Border example" src="../../images/border.png" /></p> 
+
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/ui_components_wn.htm b/org.tizen.ui.practices/html/native/efl/ui_components_wn.htm
new file mode 100644
index 0000000..49b57f8
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/ui_components_wn.htm
@@ -0,0 +1,883 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Wearable UI Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+		<ul class="toc">
+				<li><a href="#styles_r">Wearable Rectangular UI Component Styles</a></li>			
+				<li><a href="#styles_c">Wearable Circular UI Component Styles</a></li>
+		</ul>
+	<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>		
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Wearable UI Components</h1> 
+  
+<p>The EFL Elementary is a set of fast, finger-friendly, scalable, and themeable UI component libraries. The number of supported UI components is around 80, including both containers and non-containers. Originally, the Elementary was developed as part of the Window Manager development on Desktop devices. For the wearable profile, Tizen reused the proper UI components and created new UI styles for rectangular and circular wearable devices, and then enhanced and adjusted all of them for Tizen native applications.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The UI components are wearable-friendly: for example, the Circle Datetime component extends the <span style="font-family: Courier New,Courier,monospace">elm_date_time</span> by visualizing the selected field, the Circle Genlist component provides a scrollbar with circular movement, and the Circle progress bar/scroller/slider components are adjusted to the circular design.</p>
+<p>The wearable UI components were designed to allow the user to interact with small touch screen-equipped wearable devices with rotary component parts. Therefore, when developing wearable applications, you can easily use them through the wearable-related infrastructure in company with full notification and when reacting to touch and rotary events and the user finger size.</p>  
+ 
+<table border="1"> 
+   <caption>
+     Table: Available UI components
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+	<th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+    </tr> 
+	<tr> 
+	<td>Navigation elements</td>
+     <td><a href="component_index_wn.htm">Index</a></td> 
+     <td>The index component provides an index for fast access to another group of UI items.</td>
+    </tr>	
+	<tr> 
+	 <td rowspan="8">Presentation views</td>
+     <td><a href="component_win_wn.htm">Win</a></td> 
+     <td>The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_background_wn.htm">Background</a></td> 
+     <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_genlist_wn.htm">Genlist</a></td> 
+     <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
+    </tr>
+	<tr> 
+     <td><a href="component_list_wn.htm">List</a></td> 
+     <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_label_wn.htm">Label</a></td> 
+     <td>The label component displays text with simple HTML-like markup.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_image_wn.htm">Image</a></td> 
+     <td>The image component can load and display an image from a file or from memory.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_icon_wn.htm">Icon</a></td> 
+     <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_progressbar_wn.htm">Progressbar</a></td> 
+     <td>The progressbar component can be used to display the progress status of a given job.</td>
+    </tr>
+	<tr> 
+	 <td rowspan="6">User input</td>
+     <td><a href="component_button_wn.htm">Button</a></td> 
+     <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_check_wn.htm">Check</a></td> 
+     <td>The check component toggles the value of a Boolean between true and false.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_radio_wn.htm">Radio</a></td> 
+     <td>The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_entry_wn.htm">Entry</a></td> 
+     <td>The entry component is a box to which the user can enter text.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_slider_wn.htm">Slider</a></td> 
+     <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_datetime_wn.htm">Datetime</a></td> 
+     <td>The datetime component can display and input date and time values.</td>
+    </tr>	
+	<tr> 
+	 <td rowspan="3">Assist views</td>
+     <td><a href="component_popup_wn.htm">Popup</a></td> 
+     <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
+    </tr>	
+	<tr> 
+     <td><a href="component_ctxpopup_wn.htm">Ctxpopup</a></td> 
+     <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_notify_wn.htm">Notify</a></td> 
+     <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
+    </tr>
+	<tr> 
+	<td>Transition</td>
+     <td><a href="elementary_transit_effect_tutorial_n.htm">Transit</a></td> 
+     <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations.</td>
+    </tr>
+	<tr> 
+	<td>Hardware acceleration</td>
+     <td><a href="component_glview_wn.htm">GLView</a></td> 
+     <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
+    </tr>
+	<tr> 
+	<td>Miscellaneous</td>
+     <td><a href="component_plug_wn.htm">Plug</a></td> 
+     <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
+    </tr>
+   </tbody> 
+  </table>   
+  
+<p>The following UI components were designed for specific circular wearable devices which have rotary component parts. In a circular device, you can draw round UI components, such as a slider, progressbar, and scroller. Generally, wearable UI components provide compatibility between the rectangular and circular wearable devices. However, use circular UI components for circular wearable devices only, because they have a dependency with the round UX and rotary events. For more information on the compatibility of the UI components between rectangular and circular, see the Wearable Design Guidelines.</p>
+
+ <table border="1"> 
+   <caption>
+     Table: Available circular UI components
+   </caption> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+    </tr>
+	<tr> 
+     <td><a href="component_circ_datetime_wn.htm">Circle Datetime</a></td> 
+     <td>The circle datetime extends <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by visualizing the selected field.</td>
+    </tr> 	
+	<tr> 
+     <td><a href="component_circ_genlist_wn.htm">Circle Genlist</a></td> 
+     <td>The circle genlist provides a scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</td>
+    </tr>
+	<tr>
+     <td><a href="component_circ_object_wn.htm">Circle Object</a></td> 
+     <td>The circle object extends elementary components in a form of circular design. Sometimes a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.
+	 <p>Circular components can usually be added with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_[component_name]_add()</span> function, which returns a circle object handle. Circular components are shown in a form of an arch with radius, line width, and color. These properties can be set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs. The circle object can also take a rotary event. Generally, a clockwise rotary event increases the value of the rotary event activated by the circle object, and a counter clockwise rotary event decreases the value.</p></td>
+    </tr>
+	<tr> 
+     <td><a href="component_circ_progressbar_wn.htm">Circle Progressbar</a></td> 
+     <td>The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_circ_scroller_wn.htm">Circle Scroller</a></td> 
+     <td>The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_circ_slider_wn.htm">Circle Slider</a></td> 
+     <td>The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span>, but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in a circular design.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_circ_surface_wn.htm">Circle Surface</a></td> 
+     <td>The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_circ_rotary_wn.htm">Rotary Selector</a></td> 
+     <td>The rotary selector shows multiple items around a selector, and can change pages through rotary events.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_circ_option_wn.htm">More Option</a></td> 
+     <td>The more option contains a cue button, which, when clicked, reveals a rotary selector view.</td>
+    </tr>
+	<tr> 
+     <td><a href="component_circ_spinner_wn.htm">Circle Spinner</a></td> 
+     <td>The circle spinner shows a spinner value as a marker around the circular display.</td>
+    </tr>	
+   </tbody> 
+  </table>   
+  
+<h2 id="styles_r" name="styles_r">Wearable Rectangular UI Component Styles</h2> 
+  
+<p>EFL can separate the GUI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
+
+<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component. For more detailed information, see the <a href="theme_n.htm">Themes</a>.</p> 
+
+<table>
+<caption>Table: Button styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/button_default_wn.png" /> </td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>green</td>
+ <td><img src="../../images/button_green_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>orange</td>
+ <td><img src="../../images/button_orange_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>red</td>
+ <td><img src="../../images/button_red_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>nextdepth</td>
+ <td><img src="../../images/button_next_wn.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>naviframe/title_icon</td>
+ <td><img src="../../images/button_titleicon_wn.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>The icon can be set with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(btn, &quot;icon&quot;, ic)</span> function.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Check styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/check_default_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>on&amp;off</td>
+ <td><img src="../../images/check_onoff_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Contextual popup (Ctxpopup) styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/contextual_wn.png" /></td>
+ <td>Use the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function to add both text and an icon to the list.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Datetime styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>datepicker_layout</td>
+ <td><img src="../../images/datetime_date_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>timepicker_layout</td>
+ <td><img src="../../images/datetime_time_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/entry_default_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td></td>
+ <td>The guide text is automatically erased when the main text is entered.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Genlist styles</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/genlist_def_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>group_index</td>
+ <td><img src="../../images/genlist_group_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr> 
+ <tr>
+ <td>1text</td>
+ <td><img src="../../images/genlist_1text_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon</td>
+ <td><img src="../../images/genlist_1text1icon_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>2text</td>
+ <td><img src="../../images/genlist_2text_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>2text.1</td>
+ <td><img src="../../images/genlist_2text1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td></td>
+  <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon.divider</td>
+ <td><img src="../../images/genlist_1text1icondivider_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon.1</td>
+ <td><img src="../../images/genlist_1text1icon1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+   <tr>
+ <td>2text.1icon.1</td>
+ <td><img src="../../images/genlist_2text1icon1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+   <tr>
+ <td>multiline/1text</td>
+ <td><img src="../../images/genlist_multi1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the multi-line text.</td>
+ <td></td>
+ <td></td>
+ </tr>
+   <tr>
+ <td>multiline/2text</td>
+ <td><img src="../../images/genlist_multi2_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the multi-line sub text.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+
+<table>
+<caption>Table: Index styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>thumbnail</td>
+ <td><img src="../../images/index_thumb_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>tab</td>
+ <td><img src="../../images/index_tab_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Popup styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/popup_default_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>toast</td>
+ <td><img src="../../images/popup_toast_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Progressbar styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/progressbar_default_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>pending_list</td>
+ <td><img src="../../images/progressbar_pending_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>process</td>
+ <td><img src="../../images/progressbar_process_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>process/groupindex</td>
+ <td><img src="../../images/progressbar_group_wn.png" /></td>
+ </tr> 
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Radio styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/radio_default_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Slider styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+
+</tr>
+ <tr>
+ <td>horizontal/default</td>
+ <td><img src="../../images/slider_hor_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+ </tbody>
+</table>
+
+ 
+<h2 id="styles_c" name="styles_c">Wearable Circular UI Component Styles</h2> 
+  
+<p>EFL can separate the GUI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
+
+<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component.</p> 
+
+<table>
+<caption>Table: Button styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/button_default_wn.png" /> </td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>bottom</td>
+ <td><img src="../../images/button_bottom_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Check styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/check_default_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>small</td>
+ <td><img src="../../images/check_small_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>on&amp;off</td>
+ <td><img src="../../images/check_onoff_o_wn.png" /></td>
+ </tr> 
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Contextual popup (Ctxpopup) styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>select_mode</td>
+ <td><img src="../../images/contextual_select_o_wn.png" /></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>select_mode/top</td>
+ <td><img src="../../images/contextual_top_o_wn.png" /></td>
+ <td>Pair this style with select_mode/bottom.</td>
+ </tr>
+  <tr>
+ <td>select_mode/bottom</td>
+ <td><img src="../../images/contextual_bottom_o_wn.png" /></td>
+ <td>Pair this style with select_mode/top.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Datetime styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>datepicker/circle</td>
+ <td><img src="../../images/datetime_date_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>timepicker/circle</td>
+ <td><img src="../../images/datetime_time_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/entry_default_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td></td>
+ <td>The guide text is automatically erased when the main text is entered.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<table>
+<caption>Table: Genlist styles</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/genlist_def_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+<tr>
+ <td>title</td>
+ <td><img src="../../images/genlist_title_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr> 
+  <tr>
+ <td>groupindex</td>
+ <td><img src="../../images/genlist_group_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr> 
+ <tr>
+ <td>1text</td>
+ <td><img src="../../images/genlist_1text_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon</td>
+ <td><img src="../../images/genlist_1text1icon_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>2text</td>
+ <td><img src="../../images/genlist_2text_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon.divider</td>
+ <td><img src="../../images/genlist_1text1icondivider_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon.1</td>
+ <td><img src="../../images/genlist_1text1icon1_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+   <tr>
+ <td>2text.1icon.1</td>
+ <td><img src="../../images/genlist_2text1icon1_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+   <tr>
+ <td>editfield</td>
+ <td><img src="../../images/genlist_edit_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+
+<table>
+<caption>Table: Index styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>thumbnail</td>
+ <td><img src="../../images/index_thumb_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>circle</td>
+ <td><img src="../../images/index_circle_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Popup styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>circle</td>
+ <td><img src="../../images/popup_circle_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>toast/circle</td>
+ <td><img src="../../images/popup_toast_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Progressbar styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>process</td>
+ <td><img src="../../images/progressbar_process_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>process/small</td>
+ <td><img src="../../images/progressbar_small_o_wn.png" /></td>
+ </tr> 
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Radio styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/radio_default_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Slider styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+
+</tr>
+ <tr>
+ <td>horizontal/default</td>
+ <td><img src="../../images/slider_hor_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+ </tbody>
+</table>
+
+ 
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/efl/ui_containers_n.htm b/org.tizen.ui.practices/html/native/efl/ui_containers_n.htm
new file mode 100644
index 0000000..44bf030
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/ui_containers_n.htm
@@ -0,0 +1,131 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>UI Containers: Creating Layouts Using Container UI Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+
+		
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>	
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>UI Containers: Creating Layouts Using Container UI Components</h1> 
+	
+<p>All applications use containers to create the layout of the UI. The EFL and Elementary support several ways to create this layout. You can use predefined layouts or animated layouts, or you can create your own layouts. It is important to note that container UI components do not have their own visual identity - only logical structures for assignment or placement of the UI components.</p>
+
+<p>When you use container components, such as naviframe, conformant, button, and box, you need to understand certain APIs related to alignment, and EDC parts for, for example, the core layout and animated layout. For more information on the containers EDC parts, see <a href="edc_positioning_n.htm">Positioning and Laying out Parts Using the EDC File</a>. The use of the container UI components only differs from the use of the UI components through their absence of a visual identity.</p>
+
+<p>Most of the time, your application has to manage multiple views. The easiest way to handle them with the EFL is to create a naviframe object. This object is a container. At first, it is used to contain the pages your application is composed of. Every Tizen application can use this top-layer object to facilitate navigation. More details can be found in <a href="naviframe_tutorial_n.htm">Creating a Naviframe for Navigation</a>.</p>
+
+<p>Another interesting object that has to be present in every application is the conformant object. Conformant is a container component that accounts for the space taken up by the indicator, virtual keyboard, and softkey windows. The conformant content will be resized and positioned based on the space available. When the virtual keyboard is displayed, the content does not change.</p>
+
+<p class="figure">Figure: Basic EFL application structure</p>
+<p align="center"><img alt="Basic EFL application structure" src="../../images/elementary_app.png" /></p>
+
+<h2 id="containers" name="containers">Container Components</h2> 
+  
+ <p>The following table lists the available UI container components.</p>
+ 
+   <table border="1"> 
+   <caption>
+     Table: Available container components
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Container name</th> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+    </tr> 	
+	<tr> 
+     <td><a href="containers_n.htm#box">Box</a></td>  
+     <td>One of the most simple containers in the EFL is a box.</td>
+    </tr>
+	<tr> 
+     <td><a href="containers_n.htm#conformant">Conformant</a></td> 
+     <td>A conformant is a container component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.</td>
+    </tr>
+	<tr> 
+     <td><a href="containers_n.htm#grid">Grid</a></td>  
+     <td>In a grid, objects are placed at specific positions along a fixed grid.</td>
+    </tr>
+	<tr> 
+     <td><a href="containers_n.htm#layout">Layout</a></td> 	 
+     <td>A layout is a container component that takes a standard Edje design file and wraps it very thinly in a UI component.</td>
+    </tr>
+	<tr> 
+     <td><a href="containers_n.htm#mapbuf">Mapbuf</a></td> 	 
+     <td>A mapbuf is a container component that uses an Evas map to hold a content object. This UI component is used to improve the moving and resizing performance of complex UI components.</td>
+    </tr>
+	<tr> 
+     <td><a href="containers_n.htm#naviframe">Naviframe</a></td>  
+     <td>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.</td>
+    </tr>
+	<tr> 
+     <td><a href="containers_n.htm#panes">Panes</a><br/>(in <strong>mobile applications only</strong>)</td> 	 
+     <td>A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</td>
+    </tr>
+	<tr> 
+     <td><a href="containers_n.htm#scroller">Scroller</a></td> 	 
+     <td>A scroller holds (and clips) a single object and allows you to scroll across it.</td>
+    </tr>
+	<tr> 
+     <td><a href="containers_n.htm#table">Table</a></td> 	 
+     <td>A table is like a box but with 2 dimensions.</td>
+    </tr>
+	</tbody> 
+  </table> 
+
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_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.practices/html/native/efl/ui_scalability_n.htm b/org.tizen.ui.practices/html/native/efl/ui_scalability_n.htm
new file mode 100644
index 0000000..5c5bca9
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/efl/ui_scalability_n.htm
@@ -0,0 +1,70 @@
+<!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>Scaling: Handling Screen and Object Sizes</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+			<li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Scaling: Handling Screen and Object Sizes</h1> 
+  
+<p>Supporting UI scalability in a user interface toolkit means that container components and UI components are scaled properly when the resolution or screen size changes. The Elementary library allows you to manipulate scaling on a per-UI-component basis using a scale factor based on the screen resolution, size, and profile configurations.</p>
+
+<p>Tizen native applications can run on different types of devices, such as wearable, phone, tablets, and TVs. Tizen also supports various resolutions (WVGA - XQXGA) with the same layouts and resources. However, remember that you must always polish your work to create an optimal application for each device.</p>
+  
+<p>The main scalability features are:</p>
+<ul>
+<li><a href="multiple_screens_n.htm">Multiple Screen Support</a> <p>Enables you to design applications for different kinds of screens.</p></li>
+<li><a href="scalability_n.htm">Scalability Support</a> <p>Enables you to design applications so that their UI can be scaled for diverse devices without problems.</p></li>
+<li><a href="resource_fallback_n.htm">Resource Fallback Support</a> <p>Enables you to design applications which can use alternative resources for the device display state.</p></li>
+</ul>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/native/guides_n.htm b/org.tizen.ui.practices/html/native/guides_n.htm
new file mode 100644
index 0000000..9aa849b
--- /dev/null
+++ b/org.tizen.ui.practices/html/native/guides_n.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+	<script type="text/javascript" src="../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+	<title>Tizen Native UI Practices</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
+			<li><a href="../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
+			<li><a href="../../../org.tizen.native.mobile.apireference/group__dali.html">DALi API References for Mobile Native</a></li>
+			<li><a href="../../../org.tizen.native.wearable.apireference/group__dali.html">DALi API References for Wearable Native</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+<font size="11">Native UI Practices</font></h1>
+
+<p>The UI framework features include various aspects of creating a visual outlook for the user application to ensure the best possible user experience.</p>
+
+<p>The UI framework is a universal, reusable software environment that provides the essential building blocks as part of the Tizen platform to facilitate the development of Tizen native applications. The framework provides the window, UI components, and scene-based graphic rendering architecture needed to manage your application user interface. In addition, the framework provides animations and effects needed to make your application more fresh and vivid, event handling and the main loop to interact with the user and system, and more features, such as scalability, and font setting.</p>
+
+<p>The Tizen platform provides the following native UI toolkit frameworks for developing a native application:</p> 
+
+<ul>
+	<li><a href="efl/guides_efl_n.htm">EFL (Enlightenment Foundation Libraries)</a>
+	<p>EFL provides streamlined graphic core libraries you need to create powerful applications. EFL needs lower memory but provides high performance, and supports a retained mode graphics system and user-centric features, such as themes, 2D/3D effects, and accessibility. In addition, EFL supports various resolutions with the same layout, fast and small file systems, a variety of programming language bindings, and a separate UI and logic.</p>
+	<p>Generally, select the EFL UI toolkit if you are creating a 2D-based Tizen native application. However, EFL supports 2.5D and 3D effects and 3D objects as well.</p></li>
+	<li><a href="dali/guides_dali_n.htm">DALi (Dynamic Animation Library)</a>
+	<p>DALi is based on OpenGL ES 2.0 and 3.0; however it hides the complexity of the OpenGL ES API from you. DALi requires a GPU (Graphical Processing Unit) on the device.</p>
+	<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>
+</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>
+
diff --git a/org.tizen.ui.practices/html/scripts/common.js b/org.tizen.ui.practices/html/scripts/common.js
new file mode 100644
index 0000000..60250b6
--- /dev/null
+++ b/org.tizen.ui.practices/html/scripts/common.js
@@ -0,0 +1,1752 @@
+$(document).ready(function(){
+	$('#contents table').each(function(){
+		if (!$(this).parent().hasClass('table')) {
+			$(this).wrap('<div class="table"></div>');
+		}
+	});
+
+	// Lnb Menu Initialize
+	if($('div#contents').find('.lnb').length){
+		if($("ul li.events_news").size() > 0) {
+			$("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
+		}
+		initLnb();
+		initScript(staticURL + "/js/fixednavbar.js", function(){});
+	}
+
+	//family site
+	if($('div#footer').find('dl#familySlider').length){
+		fn_rollToEx('familySlider', 'sliderBanner', 1, true);
+	}
+
+	// Svn Commit Test
+	
+	// Language Selection
+	if($('div#header').find('.util').length){
+		var $lang = $('div#header').find('.util');
+		$lang.find('a.lang').toggle(function(){
+				$(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
+			},function(){
+				$(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
+			});
+
+		$lang.bind('mouseleave',function(){
+			$(this).find('ul.language').hide();
+			$lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+		});
+
+		$lang.find('ul.language').children().last().on("keydown", function(e) {
+			if(e.which == 9 && e.shiftKey) {
+				return true;
+			}
+			
+			if(e.which == 9) {
+				e.preventDefault();
+				$lang.find('ul.language').hide();
+				$lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+				setTimeout(function() {
+					$("#searchTop").focus();
+				}, 1);
+			}
+		});
+	}
+
+	// Open the Sitemap
+	var $open = $('div#header').find('.bt-open');
+	$open.bind('click',function(){
+		var $self = $(this);
+		var $sitemap = $('div#wrapper').find('div#sitemap');
+		//var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
+
+		if($sitemap.is(':visible')){
+			var source = $self.css('background-image').replace('_.gif','.gif');
+			//if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
+
+			$self.attr('title','open sitemap');
+		}else{
+			var source = $self.css('background-image').replace('.gif','_.gif');
+			//if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
+
+			$self.attr('title','close sitemap');
+		}
+		
+		$self.css('background-image',source);
+		$sitemap.slideToggle('fast');
+		
+		$sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
+			var source = $self.css('background-image').replace('_.gif','.gif');
+			$self.css('background-image',source);
+			$sitemap.slideToggle('fast');
+		});
+
+	});
+
+	// Search Auto Complete
+	var $search = $('div#header').find('fieldset.search');
+	var $searchList = $search.find('#topAutocomplete>ul');
+
+	if($search.length){
+		$search.find('> input').each(function(){
+			$(this).bind({
+				keydown : function(e){
+			
+					if(e.type=='keydown'&& $(this).val().length!=0){
+						$search.find('#topAutocomplete').show();
+						var hei = $searchList.outerHeight();
+						if(hei>400){
+							$searchList.css({'height':'400px','overflow-y':'auto'});
+						}
+					}
+					if(e.keyCode==9){
+						$search.unbind('focusout.search');
+					}
+					if(e.keyCode==40){
+						$search.find('#topAutocomplete>ul').children(':first').find('a').focus();
+						//window.scrollTo(0,0);
+					}
+				},
+				focusin : function(e){
+					if($(this).val()==='Search'){
+						$(this).val('');
+					}
+				},
+				focusout : function(e){
+					if($(this).val().length==0) $(this).val('Search');
+				}
+			});
+		});
+
+		//$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
+		//	if(e.keyCode==40){
+		//		$(this).parent().next().css('border','1px solid red').find('a').focus();
+		//	}
+		//});
+
+		$search.find('#topAutocomplete').bind('mouseleave',function(e){
+			if($search.find('> input').val().length==0){
+				$search.find('> input').val('Search');
+			}
+			$search.find('#topAutocomplete').hide();
+		});
+
+		$search.find('#topAutocomplete>ul').children().last().focusout(function(){
+			$search.find('> input').val('Search');
+			$search.find('#topAutocomplete').hide();
+			
+			//$search.bind('focusout.search', function(){
+			//	$(this).find('> input').val('Search');
+			//	$(this).find('#topAutocomplete').hide();
+			//});
+		});
+	}
+});
+
+// 비차단 동적 스크립트 로딩
+function initScript(url, callback){
+	var script = document.createElement("script");
+	script.type = "text/javascript";
+
+	if(script.readyState){ // 인터넷 익스플로러
+		script.onreadystatechange = function(){
+			if(script.readyState=="loaded" || script.readyState=="complete"){
+				script.onreadystatechange = null;
+				callback();
+			}
+		};
+	}else{	// 다른  브라우저
+		script.onload = function(){
+			callback();
+		};
+	}
+
+	script.src = url;
+	document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+
+// lnb
+function initLnb(){
+	var sMenu = $('.lnb');
+	var sItem = sMenu.find('>li');
+
+	sItem.each(function(){
+		if($(this).find('a').hasClass('more')){
+			if($(this).find('ul').is(":visible")) {
+				$('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0));	
+			} else {
+				$('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
+			}
+		}
+	});
+	
+	var setIcoArrText = function(obj) {
+		if(obj.next().is(":visible")) {
+			obj.text("close submenu");
+		} else {
+			obj.text("open submenu");
+		}
+	}
+	
+	sItem.find('.ico-arr').on("click", function() {
+		var $that = $(this);
+		var liBox = $that.parent();   
+		var ulBox = $that.next();
+		
+		sItem.not(liBox).not(".on").find("a.more").next().next().hide();
+		sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
+		
+		if(liBox.hasClass("on")) {
+			if(ulBox.is(":visible")) {
+				ulBox.hide();
+				$that.addClass("ico-on");
+			} else {
+				ulBox.show();
+				$that.removeClass("ico-on");
+			}
+			setIcoArrText($that);
+			return true;
+		}
+		
+		if(liBox.hasClass("active")) {
+			liBox.removeClass("active").find("a").eq(0).removeClass("bov");
+			ulBox.hide();
+		} else {
+			liBox.addClass("active").find("a").eq(0).addClass("bov");
+			ulBox.show();
+		}
+		setIcoArrText($that);
+	});
+
+	sItem.hover(function(){
+		if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+		$(this).find("a").eq(0).addClass("bov");
+	},function(){
+		if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+		 $(this).find("a").eq(0).removeClass("bov");
+
+	});
+}
+
+//footer rolling banner
+function fn_rollToEx(container,objectId,step,auto){
+
+	// 롤링할 객체를 변수에 담아둔다.
+	var el = $('#'+container).find('#'+objectId);
+	var lastChild;
+	var speed = 3000;
+	var timer = 0;
+	var autoplay = false;
+
+	el.data('prev', $('#'+container).find('.prev'));	//이전버튼을 data()메서드를 사용하여 저장한다.
+	el.data('next', $('#'+container).find('.next'));	//다음버튼을 data()메서드를 사용하여 저장한다.
+	el.data('size', el.children().outerWidth());		//롤링객체의 자식요소의 넓이를 저장한다.
+	el.data('len', el.children().length);				//롤링객체의 전체요소 개수
+	el.data('animating',false);
+	el.data('step', step);								//매개변수로 받은 step을 저장한다.
+	el.data('autoStart', false);								//매개변수로 받은 step을 저장한다.
+
+	el.css('width',el.data('size')*el.data('len'));		//롤링객체의 전체넓이 지정한다.
+
+	if(arguments.length==4){
+		el.data('autoStart', auto);
+	}
+
+	if(el.data('autoStart')){
+		if(timer==0){
+			timer = setInterval(moveNextSlide, speed);
+			autoplay = true;
+		}
+	}
+
+	el.bind({
+		mouseenter:function(){
+			if(!autoplay) return false;
+
+			if(timer!=0 && el.data('autoStart')){
+				clearInterval(timer);
+				timer=0;
+			}
+		},
+		mouseleave:function(){
+			if(!autoplay) return false;
+
+			if(timer==0 && el.data('autoStart')){
+				timer = setInterval(moveNextSlide, speed);
+			}
+		}
+	});
+
+
+	//el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
+	el.data('prev').bind({
+		click:function(e){
+			e.preventDefault();
+			movePrevSlide();
+		},
+		mouseenter:function(){
+
+			$(this).find('img').addClass('btnOn');
+
+			if(!autoplay) return false;
+
+			if(timer!=0 && el.data('autoStart')){
+				clearInterval(timer);
+				timer=0;
+			}
+		},
+		mouseleave:function(){
+
+			$(this).find('img').removeClass('btnOn');
+
+			if(!autoplay) return false;
+
+			if(timer==0 && el.data('autoStart')){
+				timer = setInterval(moveNextSlide, speed);
+			}
+		}
+	});
+
+	//el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
+	el.data('next').bind({
+		click:function(e){
+			e.preventDefault();
+			moveNextSlide();
+		},
+		mouseenter:function(){
+
+			$(this).find('img').addClass('btnOn');
+
+			if(!autoplay) return false;
+
+			if(timer!=0 && el.data('autoStart')){
+				clearInterval(timer);
+				timer=0;
+			}
+		},
+		mouseleave:function(){
+
+			$(this).find('img').removeClass('btnOn');
+
+			if(!autoplay) return false;
+
+			if(timer==0 && el.data('autoStart')){
+				timer = setInterval(moveNextSlide, speed);
+			}
+		}
+	});
+
+	function movePrevSlide(){
+		if(!el.data('animating')){
+			//전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
+			var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
+			lastItem.prependTo(el);		//복사된 요소를 롤링객체의 앞에 붙여놓는다.
+			el.children().eq(-(el.data('step')+1)).nextAll().remove();	//step개수만큼 선택된 요소를 끝에서 제거한다
+			el.css('left','-'+(el.data('size')*el.data('step'))+'px');	//롤링객체의 left위치값을 재설정한다.
+		
+			el.data('animating',true);	//애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
+
+			el.animate({'left': '0px'},'normal',function(){		//롤링객체를 left:0만큼 애니메이션 시킨다.
+				el.data('animating',false);
+			});
+		}
+		return false;
+	}
+
+    function moveNextSlide(){
+		if(!el.data('animating')){
+			el.data('animating',true);
+
+			el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){	//롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
+				//전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
+				var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
+				firstChild.appendTo(el);	//복사된 요소를 롤링객체의 끝에 붙여놓는다.
+				el.children().filter(':lt('+el.data('step')+')').remove();	//step개수만큼 선택된 요소를 앞에서 제거한다
+				el.css('left','0px');	////롤링객체의 left위치값을 재설정한다.
+
+				el.data('animating',false);
+			});
+		}
+		return false;
+	}
+
+}
+
+function fn_slide(options){
+
+	var opts = jQuery.extend({},options);
+
+	var $bt = $('#'+opts.container).find('#'+opts.bt).children();					//롤링버튼에 대한 선택자
+	var $obj = $('#'+opts.container).find('#'+opts.obj);								//objectId를 id로 갖는 롤링객체의 선택자
+	var $prev = $('#'+opts.container).find('#'+opts.prev).hide();					//이전버튼에 대한 선택자
+	var $next = $('#'+opts.container).find('#'+opts.next);							//다음버튼에 대한 선택자
+	var size = $obj.children().outerWidth();				//롤링객체의 각 이미지 넓이값
+	var len = $obj.children().length;						//롤링객체의 이미지 갯수
+	var effect = false;										//슬라이드효과를 위한 boolean변수
+	var auto = false;
+	var current = 0;										//현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
+	var time;
+
+
+	$obj.css('width',size*len);								//롤링객체의 전체넓이 지정
+	effect = opts.effect;
+	auto = opts.auto;
+
+	if(auto){
+		time = setTimeout('slideShow()',3000);
+	}
+
+	slideShow = function(){
+
+		if(current < len-1){
+			current++;
+		}else{
+			current=0;
+		}
+
+		controllStatus();
+
+		moveControl('next');
+
+		time = setTimeout('slideShow()',3000);
+	}
+
+	controllStatus = function(){
+		//이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
+		if(current>0||current<len-1){				
+			$prev.show();
+			$next.show();
+		}
+		if(current==0){
+			$prev.hide();
+			$next.show();
+		}
+		if(current>=len-1){
+			$prev.show();
+			$next.hide();
+		}
+	}
+
+	moveControl = function(msg){
+		if(opts.bt!=null){
+			msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
+							:$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));	//이전에 활성화된 롤링버튼을 비활성화
+			$bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));		//현재 인덱스값을 가지는 롤링버튼을 활성화
+		}
+
+		if(effect!=true){				//action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+			$obj.children().hide();
+			$obj.children().eq(current).show();
+		}else{							//action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+			$obj.animate({'left':'-'+size*current},'slow');
+		}
+	}
+
+	$obj.bind({
+		mouseenter:function(){
+			if(!auto) return false;
+			clearTimeout(time);
+		},
+		mouseleave:function(){
+			if(!auto) return false;
+			time = setTimeout('slideShow()',3000);
+		}
+	});
+
+	//롤링 버튼 클릭시
+	$bt.bind({
+		mouseenter:function(){
+			if(!auto) return false;
+			clearTimeout(time);
+		},
+		mouseleave:function(){
+			if(!auto) return false;
+			time = setTimeout('slideShow()',3000);
+		},
+		click:function(){
+			var idx = $bt.index(this);					//클릭한 롤링버튼의 인덱스값 저장
+
+			current = idx;								//롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
+
+			controllStatus();
+
+			if(effect!=true){				//action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+				$obj.children().hide();
+				$obj.children().eq(current).show();
+			}else{							//action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+				$obj.animate({'left':'-'+size*current},'slow');
+			}
+
+			// 모든 롤링 버튼을 비활성화
+			$bt.each(function(){
+				var source = $(this).find('img').attr('src').replace('_.png','.png');
+				 $(this).find('img').attr('src',source);
+			});
+
+			// 선택한 롤링버튼을 활성화
+			var source = $(this).find('img').attr('src').replace('.png','_.png');
+			$(this).find('img').attr('src',source);
+
+			return false;
+		}
+	});
+
+	//이전 버튼 클릭시
+	$prev.bind({
+		mouseenter:function(){
+			var source = $(this).find('img').attr('src').replace('.png','_.png');
+			$(this).find('img').attr('src',source);
+			if(!auto) return false;
+			clearTimeout(time);
+		},
+		mouseleave:function(){
+			var source = $(this).find('img').attr('src').replace('_.png','.png');
+			$(this).find('img').attr('src',source);
+			if(!auto) return false;
+			time = setTimeout('slideShow()',3000);
+		},
+		click:function(){
+			if(current==len-1) $next.show();	//이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화	
+			current--;							//이미지 인덱스값 1씩 감소
+
+			moveControl('prev');
+
+			if(current==0) $(this).hide();	//이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
+
+			return false;
+		}
+	});
+
+	//다음 버튼 클릭시
+	$next.bind({
+		mouseenter:function(){
+			var source = $(this).find('img').attr('src').replace('.png','_.png');
+			$(this).find('img').attr('src',source);
+			if(!auto) return false;
+			clearTimeout(time);
+		},
+		mouseleave:function(){
+			var source = $(this).find('img').attr('src').replace('_.png','.png');
+			$(this).find('img').attr('src',source);
+			if(!auto) return false;
+			time = setTimeout('slideShow()',3000);
+		},
+		click:function(){
+			current++;							//이미지 인덱스값 1씩 증가
+			
+			moveControl('next');
+
+			if(current>=len-1) $(this).hide();	//이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
+			if(current>0) $prev.show();			//이미지인덱스값이 0이 아닌경우 이전버튼 활성화
+
+			return false;
+		}
+	});
+
+}
+
+// main rolling banner
+function slideMotion1(){
+	var $banner = $('#rolling .motionview'),
+		//$nav = $('#rolling ul.nav'),
+		banner = {prev:null, next:null},
+		size = $banner.children().length;
+		index = 1,
+		speed = 3000,
+		timer = null,
+		auto = true,
+		width = parseInt(100/size),
+		rest = parseInt(100%size);
+
+	var $nav = $('<ul class="nav">').insertAfter($banner);
+
+	$banner.children().each(function(index){
+		index++;
+		(index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
+		if(index==size){
+			$nav.children().eq(-1).find('a').css('background-image','none');
+		}
+	});
+
+	if(rest>0){
+		width+=rest;
+		$nav.children().eq(-1).css('width',width+'%');
+	}
+
+	$nav.delegate("li",'click',function(){
+		var idx = $nav.children().index(this);
+		index = idx;
+		banner.prev = $banner.find('a.active');
+		banner.next = $banner.find('a').eq(index);
+
+		clearInterval(timer);
+		auto = false;
+		
+		$nav.trigger('change.banner',banner)
+			.trigger('change.tab',index);
+
+		return false;
+	});
+
+	$nav.bind('change.banner',function(event, banner){
+		aniMotion();
+	});
+
+	$nav.bind('change.tab',function(event, index){
+		$nav.children().find('a').removeClass('sel');
+		$nav.children().eq(index).find('a').addClass('sel');
+	});
+
+	timer = setInterval(autoMotion, speed);
+
+	function autoMotion(){
+		if(index > size-1) index = 0;
+
+		aniMotion();
+	}
+
+	function aniMotion(){
+		if(auto){
+			banner.prev = $banner.find('a.active');
+			banner.next = $banner.find('a').eq(index);
+
+			$nav.children().find('a').removeClass('sel');
+			$nav.children().eq(index).find('a').addClass('sel');
+		}
+		banner.prev.addClass('last-active');
+		banner.next.css({'opacity':0.0})
+			.addClass('active')
+			.animate({'opacity':1.0}, 1000, function(){
+				banner.prev.removeClass('active last-active');
+
+				if(auto){
+					index++;
+				}else{
+					index++;
+					timer = setInterval(autoMotion, speed*1.5);
+					auto = true;
+				}
+			});
+	}
+}
+
+// forum list show or hide function
+function toggleFunc(){
+	
+	var defaulNum = [2];
+
+	$('.forum-tit').each(function(){
+		var self = $(this);
+
+		var idx = $('.forum-tit').index(this);
+
+		for(i=0;i<=defaulNum.length;i++){
+			if(idx==defaulNum[i]){
+				var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
+				self.find('a.toggle').css('background-image',source);
+
+				self.find('a.toggle').text('Show');
+				self.addClass('mb35').next().hide();
+			}
+		}
+
+		self.find('a.toggle').click(function(){
+			
+			if(self.next().is(':visible')){
+				var source = $(this).css('background-image').replace('.gif','_.gif');
+				$(this).css('background-image',source);
+
+				$(this).text('Show');
+				self.addClass('mb35').next().hide();
+			}else{
+				var source = $(this).css('background-image').replace('_.gif','.gif');
+				$(this).css('background-image',source);
+
+				$(this).text('Hide');
+				self.removeClass('mb35').next().show();
+			}
+
+			return false;
+
+		});
+
+	});
+}
+
+// 파일 업로드
+function fileUpload( width ){
+	//var $img = $('.attach input[type=image]');
+	//var width = $img.attr('width');
+
+	// 2012-08-08 추가 : 파일 input 너비영역 셋팅
+	var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
+
+	var $file = $('.attach input.upload').css({
+		"position": "absolute",
+		"top": "0px",
+		"right": "0px",
+		"width": w,
+		"cursor": "pointer",
+		"opacity": "0.0",
+		"height": "23px"
+	});
+	$file.off('change');
+	$file.on('change',function(e){
+		if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
+			return;
+		}
+		var idx = $file.index(this);
+		var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
+		var fileErrMsg = {
+				limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
+			    ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
+			    ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
+			    ,ext_ko : "지원하지 않는 확장자 입니다."
+			    ,ext_zh : "不允许上传具有该扩展名的文件。"
+			    ,ext_en : "File extention not allowed for upload."
+		};
+		var initFileInput = function(obj) {
+			$(obj).parent().find('input.file').val("");
+			if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
+			else $(obj).val("");
+		};
+		
+		var filename = $(this).val();
+		
+		//CHK File ext
+		var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
+			              , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
+			              , "jpg", "png", "zip"];
+		var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
+		var findFlag = false;
+		for(var i = 0; i < imgExts.length; i++) {
+			if(imgExts[i] == fileExt) {
+				findFlag = true;
+				break;
+			}
+		}
+	
+		if(findFlag == false) {
+			alert( fileErrMsg["ext_" + localeCode] );
+			initFileInput(this);
+//			setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
+			return;
+		}
+		
+		//CHK File Size
+		if(
+				($.browser.msie && $.browser.version >= 10.0 ) //msie
+				|| $.browser.mozilla //FF
+				|| $.browser.safari //Chrome
+		)
+		{
+			var filesize = parseInt(this.files[0].size/1024/1024); //MB;
+			if( filesize > 200 ) {
+				alert( fileErrMsg["limit_" + localeCode] );
+				initFileInput(this);
+				return;
+			}
+		}
+		
+		$(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
+	});
+};
+
+
+// Show or Hide Toggle
+function showToEx(args){
+
+	if(!arguments.length) return false;
+	
+	var bt = $('#'+args.bt);
+	var obj = $('#'+args.obj);
+
+	var source = bt.css('background-image');
+	
+	if(obj.is(':visible')){
+		obj.hide();
+	}
+
+	bt.toggle(function(){
+		var src = source.replace('.gif','_.gif');
+		bt.css('background-image', src);
+		obj.show();
+		
+		return false;
+	},function(){
+		var src = source.replace('_.gif','.gif');
+		bt.css('background-image', src);
+		obj.hide();
+
+		return false;
+	});
+
+}
+
+
+// FAQ 20131016
+function faqToEx(){
+
+ var $question = $('#contents').find('.question');
+ var $answer = $('#contents').find('.answer');
+
+ // All Answer Rows Hide
+ $answer.hide().find('.conts').hide();
+
+ $question.each(function(){
+  var $self = $(this);
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
+  
+  $self.find('a').bind('click',function(){
+   $("#selArea ul").hide();
+   /*
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
+
+   $answer.hide().find('.conts').hide();
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
+   */
+
+   /* 20120822 hjh modify*/
+   /* if ( this open )?  close : all close, e.target open */
+   var cutTtl  = $(this).parent().children("div").html();
+   var ttl     = $(this).parent().parent().children("td.real_question").html();
+   
+   if($(this).parents('tr').next().find('.answer').is(':visible')){
+    $(this).html(cutTtl);
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
+     $answer.hide();
+    });
+   }else{
+    titleInit();
+    $(this).html(ttl);
+    $answer.hide().find('.conts').hide();
+    //$answer.slideUp('normal').find('.conts').hide();
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
+   }   
+
+   return false;
+  });
+ });
+
+ $answer.each(function(){
+  var $self = $(this);
+
+  $(this).find('a.bt-close-faq').bind('click',function(){
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");
+   var cutTtl      = question_td.children("div").html();
+   question_td.children("a").html(cutTtl);
+   
+   $self.find('.conts').slideUp('fast',function(){
+    $self.hide();
+   });
+
+   return false;
+  });
+ });
+ 
+ var titleInit = function() {
+  $question.each(function(i) {
+   $(this).find("a").html($(this).find("div").html());
+  });
+ }
+}
+
+
+
+/**
+ *  쓰기페이지 Tab 영역 컨트롤
+ *  @param	selector	텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
+ */
+function setSwitchTab( selector ) {
+	var tabs = $('.tab-list').find("li");
+	var elements = $( selector );
+
+	$( elements ).each( function( i ) {
+		if( i != 0 )
+		{
+			$(this).hide();
+		}
+	})
+
+	// Control Tabs
+	$( tabs ).each( function( i ) {
+		$( this ).click( function(){
+			resetClass();
+
+			$( this ).find( 'a' ).addClass( "sel" );
+			$( elements[i] ).show();
+
+			return false;
+		});
+	});
+
+	// Class 리셋
+	function resetClass()
+	{
+		$( tabs ).each( function( i ) {
+			$( this ).find( 'a' ).removeClass( 'sel' );
+		});
+
+		$( elements ).each( function( i ) {
+			$( this ).hide();
+		});
+	}
+}
+
+var SET_ATTACH_LIMIT;
+var SET_ATTACH_WIDTH;
+var SET_ATTACH_BTNNAME;
+
+var firstAddAction = function(obj, limit, w, btnName) {
+ var bn            = btnName || 'File';
+ var fileAttachStr = "<li class='clfix no-first'>";
+ fileAttachStr += '<div class="attach">';
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
+ fileAttachStr += '</div>';
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
+ fileAttachStr += '</li>';
+ obj.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    $("a.remove-btn").eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ obj.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ 
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+}
+
+var firstRemoveAction = function(id) {
+ var obj = $("#" + id);
+ var compFile    = $("input[type=file]");
+ var compFileCnt = compFile.size();
+ var ulObj       = compFile.eq(0).parent().parent().parent();
+ if(compFileCnt <= 1) {
+  var firstCompFile = compFile.eq(0);
+  firstCompFile.prev().prev().val("");
+  if ($.browser.msie) {
+		$(obj).parent().find('input.file').val("");
+		firstCompFile.replaceWith( firstCompFile.clone(true) );
+	} else {
+		firstCompFile.val("");
+		firstCompFile.prev().prev().val("");
+  }
+ } else {
+  obj.parent().remove();
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
+  
+  //add-btn event..
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
+ }
+ 
+ ulObj
+ .find("li")
+ .eq(0)
+ .removeClass("no-first")
+ .find("a.remove-btn")
+ .attr("id", id)
+ .unbind("click");
+ 
+ setTimeout(function() {
+  $("#" + id).focus();
+ }, 100);
+ 
+ $("#" + id).on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   var that = $(this);
+   setTimeout(function() {
+    that.prev().focus();
+   }, 1);
+  }
+ });
+ 
+ $("#" + id).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+/** 
+ * File 첨부컨트롤
+ * @param limit 최대 파일 첨부 갯수
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
+ */
+function setAttachFile( limit, width, btnName, removeBtnId )
+{
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );
+ 
+ SET_ATTACH_LIMIT = limit;
+ SET_ATTACH_WIDTH = w;
+ SET_ATTACH_BTNNAME = btnName;
+ 
+ inputFile.on("keydown", function(e) {
+  var that = $(this);
+  
+  if(e.which == 9 && e.shiftKey) {
+   return true;
+  }
+  
+  if(e.which === 9) {
+   e.preventDefault();
+   setTimeout(function() {
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
+   }, 1);
+  }
+ });
+ 
+ inputFile.on("focusin", function(e) {
+  $(this).parent().css("outline", "1px dotted #2d2d2d");
+ }).on("focusout", function(e) {
+  $(this).parent().css("outline", "");
+ });
+ 
+ firstAddAction(btnFileAttach, limit, w, btnName);
+ 
+ /*
+ btnFileAttach.on("keydown", function(e) {
+  if(e.which == 9 && e.shiftKey) {
+   e.preventDefault();
+   setTimeout(function() {
+    inputFile.focus();
+   }, 1);
+  }
+ });
+ 
+ btnFileAttach.click( function()
+ {
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+  
+  if( $( ul ).find( "li" ).length >= limit )
+  {
+   alert( "Only " + limit + " files are allowed" );
+   return;
+  }
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+  $( ul ).append( fileAttachStr );
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );
+  
+  
+  removeBtns.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.prev().find("input[type=file]").focus();
+    }, 1);
+   }
+  });
+  
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
+  
+  addInputFile.on("keydown", function(e) {
+   var that = $(this);
+   if(e.which == 9 && e.shiftKey) {
+    return true;
+   }
+   
+   if(e.which === 9) {
+    e.preventDefault();
+    setTimeout(function() {
+     that.parent().parent().find("a.remove-btn").eq(0).focus();
+    }, 1);
+   }
+  }).on("focusin", function(e) {
+   $(this).parent().css("outline", "1px dotted #2d2d2d");
+  }).on("focusout", function(e) {
+   $(this).parent().css("outline", "");
+  });
+
+  fileUpload( w + 50 );
+  updateFileField();
+  return false;
+ });
+ 
+
+ // File 제거 버튼
+ function onBtnFileDetachClick()
+ {
+  var that = $(this);
+  $( this ).unbind( "click", onBtnFileDetachClick );
+   var a = that.parent().prev().children("a").eq(0);
+   setTimeout(function() {
+   that.parents(".no-first").remove();
+  }, 1);
+  
+  setTimeout(function() {
+   a.focus();
+  }, 300);
+  return false;
+ }
+ */
+ /**
+  *  2012-08-08 전종호 추가
+  *  파일 Input Text 영역 너비를 잡아주는 메서드
+  */
+ function updateFileField()
+ {
+  var ul = $( ".file-att-form" );
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+
+ updateFileField();
+ fileUpload( w + 50 );
+ 
+ $("#" + removeBtnId).on("click", function(e) {
+  firstRemoveAction($(this).attr("id"));
+ });
+}
+
+
+
+/** 
+ * [PAGE] device speces list page
+ * date : 20120808
+ * id : hjh
+ */
+function initDevicespecsList (){
+	var isCompareView=false;
+	$("#devicespecs-list > li").each( 
+		function(i){ 
+			$(".info", this).bind("click", devicespecsListInfoToggle);
+			$(".xx", this).bind("click", devicespecsListInfoToggle);
+			
+			//detail info layer toggle function
+			function devicespecsListInfoToggle (){
+				$("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
+				return false;
+			}
+	});
+
+
+	/* DEVICE COMPARE 열리는 부분
+	- defualt : close. 
+	- 최초 한번만 열림 
+	- 현재는 compare 버튼에 공통으로 함수 바인딩
+	*/
+	function devicespecsCompareOnOff (){
+		if ( isCompareView ) return;
+		var ww = ( isCompareView ) ? "30px":"207px";
+		$("#devicespecs-compare").animate({
+		    height: ww }, 300, "linear", function(){ });
+
+		isCompareView = ( isCompareView ) ? false:true;
+		return false;
+	}
+
+	//compare 버튼 공통으로 클릭 이벤트 걸림 
+	$(".compare").bind("click", function (){ devicespecsCompareOnOff() });
+}
+
+/** 
+ * [PAGE] device speces view page
+ * date : 20120808
+ * id : hjh
+ */
+ function initDevicespecsView (){
+	var isImgView = false;
+	var isView = 0;
+	
+	//thumbnail overevent bind
+	$("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
+	focusDeviceDetail (1);
+	
+	$("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
+		if(e.which == 9 && e.shiftKey) {
+			return true;
+		}
+		
+		if(e.type === "keydown" && e.which == 9) {
+			setTimeout(function() {
+				$("#img-viewer-handle a").eq(0).focus();	
+			}, 1);
+		}
+	});
+	
+	//thumbnail viewarea controll handler bind
+	$("#img-viewer-handle").click(function () {
+		var ww;
+		var src = $("#img-viewer-handle img").attr("src");
+		if ( isImgView ){
+			ww = "300px";
+			src = src.replace(".gif", "_.gif");
+			$("#img-viewer-thumbnail").hide();
+			$("#device-info").show();
+		}else{
+			ww = "730px";
+			src = src.replace("_.gif", ".gif");
+			$("#img-viewer-thumbnail").show();
+			$("#device-info").hide();
+			focusDeviceDetail(1);
+		}
+		
+		$("#img-viewer-handle img").attr("src", src);
+    	$("#img-viewer").animate({
+		    width: ww
+			}, 300, "linear", function(){
+			if($.browser.msie)
+				$("#img-inner").css("width", ww);
+		});
+		
+    	isImgView = ( isImgView ) ? false:true;
+    });
+
+	//thumbnail overevent function (update date 2012.09.05 kangki)
+	function focusDeviceDetail ( id ) {
+		if ( isView == id ) return;
+
+		$("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
+		var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
+
+		$( "#img-viewer-bic > img").attr("src", imgSrc);
+		isView = (id);		
+	}
+
+	/*toggle devicespecs List*/
+	if($('div#contents').find('.devicespec-tit').length){
+		
+		$('.devicespec-tit').each(function(){
+			var self = $(this);
+			$('a', self).bind ("click", fnToggle);
+
+			function fnToggle(){
+
+				if ( $(this).parent().parent().next().is(':visible') ){
+					$(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+					self.find('em').text('Show');
+					self.next().hide();
+
+					return false;
+				}else{
+					$(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+					self.find('em').text('Hide');
+					self.next().show();
+
+					return false;
+				}
+			}
+							
+		});
+	}
+
+	/*all Show Hide devicespecs List*/
+	if($('div#contents').find('.devicespecs-util').length){
+		var self = $('div#contents').find('.devicespecs-util');
+
+		$('.showA', self).bind ("click", function (){
+			$('.devicespec-tit').each(function(){
+
+				var me = $(this);
+				if ( !me.next().is(':visible') ){
+					me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+					me.find('em').text('Hide');
+					me.next().show();
+				}
+			});
+			return false;
+		})
+		$('.hideA', self).bind ("click", function (){
+			
+			$('.devicespec-tit').each(function(){
+
+				var me = $(this);
+				if ( me.next().is(':visible') ){
+					me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+					me.find('em').text('Show');
+					me.next().hide();
+				}
+								
+			});
+			return false;
+		})
+	}	
+}
+
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+function searchInit()
+{
+	var focusTarget = "input";
+
+	$("#searchInput").bind("keydown", checkSearchText);
+	$("#searchInput").focusout(function() {
+		if( focusTarget == "dropdown" )
+		{
+			return false;
+		}
+		else
+		{
+			//toggleClass( false );
+		}
+	});
+	
+	$( "#searchInput" ).focusin( function()	{
+		focusTarget = "input";
+	});
+
+	$("#btnDropdown").mousedown( function(){
+		focusTarget = "dropdown";
+	});
+
+	$(".autocomplete ul li").focusin( function() {
+		//
+	});
+
+	$(".autocomplete ul li:last-child").focusout( function() {
+		toggleClass( false );
+	})
+
+	$(".autocomplete").mouseleave(function(){
+		toggleClass( false );
+	});
+	
+	$("#btnDropdown").click( function(){
+		//alert("btn click");
+		if( $("#searchInput").val().length == 0 ){ 
+			return false;
+		}
+		else{
+			if( $("#btnDropdown").hasClass("dropdown") ){
+				toggleClass( true );
+			}
+			else{
+				toggleClass( false );
+			}
+		}
+
+		return false;
+	});
+
+	function checkSearchText(){
+		setTimeout(function(){
+			var txt = $("#searchInput").val();
+
+			if( txt.length > 0 ){
+				toggleClass( true );
+			}
+			else{
+				toggleClass( false );	
+			}
+		}, 1);
+	}
+
+	function toggleClass( bo ){
+		if( bo ){
+			$(".autocomplete").css("visibility", "visible");
+
+			$("#btnDropdown").removeClass("dropdown");
+			$("#btnDropdown").addClass("dropdownoff");
+
+			var hei = $(".autocomplete").find('>ul').outerHeight();
+			if(hei>400){
+				$(".autocomplete").css({'height':'400px','overflow-y':'auto'});
+			}
+		}
+		else{
+			$(".autocomplete").css("visibility", "hidden");
+			
+			$("#btnDropdown").removeClass("dropdownoff");
+			$("#btnDropdown").addClass("dropdown");
+		}
+	}
+}
+ */
+
+function setTopScroll(selector) {
+	if ( !selector ) return false;
+	var btn = $( selector );
+	var w = $( window );
+	btn.css( "position", "absolute" );
+
+
+	btn.click( function(){ w.scrollTop( 0 ) } );
+
+	var wheight = w.innerHeight();
+	
+	$(window).resize( function() {
+		wheight = w.innerHeight();
+		redraw();
+	});
+
+	$(window).scroll( function() {
+		redraw();
+	})
+
+	/**
+	 *	Top 버튼의 재정렬 메서드
+	 */
+	function redraw()
+	{
+		var t = w.scrollTop() + wheight - 289;
+
+		if( t < wheight / 2 && w.scrollTop() == 0 )	{
+			t = wheight / 2;
+		}
+		
+		btn.clearQueue();
+
+		btn.animate({
+	    top: t
+	  	}, 500, function() {
+	    // Animation complete.
+	  	});
+		//btn.css( "top", t );
+		//console.log( "target : " + t );
+	}
+
+	redraw();
+	/*
+	obj.initTop = position;
+	obj.topLimit = topLimit;
+	obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
+
+	obj.style.position = "absolute";
+	obj.top = obj.initTop;
+	// obj.left = obj.initLeft;
+
+	if ( typeof( window.pageYOffset ) === "number" ) {	//WebKit
+		obj.getTop = function() {
+			return window.pageYOffset;
+		}
+	} else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
+		obj.getTop = function() {
+			return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
+		}
+	} else {
+		obj.getTop = function() {
+			return 0;
+		}
+	}
+
+	if ( self.innerHeight ) {	//WebKit
+		obj.getHeight = function() {
+			return self.innerHeight;
+		}
+	} else if( document.documentElement.clientHeight ) {
+		obj.getHeight = function() {
+			return document.documentElement.clientHeight;
+		}
+	} else {
+		obj.getHeight = function() {
+			return 500;
+		}
+	}
+
+	obj.move = setInterval( function() {
+		if ( obj.initTop > 0 ) {
+			pos = obj.getTop() + obj.initTop;
+		} else {
+			pos = obj.getTop() + obj.getHeight() + obj.initTop;
+		}
+
+		if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
+		if ( pos < obj.topLimit ) pos = obj.topLimit;
+
+		interval = obj.top - pos;
+		obj.top = obj.top - interval / 3;
+		obj.style.top = obj.top + "px";
+	}, 30 )
+	*/
+}
+
+
+//popup
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
+
+//popup 중앙에 띄우기
+function pop_center(){ 
+	var x,y; 
+	if (window.innerHeight) { // IE 외 모든 브라우저 
+		x = (screen.availWidth - self.innerWidth) / 2; 
+		y = (screen.availHeight - self.innerHeight) / 2; 
+	}else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
+		x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
+		y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
+	}else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
+		x = (screen.availWidth - document.body.clientWidth) / 2; 
+		y = (screen.availHeight - document.body.clientHeight) / 2; 
+	} 
+	window.moveTo(x,y); 
+}
+
+// Layer Popup Open
+function layer_open(el){
+	var temp = $('#' + el);
+
+	if(!temp.hasClass('sty2')){
+		$('.layer').fadeIn();
+	}
+
+	if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+	else temp.css('top', '0px');
+	if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+	else temp.css('left', '0px');
+
+	if(temp.hasClass('sty2')){
+		temp.fadeIn();
+
+		temp.find('a.cbtn').click(function(e){
+			temp.fadeOut();
+		});
+		temp.find('a.gbtn').click(function(e){
+			temp.fadeOut();
+		});
+
+		return false;
+	}
+	// 닫는 버튼 gbtn-c 추가 20130627
+	$('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
+		$('.layer').fadeOut();
+		return false;
+	});
+}
+
+// background dim - 2013-05-31
+function layer_open2(el){
+	var temp = $('#' + el);
+	$('input').attr('disabled', 'disabled');
+	$('.layerPop').fadeIn();
+	
+
+	if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+	else temp.css('top', '0px');
+	if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+	else temp.css('left', '0px');
+
+	$('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
+		$('.layerPop').fadeOut();
+		$('input').removeAttr('disabled');
+		return false;
+	});
+}
+
+
+function pop_account(url){
+	window.open(url,'account','width=619,height=591,scrollbars=yes')
+}
+
+function pop_loadDoc(url){
+	window.open(url,'online','width=850,height=600,scrollbars=yes')
+}
+
+/** 
+ *  [PAGE] Tags
+ *  date : 20120820
+ *  author : 전종호
+ */
+function initTags()
+{
+	// Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
+	// 마지막 아이템은 제외
+	var eleArr = $(".tag-list").find("li");
+
+	$( eleArr ).each( function( i ) {
+		if( i < eleArr.length - 1 )
+		{
+			var target = $(this).find("a")[0];
+			var content = $( target ).html();
+
+			$( target ).html( content + "," );
+		}
+	})
+}
+
+$(document).ready(function(){
+	$(".tip_info").css("cursor","pointer");
+	$(".tip_info > img").mouseover(function(){
+		$(".tip_cont").css("display","block");
+	});
+	$(".tip_info > img").mouseout(function(){
+		$(".tip_cont").css("display","none");
+	});
+});
+
+// new layer popup script by ygh 2013.11.14
+
+var isPopup = false ;
+
+function popupLayerView(id){
+
+	var $L = $("#" + id) ;
+	var $D  = $("#" + id + "down") ;
+
+	$T = $("#" + id) ;
+
+	$L.show();
+	isPopup = true ;
+
+	$('html, body').animate({ scrollTop: $L.offset().top }, 500);
+
+	$("#" + id + "agree").focus() ;
+
+	jQuery(":focusable").focusin(function(e){
+		if (isPopup) {
+			e.stopPropagation() ;
+			if ($L.find(jQuery(this)).length > 0) {
+			} else {
+				jQuery(this).blur() ;
+				jQuery("#" + id + " :focusable:first").focus() ;
+			}
+		}
+	}) ;
+
+	$L.find('.close').click(function(){
+		resetPopup(id) ;
+	});
+
+	$("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
+}
+
+function resetPopup(T) {
+	$("#" + T + "down").hide();
+	$("#" + T + "agree").attr("checked", false) ;
+	isPopup = false ;
+	$("#" + T).hide() ;
+	$("#" + T + "Btn").focus() ;
+}
+
+function getDownload(T, F, I) {
+	if ($("#" + T + "agree").is(':checked')) {
+		commonDownloadLog(F, I) ;
+		resetPopup(T) ;
+	}
+}
+
+function focusable( element, isTabIndexNotNaN ) {
+	var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
+	if ( "area" === nodeName ) {
+		map = element.parentNode;
+		mapName = map.name;
+		if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
+		img = $( "img[usemap=#" + mapName + "]" )[0];
+		return !!img && visible( img );
+	}
+	return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
+			visible( element ) ;
+}
+
+function visible( element ) {
+	return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
+		return $.css( this, "visibility" ) === "hidden";
+	}).length;
+}
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
+
+$.extend( $.expr[ ":" ], {
+	data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
+	focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
+	tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
+});
+// new layer popup script by ygh 2013.11.14
+
+// 2013-11-15 타이젠 썸네일 추가
+$(document).ready(function() {
+	$('.view_device1').hide();
+	
+	$('#thumb_view_btn').hover(function() {
+		$('.view_device1').show();
+	},function() {
+		$('.view_device1').hide();
+	});
+		
+});
+
+// 2014-04-22 타이젠 썸네일 추가
+$(document).ready(function() {
+	$('.view_device2').hide();
+	
+	$('#thumb_view_btn2').hover(function() {
+		$('.view_device2').show();
+	},function() {
+		$('.view_device2').hide();
+	});
+		
+});
+
+
+function beforePopupLayerView(popId, popId2, popContinue){
+	var $L = $("#" + popId) ;
+	$L.show(100);
+	$('html, body').animate({ scrollTop: $L.offset().top }, 500);
+	$L.find('.close').click(function(){
+		$L.hide();
+	});
+	$L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
+}
diff --git a/org.tizen.ui.practices/html/scripts/core.js b/org.tizen.ui.practices/html/scripts/core.js
new file mode 100644
index 0000000..68dea4c
--- /dev/null
+++ b/org.tizen.ui.practices/html/scripts/core.js
@@ -0,0 +1,899 @@
+// /////////////////////////////////////////////////////////////////////////////////////////////////
+// # com.samsung.devloper common core javascript #
+// # Create Date : 2012.07.10. 
+// # Create By : kangki
+;(function ($) {
+/**
+ * Samsung Developer Common JavaScript
+ */
+$.SD = {};
+
+/*
+ * Method Common
+ */
+$.SD.message = function (msg) { if (msg) alert(msg); };
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
+$.SD.typeTest = function (data, datatype) {
+	if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
+	if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
+	if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
+	if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
+	if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
+	if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
+	if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
+
+	return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
+};
+
+$.SD.toDate = function (date, seperator) {
+	if (!seperator) seperator = '-';
+
+	date = $.SD.replaceAll(date, seperator, '');
+	date = $.SD.replaceAll(date, '/', '');
+
+	if (date.length !== 8) return null;
+	
+	date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
+
+	if (date.valueOf().toString() === 'NaN') return null;
+
+	return date;
+};
+
+$.SD.toDateString = function (date, seperator) {
+	if (!seperator) seperator = '/';
+	if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
+	if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
+
+	var str, dateString = date.getFullYear();
+
+	str 		= "0" + (date.getMonth()+1);
+	dateString 	= dateString + seperator + str.substring(str.length-2, str.length);
+	str 		= "0" + date.getDate();
+	dateString 	= dateString + seperator + str.substring(str.length-2, str.length);
+
+	return dateString;
+};
+
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
+
+$.SD.insertComma = function(num) {
+	var tnum    = num + "";
+	var tarr    = new Array();
+	var dot     = "";
+	var idxDot  = tnum.indexOf(".");
+	var sign    = "";
+	var tinx    = 0;
+	var fnum    = tnum;
+	 
+	
+	if(idxDot > -1) {
+		fnum = tnum.substring(0, idxDot);
+		dot  = tnum.substring(idxDot);
+		tnum = fnum;
+	} 
+	
+	if(tnum.indexOf("-") > -1) {
+		fnum = tnum.substring(1);
+		sign = tnum.substring(0, 1);
+	}
+	
+	for(var inx = fnum.length; inx > 0; ) {
+		tarr[tinx++] = fnum.substring(inx, inx - 3);
+		inx = inx - 3;
+	}
+	
+	return sign + tarr.reverse().join(",") + dot;
+}
+
+/**
+ * Method Ajax
+ */
+$.SD.ajax = {
+	doAjax : function (json) {
+		var param = {
+			async : json.async,
+			type : json.type,
+			dataType : json.dataType,
+			cache: json.cache,
+			timeout : json.timeout,
+			success : json.success,
+			error : json.error
+		};
+
+		if (param.dataType === 'jsonp') {
+			param.url = json.url + '?' + $.param(json.data) + '&callback=?';
+		} else {
+			param.url = json.url;
+			param.data = json.data;
+		}
+		$.ajax(param);
+	},
+	
+	get : function (json) {
+		$.SD.ajax.doAjax({ 
+			url:json.url,
+			cache:json.cache != null ? json.cache : false,
+			async:json.async != null ? json.async : true,
+			type:'get', 
+			dataType:'json',
+			data:json.data != null ? json.data : {}, 
+			timeout:10000, success:json.success, 
+			error: function(){ if(json.error != null)json.error(); }
+		});
+	},
+	
+	post : function (json) {
+		$.SD.ajax.doAjax({ url:json.url,
+			cache: json.cache != null ? json.cache : false,
+			async:json.async != null ? json.async : true,
+			type:'post', dataType:'json',
+			data:json.data != null ? json.data : {}, 
+			timeout:10000, success:json.success, 
+			error: function(){ if(json.error != null)json.error(); }
+		});
+	}
+};
+
+/**
+ * SD20 password check
+ */
+
+$.SD.isSD20Pwd = function(pwd) {
+	
+	if(/[a-zA-Z]{1,}/.test(pwd) == false) {
+		return false;
+	}
+	
+	if(/[0-9]{1,}/.test(pwd) == false) {
+		return false;
+	}
+	
+	if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
+		return false;
+	}
+	
+	return true;
+};
+
+$.SD.popupCenter = function(popObj) {
+	var scrollbars  = "no";
+	var resizeable  = "no";
+	
+	if(popObj.scrollbars) {
+		scrollbars = popObj.scrollbars; 
+	}
+	
+	if(popObj.resizeable) {
+		resizeable = popObj.resizeable;
+	}
+	
+	var width  = screen.width;
+	var height = screen.height;
+
+	var x = ( width / 2 ) - ( popObj.width / 2 );
+	var y = ( height / 2 ) - ( popObj.height / 2 );
+
+	var opt = "left=" + x +
+	          ",top=" + y +
+	          ",width=" + popObj.width +
+	          ",height=" + popObj.height +
+	          ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
+	          ",scrollbars=" + scrollbars +
+	          ",resizable=" + resizeable;
+	var pop = window.open(popObj.url, popObj.target, opt);
+	if(pop) {
+		pop.focus();
+	}
+}
+
+$.SD.isValidDate = function(val) {
+	if(val.length != 8) {
+		return false;
+	}
+	
+	var yyyy = Number(val.substring(0, 4)); 
+	var mm   = Number(val.substring(4, 6));
+	var dd   = Number(val.substring(6));
+	
+	if( mm < 1 || mm > 12 ) {
+		return false;
+	}
+	
+	var endDay  = 0;
+	
+	if( mm == 2 ) {
+		if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
+			endDay = 29;
+		} else {
+			endDay = 28;
+		}
+		
+	} else {
+		var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
+		endDay = endDays[mm - 1];
+	}
+	
+	if( dd <= 0 || dd > endDay ) {
+		return false;
+	} 
+	
+	return true;
+	
+}
+
+$.SD.boardDownload = function(option, func) {
+	var jsonData = {
+		url: "/board/ajaxDwnldProc.do",
+		async: false,
+		data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
+		success: function(data) {
+			if(data.existFileYn == "Y") {
+				location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
+				//location.href = $(obj).attr("href");
+				if(func) {
+					func(data);
+				}	
+			} else {
+				alert("File does not exist.");
+			}
+		}
+	}
+	
+	$.SD.ajax.get(jsonData);
+}
+
+$.SD.commonDownload = function(fileName, categoryId, func) {
+	var jsonData = {
+		url: "/common/ajaxCommonDwnldProc.do",
+		async: false,
+		data: {fileName: fileName, categoryId: categoryId},
+		success: function(data) {
+			if(data.existFileYn == "Y") {
+				location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+				if(func) {
+					func(data);
+				}	
+			} else {
+				alert("File does not exist.");
+			}
+		}
+	}
+	
+	$.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
+	var jsonData = {
+		url: "/common/ajaxCommonDownloadLogProc.do",
+		async: false,
+		data: {fileFullPath: fileFullPath, categoryId: categoryId},
+		success: function(data) {
+			if(data.existFileYn == "Y") {
+				//location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+				location.href = fileFullPath;
+				if(func) {
+					func(data);
+				}	
+			} else {
+				alert("File does not exist.");
+			}
+		}
+	}
+	
+	$.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
+	var jsonData = {
+		url: "/common/ajaxCommonDownloadLogProc.do",
+		async: false,
+		data: {fileFullPath: fileFullPath, categoryId: categoryId},
+		success: function(data) {
+			if(data.existFileYn == "Y") {
+				//location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+				if(target == 'new'){
+					window.open(fileFullPath, '');
+				}else{
+					location.href = fileFullPath;
+				}
+				
+				if(func) {
+					func(data);
+				}	
+			} else {
+				alert("File does not exist.");
+			}
+		}
+	}
+	
+	$.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
+	var jsonData = {
+		url: "/common/ajaxCommonAllShareClickCountProc.do",
+		async: false,
+		data: {fileFullPath: fileFullPath, categoryId: categoryId},
+		success: function(data) {}
+	}
+	
+	$.SD.ajax.get(jsonData); 
+}
+
+$.SD.commonClickCount = function(categoryName, categoryId) {
+	var jsonData = {
+		url: "/common/ajaxCommonClickCountProc.do",
+		data: {categoryName: categoryName, categoryId: categoryId},
+		success: function(data) {}
+	}
+	
+	$.SD.ajax.get(jsonData);
+}
+
+$.SD.getByteLen = function(str) {
+	var resultSize = 0;
+	if(str == null){
+		return 0;
+	}
+	for(var i=0; i<str.length; i++){
+	  var c = escape(str.charAt(i));
+	  if(c.length == 1){
+		  resultSize ++;
+	  }	else if(c.indexOf("%u") != -1) {
+		  resultSize += 2;
+	  }	else if(c.indexOf("%") != -1) {
+		  resultSize += c.length/3;
+	  }
+	}
+	return resultSize;
+}
+
+$.SD.cutByte = function(str, limit) {
+	var tempStr = new String(str);
+	var len = 0;
+	for ( var i = 0; i < str.length; i++) {
+		var c = escape(str.charAt(i));
+		if (c.length == 1)
+			len++;
+		else if (c.indexOf("%u") != -1)
+			len += 2;
+		else if (c.indexOf("%") != -1)
+			len += c.length / 3;
+		if (len > limit) {
+			tempStr = tempStr.substring(0, i);
+			break;
+		}
+	}
+	return tempStr;
+}
+
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
+
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
+
+/** 
+ * Method pagination 
+ * */
+$.fn.frontPagination = function (pageInfo, func) {
+	var info = {
+			 prev : 1
+			,first : 1
+			,begin : pageInfo.begin - 0
+			,current : pageInfo.current - 0
+			,end : pageInfo.end - 0
+			,last : pageInfo.last - 0
+			,next : 1
+		},
+		target 	= this, 
+		page 	= $('<span class="page"></span>'),
+		prev 	= "", 
+		next 	= "", 
+		i 		= 0, 
+		n 		= 0;
+
+	info.begin 	 = info.begin < 1 ? 1 : info.begin;
+	info.current = info.current < 1 ? 1 : info.current;
+	info.end 	 = info.end < 1 ? 1 : info.end;
+	info.last 	 = info.last < 1 ? 1 : info.last;
+
+	info.prev = info.current - 1;
+	info.next = info.current + 1;
+
+	target.addClass("pageNumber");
+	target.addClass("mt20");
+	target.children().remove();
+
+	if (info.first < info.begin) {
+		target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
+			e.preventDefault();
+			func(info.first);
+		}));
+	}
+
+	if (info.prev >= info.first) {
+		target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
+			e.preventDefault();
+			func(info.prev);
+		}));
+	}
+
+	i = info.begin;
+	n = info.end;
+	for(; i <= n; i++) {
+		if (i === info.current) {
+			page.append('<strong>'+i+'</strong>');
+		} else {
+			(function(index){
+				page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
+					e.preventDefault();
+					func(index);
+				}));
+			})(i);
+		}
+	}
+
+	target.append(page);
+
+	if (info.next <= info.last) {
+		target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
+			e.preventDefault();
+			func(info.next);
+		}));
+	}
+	
+	if (info.last > info.end) {
+		target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
+			e.preventDefault();
+			func(info.last);
+		}));
+	}	
+};
+
+/**
+ *  Method : popup Show Hide 
+ */
+$.fn.popupShow = function(options) {
+	var opts = $.extend({}, $.fn.popupShow.defaults, options);
+	
+	if($("body div#" + opts.maskId).size() == 0) {
+		$("body").append("<div id='" + opts.maskId + "'></div>");
+		$("#" + opts.maskId).css({
+			"position" : "absolute",
+			"left"     : "0",
+			"top"      : "0",
+			"z-index"  : "9000",
+			"background-color" : "#000",
+			"display"  : "none"
+		});
+	}
+	
+	var mask_layer  = $("#" + opts.maskId);
+	var popup_layer = $(this);
+	
+	popup_layer.css("z-index", "9999");
+	
+	var maskHeight = $(document).height();
+	var maskWidth = $(window).width();
+	
+	mask_layer.css({'width':maskWidth,'height':maskHeight});
+	
+	mask_layer.fadeIn(opts.fadeSec);
+	mask_layer.fadeTo(opts.speed, opts.fadeLow);
+	
+	var winH = $(window).height();
+	var winW = $(window).width();
+	
+	popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+	popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+	
+	popup_layer.fadeIn(opts.fadeSec);
+	
+	var init_num = 0;
+	
+	if(init_num == 0) {
+		mask_layer.click(function() {
+			$(this).hide();
+			popup_layer.hide();
+		});
+		
+		
+		$("#" + opts.closeId).click( function(e) {
+			e.preventDefault();
+			popup_layer.popupHidden(opts.maskId);
+		});
+		
+		
+		$(window).resize( function() {
+			var maskHeight = $(document).height();
+			var maskWidth  = $(window).width();
+			var winH       = $(window).height();
+			var winW       = $(window).width();
+			
+			mask_layer.css({'width':maskWidth,'height':maskHeight});
+			
+			popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+			popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
+		});
+		
+		init_num++;
+	}
+};
+
+$.fn.popupHidden = function(maskId) {
+	var id = "#";
+	
+	if(maskId) {
+		id = id + maskId;
+	} else {
+		id = id + $.fn.popupShow.defaults.maskId; 
+	}
+	
+	$(id).hide();
+	$(this).hide();
+};
+
+
+$.fn.popupShow.defaults = {
+	speed : "slow",
+	fadeLow : 0.8,
+	fadeSec : 100,
+	maskId  : "mask",
+	popupId : "layer-pop",
+	closeId : "layer-pop-close"
+};
+
+/**
+ *  Method : validate File Ext
+ */
+$.fn.isNotValidateFileExt = function(imgExts) {
+	imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
+	var that = this;
+	var target = null;
+
+	that.each(function (i, item) {
+		var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
+		if (filePath != "") {
+			var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
+			if (!imgExts[fileExt]) {
+				target = item;
+				return false;
+			}
+		}
+	});
+
+	return target;
+}	
+
+/**
+ *  Method : validate SD20 Password
+ */
+$.validator.addMethod("isSD20Pwd", function(value, element) {
+	return this.optional(element) 
+	       || $.SD.isSD20Pwd(value);
+}, "비밀번호를 다시 입력해 주세요.");
+
+$.SD.alterParent = function(options, event) {
+    var label = $(this).data('label');
+    
+    /*
+    if (event && event.type === 'focusin') {
+      label.hide();
+    } else if (event && event.type === 'focusout') {
+      label.css('opacity', options.placeholderOpacity);
+    }
+    */
+    
+    if (event && event.type !== 'keydown') {
+      toggleLabel(this, label);
+    } else {
+      // Use timeout to catch val() just after the key is pressed
+      // Using keyup is too slow.   
+      (function(input) {
+        setTimeout(function() {
+          toggleLabel(input, label);
+        }, 0);
+      })(this);
+    }
+    
+    if (event && event.type === 'focusin') {
+    	label.hide();
+    }
+  };
+  
+  var toggleLabel = function(input, label) {
+    if ($(input).val()) {
+      label.hide();
+    } else {
+      label.show();
+    }
+  };
+
+  $.fn.stickyPlaceholders = function(options) {
+    var defaults = {
+      wrapperClass: 'sticky-placeholder-wrapper',
+      wrapperDisplay: 'block',
+      labelClass: 'sticky-placeholder-label',
+      placeholderAttr: 'placeholder',
+      dataAttr: 'data-sticky-placeholder',
+      placeholderColor: '#000',
+      placeholderOpacity: 0.5,
+      placeholderFocusOpacity: 0.25
+    };
+    options = $.extend(defaults, options);
+
+    return this.each(function() {
+      var input       = $(this),
+          placeholder = input.attr(options.placeholderAttr),
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
+          labelStyle;
+
+      // store a reference to each input's label
+      input.data('label', label);
+
+      // remove the placeholder attribute to avoid conflcits
+      input.removeAttr('placeholder');
+      
+      // If the dataAttr is set and it's not equal to the placeholderAttr
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
+        input.attr('data-sticky-placeholder', placeholder);
+      }
+
+      labelStyle = {
+        'color': options.placeholderColor,
+        'cursor': 'text',
+        'font-family': input.css('font-family'),
+        'font-weight': input.css('font-weight'),
+        'font-size': input.css('font-size'),
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
+        'opacity': options.placeholderOpacity,
+        'padding-left': input.css('padding-left'),
+        'padding-top': input.css('padding-top'),
+        'position': 'absolute',
+        'text-transform': input.css('text-transform'),
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
+      };
+      label.css(labelStyle);
+      
+      // hide the placeholder if the input already has a value
+      if (input.val()) {
+        label.hide();
+      }
+
+      $(this).bind('keydown input focusin focusout', function(event) {
+        $.SD.alterParent.call(this, options, event);
+      });
+        
+      // prevent click/dblclick from selecting the label text
+      label.bind('mousedown', function(e) {
+        e.preventDefault();
+      });
+      
+      // call alterParent initially without an event to set up the wrapper elements
+      $.SD.alterParent.call(this, options);
+    });
+  };
+ 
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {
+	$("#" + file_id).on("keydown", function(e) {
+		var that = $(this);
+		if(e.which == 9 && e.shiftKey) {
+			return true;
+		}
+		
+		if(e.which === 9) {
+			e.preventDefault();
+			setTimeout(function() {
+				$("#" + after_id).focus();
+			}, 1);
+		}
+	});
+	
+	$("#" + after_id).on("keydown", function(e) {
+		if(e.which == 9 && e.shiftKey) {
+			e.preventDefault();
+			setTimeout(function() {
+				$("#" + file_id).focus();
+			}, 1);
+		}
+	});
+}  
+
+$.SD.closeWP = function() {
+	var Browser = navigator.appName;
+	var indexB = Browser.indexOf('Explorer');
+	if (indexB > 0) {
+	    var indexV = navigator.userAgent.indexOf('MSIE') + 5;
+	    var Version = navigator.userAgent.substring(indexV, indexV + 1);
+	    window.opener.focus();
+	    if (Version >= 7) {
+	        window.open('', '_self', '');
+	        window.close();
+	    }
+	    else if (Version == 6) {
+	        window.opener = null;
+	        window.close();
+	    }
+	    else {
+	        window.opener = '';
+	        window.close();
+	    }
+	}
+	else {
+	    window.close();
+	}
+}
+
+$.SD.profileFacebook = function() {
+	location.replace("http://facebook.com/profile.php");
+}
+
+/* ------------------------------ END --------------------------------------- */
+window.$SD = $.SD;
+
+})(jQuery);
+
+
+$(document).ready(function(){
+//document rady Start #########################################
+
+// Top menu action Start
+var onClickChangeEn 		= function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
+var onClickChangeZh 		= function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
+var onClickChangeKo 		= function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
+var onClickSignOut 			= function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
+var onClickSignUp 			= function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
+var onClickSignIn 			= function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
+var onClickUserInfoUpdate 	= function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
+var onClickSignOff 			= function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
+var onClickMyProfileUpdate 	= function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
+var onClickDeleteAccount 	= function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
+
+$("#wrapper").on('click', 'a', function(e) {
+	 switch($(this).attr('id')) {
+	 case 'changeEn': onClickChangeEn(e);  break;
+	 case 'changeZh': onClickChangeZh(e); break;
+	 case 'changeKo': onClickChangeKo(e); break;
+	 case 'signOut': onClickSignOut(e); break;
+	 case 'signUp': onClickSignUp(e); break;
+	 case 'signIn': onClickSignIn(e); break;
+	 case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
+	 case 'signOff': onClickSignOff(e); break;
+	 case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
+	 case 'deleteAccount' : onClickDeleteAccount(e); break;
+	 }
+});
+ 
+//Top menu action End
+
+
+$("#sendFacebook, #sendTwitter").click(function(e) {
+	e.preventDefault();
+	var $this = $(this);
+	
+	if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
+		var sns = $this.attr("id").substring(4).toLowerCase();
+		switch(sns) {
+		case "facebook" :
+			var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
+			$("div.content img").each(function() {
+				var that = $(this);
+				if(that.width() > 200 && that.height() > 200) {
+					imgUrl = that.attr("src");
+					return false;
+				}
+			});
+			
+			var data = {
+				app_id : $("#sd_appId").text(),
+				link : copyUrl,
+				picture : imgUrl,
+				name : $("title").text(),
+				caption : "developer.samsung.com",
+				description : $("div.content p").eq(0).text(),
+				redirectUri : "http://" + location.host + "/board/sns.do"
+			};
+			var url = "https://www.facebook.com/dialog/feed?" ;
+			url += "app_id=" + data.app_id + "&" ;
+			url += "link=" + data.link + "&" ;
+			url += "picture=" + data.picture + "&" ;
+			url += "name=" + encodeURIComponent(data.name) + "&" ;
+			url += "caption=" + encodeURIComponent(data.caption) + "&" ;
+			url += "description=" + encodeURIComponent(data.description) + "&" ;
+			url += "redirect_uri=" + data.redirectUri ;
+			sendSNS(sns, url, 850, 600);
+			break;
+		case "twitter" :
+			sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
+			break;
+		}
+	}
+	
+	function sendSNS(sns, url, iWidth, iHeight) {
+		var popObj = { url : url
+				     , width : iWidth
+				     , height: iHeight
+				     , target: sns
+				     , scrollbars: "yes"
+				     , resizeable: "yes"};
+	
+		$SD.popupCenter(popObj);
+	}
+})
+ 
+//document rady End #########################################
+ });
+
+;(function(){
+	window.deviceImageError = function(el) {
+		var noImage = noImage || '/images/common/device_details_noimage.gif';
+		if (el.src === noImage) 
+			return;
+		el.src = noImage;
+	};
+})();
+
+function commonDownload(fileName, categoryId){
+	if (fileName == "" || categoryId == ""){
+		alert("필요한 인자값을 확인해주세요!!!!")
+		return;
+	}else{
+		$SD.commonDownload(fileName, categoryId, function(data) {
+		});
+	}
+}
+
+function commonDownloadLog(fileFullPath, categoryId){
+	if (fileFullPath == "" || categoryId == ""){
+		alert("필요한 인자값을 확인해주세요!!")
+		return;
+	}else{
+		$SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
+		});
+	}
+}
+
+function commonDownloadLogTarget(fileFullPath, categoryId, target){
+	if (fileFullPath == "" || categoryId == ""){
+		alert("필요한 인자값을 확인해주세요!!")
+		return;
+	}else{
+		$SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
+		});
+	}
+}
+
+function commonAllShareClickCount(fileFullPath, categoryId){
+	if (fileFullPath == "" || categoryId == ""){
+		alert("필요한 인자값을 확인해주세요!!")
+		return;
+	}else{
+		$SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
+		});
+	}
+}
+
+/*
+function layer_view(id){
+
+	var $layer = $('#'+id);
+	var $down  = $('.license-layer').find('a#down');
+
+	$layer.show();
+	$layer.find('.close, #down').click(function(){
+		$layer.hide();
+	});
+
+	function countChecked() {
+		$(":checkbox").is(':checked') ? $down.show() : $down.hide()
+	}
+
+	$(":checkbox").click(countChecked);
+}
+*/
diff --git a/org.tizen.ui.practices/html/scripts/jquery.util.js b/org.tizen.ui.practices/html/scripts/jquery.util.js
new file mode 100644
index 0000000..3fc3ad0
--- /dev/null
+++ b/org.tizen.ui.practices/html/scripts/jquery.util.js
@@ -0,0 +1,1441 @@
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
+
+
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
+
+/*
+ * Metadata - jQuery plugin for parsing metadata from elements
+ *
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
+ *
+ */
+
+/**
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
+ * in the JSON will become a property of the element itself.
+ *
+ * There are three supported types of metadata storage:
+ *
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
+ *          
+ *   class: Inside the class attribute, wrapped in curly braces: { }
+ *   
+ *   elem:  Inside a child element (e.g. a script tag). The
+ *          name parameter indicates *which* element.
+ *          
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.
+ *
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
+ * 
+ * @name $.metadata.setType
+ *
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("class")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from the class attribute
+ * 
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("attr", "data")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a "data" attribute
+ * 
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
+ * @before $.metadata.setType("elem", "script")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a nested script element
+ * 
+ * @param String type The encoding type
+ * @param String name The name of the attribute to be used to get metadata (optional)
+ * @cat Plugins/Metadata
+ * @descr Sets the type of encoding to be used when loading metadata for the first time
+ * @type undefined
+ * @see metadata()
+ */
+
+(function($) {
+
+$.extend({
+	metadata : {
+		defaults : {
+			type: 'class',
+			name: 'metadata',
+			cre: /({.*})/,
+			single: 'metadata'
+		},
+		setType: function( type, name ){
+			this.defaults.type = type;
+			this.defaults.name = name;
+		},
+		get: function( elem, opts ){
+			var settings = $.extend({},this.defaults,opts);
+			// check for empty string in single property
+			if ( !settings.single.length ) settings.single = 'metadata';
+			
+			var data = $.data(elem, settings.single);
+			// returned cached data if it already exists
+			if ( data ) return data;
+			
+			data = "{}";
+			
+			if ( settings.type == "class" ) {
+				var m = settings.cre.exec( elem.className );
+				if ( m )
+					data = m[1];
+			} else if ( settings.type == "elem" ) {
+				if( !elem.getElementsByTagName )
+					return undefined;
+				var e = elem.getElementsByTagName(settings.name);
+				if ( e.length )
+					data = $.trim(e[0].innerHTML);
+			} else if ( elem.getAttribute != undefined ) {
+				var attr = elem.getAttribute( settings.name );
+				if ( attr )
+					data = attr;
+			}
+			
+			if ( data.indexOf( '{' ) <0 )
+			data = "{" + data + "}";
+			
+			data = eval("(" + data + ")");
+			
+			$.data( elem, settings.single, data );
+			return data;
+		}
+	}
+});
+
+/**
+ * Returns the metadata object for the first member of the jQuery object.
+ *
+ * @name metadata
+ * @descr Returns element's metadata object
+ * @param Object opts An object contianing settings to override the defaults
+ * @type jQuery
+ * @cat Plugins/Metadata
+ */
+$.fn.metadata = function( opts ){
+	return $.metadata.get( this[0], opts );
+};
+
+})(jQuery);
+
+
+/**
+ * jQuery Validation Plugin 1.9.0
+
+ *
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
+ * http://docs.jquery.com/Plugins/Validation
+ *
+ * Copyright (c) 2006 - 2011 Jì² rn Zaefferer
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+/**
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
+ */
+
+(function($) {
+
+$.extend($.fn, {
+	// http://docs.jquery.com/Plugins/Validation/validate
+	validate: function( options ) {
+
+		// if nothing is selected, return nothing; can't chain anyway
+		if (!this.length) {
+			options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
+			return;
+		}
+
+		// check if a validator for this form was already created
+		var validator = $.data(this[0], 'validator');
+		if ( validator ) {
+			return validator;
+		}
+
+		// Add novalidate tag if HTML5.
+		this.attr('novalidate', 'novalidate');
+
+		validator = new $.validator( options, this[0] );
+		$.data(this[0], 'validator', validator);
+
+		if ( validator.settings.onsubmit ) {
+
+			var inputsAndButtons = this.find("input, button");
+
+			// allow suppresing validation by adding a cancel class to the submit button
+			inputsAndButtons.filter(".cancel").click(function () {
+				validator.cancelSubmit = true;
+			});
+
+			// when a submitHandler is used, capture the submitting button
+			if (validator.settings.submitHandler) {
+				inputsAndButtons.filter(":submit").click(function () {
+					validator.submitButton = this;
+				});
+			}
+
+			// validate the form on submit
+			this.submit( function( event ) {
+				if ( validator.settings.debug )
+					// prevent form submit to be able to see console output
+					event.preventDefault();
+
+				function handle() {
+					if ( validator.settings.submitHandler ) {
+						if (validator.submitButton) {
+							// insert a hidden input as a replacement for the missing submit button
+							var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
+						}
+						validator.settings.submitHandler.call( validator, validator.currentForm );
+						if (validator.submitButton) {
+							// and clean up afterwards; thanks to no-block-scope, hidden can be referenced
+							hidden.remove();
+						}
+						return false;
+					}
+					return true;
+				}
+
+				// prevent submit for invalid forms or custom submit handlers
+				if ( validator.cancelSubmit ) {
+					validator.cancelSubmit = false;
+					return handle();
+				}
+				if ( validator.form() ) {
+					if ( validator.pendingRequest ) {
+						validator.formSubmitted = true;
+						return false;
+					}
+					return handle();
+				} else {
+					validator.focusInvalid();
+					return false;
+				}
+			});
+		}
+
+		return validator;
+	},
+	// http://docs.jquery.com/Plugins/Validation/valid
+	valid: function() {
+        if ( $(this[0]).is('form')) {
+            return this.validate().form();
+        } else {
+            var valid = true;
+            var validator = $(this[0].form).validate();
+            this.each(function() {
+				valid &= validator.element(this);
+            });
+            return valid;
+        }
+    },
+	// attributes: space seperated list of attributes to retrieve and remove
+	removeAttrs: function(attributes) {
+		var result = {},
+			$element = this;
+		$.each(attributes.split(/\s/), function(index, value) {
+			result[value] = $element.attr(value);
+			$element.removeAttr(value);
+		});
+		return result;
+	},
+	// http://docs.jquery.com/Plugins/Validation/rules
+	rules: function(command, argument) {
+		var element = this[0];
+
+		if (command) {
+			var settings = $.data(element.form, 'validator').settings;
+			var staticRules = settings.rules;
+			var existingRules = $.validator.staticRules(element);
+			switch(command) {
+			case "add":
+				$.extend(existingRules, $.validator.normalizeRule(argument));
+				staticRules[element.name] = existingRules;
+				if (argument.messages)
+					settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
+				break;
+			case "remove":
+				if (!argument) {
+					delete staticRules[element.name];
+					return existingRules;
+				}
+				var filtered = {};
+				$.each(argument.split(/\s/), function(index, method) {
+					filtered[method] = existingRules[method];
+					delete existingRules[method];
+				});
+				return filtered;
+			}
+		}
+
+		var data = $.validator.normalizeRules(
+		$.extend(
+			{},
+			$.validator.metadataRules(element),
+			$.validator.classRules(element),
+			$.validator.attributeRules(element),
+			$.validator.staticRules(element)
+		), element);
+
+		// make sure required is at front
+		if (data.required) {
+			var param = data.required;
+			delete data.required;
+			data = $.extend({required: param}, data);
+		}
+
+		return data;
+	}
+});
+
+// Custom selectors
+$.extend($.expr[":"], {
+	// http://docs.jquery.com/Plugins/Validation/blank
+	blank: function(a) {return !$.trim("" + a.value);},
+	// http://docs.jquery.com/Plugins/Validation/filled
+	filled: function(a) {return !!$.trim("" + a.value);},
+	// http://docs.jquery.com/Plugins/Validation/unchecked
+	unchecked: function(a) {return !a.checked;}
+});
+
+// constructor for validator
+$.validator = function( options, form ) {
+	this.settings = $.extend( true, {}, $.validator.defaults, options );
+	this.currentForm = form;
+	this.init();
+};
+
+$.validator.format = function(source, params) {
+	if ( arguments.length == 1 )
+		return function() {
+			var args = $.makeArray(arguments);
+			args.unshift(source);
+			return $.validator.format.apply( this, args );
+		};
+	if ( arguments.length > 2 && params.constructor != Array  ) {
+		params = $.makeArray(arguments).slice(1);
+	}
+	if ( params.constructor != Array ) {
+		params = [ params ];
+	}
+	$.each(params, function(i, n) {
+		source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
+	});
+	return source;
+};
+
+$.extend($.validator, {
+
+	defaults: {
+		messages: {},
+		groups: {},
+		rules: {},
+		errorClass: "error",
+		validClass: "valid",
+		errorElement: "label",
+		focusInvalid: true,
+		errorContainer: $( [] ),
+		errorLabelContainer: $( [] ),
+		onsubmit: true,
+		ignore: ":hidden",
+		ignoreTitle: false,
+		onfocusin: function(element, event) {
+			this.lastActive = element;
+
+			// hide error label and remove error class on focus if enabled
+			if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
+				this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
+				this.addWrapper(this.errorsFor(element)).hide();
+			}
+		},
+		onfocusout: function(element, event) {
+			if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
+				this.element(element);
+			}
+		},
+		onkeyup: function(element, event) {
+			if ( element.name in this.submitted || element == this.lastElement ) {
+				this.element(element);
+			}
+		},
+		onclick: function(element, event) {
+			// click on selects, radiobuttons and checkboxes
+			if ( element.name in this.submitted )
+				this.element(element);
+			// or option elements, check parent select in that case
+			else if (element.parentNode.name in this.submitted)
+				this.element(element.parentNode);
+		},
+		highlight: function(element, errorClass, validClass) {
+			if (element.type === 'radio') {
+				this.findByName(element.name).addClass(errorClass).removeClass(validClass);
+			} else {
+				$(element).addClass(errorClass).removeClass(validClass);
+			}
+		},
+		unhighlight: function(element, errorClass, validClass) {
+			if (element.type === 'radio') {
+				this.findByName(element.name).removeClass(errorClass).addClass(validClass);
+			} else {
+				$(element).removeClass(errorClass).addClass(validClass);
+			}
+		}
+	},
+
+	// http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
+	setDefaults: function(settings) {
+		$.extend( $.validator.defaults, settings );
+	},
+
+	messages: {
+		required: "This field is required.",
+		remote: "Please fix this field.",
+		email: "Please enter a valid email address.",
+		url: "Please enter a valid URL.",
+		date: "Please enter a valid date.",
+		dateISO: "Please enter a valid date (ISO).",
+		number: "Please enter a valid number.",
+		digits: "Please enter only digits.",
+		creditcard: "Please enter a valid credit card number.",
+		equalTo: "Please enter the same value again.",
+		accept: "Please enter a value with a valid extension.",
+		maxlength: $.validator.format("Please enter no more than {0} characters."),
+		minlength: $.validator.format("Please enter at least {0} characters."),
+		rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
+		range: $.validator.format("Please enter a value between {0} and {1}."),
+		max: $.validator.format("Please enter a value less than or equal to {0}."),
+		min: $.validator.format("Please enter a value greater than or equal to {0}.")
+	},
+
+	autoCreateRanges: false,
+
+	prototype: {
+
+		init: function() {
+			this.labelContainer = $(this.settings.errorLabelContainer);
+			this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
+			this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
+			this.submitted = {};
+			this.valueCache = {};
+			this.pendingRequest = 0;
+			this.pending = {};
+			this.invalid = {};
+			this.reset();
+
+			var groups = (this.groups = {});
+			$.each(this.settings.groups, function(key, value) {
+				$.each(value.split(/\s/), function(index, name) {
+					groups[name] = key;
+				});
+			});
+			var rules = this.settings.rules;
+			$.each(rules, function(key, value) {
+				rules[key] = $.validator.normalizeRule(value);
+			});
+
+			function delegate(event) {
+				var validator = $.data(this[0].form, "validator"),
+					eventType = "on" + event.type.replace(/^validate/, "");
+				validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
+			}
+			$(this.currentForm)
+			       .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
+						"[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
+						"[type='email'], [type='datetime'], [type='date'], [type='month'], " +
+						"[type='week'], [type='time'], [type='datetime-local'], " +
+						"[type='range'], [type='color'] ",
+						"focusin focusout keyup", delegate)
+				.validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
+
+			if (this.settings.invalidHandler)
+				$(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Validator/form
+		form: function() {
+			this.checkForm();
+			$.extend(this.submitted, this.errorMap);
+			this.invalid = $.extend({}, this.errorMap);
+			if (!this.valid())
+				$(this.currentForm).triggerHandler("invalid-form", [this]);
+			this.showErrors();
+			return this.valid();
+		},
+
+		// 원본소스
+		/*
+		checkForm: function() {
+			this.prepareForm();
+			for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+				this.check( elements[i] );
+			}
+			return this.valid();
+		},
+		*/
+
+		// 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
+		checkForm: function() {
+			this.prepareForm();
+			for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+				if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
+					for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
+						this.check( this.findByName( elements[i].name )[cnt] );
+					}
+				} else {
+					this.check( elements[i] );
+				}
+			}
+			return this.valid();
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Validator/element
+		element: function( element ) {
+			element = this.validationTargetFor( this.clean( element ) );
+			this.lastElement = element;
+			this.prepareElement( element );
+			this.currentElements = $(element);
+			var result = this.check( element );
+			if ( result ) {
+				delete this.invalid[element.name];
+			} else {
+				this.invalid[element.name] = true;
+			}
+			if ( !this.numberOfInvalids() ) {
+				// Hide error containers on last error
+				this.toHide = this.toHide.add( this.containers );
+			}
+			this.showErrors();
+			return result;
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Validator/showErrors
+		showErrors: function(errors) {
+			if(errors) {
+				// add items to error list and map
+				$.extend( this.errorMap, errors );
+				this.errorList = [];
+				for ( var name in errors ) {
+					this.errorList.push({
+						message: errors[name],
+						element: this.findByName(name)[0]
+					});
+				}
+				// remove items from success list
+				this.successList = $.grep( this.successList, function(element) {
+					return !(element.name in errors);
+				});
+			}
+			this.settings.showErrors
+				? this.settings.showErrors.call( this, this.errorMap, this.errorList )
+				: this.defaultShowErrors();
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Validator/resetForm
+		resetForm: function() {
+			if ( $.fn.resetForm )
+				$( this.currentForm ).resetForm();
+			this.submitted = {};
+			this.lastElement = null;
+			this.prepareForm();
+			this.hideErrors();
+			this.elements().removeClass( this.settings.errorClass );
+		},
+
+		numberOfInvalids: function() {
+			return this.objectLength(this.invalid);
+		},
+
+		objectLength: function( obj ) {
+			var count = 0;
+			for ( var i in obj )
+				count++;
+			return count;
+		},
+
+		hideErrors: function() {
+			this.addWrapper( this.toHide ).hide();
+		},
+
+		valid: function() {
+			return this.size() == 0;
+		},
+
+		size: function() {
+			return this.errorList.length;
+		},
+
+		focusInvalid: function() {
+			if( this.settings.focusInvalid ) {
+				try {
+					$(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
+					.filter(":visible")
+					.focus()
+					// manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
+					.trigger("focusin");
+				} catch(e) {
+					// ignore IE throwing errors when focusing hidden elements
+				}
+			}
+		},
+
+		findLastActive: function() {
+			var lastActive = this.lastActive;
+			return lastActive && $.grep(this.errorList, function(n) {
+				return n.element.name == lastActive.name;
+			}).length == 1 && lastActive;
+		},
+
+		elements: function() {
+			var validator = this,
+				rulesCache = {};
+
+			// select all valid inputs inside the form (no submit or reset buttons)
+			return $(this.currentForm)
+			.find("input, select, textarea")
+			.not(":submit, :reset, :image, [disabled]")
+			.not( this.settings.ignore )
+			.filter(function() {
+				!this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
+
+				// select only the first element for each name, and only those with rules specified
+				if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
+					return false;
+
+				rulesCache[this.name] = true;
+				return true;
+			});
+		},
+
+		clean: function( selector ) {
+			return $( selector )[0];
+		},
+
+		errors: function() {
+			return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
+		},
+
+		reset: function() {
+			this.successList = [];
+			this.errorList = [];
+			this.errorMap = {};
+			this.toShow = $([]);
+			this.toHide = $([]);
+			this.currentElements = $([]);
+		},
+
+		prepareForm: function() {
+			this.reset();
+			this.toHide = this.errors().add( this.containers );
+		},
+
+		prepareElement: function( element ) {
+			this.reset();
+			this.toHide = this.errorsFor(element);
+		},
+
+		check: function( element ) {
+			element = this.validationTargetFor( this.clean( element ) );
+
+			var rules = $(element).rules();
+			var dependencyMismatch = false;
+			for (var method in rules ) {
+				var rule = { method: method, parameters: rules[method] };
+				try {
+					var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
+
+					// if a method indicates that the field is optional and therefore valid,
+					// don't mark it as valid when there are no other rules
+					if ( result == "dependency-mismatch" ) {
+						dependencyMismatch = true;
+						continue;
+					}
+					dependencyMismatch = false;
+
+					if ( result == "pending" ) {
+						this.toHide = this.toHide.not( this.errorsFor(element) );
+						return;
+					}
+
+					if( !result ) {
+						this.formatAndAdd( element, rule );
+						return false;
+					}
+				} catch(e) {
+					this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
+						 + ", check the '" + rule.method + "' method", e);
+					throw e;
+				}
+			}
+			if (dependencyMismatch)
+				return;
+			if ( this.objectLength(rules) )
+				this.successList.push(element);
+			return true;
+		},
+
+		// return the custom message for the given element and validation method
+		// specified in the element's "messages" metadata
+		customMetaMessage: function(element, method) {
+			if (!$.metadata)
+				return;
+
+			var meta = this.settings.meta
+				? $(element).metadata()[this.settings.meta]
+				: $(element).metadata();
+
+			return meta && meta.messages && meta.messages[method];
+		},
+
+		// return the custom message for the given element name and validation method
+		customMessage: function( name, method ) {
+			var m = this.settings.messages[name];
+			return m && (m.constructor == String
+				? m
+				: m[method]);
+		},
+
+		// return the first defined argument, allowing empty strings
+		findDefined: function() {
+			for(var i = 0; i < arguments.length; i++) {
+				if (arguments[i] !== undefined)
+					return arguments[i];
+			}
+			return undefined;
+		},
+
+		defaultMessage: function( element, method) {
+			return this.findDefined(
+				this.customMessage( element.name, method ),
+				this.customMetaMessage( element, method ),
+				// title is never undefined, so handle empty string as undefined
+				!this.settings.ignoreTitle && element.title || undefined,
+				$.validator.messages[method],
+				"<strong>Warning: No message defined for " + element.name + "</strong>"
+			);
+		},
+
+		formatAndAdd: function( element, rule ) {
+			var message = this.defaultMessage( element, rule.method ),
+				theregex = /\$?\{(\d+)\}/g;
+			if ( typeof message == "function" ) {
+				message = message.call(this, rule.parameters, element);
+			} else if (theregex.test(message)) {
+				message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
+			}
+			this.errorList.push({
+				message: message,
+				element: element
+			});
+
+			this.errorMap[element.name] = message;
+			this.submitted[element.name] = message;
+		},
+
+		addWrapper: function(toToggle) {
+			if ( this.settings.wrapper )
+				toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
+			return toToggle;
+		},
+
+		defaultShowErrors: function() {
+			for ( var i = 0; this.errorList[i]; i++ ) {
+				var error = this.errorList[i];
+				this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
+				this.showLabel( error.element, error.message );
+			}
+			if( this.errorList.length ) {
+				this.toShow = this.toShow.add( this.containers );
+			}
+			if (this.settings.success) {
+				for ( var i = 0; this.successList[i]; i++ ) {
+					this.showLabel( this.successList[i] );
+				}
+			}
+			if (this.settings.unhighlight) {
+				for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
+					this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
+				}
+			}
+			this.toHide = this.toHide.not( this.toShow );
+			this.hideErrors();
+			this.addWrapper( this.toShow ).show();
+		},
+
+		validElements: function() {
+			return this.currentElements.not(this.invalidElements());
+		},
+
+		invalidElements: function() {
+			return $(this.errorList).map(function() {
+				return this.element;
+			});
+		},
+
+		showLabel: function(element, message) {
+			var label = this.errorsFor( element );
+			if ( label.length ) {
+				// refresh error/success class
+				label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
+
+				// check if we have a generated label, replace the message then
+				label.attr("generated") && label.html(message);
+			} else {
+				// create label
+				label = $("<" + this.settings.errorElement + "/>")
+					.attr({"for":  this.idOrName(element), generated: true})
+					.addClass(this.settings.errorClass)
+					.html(message || "");
+				if ( this.settings.wrapper ) {
+					// make sure the element is visible, even in IE
+					// actually showing the wrapped element is handled elsewhere
+					label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
+				}
+				if ( !this.labelContainer.append(label).length )
+					this.settings.errorPlacement
+						? this.settings.errorPlacement(label, $(element) )
+						: label.insertAfter(element);
+			}
+			if ( !message && this.settings.success ) {
+				label.text("");
+				typeof this.settings.success == "string"
+					? label.addClass( this.settings.success )
+					: this.settings.success( label );
+			}
+			this.toShow = this.toShow.add(label);
+		},
+
+		errorsFor: function(element) {
+			var name = this.idOrName(element);
+    		return this.errors().filter(function() {
+				return $(this).attr('for') == name;
+			});
+		},
+
+		idOrName: function(element) {
+			return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
+		},
+
+		validationTargetFor: function(element) {
+			// if radio/checkbox, validate first element in group instead
+			if (this.checkable(element)) {
+				element = this.findByName( element.name ).not(this.settings.ignore)[0];
+			}
+			return element;
+		},
+
+		checkable: function( element ) {
+			return /radio|checkbox/i.test(element.type);
+		},
+
+		findByName: function( name ) {
+			// select by name and filter by form for performance over form.find("[name=...]")
+			var form = this.currentForm;
+			return $(document.getElementsByName(name)).map(function(index, element) {
+				return element.form == form && element.name == name && element  || null;
+			});
+		},
+
+		getLength: function(value, element) {
+			switch( element.nodeName.toLowerCase() ) {
+			case 'select':
+				return $("option:selected", element).length;
+			case 'input':
+				if( this.checkable( element) )
+					return this.findByName(element.name).filter(':checked').length;
+			}
+			return value.length;
+		},
+
+		depend: function(param, element) {
+			return this.dependTypes[typeof param]
+				? this.dependTypes[typeof param](param, element)
+				: true;
+		},
+
+		dependTypes: {
+			"boolean": function(param, element) {
+				return param;
+			},
+			"string": function(param, element) {
+				return !!$(param, element.form).length;
+			},
+			"function": function(param, element) {
+				return param(element);
+			}
+		},
+
+		optional: function(element) {
+			return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
+		},
+
+		startRequest: function(element) {
+			if (!this.pending[element.name]) {
+				this.pendingRequest++;
+				this.pending[element.name] = true;
+			}
+		},
+
+		stopRequest: function(element, valid) {
+			this.pendingRequest--;
+			// sometimes synchronization fails, make sure pendingRequest is never < 0
+			if (this.pendingRequest < 0)
+				this.pendingRequest = 0;
+			delete this.pending[element.name];
+			if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
+				$(this.currentForm).submit();
+				this.formSubmitted = false;
+			} else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
+				$(this.currentForm).triggerHandler("invalid-form", [this]);
+				this.formSubmitted = false;
+			}
+		},
+
+		previousValue: function(element) {
+			return $.data(element, "previousValue") || $.data(element, "previousValue", {
+				old: null,
+				valid: true,
+				message: this.defaultMessage( element, "remote" )
+			});
+		}
+
+	},
+
+	classRuleSettings: {
+		required: {required: true},
+		email: {email: true},
+		url: {url: true},
+		date: {date: true},
+		dateISO: {dateISO: true},
+		dateDE: {dateDE: true},
+		number: {number: true},
+		numberDE: {numberDE: true},
+		digits: {digits: true},
+		creditcard: {creditcard: true}
+	},
+
+	addClassRules: function(className, rules) {
+		className.constructor == String ?
+			this.classRuleSettings[className] = rules :
+			$.extend(this.classRuleSettings, className);
+	},
+
+	classRules: function(element) {
+		var rules = {};
+		var classes = $(element).attr('class');
+		classes && $.each(classes.split(' '), function() {
+			if (this in $.validator.classRuleSettings) {
+				$.extend(rules, $.validator.classRuleSettings[this]);
+			}
+		});
+		return rules;
+	},
+
+	attributeRules: function(element) {
+		var rules = {};
+		var $element = $(element);
+
+		for (var method in $.validator.methods) {
+			var value;
+			// If .prop exists (jQuery >= 1.6), use it to get true/false for required
+			if (method === 'required' && typeof $.fn.prop === 'function') {
+				value = $element.prop(method);
+			} else {
+				value = $element.attr(method);
+			}
+			if (value) {
+				rules[method] = value;
+			} else if ($element[0].getAttribute("type") === method) {
+				rules[method] = true;
+			}
+		}
+
+		// maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
+		if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
+			delete rules.maxlength;
+		}
+
+		return rules;
+	},
+
+	metadataRules: function(element) {
+		if (!$.metadata) return {};
+
+		var meta = $.data(element.form, 'validator').settings.meta;
+		return meta ?
+			$(element).metadata()[meta] :
+			$(element).metadata();
+	},
+
+	staticRules: function(element) {
+		var rules = {};
+		var validator = $.data(element.form, 'validator');
+		if (validator.settings.rules) {
+			rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
+		}
+		return rules;
+	},
+
+	normalizeRules: function(rules, element) {
+		// handle dependency check
+		$.each(rules, function(prop, val) {
+			// ignore rule when param is explicitly false, eg. required:false
+			if (val === false) {
+				delete rules[prop];
+				return;
+			}
+			if (val.param || val.depends) {
+				var keepRule = true;
+				switch (typeof val.depends) {
+					case "string":
+						keepRule = !!$(val.depends, element.form).length;
+						break;
+					case "function":
+						keepRule = val.depends.call(element, element);
+						break;
+				}
+				if (keepRule) {
+					rules[prop] = val.param !== undefined ? val.param : true;
+				} else {
+					delete rules[prop];
+				}
+			}
+		});
+
+		// evaluate parameters
+		$.each(rules, function(rule, parameter) {
+			rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
+		});
+
+		// clean number parameters
+		$.each(['minlength', 'maxlength', 'min', 'max'], function() {
+			if (rules[this]) {
+				rules[this] = Number(rules[this]);
+			}
+		});
+		$.each(['rangelength', 'range'], function() {
+			if (rules[this]) {
+				rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
+			}
+		});
+
+		if ($.validator.autoCreateRanges) {
+			// auto-create ranges
+			if (rules.min && rules.max) {
+				rules.range = [rules.min, rules.max];
+				delete rules.min;
+				delete rules.max;
+			}
+			if (rules.minlength && rules.maxlength) {
+				rules.rangelength = [rules.minlength, rules.maxlength];
+				delete rules.minlength;
+				delete rules.maxlength;
+			}
+		}
+
+		// To support custom messages in metadata ignore rule methods titled "messages"
+		if (rules.messages) {
+			delete rules.messages;
+		}
+
+		return rules;
+	},
+
+	// Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
+	normalizeRule: function(data) {
+		if( typeof data == "string" ) {
+			var transformed = {};
+			$.each(data.split(/\s/), function() {
+				transformed[this] = true;
+			});
+			data = transformed;
+		}
+		return data;
+	},
+
+	// http://docs.jquery.com/Plugins/Validation/Validator/addMethod
+	addMethod: function(name, method, message) {
+		$.validator.methods[name] = method;
+		$.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
+		if (method.length < 3) {
+			$.validator.addClassRules(name, $.validator.normalizeRule(name));
+		}
+	},
+
+	methods: {
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/required
+		required: function(value, element, param) {
+			// check if dependency is met
+			if ( !this.depend(param, element) )
+				return "dependency-mismatch";
+			switch( element.nodeName.toLowerCase() ) {
+			case 'select':
+				// could be an array for select-multiple or a string, both are fine this way
+				var val = $(element).val();
+				return val && val.length > 0;
+			case 'input':
+				if ( this.checkable(element) )
+					return this.getLength(value, element) > 0;
+			default:
+				return $.trim(value).length > 0;
+			}
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/remote
+		remote: function(value, element, param) {
+			if ( this.optional(element) )
+				return "dependency-mismatch";
+
+			var previous = this.previousValue(element);
+			if (!this.settings.messages[element.name] )
+				this.settings.messages[element.name] = {};
+			previous.originalMessage = this.settings.messages[element.name].remote;
+			this.settings.messages[element.name].remote = previous.message;
+
+			param = typeof param == "string" && {url:param} || param;
+
+			if ( this.pending[element.name] ) {
+				return "pending";
+			}
+			if ( previous.old === value ) {
+				return previous.valid;
+			}
+
+			previous.old = value;
+			var validator = this;
+			this.startRequest(element);
+			var data = {};
+			data[element.name] = value;
+			$.ajax($.extend(true, {
+				url: param,
+				mode: "abort",
+				port: "validate" + element.name,
+				dataType: "json",
+				data: data,
+				success: function(response) {
+					validator.settings.messages[element.name].remote = previous.originalMessage;
+					var valid = response === true;
+					if ( valid ) {
+						var submitted = validator.formSubmitted;
+						validator.prepareElement(element);
+						validator.formSubmitted = submitted;
+						validator.successList.push(element);
+						validator.showErrors();
+					} else {
+						var errors = {};
+						var message = response || validator.defaultMessage( element, "remote" );
+						errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
+						validator.showErrors(errors);
+					}
+					previous.valid = valid;
+					validator.stopRequest(element, valid);
+				}
+			}, param));
+			return "pending";
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/minlength
+		minlength: function(value, element, param) {
+			return this.optional(element) || this.getLength($.trim(value), element) >= param;
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/maxlength
+		maxlength: function(value, element, param) {
+			return this.optional(element) || this.getLength($.trim(value), element) <= param;
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/rangelength
+		rangelength: function(value, element, param) {
+			var length = this.getLength($.trim(value), element);
+			return this.optional(element) || ( length >= param[0] && length <= param[1] );
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/min
+		min: function( value, element, param ) {
+			return this.optional(element) || value >= param;
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/max
+		max: function( value, element, param ) {
+			return this.optional(element) || value <= param;
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/range
+		range: function( value, element, param ) {
+			return this.optional(element) || ( value >= param[0] && value <= param[1] );
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/email
+		email: function(value, element) {
+			// contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
+			return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/url
+		url: function(value, element) {
+			// contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
+			return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/date
+		date: function(value, element) {
+			return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/dateISO
+		dateISO: function(value, element) {
+			return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/number
+		number: function(value, element) {
+			return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/digits
+		digits: function(value, element) {
+			return this.optional(element) || /^\d+$/.test(value);
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/creditcard
+		// based on http://en.wikipedia.org/wiki/Luhn
+		creditcard: function(value, element) {
+			if ( this.optional(element) )
+				return "dependency-mismatch";
+			// accept only spaces, digits and dashes
+			if (/[^0-9 -]+/.test(value))
+				return false;
+			var nCheck = 0,
+				nDigit = 0,
+				bEven = false;
+
+			value = value.replace(/\D/g, "");
+
+			for (var n = value.length - 1; n >= 0; n--) {
+				var cDigit = value.charAt(n);
+				var nDigit = parseInt(cDigit, 10);
+				if (bEven) {
+					if ((nDigit *= 2) > 9)
+						nDigit -= 9;
+				}
+				nCheck += nDigit;
+				bEven = !bEven;
+			}
+
+			return (nCheck % 10) == 0;
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/accept
+		accept: function(value, element, param) {
+			param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
+			return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
+		},
+
+		// http://docs.jquery.com/Plugins/Validation/Methods/equalTo
+		equalTo: function(value, element, param) {
+			// bind to the blur event of the target in order to revalidate whenever the target field is updated
+			// TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
+			var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
+				$(element).valid();
+			});
+			return value == target.val();
+		}
+
+	}
+
+});
+
+// deprecated, use $.validator.format instead
+$.format = $.validator.format;
+
+})(jQuery);
+
+// ajax mode: abort
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
+;(function($) {
+	var pendingRequests = {};
+	// Use a prefilter if available (1.5+)
+	if ( $.ajaxPrefilter ) {
+		$.ajaxPrefilter(function(settings, _, xhr) {
+			var port = settings.port;
+			if (settings.mode == "abort") {
+				if ( pendingRequests[port] ) {
+					pendingRequests[port].abort();
+				}
+				pendingRequests[port] = xhr;
+			}
+		});
+	} else {
+		// Proxy ajax
+		var ajax = $.ajax;
+		$.ajax = function(settings) {
+			var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
+				port = ( "port" in settings ? settings : $.ajaxSettings ).port;
+			if (mode == "abort") {
+				if ( pendingRequests[port] ) {
+					pendingRequests[port].abort();
+				}
+				return (pendingRequests[port] = ajax.apply(this, arguments));
+			}
+			return ajax.apply(this, arguments);
+		};
+	}
+})(jQuery);
+
+// provides cross-browser focusin and focusout events
+// IE has native support, in other browsers, use event caputuring (neither bubbles)
+
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
+;(function($) {
+	// only implement if not provided by jQuery core (since 1.4)
+	// TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
+	if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
+		$.each({
+			focus: 'focusin',
+			blur: 'focusout'
+		}, function( original, fix ){
+			$.event.special[fix] = {
+				setup:function() {
+					this.addEventListener( original, handler, true );
+				},
+				teardown:function() {
+					this.removeEventListener( original, handler, true );
+				},
+				handler: function(e) {
+					arguments[0] = $.event.fix(e);
+					arguments[0].type = fix;
+					return $.event.handle.apply(this, arguments);
+				}
+			};
+			function handler(e) {
+				e = $.event.fix(e);
+				e.type = fix;
+				return $.event.handle.call(this, e);
+			}
+		});
+	};
+	$.extend($.fn, {
+		validateDelegate: function(delegate, type, handler) {
+			return this.bind(type, function(event) {
+				var target = $(event.target);
+				if (target.is(delegate)) {
+					return handler.apply(target, arguments);
+				}
+			});
+		}
+	});
+})(jQuery);
+
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
+
+/*
+ * jScrollPane - v2.0.0beta12 - 2012-07-24
+ * http://jscrollpane.kelvinluck.com/
+ *
+ * Copyright (c) 2010 Kelvin Luck
+ * Dual licensed under the MIT and GPL licenses.
+ */
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+})}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/scripts/jquery.zclip.min.js b/org.tizen.ui.practices/html/scripts/jquery.zclip.min.js
new file mode 100644
index 0000000..51471a1
--- /dev/null
+++ b/org.tizen.ui.practices/html/scripts/jquery.zclip.min.js
@@ -0,0 +1,12 @@
+/*
+ * zClip :: jQuery ZeroClipboard v1.1.1
+ * http://steamdev.com/zclip
+ *
+ * Copyright 2011, SteamDev
+ * Released under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Date: Wed Jun 01, 2011
+ */
+
+(function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/scripts/navi.js b/org.tizen.ui.practices/html/scripts/navi.js
new file mode 100644
index 0000000..badc738
--- /dev/null
+++ b/org.tizen.ui.practices/html/scripts/navi.js
@@ -0,0 +1,192 @@
+//<![CDATA[
+    var staticURL = "http://img-developer.samsung.com";
+   	var sslCall = "";
+
+   	if('' !== 'N') {
+		var locationStr = location.href;
+		if(locationStr.indexOf("https://") > -1) {
+			location.href = "http://" + locationStr.substring(8);
+		}     
+    }
+
+//    	if( typeof($) === function ) {
+   		//https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
+   		//? ??? ?? ?? ??? ?? ?? ???.
+//    	}
+    $SD.pagination.alt = {
+   		first:"go first",
+   		prev:"go prev",
+   		next:"go next",
+   		last:"go last"
+    };
+    $(document).ready(function(){
+    	var myVar;
+	    topSearchInit();//top search ??
+	    $('#searchTop').attr("autocomplete","off");
+	    var searchingBoolean = false;
+	    
+	    var topSearchChange = function(){
+	    	
+	    	if (searchingBoolean) return;
+	    	
+			var searchInput = $('#searchTop').val();
+			
+			if($('#searchTop').val() != ""){
+				$("#topAutocomplete").hide();
+				searchingBoolean = true;
+				
+				var jsonData = {
+						url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
+						async : true,
+						data : { searchInput : searchInput},
+						success : function(data){
+							if (searchInput == $('#searchTop').val()){
+								var autoComplete = data.kwdNm;
+								var tmpHtml = "";
+								
+								if (autoComplete.length > 0){
+									$('#topAutocomplete').children().remove();
+									$('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
+									$.each(autoComplete, function(i, item){
+										var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
+										a.data('keyword', item.kwdNm);
+										$('#topAutocompleteList').append($('<li><\/li>').html(a));
+									});
+									$("#topAutocompleteList").find("li").last().on("keydown", function(e) {
+										if(e.which == 9 && e.shiftKey) {
+											return true;
+										}
+										
+										if(e.which == 9) {
+											e.preventDefault();
+											$('#topAutocomplete').hide();	
+											setTimeout(function() {
+												$("#searchTopBtn").focus();
+											}, 1);
+										}
+										
+									});
+									$("#searchTopBtn").off("focusout", function(e) {});
+								    $("#searchTopBtn").on("focusout", function(e) {
+										$('#topAutocomplete').hide();
+									});
+								}else{
+									$('#topAutocomplete').children().remove();
+								}
+								if($('#searchTop').val() == ""){
+									$("#topAutocomplete").hide();
+									searchingBoolean = false;
+									return;
+								}else{
+									if (searchInput == $('#searchTop').val()){
+										searchingBoolean = false;
+									}else{
+										searchingBoolean = false;
+										topSearchChange();
+									}
+								}
+								if (autoComplete.length == 0){
+									$("#topAutocomplete").hide();
+								}else{
+									if (searchInput == $('#searchTop').val()){
+										$("#topAutocomplete").show();
+										var $searchList = $("#topAutocomplete").find('ul');
+										var hei = $searchList.outerHeight();
+										if(hei>180){
+											$searchList.css({'height':'180px','overflow-y':'auto'});
+										}
+									}else{
+										searchingBoolean = false;
+										topSearchChange();
+									}
+								}
+							}else{
+								searchingBoolean = false;
+								topSearchChange();
+							}
+						},
+						error : function() {searchingBoolean = false;}
+						
+				};
+				//setTimeout(function(){$SD.ajax.get(jsonData);},100);
+				$SD.ajax.get(jsonData);
+				searchingBoolean = false;
+			}
+			
+			//console.log("/search/autoComplete.do end");
+			//console.groupEnd();
+		};
+		
+		$('#searchTop').keyup(function(e){
+			if($('#searchTop').val() == ""){
+				$('#topAutocomplete').children().remove();
+				$("#topAutocomplete").hide();
+			}else{
+				if(e.which == 13){
+					search();
+				}else{
+					topSearchChange();
+				}
+			}
+		});
+		
+		var search = function(){
+			if($.trim($('#searchTop').val()) == ""){
+				alert('Search keyword is required.');
+			}else{
+				$('#topSearchForm').submit();
+			}
+		};
+		$("#topAutocomplete").on('mousedown','ul li a', function(e){
+			e.preventDefault();
+			var keyword = $(this).data('keyword');
+			$("#searchTop").val(keyword);
+			$('#topSearchForm').submit();
+		});
+		
+		$("#topAutocomplete").on('keydown keypress','ul li a', function(e){
+			if(e.which == 13) {
+				e.preventDefault();
+				var keyword = $(this).data('keyword');
+				$("#searchTop").val(keyword);
+				$('#topSearchForm').submit();			
+			}
+		});
+		
+		$('#searchTopBtn').click(function(e){
+			search();	
+		});  
+    });
+    
+    function topSearchEnter(){
+    	if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
+    		alert('Search keyword is required.');
+    		return false;
+    	}else{
+    		return true;
+    	}
+    }
+
+/* Tracking Code TOTAL */
+		var _gaq = _gaq || [];
+		var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
+		_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
+		_gaq.push(['_setAccount', 'UA-6892706-3']);
+		_gaq.push(['_setDomainName', 'samsung.com']);
+		_gaq.push(['_setAllowLinker', true]);
+		_gaq.push(['_trackPageview']);
+		(function() {
+		  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+		  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+		  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+		})();
+	
+		<!--// Tracking Code 1 -->
+			var _gaq = _gaq || [];
+			_gaq.push(['_setAccount', 'UA-6892706-4']);
+			_gaq.push(['_trackPageview']);
+			(function() {
+			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+			})();
diff --git a/org.tizen.ui.practices/html/scripts/search.js b/org.tizen.ui.practices/html/scripts/search.js
new file mode 100644
index 0000000..d1ae5ad
--- /dev/null
+++ b/org.tizen.ui.practices/html/scripts/search.js
@@ -0,0 +1,168 @@
+/** 
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+ */
+function searchInit()
+{
+	var focusTarget = "input";
+
+	//$("#autocomplete").hide();
+
+	//$("#searchInput").bind("keydown", checkSearchText);
+	
+	$("#searchInput").focusout(function() {
+		if( focusTarget == "dropdown" )
+		{
+			return false;
+		}
+		else
+		{
+			//toggleClass( false );
+		}
+	});
+	
+	$( "#searchInput" ).focusin( function()	{
+		focusTarget = "input";
+	});
+
+	$("#btnDropdown").mousedown( function(){
+		focusTarget = "dropdown";
+	});
+
+	$(".autocomplete ul li").focusin( function() {
+		//
+	});
+	
+	$("#autocomplete").bind("mouseleave",function(){
+		$(this).hide();
+		$("#btnDropdown").removeClass("dropdownoff");
+		$("#btnDropdown").addClass("dropdown");		
+	});
+
+	$(".autocomplete ul li:last-child").focusout( function() {
+		toggleClass( false );
+	});
+	
+	$("#btnDropdown").click( function(){
+		//alert("btn click");
+		if( $("#searchInput").val().length == 0 ){ 
+			return false;
+		}
+		else{
+			if( $("#btnDropdown").hasClass("dropdown") ){
+				toggleClass( true );
+			}
+			else{
+				toggleClass( false );
+			}
+		}
+
+		return false;
+	});
+
+	function checkSearchText(){
+		setTimeout(function(){
+			var txt = $("#searchInput").val();
+
+			if( txt.length > 0 ){
+				toggleClass( true );
+			}
+			else{
+				toggleClass( false );	
+			}
+		}, 1);
+	}
+
+	function toggleClass( bo ){
+		if( bo ){
+			//$(".autocomplete").css("visibility", "visible");
+			$("#autocomplete").show();
+			
+			$("#btnDropdown").removeClass("dropdown");
+			$("#btnDropdown").addClass("dropdownoff");
+		}
+		else{
+			//$(".autocomplete").css("visibility", "hidden");
+			$("#autocomplete").hide();
+			
+			$("#btnDropdown").removeClass("dropdownoff");
+			$("#btnDropdown").addClass("dropdown");
+		}
+	}
+}
+
+
+
+function topSearchInit()
+{
+	var focusTarget = "input";
+
+	//$("#searchTop").bind("keydown", checkSearchText);
+	
+	$("#searchTop").focusout(function() {
+		if( focusTarget == "dropdown" )
+		{
+			return false;
+		}
+		else
+		{	
+			//toggleClass( false );
+		}
+	});
+	
+	$( "#searchTop" ).focusin( function()	{
+		focusTarget = "input";
+	});
+
+	$("#btnDropdown").mousedown( function(){
+		focusTarget = "dropdown";
+	});
+
+	$(".autocomplete ul li").focusin( function() {
+		//
+	});
+	
+	$(".autocomplete ul li:last-child").focusout( function() {
+		toggleClass( false );
+	})
+	
+	$("#btnDropdown").click( function(){
+		//alert("btn click");
+		if( $("#searchInput").val().length == 0 ){ 
+			return false;
+		}
+		else{
+			if( $("#btnDropdown").hasClass("dropdown") ){
+				toggleClass( true );
+			}
+			else{
+				toggleClass( false );
+			}
+		}
+
+		return false;
+	});
+
+	function checkSearchText(){
+		setTimeout(function(){
+			var txt = $("#searchTop").val();
+
+			if( txt.length > 0 ){
+				toggleClass( true );
+			}
+			else{
+				toggleClass( false );	
+			}
+		}, 1);
+	}
+
+	function toggleClass( bo ){
+		if( bo ){
+			$(".topAutocomplete").css("visibility", "visible");
+		}else{
+			$(".topAutocomplete").css("visibility", "hidden");
+			$("#topAutocomplete").hide();
+		}
+	}
+}
diff --git a/org.tizen.ui.practices/html/scripts/showhide.js b/org.tizen.ui.practices/html/scripts/showhide.js
new file mode 100644
index 0000000..2e85407
--- /dev/null
+++ b/org.tizen.ui.practices/html/scripts/showhide.js
@@ -0,0 +1,204 @@
+/*all Show Hide devicespecs List*/
+if($('div#contents').find('.devicespecs-util').length){
+var self = $('div#contents').find('.devicespecs-util');
+
+$('.showA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+var me = $(this);
+var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+if ( !me.next().is(':visible') ){
+	me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+	me.find('em').text('Hide');
+	me.next().show();
+}
+});
+return false;
+})
+$('.hideA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+
+	var me = $(this);
+	var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+	if ( me.next().is(':visible') ){
+		me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+		me.find('em').text('Show');
+		me.next().hide();
+	}
+					
+});
+return false;
+})
+}	
+
+/*toggle devicespecs List*/
+if($('div#contents').find('.devicespec-tit').length){
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+$('a', self).bind ("click", function(){
+	var idx = $('.devicespec-tit a').index(this);
+
+	if ( $(this).parent().parent().next().is(':visible') ){
+		$(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+		self.find('em').text('Show');
+		self.next().hide();
+
+		return false;
+	}else{
+		$(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+		self.find('em').text('Hide');
+
+		self.next().show();
+
+		return false;
+	}
+
+});
+
+});
+}
+
+$('ul.devicespecifications li div.devicespec-con').hide();
+
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+var arrow =  $('a', self);
+
+if(self.next().is(':visible')){
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
+self.find('em').text('Hide');
+}else{
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
+self.find('em').text('Show');
+}
+
+});
+
+$(document).ready(function(){
+	var openheading = function(target) {
+		var origin = $(target);
+		target = origin.closest('.devicespec-con');
+		if (!(target.length > 0)) {
+			target = origin.closest('.devicespec-tit');
+		}
+		if (target.length > 0) {
+			if (!$('.devicespec-con', target.parent()).is(":visible")) {
+				$("div.devicespec-tit a.bt-arr", target.parent()).click();
+			}
+		}
+
+		$(window.location.hash)[0].scrollIntoView();
+	};
+
+	$(".opensection").click(function(){
+		var target = $($(this).attr("href"));//.closest('.devicespec-con');
+		openheading(target);
+	});
+
+	if (window.location.hash) {
+		var target = $(window.location.hash);
+		openheading(target);
+		//$(target).focus(); //uncomment if fail to work
+	}
+
+	var isScrolledIntoView = function(elem)
+	{
+		var docViewTop = $('#contents').scrollTop();
+		var docViewBottom = docViewTop + $('#contents').height();
+
+		var elemTop = $(elem).offset().top;
+		var elemBottom = elemTop + $(elem).height();
+
+		return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
+		  && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
+	}
+
+	$('#contents').scroll();
+
+	var checkBreadCrumbs = function() {
+		if (!isScrolledIntoView($('#contents .content h1')))
+		{
+			$('a.top.sms').show();
+			$('.help_breadcrumbs').hide();
+		} else {
+			$('a.top.sms').hide();
+			$('.help_breadcrumbs').show();
+		}
+		$('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+	}	
+
+	var updateH = function(){
+		checkBreadCrumbs();
+		$('a.top').css('bottom', $('#footer').outerHeight());
+		$('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
+
+		$('#toc').css('top', $('#toc_border').position()['top'] + 7);
+
+		if ($('a.top').is(':visible'))
+		{
+			$('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
+		} else {
+			$('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
+		}
+		$('#toc').css('height', $('#toc').css('height') - 5);
+
+		$('#toc_border').height($('#toc').outerHeight() + 5);
+		$('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+		//$('#toc').css('top', $('#toc_border').position()['top'] + 2);
+		$('#toc').css('top', $('#toc_border').position()['top'] + 7);
+		$('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
+		//$('#toc').css('width', $('#toc_border').width() - 40);
+		$('#toc').css('width', $('#toc_border').width() - 49);
+	};
+
+	var updateH_no_toc = function() {
+		checkBreadCrumbs();
+		if (!isScrolledIntoView($('#contents .content h1')))
+		{
+			$('a.top.sms').show();
+		} else {
+			$('a.top.sms').hide();
+		}
+		$('a.top').css('bottom', $('#footer').outerHeight());
+		
+		$('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+	}
+
+	if ($('body').hasClass('no-toc')) {
+		updateH = updateH_no_toc;
+	}
+	$(window).resize(updateH);
+	$('#contents').scroll(updateH);
+	$(window).resize();
+	
+	$('a.top').click(function(){$('#contents').scrollTop(0)});
+
+	var hashchanged = function() {
+		if (window.location.hash.length) {
+			openheading(window.location.hash);
+			//$(window.location.hash).scrollTo();
+			$(window.location.hash)[0].scrollIntoView();
+
+		} else 
+		{
+			$('#contents').scrollTop(0);
+		}
+	};
+
+	if (("onhashchange" in window) && !($.browser.msie)) { 
+		$(window).bind( 'hashchange',hashchanged);
+	}
+	else { 
+		var prevHash = window.location.hash;
+		window.setInterval(function () {
+			if (window.location.hash != prevHash) {
+				hashchanged();
+				prevHash = window.location.hash;
+			}
+		}, 100);
+	}
+});
diff --git a/org.tizen.ui.guides/html/scripts/snippet.js b/org.tizen.ui.practices/html/scripts/snippet.js
old mode 100755
new mode 100644
similarity index 100%
rename from org.tizen.ui.guides/html/scripts/snippet.js
rename to org.tizen.ui.practices/html/scripts/snippet.js
diff --git a/org.tizen.ui.practices/html/web/guides_w.htm b/org.tizen.ui.practices/html/web/guides_w.htm
new file mode 100644
index 0000000..91f6e02
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/guides_w.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+	<script type="text/javascript" src="../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+	<title>Tizen Web UI Practices</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html">W3C/HTML5 and Supplementaries API Reference for Mobile Web</a></li>
+			<li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">W3C/HTML5 and Supplementaries API Reference for Wearable Web</a></li>
+			<li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a></li>			
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+<font size="11">Web UI Practices</font></h1>
+
+<p>Tizen Web UI practices include various aspects of creating a visual outlook for the user application to ensure the best possible user experience.</p>
+
+<p>The Tizen platform provides the following Web UI toolkit frameworks for developing a Web application:</p>
+<ul>
+	<li><a href="tau/guides_tau_w.htm">TAU (Tizen Advanced UI)</a>
+	<p>TAU is a Web UI library that enables you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider. You can manipulate and interact with the application screens through the UI components.</p></li>
+	<li><a href="w3c/guides_w3c_w.htm">W3C/HTML5</a>
+	<p>The W3C specifications provide HTML and CSS features for creating a user interface. With HTML, you can define the structure of the application screens, while CSS allows you to define the look and feel of the screens.</p></li>
+</ul>
+
+
+    
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.practices/html/web/tau/accessibility_w.htm b/org.tizen.ui.practices/html/web/tau/accessibility_w.htm
new file mode 100644
index 0000000..cb0989e
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/accessibility_w.htm
@@ -0,0 +1,110 @@
+<!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>Accessibility: Supporting Web Accessibility</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.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 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>
+<p>You must define the role, states, and property of the HTML elements in order to enable the Tizen screen reader.</p>
+
+<p>The Tizen screen reader reads HTML elements in the following order:</p>
+<ol>
+	<li>Content
+		<p>The actual element content is read first.</p></li>
+	<li>Other attributes than <span style="font-family: Courier New,Courier,monospace">role</span> and <span style="font-family: Courier New,Courier,monospace">aria-label</span></li>
+	<li><span style="font-family: Courier New,Courier,monospace">role</span> attribute
+	</li>
+	<li><span style="font-family: Courier New,Courier,monospace">aria-label</span> attribute
+	</li>
+</ol>
+
+<p>The following examples show how WAI-ARIA code is read using the text-to-speech functionality of the screen reader:</p>
+<ul>
+	<li>Result: checkbox checked, double tap to uncheck
+		<pre class="prettyprint">&lt;div role=&quot;checkbox&quot; aria-checked=&quot;true&quot; aria-label=&quot;double tap to uncheck&quot;&gt;&lt;/div&gt;</pre></li>
+	<li>Result: test button, double tap to click
+		<pre class="prettyprint">&lt;div role=&quot;button&quot; aria-label=&quot;double tap to click&quot;&gt;test&lt;/div&gt;</pre></li>
+</ul>
+
+<p>When creating applications that use the Tizen screen reader, keep in mind the following exceptions:</p>
+<ul>
+	<li>If the <span style="font-family: Courier New,Courier,monospace">aria-hidden</span> attribute of an element is set to <span style="font-family: Courier New,Courier,monospace">true</span>, the screen reader does not read the content of the element or its child elements.
+		<p>In the following snippet, the screen reader reads &quot;on&quot;, but not &quot;off&quot; or &quot;child&quot;.</p>
+<pre class="prettyprint">&lt;div tabindex=&quot;0&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;on&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div aria-hidden=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;off
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;child&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre></li>
+	<li>If the <span style="font-family: Courier New,Courier,monospace">role</span> attribute is not defined, it is not read.
+		<p>In the following snippet, the screen reader reads &quot;test&quot;, but not &quot;link&quot;.</p>
+		<pre class="prettyprint">&lt;a role=&quot;&quot; href=&quot;test.html&quot;&gt;test&lt;/a&gt;</pre></li>
+	<li>The screen reader does not read elements that are hidden, for example, if the <span style="font-family: Courier New,Courier,monospace">display</span> property is set to <span style="font-family: Courier New,Courier,monospace">none</span>.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element supports the image alt text through the <span style="font-family: Courier New,Courier,monospace">alt</span> attribute:</p>
+<pre class="prettyprint">&lt;img src=&quot;icon.jpg&quot; alt=&quot;icon&quot;&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">alt</span> attribute need not be defined for the virtual grid component.
+			<p>The accessibility feature is supported since Tizen 2.1.</p></td>
+	</tr>
+	</tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/animation_w.htm b/org.tizen.ui.practices/html/web/tau/animation_w.htm
new file mode 100644
index 0000000..25f88a2
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/animation_w.htm
@@ -0,0 +1,278 @@
+<!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>Animation: Supporting Animation for HTML Elements </title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+			<li><a href="#fundamentals">Animation Fundamentals</a></li>
+			<li><a href="#functions">Animation Functions</a></li>
+            
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Animation/animation.htm">Animation API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Animation: Supporting Animation for HTML Elements </h1>
+<p>TAU Animation is a module for animating target objects. It allows you to make and use animation without using any other animation library. TAU Animation provides good usability, high performance, and various functionalities.</p>
+
+<p>TAU Animation provides the following features:</p>
+<ul>
+	<li>Single or group animation
+	<p>Provides usability from minimized parameters and APIs. You can easily make an animation or <span style="font-family: Courier New,Courier,monospace">TimeLine</span>.</p></li>
+	<li>Group effects
+	<p>Provided by a stagger. Insert a stagger into the option, and all objects in the group are applied a sequential delay.</p></li>
+	<li>Time control
+	<p>You can use ease, duration, and delay.</p></li>
+	<li>Effect
+	<p>Provides predefined effects. This means that you can use a fancy effect just by sting instead of specifying an animation value. Predefined effects are fully controlled in TAU Animation. You can also stop the animation.</p></li>
+	<li>CSS animation
+	<p>Target objects can be animated using CSS styles, such as <span style="font-family: Courier New,Courier,monospace">backgroundColor</span>, <span style="font-family: Courier New,Courier,monospace">border</span>, <span style="font-family: Courier New,Courier,monospace">margin</span>, <span style="font-family: Courier New,Courier,monospace">padding</span>, and <span style="font-family: Courier New,Courier,monospace">shadow</span>. A CSS animation can also be controlled by TAU Animation.</p></li>
+	<li>HTML element-based animation (in future)
+	<p>You can set an animation in an element instead of JavaScript. If you are skilled in HTML, you can make the animation in HTML.</p></li>
+	<li>Custom <span style="font-family: Courier New,Courier,monospace">KeyFrame</span> (in future)
+	<p>You can make an animation based on a custom <span style="font-family: Courier New,Courier,monospace">KeyFrame</span>.</p></li>
+	<li>Callback functions
+	<p>Provides the <span style="font-family: Courier New,Courier,monospace">onStart</span>, <span style="font-family: Courier New,Courier,monospace">onUpdate</span>, and <span style="font-family: Courier New,Courier,monospace">onComplete</span> callback functions. CSS animations do not support the <span style="font-family: Courier New,Courier,monospace">updateCallback</span> and <span style="font-family: Courier New,Courier,monospace">progress</span> callbacks. TAU Animation provides these features.</p></li>
+</ul>
+
+<p>To use TAU Animation, you must load the <span style="font-family: Courier New,Courier,monospace">tau.animation.min.js</span> file, which can work with any other library or Web framework. There are no other prerequisites.</p>
+
+<h2 id="fundamentals">Animation Fundamentals</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">tau.animation.js</span> file has its own modules for animating target objects when animation functions are invoked.</p>
+<p>The general idea of animating target objects is for several parts to interact with each other.</p>
+<p class="figure">Figure: Animation parts</p>
+<p align="center"><img src="../../images/tau_animation_1.png" alt="Animation parts" /></p>
+<ul>
+	<li>Ticker: Switches the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> function on and off. Ticker is operated based on events.</li>
+	<li>TweenAnimator: Runs the whole time logic. The TweenAnimator invokes the animation to play or stop, and it also updates the tween value per frame.</li>
+	<li>SimpleAnimation: Consists of the animation play logic. The animation makes the tween object and target object, and it also interacts with the TweenAnimator.</li>
+	<li>SimpleAnimationGroup: Group of <span style="font-family: Courier New,Courier,monospace">simpleAnimation</span> objects. It can include several objects for animation.</li>
+	<li>SimpleAnimation Extension: Provides the mixin functionality. Pure DOM can be a target object with the <span style="font-family: Courier New,Courier,monospace">simpleAnimation</span> extension.</li>
+	<li>DomObject: Target object that also has a render logic. If the tick is switched on, the TweenAnimator invokes the update function. And then, the render logic of DomObject is invoked, and the target objects are moved based on the animation option.</li>
+	<li>AnimationObject: Interface for various target objects. In this example, the <span style="font-family: Courier New,Courier,monospace">DomObject</span> is used as a reference.</li>
+</ul>
+<p>To make and call several animations:</p>
+
+<ol>
+<li>Make a target object for the animation.
+<p>After making the target object, you can make and call animations.</p>
+
+<p class="figure">Figure: Target object</p>
+<p align="center"><img src="../../images/tau_animation_2.png" alt="Target object" /></p>
+<pre class="prettyprint">
+&lt;div id=&quot;blueBox&quot; style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;
+&lt;/div&gt;
+</pre>
+<pre class="prettyprint">
+var t = tau.animation.target,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blueBox = document.getElementById(&#39;blueBox&#39;);
+t(&#39;#blueBox&#39;);
+/* Pure HTML element can be a target */
+t(blueBox);
+</pre>
+</li>
+<li>Create an animation with transform, CSS properties, effects, and ease.
+<p>Once the target object is made, you can create an animation. The animation consists of an animation value including transform, CSS properties, and effect. Basically, an animation option is inserted with the duration of 1 s (1000 ms) only as a default. If you want to add an ease function, delay, loop, or callback, create an object for an animation option.</p>
+<pre class="prettyprint">
+&lt;div id=&quot;blueBox&quot; style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;
+&lt;/div&gt;
+</pre>
+<pre class="prettyprint">
+var t = tau.animation.target;
+t(&#39;#blueBox&#39;).tween({translateX: 1000}, {duration: 1000, delay: 500})
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tween({scaleX: 1.2, scaleY: 1.2}, {duration: 1000})
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tween({rotateZ: 30}, {duration: 1000})
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tween({skewX: 30}, {duration: 1000});
+</pre>
+</li>
+<li>Put the animations into an animation queue.
+<p>After making an animation, the animation is inserted into the animation queue automatically.</p>
+
+<p class="figure">Figure: Animation queue</p>
+<p align="center"><img src="../../images/tau_animation_3.png" alt="Animation queue" /></p>
+
+</li>
+<li>After inserting the animation, send an event to the Ticker.
+<p>In the above queue, there are 4 animations in queue. When all animations are inserted, the animations are popped and animated sequentially by the TweenAnimator.</p>
+</li>
+<li>The Ticker calls the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> function.
+<p>The TweenAnimator invokes the play and tick functions in the Ticker. The Ticker calls the <span style="font-family: Courier New,Courier,monospace">on</span> function, and the <span style="font-family: Courier New,Courier,monospace">on</span> function includes <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span>. The <span style="font-family: Courier New,Courier,monospace">RAF()</span> function is invoked until the TweenAnimator&#39;s tick time reaches the end of the duration.</p>
+</li>
+<li>During the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> function call, the <span style="font-family: Courier New,Courier,monospace">AnimationObject</span> renders the target object and the TweenAnimator&#39;s time logic is operating.
+<p>The <span style="font-family: Courier New,Courier,monospace">AnimationObject</span> can get the time value using the calculating animation. The <span style="font-family: Courier New,Courier,monospace">AnimationObject</span> renders the target object based on the time value. If the duration is 1000 (ms), the TweenAnimator gives time 0 through 1000.</p>
+<p class="figure">Figure: TweenAnimator</p>
+<p align="center"><img src="../../images/tau_animation_4.png" alt="TweenAnimator" /></p>
+</li>
+</ol>
+
+<h2 id="functions">Animation Functions</h2>
+
+<p>To provide better functionality, various animation features have been implemented. You can easily increase and improve an animation effect. If you want to connect several animations, use chaining animations. Predefined effects and animations with CSS properties and stagger are also provided.</p>
+
+<h3 id="tween">Tween</h3>
+
+<p>You can make an animation using the <span style="font-family: Courier New,Courier,monospace">tween()</span> function. If a tween animation is made, the animation is run right away. The <span style="font-family: Courier New,Courier,monospace">tween()</span> function consists of 2 parameters, <span style="font-family: Courier New,Courier,monospace">{animation}</span> and <span style="font-family: Courier New,Courier,monospace">{option}</span>:</p>
+<pre class="prettyprint">
+tween({animation}, {option});
+</pre>
+<p><span style="font-family: Courier New,Courier,monospace">{animation}</span> can be various animations, such as transform, CSS property, or predefined effect. Basically, <span style="font-family: Courier New,Courier,monospace">{animation}</span> indicates the destination of the animation. For example, <span style="font-family: Courier New,Courier,monospace">{rotateZ: 90}</span> indicates a rotation from the current value to 90 degrees. To do this, you must set the starting point of the animation, and for this, an additional animation form is provided. <span style="font-family: Courier New,Courier,monospace">{rotateZ: [30, 90]}</span> indicates the changing rotation value of the transform from 30 to 90.</p>
+<pre class="prettyprint">
+&lt;div id=&quot;redBox&quot; style=&quot;background-color: &#39;red&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+&lt;div id=&quot;blueBox&quot; style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px; left: 200px;&quot;&gt;&lt;/div&gt;
+</pre>
+<pre class="prettyprint">var t = tau.animation.target;
+t(&#39;#redBox&#39;).tween({translateX: 1000}, 1000); /* Translate from current position to 1000 */
+t(&#39;#blueBox&#39;).tween({left: 200, top:[100, 300]}, 1000); /* Add left property from current to 200, add top property from 100 to 300 */
+</pre>
+
+<h3 id="chaining">Chaining</h3>
+<p>The animation is inserted to the animation queue automatically before playing. At first, this feature does not seem important for making an animation, but if this function is supported, the LOC (Line Of Code) is decreased significantly.</p>
+<pre class="prettyprint">
+&lt;div id=&quot;blueBox&quot; style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+</pre>
+<pre class="prettyprint">var t = tau.animation.target;
+t(&#39;#blueBox&#39;).tween({translateX: [500, 1000]}, 1000).tween({translateY: 500}, 1000)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tween({rotateZ: 120}, 1000).tween({skewX: [0, 30]}, 1000)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tween({opacity: [1, 0]}, 1000).tween({opacity: 0.5}, 1000);
+</pre>
+
+<p class="figure">Figure: Animation queue and chaining</p>
+<p align="center"><img src="../../images/tau_animation_5.png" alt="Animation queue and chaining" /></p>
+
+<p>The chaining feature makes an intuitive sequence group animation.</p>
+
+<h3 id="effects">Predefined Effects</h3>
+<p>The following predefined effects are available:</p>
+<p><span style="font-family: Courier New,Courier,monospace">bounce</span>, <span style="font-family: Courier New,Courier,monospace">flash</span>, <span style="font-family: Courier New,Courier,monospace">pulse</span>, <span style="font-family: Courier New,Courier,monospace">rubberBand</span>, <span style="font-family: Courier New,Courier,monospace">shake</span>, <span style="font-family: Courier New,Courier,monospace">swing</span>, <span style="font-family: Courier New,Courier,monospace">tada</span>, <span style="font-family: Courier New,Courier,monospace">wobble</span>, <span style="font-family: Courier New,Courier,monospace">jello</span>, <span style="font-family: Courier New,Courier,monospace">bounceIn</span>, <span style="font-family: Courier New,Courier,monospace">bounceInDown</span>, <span style="font-family: Courier New,Courier,monospace">bounceInLeft</span>, <span style="font-family: Courier New,Courier,monospace">bounceInRight</span>, <span style="font-family: Courier New,Courier,monospace">bounceInUp</span>, <span style="font-family: Courier New,Courier,monospace">bounceOut</span>, <span style="font-family: Courier New,Courier,monospace">bounceOutDown</span>, <span style="font-family: Courier New,Courier,monospace">bounceOutLeft</span>, <span style="font-family: Courier New,Courier,monospace">bounceOutRight</span>, <span style="font-family: Courier New,Courier,monospace">bounceOutUp</span>, <span style="font-family: Courier New,Courier,monospace">fadeIn</span>, <span style="font-family: Courier New,Courier,monospace">fadeInDown</span>, <span style="font-family: Courier New,Courier,monospace">fadeInLeft</span>, <span style="font-family: Courier New,Courier,monospace">fadeInRight</span>, <span style="font-family: Courier New,Courier,monospace">fadeInUp</span>,
+<span style="font-family: Courier New,Courier,monospace">fadeOut</span>, <span style="font-family: Courier New,Courier,monospace">fadeOutDown</span>, <span style="font-family: Courier New,Courier,monospace">fadeOutLeft</span>, <span style="font-family: Courier New,Courier,monospace">fadeOutRight</span>, <span style="font-family: Courier New,Courier,monospace">fadeOutUp</span>, <span style="font-family: Courier New,Courier,monospace">flip</span>, <span style="font-family: Courier New,Courier,monospace">flipInX</span>, <span style="font-family: Courier New,Courier,monospace">flipInY</span>, <span style="font-family: Courier New,Courier,monospace">flipOutX</span>, <span style="font-family: Courier New,Courier,monospace">flipOutY</span>,
+<span style="font-family: Courier New,Courier,monospace">lightSpeedIn</span>, <span style="font-family: Courier New,Courier,monospace">lightSpeedOut</span>, <span style="font-family: Courier New,Courier,monospace">rotateIn</span>, <span style="font-family: Courier New,Courier,monospace">rotateInDownLeft</span>, <span style="font-family: Courier New,Courier,monospace">rotateInDownRight</span>, <span style="font-family: Courier New,Courier,monospace">rotateInUpLeft</span>, <span style="font-family: Courier New,Courier,monospace">rotateInUpRight</span>,
+<span style="font-family: Courier New,Courier,monospace">rotateOut</span>, <span style="font-family: Courier New,Courier,monospace">rotateOutDownLeft</span>, <span style="font-family: Courier New,Courier,monospace">rotateOutDownRight</span>, <span style="font-family: Courier New,Courier,monospace">rotateOutUpLeft</span>, <span style="font-family: Courier New,Courier,monospace">rotateOutUpRight</span>, <span style="font-family: Courier New,Courier,monospace">slideInUp</span>, <span style="font-family: Courier New,Courier,monospace">slideInDown</span>, <span style="font-family: Courier New,Courier,monospace">slideInLeft</span>, <span style="font-family: Courier New,Courier,monospace">slideInRight</span>,
+<span style="font-family: Courier New,Courier,monospace">slideOutUp</span>, <span style="font-family: Courier New,Courier,monospace">slideOutDown</span>, <span style="font-family: Courier New,Courier,monospace">slideOutLeft</span>, <span style="font-family: Courier New,Courier,monospace">slideOutRight</span>, <span style="font-family: Courier New,Courier,monospace">zoomIn</span>, <span style="font-family: Courier New,Courier,monospace">zoomInDown</span>, <span style="font-family: Courier New,Courier,monospace">zoomInLeft</span>, <span style="font-family: Courier New,Courier,monospace">zoomInRight</span>, <span style="font-family: Courier New,Courier,monospace">zoomInUp</span>, <span style="font-family: Courier New,Courier,monospace">zoomOut</span>, <span style="font-family: Courier New,Courier,monospace">zoomOutDown</span>, <span style="font-family: Courier New,Courier,monospace">zoomOutLeft</span>, <span style="font-family: Courier New,Courier,monospace">zoomOutRight</span>, <span style="font-family: Courier New,Courier,monospace">zoomOutUp</span>, <span style="font-family: Courier New,Courier,monospace">hinge</span>, <span style="font-family: Courier New,Courier,monospace">rollIn</span>, <span style="font-family: Courier New,Courier,monospace">rollOut</span></p>
+
+
+<p>To make an identical effect, you can make many single animations. The following example shows the <span style="font-family: Courier New,Courier,monospace">shake</span> effect:</p>
+<pre class="prettyprint">
+&lt;div id=&quot;blueBox&quot; style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+</pre>
+<pre class="prettyprint">
+var t = tau.animation.target;
+t(&#39;#blueBox&#39;).tween({translateX: -10}, 100);
+t(&#39;#blueBox&#39;).tween({translateX: 10}, 100);
+t(&#39;#blueBox&#39;).tween({translateX: -10}, 100);
+t(&#39;#blueBox&#39;).tween({translateX: 10}, 100);
+t(&#39;#blueBox&#39;).tween({translateX: -10}, 100);
+t(&#39;#blueBox&#39;).tween({translateX: 10}, 100);
+t(&#39;#blueBox&#39;).tween({translateX: -10}, 100);
+t(&#39;#blueBox&#39;).tween({translateX: 10}, 100);
+t(&#39;#blueBox&#39;).tween({translateX: -10}, 100);
+t(&#39;#blueBox&#39;).tween({translateX: 0}, 100);
+</pre>
+<p>Or instead, you can use a predefined animation:</p>
+<pre class="prettyprint">
+&lt;div id=&quot;blueBox&quot; style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+</pre>
+<pre class="prettyprint">
+var t = tau.animation.target;
+t(&#39;#blueBox&#39;).tween(&#39;shake&#39;, 1000);
+</pre>
+
+<h3 id="group">Group</h3>
+<p>Sometimes, you need to animate all objects with the same animation. To make an animation group for this purpose, the <span style="font-family: Courier New,Courier,monospace">target</span> method is provided. If all classes of DOM are <span style="font-family: Courier New,Courier,monospace">box</span>, you can create a box group. Like a CSS selector, &#39;.&#39; means a class selector and &#39;#&#39; means an ID selector. Also, a pure HTML element can be a parameter of the target function.</p>
+<pre class="prettyprint">
+&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+</pre>
+<pre class="prettyprint">
+var t = tau.animation.target;
+t(&#39;.box&#39;).tween({rotateZ: 120}, 1000);
+/* All DOM are rotated */
+</pre>
+
+<h3 id="stagger">Stagger</h3>
+<p>In case of handling an animation group, you can apply a different delay value to a group. The following example shows a delay with the <span style="font-family: Courier New,Courier,monospace">zoomIn</span> effect:</p>
+<pre class="prettyprint">
+&lt;div class=&#39;box&#39;&gt;&lt;/div&gt;
+&lt;div class=&#39;box&#39;&gt;&lt;/div&gt;
+&lt;div class=&#39;box&#39;&gt;&lt;/div&gt;
+&lt;div class=&#39;box&#39;&gt;&lt;/div&gt;
+&lt;div class=&#39;box&#39;&gt;&lt;/div&gt;
+</pre>
+<pre class="prettyprint">
+var t = tau.animation.target;
+t(&#39;.box&#39;).tween(&#39;zoomIn&#39;, {duration: 1000, stagger: 200});
+/* Each box is animated with 200 ms time difference */
+</pre>
+
+<h3 id="callback">Callback</h3>
+<p>You can add some actions before and after an animation. If you add the <span style="font-family: Courier New,Courier,monospace">onStart</span> callback, it is invoked before the animation. The <span style="font-family: Courier New,Courier,monospace">onComplete</span> callback is invoked after the animation.</p>
+<pre class="prettyprint">
+&lt;div id=&#39;blueBox&#39;&gt;&lt;/div&gt;
+</pre>
+<pre class="prettyprint"
+>var t = tau.animation.target;
+t(&#39;#blueBox&#39;).tween({translateY: [0, 150], rotateZ: [0, 180]}, 
+{
+&nbsp;&nbsp;&nbsp;duration: 1000,
+&nbsp;&nbsp;&nbsp;onStart: function ()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#blueBox&#39;).innerText = &#39;start&#39;;
+&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;onComplete: function () 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#blueBox&#39;).tween({backgroundColor: &#39;navy&#39;}, {duration: 1000});
+&nbsp;&nbsp;&nbsp;}
+});
+</pre>
+<p>In the above animation, the box is translated by Y axis from 0 to 150 and rotated from 0 to 180. Before translating and rotating, the <span style="font-family: Courier New,Courier,monospace">start</span> text is inserted into the box. After translating and rotating, the box&#39;s background color is changed to navy.</p>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/circle_progressbar_ww.htm b/org.tizen.ui.practices/html/web/tau/circle_progressbar_ww.htm
new file mode 100644
index 0000000..5cdf2a9
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/circle_progressbar_ww.htm
@@ -0,0 +1,257 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+	<title>Creating Circle-shaped Progress Bars</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_circleprogressbar.htm">CircleProgressBar API for Wearable Web</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Circle-shaped Progress Bars</h1>
+
+<p>You can create a circle-shaped progress bar component with the CircleProgressBar API.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The following figure shows the layout of the progress bar component in a rectangular and circular UI.</p>
+
+<p class="figure">Figure: Circle-shaped progress bar component in rectangular and circular devices</p>
+			<p align="center"><img alt="Circle-shaped progress bar component in a rectangular device" src="../../images/rectangular_progress.png" />  <img alt="Circle-shaped progress bar component in a circular device" src="../../images/round_progress.png" /></p>
+
+<p>To implement the progress bar component:</p>
+
+<ol>
+<li>Edit the HTML code to add the component to your application screen:
+
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageCircleProgressBar&quot; data-enable-page-scroll=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Circle Progress&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;result&quot; id=&quot;result&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer ui-grid-col-2&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot; id=&quot;minus&quot;&gt;-10%&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot; id=&quot;plus&quot;&gt;+10%&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
+&nbsp;&nbsp;&nbsp;&lt;progress class=&quot;ui-circle-progress&quot; id=&quot;circleprogress&quot; max=&quot;100&quot; value=&quot;20&quot;&gt;&lt;/progress&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set the visual style of the progress bar:
+
+<pre class="prettyprint">
+.ui-progressbar-large 
+{
+&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;top: 50%;
+&nbsp;&nbsp;&nbsp;left: 50%;
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-50%, -50%, 0);
+}
+.result 
+{
+&nbsp;&nbsp;&nbsp;font-size:35px;
+&nbsp;&nbsp;&nbsp;text-align:center;
+&nbsp;&nbsp;&nbsp;top: 33%;
+&nbsp;&nbsp;&nbsp;left: 50%;
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-50%, -50%, 0);
+&nbsp;&nbsp;&nbsp;position: absolute;
+}
+
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;.result 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.ui-footer 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Edit the JavaScript code to manage the progress bar events and other functionality:
+
+<pre class="prettyprint">
+(function()
+{
+&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;pageCircleProgressBar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = document.getElementById(&quot;circleprogress&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn = document.getElementById(&quot;minus&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn = document.getElementById(&quot;plus&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv = document.getElementById(&quot;result&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isCircle = tau.support.shape.circle,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultText,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i;
+
+&nbsp;&nbsp;&nbsp;function printResult() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultText = progressBarWidget.value();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv.innerHTML = resultText + &quot;%&quot;;
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function clearVariables() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv = null;
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function unbindEvents() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;pageshow&quot;, pageBeforeShowHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;pagehide&quot;, pageHideHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (isCircle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.removeEventListener(&quot;rotarydetent&quot;, rotaryDetentHandler);
+&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;minusBtn.removeEventListener(&quot;click&quot;, minusBtnClickHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn.removeEventListener(&quot;click&quot;, plusBtnClickHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function minusBtnClickHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = i - 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (i &lt; 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function plusBtnClickHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = i + 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (i &gt; 100) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function rotaryDetentHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the rotary direction */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var direction = event.detail.direction,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = parseInt(progressBarWidget.value());
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (direction === &quot;CW&quot;) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Right direction */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (value &lt; 100) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value++;
+&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;value = 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (direction === &quot;CCW&quot;) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Left direction */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (value &gt; 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value--;
+&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;value = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(value);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;function pageBeforeShowHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (isCircle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make the circular progressbar object */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: &quot;full&quot;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;, rotaryDetentHandler);
+&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;progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: &quot;large&quot;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn.addEventListener(&quot;click&quot;, minusBtnClickHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn.addEventListener(&quot;click&quot;, plusBtnClickHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = parseInt(progressBarWidget.value());
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv.innerHTML = i + &quot;%&quot;;
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function pageHideHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unbindEvents();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearVariables();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Release the object */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.destroy();
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, pageBeforeShowHandler);
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagehide&quot;, pageHideHandler);
+}());
+</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.ui.practices/html/web/tau/circular_ui_ww.htm b/org.tizen.ui.practices/html/web/tau/circular_ui_ww.htm
new file mode 100644
index 0000000..3a26cb5
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/circular_ui_ww.htm
@@ -0,0 +1,218 @@
+<!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>Applications for Circular UI: Developing UI on Circular Wearable Applications</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#apply">Applying the Circular UI</a></li>
+            <li><a href="#incss">Overriding the Circular CSS Style with a Media Query</a></li>
+            <li><a href="#injs">Writing JavaScript Selectively for the Circular UI</a></li>
+            <li><a href="#components">Supported UI Components</a></li>
+        </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>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Applications for Circular UI: Developing UI on Circular Wearable Applications</h1>
+
+<p>TAU supports different types of wearable devices (rectangular and circular) in the same application. To support a circular UI along with a rectangular UI, a media query is required.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+
+<h2 id="apply">Applying the Circular UI</h2>
+
+<p>To support the circular UI:</p>
+
+<ol>
+<li>Include the <span style="font-family: Courier New,Courier,monospace">link</span> element for the latest <span style="font-family: Courier New,Courier,monospace">tau.css</span> file into the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> element in HTML. Note that for the compatibility with the rectangular UI, you must use the latest version of the TAU library.</li>
+
+<li>Include the <span style="font-family: Courier New,Courier,monospace">link</span> element for the latest <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file with the media query feature (<span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape: circle</span>) next to the <span style="font-family: Courier New,Courier,monospace">link</span> element for the <span style="font-family: Courier New,Courier,monospace">tau.css</span>. Note that adding the <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file following the general <span style="font-family: Courier New,Courier,monospace">tau.css</span> file covers the additional circular UI.</li>
+
+<li>Include the <span style="font-family: Courier New,Courier,monospace">link</span> element for the latest <span style="font-family: Courier New,Courier,monospace">tau.js</span> script file at the end of <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> element in HTML.</li>
+
+<li>For writing a separate code for a circular UI in JavaScript, you can use the <span style="font-family: Courier New,Courier,monospace">tau.support.shape.circle</span> property for detecting the circular device.</li>
+</ol>
+
+<pre class="prettyprint">
+&lt;head name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;title&gt;Support for Circular UI&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;tau.css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;!-- CSS media query on a link element --&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (-tizen-geometric-shape: circle)&quot; href=&quot;tau.circle.css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;tau.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&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;/* Implement your code for the circular UI */
+&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;/* Implement your code for the rectangular UI */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/body&gt;
+</pre>
+
+<p>The following figure shows how the media query <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape: circle</span> works in a rectangular and circular UI.</p>
+<p class="figure">Figure: Media query in a rectangular device and circular device</p>
+<p align="center">
+	<img alt="Media query in a rectangular device and circular device" src="../../images/circular_support.png" />
+</p>
+
+<h2 id="incss">Overriding the Circular CSS Style with a Media Query</h2>
+
+<p>For some styles to be applied selectively, you can use the <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> media query feature with a <span style="font-family: Courier New,Courier,monospace">rectangle</span> or <span style="font-family: Courier New,Courier,monospace">circle</span> value to distinguish the type difference. Note that the <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> feature is only available in Tizen devices.</p>
+
+<table>
+	<caption>Table: <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> feature description</caption>
+	<tbody>
+	<tr>
+		<th colspan="2">-tizen-geometric-shape</th>
+	</tr>
+	<tr>
+		<td>Value</td>
+		<td><span style="font-family: Courier New,Courier,monospace">rectangle</span> | <span style="font-family: Courier New,Courier,monospace">circle</span></td>
+	</tr>
+	<tr>
+		<td>Applied to</td>
+		<td>Visual media types</td>
+	</tr>
+	<tr>
+		<td>Accept min/max prefixes</td>
+		<td>No</td>
+	</tr>
+	</tbody>
+</table>
+
+<pre class="prettyprint">
+.className 
+{
+&nbsp;&nbsp;&nbsp;/* Implement the basic CSS style for all types of devices (rectangular and circular) */
+}
+
+@media screen and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;.className
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Implement the CSS style to be overridden in circular */
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h2 id="injs">Writing JavaScript Selectively for the Circular UI</h2>
+<p>TAU provides the <span style="font-family: Courier New,Courier,monospace">tau.support.shape.circle</span> property that checks whether the device screen is a circle. If you want to implement code selectively for a circular UI and rectangular UI, you can use the property with a boolean value. Note that for developing in a browser environment, this property is always set to <span style="font-family: Courier New,Courier,monospace">true</span> when the <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file is loaded.</p>
+
+<pre class="prettyprint">
+if (tau.support.shape.circle) 
+{
+&nbsp;&nbsp;&nbsp;/* Implement your code for the circular UI */
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;/* Implement your code for the rectangular UI */
+}
+</pre>
+
+<h2 id="components">Supported UI Components</h2>
+<p>The following components can be used in both rectangular and circular devices.</p>
+  <table>
+	<caption>Table: UI components supported by a rectangular and circular UI</caption>
+	<tbody>
+	<tr>
+		<th>Component</th>
+		<th>Description</th>
+	</tr>
+	<tr>
+        <td><a href="helper_ww.htm">Helper Script</a></td>
+        <td>Shows how to support some application components.</td>
+	</tr>
+	<tr>
+        <td><a href="list_ww.htm">Snap List</a></td>
+        <td>Shows how to create a snap list component.</td>
+	</tr>
+
+	<tr>
+        <td><a href="header_ww.htm">Expandable Header</a></td>
+        <td>Shows how to create a header component.</td>
+	</tr>
+	<tr>
+        <td><a href="circle_progressbar_ww.htm">Circle-shaped Progress Bar</a></td>
+        <td>Shows how to create a circle progress bar component.</td>
+	</tr>
+	<tr>
+        <td><a href="processing_ww.htm">Full Size Processing Component</a></td>
+        <td>Shows how to create a processing component.</td>
+	</tr>
+	<tr>
+        <td><a href="footerbutton_ww.htm">Footer Button</a></td>
+        <td>Shows how to create a footer button component.</td>
+	</tr>
+	<tr>
+        <td><a href="thumbnail_ww.htm">Thumbnail</a></td>
+        <td>Shows how to create a thumbnail component.</td>
+	</tr>
+	<tr>
+        <td><a href="popup_ww.htm">Popup Button</a></td>
+        <td>Shows how to create a popup component.</td>
+    </tr>
+	<tr>
+		<td><a href="indexscrollbar_ww.htm">Index Scroll Bar</a></td>
+		<td>Shows how to create an index scroll bar component.</td>
+	</tr>
+	<tr>
+        <td><a href="moreoptions_ww.htm">More Options</a></td>
+        <td>Shows how to create a more options button component.</td>
+	</tr>
+	
+</tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/creating_animation_w.htm b/org.tizen.ui.practices/html/web/tau/creating_animation_w.htm
new file mode 100644
index 0000000..3c90eea
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/creating_animation_w.htm
@@ -0,0 +1,191 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Creating Applications with Animation</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+			<li><a href="#load">Loading a TAU Animation</a></li>
+			<li><a href="#create">Creating TAU Animations</a></li>
+        </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>
+        </ul>
+    </div></div>
+</div>
+
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Creating Applications with Animation</h1>
+<p>You can create a simple application using TAU Animation. With the following example, you can learn how to import TAU Animation into your application and create a basic simple application with animation.</p>
+
+<h2 id="load">Loading a TAU Animation</h2>
+<p>You can import the TAU Animation with HTML:</p>
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;title&gt;TAU Animation Sample&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&lt;script src=&quot;lib/tau/animation/tau.animation.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;/head&gt;
+</pre>
+<p><span style="font-family: Courier New,Courier,monospace">tau.animation</span> is the namespace of the TAU Animation. You can call TAU Animation functions through this namespace.</p>
+
+
+<h2 id="create">Creating TAU Animations</h2>
+
+<p>The following code snippet shows how to create a TAU Animation:</p>
+
+<pre class="prettyprint">
+&lt;div id=&quot;redBox&quot; style=&quot;background-color: &#39;red&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+&lt;div id=&quot;blueBox&quot; style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px; left: 200px;&quot;&gt;&lt;/div&gt;
+</pre>
+<pre class="prettyprint">var t = tau.animation.target;
+t(&#39;#redBox&#39;).tween(&#39;swing&#39;, 1000);
+t(&#39;#blueBox&#39;).tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000);
+</pre>
+
+<p>If you want to animate the HTML element directly, you can use <span style="font-family: Courier New,Courier,monospace">mixin</span>. You can animate any effect, transform, or CSS property. You can use the &#39;target&#39; method. Like a CSS selector, &#39;.&#39; means class selector, &#39;#&#39; means ID selector. Also, a pure HTML element can be a parameter of the target function.</p>
+
+<p>Available animation methods:</p>
+<ul><li>Predefined effects
+<p>When the first parameter of the <span style="font-family: Courier New,Courier,monospace">tween()</span> method indicates a string (such as &#39;swing&#39; above) instead of an object, it is a predefined effect animation. Various <a href="animation_w.htm#effects">predefined effects</a> are available.</p></li>
+
+<li>Chaining
+<p>The <span style="font-family: Courier New,Courier,monospace">blueBox</span> animation above is a type of a connected animation. If animations are connected to the same target object, it is added to the queue. And if the <span style="font-family: Courier New,Courier,monospace">play()</span> function is invoked, all animations in the queue are called in the sequence order.</p></li>
+
+<li>Tween
+<p><span style="font-family: Courier New,Courier,monospace">tween()</span> is a TAU Animation method. It animates a target object based on parameters. The following example shows the use of the <span style="font-family: Courier New,Courier,monospace">tween()</span> method:</p>
+<pre class="prettyprint">
+tween({animation}, {option})
+</pre>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">animation</span> is the part moving, such as a transform, CSS, or predefined effect.</li>
+<li><span style="font-family: Courier New,Courier,monospace">transform</span> options:
+<p><span style="font-family: Courier New,Courier,monospace">translateX</span>, <span style="font-family: Courier New,Courier,monospace">translateY</span>, <span style="font-family: Courier New,Courier,monospace">translateZ</span>, <span style="font-family: Courier New,Courier,monospace">rotateX</span>, <span style="font-family: Courier New,Courier,monospace">rotateY</span>, <span style="font-family: Courier New,Courier,monospace">rotateZ</span>, <span style="font-family: Courier New,Courier,monospace">scaleX</span>, <span style="font-family: Courier New,Courier,monospace">scaleY</span>, <span style="font-family: Courier New,Courier,monospace">skewX</span>, <span style="font-family: Courier New,Courier,monospace">skewY</span></p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">css</span> options: 
+<p><span style="font-family: Courier New,Courier,monospace">left</span>, <span style="font-family: Courier New,Courier,monospace">top</span>, <span style="font-family: Courier New,Courier,monospace">width</span>, <span style="font-family: Courier New,Courier,monospace">height</span>, <span style="font-family: Courier New,Courier,monospace">background-color</span>, <span style="font-family: Courier New,Courier,monospace">color</span>, <span style="font-family: Courier New,Courier,monospace">border</span>, <span style="font-family: Courier New,Courier,monospace">border-width</span>, <span style="font-family: Courier New,Courier,monospace">border-color</span>, <span style="font-family: Courier New,Courier,monospace">margin</span>, <span style="font-family: Courier New,Courier,monospace">marginTop</span>, <span style="font-family: Courier New,Courier,monospace">marginRight</span>, <span style="font-family: Courier New,Courier,monospace">marginBottom</span>, <span style="font-family: Courier New,Courier,monospace">marginLeft</span>, <span style="font-family: Courier New,Courier,monospace">padding</span>, <span style="font-family: Courier New,Courier,monospace">paddingTop</span>, <span style="font-family: Courier New,Courier,monospace">paddingRight</span>, <span style="font-family: Courier New,Courier,monospace">paddingBottom</span>, <span style="font-family: Courier New,Courier,monospace">paddingLeft</span>, <span style="font-family: Courier New,Courier,monospace">font-size</span>, <span style="font-family: Courier New,Courier,monospace">line-height</span>, <span style="font-family: Courier New,Courier,monospace">clip-path</span>, <span style="font-family: Courier New,Courier,monospace">background-position</span>, <span style="font-family: Courier New,Courier,monospace">background-size</span>, <span style="font-family: Courier New,Courier,monospace">box-shadow</span></p>
+</li>
+</ul>
+<pre class="prettyprint">
+&lt;div id=&quot;redBox&quot; style=&quot;background-color: &#39;red&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+</pre>
+<pre class="prettyprint">
+var t = tau.animation.target;
+t(&#39;#redBox&#39;).tween({rotateZ: 120}, 1000); /* Transform */
+t(&#39;#redBox&#39;).tween({backgroundColor: &#39;red&#39;, border: &#39;10px 10px 10px 3px white&#39;}, 1000); /* CSS property */
+t(&#39;#redBox&#39;).tween(&#39;swing&#39;, 1000).tween(&#39;tada&#39;, 1000); /* Pre-defined effect */
+</pre></li>
+
+<li>Option
+<p>An <span style="font-family: Courier New,Courier,monospace">option</span> consists of a duration, ease, delay, callback, and stagger. In order to provide better usage, if you want to use only duration, you can set the duration as a number value like in the previous examples. If any other options are needed, you must make an <span style="font-family: Courier New,Courier,monospace">{option}</span> object and insert the <span style="font-family: Courier New,Courier,monospace">duration: value</span> into the object.
+</p>
+<pre class="prettyprint">
+&lt;div id=&quot;redBox&quot; style=&quot;background-color: &#39;red&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+&lt;div id=&quot;blueBox&quot; style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px; left: 200px;&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+</pre>
+<pre class="prettyprint">var t = tau.animation.target;
+t(&#39;#redBox&#39;).tween({rotateZ: 120}, 1000);
+t(&#39;#redBox&#39;).tween({rotateZ: 120}, {duration: 1000});
+/* The result of this tween method is identical with the above method */
+t(&#39;#blueBox&#39;).tween({rotateZ: 120}, {duration: 1000, ease: &#39;bounceInOut&#39;});
+t(&#39;#blueBox&#39;).tween({rotateZ: 120}, {duration: 1000, delay: 500}); /* After 500ms, blueBox is rotated */
+t(&#39;#blueBox&#39;).tween({rotateZ: 120}, {duration: 1000, onStart: function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#blueBox&#39;).style.innerText = &#39;start&#39;; /* Before animation, the text is inserted into blueBox */
+&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;onComplete: function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#blueBox&#39;).tween(&#39;swing&#39;, 1000); /* After animation, blueBox is animated with a pre-defined effect */
+&nbsp;&nbsp;&nbsp;}
+});
+/* All boxes that include the className &#39;box&#39; are rotated sequentially with a 200ms time difference */
+t(&#39;.box&#39;).tween({rotateZ: 120}, {duration: 1000, stagger: 200}); 
+</pre></li></ul>
+
+
+<p>The following code snippet shows the full code for the first animation example described above.</p>
+<pre class="prettyprint">
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: red;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;title&gt;TAU Animation Sample&lt;/title&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;!-- load TAU Animation --&gt;
+&nbsp;&nbsp;&nbsp;&lt;script src=&quot;lib/tau/animation/tau.animation.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;redBox&quot; style=&quot;background-color: &#39;red&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;blueBox&quot; style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var t = tau.animation.target;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#redBox&#39;).tween(&#39;swing&#39;, 1000); /* Single animation */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#blueBox&#39;).tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000); /* Single animation */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;.box&#39;).tween({translateY: 500}, {duration: 1000, stagger: 200}); /* Group animation */
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&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.practices/html/web/tau/event_handling_w.htm b/org.tizen.ui.practices/html/web/tau/event_handling_w.htm
new file mode 100644
index 0000000..92aeee9
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/event_handling_w.htm
@@ -0,0 +1,185 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Event Handling: Handling User Interactions</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#hardwarekey">Hardware Key Events</a></li>
+            <li><a href="#rotaryevent">Rotary Events</a></li>
+        </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>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Event Handling: Handling User Interactions</h1>
+<p>The Tizen platform supports some device events for user interaction. To provide a full user experience for your application users, you must handle various events in your application.</p>
+
+<h2 id="hardwarekey">Hardware Key Events</h2>
+
+<p>The Tizen platform supports hardware key events for user interaction on devices.</p>
+
+
+<p>The following figures show the hardware keys and events for mobile (on the left) and wearable (on the right) devices.</p>
+
+	<p class="figure">Figure: Hardware keys and events</p>
+<p align="center"><img alt="Menu and Back keys in mobile" src="../../images/efl_phone.png" /> <img alt="Back event in wearable" src="../../images/backWearable.png" /></p>
+
+
+<table>
+	<caption> Table: Hardware key events</caption>
+	<tbody>
+	<tr>
+		<th>Type</th>
+		<th>Description</th>
+		<th>Attribute</th>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span></td>
+		<td>Event is triggered when a device detects the user interaction through a special point of hardware.</td>
+		<td>
+			<span style="font-family: Courier New,Courier,monospace;">event.keyName</span>
+			<ul>
+			<li><span style="font-family: Courier New,Courier,monospace;">back</span> for wearable</li>
+			<li><span style="font-family: Courier New,Courier,monospace;">back, menu</span> for mobile</li>
+			</ul>
+		</td>
+	</tr>
+	</tbody>
+</table>
+<p>To bind an event callback on the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> events, use the following code:</p>
+<pre class="prettyprint">
+window.addEventListener(&quot;tizenhwkey&quot;, function(ev)
+{
+&nbsp;&nbsp;&nbsp;if (ev.keyName == &quot;back&quot;) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Call window.history.back() to go to previous browser window */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Call tizen.application.getCurrentApplication().exit() to exit application */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add script to add another behavior */
+&nbsp;&nbsp;&nbsp;}
+});
+</pre>
+
+<h3>Exiting the Application with the Back Key</h3>
+<p>When the application binds a <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event, it checks the page ID and decides to go back or exit with several lines of app-side script.</p>
+<p>The Tizen Device APIs provide an application exit method. Even if the application has many pages, it can handle the back/exit process.</p>
+<p>With a TAU page, just remember the ID of the main page. In the following example, the ID of the main page is <span style="font-family: Courier New,Courier,monospace;">main</span>.</p>
+<pre class="prettyprint">(function()
+{
+&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;tizenhwkey&quot;, function(ev);
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(ev.keyName === &quot;back&quot;)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementsByClassName(&quot;ui-page-active&quot;)[0],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageid = page ? page.id:&nbsp;&quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(pageid === &quot;main&quot;)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
+&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;tizen.application.getCurrentApplication().exit();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch(ignore)
+&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;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;});
+}());</pre>
+
+<h2 id="rotaryevent">Rotary Events</h2>
+
+<p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called detents. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p>
+
+<table class="note">
+	<tbody>
+	<tr>
+		<th class="note">Note</th>
+	</tr>
+	<tr>
+		<td class="note">This feature is supported in wearable applications only.</td>
+	</tr>
+	</tbody>
+</table>
+
+
+<p class="figure">Figure: Rotary device</p>
+<p align="center"><img alt="Rotary device" src="../../images/rotary_event.png" /> </p>
+<p>Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.</p>
+
+<table>
+	<caption> Table: Rotary events</caption>
+	<tbody>
+	<tr>
+		<th>Type</th>
+		<th>Description</th>
+		<th>Attribute</th>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace">rotarydetent</span></td>
+		<td>Event is triggered when a device detects the detent point.</td>
+		<td><span style="font-family: Courier New,Courier,monospace">detail.direction</span>: rotation direction
+			<ul><li><span style="font-family: Courier New,Courier,monospace;">CW</span> for clockwise rotation direction</li>
+			<li><span style="font-family: Courier New,Courier,monospace;">CCW</span> for counter-clockwise rotation direction</li></ul></td>
+	</tr>
+	</tbody>
+</table>
+
+<p>To bind an event callback on rotary events, use the following code:</p>
+<pre class="prettyprint">
+document.addEventListener(&quot;rotarydetent&quot;, function(ev)
+{
+&nbsp;&nbsp;&nbsp;var direction = ev.detail.direction;
+&nbsp;&nbsp;&nbsp;/* Add behavior for detent detected event with a direction value */
+});
+</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.practices/html/web/tau/footerbutton_ww.htm b/org.tizen.ui.practices/html/web/tau/footerbutton_ww.htm
new file mode 100644
index 0000000..faa34a9
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/footerbutton_ww.htm
@@ -0,0 +1,182 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+	<title>Creating Footer Buttons</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<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>Creating Footer Buttons</h1>
+
+<p>You can create a footer button component that is supported in both a rectangular and circular UI.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The following figures show the layout of the footer button component in a rectangular and circular UI.</p>
+<p class="figure">Figure: Footer button component in rectangular and circular devices</p>
+			<p align="center"><img alt="Footer button in a rectangular device" src="../../images/rectangular_footer.png"/> <img alt="Footer button in a circular device" src="../../images/round_footer.png"/></p>
+			
+<p class="figure">Figure: Multiple footer buttons in rectangular and circular devices</p>
+			<p align="center"><img alt="Multiple footer buttons in a rectangular device" src="../../images/rectangular_multibtn.png"/> <img alt="Multiple footer buttons in a circular device" src="../../images/round_multibtn.png"/></p>
+<p>The footer button on the circular UI has the <span style="font-family: Courier New,Courier,monospace">ui-bottom-button</span> class. When there are multiple buttons, the other buttons except for the first button use the drawer component in the circular UI.</p>
+
+
+<p>To implement footer buttons:</p>
+
+<ul>
+<li>To implement a single footer button:
+<p>Edit the HTML code to add the footer button component to your application screen.</p>
+
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;bottomButtonPage&quot; &gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Bottom Button&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer ui-bottom-button&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;Button&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li>To implement multiple footer buttons:
+
+
+<ol>
+<li>Edit the HTML code to add the footer button components to your application screen.
+<p>When there are multiple buttons, the buttons (except for the first button) use the drawer in the circular UI.</p>
+
+<pre class="prettyprint">
+&lt;div&nbsp;class=&quot;ui-page&nbsp;ui-page-active&quot;&nbsp;id=&quot;bottomButtonWithMorePage&quot;&nbsp;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;Multiple&nbsp;Buttons&lt;/h2&gt;
+&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;
+
+&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;Circle&nbsp;profile&nbsp;--&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;moreoptionsDrawer&quot;&nbsp;class=&quot;ui-drawer&nbsp;drawer-elem&quot;&nbsp;data-drawer-target=&quot;#bottomButtonWithMorePage&quot;&nbsp;data-position=&quot;right&quot;&nbsp;data-enable=&quot;true&quot;&nbsp;data-drag-edge=&quot;1&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;selector&quot;&nbsp;class=&quot;ui-selector&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;show-icon&quot;&nbsp;data-title=&quot;2&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;human-icon&quot;&nbsp;data-title=&quot;3&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;footer&nbsp;class=&quot;ui-footer&nbsp;ui-grid-col-3&nbsp;ui-bottom-button&quot;&gt;
+&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>
+</li>
+
+<li>Edit the CSS code to set the visual style of the buttons:
+
+<pre class="prettyprint">
+.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;
+&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;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;122px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;transparent;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#a4a4a4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-image:&nbsp;url(/*path&nbsp;of&nbsp;the&nbsp;image*/);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-size:&nbsp;18px&nbsp;36px;
+&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;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;
+&nbsp;&nbsp;&nbsp;}
+}
+</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(&quot;#bottomButtonWithMorePage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer = page.querySelector(&quot;#moreoptionsDrawer&quot;),
+&nbsp;&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;});
+})();
+</pre>
+</li>
+</ol>
+</li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/globalization_w.htm b/org.tizen.ui.practices/html/web/tau/globalization_w.htm
new file mode 100644
index 0000000..3074e51
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/globalization_w.htm
@@ -0,0 +1,484 @@
+<!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>Globalization: Supporting Internationalization and Localization</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#jquery_globalize">jQuery and Globalize</a></li>
+            <li><a href="#use">Using the Globalize Utility</a></li>
+            <li><a href="#utility">Using the Globalize Utility Methods</a></li>
+            <li><a href="#rtl">Right-to-left (RTL) Language Support</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Globalization/globalization.htm">Globalization API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Globalization: Supporting Internationalization and Localization</h1>
+
+    <p>The TAU Globalize utility supports internationalization and localization. It wraps the <a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> functionality for easy access from Tizen Web applications, and it is extended to support the right-to-left (RTL) languages.</p>
+
+    <h2 id="jquery_globalize" name="jquery_globalize">jQuery and Globalize</h2>
+
+    <p>Globalize is a jQuery JavaScript library for internationalization and localization that leverages the official Unicode CLDR JSON data. The library works both for the browser and as a Node.js module. jQuery and Globalize have dependencies with <a href="https://github.com/rxaviers/cldrjs" target="_blank">cldr.js</a>, which is a CLDR low-level manipulation tool.</p>
+
+    <p>Globalize:</p>
+    <ul>
+        <li>Leverages the Unicode CLDR data and follows its UTS#35 specification.</li>
+        <li>Keeps the code separate from the i18n content. Does not host or embed any locale data in the library. Empowers you to control the loading mechanism of your choice.</li>
+        <li>Allows you to load as much or as little data as you need. Avoids duplicating data if using multiple i18n libraries that leverage CLDR.</li>
+        <li>Keeps the code modular. Allows you to load the i18n functionalities you need.</li>
+        <li>Runs in browsers and Node.js, and consistently across all of them.</li>
+        <li>Makes globalization as easy to use as jQuery.</li>
+    </ul>
+
+    <h3 id="cldr" name="cldr">CLDR Data</h3>
+
+    <p>The Unicode CLDR provides the key building blocks for software to support the world&#39;s languages. It includes:</p>
+    <ul>
+        <li>Locale-specific patterns for formatting and parsing dates, times, time zones, numbers, and currency values</li>
+        <li>Translations of names: languages, scripts, countries and regions, currencies, eras, months, weekdays, day periods, time zones, cities, and time units</li>
+        <li>Language and script information: characters used, plural cases, gender of lists, capitalization, rules for sorting and searching, writing direction, transliteration rules, rules for spelling out numbers, and rules for segmenting text into graphemes, words, and sentences</li>
+        <li>Country information: language usage, currency information, calendar preference and week conventions, and postal and telephone codes</li>
+        <li>ISO and BCP 47 code support (such as cross-mappings) and keyboard layouts</li>
+    </ul>
+
+    <p>CLDR uses the XML format provided by UTS #35: Unicode Locale Data Markup Language (LDML). LDML is a format used not only for CLDR, but also for the general interchange of locale data. For more information about CLDR, see <a href="http://cldr.unicode.org/index/downloads/cldr-27" target="_blank">CLDR release notes</a>, and to download the JSON format file , see <a href="https://github.com/unicode-cldr/cldr-json" target="_blank">JSON Data from the Unicode CLDR Project</a>.</p>
+    <p>The TAU Globalize utility uses the CLDR 26 release, and when you create a Tizen Web application project, you find CLDR in the <span style="font-family: Courier New,Courier,monospace">&lt;project&gt;/lib/tau/&lt;profile&gt;js/cldr-data</span> folder.</p>
+
+    <h2 id="use" name="use">Using the Globalize Utility</h2>
+
+    <p>To use the TAU Globalize utility in your application:</p>
+    <ol>
+        <li>Download the following dependency files for your application:
+            <ul>
+                <li><a href="https://github.com/rxaviers/cldrjs" target="_blank">Cldr</a>  (v0.4.0)</li>
+                <li><a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> (v1.0.0-alpha.17)</li>
+                <li><a href="http://unicode.org/Public/cldr/26/json-full.zip" target="_blank">Cldr-date</a> (26 version) main and supplemental</li>
+            </ul>
+        </li>
+        <li>Create a folder structure, as shown in the following table.
+            <table>
+                <caption>
+                    Table: Globalize folder structure
+                </caption>
+                <tbody>
+                <tr>
+                    <th colspan="2">Folder structure</th>
+                    <th>Description</th>
+                </tr>
+                <tr>
+                    <td rowspan="7"> <p class="figure"></p>
+                        <p align="center"><img src="../../images/globalize_folder_structure.png" alt="Globalize folder structure" /></p></td>
+                    <td rowspan="7"> <p class="figure"></p>
+                        <p align="center"><img src="../../images/globalize_folder_structure_main.png" alt="Globalize main folder" /></p></td>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr/</span>: Copy the cldr.js library in this folder.</td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr-data/</span>: Copy the cldr-data files in this folder.
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr-data/main</span>: Copy the languages to be supported in this folder.</p>
+                        <table class="note">
+                            <tbody>
+                            <tr>
+                                <th class="note">Note</th>
+                            </tr>
+                            <tr>
+                                <td class="note">Do not copy all languages, just the ones you need.</td>
+                            </tr>
+                            </tbody>
+                        </table></td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">globalize/</span>: Copy the Globalize library in this folder.</td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">locale/</span>: Make the custom locale string in this folder.</td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">script/</span>: JavaScript files.</td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">style/</span>: CSS, image, and other style related files.</td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">view/</span>: HTML files</td>
+                </tr>
+                </tbody>
+            </table>
+        </li>
+        <li>Set the locale using the following example code:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ko)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* &quot;ko&quot; is the Globalize utility instance */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.getLocale()) /* &quot;ko&quot; */
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+
+            <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is not synchronous, and it returns the deferred object with the methods <span style="font-family: Courier New,Courier,monospace">then()</span>, <span style="font-family: Courier New,Courier,monospace">done()</span>, and <span style="font-family: Courier New,Courier,monospace">fail()</span>. Use these methods to receive the Globalize utility instance.</p>
+            <p>You can specify locales in 2 ways using IETF language tags, such as en, pt-BR, or zh-Hant-TW:</p>
+            <ul>
+                <li>Specify the locale ID in the <span style="font-family: Courier New,Courier,monospace">lang</span> attribute of the body element, such as <span style="font-family: Courier New,Courier,monospace">&lt;body lang=&quot;ko-KR&quot;&gt;</span>.</li>
+                <li>Use a string variable as an input argument of the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method (for example <span style="font-family: Courier New,Courier,monospace">ko.setLocale(&quot;en&quot;)</span>) to overwrite the body element setting. </li>
+            </ul>
+            <p>If no <span style="font-family: Courier New,Courier,monospace">lang</span> attribute or <span style="font-family: Courier New,Courier,monospace">setLocale()</span> input argument is defined, the Globalize utility finds the locale by checking the <span style="font-family: Courier New,Courier,monospace">window.navigator.language</span> property. If the check result is false, the utility uses the default locale &quot;en&quot;.</p>
+            <p>The following table illustrates the locale setting method order.</p>
+            <table>
+                <caption>
+                    Table: Locale setting methods
+                </caption>
+                <tbody>
+                <tr>
+                    <th>Order</th>
+                    <th>Locale setting methods</th>
+                </tr>
+                <tr>
+                    <td>1</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">setLocale(LocaleId)</span></td>
+                </tr>
+                <tr>
+                    <td>2</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">&lt;body lang=&quot;ko-KR&quot;&gt;</span></td>
+                </tr>
+                <tr>
+                    <td>3</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">window.navigator.language</span></td>
+                </tr>
+                <tr>
+                    <td>4</td>
+                    <td>Default locale &quot;en&quot;</td>
+                </tr>
+                </tbody>
+            </table>
+        </li>
+        <li>Make sure that you have all required CLDR files.
+            <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method automatically loads the basic CLDR data files which are match the given locale by local AJAX. During the method call, the Globalize utility also loads the basic CLDR JSON files:</p>
+            <ul>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/currencies.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/scriptMetaData.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)</li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</li>
+            </ul>
+            <p>In addition to the basic files, each Globalize method requires a special set of CLDR portions. Determine which Globalize module functionalities you need, and make sure you have the required files, as defined in the following table.</p>
+
+            <table>
+                <caption>
+                    Table: CLDR requirements
+                </caption>
+                <tbody>
+                <tr>
+                    <th>Module</th>
+                    <th>Required CLDR JSON files</th>
+                </tr>
+                <tr>
+                    <td>Core module</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></td>
+                </tr>
+                <tr>
+                    <td>Date module</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span>
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/timeZoneNames.json</span></p>
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></p>
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></p>
+                        <p>CLDR JSON files from the number module</p></td>
+                </tr>
+                <tr>
+                    <td>Number module</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span>
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></p></td>
+                </tr>
+                <tr>
+                    <td>Plural module</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</p>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </li>
+    </ol>
+
+    <h2 id="utility" name="utility">Using the Globalize Utility Methods</h2>
+    <p>The following code snippets show how to use the TAU Globalize utility methods:</p>
+    <ul>
+        <li><span style="font-family: Courier New,Courier,monospace">formatCurrency()</span>:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;currency_unit = &quot;KRW&quot;; /* ISO 4217 */
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ko)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatCurrency(69000, currency_unit)); /* ₩69,900 */
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+            <p>For more information, see the <a href="http://en.wikipedia.org/wiki/ISO_4217" target="_blank">currency unit standard in ISO 4217</a>.</p>
+        </li>
+
+        <li><span style="font-family: Courier New,Courier,monospace">formatDate()</span>:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;currency_unit = &quot;KRW&quot;; /* ISO 4217 */
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ko)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatDate(new Date(), {datetime:&quot;medium&quot;});
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+            <p>For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md" target="_blank">date-formatter</a>.</p>
+        </li>
+
+        <li><span style="font-family: Courier New,Courier,monospace">getCalendar()</span>:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ko)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.getCalendar().months.format.wide, undefined, 4));
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+            <p>The calendar format is specified in the <span style="font-family: Courier New,Courier,monospace">gregorian.json</span> file in the CLDR data.</p>
+        </li>
+
+        <li><span style="font-family: Courier New,Courier,monospace">formatMessage()</span>:
+            <p>This method supports custom locale data.</p>
+            <ol>
+                <li>Create a directory for each locale that has localized content under the locales directory in the project root. The locale names are defined in the <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">W3C IANA language subtag registry</a>.
+<pre class="prettyprint">
+index.html
+locale
+&nbsp;&nbsp;&nbsp;en.json
+&nbsp;&nbsp;&nbsp;ko.json
+</pre>
+                </li>
+                <li>Create a JSON file for the <span style="font-family: Courier New,Courier,monospace">formatMessage</span> strings (custom locale strings) in locales paths:
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;&quot;en&quot;:
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;like&quot;:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;{0, plural, offset:1&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;=0 {Be the first to like this}&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;=1 {You liked this}&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;one {You and someone else liked this}&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;other {You and # others liked this}&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;}&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;greeting&quot;:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;hello&quot;:&quot;hello&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bye&quot;:&quot;bye&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;longText&quot;:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;quis exercitationem culpa nesciunt nihil aut nostrum explicabo&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;reprehenderit optio amet ab temporibus asperiores quasi cupiditate.&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Voluptatum ducimus voluptates voluptas?&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+                </li>
+
+                <li>Call the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method to load the custom locale files automatically:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ko)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;greeting/hello&quot;));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;greeting/bye&quot;));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;longText&quot;));
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+                </li>
+            </ol>
+        </li>
+
+        <li><span style="font-family: Courier New,Courier,monospace">messageFormatter()</span>:
+            <p>This method returns a function that formats a message using the ICU message format pattern. For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/message/message-formatter.md" target="_blank">message-formatter</a>.</p>
+            <ol>
+                <li>Create a locale resource in the locales path:
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;&quot;en&quot;:
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;formatter&quot;:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;welcome&quot;:&quot;Hello Mr. {0}&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;thankyou&quot;:&quot;Bye Mr. {custom}.&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+                </li>
+
+                <li>Use the <span style="font-family: Courier New,Courier,monospace">messageFormatter()</span> method:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;en-US&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(en)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var welcomeFormatter = en.messageFormatter(&#39;formatter/welcome&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thankyouFormatter  = en.messageFormatter(&#39;formatter/thankyou&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;welcomeMessageList = [&quot;Tom&quot;],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thankyouMessageList = {custom:&quot;Tom&quot;};
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(welcomeFormatter(welcomeMessageList));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(thankyouFormatter(thankyouMessageList));
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+                </li>
+            </ol>
+        </li>
+    </ul>
+
+    <h2 id="rtl" name="rtl">Right-to-left (RTL) Language Support</h2>
+
+    <p>TAU offers 2 ways to handle right-to-left (RTL) languages:</p>
+    <ul>
+        <li>Locale-specific CSS</li>
+        <li>RTL property in a locale object</li>
+    </ul>
+    <p>When the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is called, it automatically applies a CSS class to the body element of your DOM if the given locale has an RTL direction.</p>
+    <p>The following examples show how to use the locale-specific CSS:</p>
+
+    <ul>
+        <li>The following example has ar-EG as the given locale, and the language has an RTL direction:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ar-EG&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ar)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+        </li>
+
+        <li>The following example has a DOM of body with a locale-specific CSS named <span style="font-family: Courier New,Courier,monospace">ui-script-direction-rtl</span>:
+<pre class="prettyprint">
+&lt;body class=&quot;ui-script-direction-rtl&quot;&gt;
+</pre>
+        </li>
+
+        <li>The following example uses the locale-specific CSS to switch on the RTL feature for a UI component:
+<pre class="prettyprint">
+.ui-script-direction-rtl .ui-listview
+{
+&nbsp;&nbsp;&nbsp;direction: rtl;
+}
+.ui-script-direction-rtl .ui-li.ui-li-static
+{
+&nbsp;&nbsp;&nbsp;text-align: right;
+&nbsp;&nbsp;&nbsp;unicode-bidi: bidi-override;
+}
+</pre>
+        </li>
+    </ul>
+
+    <p>The following example shows how to use the RTL property in a locale object (the <span style="font-family: Courier New,Courier,monospace">rtl</span> variable). If a given locale has an RTL direction, the variable is <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ar-EG&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ar)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ar.rtl) /* true */
+&nbsp;&nbsp;&nbsp;})
+})
+</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.practices/html/web/tau/guides_tau_w.htm b/org.tizen.ui.practices/html/web/tau/guides_tau_w.htm
new file mode 100644
index 0000000..9d396ee
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/guides_tau_w.htm
@@ -0,0 +1,131 @@
+<!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>TAU</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>TAU</h1>
+	
+<p>The Tizen Advanced UI Framework components allow you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider, which gives you interaction and manipulation features.</p>
+<p>TAU is the standard Web UI library for Tizen platform, originated from the Tizen Web UI Framework Library (standard library for Tizen 2.2.1), which was mainly an extension to jQuery Mobile. The key features of the Web UI Framework Library were coding simplification and application creation speed.  The purpose of TAU is to be the &quot;framework advanced to the next level&quot;.</p>
+
+<table class="note">
+       <tbody>
+       <tr>
+               <th class="note">Note</th>
+       </tr>
+       <tr>
+               <td class="note">Tizen Advanced UI Framework is <strong>optional</strong>, but recommended for making Web applications for Tizen.
+               </td>
+       </tr>
+       </tbody>
+</table>
+
+<p>With TAU, you can take advantage of the following benefits in your code:</p>
+<ul>
+	<li>TAU is a standalone library, so no additional libraries are needed.</li>
+	<li>TAU can be used with jQuery, as it exposes a special API to the jQuery object identical to jQuery Mobile. Migration is painless.</li>
+	<li>TAU has been written with speed in mind, and all the code is tweaked for maximum performance.</li>
+	<li>Applications can be built to dramatically improve startup performance.</li>
+	<li>TAU is ECMAScript5- and HTML5-compliant.</li>
+	<li>TAU has a large and open API, TAU methods and core functions (event utility functions) are available and not hidden.</li>
+	<li>TAU is customizable and easy to extend (to create new UI components).</li>
+	<li>TAU is optimized for wearable, mobile, and TV devices.</li>
+	<li>TAU supports various profiles (mobile, wearable, and TV).</li>
+</ul>
+
+<table class="note">
+	<tbody>
+	<tr>
+		<th class="note">Note</th>
+	</tr>
+	<tr>
+		<td class="note">TAU (Tizen Advanced UI) is the new name of the <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span>. In all documents and source code, TAU is used instead of <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span>.
+<p>Since 2.3, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span> has been deprecated (including <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw.js</span>, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw-libs.js</span>, and <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw.css</span>). Since 2.4, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span> is fully deleted and not supported anymore.</p>
+		</td>
+	</tr>
+	</tbody>
+</table>
+
+<p>To learn to use the TAU features in your application UI, see the following topics:</p>
+<ul>
+<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="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 Notepad UI Application</a>
+<p>Enables you to create a notepad application with TAU.</p></li>
+
+<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 Web Accessibility</a>
+<p>Enables you to manage application accessibility.</p></li>
+
+<li><a href="globalization_w.htm">Globalization: Supporting Internationalization and Localization</a>
+<p>Enables you to localize and globalize applications.</p></li>
+
+<li><a href="animation_w.htm">Animation: Supporting Animation for HTML Elements</a>
+<p>Enables you to create animations without other animation libraries.</p></li>
+
+<li><a href="tau_porting_w.htm">2.4 Porting Guide: Changed APIs in 2.4 TAU</a>
+<p>Enables you to migrate a TAU element from Tizen version 2.3 to 2.4.</p></li>
+</ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/header_ww.htm b/org.tizen.ui.practices/html/web/tau/header_ww.htm
new file mode 100644
index 0000000..933828f
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/header_ww.htm
@@ -0,0 +1,128 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+	<title>Creating Expandable Headers</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<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>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>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The following figure shows the layout of the header component in a rectangular and circular UI.</p>
+
+<p class="figure">Figure: Header component in rectangular and circular devices</p>
+<p align="center"><img alt="Header component in a rectangular device" src="../../images/rectangular_header.png" /> <img alt="Header component in a circular device" src="../../images/round_header.png" /></p>
+
+<p>To implement the header component, edit the HTML code to add the header component to your application screen:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;headerPage&quot; &gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot; id=&quot;myHeader&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Long title with ExpandableHeader&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Header is expandable in Circular UI.
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+
+<p>The header component supports the following events.</p>
+
+<table>
+<tbody>
+	<tr>
+		<th>Event name</th>
+		<th>Description</th>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace">headerexpand</span></td>
+		<td>Triggered when the header starts to expand.</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace">headerexpandcomplete</span></td>
+		<td>Triggered after the header has fully expanded.</td>
+	</tr>
+	<tr>
+		<td><span style="font-family: Courier New,Courier,monospace">headercollapse</span></td>
+		<td>Triggered when the header returns to the state before expanding.</td>
+	</tr>
+</tbody>
+</table>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">headerexpand</span> and <span style="font-family: Courier New,Courier,monospace">headercollapse</span> events if you need to do something when the header expands and collapses.</p>
+<p>The following examples show header events with Marquee.</p>
+
+<pre class="prettyprint">
+var page = document.querySelector(&quot;#myPage&quot;);
+
+page.addEventListener(&quot;pagebeforeshow&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;var textElement = page.querySelector(&quot;.ui-title&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee = new tau.widget.Marquee(textElement);
+}, false);
+
+page.addEventListener(&quot;headercollapse&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;if (marquee) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee.reset();
+&nbsp;&nbsp;&nbsp;}
+}, false);
+
+page.addEventListener(&quot;headerexpandcomplete&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;if (marquee) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee.start();
+&nbsp;&nbsp;&nbsp;}
+}, false);
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/helloworld_w.htm b/org.tizen.ui.practices/html/web/tau/helloworld_w.htm
new file mode 100644
index 0000000..06b8d3b
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/helloworld_w.htm
@@ -0,0 +1,183 @@
+<!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>Hello World: Creating a Basic Hello World Page</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#scaling">Scaling the UI</a></li>
+            <li><a href="#import_tau">Importing TAU</a></li>
+            <li><a href="#custom_js">Running Custom JavaScript and CSS</a></li>
+            <li><a href="#fill_content">Creating a Page in the Body</a></li>
+        </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>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Hello World: Creating a Basic Hello World Page</h1>
+
+<p>You can import TAU into your application and create a basic Hello World page with TAU.</p>
+
+<p>The following example shows a basic TAU template:</p>
+  <pre class="prettyprint">
+&lt;!DOCTYPE&nbsp;html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width,&nbsp;user-scalable=no&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;myapp.css&quot;&nbsp;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello&nbsp;TAU&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--HTML&nbsp;BODY&nbsp;CONTENT--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+
+<h2 id="scaling">Scaling the UI</h2>
+<p>The Tizen Advanced UI (TAU)-based template provides 2 scaling methods: device-width and fixed-width.</p>
+<ul>
+	<li>Device-width scaling 
+	<p>This scaling mode is suited for most mobile devices, such as Tizen, iPhone&reg; and Android&reg;. In this mode, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, enabling rem scaling using the Rem and Em units. These units calculate the size of a source element automatically based on the container font size (Em) or the base font size (Rem). In Tizen Web applications, a 320 px screen width is assumed.</p>
+	<pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;</pre>
+	</li>
+	<li>Fixed-width scaling 
+	<p>This scaling mode is best suited for Tizen devices, since the entire screen can be scaled on the viewport level. In the viewport scaling mode, set the size of all resources to fit the 360 px screen width.</p>
+	<p>You can also use fixed-width scaling if you do not want to scale your application or if you want to set your own scale. In this case, declare a viewport but note that the default viewport scaling is overridden by the declared viewport. In the Tizen Web UI components, viewport scaling is set automatically to <span style="font-family: Courier New,Courier,monospace">device-width</span>:</p>
+	<pre class="prettyprint lang-html">&lt;meta name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</pre>
+	<p>To enable fixed-width scaling, the header must contain the <span style="font-family: Courier New,Courier,monospace">&lt;meta name=&quot;viewport&quot;&gt;</span> element:</p>
+	<pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=360, initial-scale=1, user-scalable=no&quot;&gt;</pre>
+	</li>
+</ul>
+
+<h2 id="import_tau">Importing TAU</h2>
+<p>You can import TAU with HTML. For better performance, all CSS files must be included in the header and all script elements must be put before the body element&#39;s close tag:</p>
+<pre class="prettyprint">
+&lt;!DOCTYPE&nbsp;html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;HTML&nbsp;BODY&nbsp;CONTENT&nbsp;--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>In HTML, use the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> elements. These default elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications. The loaded libraries are:</p>
+<ul>
+	<li>TAU library: <span style="font-family: Courier New,Courier,monospace">tau(.min).js</span> <p>This element is mandatory, as it imports the TAU library, which you need to use the TAU JavaScript Interface.</p></li>
+	<li>TAU theme: <span style="font-family: Courier New,Courier,monospace">tau(.min).css</span> <p>This element is also mandatory, as it imports the TAU theme.</p></li>
+</ul>
+
+<h2 id="custom_js">Running Custom JavaScript and CSS</h2>
+<p>You can add an additional <span style="font-family: Courier New,Courier,monospace">&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</span> or <span style="font-family: Courier New,Courier,monospace">&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</span> element to include your own scripts and style sheets. However, place them <strong>after</strong> the default <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> elements, as you can use any TAU APIs provided by the default libraries.</p>
+<p>To load your JavaScript file, include the file in the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element in the HTML header. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
+<pre class="prettyprint">&lt;script src=&quot;{YOUR_SCRIPT_PATH}&quot;&gt;&lt;/script&gt;</pre>
+
+<h2 id="fill_content">Creating a Page in the Body</h2>
+
+<p>The body section of the HTML file contains 1 or more pages.</p>
+<p>To create a page in <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span>, you can use the <span style="font-family: Courier New,Courier,monospace">&quot;ui-page&quot;</span> class with the <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element:</p>
+ <pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>Each page has a header, mandatory content, and a footer: </p>
+<pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello&nbsp;World&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello&nbsp;TAU!&lt;/p&gt;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>The following example shows a basic sample code for Hello World : </p>
+<pre class="prettyprint">
+&lt;!DOCTYPE&nbsp;html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width,&nbsp;user-scalable=no&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;myapp.css&quot;&nbsp;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello&nbsp;TAU&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello&nbsp;World&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello&nbsp;TAU!&lt;/p&gt;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&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.practices/html/web/tau/helper_ww.htm b/org.tizen.ui.practices/html/web/tau/helper_ww.htm
new file mode 100644
index 0000000..c8dbcb7
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/helper_ww.htm
@@ -0,0 +1,230 @@
+<!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>Using the Helper Script</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview API for Wearable Web</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>Using the Helper Script</h1>
+
+<p>You can use the TAU helper script to support some components for the Web applications. SnapListMarqueeStyle allows you to create a marquee-able and expandable list style with the SnapListview.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>You can use the helper script as follows:</p>
+
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var helperInstance = tau.helper.<i>NameSpace</i>
+&lt;/script&gt;
+</pre>
+
+<p>The SnapListMarqueeStyle helper provides a helper script to support creating some usable components for the list style. It supports making the list view more effective using the <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview</a> and <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_marquee.htm">Marquee</a> components.</p>
+
+	<table class="note">
+		<tbody>
+		<tr>
+			<th class="note">Note</th>
+		</tr>
+		<tr>
+			<td class="note">This helper script is supported since Tizen 2.3.</td>
+		</tr>
+		</tbody>
+	</table>
+	
+<p>The following example shows how to create your own listview style with SnapListMarqueeStyle. In the example, the list item text scrolls horizontally and the sub text appears if the list item is placed in the middle of the screen.</p>
+
+<p>To create a SnapListMarqueeStyle:</p>
+	
+<ol>
+<li>Edit the HTML code to add the SnapListMarqueeStyle component to your application screen.
+<p>You can add a multiline style listview as follows.</p>
+
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;snaplistTest&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Bottom Button&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview ui-snap-listview expand-list&quot; id=&quot;snapList&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-2line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;1.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-2line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;2.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-2line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;3.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-2line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;4.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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>Edit the CSS code to set your list animation style:
+<pre class="prettyprint">.ui-listview.expand-list li.li-has-2line .ui-marquee
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 16px, 0);
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease .5s;
+}
+.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-marquee
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+}
+
+.ui-listview.expand-list li.li-has-2line .ui-li-sub-text
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -20px, 0);
+&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease .5s;
+}
+.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-li-sub-text
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+}
+</pre>
+</li>
+
+<li>Edit the JavaScript code to make your list into a SnapListMarqueeStyle component and manage the list events:
+<pre class="prettyprint">
+&lt;script&gt;
+var page = document.getElementById(&quot;snaplistTest&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;list = document.getElementById(&quot;snapList&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
+
+page.addEventListener(&quot;pageshow&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+});
+
+page.addEventListener(&quot;pagehide&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;listHelper.destroy();
+});
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+
+<p>The following table shows the options you have in creating your SnapListMarqueeStyle component.</p>
+
+	<table>
+		<tbody>
+		<tr>
+			<th>Option</th>
+			<th>Input type</th>
+			<th>Default value</th>
+			<th>Description</th>
+		</tr>
+
+		<tr>
+			<td><span style="font-family: Courier New,Courier,monospace">marqueeDelay</span></td>
+			<td>number</td>
+			<td>0</td>
+			<td>Sets the delay time (in milliseconds) for the marquee component.</td>
+		</tr>
+
+		</tbody>
+	</table>
+
+<p>You can use the following methods with the SnapListMarqueeStyle:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">create()</span>
+		<p>Creates the related components for SnapListMarqueeStyle.</p>
+		<p>This method is supported since Tizen 2.3.</p>
+		<p>The following code example shows the use of the method:</p>
+<pre class="prettyprint">
+&lt;ul class=&quot;ui-listview ui-snap-listview&quot; id=&quot;snapList&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;some element or text&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
+
+&nbsp;&nbsp;&nbsp;/* Create the helper */
+&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+&lt;/script&gt;
+</pre>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">destroy()</span>
+		<p>Destroys the related components for SnapListMarqueeStyle.</p>
+		<p>This method is supported since Tizen 2.3. It has no return value.</p>
+		<p>The following code example shows the use of the method:</p>
+		<pre class="prettyprint">
+&lt;ul class=&quot;ui-listview ui-snap-listview&quot; id=&quot;snapList&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;some element or text&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
+
+&nbsp;&nbsp;&nbsp;/* Create the helper */
+&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+
+&nbsp;&nbsp;&nbsp;/* Destroy the helper */
+&nbsp;&nbsp;&nbsp;listHelper.destroy();
+&lt;/script&gt;
+</pre>
+</li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/indexscrollbar_ww.htm b/org.tizen.ui.practices/html/web/tau/indexscrollbar_ww.htm
new file mode 100644
index 0000000..72abb36
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/indexscrollbar_ww.htm
@@ -0,0 +1,202 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+	<title>Creating Index Scroll Bars</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_circularindexscrollbar.htm">Circular Index Scroll Bar API for Wearable Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_indexscrollbar.htm">Index Scroll Bar API for Wearable Web</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Index Scroll Bars</h1>
+
+<p>You can create a circle- or rectangle-shaped index scroll bar component with the CircularIndexScrollBar and IndexScrollBar APIs.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The following figure shows the layout of the index scroll bar component in a rectangular and circular UI.</p>
+
+<p class="figure">Figure: Index scroll bar component in rectangular and circular devices</p>
+<p align="center"><img alt="Index scroll bar component in a rectangular device" src="../../images/rectangular_index.png" />  <img alt="Index scroll bar component in a circular device" src="../../images/round_index.png" /></p>
+
+
+<p>To implement the index scroll bar component:</p>
+
+<ol>
+<li>Edit the HTML code to add the component to your application screen:
+<pre class="prettyprint">&lt;div&nbsp;class=&quot;ui-page&nbsp;ui-page-active&quot;&nbsp;id=&quot;pageIndexScrollbar&quot;&nbsp;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&nbsp;ui-header-small&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&nbsp;ui-title-text-fadeout&quot;&gt;Index&nbsp;Scroll&nbsp;Bar&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;class=&quot;ui-listview&nbsp;ui-snap-listview&quot;&nbsp;id=&quot;list1&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;A&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Anton&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;B&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Barry&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Bob&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;C&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Carry&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;D&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Daisy&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;E&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Eric&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;F&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Fay&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-listview-divider&quot;&gt;G&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Garry&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the JavaScript code to manage the index scroll bar events and other functionality:
+<p>To create a component selectively:</p>
+<pre class="prettyprint">
+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>To use the callback:</p>
+<pre class="prettyprint">
+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 <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() 
+{
+&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">
+<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.practices/html/web/tau/list_ww.htm b/org.tizen.ui.practices/html/web/tau/list_ww.htm
new file mode 100644
index 0000000..fd667cd
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/list_ww.htm
@@ -0,0 +1,191 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+	<title>Creating Snap Lists</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview API for Wearable Web</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<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>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The following figure shows the layout of the list component in a rectangular and circular UI.</p>
+<p class="figure">Figure: List component in rectangular and circular devices</p>
+<p align="center"><img alt="List component in a rectangular device" src="../../images/rectangular_list.png" /> <img alt="List component in a circular device" src="../../images/round_list.png" /></p>
+
+<p>To implement the list component:</p>
+
+<ol>
+<li>Edit the HTML code to add the list component to your application screen:
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;snapListPage&quot; &gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Snap List&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview ui-snap-listview expand-list&quot; id=&quot;snapList&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;1.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-3line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;2.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-3line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;3.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-3line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;4.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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;li-has-3line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;5.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&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>Edit the CSS code to set the visual style of the list:
+<pre class="prettyprint">
+.ui-listview li .li-text-sub 
+{
+&nbsp;&nbsp;&nbsp;display: block;
+&nbsp;&nbsp;&nbsp;text-overflow: ellipsis;
+&nbsp;&nbsp;&nbsp;overflow: hidden;
+&nbsp;&nbsp;&nbsp;line-height: 32px;
+&nbsp;&nbsp;&nbsp;color: rgb(51, 51, 51);
+}
+
+.ui-listview li.li-has-3line 
+{
+&nbsp;&nbsp;&nbsp;padding-top: 0;
+&nbsp;&nbsp;&nbsp;padding-bottom: 0;
+&nbsp;&nbsp;&nbsp;height: 115px;
+}
+
+.ui-listview.expand-list li.li-has-3line .ui-marquee
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 30px, 0);
+}
+
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-marquee
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+}
+
+.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:nth-child(2)
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -10px, 0);
+&nbsp;&nbsp;&nbsp;opacity: 0;
+}
+
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:nth-child(2)
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+}
+
+.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:last-child
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -42px, 0);
+&nbsp;&nbsp;&nbsp;opacity: 0;
+}
+
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:last-child
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+}
+</pre>
+</li>
+
+<li>Edit the JavaScript code to manage the list events and other functionality:
+<pre class="prettyprint">
+var page = document.querySelector(&quot;#snapListPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
+
+page.addEventListener( &quot;pagebeforeshow&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;);
+
+&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+&nbsp;&nbsp;&nbsp;}
+});
+
+page.addEventListener( &quot;pagehide&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (listHelper) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper.destroy();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&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.ui.practices/html/web/tau/managing_page_w.htm b/org.tizen.ui.practices/html/web/tau/managing_page_w.htm
new file mode 100644
index 0000000..e85eac3
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/managing_page_w.htm
@@ -0,0 +1,262 @@
+<!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>Managing Pages: Creating and Routing a Page</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#structure">Page Structure</a></li>
+            <li><a href="#createone">Creating Single Page</a></li>
+            <li><a href="#createtwo">Creating Multiple Pages in One HTML Code</a></li>
+            <li><a href="#pageRouting">Page Routing</a></li>
+        </ul>
+        <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 API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Managing Pages: 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>
+
+<h2 id="structure">Page Structure</h2>
+<p>The page consist of:</p>
+<ul>
+<li>Header area
+<p>Shows the user which page is currently open. The header can contain buttons, menus, and toolbars. The header is optional.</p></li>
+<li>Content area
+<p>Contains the main application content. The content area has an optional scroll bar.</p></li>
+<li>Footer area
+<p>Contains a status line or buttons. The footer is optional.</p></li>
+</ul>
+<p>All the page areas are specified by a corresponding <span style="font-family: Courier New,Courier,monospace">class</span> attribute.</p>
+
+<p class="figure">Figure: Page content</p>
+<p align="center"><img src="../../images/application_page_layout.png" alt="Application UI Schema" title="Application UI Schema" /></p>
+
+<p>If there is no <span style="font-family: Courier New,Courier,monospace">Page</span> element in the markup, TAU creates one. For example, if no <span style="font-family: Courier New,Courier,monospace">Page</span> element exists:</p>
+<pre class="prettyprint">&lt;span&gt;I have no page&lt;/span&gt;</pre>
+<p>TAU creates a page:</p>
+<pre class="prettyprint">&lt;div class="ui-page"&gt;&lt;span&gt;I have no page&lt;/span&gt;&lt;/div&gt;
+</pre>
+
+
+<h2 id="createone">Creating a Single Page</h2>
+
+
+<p>To create a page:</p>
+<ol>
+<li><p>Create a single page with the following code:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;Simple page
+&lt;/div&gt;
+</pre>
+
+<p>To create a page for your application, use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> value. TAU uses that information to properly acquire the <span style="font-family: Courier New,Courier,monospace">div</span> element and bind the DOM element to its JavaScript component implementation.</p>
+</li>
+<li><p>Create a header area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-header&quot;</span> attribute:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;This is a header&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+<li><p>Create a footer area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-footer&quot;</span> attribute:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;This is a footer&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li><p>Create the main content area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-content&quot;</span> attribute:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;MyApplication header&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello world!
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;Application status line&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<p>The previous example shows a full page structure. The header and footer areas can contain multiple UI components, such as buttons or images.</p>
+<p>The following example shows a title bar with a <strong>More Options</strong> button and an icon:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title ui-icon&quot; style=&quot;background-image: url(image.png);&quot;&gt;Title&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-more ui-icon-overflow&quot;&gt;More Options&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;MyApplication content&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li>
+<p>You can also create a popup for your page:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;Popup Open Page&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#popup&quot; class=&quot;ui-btn&quot; data-rel=&quot;popup&quot;&gt;Popup Open&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;popup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;Popup Page&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;Popup Content&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<p>The popup works because TAU opens (makes visible) the page whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute corresponds to the <span style="font-family: Courier New,Courier,monospace">#hashtag</span> page. This is basic page routing; for more information, see <a href="#pageRouting">Page Routing</a>.</p>
+</li>
+</ol>
+
+<h2 id="createtwo">Creating Multiple Pages in One HTML Code</h2>
+
+
+<p>You can implement a template containing multiple <span style="font-family: Courier New,Courier,monospace">page</span> containers in the application&#39;s <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
+<p>In a multi-page layout, the main page is defined with the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class. If no page has the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded.</p>
+<pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--CONTENT--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--CONTENT--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<h2 id="pageRouting" name="basic_page_routing">Page Routing</h2>
+
+<p>TAU is basically a UI framework, but since its purpose is to ease application building, it also provides basic functionality for changing pages in multi-page applications. The mechanics behind page routing are simple, and work without any additional JavaScript code. You can use the JavaScript API to get more powerful page routing functionalities.</p>
+
+<p>To manage page routing:</p>
+
+<ul>
+<li>To route without JavaScript:
+<p>TAU routing is based on URL hash changes, and it has a built-in mechanism for history tracking. The framework responds to <span style="font-family: Courier New,Courier,monospace">#hashtag</span> changes and tries to display the page that has the <span style="font-family: Courier New,Courier,monospace">id</span> attribute equal to the hashtag value. This approach works for pages defined inside the same HTML document.</p>
+<p>TAU uses every <span style="font-family: Courier New,Courier,monospace">&lt;a&gt;</span> element in the page and binds routing methods for them. In addition, all button instances that are based on that tag and have a proper <span style="font-family: Courier New,Courier,monospace">href</span> attribute work with the framework router. The active page has a <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class assigned. Set that class yourself to be sure the correct page is displayed.</p>
+<pre class="prettyprint">&lt;!--pageOne.html--&gt;
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;pageTwo.html&quot;&gt;Go to page two&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!--pageTwo.html--&gt;
+&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;pageOne.html&quot;&gt;Go to page one&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<p>With multiple pages in one HTML code, you can use only the ID of the page in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#two&quot;&gt;Go to page two&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#first&quot;&gt;Go to page one&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li>To route using the API:
+<p>You can change pages through the TAU API by using the <span style="font-family: Courier New,Courier,monospace">tau.changePage()</span> method:</p>
+<pre class="prettyprint">&lt;!--pageTwo.html--&gt;
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;You are viewing the first page of the example.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;first-button&quot;&gt;Click here to change to page two&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var el1 = document.getElementById(&quot;first-button&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el1.addEventListener(&quot;click&quot;, function ()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(&quot;pageTwo.html&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+
+&lt;!--pageTwo.html--&gt;
+&lt;div class=&quot;ui-page&quot; id=&quot;second&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the second page of the example.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;second-button&quot;&gt;Click here to change to page one&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var el2 = document.getElementById(&quot;second-button&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el2.addEventListener(&quot;click&quot;, function ()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(&quot;pageOne.html&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>To load pages from external resources:
+<p>When an external page is supplied to the routing engine, TAU fetches that page and appends it to the current document, while changing the <span style="font-family: Courier New,Courier,monospace">base</span> element&#39;s <span style="font-family: Courier New,Courier,monospace">href</span> attribute to that page path. This ensures that all other resources, such as CSS, JS, or images, are loaded from the correct path without no real page reloads. Instead, TAU simply switches the current page to the new page.</p>
+<p>To load pages from external resources, define the proper local address in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute of the link:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;external_text.html&quot;&gt;Change to external&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<p>To create an external link that is not supposed to be handled by the TAU router, use the <span style="font-family: Courier New,Courier,monospace">rel=&quot;external&quot;</span>, <span style="font-family: Courier New,Courier,monospace">data-ajax=&quot;false&quot;</span>, or <span style="font-family: Courier New,Courier,monospace">target=&quot;_self&quot;</span> attribute:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;external_text.html&quot; target=&quot;_self&quot;&gt;Change to external&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+</ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/moreoptions_ww.htm b/org.tizen.ui.practices/html/web/tau/moreoptions_ww.htm
new file mode 100644
index 0000000..f25dbc1
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/moreoptions_ww.htm
@@ -0,0 +1,184 @@
+<!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>Implementing More Options</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+		<div id="profile">
+				<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+		</div>
+
+		<div id="toc_border"><div id="toc">
+				<p class="toc-title">Related Info</p>
+				<ul class="toc">
+					<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>Implementing More Options</h1>
+
+
+<p>In a rectangular UI, you can implement more options using the button and popup components. In a circular UI, the selector component provides the more options button. The following example shows how to create a more options button for the circular UI.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The following figure shows the more options component in a rectangular and circular UI.</p>
+<p class="figure">Figure: More options component in rectangular and circular devices</p>
+<p align="center"><img alt="More options component in a rectangular device" src="../../images/rectangular_moreoption.png" /> <img alt="More options component in a circular device" src="../../images/round_moreoption.png" /></p>
+
+<p>To implement the more options component:</p>
+<ol>
+
+<li>Edit the HTML code to add the more options component to your application screen:
+<pre class="prettyprint">&lt;div&nbsp;id=&quot;moreoptionsPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;&nbsp;href=&quot;./moreoptions.css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&nbsp;ui-has-more&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;More&nbsp;Options&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;ui-more&nbsp;ui-icon-overflow&quot;&gt;More&nbsp;Options&lt;/button&gt;
+&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;!--&nbsp;Rectangular&nbsp;profile&nbsp;--&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;moreoptionsPopup&quot;&nbsp;class=&quot;ui-popup&quot;&nbsp;data-transition=&quot;slideup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-popup-header&quot;&gt;Options&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-popup-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;class=&quot;ui-listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;Circular&nbsp;profile&nbsp;--&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;moreoptionsDrawer&quot;&nbsp;class=&quot;ui-drawer&quot;&nbsp;data-drawer-target=&quot;#moreoptionsPage&quot;&nbsp;data-position=&quot;right&quot;&nbsp;data-enable=&quot;true&quot;&nbsp;data-drag-edge=&quot;1&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;selector&quot;&nbsp;class=&quot;ui-selector&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;show-icon&quot;&nbsp;data-title=&quot;Show&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;human-icon&quot;&nbsp;data-title=&quot;Human&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;delete-icon&quot;&nbsp;data-title=&quot;Delete&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;show-icon&quot;&nbsp;data-title=&quot;Show&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;human-icon&quot;&nbsp;data-title=&quot;Human&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;delete-icon&quot;&nbsp;data-title=&quot;Delete&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;x-icon&quot;&nbsp;data-title=&quot;X&nbsp;Icon&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;fail-icon&quot;&nbsp;data-title=&quot;Fail&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;show-icon&quot;&nbsp;data-title=&quot;Show&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;human-icon&quot;&nbsp;data-title=&quot;Human&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;delete-icon&quot;&nbsp;data-title=&quot;Delete&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;show-icon&quot;&nbsp;data-title=&quot;Show&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-item&nbsp;human-icon&quot;&nbsp;data-title=&quot;Human&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set the visual style of the buttons:
+
+<pre class="prettyprint">
+#moreoptionsDrawer
+{
+&nbsp;&nbsp;&nbsp;display:&nbsp;none;
+}
+
+@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;&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()
+{
+&nbsp;&nbsp;&nbsp;var&nbsp;page&nbsp;=&nbsp;document.querySelector(&quot;#moreoptionsPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup&nbsp;=&nbsp;page.querySelector(&quot;#moreoptionsPopup&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler&nbsp;=&nbsp;page.querySelector(&quot;.ui-more&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer&nbsp;=&nbsp;page.querySelector(&quot;#moreoptionsDrawer&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selector&nbsp;=&nbsp;page.querySelector(&quot;#selector&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helper,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clickHandlerBound;
+
+&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(&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(&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helper.destroy();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&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.ui.practices/html/web/tau/notepad_w.htm b/org.tizen.ui.practices/html/web/tau/notepad_w.htm
new file mode 100644
index 0000000..0c94eb8
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/notepad_w.htm
@@ -0,0 +1,448 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Creating a Notepad UI Application</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.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>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>
+
+<p>To create a simple notepad application using the TAU library:</p>
+
+<ol>
+<li>Generate an application from the Tizen SDK.
+<p>Create a simple basic application that can be used for further development:</p>
+<ol type="a"><li>In the IDE menu, go to
+	<strong>File &gt; New &gt; Tizen Web Project &gt; WEARABLE-2.4 &gt; Wearable UI &gt; Basic Application</strong>.</li>
+	<li>Enter the application name as <strong>Notes</strong> and click <strong>Finish</strong>.</li></ol>
+<p>The IDE creates the application with a default file structure.</p>
+</li>
+<li>Edit the section header for the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
+<p>Because the application runs on mobile or wearable devices, make sure that you have the correct <span style="font-family: Courier New,Courier,monospace">tau.css</span> styles for the corresponding profile:</p>
+<ul><li>Mobile:
+	<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/mobile/theme/default/tau.min.css&quot;/&gt;</pre></li>
+	<li>Wearable:
+		<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/wearable/theme/default/tau.min.css&quot;/&gt;</pre>
+	</li></ul>
+<p>Add also your own styles for the application:</p>
+<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
+</pre>
+
+<p>The following example shows how the section header looks after editing:</p>
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;description&quot; content=&quot;Tizen basic template generated by Tizen Web IDE&quot;/&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;title&gt;Notepad&lt;/title&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;!--Use &#39;mobile&#39; or &#39;wearable&#39; to choose the device TAU profile--&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/mobile/theme/default/tau.css&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
+&lt;/head&gt;</pre>
+</li>
+<li>Create the pages: the main page for displaying the notes and the editing page for adding and editing notes.
+<ol type="a">
+<li>The main page is the first page, defined with the <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class and <span style="font-family: Courier New,Courier,monospace">main</span> id.
+	<ol type="a"><li>Add the title header (<strong>Notes</strong>) for the page:
+<pre class="prettyprint">
+&lt;div id=&quot;main&quot; class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notes&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&lt;/div&gt;
+</pre></li>
+		<li>Add content for the main page by adding a <span style="font-family: Courier New,Courier,monospace">div</span> element with
+			the <span style="font-family: Courier New,Courier,monospace">_ui-content</span> class. Add to this a <span style="font-family: Courier New,Courier,monospace">ul</span> element, which creates the list of notes.
+			<p>Set the <span style="font-family: Courier New,Courier,monospace">data-scroll=&quot;y&quot;</span> and <span style="font-family: Courier New,Courier,monospace">data-handler=&quot;true&quot;</span> attributes.</p>
+			<p>The item in the list is represented as a <span style="font-family: Courier New,Courier,monospace">li</span> element. When a note on the main page is clicked, the application triggers the <span style="font-family: Courier New,Courier,monospace">changepage</span> event to the <span style="font-family: Courier New,Courier,monospace">editor</span> page and shows the item.</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-content&quot; data-scroll=&quot;y&quot; data-handler=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;notesList&quot;&gt;&lt;/ul&gt;
+&lt;/div&gt;
+</pre></li>
+		<li>Add a navigation button to the application to change to the editor page. The button is placed in the footer, and it is created from an <span style="font-family: Courier New,Courier,monospace">a</span> element,
+			which has the <span style="font-family: Courier New,Courier,monospace">id=&quot;newBtn&quot;</span> attribute.
+<pre class="prettyprint">
+&lt;div class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
+&lt;/div&gt;
+</pre></li></ol>
+	<p>The above examples apply to a wearable application. The following example shows the full code for the main page in a mobile application:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notes&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot; data-scroll=&quot;y&quot; data-handler=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;notesList&quot;&gt;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+	<table class="note">
+		<tbody>
+		<tr>
+			<th class="note">Note</th>
+		</tr>
+		<tr>
+			<td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td>
+		</tr>
+		</tbody>
+	</table>
+</li>
+
+<li>On the editing page, the header and footer are similar to the main page.
+<p> The only difference is that the action triggered after pressing the button adds an item to the items array and adds the item to the top of the visible list. The editing page is defined with a <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">id=&quot;editor&quot;</span> and <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-page&quot;</span> attributes.</p>
+<p>The editing page is needed for adding or editing a selected note. It has a <span style="font-family: Courier New,Courier,monospace">textarea</span> element to allow the user to edit the selected note.</p>
+
+<pre class="prettyprint">
+&lt;!--This code applies to wearable applications--&gt;
+&lt;div class=&quot;ui-page&quot; id=&quot;editor&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Editor&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea id=&quot;editorField&quot; placeholder=&quot;enter note&quot;&gt;&lt;/textarea&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;javascript:void()&quot; id=&quot;saveBtn&quot;&gt;Save&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></li></ol></li>
+
+<li>Link to the TAU library sources and add the script to the application:
+<pre class="prettyprint">
+&lt;script src=&quot;lib/jquery.js&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/mobile/js/tau.js&quot; data-build-remove=&quot;false&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">index.html</span> file is now ready.</p>
+</li>
+
+<li>Add styles for the content:
+<pre class="prettyprint">
+a
+{
+&nbsp;&nbsp;&nbsp;color: #FFF;
+}
+
+#notesList.ui-listview
+{
+&nbsp;&nbsp;&nbsp;width: 100%;
+}
+
+#notesList.ui-listview li
+{
+&nbsp;&nbsp;&nbsp;margin: 0;
+&nbsp;&nbsp;&nbsp;white-space: nowrap;
+}
+
+#notesList.ui-listview li .ui-inline
+{
+&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;right: 5px;
+&nbsp;&nbsp;&nbsp;top: 5px;
+}
+
+#notesList.ui-listview li .ui-swipe-item-cover-inner
+{
+&nbsp;&nbsp;&nbsp;text-overflow: ellipsis;
+&nbsp;&nbsp;&nbsp;overflow: hidden;
+}
+
+#editor .ui-scrollview-view
+{
+&nbsp;&nbsp;&nbsp;height: 100%;
+}
+
+#editor textarea
+{
+&nbsp;&nbsp;&nbsp;height: 95%;
+&nbsp;&nbsp;&nbsp;width: 100%;
+}
+</pre>
+</li>
+<li>Create the <span style="font-family: Courier New,Courier,monospace">main.js</span> file and create a function to close the application.
+<p>The application is started when the HTML content is ready.</p>
+<pre class="prettyprint">
+document.addEventListener(&quot;DOMContentLoaded&quot;, function ()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var newBtn = document.getElementById(&#39;newBtn&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveBtn = document.getElementById(&#39;saveBtn&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField = document.getElementById(&#39;editorField&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList = document.getElementById(&#39;notesList&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPage = document.getElementById(&#39;editor&#39;),
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mainPageId = &#39;#main&#39;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPageId = &#39;#editor&#39;,
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = null,
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EMPTY_CONTENT = &#39;(empty)&#39;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STORAGE_KEY = &#39;notepad&#39;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Get data from local storage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @return {Array}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getStorage(key)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return JSON.parse(window.localStorage.getItem(key)) || false;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Add data to local storage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @param {Array} data
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function addStorage(data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Return current page ID
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @returns
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getCurrentPageId()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return $(&#39;.ui-page:visible&#39;)[0].id;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Refresh current page */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function refreshCurrentPage()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#&#39; + getCurrentPageId()).trigger(&#39;create&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Get notes from storage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @return {Array}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getNotes()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return getStorage(STORAGE_KEY) || [];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clear list with notes */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function clearNotesList()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList.innerHTML = &#39;&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete note from storage */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function deleteNote(index)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (notes[index] !== undefined)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes.splice(index, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addStorage(notes);
+&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;console.error(&#39;deleteNote: note not found&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshCurrentPage();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Edit note using array index
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @param index
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function editNote(index)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (notes[index] !== undefined)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = index;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.value = getNotes()[index];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(editorPageId);
+&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;console.error(&#39;editNote: note not found&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshCurrentPage();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show all notes extracted from local storage */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function showNotes()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes(),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesLen = notes.length,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeCover = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeItem = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearNotesList();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i; i &lt; notesLen; i += 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li = document.createElement(&#39;li&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.addEventListener(&#39;click&#39;, editNote.bind(this, i), false);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn = document.createElement(&#39;button&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.className(&#39;ui-btn&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.setAttribute(&#39;data-inline&#39;, &#39;true&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.innerText = &#39;Delete&#39;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.addEventListener(&#39;click&#39;, deleteNote.bind(this, i), false);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.innerText = notes[i].replace(/\n/g, &#39; &#39;) || EMPTY_CONTENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.appendChild(deleteBtn);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList.appendChild(li);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst = tau.widget.getInstance(notesList);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.Button(deleteBtn);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst.refresh();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clear editor textarea */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function clearEditor()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.value = &#39;&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save note to storage */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function saveNote()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (currentIndex !== null)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes[currentIndex] = editorField.value;
+&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;notes.push(editorField.value);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addStorage(notes);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearEditor();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(mainPageId);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New note button handler */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function newNote()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearEditor();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(editorPageId);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* On editor page show handler */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function onEditorPageShow()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.focus();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Attach events */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function events()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newBtn.addEventListener(&#39;click&#39;, newNote);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveBtn.addEventListener(&#39;click&#39;, saveNote);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPage.addEventListener(&#39;pageshow&#39;, onEditorPageShow);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function (e)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.keyName === &quot;back&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; window.tizen
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; window.tizen.application)
+&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;switch (getCurrentPageId())
+&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;case &#39;main&#39;:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.tizen.application.getCurrentApplication().exit();
+&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;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
+&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function init()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;events();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init();
+&nbsp;&nbsp;&nbsp;}, false);
+</pre>
+<p>Now the application is ready and you can deploy it to a device or Emulator.</p>
+</li>
+</ol>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/popup_ww.htm b/org.tizen.ui.practices/html/web/tau/popup_ww.htm
new file mode 100644
index 0000000..95c2ce5
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/popup_ww.htm
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+	<title>Creating Popup Buttons</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_popup.htm">Popup API for Wearable Web</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Popup Buttons</h1>
+
+<p>You can create bottom and side popup button components with the Popup API.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The following figures show the layout of the popup component in a rectangular and circular UI.</p>
+
+<p class="figure">Figure: Bottom popup component in rectangular and circular devices</p>
+
+<p align="center"><img alt="Bottom popup in a rectangular device" src="../../images/rectangular_popup_bottom.png"/> <img alt="Bottom popup in a circular device" src="../../images/round_popup_bottom.png"/></p>
+
+<p class="figure">Figure: Side popup component in rectangular and circular devices</p>
+
+<p align="center"><img alt="Side popup component in a rectangular device" src="../../images/rectangular_popup_side.png"/> <img alt="Side popup component in a circular device" src="../../images/round_popup_side.png"/></p>
+
+<p>To implement the popup button component:</p>
+
+<ul>
+<li>To implement a bottom popup button component:
+
+<p>Edit the HTML code to add the bottom popup button component to your application screen. To add the bottom button to the circular UI, you must add the <span style="font-family: Courier New,Courier,monospace">ui-bottom-button</span> class to the popup footer. The popup can have only 1 bottom button.</p>
+<pre class="prettyprint">
+&lt;div id=&quot;bottomBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Turning on Power
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saving mode will
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit the maximum
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;power
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-bottom-button&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;bottomBtn&quot; class=&quot;ui-btn&quot;&gt;Check&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>To implement a side popup button component: 
+<p>Edit the HTML code to add the side popup button component to your application screen. To add side buttons for the circular UI, you must add the <span style="font-family: Courier New,Courier,monospace">ui-side-button</span> class to the popup footer. The popup can have only 2 side buttons.</p>
+<pre class="prettyprint">
+&lt;style&gt;
+&nbsp;&nbsp;&nbsp;.btn-icon-cancel::before {-webkit-mask-image: url(./cancel.png)}
+&nbsp;&nbsp;&nbsp;.btn-icon-ok::before {-webkit-mask-image: url(./ok.png)}
+&lt;/style&gt;
+&lt;div id=&quot;sideBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Turning on Power
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saving mode will
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit the maximum
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;power
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-grid-col-2 ui-side-button&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;sideBtn-1&quot; class=&quot;ui-btn btn-icon-cancel&quot;&gt;Cancel&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;sideBtn-2&quot; class=&quot;ui-btn btn-icon-ok&quot;&gt;OK&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+</ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/processing_ww.htm b/org.tizen.ui.practices/html/web/tau/processing_ww.htm
new file mode 100644
index 0000000..a9bfff7
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/processing_ww.htm
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+	<title>Creating Full Size Processing Components</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_processing.htm">Processing API for Wearable Web</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Full Size Processing Components</h1>
+
+<p>You can create a full size processing component with the Processing API.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The following figure shows the layout of the processing component in a rectangular and circular UI.</p>
+<p class="figure">Figure: Processing component in rectangular and circular devices</p>
+
+	<p align="center"><img alt="Processing component in a rectangular device" src="../../images/rectangular_processing.png" /> <img alt="Processing component in a circular device" src="../../images/round_processing.png" /></p>
+		
+<p>To implement the processing component:</p>
+<ol>
+<li>Edit the HTML code to add the processing component to your application screen:
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageProcessing&quot; data-enable-page-scroll=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Processing&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing-text&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Description about progress
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing ui-processing-full-size&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set the visual style of the processing component:
+<pre class="prettyprint">
+.ui-processing-full-size 
+{
+&nbsp;&nbsp;&nbsp;display: none;
+}
+
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;.ui-processing 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.ui-processing.ui-processing-full-size 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block;
+&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.ui.practices/html/web/tau/tau_porting_w.htm b/org.tizen.ui.practices/html/web/tau/tau_porting_w.htm
new file mode 100644
index 0000000..a78c928
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/tau_porting_w.htm
@@ -0,0 +1,817 @@
+<!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>2.4 Porting Guide: Changed APIs in 2.4 TAU</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#notice">Backward Compatibility in TAU</a></li>
+            <li><a href="#selector">Component Definitions</a></li>
+            <li><a href="#newcom">New Components in 2.4</a></li>
+            <li><a href="#deprecated">Deprecated Components</a></li>
+            <li><a href="#event">Event Handling</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">UI Component API Reference for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm">UI Component API Reference for Wearable Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Gesture_Events/gesture.htm">Gesture Events API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>2.4 Porting Guide: Changed APIs in 2.4 TAU</h1>
+
+<p>This guide describes the changes required to migrate a TAU element from 2.3 to 2.4.</p>
+
+<p>As the Tizen version number changes, TAU has been updated with new features. When migrating from 2.3 to 2.4, consider the following issues:</p>
+<ul>
+<li>Selectors for defining the UI components</li>
+<li>New and deprecated components in 2.4</li>
+<li>Gesture event handling</li>
+</ul>
+
+<h2 id="notice">Backward Compatibility in TAU</h2>
+
+<p>To support backward compatibility, TAU provides the <span style="font-family: Courier New,Courier,monospace;">tau.support-2.3.js</span> and <span style="font-family: Courier New,Courier,monospace;">tau.support-2.3.css</span> files.</p>
+<p>If you want to use deprecated components, you can import those files. See the following example:</p>
+
+<pre class="prettyprint">
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;../lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;../lib/tau/mobile/js/tau.support-2.3.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;&nbsp;href=&quot;../lib/tau/mobile/theme/default/tau.css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;&nbsp;href=&quot;../lib/tau/mobile/theme/default/tau.support-2.3.css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;&nbsp;href=&quot;css/custom.css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&lt;/html&gt;
+</pre>
+
+
+    <table class="note">
+        <tbody>
+        <tr>
+            <th class="note" colspan="1" rowspan="1">Note</th>
+        </tr>
+        <tr>
+            <td class="note" colspan="1" rowspan="1">The <span style="font-family: Courier New,Courier,monospace;">tau.support-2.3</span> file is only for backward compatibility. The above components are <strong>DEPRECATED since Tizen 2.4</strong> and are deleted in Tizen 3.0.</td>
+        </tr>
+        </tbody>
+    </table>
+
+<h2 id="selector">Component Definitions</h2>
+
+<p>Since Tizen 2.4, it is strongly recommended to use the <span style="font-family: Courier New,Courier,monospace;">class</span> selector to define the components in HTML files. The <span style="font-family: Courier New,Courier,monospace;">&quot;data-role&quot;</span> selector has been deprecated and is no longer supported.</p>
+
+<p>The class selectors in TAU are composed with the <span style="font-family: Courier New,Courier,monospace;">&quot;ui-&quot;</span> prefix and followed by the <span style="font-family: Courier New,Courier,monospace;">&lt;COMPONENT_NAME&gt;</span>. For more information, see the UI Component API Reference (in <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/wearable_UIComponents/wearable_component_list.htm">wearable</a> applications).</p>
+<p>The following example shows how to define the UI components before and after:</p>
+<ul>
+<li>Before:
+
+<pre class="prettyprint">
+&lt;!--&nbsp;Create&nbsp;Expandable&nbsp;component&nbsp;--&gt;
+&lt;div&nbsp;data-role=&quot;expandable&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable&nbsp;head&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!--&nbsp;Create&nbsp;ToggleSwitch&nbsp;component&nbsp;--&gt;
+&lt;select&nbsp;data-role=&quot;toggleswitch&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;off&quot;&gt;&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;on&quot;&gt;&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;!--&nbsp;Create&nbsp;SectionChanger&nbsp;component&nbsp;--&gt;
+&lt;div&nbsp;data-role=&quot;section-changer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    <table class="note">
+        <tbody>
+        <tr>
+            <th class="note" colspan="1" rowspan="1">Note</th>
+        </tr>
+        <tr>
+            <td class="note" colspan="1" rowspan="1">The old selector with <span style="font-family: Courier New,Courier,monospace;">data-role</span> can still be used in 2.4, but it is <strong>DEPRECATED</strong> and no longer supported in the next version.</td>
+        </tr>
+        </tbody>
+    </table>
+</li>
+<li>After:
+<pre class="prettyprint">
+&lt;!--&nbsp;Create&nbsp;Expandable&nbsp;component&nbsp;--&gt;
+&lt;div&nbsp;class=&quot;ui-expandable&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable&nbsp;head&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!--&nbsp;Create&nbsp;ToggleSwitch&nbsp;component&nbsp;--&gt;
+&lt;select&nbsp;class=&quot;ui-toggleswitch&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;off&quot;&gt;&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;on&quot;&gt;&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;!--&nbsp;Create&nbsp;SectionChanger&nbsp;component&nbsp;--&gt;
+&lt;div&nbsp;class=&quot;ui-section-changer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+</ul>
+
+
+
+<h2 id="newcom">New Components in 2.4</h2>
+
+<p>Some new mobile components are added in TAU since 2.4. Some are renamed from old components (such as Checkbox and Radio) and others are newly added with a new feature and theme (such as Colored ListView). The following table shows the new TAU components in 2.4.</p>
+<p>For more information, see the <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile UI Component API Reference</a>.</p>
+
+    <table border="1">
+        <caption>Table: New TAU mobile components in 2.4</caption>
+        <tbody>
+        <tr>
+            <th>UI component</th>
+            <th>Description</th>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Checkbox.htm">Checkbox</a></td>
+            <td>The checkbox component changes the default browser checkboxes to a form more adapted to the mobile environment.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_ColoredListview.htm">Colored List View</a></td>
+            <td>The colored list view component shows each list item with a gradient background color.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_DropdownMenu.htm">Dropdown Menu</a></td>
+            <td>The dropdown menu component is used to select one option. It is created as a drop-down list form.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Expandable.htm">Expandable</a></td>
+            <td>The expandable component allows you to expand or collapse content when tapped.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_FloatingActions.htm">Floating Actions</a></td>
+            <td>The floating actions component shows a floating action button that can be moved left and right.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_GridView.htm">Grid View</a></td>
+            <td>The grid view component provides a grid-type list and presents content that are easily identified as images.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_IndexScrollBar.htm">Index Scrollbar</a></td>
+            <td>The index scrollbar component shows a shortcut list that is bound to its parent scrollbar and list view.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_PageIndicator.htm">Page Indicator</a></td>
+            <td>The page indicator component presents as a dot-typed indicator.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_PanelChanger.htm">Panel Changer</a></td>
+            <td>The panel changer and panel component provide a multi-page layout in a page component.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Radio.htm">Radio</a></td>
+            <td>The radio component changes the default browser radio button to a form more adapted to the mobile environment.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_SearchInput.htm">Search Input</a></td>
+            <td>The search input component is used to search for page content.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_SectionChanger.htm">Section Changer</a></td>
+            <td>The section changer component provides an application architecture, which has multiple sections on one page.</td>
+        </tr>
+
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Tabs.htm">Tabs</a></td>
+            <td>The tabs component shows an unordered list of buttons on the screen wrapped together in a single group.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_TextEnveloper.htm">Text Enveloper</a></td>
+            <td>The text enveloper component changes a text item to a button.</td>
+        </tr>
+
+        </tbody>
+    </table>
+
+
+<h2 id="deprecated">Deprecated Components</h2>
+
+<p>Some mobile components are deprecated and no longer supported since 2.4. Instead of using deprecated components, see the following table and replace the components by new components or an HTML element.</p>
+    <p>For more information on deprecated components, see the <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile Component API Reference</a>.</p>
+
+    <table border="1">
+        <caption>Table: Deprecated TAU mobile components</caption>
+        <tbody>
+        <tr>
+            <th>UI component</th>
+            <th>Replace with</th>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Autodividers.htm">Autodividers</a></td>
+            <td>-</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Checkboxradio.htm">CheckboxRadio</a></td>
+            <td>Checkbox component for the checkbox, radio component for the radio button.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Collapsible.htm">Collapsible</a></td>
+            <td>Expandable component.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Controlgroup.htm">ControlGroup</a></td>
+            <td>Implement your own customized application style.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_FastScroll.htm">Fast Scroll</a></td>
+            <td>Index scrollbar component.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Gallery.htm">Gallery</a></td>
+            <td>Implement your own gallery with the section changer component.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_ListDivider.htm">List Divider</a></td>
+            <td>Use the <span style="font-family: Courier New,Courier,monospace;">ui-group-index</span> class for a group index.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Notification.htm">Notification</a></td>
+            <td>Popup component with the <span style="font-family: Courier New,Courier,monospace;">ui-popup-toast</span> class.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_ProgressBar.htm">Progress Bar</a></td>
+            <td>Progress component with the <span style="font-family: Courier New,Courier,monospace;">data-type=&quot;bar&quot;</span> option.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_ScrollHandler.htm">Scroll Handler</a></td>
+            <td>-</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_SearchBar.htm">Search Bar</a></td>
+            <td>Search input component.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_SelectMenu.htm">Select Menu</a></td>
+            <td>Dropdown menu component.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Swipe.htm">Swipe</a></td>
+            <td>-</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_TabBar.htm">Tab Bar</a></td>
+            <td>Tabs component.</td>
+        </tr>
+
+        <tr>
+            <td><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_Tokentextarea.htm">Token Text Area</a></td>
+            <td>Text enveloper component.</td>
+        </tr>
+
+        </tbody>
+    </table>
+
+    <p>If your application used the above deprecated components, see the following examples for successful migration:</p>
+    <ul>
+        <li><strong>CheckboxRadio</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;checkbox-1&quot;&nbsp;id=&quot;checkbox-1&quot;/&gt;
+&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;radio-1&quot;&nbsp;id=&quot;radio-1&quot;/&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;element1&nbsp;=&nbsp;document.getElementById(&quot;checkbox-1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element2&nbsp;=&nbsp;document.getElementById(&quot;radio-1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkboxWidget&nbsp;=&nbsp;tau.widget.Checkboxradio(element1),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioWidget&nbsp;=&nbsp;tau.widget.Checkboxradio(element2);
+
+&nbsp;&nbsp;&nbsp;checkboxWidget.enable();
+&nbsp;&nbsp;&nbsp;radioWidget.disable();
+&lt;/script&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;checkbox-1&quot;&nbsp;id=&quot;checkbox-1&quot;/&gt;
+&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;radio-1&quot;&nbsp;id=&quot;radio-1&quot;/&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;element1&nbsp;=&nbsp;document.getElementById(&quot;checkbox-1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element2&nbsp;=&nbsp;document.getElementById(&quot;radio-1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkboxWidget&nbsp;=&nbsp;tau.widget.Checkbox(element1),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioWidget&nbsp;=&nbsp;tau.widget.Radio(element2);
+
+&nbsp;&nbsp;&nbsp;checkboxWidget.enable();
+&nbsp;&nbsp;&nbsp;radioWidget.disable();
+&lt;/script&gt;
+</pre>
+        </li>
+        <li><strong>Collapsible</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;ul&nbsp;data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&nbsp;id=&quot;collapsible&quot;&nbsp;data-role=&quot;collapsible&quot;&nbsp;data-inset=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Collapsible&nbsp;head&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Sub&nbsp;list&nbsp;in&nbsp;collapsible&nbsp;li--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;sub&nbsp;list&nbsp;item1&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;sub&nbsp;list&nbsp;item2&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;!--List&nbsp;item&nbsp;in&nbsp;1st&nbsp;depth--&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;other&nbsp;list&nbsp;item&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;other&nbsp;list&nbsp;item&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;collapsibleElement&nbsp;=&nbsp;document.getElementById(&quot;collapsible&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsible&nbsp;=&nbsp;tau.widget.Collapsible(collapsibleElement);l
+&lt;/script&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;id=&quot;expandable&quot;&nbsp;class=&quot;ui-expandable&quot;&nbsp;data-collapsed=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable&nbsp;head&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;expandableEl&nbsp;=&nbsp;document.getElementById(&quot;expandable&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expandableWidget&nbsp;=&nbsp;tau.widget.Expandable(expandableEl);
+&lt;/script&gt;
+</pre>
+        </li>
+        <li><strong>Fast Scroll</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;data-role=&quot;page&quot;&nbsp;id=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;id=&quot;list&quot;&nbsp;data-role=&quot;listview&quot;&nbsp;data-fastscroll=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;data-role=&quot;list-divider&quot;&gt;A&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Anton&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Arabella&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;data-role=&quot;list-divider&quot;&gt;B&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Barry&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Bily&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;fastscroll&nbsp;=&nbsp;tau.widget.FastScroll(document.getElementById(&quot;list&quot;));
+&lt;/script&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;indexscrollbarPage&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-indexscrollbar&quot;&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;class=&quot;ui-listview&quot;&nbsp;id=&quot;isbList&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-group-index&quot;&gt;A&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-li-static&quot;&gt;Anton&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-li-static&quot;&gt;Arabella&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-group-index&quot;&gt;B&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-li-static&quot;&gt;Barry&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-li-static&quot;&gt;Bibi&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;isb&nbsp;=&nbsp;tau.widget.IndexScrollbar(document.getElementById(&quot;indexscrollbar&quot;));
+&lt;/script&gt;
+</pre>
+        </li>
+
+        <li><strong>Gallery</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;data-role=&quot;content&quot;&nbsp;data-scroll=&quot;none&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;data-role=&quot;gallery&quot;&nbsp;id=&quot;gallery&quot;&nbsp;data-vertical-align=&quot;middle&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;galleryWidget&nbsp;=&nbsp;tau.widget.Gallery(document.getElementById(&quot;gallery&quot;));
+
+&nbsp;&nbsp;&nbsp;galleryWidget.add(&quot;./images/01.jpg&quot;);
+&nbsp;&nbsp;&nbsp;galleryWidget.add(&quot;./images/02.jpg&quot;);
+&nbsp;&nbsp;&nbsp;galleryWidget.add(&quot;./images/03.jpg&quot;);
+&nbsp;&nbsp;&nbsp;galleryWidget.refresh(1);
+&lt;/script&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;id=&quot;gallerySection&quot;&nbsp;class=&quot;ui-content&nbsp;ui-section-changer&quot;&nbsp;data-orientation=&quot;horizontal&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;gallery-section&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src=&quot;images/01.jpg&quot;&nbsp;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;gallery-section&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src=&quot;images/02.jpg&quot;&nbsp;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;sectionChangerElement&nbsp;=&nbsp;document.getElementById(&quot;gallerySection&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget&nbsp;=&nbsp;tau.widget.SectionChanger(sectionChangerElement),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newSectionElement&nbsp;=&nbsp;document.createElement(&quot;section&quot;);
+
+&nbsp;&nbsp;&nbsp;newSectionElement.innerHTML&nbsp;=&nbsp;&quot;&lt;img&nbsp;src='images/03.jpg'&gt;&quot;;
+&nbsp;&nbsp;&nbsp;sectionsParentNode.appendChild(newSectionElement);
+&nbsp;&nbsp;&nbsp;sectionChangerWidget.refresh();
+&nbsp;&nbsp;&nbsp;sectionChangerWidget.setActiveSection(1);
+&lt;/script&gt;
+</pre>
+        </li>
+
+        <li><strong>List Divider</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;ul&nbsp;data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&nbsp;data-role=&quot;list-divider&quot;&gt;Item&nbsp;styles&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Normal&nbsp;lists&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Normal&nbsp;lists&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Normal&nbsp;lists&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;ul&nbsp;class=&quot;ui-listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-group-index&quot;&gt;Item&nbsp;styles&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-li-anchor&quot;&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Normal&nbsp;lists&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-li-anchor&quot;&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Normal&nbsp;lists&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=&quot;ui-li-anchor&quot;&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Normal&nbsp;lists&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+        </li>
+
+        <li><strong>Notification</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;data-role=&quot;page&quot;&nbsp;id=&quot;demo&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;data-role=&quot;notification&quot;&nbsp;id=&quot;notification&quot;&nbsp;data-type=&quot;popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Notification&nbsp;Demo&nbsp;TEST&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;data-role=&quot;header&quot;&nbsp;data-position=&quot;fixed&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notification&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;data-role=&quot;button&quot;&nbsp;id=&quot;noti-demo&quot;&gt;Show&nbsp;small&nbsp;popup&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;notification&nbsp;=&nbsp;tau.widget.Notification(document.getElementById(&quot;notification&quot;)),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buttonEl&nbsp;=&nbsp;document.getElementById(&quot;noti-demo&quot;);
+
+&nbsp;&nbsp;&nbsp;buttonEl.addEventListener(&quot;vclick&quot;,&nbsp;function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification.open();
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;data-role=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;a&nbsp;class=&quot;ui-btn&quot;&nbsp;id=&quot;open&quot;&nbsp;data-inline=&quot;true&quot;&gt;Button&lt;/a&gt;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;popup_toast&quot;&nbsp;data-role=&quot;popup&quot;&nbsp;class=&quot;ui-popup&nbsp;ui-popup-toast&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-popup-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Toast&nbsp;popup&nbsp;text&nbsp;Toast&nbsp;popup&nbsp;text
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;btn&nbsp;=&nbsp;document.getElementById(&quot;open&quot;);
+
+&nbsp;&nbsp;&nbsp;btn.addEventListener(&quot;vclick&quot;,&nbsp;function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.openPopup(&quot;#popup_toast&quot;);
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+        </li>
+
+        <li><strong>Progress Bar</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;data-role=&quot;progressbar&quot;&nbsp;id=&quot;progressbar&quot;&gt;&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;progressbarWidget&nbsp;=&nbsp;tau.widget.ProgressBar(document.getElementById(&quot;progressbar&quot;));
+
+&nbsp;&nbsp;&nbsp;progressbarWidget.value(30);
+&lt;/script&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;class=&quot;ui-progress&quot;&nbsp;data-type=&quot;bar&quot;&nbsp;id=&quot;progressbar&quot;&gt;&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;progressWidget&nbsp;=&nbsp;tau.widget.Progress(document.getElementById(&quot;progressbar&quot;));
+
+&nbsp;&nbsp;&nbsp;progressWidget.value(30);
+&lt;/script&gt;
+</pre>
+        </li>
+
+        <li><strong>Search Bar</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;input&nbsp;type=&quot;search&quot;&nbsp;name=&quot;search&quot;&nbsp;id=&quot;search-bar&quot;/&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;searchBarElement&nbsp;=&nbsp;document.getElementById(&quot;searchbar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchBarWidget&nbsp;=&nbsp;tau.widget.SearchBar(searchBarElement);
+
+&nbsp;&nbsp;&nbsp;value&nbsp;=&nbsp;searchBarWidget.disable();
+&lt;/script&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;input&nbsp;type=&quot;search&quot;&nbsp;id=&quot;search-test&quot;&nbsp;/&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;searchEl&nbsp;=&nbsp;document.getElementById(&quot;search-test&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchWidget&nbsp;=&nbsp;tau.widget.SearchInput(searchEl);
+
+&nbsp;&nbsp;&nbsp;searchInputWidget.disable();
+&lt;/script&gt;
+</pre>
+        </li>
+
+        <li><strong>Select Menu</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;select&nbsp;id=&quot;selectmenu&quot;&nbsp;data-native-menu=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1&quot;&gt;Item1&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2&quot;&gt;Item2&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;3&quot;&gt;Item3&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;4&quot;&gt;Item4&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;element&nbsp;=&nbsp;document.getElementById(&quot;selectmenu&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget&nbsp;=&nbsp;tau.widget.SelectMenu(element);
+
+&nbsp;&nbsp;&nbsp;widget.open();
+&lt;/script&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;select&nbsp;id=&quot;dropdownmenu&quot;&nbsp;data-native-menu=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1&quot;&gt;Item1&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2&quot;&gt;Item2&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;3&quot;&gt;Item3&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;4&quot;&gt;Item4&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;element&nbsp;=&nbsp;document.getElementById(&quot;dropdownmenu&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget&nbsp;=&nbsp;tau.widget.DropdownMenu(element);
+
+&nbsp;&nbsp;&nbsp;widget.open();
+&lt;/script&gt;
+</pre>
+        </li>
+
+        <li><strong>Tab Bar</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;data-role=&quot;header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;data-role=&quot;tabbar&quot;&nbsp;id=&quot;tab-bar&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Tabbar1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Tabbar2&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Tabbar3&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;tabBar&nbsp;=&nbsp;tau.widget.TabBar(document.getElementById(&quot;tab-bar&quot;));
+&lt;/script&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;!--&nbsp;Tabs&nbsp;component&nbsp;is&nbsp;composed&nbsp;with&nbsp;Tabbar&nbsp;and&nbsp;SectionChanger&nbsp;--&gt;
+&lt;div&nbsp;id=&quot;tabs&quot;&nbsp;class=&quot;ui-tabs&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-tabbar&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&nbsp;class=&quot;ui-btn-active&quot;&gt;Tab1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Tab2&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;Tab3&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Tab1&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Tab2&lt;/p&gt;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Tab3&lt;/p&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;tabsElement&nbsp;=&nbsp;document.getElementById(&quot;tabs&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tabs&nbsp;=&nbsp;tau.widget.Tabs(tabsElement);
+
+&nbsp;&nbsp;&nbsp;tabs.setIndex(1);
+&lt;/script&gt;
+</pre>
+        </li>
+
+        <li><strong>Token Text Area</strong>
+            <p>Before:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;data-role=&quot;tokentextarea&quot;&nbsp;id=&quot;tokentext&quot;&gt;&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;tokenWidget&nbsp;=&nbsp;tau.widget.TokenTextarea(document.getElementById(&quot;tokentext&quot;));
+
+&nbsp;&nbsp;&nbsp;tokenWidget.add(&quot;foobar&quot;);
+&lt;/script&gt;
+</pre>
+
+            <p>After:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;class=&quot;ui-text-enveloper&quot;&gt;&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;textEnveloperElement&nbsp;=&nbsp;document.getElementById(&quot;textenveloper&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textEnveloper&nbsp;=&nbsp;tau.component.TextEnveloper(textEnveloperElement);
+
+&nbsp;&nbsp;&nbsp;textEnveloper.add(&quot;hello&quot;);
+&lt;/script&gt;
+</pre>
+        </li>
+
+    </ul>
+
+
+<h2 id="event">Event Handling</h2>
+<p>Some events are changed. The following examples illustrate how to handle events:</p>
+<ul>
+    <li>Swipe event
+    <p>In the previous version, the <span style="font-family: Courier New,Courier,monospace;">swipe</span> event was triggered in every area in the page automatically, but since 2.4, for efficient trigger and handling, the <span style="font-family: Courier New,Courier,monospace;">swipe</span> event is only triggered when the Gesture event is created.</p>
+	<p>To enable the swipe event, use the <span style="font-family: Courier New,Courier,monospace;">enableGesture()</span> method. The following example shows how to enable the swipe event on the content area:</p>
+<pre class="prettyprint">
+&lt;!--&nbsp;HTML&nbsp;code&nbsp;--&gt;
+&lt;div&nbsp;class=&quot;ui-page&nbsp;ui-page-active&quot;&nbsp;id=&quot;pageSwipe&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;Swipe&nbsp;Event&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;content&quot;&nbsp;class=&quot;ui-content&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<pre class="prettyprint">
+(function()
+{
+&nbsp;&nbsp;&nbsp;var&nbsp;page&nbsp;=&nbsp;document.getElementById(&quot;pageSwipe&quot;);
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;,&nbsp;function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;content&nbsp;=&nbsp;document.getElementById(&quot;content&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.event.enableGesture(content,&nbsp;new&nbsp;tau.event.gesture.Swipe(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation:&nbsp;&quot;horizontal&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));
+&nbsp;&nbsp;&nbsp;});
+}());
+</pre>
+<p>When the <span style="font-family: Courier New,Courier,monospace;">swipe</span> event is enabled, the application can handle this event with some event detail data:</p>
+<pre class="prettyprint">
+(function()
+{
+&nbsp;&nbsp;&nbsp;var&nbsp;content&nbsp;=&nbsp;document.getElementById(&quot;content&quot;);
+
+&nbsp;&nbsp;&nbsp;content.addEventListener(&quot;swipe&quot;,&nbsp;function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;swipe&nbsp;direction&nbsp;=&nbsp;&quot;&nbsp;+&nbsp;e.detail.direction);
+&nbsp;&nbsp;&nbsp;});
+}());
+</pre>
+
+<p>For more information, see the <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Gesture_Events/gesture.htm">Gesture Event API</a>.</p>
+
+    </li>
+
+    <li>Tap event
+    <p>Since 2.4, the <span style="font-family: Courier New,Courier,monospace;">tap</span> event has been deprecated. Use the <span style="font-family: Courier New,Courier,monospace;">click</span> event instead.</p>
+	<p>If the application has one button in the content area:</p>
+<pre class="prettyprint">
+&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;a&nbsp;id=&quot;btn&quot;&nbsp;href=&quot;#&quot;&nbsp;class=&quot;ui-btn&quot;&gt;Click&nbsp;me&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+        <p>Before:</p>
+<pre class="prettyprint">
+var&nbsp;button&nbsp;=&nbsp;document.getElementById(&quot;btn&quot;);
+
+button.addEventListener(&quot;tap&quot;,&nbsp;eventHandler);
+</pre>
+
+    <p>After:</p>
+<pre class="prettyprint">
+var&nbsp;button&nbsp;=&nbsp;document.getElementById(&quot;btn&quot;);
+
+button.addEventListener(&quot;click&quot;,&nbsp;eventHandler);
+</pre>
+    </li>
+</ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/tau/thumbnail_ww.htm b/org.tizen.ui.practices/html/web/tau/thumbnail_ww.htm
new file mode 100644
index 0000000..06719e2
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/thumbnail_ww.htm
@@ -0,0 +1,158 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+	<title>Creating Thumbnails</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_sectionchanger.htm">SectionChanger API for Wearable Web</a></li>
+		</ul>
+	</div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Thumbnails</h1>
+
+<p>You can create a thumbnail component with the SectionChanger API.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>The following figure shows the layout of the thumbnail component in a rectangular and circular UI.</p>
+
+<p class="figure">Figure: Thumbnail component in rectangular and circular devices</p>
+
+<p align="center"><img alt="Thumbnail component in a rectangular device" src="../../images/rectangular_thumbnail.png" /> <img alt="Thumbnail component in a circular device" src="../../images/round_thumbnail.png" /></p>
+
+
+<p>To implement the thumbnail component:</p>
+<ol>
+<li>Edit the HTML code to add the thumbnail component to your application screen:
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;sectionChangerPage&quot; data-enable-page-scroll=&quot;false&quot; &gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;sectionChanger&quot; class=&quot;ui-content ui-section-changer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;scroller&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;ui-section-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;1&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;2&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;3&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set the visual style of the thumbnail:
+<pre class="prettyprint">
+section 
+{
+&nbsp;&nbsp;&nbsp;padding: 0 10px 0 10px;
+&nbsp;&nbsp;&nbsp;height: 100%;
+}
+.thumbnail 
+{
+&nbsp;&nbsp;&nbsp;height: 300px;
+&nbsp;&nbsp;&nbsp;width: 200px;
+&nbsp;&nbsp;&nbsp;background-color: #80482f;
+&nbsp;&nbsp;&nbsp;top: 50%;
+&nbsp;&nbsp;&nbsp;transform: translate3d(0, -50%, 0);
+&nbsp;&nbsp;&nbsp;position: relative;
+&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;line-height: 300px;
+}
+.ui-section-active .thumbnail
+{
+&nbsp;&nbsp;&nbsp;background-color: #000000;
+&nbsp;&nbsp;&nbsp;border: 1px solid #a06322;
+}
+
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;section 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.thumbnail 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 200px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #802532;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 200px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(0.8) translate3d(0, -60%, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: transform 300ms;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.ui-section-active .thumbnail
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(1) translate3d(0, -50%, 0);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Edit the JavaScript code to manage the thumbnail events and other functionalities:
+<pre class="prettyprint">
+(function()
+{
+&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;sectionChangerPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChanger = document.getElementById(&quot;sectionChanger&quot;);
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.SectionChanger(sectionChanger, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation: &quot;horizontal&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fillContent: false
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&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.ui.practices/html/web/tau/ui_component_w.htm b/org.tizen.ui.practices/html/web/tau/ui_component_w.htm
new file mode 100644
index 0000000..48fb58f
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/tau/ui_component_w.htm
@@ -0,0 +1,211 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>UI Components: Managing UI Components</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#creating">Defining UI Components</a></li>
+            <li><a href="#setoption">Setting UI Component Options</a></li>
+            <li><a href="#jquery">Managing UI Components with jQuery</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+           <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">UI Component API Reference for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm">UI Component API Reference for Wearable Web</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>UI Components: Managing UI Components</h1>
+
+
+<p>Each UI component in TAU has its own selector for autodetecting in an HTML file. The most popular selector is <span style="font-family: Courier New,Courier,monospace;">class</span>. The old selector style is the <span style="font-family: Courier New,Courier,monospace;">data-role</span>, which is deprecated. Some UI components have also simple HTML selectors, such as <span style="font-family: Courier New,Courier,monospace;">button</span> (button component), or <span style="font-family: Courier New,Courier,monospace;">input[type=checkbox]</span> (CheckboxRadio component).</p>
+
+
+<h2 id="creating">Defining UI Components</h2>
+
+<p>You can define UI components in 2 different ways using selectors:</p>
+<ul>
+<li>With a <span style="font-family: Courier New,Courier,monospace;">class</span> selector
+<p>It is recommended to use the <span style="font-family: Courier New,Courier,monospace;">class</span> selector for each component. Class selectors in TAU are composed with a <span style="font-family: Courier New,Courier,monospace;">ui-</span>prefix and &lt;COMPONENT_NAME&gt;.</p>
+<p>The following example shows the creation of some components with a <span style="font-family: Courier New,Courier,monospace;">class</span> selector:</p>
+<pre class="prettyprint">
+&lt;!--&nbsp;Create&nbsp;an Expandable&nbsp;component&nbsp;--&gt;
+&lt;div&nbsp;class=&quot;ui-expandable&quot;&nbsp;id=&quot;expandable-test&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable&nbsp;head&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!--&nbsp;Create&nbsp;a ToggleSwitch&nbsp;component&nbsp;--&gt;
+&lt;select&nbsp;class=&quot;ui-toggleswitch&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;off&quot;&gt;&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;on&quot;&gt;&lt;/option&gt;
+&lt;/select&gt;</pre>
+</li>
+<li>With a <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector
+<p>The <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector in TAU is composed with &lt;COMPONENT_NAME&gt; in lowercase.</p>
+<p>The following example shows the creation of some components with a <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector:</p>
+<pre class="prettyprint">
+&lt;!--&nbsp;Create&nbsp;a TextEnveloper&nbsp;component&nbsp;--&gt;
+&lt;div&nbsp;data-role=&quot;textenveloper&quot;&gt;&lt;/div&gt;
+
+&lt;!--&nbsp;Create&nbsp;a Drawer&nbsp;component&nbsp;--&gt;
+&lt;div&nbsp;data-role=&quot;drawer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;List&nbsp;item&nbsp;1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&lt;/div&gt;</pre>
+</li>
+</ul>
+
+<h2 id="setoption">Setting UI Component Options</h2>
+
+<p>TAU supports several ways of setting options for a UI component. For more information, see <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile UI Components</a> and <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm">Wearable UI Components</a>.</p>
+<p>To set the options:</p>
+<ul>
+<li>Initializing options with the <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute
+<p>Various options can be set with <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute when the component is being created. You can set options this way only when the component is created. After creating the component, changing the data attributes on the HTML element does not change the component options.</p>
+<p>The following example shows a SectionChanger code with a <span style="font-family: Courier New,Courier,monospace;">data-</span> option:</p>
+<pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;data-orientation=&quot;horizontal&quot;&nbsp;data-circular=&quot;true&quot;&nbsp;data-use-tab=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace;">data-circular</span> and <span style="font-family: Courier New,Courier,monospace;">data-use-tab</span> attributes are the initial options for creating a SectionChanger.</p>
+</li>
+
+
+<li>Setting options with a manual constructor
+<p>Options can be set as arguments to the component constructor. When using options as arguments, you must use the camelCase name.</p>
+<p>The following example shows the use of a manual constructor:</p>
+<pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;id=&quot;sectionchanger&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;sectionEl&nbsp;=&nbsp;document.getElementById(&quot;sectionchanger&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget&nbsp;=&nbsp;tau.widget.SectionChanger(sectionEl,&nbsp;
+&nbsp;&nbsp;&nbsp;{&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation:&nbsp;&quot;horizontal&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circular:&nbsp;true
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useTab:&nbsp;true
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+</li>
+
+<li>Setting options with a method call
+<p>To set options dynamically, use the <span style="font-family: Courier New,Courier,monospace;">option</span>() method.</p>
+<pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;data-orientation=&quot;horizontal&quot;&nbsp;data-circular=&quot;true&quot;&nbsp;data-use-tab=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;sectionEl&nbsp;=&nbsp;document.getElementById(&quot;sectionchanger&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget&nbsp;=&nbsp;tau.widget.SectionChanger(sectionEl);
+
+&nbsp;&nbsp;&nbsp;sectionChangerWidget.option("circular", true);
+&lt;/script&gt;
+</pre>
+</li>
+</ul>
+
+<h2 id="jquery">Managing UI Components with jQuery</h2>
+<p>You can use jQuery with TAU for convenience. Also for backward compatibility, TAU supports the jQuery interface for UI components. However, it is strongly recommended to use the new TAU style.</p>
+<p>To manage the UI components if the jQuery library is loaded:</p>
+<ol>
+<li>Create the UI component:
+<pre class="prettyprint">&lt;div&nbsp;class=&quot;ui-indexscrollbar&quot;&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#indexscrollbar&quot;).indexscrollbar();
+&lt;/script&gt;</pre>
+</li>
+<li>Use the call methods:
+<pre class="prettyprint">$(&quot;.selector&quot;).componentName(&quot;methodName&quot;,&nbsp;argument1,&nbsp;argument2,&nbsp;...);</pre>
+<pre class="prettyprint">&lt;div&nbsp;class=&quot;ui-indexscrollbar&quot;&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* If the IndexScrollBar component is created */
+&nbsp;&nbsp;&nbsp;$(&quot;#indexscrollbar&quot;).indexscrollbar("destroy");
+&lt;/script&gt;</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.ui.practices/html/web/w3c/animation_w.htm b/org.tizen.ui.practices/html/web/w3c/animation_w.htm
new file mode 100644
index 0000000..b2a5647
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/animation_w.htm
@@ -0,0 +1,336 @@
+<!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>CSS Animations Module (Level 3): Creating Animations</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#keyframe">Keyframes</a></li>
+			<li><a href="#prop_ani">Animation Properties</a></li>
+			<li><a href="#create">Creating a Logo Animation</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#animations">CSS Animations Module Level 3 API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#animations">CSS Animations Module Level 3 API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>CSS Animations Module (Level 3): Creating Animations</h1>
+
+<p>Animations (like <a href="transition_w.htm">transitions</a>) change the presentational value of the CSS properties over time. The principal difference between animations and transitions is that while transitions are triggered implicitly when property values change, animations are explicitly executed when the animation properties are applied. This means that for animations, you must <a href="#create">use animation keyframes to define explicit values for the properties</a> being animated.</p>
+
+<p>When using the CSS animation properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>
+
+<h2 name="keyframe" id="keyframe">Keyframes</h2>
+<p>The CSS animations work based on <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules defined for specific elements. The rules can define various property changes complementing the simple running of a transition.</p>
+<p>If the animation only has one set of changes over its whole iteration, the rule values can be assigned with a <span style="font-family: Courier New,Courier,monospace">from {} to {}</span> rule, where <span style="font-family: Courier New,Courier,monospace">from</span> is the beginning of the animation at 0% and <span style="font-family: Courier New,Courier,monospace">to</span> is the end at 100%. If there are multiple changes required, you can define their exact time periods using multiple <span style="font-family: Courier New,Courier,monospace">&lt;number&gt;% {}</span> rules that together cover the entire animation iteration from 0% to 100%.</p>
+<p>The following code snippet demonstrates how to use keyframes. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_keyframes.html</a></p>
+<pre class="prettyprint">
+&lt;style type=&quot;text/css&quot;&gt;
+
+&nbsp;&nbsp;&nbsp;@-webkit-keyframes boxani 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from {left: 0; top: 0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to {left: 100px; top: 100px;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;@-webkit-keyframes boxani_case01 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0% {left: 0; top: 0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25% {left: 100px; top: 0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50% {left: 100px; top: 100px;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75% {left: 0; top: 100px;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100% {left: 0; top: 0;}
+&nbsp;&nbsp;&nbsp;}
+
+&lt;/style&gt;
+</pre>
+
+<h2 name="prop_ani" id="prop_ani">Animation Properties</h2>
+
+<p>You can define various properties for an animation to control how it is played:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">animation-name</span>
+<p>This property uses the name defined in the <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules to play the animation.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-duration</span>
+<p>This property defines how long one iteration of the animation takes.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span>
+<p>This property defines how many times the animation is repeated. If the value is set as <span style="font-family: Courier New,Courier,monospace">infinite</span>, the repetitions are unlimited.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-timing-function</span>
+<p>This property defines the pace of the animation.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-direction</span>
+<p>This property defines the replay direction. The <span style="font-family: Courier New,Courier,monospace">reverse</span> value plays the animation from 100% keyframe to 0% keyframe, while the <span style="font-family: Courier New,Courier,monospace">alternate</span> value plays the animation normally during odd iterations, and from 100% keyframe to 0% keyframe during even iterations.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-play-state</span>
+<p>This property defines the replay status of the animation. The <span style="font-family: Courier New,Courier,monospace">paused</span> value temporarily stops the animation.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">animation-delay</span>
+<p>This property defines the delay time before the start of the animation.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>
+<p>This property defines the state of the animation before or after the animation is played. The <span style="font-family: Courier New,Courier,monospace">forwards</span> value maintains the last value of the keyframe rule when the animation is over, while the <span style="font-family: Courier New,Courier,monospace">backwards</span> value fills up the first value of the keyframe rule when the animation with the <span style="font-family: Courier New,Courier,monospace">animation-delay</span> property is in a standby state. The <span style="font-family: Courier New,Courier,monospace">both</span> value covers both the start and the end of the animation.</p></li></ul>
+
+<p>The following code snippet demonstrates how to use animation properties. For a complete source code, see:</p>
+<ul>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_delay.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_direction.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_fill_mode.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_iteration_count.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_name.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_play_state.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_timing_function.html</a></li>
+</ul>
+
+<pre class="prettyprint lang-html">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-name: boxani;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 5s;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: linear;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-direction: normal;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-delay: 1s;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-fill-mode: none;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box.case01: hover 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-play-state: paused;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-fill-mode: forwards;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;animation-name&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animate&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animation-name: boxani;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box case01&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animate&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animation-name: boxani_case01;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&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">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+	
+<p>The <span style="font-family: Courier New,Courier,monospace">animation</span> property allows you to define all the animation properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">animation-name</span> | <span style="font-family: Courier New,Courier,monospace">animation-duration</span> | <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">animation-delay</span> | <span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span> | <span style="font-family: Courier New,Courier,monospace">animation-direction</span> | <span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>. If you omit a property value, a default value is used instead.</p>
+
+<pre class="prettyprint">
+&lt;style type=&quot;text/css&quot;&gt;
+&nbsp;&nbsp;&nbsp;.box 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 150px; height: 100px; background: Coral; position: relative;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: boxani 3s ease 1s infinite alternate backwards;
+&nbsp;&nbsp;&nbsp;}
+&lt;/style&gt;
+</pre>
+
+<h2 id="create" name="create">Creating a Logo Animation</h2>
+				
+<p>To enhance the user experience of your application, you must learn to create a logo animation, where element properties can be assigned and changed for each element and keyframe. The logo animation is similar to the animation that appears when a Tizen device (or Emulator) is switched on:</p>
+
+<ol>  
+<li>No elements are initially shown on the screen.  </li>
+<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller.</li>
+<li>Each letter in the word &quot;TIZEN&quot; consecutively comes in from the left of the screen and moves to the right to its correct location.</li>
+</ol>
+<p class="figure">Figure: Logo animation (in mobile applications only)</p> 
+<p align="center"><img alt="Logo animation" src="../../images/animation1.png" /></p> 
+<p>To create a logo animation:</p>
+<ol>
+<li>Create the HTML layout for the animation. To be able to manage the movement of each animation part separately, you must define individual elements for each part.
+<pre class="prettyprint">
+&lt;div class=&quot;animation-holder&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt t&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt i&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt z&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt e&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt n&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt tm&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-logo&quot;&gt;&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li>Define the basic style for the animation:
+<pre class="prettyprint">
+.example-body {width: 320px; height: 480px; background: #000; margin: 0 auto; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative; border: 2px solid #fff; overflow: hidden;}
+.animation-holder {width: 280px; height: 88px; position: absolute; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 50%; top: 50%; margin: -54px 0 0 -140px;} 
+
+.tizen-txt, .tizen-logo {position: absolute; display: block; 
+&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;background-repeat: no-repeat; background-position: 50% 50%}
+.tizen-txt.t {width: 48px; height: 56px; background-image: url(images/txt_t.png);}
+.tizen-txt.i {width: 15px; height: 56px; background-image: url(images/txt_i.png);}
+.tizen-txt.z {width: 46px; height: 56px; background-image: url(images/txt_z.png);}
+.tizen-txt.e {width: 45px; height: 56px; background-image: url(images/txt_e.png);}
+.tizen-txt.n {width: 54px; height: 58px; background-image: url(images/txt_n.png);}
+.tizen-txt.tm {width: 11px; height: 6px; background-image: url(images/txt_tm.png);}
+.tizen-logo {width: 220px; height: 211px; left: 30px; top: -61px; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(images/logo_tizen.png); background-size: 100% 100%;}
+</pre>
+</li>
+<li>Create the animation:
+<ol type="a">
+<li>To ensure that all the animation elements are played within the same time frame, some common properties are defined for the animation. The animation movement time is 7 seconds, and the animation repeats infinitely.
+<p>When an animation that repeats itself is activated, it can look unnatural when it suddenly returns to its initial position after finishing an iteration. To make the repetition move naturally, set the <span style="font-family: Courier New,Courier,monospace">animation-direction</span> property to <span style="font-family: Courier New,Courier,monospace">alternate</span>. The alternate direction means that during the odd iterations the animation proceeds in the normal direction (from the 0% keyframe to the 100% keyframe), while during the even iterations the keyframes are played in the opposite direction from 100% to 0%.</p>
+<pre class="prettyprint">
+.tizen-txt, .tizen-logo 
+{
+&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 7s;
+&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;
+&nbsp;&nbsp;&nbsp;-webkit-animation-direction: alternate;
+}
+</pre>
+</li>
+<li>Create the keyframes to implement the flow for the Tizen logo:
+<ul>
+<li>During the first 25% of the animation total playing time (7 seconds), the transparency disappears and the Tizen logo appears.</li>
+<li>During the 25 - 50% of the playing time, the logo size becomes smaller as the width and height values are reduced, and due to the left and top value, the logo is positioned to the top right corner of the screen.</li>
+<li>During the 50 - 100% of the playing time, the values do not change, and the logo remains in its new position.</li> 
+</ul> 
+<p></p>
+<pre class="prettyprint">
+@-webkit-keyframes tizen-logo 
+{
+&nbsp;&nbsp;&nbsp;0% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 0;}
+&nbsp;&nbsp;&nbsp;25% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 1;}
+&nbsp;&nbsp;&nbsp;50% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
+&nbsp;&nbsp;&nbsp;100% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
+}
+</pre>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If the 100% keyframe is not defined, the animation is executed based on the original properties, and the logo size increases to its original size at the end.</td> 
+      </tr> 
+     </tbody> 
+    </table></li>
+<li>Create the keyframes to implement the flow for each letter in the word &quot;TIZEN&quot;:
+<ul>
+<li>To hide the letter initially, the property has been assigned outside the screen at the 0% keyframe. To allow the Tizen logo to appear first, the first letter is introduced at the 30% keyframe.</li>
+<li>To create a slight collision animation, the letter element moves to -10 px of the final value at the 40% keyframe before reaching its final 0 px value at the 45% keyframe.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> property can be changed for each keyframe point, and is used to determine the pace of the animation. When the letter is actually shown on the screen and moved to its final location, the ease in and out timing functions are used.</li>
+</ul>
+
+<p>To show the letters one at a time, the timing is pushed back a bit more for each consecutive letter:</p>
+<pre class="prettyprint">
+&lt;!--Letter T--&gt;
+@-webkit-keyframes tizen-txt-t 
+{
+&nbsp;&nbsp;&nbsp;0% {left: 340px; top: 31px;}
+&nbsp;&nbsp;&nbsp;30% {left: 340px; top: 31px; animation-timing-function: ease-in;}
+&nbsp;&nbsp;&nbsp;40% {left: -10px; top: 31px; animation-timing-function: ease-out;}
+&nbsp;&nbsp;&nbsp;45% {left: 0; top: 31px;}
+&nbsp;&nbsp;&nbsp;100% {left: 0; top: 31px;}
+}
+
+&lt;!--Letter I--&gt;
+@-webkit-keyframes tizen-txt-i 
+{
+&nbsp;&nbsp;&nbsp;0% {left: 340px; top: 31px;}
+&nbsp;&nbsp;&nbsp;40% {left: 340px; top: 31px; animation-timing-function: ease-in;}
+&nbsp;&nbsp;&nbsp;50% {left: 47px; top: 31px; animation-timing-function: ease-out;}
+&nbsp;&nbsp;&nbsp;55% {left: 57px; top: 31px;}
+&nbsp;&nbsp;&nbsp;100% {left: 57px; top: 31px;}
+}
+
+&lt;!--Remaining letters--&gt;
+</pre></li>
+
+<li><p>After creating all the keyframes, define the <span style="font-family: Courier New,Courier,monospace">animation-name</span> property for each element:</p>
+<pre class="prettyprint">
+.tizen-txt.t 
+{
+&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-t;
+}
+.tizen-txt.i 
+{
+&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-i;
+}
+</pre></li>
+
+</ol></li></ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_practical.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">logo_tizen.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_e.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_i.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_n.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_t.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_tm.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_z.png</a></li>
+ </ul>
+
+<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.practices/html/web/w3c/background_w.htm b/org.tizen.ui.practices/html/web/w3c/background_w.htm
new file mode 100644
index 0000000..30ba322
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/background_w.htm
@@ -0,0 +1,188 @@
+<!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>CSS Backgrounds and Borders Module (Level 3): Specifying Background and Border Styles</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#border">CSS Backgrounds and Borders Module Level 3 API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#border">CSS Backgrounds and Borders Module Level 3 API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>CSS Backgrounds and Borders Module (Level 3): Specifying Background and Border Styles</h1>
+
+<p>You can manage the CSS properties for <a href="#create">specifying the border style or background of any HTML element</a>.</p>
+
+<p>When creating a background for an element, you can use the following properties:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">background-color</span>
+<p>Defines the color of the background.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-image</span>
+<p>Defines the image to be used. You can add images as separate layers to an element. To add multiple images, separate them by commas to add each image as a separate layer. The images are added in the order they are defined.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-position</span>
+<p>Defines the exact position of the image.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-repeat</span>
+<p>Defines whether the image is repeated to fill the entire background (in case the image is too small to do it otherwise).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-origin</span>
+<p>Defines the position of the initial background for the item.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-size</span>
+<p>Defines the size of the image in the background.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">background-clip</span>
+<p>Defines the area of the cropped background element.</p></li>
+</ul>
+
+<p>The border properties specify the line thickness, style, and color for the element border. You can define the border using 3 separate properties (<span style="font-family: Courier New,Courier,monospace">border-width</span>, <span style="font-family: Courier New,Courier,monospace">border-style</span>, and <span style="font-family: Courier New,Courier,monospace">border-color</span>), or by listing the values for all 3 properties together in 1 <span style="font-family: Courier New,Courier,monospace">border</span> property. To define rounded corners for the border, you can additionally use the <span style="font-family: Courier New,Courier,monospace">border-radius</span> property.</p>
+
+<p>To define shading for an element, you can define the horizontal and vertical offset, blur radius, and the spread distance values within the <span style="font-family: Courier New,Courier,monospace">box-shadow</span> property. To switch the shadow from outside to inside the element, add the <span style="font-family: Courier New,Courier,monospace">inset</span> keyword to the property too.</p>
+
+<p>The following image shows a simple background color (top left), a background image (top right), multiple images with a solid black border (bottom left), and an element with shading and a solid black border with rounded corners (bottom right). The background image at top right is automatically repeated to cover the entire background, while the images at bottom left are not repeated due to the <span style="font-family: Courier New,Courier,monospace">background-repeat</span> property value.</p>
+
+  <p class="figure">Figure: Background examples</p> 
+  <p align="center"><img alt="Background examples" src="../../images/css_bg1.png" /></p>
+<p>The following code snippet demonstrates how to set the background color, images, borders, and shadings.</p>
+
+<pre class="prettyprint">
+&lt;!--Background color--&gt;
+#one 
+{
+&nbsp;&nbsp;&nbsp;width: 180px;
+&nbsp;&nbsp;&nbsp;height: 40px;
+&nbsp;&nbsp;&nbsp;background-color: lightblue;
+}
+
+&lt;!--Background image--&gt; 
+#one 
+{
+&nbsp;&nbsp;&nbsp;width: 200px;
+&nbsp;&nbsp;&nbsp;height: 100px;
+&nbsp;&nbsp;&nbsp;background-color: #00F;
+&nbsp;&nbsp;&nbsp;background-image: url(t3.png);
+}
+
+&lt;!--Multiple images--&gt; 
+#multi 
+{
+&nbsp;&nbsp;&nbsp;width: 155px;
+&nbsp;&nbsp;&nbsp;height: 100px;
+&nbsp;&nbsp;&nbsp;border: 1px solid #000;
+&nbsp;&nbsp;&nbsp;background-color: #87CEFA;
+&nbsp;&nbsp;&nbsp;background-image: url(t1.png), url(t2.png), url(t3.png);
+&nbsp;&nbsp;&nbsp;background-position: center center, 20% 100%, top left;
+&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
+}
+
+&lt;!--Shading and border with rounded corners--&gt;
+#shading 
+{
+&nbsp;&nbsp;&nbsp;width: 160px;
+&nbsp;&nbsp;&nbsp;height: 40px;
+&nbsp;&nbsp;&nbsp;border: 1px solid #000;
+&nbsp;&nbsp;&nbsp;border-radius: 20px;
+&nbsp;&nbsp;&nbsp;background-color: #88f;
+&nbsp;&nbsp;&nbsp;box-shadow: #888 10px 10px;
+}
+</pre>
+
+<h2 id="create" name="create">Creating Backgrounds</h2>
+
+<p>To enhance the user experience of your application, you must learn to create a multilayer background with the parallax effect using the <a href="http://www.w3.org/TR/CSS2/box.html" target="_blank">CSS box model</a>. The background consists of 3 images on separate layers, and 2 of the layers can be moved over each other.</p>
+
+<p class="figure">Figure: Background with the parallax effect</p> 
+<p align="center"><img alt="Background with the parallax effect" src="../../images/css_bg_tutorial1.png" /></p> 
+
+<ol><li>Prepare 3 images (<span style="font-family: Courier New,Courier,monospace">tizen.png</span>, <span style="font-family: Courier New,Courier,monospace">tizen2.png</span>, and <span style="font-family: Courier New,Courier,monospace">dot.png</span>), each with a transparent background.
+
+<p align="center"><img alt="tizen.png, tizen2.png, and dot.png images" src="../../images/css_bg_tutorial2.png" /></p> </li>
+
+<li>Create a <span style="font-family: Courier New,Courier,monospace">div</span> element with <span style="font-family: Courier New,Courier,monospace">id=&quot;parallelexample&quot;</span> and a slider input element with the minimum, maximum, and initial value:
+<pre class="prettyprint">
+&lt;div id=&quot;parallelexample&quot;&gt;&lt;/div&gt;
+&lt;input id=&quot;position&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;200&quot; value=&quot;50&quot;&gt;
+</pre></li>
+
+<li>Define the needed styles for the  <span style="font-family: Courier New,Courier,monospace">div</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section using the <span style="font-family: Courier New,Courier,monospace">parallelexample</span> ID.
+<p>Define a background using the prepared images in the correct order. The images are shown in the order they have been added, with the first image on the topmost layer. Use the same order when defining the background position for each image.</p>
+<pre class="prettyprint">
+#parallelexample
+{
+&nbsp;&nbsp;&nbsp;width: 300px;
+&nbsp;&nbsp;&nbsp;height: 300px;
+&nbsp;&nbsp;&nbsp;background-image: url(tizen2_32.png), url(tizen3_32.png), url(dot.png);
+&nbsp;&nbsp;&nbsp;background-position: 6.25em 8em, 3.125em 4em, center top;
+&nbsp;&nbsp;&nbsp;background-repeat: repeat, repeat, repeat;
+&nbsp;&nbsp;&nbsp;border: 1px solid black;
+&nbsp;&nbsp;&nbsp;margin: 0px auto;
+}
+</pre></li>
+<li>To create the parallax effect, create a method that moves the background layers by changing the horizontal position values of the images in the <span style="font-family: Courier New,Courier,monospace">div</span> element. To determine the position value change, add an <span style="font-family: Courier New,Courier,monospace">onchange</span> event handler for the slider to determine the change based on the slider handle movement.
+<pre class="prettyprint">
+function moveLayers() 
+{
+&nbsp;&nbsp;&nbsp;/* Get slider value */
+&nbsp;&nbsp;&nbsp;var poz = document.getElementById(&#39;position&#39;);
+&nbsp;&nbsp;&nbsp;/* Get the div element */
+&nbsp;&nbsp;&nbsp;var example = document.getElementById(&#39;ParallaxExamle&#39;);
+&nbsp;&nbsp;&nbsp;/* Add the event handler */
+&nbsp;&nbsp;&nbsp;poz.onchange = function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var layer1 = this.value/8, layer2 = this.value/16;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;example.style.backgroundPosition = layer1 +&#39;em 8em, &#39; 
+&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;+ layer2 + &#39;em 4em, center top&#39;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>
+<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/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">css_background.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">dot.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen2_32_s.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen3_32.png</a></li>
+ </ul>
+		
+ 
+<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.practices/html/web/w3c/basic_ui_w.htm b/org.tizen.ui.practices/html/web/w3c/basic_ui_w.htm
new file mode 100644
index 0000000..68d5d4b
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/basic_ui_w.htm
@@ -0,0 +1,201 @@
+<!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>CSS Basic User Interface Module (Level 3): Applying Styles to HTML Documents</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#selector">Using Pseudo-element Selectors</a></li>
+			<li><a href="#boxmodel">Using Box Model Properties</a>
+			</li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>CSS Basic User Interface Module (Level 3): Applying Styles to HTML Documents</h1>
+
+<p>You can apply styles to HTML documents.</p>
+<p>The CSS3 version has caused changes in the Selector, Color, Web Form, and Fonts CSS modules. In addition, the CSS3 UI API also handles changes related to the following user interface items:</p>
+<ul>
+<li>User interface selectors
+<p>The CSS Selector is an essential module for applying a CSS to HTML in order to enable the DOM element selection. The <a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#user-interface-selectors" target="_blank">pseudo-element selectors</a> can be used to assign the user interface state. With the selectors, you can <a href="#selector">change the Web form style</a> according to the user input without using JavaScript.</p></li>
+
+<li>Box model properties
+<p>A box model refers to all DOM elements excluding design elements, such as <span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;i&gt;</span>. The box model area is set as defined in the following figure.</p>
+<ul>
+<li><strong>Content</strong>: Content area</li>
+<li><strong>Padding</strong>: Gap between the content and boundary</li>
+<li><strong>Border</strong>: Boundary</li>
+<li><strong>Margin</strong>: Overall size of the box model</li>
+</ul>
+<p class="figure">Figure: Box model structure</p>
+<p align="center"><img alt="Figure: Box model structure" src="../../images/box_model_properties_struct.png"/></p>
+
+<p>You can <a href="#boxmodel">use the box model properties</a> to assign styles to the selected DOM elements:</p>
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property assigns the box size range.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">outline</span> properties make the box outstanding.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property handles the text extending outside the box.</li></ul>
+</li>
+</ul>
+
+<h2 id="selector" name="selector">Using Pseudo-element Selectors</h2>
+				
+<p>To enhance the user experience of your application, you must learn how to use pseudo-element selectors:</p>
+<ol>
+<li><p>Use the pseudo-classes, such as <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span>, to add different styles based on the state of the DOM elements:</p>
+<pre class="prettyprint">input: enabled {border: 1px solid blue}
+input: disabled {border: 1px solid red}</pre>
+<table class="note"> 
+    <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In the versions prior to CSS3, pseudo-elements, such as <span style="font-family: Courier New,Courier,monospace">:hover</span>, <span style="font-family: Courier New,Courier,monospace">:active</span>, and <span style="font-family: Courier New,Courier,monospace">:focus</span>, were used, and required an attribute selector. Since the <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span> classes are not influenced by the <span style="font-family: Courier New,Courier,monospace">display</span> and <span style="font-family: Courier New,Courier,monospace">visibility</span> attributes, they improve the accessibility.</td> 
+      </tr> 
+     </tbody> 
+   </table></li>
+<li>To control the state of the HTML5 Web Forms (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">wearable</a> applications), use the <span style="font-family: Courier New,Courier,monospace">:in-range</span> and <span style="font-family: Courier New,Courier,monospace">:out-of-range</span> pseudo-classes. 
+<p>They check for any values that have exceeded the inserted range. (The following figure applies to mobile applications only.)</p>
+<pre class="prettyprint">
+&lt;!--HTML--&gt; 
+&lt;input type=&quot;number&quot; step=&quot;10&quot; min=&quot;10&quot; max=&quot;100&quot;&gt;
+</pre>
+<pre class="prettyprint">
+&lt;!--CSS--&gt;
+input[type=&quot;number&quot;]: in-range {border: 3px solid blue; width: 90%}
+input[type=&quot;number&quot;]: out-of-range {border: 3px solid red; width: 90%}
+</pre>
+<p align="center"><img alt="Element ranges (in mobile applications only)" src="../../images/pseudo_elements_selector_range.png"/></p></li>
+<li>To apply different styles to required input items and option items, use the <span style="font-family: Courier New,Courier,monospace">:required</span> and <span style="font-family: Courier New,Courier,monospace">:optional</span> pseudo-classes. (The following figure applies to mobile applications only.)
+<pre class="prettyprint">
+&lt;!--HTML--&gt;
+&lt;fieldset&gt;
+&nbsp;&nbsp;&nbsp;&lt;legend&gt;required and optional&lt;/legend&gt;
+&nbsp;&nbsp;&nbsp;&lt;label&gt;email: &lt;input type=&quot;email&quot; required&gt;&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&lt;label&gt;password: &lt;input type=&quot;Password&quot; placeholder=&quot;required area&quot; required&gt;&lt;/label&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;label&gt;date: &lt;input type=&quot;date&quot; placeholder=&quot;You know what to do, huh?&quot;&gt;&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&lt;textarea placeholder=&quot;Comment&quot;&gt;&lt;/textarea&gt;
+&lt;/fieldset&gt;</pre>
+<pre class="prettyprint">
+&lt;!--CSS--&gt;
+input: required, textarea: required {border: 1px solid red}
+input: optional, textarea: optional {border: 1px solid #777}
+</pre>
+<p align="center"><img alt="Required and optional elements (in mobile applications only)" src="../../images/pseudo_elements_selector_required.png"/></p></li></ol>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">range.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">required_and_optional.html</a></li>
+ </ul>
+			
+<h2 id="boxmodel" name="boxmodel">Using Box Model Properties</h2>
+				
+<p>To enhance the user experience of your application, you must learn how to use box model properties:</p> 
+<table>
+<tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The properties dependent on mouse and keyboard functions are not discussed in this tutorial.</td> 
+      </tr> 
+     </tbody> 
+   </table>
+<ol>
+<li>To assign the area that is included in the width and height of the box automatically, use the <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property. To assign the width without a margin, use the <span style="font-family: Courier New,Courier,monospace">box-sizing: border-box</span> property.
+<pre class="prettyprint lang-html">
+div.content-box {box-sizing: content-box} &lt;!--width (height) = content--&gt;
+div.border-box {box-sizing: border-box} &lt;!--width (height) = content + padding + border--&gt;
+div.border-box: before {height: 40px}
+</pre></li>
+
+<li>To draw an outline without using up the area, use the <span style="font-family: Courier New,Courier,monospace">outline</span> property:
+<pre class="prettyprint">
+.Test-Box {outline: 5px dashed red}
+.outline: before {outline: 2px dashed red}
+.outline-offset: before {outline-offset: 35px}
+</pre></li>
+
+<li>To handle text that exceeds the area of the box model, use the <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property. The <span style="font-family: Courier New,Courier,monospace">text-overflow: ellipsis</span> property is used to indicate the text exceeded the padding area as &#39;...&#39;.
+<pre class="prettyprint">div 
+{
+&nbsp;&nbsp;&nbsp;width: 250px;
+&nbsp;&nbsp;&nbsp;margin: 20px auto;
+&nbsp;&nbsp;&nbsp;padding: 20px 30px;
+&nbsp;&nbsp;&nbsp;background-color: #eee;
+&nbsp;&nbsp;&nbsp;color: #333;
+&nbsp;&nbsp;&nbsp;border: 5px solid #333;
+&nbsp;&nbsp;&nbsp;font-weight: bold;
+&nbsp;&nbsp;&nbsp;overflow: hidden;
+&nbsp;&nbsp;&nbsp;white-space: nowrap;
+}
+
+.clip {text-overflow: clip}
+.ellipsis {text-overflow: ellipsis}</pre></li>
+</ol>
+
+<p>The following figure illustrates the box model properties; from left to right, it shows the effects of the box sizing, outline, and text overflow properties.</p>
+<p class="figure">Figure: Box model properties (in mobile applications only)</p>
+<p align="center"><img alt="Box model properties (in mobile applications only)" src="../../images/box_model_properties.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/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">box_sizing_property.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">outline_property.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">text_overflow_property.html</a></li>
+ </ul>
+		
+
+<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.practices/html/web/w3c/clipboard_mw.htm b/org.tizen.ui.practices/html/web/w3c/clipboard_mw.htm
new file mode 100644
index 0000000..10a0d7f
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/clipboard_mw.htm
@@ -0,0 +1,288 @@
+<!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>Clipboard API and events: Transferring Content Between Applications</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/></p>
+    </div>
+
+	<div id="toc_border"><div id="toc">
+	<p class="toc-title">Content</p>
+	<ul class="toc">
+		<li><a href="#copy">Copying Content</a></li>
+		<li><a href="#cut">Cutting Content</a></li>
+		<li><a href="#paste">Pasting Content</a></li>
+		<li><a href="#target">Copying and Pasting Content into an Editable Element</a></li>
+	</ul>
+    <p class="toc-title">Related Info</p>
+        <ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#clipboard">Clipboard and events API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Clipboard API and events: Transferring Content Between Applications</h1>
+  
+  
+<p>The clipboard and events feature is used for cutting, copying, and pasting content to easily transfer it between Web applications.</p>
+
+<p>This feature is supported in mobile applications only.</p>
+
+  <p>The main features of Clipboard API and events include:</p>
+  <ul>
+    <li><p>Copying</p>
+<p>You can fire the <span style="font-family: Courier New,Courier,monospace">copy</span> event to <a href="#copy">place the selected data on the clipboard</a>.</p></li>
+    <li><p>Cutting</p>
+<p>You can fire the <span style="font-family: Courier New,Courier,monospace">cut</span> event to place the selected data on the clipboard, and <a href="#cut">remove the selected content in the document</a>.</p></li>
+    <li><p>Pasting</p>
+<p>You can fire the <span style="font-family: Courier New,Courier,monospace">paste</span> event to <a href="#paste">retrieve data from the clipboard and insert it into a document</a>. The data is retrieved in the format most appropriate to the assigned context.</p>
+<p>The most common way of providing clipboard features in an application is to create an editable element, and allow the user to <a href="#target">copy content and then paste it into the editable element</a>.</p>
+</li>
+  </ul>
+  
+  <h2 id="copy" name="copy">Copying Content</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">copy</span> event:</p> 
+<ol>
+<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> event:
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;copy&quot;, function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);</pre>
+    </li>
+	<li><p>When you start copying, the <span style="font-family: Courier New,Courier,monospace">copy</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">copyHandler()</span> method is called.</p>
+	<p>Stop the system clipboard basic operation and set the range you want to copy:</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function copyHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If the current selection is not influenced and there is no selected range, the clipboard imports the <span style="font-family: Courier New,Courier,monospace">setData()</span> method. The copied content cannot be edited apart from adding a <a href="http://www.w3.org/TR/2014/WD-html51-20140617/editing.html#the-datatransferitemlist-interface" target="_blank">DataTransferItemList</a> item.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+<li>Store the data of the selected range: 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
+&nbsp;&nbsp;&nbsp;};
+&lt;/script&gt;
+</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/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul>  
+
+ <h2 id="cut" name="cut">Cutting Content</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">cut</span> event:</p> 
+<ol>
+<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">cut</span> event:
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;cut&quot;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cutHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);</pre>
+
+    </li>
+	<li><p>When you start cutting, the <span style="font-family: Courier New,Courier,monospace">cut</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">cutHandler()</span> method is called.</p>
+	<p>Stop the system clipboard basic operation and set the range you want to cut:</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function cutHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
+
+</li>
+<li>Store the data of the selected range: 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
+&nbsp;&nbsp;&nbsp;};   
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Before the <span style="font-family: Courier New,Courier,monospace">setData()</span> method is imported, the basic motion of the system event must be cancelled using the <span style="font-family: Courier New,Courier,monospace">preventDefault()</span> method. Otherwise, the data to be allocated to the clipboard is overwritten by the system clipboard.</td> 
+      </tr> 
+     </tbody>
+</table>
+</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/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul> 
+
+ <h2 id="paste" name="paste">Pasting Content</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">paste</span> event:</p> 
+<ol>
+<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">paste</span> event:
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);</pre>
+</li>
+	<li><p>When you start pasting, the <span style="font-family: Courier New,Courier,monospace">paste</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">pasteHandler()</span> method is called.</p>
+	<p>Stop the system clipboard basic operation:</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function pasteHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();</pre>
+</li>
+	<li>Paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
+&nbsp;&nbsp;&nbsp;};              
+&lt;/script&gt;
+</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/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul>  
+
+ <h2 id="target" name="target">Copying and Pasting Content into an Editable Element</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to copy content and paste it in an editable HTML element:</p> 
+
+<ol>
+<li><p>Define the editable element into which copied data is to be pasted:</p>
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.log {border: 1px solid #d9d9d9; margin: 10px; padding: 5px;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.target {border: 1px solid #36c; margin: 10px; padding: 5px;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Clipboard API&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div style=&quot;width: 300px; height: 100px; border: 1px solid #d9d9d9&quot; contenteditable&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edit Section
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div  class=&quot;target&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;Target Element&lt;/h4&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target contenteditable&quot;&gt;Paste content&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;ev-log&quot; class=&quot;log&quot;&gt;Event log&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div contenteditable&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This section is informative
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This specification defines the common clipboard operations of cutting, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copying and pasting, in such a way that they are exposed to Web Applications 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and can be adapted to provide advanced functionalities. 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Its goal is to provide for compatibility where possible with existing implementations.
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;body&gt;
+</pre>
+</li>
+
+<li><p>Add event listeners to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> and <span style="font-family: Courier New,Courier,monospace">paste</span> events:</p>
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var pasteTarget = document.getElementById(&quot;target&quot;);
+&nbsp;&nbsp;&nbsp;var evLogBox = document.getElementById(&quot;ev-log&quot;);    
+
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;copy&quot;, function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);
+</pre>
+</li>
+
+<li>When the <span style="font-family: Courier New,Courier,monospace">copy</span> event occurs, stop the system clipboard basic operation and set the range you want to copy:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;function copyHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
+</li>
+<li>Store the data of the selected range: 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evLogBox.innerHTML = &quot;Event log : copy&quot;;
+&nbsp;&nbsp;&nbsp;};</pre>
+</li>
+<li>When the <span style="font-family: Courier New,Courier,monospace">paste</span> event occurs, stop the system clipboard basic operation and paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function pasteHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evLogBox.innerHTML = &quot;Event log : paste&quot;;
+&nbsp;&nbsp;&nbsp;};  
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+
+<p class="figure">Figure: Copying and pasting</p> 
+<p align="center"><img alt="Copying and pasting" src="../../images/copy_pasting.png" /></p>
+
+<h3>Source Code</h3>
+	<p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.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.practices/html/web/w3c/color_w.htm b/org.tizen.ui.practices/html/web/w3c/color_w.htm
new file mode 100644
index 0000000..c5cefcd
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/color_w.htm
@@ -0,0 +1,222 @@
+<!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>CSS Color Module (Level 3): Specifying Color and Opacity</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">	
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#color">CSS Color Module Level 3 API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#color">CSS Color Module Level 3 API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>CSS Color Module (Level 3): Specifying Color and Opacity</h1>
+
+<p>You can manage the CSS properties for <a href="#create">specifying the color and opacity of an HTML element</a>, and the CSS color value type.</p>
+
+<p>You can specify the color of an element with the following formats:</p>
+<ul>
+<li>Keyword values
+<p>You can use basic keywords, such as <span style="font-family: Courier New,Courier,monospace">red</span>, <span style="font-family: Courier New,Courier,monospace">green</span>, <span style="font-family: Courier New,Courier,monospace">blue</span>, or <span style="font-family: Courier New,Courier,monospace">deepskyblue</span>, as defined in <a href="http://www.w3.org/TR/css3-color/#svg-color" target="_blank">Extended color keywords</a>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword can be used with all properties that accept a color value (borders, box shadows, outlines, or backgrounds). The computed value of the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is the computed value of the <span style="font-family: Courier New,Courier,monospace">color</span> property. If the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is set on the <span style="font-family: Courier New,Courier,monospace">color</span> property itself, it is treated as <span style="font-family: Courier New,Courier,monospace">color: inherit</span>.
+</p>
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">transparent</span> keyword with all properties that accept a color value (borders, box shadows, outlines, or backgrounds), to turn the element in question transparent (invisible).</p>
+</li>
+<li>RGB values
+<ul>
+<li>In hexadecimal notation
+<p>The format is &#39;#&#39; followed by either 3 or 6 hexadecimal characters. The 3-digit RGB notation (#rgb) is converted into a 6-digit form (#rrggbb) by replicating digits. For example, <span style="font-family: Courier New,Courier,monospace">#fc0</span> expands to <span style="font-family: Courier New,Courier,monospace">#ffcc00</span>.</p></li>
+<li>In functional notation
+<p>The format is &#39;rgb(&#39; followed by a comma-separated list of 3 numerical values (integer or percentage) followed by &#39;)&#39;. The integer value 255 corresponds to 100%, and to F or FF in a hexadecimal notation: <span style="font-family: Courier New,Courier,monospace">rgb(255, 255, 255)</span> = <span style="font-family: Courier New,Courier,monospace">rgb(100%, 100%, 100%)</span> = <span style="font-family: Courier New,Courier,monospace">#FFF</span>. White space characters are allowed around the numerical values.
+</p></li>
+</ul>
+</li>
+<li>RGBA values
+<p>The RGB color model is extended to include &quot;alpha&quot; to allow the color opacity to be specified. The RGBA values are defined using functional notation where the final value is the alpha (range from 0.1 to 1). For example: <span style="font-family: Courier New,Courier,monospace">rgba(255, 0, 0, 0.7)</span>.</p>
+</li>
+<li>HSL value 
+<p>You can use numerical hue-saturation-lightness (HSL) colors as an alternative to numerical RGB colors. The HSL colors are encoded as a triple (hue, saturation, lightness). The hue is represented as the angle of the color circle, where by definition red=0°=360° and other colors are spread around the circle. The saturation and lightness are represented as percentages, where 100% is full saturation or black lightness, and 0% is a shade of gray or white lightness. 50% lightness is &quot;normal&quot;. For example: <span style="font-family: Courier New,Courier,monospace">hsl(0, 100%, 50%)</span>. 
+</p></li>
+<li>HSLA value
+<p>The HSL color model is extended to include &quot;alpha&quot; to allow the color opacity to be specified. The HSLA values are defined using the HSL notation where a final alpha value is added (range from 0.1 to 1). For example: <span style="font-family: Courier New,Courier,monospace">hsla(120, 100%, 50%, 0.8)</span>.</p></li>
+</ul>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><p>The CSS2 System Color values have been deprecated in favor of the CSS3 UI &#39;appearance&#39; property.</p></td> 
+      </tr> 
+     </tbody> 
+    </table>
+
+ <p>The following code snippet demonstrates how to specify a color for an element. For a complete source code, see:</p>
+ <ul>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">color.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">current_color.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">hsl_color.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">hsla_color.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">rgb_color.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">rgba_color.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">transparent.html</a></li>	
+ </ul>
+<pre class="prettyprint">
+&lt;!--Keywords--&gt;
+#one
+{
+&nbsp;&nbsp;&nbsp;color: blue;
+&nbsp;&nbsp;&nbsp;background: white;
+&nbsp;&nbsp;&nbsp;border: 1px solid springgreen;
+}
+#one span 
+{
+&nbsp;&nbsp;&nbsp;background: currentColor;
+}
+#one span.hide
+{
+&nbsp;&nbsp;&nbsp;color: transparent;
+}
+
+&lt;!--RGB--&gt;
+#two
+{
+&nbsp;&nbsp;&nbsp; color: #ff0000;
+}
+
+&lt;!--RGBA--&gt;
+#three
+{
+&nbsp;&nbsp;&nbsp;color: rgba(100%, 0, 0, 0.5);
+}
+
+&lt;!--HSL--&gt;
+#four
+{
+&nbsp;&nbsp;&nbsp;color: hsl(0, 100%, 50%);
+}
+
+&lt;!--HSLA--&gt;
+#five
+{
+&nbsp;&nbsp;&nbsp;color: hsla(0, 100%, 50%, 0.5);
+}
+</pre>
+
+<h2 id="create" name="create">Creating a Color Generator</h2>
+
+<p>To enhance the user experience of your application, you must learn to create a HSLA color generator to set the color value for an element in the HSLA format.</p>
+
+<p class="figure">Figure: HSLA color generator</p> 
+<p align="center"><img alt="HSLA color generator" src="../../images/css_color_tutorial1.png" /></p>
+
+
+
+<ol><li>To create the color generator, define 2 <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> elements for displaying the HSLA value as text and in a color box. You also need 4 slider inputs for defining the HSLA color:
+<ul>
+<li>The first input has a range of 0 - 360 and represents hue.</li>
+<li>The second and third inputs have a range of 0 - 100 and represent saturation and lightness.</li>
+<li>The last input has a range of 0 - 10 and represents alpha transparency.
+<p>The range should be 0.1 - 1, but the minimum value of the <span style="font-family: Courier New,Courier,monospace">min</span> attribute is 0 so the value can be divided by 10.</p></li></ul>
+
+<pre class="prettyprint lang-html">
+&lt;div id=&quot;color-generator&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;text-box&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;color-box&quot;&gt;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;label&gt;Hue&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&lt;input id=&quot;hue&quot; value=&quot;0&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;360&quot;&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;label&gt;Saturation&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&lt;input id=&quot;saturation&quot; value=&quot;100&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;label&gt;Lightness&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&lt;input id=&quot;lightness&quot; value=&quot;50&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;label&gt;Alpha&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&lt;input id=&quot;alpha&quot; value=&quot;10&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;10&quot;&gt;
+&lt;/div&gt;
+</pre></li>
+<li>Obtain the values from the slider inputs with the <span style="font-family: Courier New,Courier,monospace">getElementById</span> method. Remember to divide the alpha value by 10 to reach the correct range of 0.1 - 1.
+<pre class="prettyprint">
+var h = document.getElementById(&#39;hue&#39;).value,
+&nbsp;&nbsp;&nbsp;&nbsp;s = document.getElementById(&#39;saturation&#39;).value,
+&nbsp;&nbsp;&nbsp;&nbsp;l = document.getElementById(&#39;lightness&#39;).value,
+&nbsp;&nbsp;&nbsp;&nbsp;a = document.getElementById(&#39;alpha&#39;).value / 10;
+</pre></li>
+<li>Set the HSLA text and the color of the color box by defining the color from the inputs in the HSL and HSLA formats.
+<p>If the alpha is 1, the HSL format is displayed. Otherwise, the HSLA format is used.</p>
+<pre class="prettyprint">
+/* Define formats */
+hsl = &#39;hsl(&#39; + h + &#39;, &#39; + s + &#39;%, &#39; + l + &#39;%)&#39;;
+hsla = &#39;hsla(&#39; + h + &#39;, &#39; + s + &#39;%, &#39; + l + &#39;%, &#39; + a + &#39;)&#39;;
+
+/* Set the color of the box */
+cBox = document.querySelector(&#39;#color-box&#39;),
+
+/* Set the text */
+tBox = document.querySelector(&#39;#text-box&#39;);
+</pre></li>
+
+<li>Add an event handler to the input sliders to change the displayed text and color box color when the slider values change.
+<pre class="prettyprint">
+var inputs = document.querySelectorAll(&#39;#color-generator input[type=range]&#39;);
+			
+for (i = 0; i &lt; inputs.length; i++)
+{
+&nbsp;&nbsp;&nbsp;inputs[i].onchange = function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show color */
+&nbsp;&nbsp;&nbsp;}
+}
+</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/dom_forms_and_styles/css_color_module_level_3" target="_blank">css_color.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.practices/html/web/w3c/drag_drop_mw.htm b/org.tizen.ui.practices/html/web/w3c/drag_drop_mw.htm
new file mode 100644
index 0000000..bbf1db5
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/drag_drop_mw.htm
@@ -0,0 +1,318 @@
+<!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/mobile_s_w.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>
+ 
+<p>HTML5 drag and drop activates through event-based JavaScript and added attributes.
+</p>
+
+<p>This feature is supported in mobile applications only.</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.practices/html/web/w3c/flexible_w.htm b/org.tizen.ui.practices/html/web/w3c/flexible_w.htm
new file mode 100644
index 0000000..6844969
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/flexible_w.htm
@@ -0,0 +1,355 @@
+<!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>CSS Flexible Box Layout Module: Adjusting the Layout</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#usecont">Using the Flex Container</a></li>
+			<li><a href="#item">Using the Flex Items</a></li>
+			<li><a href="#create">Creating a Flexible Layout with CSS3</a>
+			</li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">	
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">CSS Flexible Box Layout Module API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">CSS Flexible Box Layout Module API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>CSS Flexible Box Layout Module: Adjusting the Layout</h1>
+
+<p>CSS attributes, such as <span style="font-family: Courier New,Courier,monospace">float</span>, <span style="font-family: Courier New,Courier,monospace">display</span>, and <span style="font-family: Courier New,Courier,monospace">position</span>, can be used to adjust and align the screen layout according to various resolutions. However, operating the layout accurately among changing screen sizes is difficult.</p>
+
+<p>Tizen supports the CSS Flexible Box Layout Module API that enables you to create an easily manageable flexible layout, which fluidly adjusts the layout according to viewport size changes. When you <a href="#create">create and use a flexible box layout</a>, the alignment method or object (flex item) size within a specific area (flex container) can be adjusted.</p>
+<p>The main components of the flexible box layout include:</p>
+<ul>
+<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-containers" target="_blank">Flex container</a>, which refers to flex or inline-flex DOM elements assigned by the display.<p>You can <a href="#usecont">use the flex container</a> to assign a flex area and the flex items included in it. The flex container properties are used to assign the indication area and alignment method.</p></li>
+<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items" target="_blank">Flex item</a>, which refers to the child nodes of the flex container.
+<p>The flex item changes its size fluidly according to the area of the flex container. You can <a href="#item">define flex item properties</a> to assign the sizes of the respective items and the alignment method.</p></li>
+</ul>
+<p class="figure">Figure: Flexible box layout</p>
+<p align ="center"><img alt="Flexible box layout" src="../../images/flex_container.png"/></p>
+
+<h2 id="usecont" name="usecont">Using the Flex Container</h2>
+<p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex container:</p>
+
+<ol>
+<li>Assign the area (flex container) where the flexible box layout is applied by using the <span style="font-family: Courier New,Courier,monospace">display: flex</span> property:
+<pre class="prettyprint">&lt;style&gt;
+&nbsp;&nbsp;&nbsp;.flex_container {display: -webkit-flex}
+&lt;/style&gt;
+
+&lt;div class=&quot;flex_container&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>A&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>B&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>C&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>D&lt;/div&gt;
+&lt;div&gt;</pre>
+
+<p>The child nodes within the assigned flex container become flex items.</p>
+</li>
+<li><p>Define the necessary properties for the flex container to assign the alignment of the flex items within it:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">flex-direction</span> property sets the alignment direction of the flex items:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">row</span>: Align from left to right.</li>
+<li><span style="font-family: Courier New,Courier,monospace">row-reverse</span>: Align from right to left.</li>
+<li><span style="font-family: Courier New,Courier,monospace">column</span>: Align from top to bottom.</li>
+<li><span style="font-family: Courier New,Courier,monospace">column-reverse</span>: Align from bottom to top.</li>
+</ul></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property sets the line changing of the flex items:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">nowrap</span>: Reduces the size of the flex items without changing lines.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the cross axis direction of the current writing mode.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the opposite cross axis direction than in the <span style="font-family: Courier New,Courier,monospace">wrap</span> value.</li>
+</ul></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">justify-content</span> property sets the handling of gaps between the flex items on the main axis:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Gathers the items at the alignment starting point.</li>
+<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Gathers the items at the alignment finishing point.</li>
+<li><span style="font-family: Courier New,Courier,monospace">center</span>: Gathers the items in the center.</li>
+<li><span style="font-family: Courier New,Courier,monospace">space-between</span>: Aligns the start and end item at both ends, and creates equal gaps in between the rest of the items.</li>
+<li><span style="font-family: Courier New,Courier,monospace">space-around</span>: Creates equal gaps between all items.</li>
+</ul>
+<table class="note"> 
+    <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">This property is similar to <span style="font-family: Courier New,Courier,monospace">text-align</span>, but the alignment direction and the starting point are based on the <span style="font-family: Courier New,Courier,monospace">flex-direction</span> and <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> properties.</td> 
+      </tr> 
+     </tbody> 
+   </table></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">align-content</span> property sets the handling of gaps between the flex items on the cross axis. It has the same values as the <span style="font-family: Courier New,Courier,monospace">justify-content</span> property, and 1 additional value:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the size of the flex items and aligns them without gaps.</li>
+</ul></li>
+<li id="alignitems"><span style="font-family: Courier New,Courier,monospace">align-items</span> property sets the relative location and size between the flex items on the cross axis:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Aligns the items vertically to the top.</li>
+<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Aligns the items vertically to the bottom.</li>
+<li><span style="font-family: Courier New,Courier,monospace">center</span>: Aligns the items vertically to the middle.</li>
+<li><span style="font-family: Courier New,Courier,monospace">baseline</span>: Aligns the items vertically to the baseline.</li>
+<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the height of the flex items and aligns them without gaps.</li>
+</ul>
+<table class="note"> 
+    <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If the <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property is set to <span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>, the start and end points of the alignment are reversed.</td> 
+      </tr> 
+     </tbody> 
+   </table></li></ul></li></ol>
+<p>The following figure shows examples of flex containers and how their flex items have been aligned.</p>
+<p class="figure">Figure: Flex container properties (in mobile applications only)</p> 
+<p align="center"><img alt="Flex container properties (in mobile applications only)" src="../../images/flexcontainer_properties.png"/></p>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_2.html</a></li>
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_3.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_4.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_5.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_6.html</a></li>	
+ </ul>
+		
+				<h2 id="item" name="item">Using the Flex Items</h2>
+				
+			<p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex items:</p>
+
+<ol>
+<li>Assign the area (flex container) where the flexible box layout is applied, and define the flex items for it:
+<pre class="prettyprint">&lt;style&gt;
+&nbsp;&nbsp;&nbsp;.flex_container {display: -webkit-flex}
+&lt;/style&gt;
+
+&lt;div class=&quot;flex_container&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>A&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>B&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>C&lt;/div&gt;
+&lt;div&gt;</pre>
+</li>
+
+<li><p>Define the necessary properties for the flex items:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">align-self</span> property is similar as the <a href="#usecont">align-items</a> property of the flex container.
+<table class="note"> 
+    <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If both the <span style="font-family: Courier New,Courier,monospace">align-self</span> and <span style="font-family: Courier New,Courier,monospace">align-items</span> properties are used simultaneously, the <span style="font-family: Courier New,Courier,monospace">align-items</span> property is ignored.</td> 
+      </tr> 
+     </tbody> 
+   </table></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">flex</span> property is a shorthand expression defining the flex item size handling:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">flex-grow</span>: Sets whether the spaces between flex items are filled.</li> 
+<li><span style="font-family: Courier New,Courier,monospace">flex-shrink</span>: Sets whether the width of the flex items is reduced according to the size of the flex container.</li>
+<li><span style="font-family: Courier New,Courier,monospace">flex-basis</span>: Sets the default width of the relevant flex items.</li>
+</ul></li></ul></li></ol>
+<p>The following figure shows examples of how flex items can be placed and sized within a flex container.</p>
+<p class="figure">Figure: Flex items (in mobile applications only)</p>
+<p align="center"><img alt="Flex items (in mobile applications only)" src="../../images/flexitem_properties.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/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_2.html</a></li>
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_3.html</a></li>		
+ </ul>
+			
+<h2 id="create" name="create">Creating a Flexible Layout with CSS3</h2>
+
+<p>To enhance the user experience of your application, you must learn how to create flexible box layout:</p>
+<ol>
+<li>Define the HTML content for the flexible layout. In this example, create 2 articles areas, 1 for a text list and 1 for an icon list:
+<pre class="prettyprint">&lt;div class=&quot;container&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;article class=&quot;events&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;UPCOMING EVENTS&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;date&quot;&gt;&lt;span&gt;APR&lt;/span&gt;&lt;br&gt; 15&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;title&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Linux Foundation Collaboration Summit &lt;span class=&quot;local&quot;>San Francisco, CA&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other text items--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/article&gt;
+&nbsp;&nbsp;&nbsp;&lt;article class=&quot;schedule&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;SCHEDULE&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;img_list&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;folder.png&quot; alt=&quot;folder&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;alert.png&quot; alt=&quot;alert&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other icons--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/article&gt;
+&lt;/div&gt;</pre></li>
+
+<li>Define styles to decorate the article areas. (The following figure applies to mobile applications only.)
+<pre class="prettyprint">&lt;!--Border for the article areas--&gt;
+.container article &gt; * {border: 1px solid #ccc;}
+
+&lt;!--Font style for the article area titles--&gt;
+.container .events &gt; h2, .container .schedule &gt; h2 
+{
+&nbsp;&nbsp;&nbsp;padding: 10px 20px;
+&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000;
+}
+
+&lt;!--List styles--&gt;
+.container .events &gt; ul, .container .schedule .img_list  
+{
+&nbsp;&nbsp;&nbsp;height: 100%; 
+&nbsp;&nbsp;&nbsp;padding: 10px;
+}
+
+&lt;!--Text style for the text list item title--&gt;
+.container .events &gt; ul &gt; li .title 
+{
+&nbsp;&nbsp;&nbsp;color: #51809e;
+&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #000;
+}
+
+&lt;!--Text style for the text list item location info--&gt;
+.container .events &gt; ul &gt; li .title .local 
+{
+&nbsp;&nbsp;&nbsp;text-indent: 10px;
+&nbsp;&nbsp;&nbsp;text-shadow: 0 0 0 #fff;
+}
+
+&lt;!--Styles for the text list item date box--&gt;
+.container .events &gt; ul &gt; li .date 
+{
+&nbsp;&nbsp;&nbsp;text-align: center;
+}
+.container .events &gt; ul &gt; li .date 
+{
+&nbsp;&nbsp;&nbsp;background-color: #ddd;
+&nbsp;&nbsp;&nbsp;border-radius: 10px;
+&nbsp;&nbsp;&nbsp;box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .5);
+}
+.container .events &gt; ul &gt; li .date &gt; span 
+{
+&nbsp;&nbsp;&nbsp;background-color: #fff;
+&nbsp;&nbsp;&nbsp;border-radius: 5px;
+}</pre>
+<p align="center"><img alt="Article areas with styles defined (in mobile applications only)" src="../../images/flexible_default_structure.png"/></p></li>
+
+
+<li>Define a flexible alignment for the article areas to support screen orientation changes and ensure that the content fills up the entire available screen area regardless of the orientation:
+<ol type="a">
+<li>Define the text list items and the icon list as flex containers using the <span style="font-family: Courier New,Courier,monospace">display: -webkit-flex;</span> property:
+<ul>
+<li>For the text list items, align them vertically in the middle, define a 0 margin at the top for the first item, and center-align the text for the date box.</li>
+<li>For the icon list, align the icon list so that the first and last icon are placed at the ends and the gaps between the rest of the icons are equal.</li></ul>
+<p>(The following figure applies to mobile applications only.)</p>
+<pre class="prettyprint">&lt;!--Flexible alignment of text list--&gt;
+.container .events &gt; ul &gt; li 
+{
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+&nbsp;&nbsp;&nbsp;-webkit-align-items: center;
+}
+.container .events &gt; ul &gt; li: first-child 
+{
+&nbsp;&nbsp;&nbsp;margin-top: 0;
+}
+
+.container .events &gt; ul &gt; li .date 
+{
+&nbsp;&nbsp;&nbsp;-webkit-flex: 0 0 20%;
+&nbsp;&nbsp;&nbsp;text-align: center;
+}
+
+&lt;!--Flexible alignment of icon list--&gt;
+.container .schedule .img_list 
+{
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-between;
+}</pre>
+<p align="center"><img alt="Article areas with a flexible box layout defined (in mobile applications only)" src="../../images/flexible_box_alignment.png"/></p></li>
+
+
+<li>Special consideration can be given for some screen sizes. The following example defines a specific layout for small screens (where the screen width is less than 390 pixels). (The following figure applies to mobile applications only.)
+<pre class="prettyprint">
+@media screen and (min-width: 390px) 
+{
+&nbsp;&nbsp;&nbsp;.container .schedule .img_list 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-flex-wrap: wrap;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-between;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-align-content: space-around;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;.container {display: -webkit-flex;}
+&nbsp;&nbsp;&nbsp;.container &gt; * {-webkit-align-content: center;}
+&nbsp;&nbsp;&nbsp;.container article {height: 250px;}
+}</pre>
+<p align="center"><img alt="Article areas with a flexible box layout for small screens (in mobile applications only)" src="../../images/flexible_screen_size.png"/></p>
+<p>For more information on defining screen-size-specific rules, see <a href="media_query_w.htm">Media Queries</a>.</p>
+</li></ol></li></ol>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_1.html</a></li>
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_2.html</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">alert.png</a></li>
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">folder.png</a></li>	
+ </ul>
+			
+
+<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.practices/html/web/w3c/font_w.htm b/org.tizen.ui.practices/html/web/w3c/font_w.htm
new file mode 100644
index 0000000..afbaf7f
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/font_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>CSS Fonts Module (Level 3): Manipulating Fonts</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">CSS Fonts Module Level 3 API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">CSS Fonts Module Level 3 API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>CSS Fonts Module (Level 3): Manipulating Fonts</h1>
+
+<p>You can change the text fonts easily.</p>
+
+<p>The new text features in CSS Fonts Module Level 3 API include:</p>
+<ul>
+<li>Font properties 
+<p>You can <a href="#font">use CSS font properties</a>, such as <span style="font-family: Courier New,Courier,monospace">font-style</span>, <span style="font-family: Courier New,Courier,monospace">font-weight</span>, <span style="font-family: Courier New,Courier,monospace">font-variant</span>, <span style="font-family: Courier New,Courier,monospace">font-size</span>, and <span style="font-family: Courier New,Courier,monospace">font-family</span>, to modify the appearance of text.</p></li>
+</ul> 
+
+
+<h2 id="font" name="font">Manipulating Fonts</h2>
+				
+<p>To enhance the user experience of your application, you must learn to handle fonts using CSS font properties:</p>
+
+<ol>
+<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-style</span> property within a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the Web page to apply different font styles:</p>
+
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) em{font-style: normal}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) em{font-style: italic}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) em{font-style: oblique}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;oblique&lt;/em&gt;&lt;/p&gt;
+&lt;/body&gt;
+</pre>
+
+</li>
+
+<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-weight</span> property,
+which controls the weight of the text:</p>
+
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-weight: normal}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-weight: bold}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-weight: 300}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-weight: 500}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {font-weight: 700}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;bold&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;300&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;500&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;700&lt;/em&gt;&lt;/p&gt;
+&lt;/body&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">font-variant</span> property to
+change the font to, for example, use small capital letters:
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-variant: normal}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-variant: small-caps}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-variant: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-variant: &lt;em&gt;small-caps&lt;/em&gt;&lt;/p&gt;
+&lt;/body&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">font-size</span> property, which controls the size of the font:
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-size: 150%}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-size: 1.2em}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-size: &lt;em&gt;150%&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-size: &lt;em&gt;1.2em&lt;/em&gt;&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">line-height</span> property, which controls the height of a text line:
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {line-height: 1}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {line-height: 1.5}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {line-height: 5}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;1&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;1.5&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;5&lt;/em&gt;&lt;/p&gt;
+&lt;/body&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">font-family</span> property, which assigns a specific font or its representative to an element. The list order within the <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element determines the property priority.
+<p>If the assigned font is not installed on the target, a different font is obtained based on the user system.</p>
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-family: serif}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-family: sans-serif}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-family: monospace}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-family: cursive}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {font-family: fantasy}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(6) {font-family: &#39;Arial Black&#39;, sans-serif}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(7) {font-family: Tahoma, sans-serif}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(8) {font-family: Verdana, sans-serif}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(9) {font-family: Arial, sans-serif}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;serif&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;sans-serif&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;monospace&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;cursive&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;fantasy&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;&#39;Arial Black&#39;, sans-serif&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Tahoma, sans-serif&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Verdana, sans-serif&lt;/em&gt;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Arial, sans-serif&lt;/em&gt;&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</li>
+</ol>
+
+
+<p>The following figure shows examples of manipulating the text font properties.</p>
+<p class="figure">Figure: Font properties (in mobile applications only)</p>
+<p align="center"><img alt="Font properties (in mobile applications only)" src="../../images/font_properties.png"/></p>
+
+   <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">For a complete list of CSS Fonts Module Level 3 font properties (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#property-index" target="_blank">Property index</a>.</td>
+    </tr>
+   </tbody>
+  </table>
+           
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/w3c/frame_flattening_mw.htm b/org.tizen.ui.practices/html/web/w3c/frame_flattening_mw.htm
new file mode 100644
index 0000000..3fdec22
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/frame_flattening_mw.htm
@@ -0,0 +1,60 @@
+<!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>Frame Flattening: Expanding Content According to Size</title>  
+	
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/></p>
+	</div>
+	
+<h1>Frame Flattening: Expanding Content According to Size</h1>
+
+  <p>In the Tizen WebKit, content placed within the <span style="font-family: Courier New,Courier,monospace;">&lt;frame&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;iframe&gt;</span> tags is expanded automatically according to the content size. This enables users to view the whole content at once without scrolling.</p> 
+  
+<p>This feature is supported in mobile applications only.</p>
+  
+  <p>The Tizen WebKit supports this feature since scrolling through small subframes on small screen devices is a tedious task and, occasionally, causes confusion between scrolling subframes and scrolling the Web page itself.</p> 
+  <p>To implement scrollable content in the Tizen WebKit, use the CSS <span style="font-family: Courier New,Courier,monospace;">overflow: scroll</span> or <span style="font-family: Courier New,Courier,monospace;">webkit-overflow-scrolling: touch</span> property instead of <span style="font-family: Courier New,Courier,monospace;">iframe</span>.</p>   
+	
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(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>
+
diff --git a/org.tizen.ui.practices/html/web/w3c/guides_w3c_w.htm b/org.tizen.ui.practices/html/web/w3c/guides_w3c_w.htm
new file mode 100644
index 0000000..629c2e1
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/guides_w3c_w.htm
@@ -0,0 +1,142 @@
+<!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>W3C</title> 
+ </head> 
+<body onload="prettyPrint()" style="overflow: auto;">
+ 
+<div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+		<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html">W3C/HTML5 and Supplementaries API Reference for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">W3C/HTML5 and Supplementaries API Reference for Wearable Web</a></li>
+		</ul>
+	</div></div>
+</div>	
+		
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>W3C/HTML5</h1> 
+
+<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>
+
+<ul>
+<li>
+<strong>HTML features</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: Implementing Web Forms for User Input Using HTML5 Elements</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 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>
+
+	<li><a href="multiple_screens_mw.htm">Multiple Screen Support: Supporting Different Screen Sizes</a> in <strong>mobile applications only</strong>
+	<p>Allows you to create an application that is both scalable and adaptive to multiple screen resolutions.</p></li>
+
+	<li><a href="ui_layout_ww.htm">Multiple UI Layouts: Designing Applications for Multiple Devices</a> in <strong>wearable applications only</strong>
+	<p>Allows you to design your application layout so that your application can run on multiple Tizen devices.</p></li>
+
+	<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: Managing the Device Browsing History</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> 
+<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> 
+	<p>Enables you to move, rotate, stretch, and scale elements using the CSS3 <span style="font-family: Courier New,Courier,monospace">transform</span> property.</p></li>
+	
+	<li><a href="animation_w.htm">CSS Animations Module (Level 3): Creating Animations</a> 
+	<p>Enables you to create animations using the CSS3 <span style="font-family: Courier New,Courier,monospace">animation</span> property.</p></li>
+	
+	<li><a href="transition_w.htm">CSS Transitions Module (Level 3): Changing Element Styles</a> 
+	<p>Enables you to add effects when changing the style of an element using the CSS3 <span style="font-family: Courier New,Courier,monospace">transition</span> property.</p></li>
+	
+	<li><a href="color_w.htm">CSS Color Module (Level 3): Specifying Color and Opacity</a> 
+	<p>Enables you to specify the color and opacity of HTML elements using CSS properties.</p></li>
+	
+	<li><a href="background_w.htm">CSS Backgrounds and Borders Module (Level 3): Specifying Background and Border Styles</a> 
+	<p>Enables you to specify the border and background styles of HTML elements using CSS properties.</p></li>
+	
+	<li><a href="flexible_w.htm">CSS Flexible Box Layout Module: Adjusting the Layout</a> 
+	<p>Enables you to create flexible layouts for Web applications.</p></li>
+		
+	<li><a href="multi_mw.htm">CSS Multi-column Layout Module: Creating Multi-column Layouts</a> in <strong>mobile applications only</strong>
+	<p>Enables you to create multi-column layouts for Web applications.</p></li>
+	
+	<li><a href="text_module_w.htm">CSS Text Module (Level 3): Manipulating Text</a> 
+	<p>Enables you to apply various text effects.</p></li>	
+	
+	<li><a href="basic_ui_w.htm">CSS Basic User Interface Module (Level 3): Applying Styles to HTML Documents</a> 
+	<p>Enables you to apply styles to HTML documents.</p></li>
+	
+	<li><a href="font_w.htm">CSS Fonts Module (Level 3): Manipulating Fonts</a> 
+	<p>Enables you to change the text fonts.</p></li>	
+	
+	<li><a href="woff_w.htm">WOFF File Format (1.0): Changing Fonts Using WOFF</a> 
+	<p>Enables you to encode and decode font data easily.</p></li>	
+</ul>
+</li>
+</ul>
+
+
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<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.practices/html/web/w3c/html5forms_w.htm b/org.tizen.ui.practices/html/web/w3c/html5forms_w.htm
new file mode 100644
index 0000000..cba7328
--- /dev/null
+++ b/org.tizen.ui.practices/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: Implementing Web Forms for User Input Using HTML5 Elements</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">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: Implementing Web Forms for User Input Using HTML5 Elements</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.practices/html/web/w3c/html_priority_w.htm b/org.tizen.ui.practices/html/web/w3c/html_priority_w.htm
new file mode 100644
index 0000000..886a6d6
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/html_priority_w.htm
@@ -0,0 +1,449 @@
+<!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>HTML Priorities: Understanding HTML Behavior</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#doctype">&lt;!DOCTYPE&gt; Element</a></li>
+			<li><a href="#dom">HTML DOM Tree</a></li>
+			<li><a href="#css">CSS Rule Priorities</a></li>
+			<li><a href="#js">JavaScript Behavior</a></li>	
+			<li><a href="#use">Using JavaScript Code within HTML</a></li>
+		</ul>			
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>HTML Priorities: Understanding HTML Behavior</h1> 
+
+<p>The HTML markup is not as important as before, because JavaScript APIs can be used to create various functionalities. For example, graphics APIs (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">wearable</a> applications) can be used for making games, media APIs (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">wearable</a> applications) for creating video chats, and communication APIs (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">wearable</a> applications) for various types of messaging. However, HTML remains the basis of Web applications, and it is useful to be familiar with its behavior.</p>
+
+<p>The structure of the HTML document can be classified into DOCTYPE and HTML DOM (Document Object Model). When an HTML document is loaded, the browser renders the contents in its screen as follows:</p>
+<ol>
+<li>HTML is parsed referring to the rules defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element.</li>
+<li>HTML DOM tree is established.</li>
+<li>DOM elements, including <a href="#js">references to JavaScript</a>, are arranged based on the information defined in the head element. This is called rendering.</li>
+<li>The elements are painted on the screen based on <a href="#css">CSS rules</a>.</li>
+</ol>
+
+<h2 id="doctype"><span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> Element</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element informs the browser of the HTML version and which rules it must follow. It is not a composition element of the HTML.</p>
+
+<p>The browser, based on the version defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element and DTD (Document Type Definition), decides how to handle the HTML before interpreting it. Therefore, the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element must be declared at the beginning of an HTML document.</p>
+
+<pre class="prettyprint">&lt;!--HTML5--&gt;
+&lt;!DOCTYPE html&gt;
+
+&lt;!--Prior to HTML5--&gt;
+&lt;!DOCTYPE html PUBLIC &quot;{HTML Version Information}&quot; &quot;{DTD (Document Type Definition) file link defined by Rule in HTML DOM}&quot;&gt;
+</pre>
+
+<h2 id="dom">HTML DOM Tree</h2>
+
+<p>HTML DOM is a structured model to control Web elements. It is an official W3C standard to express the document regardless of platforms or languages, and the foundation of the HTML5 APIs.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;html&gt;</span> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> elements as child nodes:</p>
+
+<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3>&lt;head&gt; element</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, JavaScript, and favicon:</p>
+
+<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="utf-8" /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt; Tizen (in mobile applications) or Tizen Wearable (in wearable applications) &lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;/common/js/ui.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> contains the following subelements:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;title&gt;</span>: Defines the title of the document.</li>
+<li><span style="font-family: Courier New,Courier,monospace;"><a href="http://www.w3.org/wiki/HTML/Elements/meta" target="_blank">&lt;meta&gt;</a></span>: Defines information, such as encoding, creator, and keywords of the document.
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <a href="http://www.w3.org/TR/css-device-adapt/#the-viewport-rule" target="_blank">viewport element</a>, which sets the screen area, is included in the meta information.</td> 
+      </tr> 
+     </tbody> 
+    </table></li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span>: Sets the styles of the document.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;noscript&gt;</span>: Adds functions to the document. </li>
+</ul>
+
+<h3>&lt;body&gt; element</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element defines the area displaying content on the browser screen:</p>
+
+<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section id=&quot;tizen_wrap&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Tizen Web App (in mobile applications) or Tizen Wearable Web App (in wearable applications)&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section id=&quot;contents&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&amp;copy; All rights reserved.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre>
+  
+   <h2 id="css" name="css">CSS Rule Priorities</h2>
+<p>The basic rule of HTML, CSS, and JavaScript is that the code is applied from the top to the bottom of the document. Sometimes the lack of understanding of the CSS rule priorities can cause a result you do not expect.</p>
+<p>The following figure illustrates this problem in mobile applications by applying a font color to a black background.</p>
+
+<p class="figure">Figure: Expected and actual result of applying a font color (in mobile applications only)</p> 
+<p align="center"><img alt="Expected and actual result of applying a font color (in mobile applications only)" src="../../images/css_result.png" /></p>
+
+<h3>Basic CSS Rules</h3>
+
+<p>When creating a CSS document, the following rules apply:</p>
+
+<ul>
+<li>When more than 1 overlapping styles are applied to the same element, only the last style is visible:
+
+<pre class="prettyprint lang-html">p {color: red}
+p {color: blue}
+&lt;!--Blue color is applied--&gt;
+</pre></li>
+<li>The style applied in the parent node at the DOM tree is inherited. For more information, see <a href="http://www.w3.org/TR/CSS21/cascade.html#inheritance" target="_blank">W3C inheritance documentation</a>.
+</li>
+<li>The style that has the highest CSS specificity is applied. The specificity of different elements is defined as follows:
+<ul>
+<li>ID attribute = 100</li>
+<li>Class attribute = 10</li>
+<li>Element = 1</li>
+</ul>
+
+<pre class="prettyprint lang-html">&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target&quot; class=&quot;target&quot;&gt;Hello World&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;style&gt;
+&nbsp;&nbsp;&nbsp;p#target {color: black} /* Specificity: 101 */
+&nbsp;&nbsp;&nbsp;p#target {color: red} /* Specificity: 101 */
+&nbsp;&nbsp;&nbsp;p.target {color: blue} /* Specificity: 11 */
+&nbsp;&nbsp;&nbsp;p {color: tomato} /* Specificity: 1 */
+&lt;/style&gt;
+&lt;!--Red color is applied--&gt;</pre>
+</li>
+<li>When the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute is used, it has the highest priority:
+<pre class="prettyprint lang-html">&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target&quot; class=&quot;target&quot;&gt;Hello World&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;style&gt;
+&nbsp;&nbsp;&nbsp;p#target {color: black !important}
+&nbsp;&nbsp;&nbsp;p#target {color: red}
+&nbsp;&nbsp;&nbsp;p.target {color: blue}
+&nbsp;&nbsp;&nbsp;p {color: tomato}
+&lt;/style&gt;
+&lt;!--Black color is applied--&gt;</pre>
+</li>
+</ul>
+
+<p>Keeping these rules in mind, you can use any of the following ways to achieve the expected result illustrated in the figure above:</p>
+<pre class="prettyprint">.contents {color: #999 !important;}
+
+section.contents {color: #999;}
+
+body .contents {color: #999;}
+
+#container &gt; .contents {color: #999;}
+</pre>
+
+<h3>Using CSS with HTML</h3>
+
+<p>There are various ways to connect CSS with HTML. Creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element.</p>
+
+<p>In the following example, the applied order of the CSS elements is as follows:</p>
+<ol>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
+<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
+</ol>
+
+<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Link in head--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Style tag in head--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p {color: tomato}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--@import in CSS area--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@import url(&quot;css/style.css&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Style attribute in HTML element--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p style=&quot;color: red&quot;&gt;Hello World&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>However, the priority order of the elements is as follows:</p>
+<ol>
+<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+</ol>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">style</span> attribute in the HTML element has the highest priority after the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute.</p>
+
+<p>Using the order above, if all other color styles are applied to <span style="font-family: Courier New,Courier,monospace;">&lt;p&gt;</span> elements, the <span style="font-family: Courier New,Courier,monospace;">style</span> attribute is used to apply the red color that has been directly defined in the HTML. This rule differs from the CSS specificity rules.</p>
+
+<p>Generally, when the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute is used, connect to the top of CSS file that has been linked externally, as illustrated in the figure below. If the attribute is applied in the middle of the CSS file, it is difficult to know the point where CSS has been applied, and to find the file connected to the source in the future. Therefore, group the CSS file at the top.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute gives the same result as connecting an external file, but it does not function correctly in older browsers (IE 5.5 and below).</td> 
+      </tr> 
+     </tbody> 
+    </table>
+<p class="figure">Figure: Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p> 
+<p align="center"><img alt="Using the @import attribute" src="../../images/using_import_attribute.png" /></p>
+
+<p>The markup in the corresponding files is as follows:</p>
+<ul>
+<li>In the HTML code:
+<pre class="prettyprint">&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
+&lt;/head&gt;
+</pre></li>
+<li>In the <span style="font-family: Courier New,Courier,monospace;">style.css</span> file:
+<pre class="prettyprint">@import url(&quot;priorities1.css&quot;);
+
+p: after {content: &quot; : linked in head&quot;}
+</pre>
+<p class="figure">Figure: Result of linking the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p> 
+<p align="center"><img alt="Result of linking the @import attribute" src="../../images/import_linked_in_head.png" /></p></li>
+<li>In the <span style="font-family: Courier New,Courier,monospace;">priorities1.css</span> file:
+<pre class="prettyprint">p: after {content: &quot; : Using @import in CSS area&quot;}
+</pre>
+<p class="figure">Figure: Result of using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</p> 
+<p align="center"><img alt="Result of using the @import attribute in the CSS area" src="../../images/import_css_area.png" /></p></li>
+</ul>
+
+ <h2 id="js" name="js">JavaScript Behavior</h2>
+<p>With the advent of HTML5, numerous powerful HTML5 APIs have been introduced. Since the usage of JavaScript has increased, it has become important to use it accurately in accordance with <a href="../../../../org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm">optimized JavaScript performance</a>.</p>
+
+<p><a href="#use">JavaScript used in Web applications</a> can be divided into the core, <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMAScript</a>, and <a href="http://www.w3.org/DOM" target="_blank">DOM</a>, which all manipulate HTML. ECMAScript is executed when a method is called, or it can be executed when an event is fired within a HTML document through a linkage with DOM.  </p>
+
+<h3>Using JavaScript with HTML</h3>
+<p>Used with HTML, JavaScript works as follows:</p>
+<ol>
+<li>During HTML parsing, the content of the <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag is parsed to JavaScript Interpreter.</li>
+<li>The Interpreter parses the received script code. </li>
+<li>Requests that need not be handled immediately are suspended.  </li>
+<li>The handled result is passed over to the browser, which continues to parse HTML.</li>
+</ol>
+
+<p>The following example shows how you can use JavaScript with HTML either by linking to a JavaScript file, or embedding it directly in the HTML code:</p>
+<pre class="prettyprint">/* Linking from HTML */
+&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
+
+/* Direct use in HTML */
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated&quot;);
+    
+&nbsp;&nbsp;&nbsp;function animate() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Execute */
+&nbsp;&nbsp;&nbsp;};
+    
+&nbsp;&nbsp;&nbsp;/* Call the animation function when the event is fired */
+&nbsp;&nbsp;&nbsp;webkitRequestAnimationFrame(animate);  
+&lt;/script&gt;
+
+</pre>
+<p>Both ways described above give the same result in behavior. However, the position of the JavaScript code affects the order in which the methods are called.</p>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Previously, adding JavaScript code within head tag was recommended because it is easy to maintain. Currently, adding it to the end of the body and executing it after parsing the HTML document is common.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+	
+<h3>JavaScript Events</h3>
+
+<p>JavaScript generally calls a method when a specific <a href="http://www.w3schools.com/jsref/dom_obj_event.asp" target="_blank">event</a> is fired. More than 70 types of events, such as onload and onclick are available.</p>
+
+<p>The following example shows the use of a simple event:</p>
+
+<pre class="prettyprint">&lt;!--HTML--&gt;
+&lt;body onload=&quot;touchEventHandler()&quot;&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* JavaScript */
+&nbsp;&nbsp;&nbsp;/* Directly assigning */  
+&nbsp;&nbsp;&nbsp;window.onload = touchEventHandler; /* Assigns the name of the subject method */
+    
+&nbsp;&nbsp;&nbsp;/* Event listener (W3C standard) */
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;touchstart&quot;, touchEventHandler, false);
+&lt;/script&gt;</pre>
+<p>Prefer using W3C standard event listener methods. The inline JavaScript code applied directly to an HTML tag is difficult to maintain. Assigning a method directly to an event is also difficult when passing parameters, as the method needs to be assigned for every event.</p>
+
+<h3>JavaScript Priorities</h3>
+
+<p>The rendering order of JavaScript code is based on the following rules:</p>
+<ul>
+<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is temporarily saved, but not handled.  </li>
+<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element is immediately handled when it is parsed.  </li>
+<li>When the temporarily saved JavaScript content is executed, the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element content is rendered first, and the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element content after it.</li>
+</ul>
+
+
+<h2 id="use" name="use">Using JavaScript Code within HTML</h2>
+
+<p>To provide users with JavaScript-based features, you must learn to use JavaScript code within an HTML document:</p>
+
+<ul>
+<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag:
+<pre class="prettyprint lang-html">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/jquery_1.9.0_min.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;head onload&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;head ready&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/head&gt;</pre> 
+
+<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is sent to Interpreter. As there are no methods to be handled immediately, its execution is suspended.</p>
+</li>
+<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag:
+<pre class="prettyprint lang-html">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/jquery_1.9.0_min.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function testLog(txt) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var logText = document.querySelector(&#39;.log&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logText.innerHTML += &#39;&lt;li&gt;JavaScript in HTML &#39; + txt + &#39;&lt;/li&gt;&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+    
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body onload&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body ready&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body&#39;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body anonymous function&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}();
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/body&gt;
+</pre>
+<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element is sent to Interpreter. The anonymous method is immediately executed, and the HTML DOM structure is set up. The methods in the <span style="font-family: Courier New,Courier,monospace;">$(document).ready</span> method and in the <span style="font-family: Courier New,Courier,monospace;">onload</span> event are executed in the stored order.</p>
+</li></ul>
+
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">jQuery has to be called from both the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> elements. The <span style="font-family: Courier New,Courier,monospace;">logText</span> variable has to be called from the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element. The method connected to the <span style="font-family: Courier New,Courier,monospace;">onload</span> event in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is not executed. </td> 
+      </tr> 
+     </tbody> 
+    </table>
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/w3c/media_query_w.htm b/org.tizen.ui.practices/html/web/w3c/media_query_w.htm
new file mode 100644
index 0000000..a8c6c41
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/media_query_w.htm
@@ -0,0 +1,342 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=9" />
+	<link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+	<link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+	<script type="text/javascript" src="../../scripts/snippet.js"></script>	
+	<script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+	<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Media Queries: Labeling Output Devices in Style Sheets</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#rule">Media Query Conditions</a></li>
+			<li><a href="#priorities">Media Query Priorities</a></li>
+			<li><a href="#create">Creating a Liquid Layout</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#mediaquery">Media Queries API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#mediaquery">Media Queries API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Media Queries: Labeling Output Devices in Style Sheets</h1>
+ 
+<p>Media queries allow you to apply the CSS differently according to the media type (type of device) and media features (viewport status). Previously, you were able to use the media type only and create Web services with fixed layouts. However, smart phones, tablets, and other devices with various resolutions require a liquid layout. HTML5 now makes various characteristics and conditional defining possible, and can be used to implement responsive Web design (RWD), which is a <a href="#create">liquid layout</a> that mainly reacts according to the device resolution. </p>
+
+<p>You can use media queries in 3 ways:</p>
+
+<ul>
+<li>In CSS
+<p>You can define attribute values depending on given conditions:</p>
+<pre class="prettyprint">@media only screen and (max-width: 480px) {styles}
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">This approach is popular since it can reduce style overlapping; however, if all the styles are applied to 1 CSS, the maintenance work efficiency decreases.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+<li>In an <span style="font-family: Courier New,Courier,monospace">@import</span> rule in CSS
+<p>You can import from CSS a file that matches the condition:</p>
+<pre class="prettyprint">@import url(example.css) not screen and (min-width: 480px)
+</pre>
+</li>
+<li>In HTML
+<p>You can directly import the CSS file that matches the condition:</p>
+<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 480px)&quot; href=&quot;example.css&quot;&gt;</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The disadvantage of this approach is that every time the condition is expanded, the HTML file must be edited. However, since this approach only imports the CSS files that match the condition, the file transmission amount can be reduced. </td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+</ul>
+
+<p>For more information on the CSS priorities when different media queries are used, see <a href="#priorities">Media Query Priorities</a>.</p>
+
+<h2 id="rule" name="rule">Media Query Conditions</h2>
+
+<p>You can define the following conditions for the media queries:</p>
+
+<ul>
+<li>Combination and relevancy
+<p>You can combine multiple conditions into 1 Boolean query with the <span style="font-family: Courier New,Courier,monospace">and</span> operator. To define a negative condition (something not being relevant), use the <span style="font-family: Courier New,Courier,monospace">not</span> operator.</p>
+<pre class="prettyprint">@media not screen and (min-width: 320px), screen and (max-width: 480px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}
+}
+</pre>
+</li>
+<li>Viewport width
+<p>You can define the query to match to a specific viewport width range using the <span style="font-family: Courier New,Courier,monospace">min-width</span> and <span style="font-family: Courier New,Courier,monospace">max-width</span> attributes.</p>
+<pre class="prettyprint">@media all and (min-width: 320px) and (max-width: 480px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}
+}
+</pre>
+</li>
+<li>Device and viewport height
+<p>The <span style="font-family: Courier New,Courier,monospace">height</span> attribute refers to restoring the viewport&#39;s height, and the <span style="font-family: Courier New,Courier,monospace">device-height</span> attribute refers to restoring the resolution set in the device.</p>
+<p>The same difference applies to the <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">aspect-ratio</span> attributes, which can assign &#39;device-&#39;.</p>
+<pre class="prettyprint">@media screen and (min-device-height: 700px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-device-height&quot;}
+}
+@media screen and (min-height: 550px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-height&quot;}
+}
+</pre>
+<p>In the above example, a device with the width-height resolution of 480/720 has the <span style="font-family: Courier New,Courier,monospace">{content: &quot;min-height&quot;}</span> rule applied as a priority in a portrait screen, but the <span style="font-family: Courier New,Courier,monospace">{content &quot;min-device-height&quot;}</span> rule applied in a landscape screen.</p> 
+
+</li>
+<li>Device aspect ratio
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">device-aspect-ratio</span> attribute to check the width-length ratio (aspect ratio) of the printing device.</p>
+<pre class="prettyprint">@media all and (device-aspect-ratio: 9/16) and (orientation: portrait),  
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;all and (device-aspect-ratio: 2/3) and (orientation: portrait) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;aspect-ratio, portrait&quot;}
+}
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The device aspect ratio is a reliable way to distinguish the portrait and landscape modes of a smart phone. However, because the aspect ratio of all the devices has to be specified, a precise rule is hard to define. (Currently wildly used screen ratios are 15:9, 16:10, 16:9, 3:2, and 4:3, but devices with other screen ratios may be added in the future.)</td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+</ul>
+
+ <h2 id="priorities" name="priorities">Media Query Priorities</h2>
+
+<p>When multiple media queries and conditions are defined, CSS is applied with the following priorities:</p>
+<ul>
+<li>In case of the CSS reiteration declaration, the CSS that has been declared last is applied.</li>
+<li>In case of specificity, the CSS with the highest specificity is applied.
+<p>The specificity is calculated as follows:</p><ul><li>id attribute = 100</li>
+<li>class attribute = 10</li>
+<li>element = 1</li></ul>
+<p>Selectors, such as <span style="font-family: Courier New,Courier,monospace">section#content &gt; .title p</span>, carry the specificity of 112.</p></li>
+<li>In case of user override, the user CSS is applied instead of the creator CSS.</li>
+<li><p>CSS is applied first based on the conditions in the <span style="font-family: Courier New,Courier,monospace">@import</span> rule, then based on the conditions in CSS, and finally based on the conditions in HTML.</p></li>
+<li><p>In media queries, regardless of CSS priority, CSS which has not been imported still exists based on the conditions.</p></li>
+</ul>
+
+<p>To apply media query, consider an example with the following files:</p>
+<pre class="prettyprint">
+&lt;!--example.html--&gt;
+&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 768px)&quot; href=&quot;c.css&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 768px)&quot; href=&quot;a.css&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (min-width: 768px)&quot; href=&quot;b.css&quot;&gt;
+&lt;style&gt;
+&nbsp;&nbsp;&nbsp;@media all and (max-width: 400px) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.example: after {content: &quot;In HTML head&quot;}
+&nbsp;&nbsp;&nbsp;}
+&lt;/style&gt;
+
+&lt;!--a.css--&gt;
+body {background-color: #ccc}
+
+@media screen and (max-width: 480px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content:&quot;a.css : width: ~ 480px&quot;}
+}
+@media screen and (min-width: 480px) and (max-width: 768px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;a.css : width: 480px ~ 768px&quot;}
+}
+
+&lt;!--b.css--&gt;
+@import url(&quot;c.css&quot;);
+
+body {background-color: #333; color: #fff}
+
+@media screen and (min-width: 768px) and (max-width: 1024px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;b.css : width: 768px ~ 1024px&quot;}
+}
+
+&lt;!--c.css--&gt;
+body {background-color: tomato}
+
+@media screen and (min-width: 768px) and (max-width: 1024px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 768px ~ 1024px&quot;}
+}
+@media screen and (min-width: 1024px) and (max-width: 1280px) 
+{
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 1024px ~ 1280px&quot;}
+}
+</pre>
+
+<p>The CSS is applied based on the viewport:</p>
+<ul>
+<li>If the viewport is 320 px:
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;a.css : width: ~ 480px&quot;</span>).</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li>
+<li>CSS is applied instead of the HTML <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> (the <span style="font-family: Courier New,Courier,monospace">a.css</span> file has higher priority than <span style="font-family: Courier New,Courier,monospace">content: &quot;In HTML head&quot;</span>).</li>
+</ul></li>
+<li>If the viewport is 700 px:
+<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;a.css : width: 480px ~ 768px&quot;</span>).</p> </li>
+<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li></ul></li>
+<li>If the viewport is 900 px:
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is imported.</li>
+<li>c.css is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;c.css : width: 768px ~ 1024px&quot;</span>). </li>
+<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is not imported.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;b.css : width: 768px ~ 1024px&quot;</span>).</li>
+</ul></li>
+</ul>
+ 
+ 
+ 	<h2 id="create" name="create">Creating a Liquid Layout</h2>
+			<p>To enhance the user experience of your application, you must learn to define media queries to determine the styles to be used in the Web document. This example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show the optimized layout on both portrait and landscape modes.</p>
+
+
+<ol>
+<li>Define a page with title and content elements:
+<pre class="prettyprint">
+&lt;header&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Media queries tutorial&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;&lt;img src=&quot;logo.png&quot; alt=&quot;Tizen&quot;&gt;&lt;/h1&gt;
+&lt;/header&gt;
+&lt;div class=&quot;container&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;section class=&quot;contents&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Section Title&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;desc&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The quick brown fox jumps over a lazy dog.  The quick brown...
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&lt;aside&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aside
+&nbsp;&nbsp;&nbsp;&lt;/aside&gt;
+&lt;/div&gt;
+</pre></li>
+<li>Define basic styles for the page, using a flexible box (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">wearable</a> applications) and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">multi-column</a> (in mobile applications only) layout with 2 columns. (The following figure applies to mobile applications only.)
+<pre class="prettyprint">
+.container 
+{
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+}
+.container aside 
+{
+&nbsp;&nbsp;&nbsp;-webkit-flex: 1 0 20%;
+}
+.contents 
+{
+&nbsp;&nbsp;&nbsp;-webkit-columns: 5em 3;
+&nbsp;&nbsp;&nbsp;-webkit-column-rule: 1px solid #999;
+&nbsp;&nbsp;&nbsp;-webkit-column-gap: 2em;
+&nbsp;&nbsp;&nbsp;-webkit-flex: 1 1 auto;
+}
+.contents h2 
+{
+&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
+}
+</pre>
+
+<p align="center"><img alt="Fixed layout example (in mobile applications only)" src="../../images/media_queries1.png" /></p>
+<p>The page is easy to view as long as the screen width is about 600 px; however, in a smaller screen below 400 px, the legibility rapidly decreases. You can edit the layout by reducing the number of columns to 1 and moving the <strong>Aside</strong> area at the bottom of the screen, but those changes then decrease legibility on a wider screen.</p>
+
+</li>
+<li>
+<p>To solve the problem, use a media query to define a liquid layout that changes according to the screen resolution:</p>
+
+<pre class="prettyprint">
+@media all and (max-width: 480px) and (orientation: portrait) 
+{
+&nbsp;&nbsp;&nbsp;.contents {-webkit-columns: 1;}
+}
+@media all and (min-width: 480px) and (max-width: 768px) 
+{
+&nbsp;&nbsp;&nbsp;.contents {-webkit-columns: 2;}
+&nbsp;&nbsp;&nbsp;.container {display: -webkit-flex;}
+}
+</pre>
+<p>With the above media query, the normal resolution has 2 columns (shown on the right in the figure), while in a smaller resolution in a portrait mode only 1 column is used (shown on the left). (The following figure applies to mobile applications only.)</p>
+<p align="center"><img alt="Liquid layout example (in mobile applications only)" src="../../images/media_queries3.png" /></p> 
+
+</li>
+<li><p>If you need to define specific styles for a certain resolution range, simply add more media queries. However, too many conditions make the maintenance harder, so carefully consider what kind of resolution ranges you need.
+</p>
+
+<p>The following conditions are generally used and cover all possibilities up to a Web browser in a PC:</p>
+<pre class="prettyprint">
+&lt;!--Portrait mode of a smart phone--&gt;
+@media screen and (max-width: 480px) and (orientation: portrait) {&lt;!--Specific layout--&gt;}
+
+&lt;!--Landscape mode of a smart phone and a small tablet--&gt;
+@media screen and (min-width: 480px) and (max-width: 768px) {&lt;!--Specific layout--&gt;}
+
+&lt;!--Tablet and a small laptop--&gt;
+@media screen and (min-width: 768px) and (max-width: 1024px) {&lt;!--Specific layout--&gt;}
+
+&lt;!--PC browser--&gt;
+@media screen and (min-width: 1024px) {&lt;!--Specific layout--&gt;}
+@media print {&lt;!--Specific layout--&gt;}
+</pre></li>
+
+</ol>
+<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/dom_forms_and_styles/media_queries" target="_blank">liquid_layout_2.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries" target="_blank">logo.png</a></li>
+ </ul>
+ 
+<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.practices/html/web/w3c/multi_mw.htm b/org.tizen.ui.practices/html/web/w3c/multi_mw.htm
new file mode 100644
index 0000000..0c5fc97
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/multi_mw.htm
@@ -0,0 +1,611 @@
+<!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>CSS Multi-column Layout Module: Creating Multi-column Layouts</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#size">Setting the Column Number and Width</a></li>
+			<li><a href="#gap">Setting the Column Gap</a></li>
+			<li><a href="#rule">Setting the Column Rule</a></li>
+			<li><a href="#span">Setting the Column Span</a></li>
+			<li><a href="#break">Setting the Column Break</a></li>
+			<li><a href="#basic">Creating a Basic Layout</a></li>
+			<li><a href="#dynamic">Creating a Layout with Dynamic Content</a></li>
+		</ul>	
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">CSS Multi-column Layout Module API for Mobile Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>CSS Multi-column Layout Module: Creating Multi-column Layouts</h1>
+ 
+
+ <p>You can arrange the screen content into columns. Using the CSS <span style="font-family: Courier New,Courier,monospace">column-</span> properties, the content elements can flow between columns when the column height or number changes. You can use the properties alone to <a href="#basic">create a basic layout</a>, or add JavaScript code to <a href="#dynamic">make the layout dynamic</a>.</p>
+
+<p>This feature is supported in mobile applications only.</p>
+ 
+ <p>You can manage the following column-related features:</p>
+<ul>
+<li><a href="#size">Setting the column number and width</a></li>
+<li><a href="#gap">Setting the column gap</a></li>
+<li><a href="#rule">Setting the column rule</a></li>
+<li><a href="#span">Setting the column span</a></li>
+<li><a href="#break">Setting the column break</a></li>
+</ul>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Up to Tizen SDK version 2.2, most CSS properties and values used in Tizen required the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix. To ensure future compatibility, these properties can now be used with or without the prefix.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+	
+<h2 id="size" name="size">Setting the Column Number and Width</h2>
+
+<p> When the layout is set to a constant number of columns using the <span style="font-family: Courier New,Courier,monospace">column-count</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-count)</span> property, the column width is set to fill the available horizontal space.</p>
+<p>In the following code snippet and figure, the column number is set to 4. As a result, on a 480 x 800 display (shown on the top), the column width is 116 px, whereas on a 720 x 1280 display (shown on the bottom), the column with is 143 px.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-count</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_count" target="_blank">multi_column_column_count/renamed_index.html</a>.</p>
+<pre class="prettyprint">
+article
+{
+&nbsp;&nbsp;&nbsp;column-count: 4;
+&nbsp;&nbsp;&nbsp;-webkit-column-count: 4;
+&nbsp;&nbsp;&nbsp;margin: 10px;
+}
+</pre>
+
+<p class="figure">Figure: 4 columns on different resolution displays</p> 
+<p align="center"><img alt="4 columns on different resolution displays" src="../../images/4_columns.png" /></p> 
+
+<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width)</span> property sets the base column width.</p>
+ <p>In the following code snippet and figure, the column width is set to 153 px, but the effective column width is 288 px for a 480 x 800 display (shown on the left) and 154 px for a 720 x 1280 display (shown on the right). The parameter sets the column to at least the defined width, but not wider than the available display space or twice the defined width. The actual column width is calculated using a <a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412/#pseudo-algorithm" target="_blank">pseudo-algorithm</a>.</p>
+<p>The code snippet shows how the multi-column layout is implemented when the vertical space is limited. If there is more content than fits the available space, the next column is set outside the available space. Using the <span style="font-family: Courier New,Courier,monospace">overflow: scroll</span> property, the column can be scrolled horizontally.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-width</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_width" target="_blank">multi_column_column_width/renamed_index.html</a>.</p>
+<pre class="prettyprint">
+article
+{
+&nbsp;&nbsp;&nbsp;width: 90vw;
+&nbsp;&nbsp;&nbsp;height: 90vh;
+&nbsp;&nbsp;&nbsp;column-width: 153px;
+&nbsp;&nbsp;&nbsp;-webkit-column-width: 153px;
+&nbsp;&nbsp;&nbsp;margin: 5vw;
+&nbsp;&nbsp;&nbsp;background: #c3c8ca;
+&nbsp;&nbsp;&nbsp;overflow: scroll;
+}
+</pre>
+
+<p class="figure">Figure: Column width 153 px on different resolution displays</p> 
+<p align="center"><img alt="Column width 153 px on different resolution displays" src="../../images/column_width.png" /></p> 
+
+<h2 id="gap" name="gap">Setting the Column Gap</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property sets the distance between columns. The property affects the column width, as the column width, gap, and margins all take available space. In the following code snippet and figure, the column gap is set to 17 px.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_gap" target="_blank">multi_column_column_gap/renamed_index.html</a>.</p>
+<pre class="prettyprint">
+article 
+{
+&nbsp;&nbsp;&nbsp;height: 303px;
+&nbsp;&nbsp;&nbsp;column-width: 153px;
+&nbsp;&nbsp;&nbsp;-webkit-column-width: 153px;
+&nbsp;&nbsp;&nbsp;column-gap: 17px;
+&nbsp;&nbsp;&nbsp;-webkit-column-gap: 17px;
+&nbsp;&nbsp;&nbsp;margin: 7px;
+&nbsp;&nbsp;&nbsp;padding: 3px;
+&nbsp;&nbsp;&nbsp;background: #c3c8ca;
+}
+</pre>
+
+<p class="figure">Figure: Column gap</p> 
+<p align="center"><img alt="Column gap" src="../../images/column_gap.png" /></p>
+
+<h2 id="rule" name="rule">Setting the Column Rule</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property displays a vertical line in the middle of the column gap.</p>
+<p>The rule has analogical parameters, such as width, line style, and color, but its size is not included in the available space, and it is a drawing similar to the background.</p>
+
+<p>Rules are only displayed in the content area. If the <span style="font-family: Courier New,Courier,monospace">padding</span> property is set in the same element, the rule appears shorter than the background. In the following code snippet and figure, the rule width is set to 5 px.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_rule" target="_blank">multi_column_column_rule/renamed_index.html</a>.</p>
+<pre class="prettyprint">article 
+{
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-width: 5px;
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-color: rgb(92, 203, 246);
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-style: solid;
+}
+</pre>
+
+<p class="figure">Figure: Column rule</p> 
+<p align="center"><img alt="Column rule" src="../../images/column_rule.png" /></p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In Tizen SDK version 2.2, to avoid displaying the rules incorrectly, do not use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property with horizontal scrolling of the columns.</td> 
+      </tr> 
+     </tbody>
+</table>
+
+<h2 id="span" name="span">Setting the Column Span</h2>
+<p>By default, all elements within the columns are no wider than the column width. The <span style="font-family: Courier New,Courier,monospace">column-span</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-span</span>) property can be used to display content across all columns.</p>
+<p>When using this property with column elements which have the <span style="font-family: Courier New,Courier,monospace">column-count</span> or <span style="font-family: Courier New,Courier,monospace">column-width</span> property set, the following restrictions apply:</p>
+<ul>
+<li>Column element height is not used and elements in columns take more vertical space than is set in height.</li>
+<li>If the column element has the <span style="font-family: Courier New,Courier,monospace">overflow</span> property set to <span style="font-family: Courier New,Courier,monospace">hidden</span>, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is ignored.</li>
+<li>An element using the <span style="font-family: Courier New,Courier,monospace">column-span</span> property does not have to be a direct child of the column element.</li>
+</ul>
+<p>In the figure below, the blue arrow shows the order of the column elements. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is set to  <span style="font-family: Courier New,Courier,monospace">all</span>, as in the following code snippet.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-span</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_span" target="_blank">multi_column_column_span/renamed_index.html</a>.</p>
+<pre class="prettyprint">
+article.left header 
+{
+&nbsp;&nbsp;&nbsp;column-span: all;
+&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
+}
+</pre>
+
+<p class="figure">Figure: Column span</p> 
+<p align="center"><img alt="Column span" src="../../images/column_span.png" /></p>
+
+<h2 id="break" name="break">Setting the Column Break</h2>
+<p>By default, column elements are broken to balance column height. The <span style="font-family: Courier New,Courier,monospace">break-before</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-before</span>), <span style="font-family: Courier New,Courier,monospace">break-after</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-after</span>), and <span style="font-family: Courier New,Courier,monospace">break-inside</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-inside</span>) properties can be used to define that an element cannot be broken between columns (set to <span style="font-family: Courier New,Courier,monospace">avoid</span>), or that an element must begin or end within a given column.</p>
+
+<p>The following code snippet and figure illustrate the use of the <span style="font-family: Courier New,Courier,monospace">break-</span> property. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">break-</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">break-before</span> property is set to  <span style="font-family: Courier New,Courier,monospace">always</span>.</p>
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-break</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_break" target="_blank">multi_column_column_break/renamed_index.html</a>.</p>
+<pre class="prettyprint">
+article.lower section
+{
+&nbsp;&nbsp;&nbsp;break-before: always;
+&nbsp;&nbsp;&nbsp;-webkit-column-break-before: always;
+}
+</pre>
+
+<p class="figure">Figure: Column break</p> 
+<p align="center"><img alt="Column break" src="../../images/column_break.png" /></p>
+
+<h2 id="basic" name="basic">Creating a Basic Layout</h2>
+
+<p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a basic layout using CSS:</p>
+
+<ol>
+<li>
+<p>Create the HTML layout, defining separate sections for the column content and including an image file:</p>
+<pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;article id=&quot;article&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 1&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Lorem ipsum dolor (...), id.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/pinwheel_green.png&quot; alt=&quot;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Maecenas at (...)tortor.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 2&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot; alt=&quot;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Nullam bibendum (...) Curabitur.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/Tizen_WhiteFold_4.png&quot; alt=&quot;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 3&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Sed sagittis, (...) Vivamus sed est sit amet.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img id=&quot;figure&quot; src=&quot;images/pinwheel_yellow.png&quot; alt=&quot;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Pellentesque habitant (...). Duis lobortis, nibh.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&lt;/article&gt;
+&lt;/body&gt;
+</pre></li>
+
+<li>Set the CSS column properties:
+<ol type="a">
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element acts as a multi-column container. Set the <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span>) property to enable the multi-column layout:</p>
+
+<pre class="prettyprint">
+article 
+{
+&nbsp;&nbsp;&nbsp;width: 80vw;
+&nbsp;&nbsp;&nbsp;column-width: 119px;
+&nbsp;&nbsp;&nbsp;-webkit-column-width: 119px;
+
+&nbsp;&nbsp;&nbsp;margin: 2vh 5vw;
+&nbsp;&nbsp;&nbsp;padding: 2vh 5vw;
+&nbsp;&nbsp;&nbsp;background: #c3c8ca;</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> property defines the default column width but the visible width is not always similar. An algorithm calculates the width according to available space. Normally, a column has a different display width from the one set in the property because as the columns are sized to fill all available space.</p>
+<p>For example, on a 480 x 800 display with portrait orientation, the device width is 123 px, whereas on a 720 x 1280 display with a landscape orientation, the width is 120 px. The space available for columns is the <span style="font-family: Courier New,Courier,monospace">width</span> attribute value reduced by <span style="font-family: Courier New,Courier,monospace">padding</span>, in this case 80vw - (2 * 5vw) = 70vw, which means 70/100 width of the device display.</p>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property to set the distance between columns:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;column-gap: 10px;
+&nbsp;&nbsp;&nbsp;-webkit-column-gap: 10px;
+</pre>
+</li>
+<li>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property to draw a vertical line between columns. Define the width, color, and style of the rule:</p>
+
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-width: 1px;
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-color: #677784;
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-style: solid;
+&nbsp;&nbsp;&nbsp;column-rule-width: 1px;
+&nbsp;&nbsp;&nbsp;column-rule-color: #677784;
+&nbsp;&nbsp;&nbsp;column-rule-style: solid;
+}</pre>
+
+<p>The rule width does not increase the distance between columns. It is drawn under the column gap and can be even wider than the gap.</p>
+
+</li></ol>
+
+ <p>The figure below shows the layout with the <span style="font-family: Courier New,Courier,monospace">column-rule</span> <span style="font-family: Courier New,Courier,monospace">width</span> set to 40 px and the <span style="font-family: Courier New,Courier,monospace">column-gap</span> set to 10 px.</p>
+
+<p class="figure">Figure: Column settings</p> 
+<p align="center"><img alt="Column settings" src="../../images/column_settings.png" /></p>
+</li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">footer</span> element with the display height set to 5/100 and padding set to 2 * 2vh:</p> 
+
+<pre class="prettyprint">
+footer 
+{
+&nbsp;&nbsp;&nbsp;padding: 2vh;
+&nbsp;&nbsp;&nbsp;height: 5vh;
+&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
+}
+</pre>
+</li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">section</span> elements setting the <span style="font-family: Courier New,Courier,monospace">border-bottom</span> and vertical <span style="font-family: Courier New,Courier,monospace">padding</span> values. It is not necessary to define horizontal padding, as it has been defined for the <span style="font-family: Courier New,Courier,monospace">article</span> element.</p>
+
+<pre class="prettyprint">
+article&gt;section
+{
+&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #d8d9d4;
+&nbsp;&nbsp;&nbsp;padding: 4px 0;
+&nbsp;&nbsp;&nbsp;text-align: center;
+}
+</pre>
+</li>
+<li>
+<p>Set image elements to have an automatic <span style="font-family: Courier New,Courier,monospace">margin</span> to center them within the column.</p>
+<p>In case of the image whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">figure</span>, set it to be a floating element with text drawn around it.</p>
+
+<pre class="prettyprint">
+img{
+&nbsp;&nbsp;&nbsp;display: block;
+&nbsp;&nbsp;&nbsp;margin: 4px auto;
+}
+
+#figure
+{
+&nbsp;&nbsp;&nbsp;float: right;	
+&nbsp;&nbsp;&nbsp;margin: 4px;
+}
+</pre>
+</li></ol>
+
+<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
+
+<p class="figure">Figure: Basic layout on a 480 x 800 display</p> 
+<p align="center"><img alt="Basic layout on a 480 x 800 display" src="../../images/basic_layout_480x800.png" /></p>
+
+<p class="figure">Figure: Basic layout on a 720 x 1280 display</p> 
+<p align="center"><img alt="Basic layout on a 720 x 1280 display" src="../../images/basic_layout_720x1280.png" /></p>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up" target="_blank">renamed_index.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/css" target="_blank">style.css</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">pinwheel_green.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">pinwheel_yellow.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_Pinwheel_Secondary_Confetti.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
+ </ul>
+			
+				<h2 id="dynamic" name="dynamic">Creating a Layout with Dynamic Content</h2>
+				
+			<p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a layout displaying a varying amount of content using CSS:</p>
+<ol>
+<li>
+<p>Create the HTML layout. The <span style="font-family: Courier New,Courier,monospace">article</span> element displays the columns, and the <span style="font-family: Courier New,Courier,monospace">nav</span> element contains buttons to add and remove content in the columns.</p>
+<pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;article id=&quot;article&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;/article&gt;
+&nbsp;&nbsp;&nbsp;&lt;nav&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;addSections&quot; href=&quot;#&quot;&gt;Add images&lt;/a&gt; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;howMany&quot; value=&quot;3&quot;&gt; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;removeGroup&quot; href=&quot;#&quot;&gt;Remove last Group&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/nav&gt;
+&nbsp;&nbsp;&nbsp;&lt;footer&gt; Multicolumn Layout Tutorial 02&lt;/footer&gt;
+&lt;/body&gt;
+</pre>
+</li>
+<li>Set the CSS properties:
+<ol type="a">
+<li>
+<p>Define the CSS display and column properties:</p>
+<pre class="prettyprint">
+body 
+{
+&nbsp;&nbsp;&nbsp;display: flex;
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+&nbsp;&nbsp;&nbsp;flex-direction: column;
+&nbsp;&nbsp;&nbsp;-webkit-flex-direction: column;
+&nbsp;&nbsp;&nbsp;background: #fefffa;
+}
+</pre>
+</li>
+<li>
+<p>Set the <span style="font-family: Courier New,Courier,monospace">article</span>, <span style="font-family: Courier New,Courier,monospace">nav</span> and <span style="font-family: Courier New,Courier,monospace">footer</span> elements in one column using the flexible box layout.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">nav</span> element is also a flexible box layout container to set UI elements in.</p>
+<pre class="prettyprint">
+nav 
+{
+&nbsp;&nbsp;&nbsp;height: 20vh;
+&nbsp;&nbsp;&nbsp;padding-left: 20%;
+&nbsp;&nbsp;&nbsp;padding-top: 10px;
+&nbsp;&nbsp;&nbsp;display: flex;
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+&nbsp;&nbsp;&nbsp;flex-flow: row wrap;
+&nbsp;&nbsp;&nbsp;-webkit-flex-flow: row wrap;
+&nbsp;&nbsp;&nbsp;flex: none;
+&nbsp;&nbsp;&nbsp;-webkit-flex: none;
+&nbsp;&nbsp;&nbsp;justify-content: space-around;
+&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-around;
+&nbsp;&nbsp;&nbsp;align-items: center;
+&nbsp;&nbsp;&nbsp;-webkit-align-items: center;
+&nbsp;&nbsp;&nbsp;background: url(../images/white_logo.png) no-repeat;
+&nbsp;&nbsp;&nbsp;background-position: 2%;
+&nbsp;&nbsp;&nbsp;background-size: auto 70%;
+}
+</pre>
+</li>
+<li>
+<p>Define the styles for the <span style="font-family: Courier New,Courier,monospace">a</span> elements within the <span style="font-family: Courier New,Courier,monospace">nav</span> element to make them appear as buttons:</p>
+<pre class="prettyprint">
+nav a 
+{
+&nbsp;&nbsp;&nbsp;margin: 3px;
+&nbsp;&nbsp;&nbsp;border-radius: 5px;
+&nbsp;&nbsp;&nbsp;padding: 5px 15px;
+&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
+&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;font-weight: bold;
+}
+</pre>
+<p>When the user taps the <strong>Add images</strong> button, the images and their descriptions are displayed.</p>
+</li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">input</span> element (with the property type set to <span style="font-family: Courier New,Courier,monospace">number</span>) style with an increased height to match the buttons around it:</p>
+<pre class="prettyprint">
+nav input
+{
+&nbsp;&nbsp;&nbsp;width: 50px;
+&nbsp;&nbsp;&nbsp;height: 2em;
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element contains the column properties. Use the <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span> property to set the column width. The real width is calculated based on available space.</p>
+<pre class="prettyprint">
+article 
+{
+&nbsp;&nbsp;&nbsp;width: 90vw;
+&nbsp;&nbsp;&nbsp;column-width: 136px;
+&nbsp;&nbsp;&nbsp;-webkit-column-width: 136px;
+&nbsp;&nbsp;&nbsp;margin: 1vh 2vh;
+&nbsp;&nbsp;&nbsp;padding: 1vh;
+&nbsp;&nbsp;&nbsp;background: #c3c8ca;
+}
+</pre>
+</li>
+<li>
+<p>Set the images within the <span style="font-family: Courier New,Courier,monospace">article</span> element with a block display to separate them from text:</p>
+<pre class="prettyprint">
+article img 
+{
+&nbsp;&nbsp;&nbsp;margin: 0 auto;
+&nbsp;&nbsp;&nbsp;display: block;
+}
+</pre>
+</li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">column-span</span> property as <span style="font-family: Courier New,Courier,monospace">all</span> for the <span style="font-family: Courier New,Courier,monospace">h1</span> elements:</p>
+<pre class="prettyprint">
+article&gt;h1 
+{
+&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.5);
+&nbsp;&nbsp;&nbsp;padding: 4px;
+&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;color: #eed484;
+&nbsp;&nbsp;&nbsp;column-span: all;
+&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
+}
+</pre>
+<p> As a result, the <span style="font-family: Courier New,Courier,monospace">h1</span> elements are spread across the columns. When the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is used, you cannot have more columns than can fit in the available horizontal space.</p>
+</li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">break-inside</span> property as <span style="font-family: Courier New,Courier,monospace">avoid</span> to avoid breaking elements between columns:</p>
+<pre class="prettyprint">
+article&gt;section 
+{
+&nbsp;&nbsp;&nbsp;break-inside: avoid;
+&nbsp;&nbsp;&nbsp;-webkit-column-break-inside: avoid;
+&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #d8d9d4;
+&nbsp;&nbsp;&nbsp;padding: 4px 0;
+&nbsp;&nbsp;&nbsp;text-align: center;
+}
+</pre>
+</li>
+<li>
+<p>Set the <span style="font-family: Courier New,Courier,monospace">footer</span> size:</p>
+<pre class="prettyprint">
+footer 
+{
+&nbsp;&nbsp;&nbsp;padding: 2vh;
+&nbsp;&nbsp;&nbsp;height: 5vh;
+&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Add the JavaScript code to make the content dynamic:
+<ol type="a">
+<li>
+<p>Declare a variable for the images. Elements included in the variable amount to data displayed in a column layout, such as a newsfeed:</p>
+<pre class="prettyprint">
+var images = [&quot;images/pinwheel_green.png&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_WhiteFold_4.png&quot;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/pinwheel_yellow.png&quot;];
+</pre>
+</li>
+<li>
+<p>Declare a variable for the input element for selecting the number of images added to the content:</p>
+<pre class="prettyprint">
+var howManyInput;
+</pre>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">addGroup()</span> method with the input parameter value to add random images to the column layout and initialize the button events:</p>
+
+<pre class="prettyprint">
+window.onload = function() 
+{
+&nbsp;&nbsp;&nbsp;addGroup(4);
+&nbsp;&nbsp;&nbsp;howManyInput = document.getElementById(&#39;howMany&#39;);
+&nbsp;&nbsp;&nbsp;var addBtn = document.getElementById(&#39;addSections&#39;);
+&nbsp;&nbsp;&nbsp;addBtn.onclick = function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addGroup(howManyInput.value);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;var removeBtn = document.getElementById(&#39;removeGroup&#39;);
+&nbsp;&nbsp;&nbsp;removeBtn.onclick = function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;removeGroup();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;};
+};
+</pre>
+</li>
+<li>
+<p>Declare the <span style="font-family: Courier New,Courier,monospace">h1No</span> variable containing the number of <span style="font-family: Courier New,Courier,monospace">h1</span> elements included in the <span style="font-family: Courier New,Courier,monospace">article</span> elements, and one added to next lines.</p>
+
+<p>Declare the <span style="font-family: Courier New,Courier,monospace">newHTML</span> variable to add new content to the column layout. Each added element contains an <span style="font-family: Courier New,Courier,monospace">h1</span> element as a header, and <span style="font-family: Courier New,Courier,monospace">section</span> elements. Include an <span style="font-family: Courier New,Courier,monospace">img</span> element with a text description in each <span style="font-family: Courier New,Courier,monospace">section</span> element to display a random image. The <span style="font-family: Courier New,Courier,monospace">art</span> variable is initialized, and new HTML code (<span style="font-family: Courier New,Courier,monospace">newHTML</span>) is concatenated with the existing one (<span style="font-family: Courier New,Courier,monospace">innerHTML</span>):</p>
+<pre class="prettyprint">
+function addGroup(howMany) 
+{
+&nbsp;&nbsp;&nbsp;var h1No = document.querySelectorAll(&#39;article&gt;h1&#39;).length + 1;
+&nbsp;&nbsp;&nbsp;var newHTML = &quot;&lt;h1&gt;Group &quot; + h1No + &quot;&lt;/h1&gt;&quot;;
+&nbsp;&nbsp;&nbsp;var i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; howMany; ++i) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += &quot;&lt;section&gt;&lt;img alt=&#39;&#39; src=&#39;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += images[Math.floor(Math.random() * 4)];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += &quot;&#39;&gt;Lorem ipsum dolor sit amet diam sodales rutrum.&lt;/section&gt;&quot;;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;var art = document.getElementById(&quot;article&quot;);
+&nbsp;&nbsp;&nbsp;art.innerHTML += newHTML;
+}
+</pre>
+</li>
+<li>
+<p>When the user taps the <strong>Remove last Group</strong> button, the <span style="font-family: Courier New,Courier,monospace">removeGroup()</span> method is called to remove the group of images that was added last. Use the <span style="font-family: Courier New,Courier,monospace">all</span> variable to select all  <span style="font-family: Courier New,Courier,monospace">h1</span> elements in the content using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method. If the <span style="font-family: Courier New,Courier,monospace">last</span> value is less than 0, there is no element to remove. Use the <span style="font-family: Courier New,Courier,monospace">removeNextSibling()</span> method to recursively delete the next sibling element, and the  <span style="font-family: Courier New,Courier,monospace">removeChild()</span> method to remove the <span style="font-family: Courier New,Courier,monospace">h1</span> elements from its parent.</p>
+<pre class="prettyprint">
+function removeGroup() 
+{
+&nbsp;&nbsp;&nbsp;var all = document.querySelectorAll(&#39;article&gt;h1&#39;);
+&nbsp;&nbsp;&nbsp;var last = all.length - 1;
+&nbsp;&nbsp;&nbsp;if (last &lt; 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;removeNextSibling(all[last].nextSibling);
+&nbsp;&nbsp;&nbsp;all[last].parentElement.removeChild(all[last]);
+}
+</pre>
+</li>
+</ol>
+</li></ol>
+<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
+
+<p class="figure">Figure: Dynamic layout on a 480 x 800 display</p> 
+<p align="center"><img alt="Dynamic layout on a 480 x 800 display" src="../../images/dynamic_layout_480x800.png" /></p>
+
+<p class="figure">Figure: Dynamic layout on a 720 x 1280 display</p> 
+<p align="center"><img alt="Dynamic layout on a 720 x 1280 display" src="../../images/dynamic_layout_720x1280.png" /></p>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up" target="_blank">renamed_index.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/css" target="_blank">style.css</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/js" target="_blank">main.js</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">pinwheel_green.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">pinwheel_yellow.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">Tizen_Pinwheel_Secondary_Confetti.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">white_logo.png</a></li>
+ </ul>
+			
+ 
+<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.practices/html/web/w3c/multiple_screens_mw.htm b/org.tizen.ui.practices/html/web/w3c/multiple_screens_mw.htm
new file mode 100644
index 0000000..a6f9aa3
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/multiple_screens_mw.htm
@@ -0,0 +1,372 @@
+<!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>Multiple Screen Support: Supporting Different Screen Sizes</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#key">Key Concepts</a></li>
+            <li><a href="#ui">UI Scalability</a></li>
+            <li><a href="#create">Creating Applications Supporting Multiple Screens</a></li>
+            <li><a href="#resolution">Image Resolution Optimization</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Multiple Screen Support: Supporting Different Screen Sizes</h1>
+  
+  <p>Tizen is available in various devices which support different screen sizes and resolutions. When developing Tizen Web applications, you must take this into account if you want your application to function well in various device models.</p>
+
+<p>This feature is supported in mobile applications only.</p>
+
+  <p>Before <a href="#create">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key">key concepts of multiple screen support</a>.</p>
+  <p>Tizen provides the <a href="#ui">UI scalability</a> resolution feature, which allows you to create scalable applications.</p>
+  <p>To optimize images used in Web applications, images based on a single resource can be used in <a href="#resolution">various resolutions</a>.</p>
+  <h2 id="key" name="key">Key Concepts</h2>
+  <p>Before building a Web application for multiple resolutions, make sure you are familiar with the following <a href="http://www.w3.org/" target="_blank">W3C</a> Web content scaling standards, which must be taken into account when developing Web applications:</p>
+  <ul>
+   <li>Viewport meta tag</li>
+   <li>CSS media query</li>
+  </ul>
+  <h3 id="viewport" name="viewport">Viewport Meta Tag</h3>
+  <p>A viewport defines the application area that displays the Web page content.</p>
+  <p>In a Web browser, the viewport size depends on the browser window size. If the viewport is smaller than the Web content size, horizontal and vertical scrollbars are displayed for page navigation. The Web browser viewport does not support the zoom feature. However, in a mobile Web browser, there are no window scrollbars and the viewport supports the zoom feature.</p>
+  <p>The <a href="http://www.w3.org/TR/mwabp/#bp-viewport" target="_blank">viewport meta tag</a> enables you to customize the viewport size and zoom levels in a majority of mobile Web browsers. Using this tag, you can set the width, height, initial scale, and scale range for Web pages.</p>
+  <p>To use the viewport meta tag while developing Web applications, you must note the following:</p>
+  <ul>
+   <li>The <span style="font-family: Courier New,Courier,monospace">device-height</span> and <span style="font-family: Courier New,Courier,monospace">device-width</span> attributes defined in the viewport meta tag are not the same as the real device width and height in pixels.</li>
+   <li>Using the viewport meta tag, the Web browsers of different devices display the same content with different layout size and scale factor. The scale factor is calculated using the device pixel ratio (DPR).</li>
+  </ul>
+  <h3 id="css" name="css">CSS Media Query</h3>
+  <p>The <a href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank">CSS media query</a> enables you to set conditions for particular media features and types to apply different CSS files for the application content. For Web content scaling, you can use the CSS media query to, for example:</p>
+  <ul>
+   <li>Define the image resource to be used based on the screen dots per inch (DPI) ratio.</li>
+   <li>Determine the CSS layout to be used based on the screen width.</li>
+  </ul>
+  <p></p>
+  <h2 id="ui" name="ui">UI Scalability</h2>
+  <p>With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application&#39;s logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the <a href="#viewport">viewport meta tag</a> to fit the Web page into the device screen, and the <span style="font-family: Courier New,Courier,monospace">rem</span> unit to determine the size of the Tizen Web UI components.</p>
+  <h3 id="set" name="set">Setting the Viewport</h3>
+  <p>Tizen devices support a variety of screen resolutions and dots per inch (DPI) values. If the viewport meta tag is not defined, TAU uses the default viewport width and scale factor. This ensures that Web content layout varies between different screen resolutions.</p>
+  <p>In the following example, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, which is determined by the width of the Tizen device. The <span style="font-family: Courier New,Courier,monospace">device-width</span> value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)</p>
+  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</pre>
+  <p>If the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (<span style="font-family: Courier New,Courier,monospace">http://tizen.org</span>) on different devices with the viewport width set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
+  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;</pre>
+  <table>
+   <caption>
+     Table: Layout size and scale factor
+   </caption>
+   <tbody>
+    <tr>
+     <th>Device screen resolution</th>
+     <th>Real screen DPI</th>
+     <th>Device DPI</th>
+     <th>Web browser page</th>
+     <th>Viewport width</th>
+     <th>Scale factor</th>
+    </tr>
+    <tr>
+     <td style="text-align:center;">720 x 1280</td>
+     <td style="text-align:center;">306</td>
+     <td style="text-align:center;">320</td>
+     <td style="text-align:center;"><img alt="captured screen1" src="../../images/captured_screen1.png" /></td>
+     <td style="text-align:center;">360 px</td>
+     <td style="text-align:center;">2.0</td>
+    </tr>
+    <tr>
+     <td style="text-align:center;">480 x 800</td>
+     <td style="text-align:center;">218</td>
+     <td style="text-align:center;">240</td>
+     <td style="text-align:center;"><img alt="captured screen2" src="../../images/captured_screen2.png" /></td>
+     <td style="text-align:center;">320 px</td>
+     <td style="text-align:center;">1.5</td>
+    </tr>
+   </tbody>
+  </table>
+  <h3 id="web" name="web">Working with Tizen Web Winsets</h3>
+  <p>The default sizes of Tizen Web winsets (such as Popup, Button, and Checkbox) are designed based on the reference viewport DPI of 160. Therefore, these winsets are of similar sizes on any Tizen device if the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
+  <p>If you manually set the viewport width of your application to a fixed value, the Tizen Web winsets may not fit appropriately in the application. To avoid the problem, Tizen Web winsets use the <span style="font-family: Courier New,Courier,monospace">rem</span> unit for the winset length, which depends on the base font size of the winset. Each Tizen Web winset theme has its own base font size, and the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element font size is also set to the base font size. If the viewport width is set to a fixed value, this base font size is recalculated and set to the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element to adjust the Tizen Web winset sizes accurately.</p>
+  <h2 id="create" name="create">Creating Applications Supporting Multiple Screens</h2>
+  <p>To create an application that supports multiple screen sizes, you must consider the following while coding your application:</p>
+  <ul>
+   <li>Configuring the viewport</li>
+   <li>Optimizing resources</li>
+   <li>Creating screen resolution-independent UI</li>
+  </ul>
+  <h3 id="configure" name="configure">Configuring the Viewport</h3>
+  <p>To use UI scalability in your application, set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag while <a href="../../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm">creating a Web application project</a> in IDE. To configure the viewport in the Tizen Web applications, add the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
+  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;&gt;</pre>
+  <h3 id="optimize" name="optimize">Optimizing Resources</h3>
+  <p>By default, the Tizen Advanced UI (TAU) consists of the HD Web winsets. The winset scale is lowered for lower screen resolution devices. To optimize resources for different screen resolutions and devices, use the <a href="#css">CSS media query</a> for different resolutions available in Tizen. You can use CSS media queries in the HTML or CSS files.</p>
+  <p>In the HTML file:</p>
+  <pre class="prettyprint">&lt;link media=&quot;only screen and (min-resolution: 320dpi)&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;high-quality-images.css&quot; type= &quot;text/css&quot; rel=&quot;stylesheet&quot;&gt;</pre>
+  <p>In the CSS file:</p>
+  <pre class="prettyprint lang-html">@media screen and (max-resolution: 159dpi)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+
+@media screen and (min-resolution: 160dpi and max-resolution: 239dpi)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+
+@media screen and (min-resolution: 240dpi and max-resolution: 319dpi)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+
+@media screen and (min-resolution: 320dpi)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+</pre>
+  <p>You can also set different layout and resources for the portrait and landscape views in the CSS file:</p>
+  <pre class="prettyprint lang-html">@media screen and (orientation: portrait)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+
+@media screen and (orientation: landscape)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+</pre>
+  <h3 id="independent" name="independent">Creating Screen Resolution-independent UI</h3>
+  <p>The Tizen base font size is 22 px. This base font size value varies based on the device screen resolution. However, to create a screen resolution-independent UI, the Web browser engine renders the base font size as a logical pixel size instead of a physical pixel size.</p>
+  <h2 id="resolution" name="resolution">Image Resolution Optimization</h2>
+
+  <p>In Web applications, optimization of applications for various platforms (regarding devices, OS, and resolution) is efficient.</p>
+  <p><a href="media_query_w.htm">Media Queries</a> and <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/" target="blank">Flexible Box Layout</a> can be used to create flexible layouts, and to build the <a href="https://developer.tizen.org/downloads/sample-web-applications/load-web-app-tizen-sdk" target="blank">deployable package</a> easily.</p>
+
+  <p>Images can be used in Web applications in the following ways:</p>
+  <ul><li><span style="font-family: Courier New,Courier,monospace">IMG</span> tag linking images directly to HTML</li>
+  <li>CSS <span style="font-family: Courier New,Courier,monospace">background</span> property expressing images as a background in HTML</li>
+  <li><a href="../../../../org.tizen.guides/html/web/w3c/graphics/svg_w.htm">SVG (Scalable Vector Graphics)</a>, <a href="../../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a>, and <a href="http://www.khronos.org/registry/webgl/specs/latest/" target="blank">WebGL</a> APIs implementing graphics in HTML</li>
+  </ul>
+  <p>When selecting an option from the list above, consider the type of the image resource you are going to use.</p>
+  <p>You can use the following types of image resources:</p>
+  <ul><li><a href="#photos">Photos</a></li>
+<li><a href="#icons">Icons</a></li>
+
+    <li><a href="#animated">Animated images</a></li>
+
+    </ul>
+    <h3 id="photos" name="photos">Photos</h3>
+    <p>An image can be added to an application using the HTML <span style="font-family: Courier New,Courier,monospace">img</span> tag, or CSS <span style="font-family: Courier New,Courier,monospace">background</span> property as shown in the following example:</p>
+  <pre class="prettyprint">&lt;!--HTML--&gt;
+&lt;img src=&quot;images/sample.jpg&quot; alt=&quot;sample image&quot; /&gt;
+
+&lt;!--CSS--&gt;
+.photo
+{
+&nbsp;&nbsp;&nbsp;background: url(../images/sample.jpg) 0 0 no-repeat;
+&nbsp;&nbsp;&nbsp;background-size: 100%;
+&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;height: 200px;
+}
+</pre>
+<p>In terms of performance, there is no difference between the options.</p>
+
+<p>The image color is expressed based on pixels. Therefore, the higher resolution an image has, the better it looks on a large screen. For full HD display, a resolution bigger than the image size displayed on the screen is needed. However, since a high resolution image tends to have a large size, limit the image size as to fit the maximum screen size:</p>
+<ul><li>1024 x 768 px: 90 KB</li><li>300 x 200 px: 39 KB</li><li>300 x 200 px: 15 KB</li></ul>
+<p>Current full HD displays have a resolution that is 1.5 to 2 times bigger than the actual screen size. The image quality is guaranteed if you size images as 2 times bigger than their original size.</p>
+<pre class="prettyprint">img
+{
+&nbsp;&nbsp;&nbsp;max-width: 100%;
+}
+</pre>
+
+<p class="figure">Figure: Enlarging a low-resolution image</p>
+<p align="center"><img alt="Enlarging a low-resolution image" src="../../images/enlarge_low_res_image.png" /></p>
+  <h3 id="icons" name="icons">Icons</h3>
+    <p>Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 <span style="font-family: Courier New,Courier,monospace">background-size</span> property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px.</p>
+    <pre class="prettyprint">.prev_icon, .next_icon
+{
+&nbsp;&nbsp;&nbsp;padding-left: 30px;
+&nbsp;&nbsp;&nbsp;height: 30px;
+&nbsp;&nbsp;&nbsp;line-height: 30px;
+&nbsp;&nbsp;&nbsp;font-size: 1.2em;
+&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
+&nbsp;&nbsp;&nbsp;background-position: 0 50%;
+&nbsp;&nbsp;&nbsp;background-size: auto 20px;
+}
+
+.prev_icon.icon1
+{
+&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow_left_01.png);
+}
+</pre>
+
+<p>When multiple icons are used on a page, all the image files are called separately. This slows down the loading speed and causes a large number of network roundtrips, as illustrated in the figure below.</p>
+
+<p class="figure">Figure: Network speed when calling each image separately</p>
+<p align="center"><img alt="Calling each of image separately" src="../../images/calling_img_sep.png"/></p>
+
+<p>You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the <span style="font-family: Courier New,Courier,monospace">background-position</span> property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows.
+</p>
+<pre class="prettyprint lang-html">.prev_icon, .next_icon
+{
+&nbsp;&nbsp;&nbsp;background-size: 20px auto; &lt;!--Full HD Display--&gt;
+&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow.png);
+}
+
+.prev_icon.icon1
+{
+&nbsp;&nbsp;&nbsp;background-position: 0 0;
+}
+
+.prev_icon.icon2
+{
+&nbsp;&nbsp;&nbsp;background-position: 0 -50px;
+}
+</pre>
+<p class="figure">Figure: Network speed when using sprite images</p>
+<p align="center"><img alt="Network speed when using sprite image" src="../../images/network_speed_sprite.png" /></p>
+     <h3 id="animated" name="animated">Animated Images</h3>
+    <p>Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG.</p>
+
+    <p>To create a simple and repetitive animation effect as below as effectively as possible, use GIF images, JavaScript, or the CSS3 <span style="font-family: Courier New,Courier,monospace;">animation</span> attribute.</p>
+    <p class="figure">Figure: JAVA mascot character in GIF (source: <a href="http://lea.verou.me" target="_blank">http://lea.verou.me</a>)</p>
+    <p align="center"><img alt="JAVA mascot character  in GIF" src="../../images/mascot.gif"/></p><br/>
+
+    <p>Below, the network capacity usage and timeline using the following animation types are compared using the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a>:</p>
+    <ul>
+    <li><a href="#gif">GIF animation</a></li>
+    <li><a href="#js">JavaScript animation</a></li>
+    <li><a href="#css3">CSS3 animation</a></li>
+    </ul>
+
+    <h4 id="gif" name="gif">GIF Animation</h4>
+
+    <p>Using GIF animation, the resource usage is as follows:</p>
+    <ul><li>Events: Fires only the painting event</li>
+    <li>Memory: 3 ~ 4 MB</li>
+    <li>Network: 10 ~ 25 ms</li>
+</ul>
+
+    <p class="figure">Figure: Events for a GIF image</p>
+    <p align="center"><img alt="Events" src="../../images/events.png"/></p><br/>
+    <p class="figure">Figure: Memory usage of a GIF image</p>
+    <p align="center"><img alt="Memory" src="../../images/memory.png"/></p><br/>
+    <p class="figure">Figure: Network capacity usage of a GIF image</p>
+    <p align="center"><img alt="Network" src="../../images/network.png"/></p><br/>
+
+    <p>GIF animation can be created in various resolutions without quality loss, when you use the option introduced in <a href="#photos">Photos</a>. This, however, increases memory occupancy.</p>
+
+    <h4 id="js" name="js">JavaScript Animation</h4>
+
+<p>JavaScript animation is less affected by enlarging or reducing its screen size. However, it uses a lot of device resources compared to using CSS3 animations:</p>
+<ul><li>
+Events: Event is fired every 100 ms, the interval of <span style="font-family: Courier New,Courier,monospace">setInterval()</span>.</li><li>
+Memory: Increases in proportion to time, from the initial size 90 KB.</li><li>
+Network: Used until the animation is stopped.</li></ul>
+    <p class="figure">Figure: Events for a JavaScript animation</p>
+    <p align="center"><img alt="Events" src="../../images/events2.png"/></p><br/>
+    <p class="figure">Figure: Memory usage of a JavaScript animation</p>
+    <p align="center"><img alt="Memory" src="../../images/memory2.png"/></p><br/>
+    <p class="figure">Figure: Network capacity usage of a JavaScript animation</p>
+    <p align="center"><img alt="Network" src="../../images/network2.png"/></p><br/>
+<p>The following example shows how JavaScript animation can be implemented:</p>
+    <pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated img&quot;), flag = 0;
+&nbsp;&nbsp;&nbsp;function animate()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.src = &#39;./images/sprite_&#39; + ((flag++) % 10) + &#39;.png&#39;;
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;setInterval(animate, 100);
+&lt;/script&gt;
+</pre>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method of the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations</a> API to prevent animation freezes that occur occasionally:</p>
+
+<pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated img&quot;), flag = 0, i = 0;
+&nbsp;&nbsp;&nbsp;function animate()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!(i % 6)) obj.src = &#39;./images/sprite_&#39; + ((flag++) % 10) + &#39;.png&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-RequestAnimationFrame(animate);
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;-webkit-RequestAnimationFrame(animate);
+&lt;/script&gt;
+</pre>
+
+    <h4 id="css3" name="css3">CSS3 Animation</h4>
+
+        <p>CSS3 animation has a low usage of events, memory, and network capacity. It is efficient for animations that have a fixed size. However, since CSS3 animation is pixel-based, it is difficult to use for animations that need to be enlarged or reduced, in which case JavaScript is a better option:</p>
+<ul><li>
+Events: Fires only rendering and painting events</li><li>
+Memory: 50 ~ 90 KB</li><li>
+Network: 9 ~ 21 ms</li></ul>
+
+    <p class="figure">Figure: Events for a CSS3 animation</p>
+    <p align="center"><img alt="Events" src="../../images/events3.png"/></p><br/>
+    <p class="figure">Figure: Memory usage of a CSS3 animation</p>
+    <p align="center"><img alt="Memory" src="../../images/memory3.png"/></p><br/>
+    <p class="figure">Figure: Network capacity usage of a CSS3 animation</p>
+    <p align="center"><img alt="Network" src="../../images/network3.png"/></p><br/>
+
+    <p>The following example shows how CSS3 animation can be implemented:</p>
+        <pre class="prettyprint">&lt;style&gt;
+&nbsp;&nbsp;&nbsp;.css_animation
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 50px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 70px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(../images/sprite.png);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: cssAni .8s steps(10) infinite;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;@-webkit-keyframes cssAni
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from {background-position: 0px;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to {background-position: -500px;}
+&nbsp;&nbsp;&nbsp;}
+&lt;/style&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.practices/html/web/w3c/selector_w.htm b/org.tizen.ui.practices/html/web/w3c/selector_w.htm
new file mode 100644
index 0000000..6c4057c
--- /dev/null
+++ b/org.tizen.ui.practices/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 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/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+	<p class="toc-title">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 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.practices/html/web/w3c/session_history_w.htm b/org.tizen.ui.practices/html/web/w3c/session_history_w.htm
new file mode 100644
index 0000000..f31132c
--- /dev/null
+++ b/org.tizen.ui.practices/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: Managing the Device Browsing History</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+		<p class="toc-title">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: Managing the Device Browsing History</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.practices/html/web/w3c/text_module_w.htm b/org.tizen.ui.practices/html/web/w3c/text_module_w.htm
new file mode 100644
index 0000000..cdea394
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/text_module_w.htm
@@ -0,0 +1,244 @@
+<!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>CSS Text Module (Level 3): Manipulating Text</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">CSS Text Module Level 3 API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">CSS Text Module Level 3 API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>CSS Text Module (Level 3): Manipulating Text</h1>
+
+<p>You can apply various text effects easily.</p>
+
+<p>The new text features in CSS Text Module Level 3 include:</p>
+<ul>
+
+<li>Text properties
+<p>You can use CSS text properties, such as <span style="font-family: Courier New,Courier,monospace">text-transform</span>, <span style="font-family: Courier New,Courier,monospace">text-align</span>, <span style="font-family: Courier New,Courier,monospace">text-indent</span>, <span style="font-family: Courier New,Courier,monospace">letter-spacing</span>, and <span style="font-family: Courier New,Courier,monospace">word-spacing</span>, to <a href="#text">manipulate and transform text</a>.</p></li>
+</ul> 
+
+<h2 id="text" name="text">Manipulating Text</h2>
+				
+<p>To enhance the user experience of your application, you must learn to handle line breaking, justification, alignment, white space handling, and text transformations using CSS text properties:</p>
+
+<ol>
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-transform</span> property within a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the Web page to control the text capitalization:
+
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-transform: none;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-transform: capitalize;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-transform: uppercase;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-transform: lowercase;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-transform: full-width;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+&lt;/body&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-align</span> property, which controls the text alignment:
+
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-align: start;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-align: end;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-align: left;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-align: right;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-align: center;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(6) {text-align: justify;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-indent</span> property, which controls the text indentation:
+
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-indent: 0}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-indent: 1em}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-indent: -1em}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-indent: 5%}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-indent: -5%}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">letter-spacing</span> property, which controls the letter spacing:
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {letter-spacing: .5em}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {letter-spacing: -.1em}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">word-spacing</span> property, which controls the space between words:
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-spacing: 1em}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-spacing: -.1em}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">word-break</span> property, which determines the line breaking rules for non-CJK (Chinese, Japanese, and Korean) scripts:
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-break: normal}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-break: keep-all}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {word-break: break-all}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">white-space</span> property, which determines the handling of empty space within an element:
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {white-space: normal}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {white-space: pre}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {white-space: nowrap}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {white-space: pre-wrap}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {white-space: pre-line}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
+&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
+&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
+&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
+&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
+&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-shadow</span> property, which adds a shadow effect to text:
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, .7)}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-shadow: -0.2em 0.2em 0.2em #000, 0.2em -0.2em 0.2em #f00}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {color: #fff; text-shadow: 0 0 .7em #000;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {color: #fff; text-shadow: 0 0 1px #f00;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+</pre>
+
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">word-wrap</span> and  <span style="font-family: Courier New,Courier,monospace">overflow-wrap</span> properties, which control forced line breaks when the length of a word is longer than the area where it is displayed:
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-wrap: normal}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-wrap: break-word}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {overflow-wrap: normal}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {overflow-wrap: break-word}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
+&lt;/body&gt;
+</pre>
+
+</li>
+
+</ol>
+
+
+<p>The following figure shows examples of manipulating the text properties.</p>
+<p class="figure">Figure: Text properties (in mobile applications only)</p>
+<p align="center"><img alt="Text properties (in mobile applications only)" src="../../images/text_properties.png"/></p>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">For a complete list of CSS Text Module Level 3 text properties (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/#appendix-h-full-property-index" target="_blank">Property index</a>.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.practices/html/web/w3c/transform_w.htm b/org.tizen.ui.practices/html/web/w3c/transform_w.htm
new file mode 100644
index 0000000..4bc2dba
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/transform_w.htm
@@ -0,0 +1,772 @@
+<!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>CSS Transforms: Manipulating Elements</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#prop_trans">Transform Properties</a></li>
+			<li><a href="#twod">2D and 3D Transform Functions</a></li>
+			<li><a href="#animation">Creating an Animation with Transforms</a></li>
+			<li><a href="#effect">Creating Fade Animation Effects</a></li>
+			<li><a href="#hw">Using Hardware Acceleration</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#transforms">CSS Transforms API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>CSS Transforms: Manipulating Elements</h1>
+
+<p>Transforms allow you to <a href="#animation">modify the coordinate space</a> where each element is positioned. The elements can be translated, rotated, and scaled in 2- or 3-dimensional space. According to the API, the coordinate system is a visual formatting model, and positions and sizes in the coordinate space are expressed in pixels, starting in the origin of point with positive values proceeding to the right and down.</p>
+
+<p>To enhance the rendering performance and user experience, you can <a href="#hw">use hardware acceleration</a> and <a href="#effect">create fade effects</a>.</p>
+
+<p>When using the CSS transform properties, the Tizen browser requires no prefix, the Firefox browser requires the <span style="font-family: Courier New,Courier,monospace">-moz-</span> prefix, the Chrome and Safari browsers require the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix, and the Opera browser requires the <span style="font-family: Courier New,Courier,monospace">-o-</span> prefix.</p>
+
+<h2 name="prop_trans" id="prop_trans">Transform Properties</h2>
+
+<p>You can define various properties to control the elements within the coordinate space:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">transform-origin</span>
+<p>This property changes the location of the transformed element. It can only be used with elements for whom the <span style="font-family: Courier New,Courier,monospace">transform</span> property has been declared.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">transform-style</span>
+<p>This property defines the rendering of the inherited element in the 3D space. Animation property has been added in the example for easier comprehension.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">perspective</span>
+<p>This property changes the perspective of the element being expressed. A 3D transform element must be used together with this property to emphasize the expression of the X axis.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">perspective-origin</span>
+<p>This property defines the location facing the element.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">backface-visibility</span>
+<p>This property defines whether the backface of the transformed element is expressed.</p></li>
+</ul>
+
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(30deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 30% 30%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective: 220;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animation: trans-ani 10s infinite linear;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backface-visibility: visible;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Chrome and Safari browsers */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(30deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-origin: 30% 30%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-perspective: 220;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: trans-ani 10s infinite linear;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-backface-visibility: visible;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box.case01 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-style: preserve-3d;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective-origin: 30% 30%;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Chrome and Safari browsers */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-style: preserve-3d;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-perspective-origin: 30% 30%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;transform-origin&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform-origin: 30% 30%;&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box case01&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;box&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>In addition to transform properties, you can also use various <a href="#twod">2D and 3D transform functions</a>.</p>
+
+ <h2 id="twod" name="twod">2D and 3D Transform Functions</h2>
+
+<p>The CSS Transforms API supports various transform functions in 2D and 3D.</p>
+
+<p>In 2D transforms, all transform functions are expressed based on a matrix. The X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span>, <span style="font-family: Courier New,Courier,monospace">scale()</span>, and <span style="font-family: Courier New,Courier,monospace">skew()</span> functions can be expressed in individual functions. For example, the X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span> function can be expressed with the <span style="font-family: Courier New,Courier,monospace">translateX(number)</span> and <span style="font-family: Courier New,Courier,monospace">translateY(number)</span> functions.</p>
+
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate(30px, 30px);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate(30px, 30px);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(1.2, 1.2);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale(1.2, 1.2);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(45deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(45deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-skew 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: skew(20deg, 20deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: skew(20deg, 20deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;2d transform&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;h2&gt;translate&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box no-transform&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Original&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box transformed box-translate&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform: translate(30px, 30px);&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>In 3D transforms, the Z axis has been added (for example, <span style="font-family: Courier New,Courier,monospace">translateZ(number)</span> and <span style="font-family: Courier New,Courier,monospace">scale3dZ(number)</span>). When handling 3D transforms, pay attention to the following:</p>
+<ul>
+<li>If a transform function is used together with the <span style="font-family: Courier New,Courier,monospace">perspective</span> property, the z axis is emphasized.</li>
+<li>The X, Y, and Z values of the <span style="font-family: Courier New,Courier,monospace">translate3d()</span>, <span style="font-family: Courier New,Courier,monospace">scale3d()</span>, and <span style="font-family: Courier New,Courier,monospace">rotate3d()</span> functions can be expressed in individual functions.</li>
+<li>In the <span style="font-family: Courier New,Courier,monospace">rotate3d(number, number, number, angle)</span> function, the element rotates according to the assigned parameter (angle) with the X, Y, and Z directional vectors as the center. Each vector can be expressed as an individual function: for example, the <span style="font-family: Courier New,Courier,monospace">rotateX(&lt;angle&gt;)</span> and <span style="font-family: Courier New,Courier,monospace">rotate3d(1, 0, 0, &lt;angle&gt;)</span> functions perform the same task.</li>
+</ul> 
+<p>The following code snippet demonstrates how to implement a 3D transform. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">3d_transform.html</a>.</p>
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.first-transform {opacity: .5; background: #3399cc;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.transformed {opacity: .8;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* translate3d */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate3d: hover .first-transform 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate3d: hover .transformed 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(15px, 15px, 60px) rotateY(70deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(15px, 15px, 60px) rotateY(70deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* scale3d */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale3d: hover .first-transform 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale3d(1, 1, 1) rotateY(70deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale3d(1, 1, 1) rotateY(70deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale3d: hover .transformed 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* rotate3d */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate3d: hover .first-transform 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate3d(-1, -1, -1, 110deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate3d(-1, -1, -1, 110deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate3d: hover .transformed 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate3d(1, 1, 1, 110deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate3d(1, 1, 1, 110deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* matrix3d */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix3d: hover .first-transform 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix3d: hover .transformed 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;3D transform&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;h2&gt;&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;First box value:&lt;/strong&gt; transform: translate3d(-5px, -5px, -60px) rotateY(70deg);&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;Second box value:&lt;/strong&gt; transform: translate3d(15px, 15px, 60px) rotateY(70deg);&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea box-translate3d&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box first-transform&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;First box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box transformed&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Second Box&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mouse over or tab here to animate
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+
+<h2 id="animation" name="animation">Creating an Animation with Transforms</h2>
+
+<p>To enhance the user experience of your application, you must learn to use transforms with animations. This example uses the animation from the <a href="animation_w.htm#create">Creating a Logo Animation</a> use case as a basis, and adds a more diverse visual effect to it with the <span style="font-family: Courier New,Courier,monospace">transform</span> property. In the modified animation:</p>
+
+<ul>
+<li>As in the original animation, no elements are initially shown on the screen.</li>
+<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the logo is made to rotate.</li> 
+<li>Each letter in the word &quot;TIZEN&quot; consecutively comes in from the left of the screen and moves to the right to its correct location. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the letters are translated in the 3D space and rotated around the Y axis.</li>
+</ul>
+
+<p class="figure">Figure: Tizen logo to be transformed</p> 
+<p align="center"><img alt="Tizen logo to be transformed" src="../../images/css_transforms1.png" /></p>
+
+
+<ol>
+<li>Create the HTML layout to control the movement of each individual animation element:
+<pre class="prettyprint">
+&lt;div class=&quot;animation-holder&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt t&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt i&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt z&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt e&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt n&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt tm&quot;&gt;&lt;/span&gt;
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-logo&quot;&gt;&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li>Define the basic style of the animation elements. Add the <span style="font-family: Courier New,Courier,monospace">perspective</span> property to increase the Z axis effect of the 3D transform.
+<pre class="prettyprint">
+.animation-holder 
+{
+&nbsp;&nbsp;&nbsp;-webkit-perspective: 1000px;
+&nbsp;&nbsp;&nbsp;height: 88px;
+&nbsp;&nbsp;&nbsp;left: 50%;
+&nbsp;&nbsp;&nbsp;margin: -54px 0px 0px -140px;
+&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;top: 50%;
+&nbsp;&nbsp;&nbsp;width: 280px;
+}
+.tizen-txt,
+.tizen-logo 
+{
+&nbsp;&nbsp;&nbsp;background-position: 50% 50%;
+&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
+&nbsp;&nbsp;&nbsp;display: block;
+&nbsp;&nbsp;&nbsp;position: absolute;
+}
+.tizen-txt.t 
+{
+&nbsp;&nbsp;&nbsp;background-image: url(&quot;images/txt_t.png&quot;);
+&nbsp;&nbsp;&nbsp;height: 56px;
+&nbsp;&nbsp;&nbsp;left: 0px;
+&nbsp;&nbsp;&nbsp;top: 31px;
+&nbsp;&nbsp;&nbsp;width: 48px;
+}
+</pre>
+</li>
+<li>Create the animation:
+<ol type="a">
+<li>
+<p>Assign keyframes for the logo element to transform it. In order to rotate the logo, use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: rotate()</span> function, which defines the angle of the rotation.  
+</p>
+<pre class="prettyprint">
+@-webkit-keyframes tizen-logo 
+{
+&nbsp;&nbsp;&nbsp;0% 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: ease-in;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 211px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 30px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -61px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(0deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 220px;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;30% 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: ease-out;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 211px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 30px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -61px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(720deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 220px;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;50% 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 247px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(1440deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 33px;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;100% 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 247px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(1440deg);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 33px;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">For a rotation, the image has to be carefully created to ensure the correct end result. The rotation occurs with the center of the element as the center. If the rotation center must be moved because the image center is not aligned, use the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property to adjust the rotation location.</td> 
+      </tr> 
+     </tbody> 
+    </table></li>
+<li>Create the keyframes for the first letter in the word &quot;TIZEN&quot;. In the animation, due to the <span style="font-family: Courier New,Courier,monospace">translate3d()</span> and <span style="font-family: Courier New,Courier,monospace">rotateY()</span> methods, each letter transforms slightly from the right to the left as it comes in.
+
+<p align="center"><img alt="Animation" src="../../images/css_transforms2.png" /></p>
+
+<pre class="prettyprint">
+@-webkit-keyframes tizen-txt-t 
+{
+&nbsp;&nbsp;&nbsp;0% 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;30% 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;35% 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;100% {}
+}
+</pre></li>
+<li>To emphasize the fact that the letters are being created on the right, change the location of the transform. If the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property is declared for the entire animation element, the logo rotation changes. Consequently, you must only declared it for the letters.
+<pre class="prettyprint">
+.tizen-txt 
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform-origin: 100% 50%;
+}
+</pre></li>
+
+<li><p>Create the keyframes for the other letters similarly:</p>
+<pre class="prettyprint">
+@-webkit-keyframes tizen-txt-i 
+{
+&nbsp;&nbsp;&nbsp;0% 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;32% 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;37% 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translateX(0) rotateY(0deg);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp; 100% {}
+}
+</pre></li></ol>
+
+</li>
+</ol>
+
+<p>The following figure shows the full Tizen logo animation with the <span style="font-family: Courier New,Courier,monospace">transform</span> properties.</p>
+<p class="figure">Figure: Full Tizen logo animation</p> 
+<p align="center"><img alt="Full Tizen logo animation" src="../../images/css_transforms5.png" /></p>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following files:</p>
+ <ul>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">transform_practical.html</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">logo_tizen.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_e.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_i.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_n.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_t.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_tm.png</a></li>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_z.png</a></li>
+ </ul>
+			
+				<h2 id="effect" name="effect">Creating Fade Animation Effects</h2>
+				
+				
+			<p>To enhance the user experience of your application, you must learn to use fade animation effects.</p>
+<p>The modal layer pop-up can be used to, for example, show enlarged thumbnail images or notice messages. The modal layer pop-up has the following basic properties:</p>
+<ul>
+<li>If an event is fired, it gradually becomes visible. This is known as the Fade In effect.</li>
+<li>The existing background is covered with a translucent layer to make the user focus on the pop-up.</li> 
+<li>When the pop-up is closed, it gradually becomes transparent. This is known as the Fade Out effect.</li>
+</ul>
+
+<p class="figure">Figure: Fade effect</p> 
+<p align="center"><img alt="Fade effect" src="../../images/fade_affect_animation.png" /></p>
+
+<p>You can control UI events and change the DOM elements in the following ways:</p>
+<ul>
+<li>Events can be controlled with JavaScript, and DOM elements can be devised with CSS.</li>
+<li>You can use JavaScript frameworks, such as jQuery, Prototype, and Dojo.</li> 
+</ul>
+
+<p>To create fade effects:</p>
+
+<ul>
+<li>Create a modal layer pop-up using jQuery:
+
+<pre class="prettyprint">
+(function($) 
+{
+&nbsp;&nbsp;&nbsp;function showModalPopup(url) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).append(&#39;&lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;&#39;); /* Mask in body appended */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).css({&#39;height&#39;: $(window).height()}); /* Mask area set */
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Target layer position set */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(url).css(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;top&#39;: ($(window).height()/2 + $(document).scrollTop() - $(url).height()/2) + &#39;px&#39;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;left&#39;: ($(window).width()/2 + $(document).scrollLeft() - $(url).width()/2) + &#39;px&#39;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Fade effect */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).fadeTo(&#39;slow&#39;, 0.7);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(url).fadeTo(&#39;slow&#39;, 1);
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;$(&#39;.layerpopupActive a&#39;).on(&#39;click&#39;, function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var targetUrl = $(this).attr(&#39;href&#39;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showModalPopup(targetUrl);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;});
+  
+&nbsp;&nbsp;&nbsp;/* End processing - Fade Out effect */
+    
+&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).on(&#39;click&#39;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.target.className === &#39;mask&#39;) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.layerpop&#39;).fadeOut();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).fadeOut(400, function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).remove();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;});
+})(jQuery);</pre>
+
+<p>If the animation effect is created by using JavaScript, the browser executes the following tasks:</p>
+<ol>
+	<li>A structure layer is created and added to the document. This is a CPU task.</li>
+	<li>The added layer is painted as a default value. This is a GPU task.</li>
+	<li>The layer is painted once again according to the change of value. This is a CPU operation.</li>
+</ol>
+
+<p>Steps a and c incur CPU tasks, which affect performance the most.</p>  
+<p>In case of step a, only 2 layers are created, but as the number of layers created increases, the efficiency of page rendering work drops. In case of step c as well, the more steps it undergoes, the slower the rendering becomes.</p>  
+<p>In certain browsers, even if the style of just 1 layer is changed, the entire document is repainted. As the repainting takes only a moment, any animation effects that are supposed to happen cannot be executed in such a short time. This issue occurs frequently in Android&trade; with severe fragmentation.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If a new layer is created in Android 4.0X version, and if the fade effect is used, it only shows the initial value and the result value of the layer style.</td> 
+      </tr> 
+     </tbody> 
+</table>
+
+<p>To avoid such a situation to the maximum possible extent, CPU tasks must be reduced to the minimum, and it is better to use transition or animation that uses the internal timer of the browser.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">In case of using 3D effects, <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translateZ(0);</span> can be used to accelerate the hardware. However, since hardware acceleration support varies between the OS and devices, the actual resulting effects can vary too. Moreover, in the case of version Android&trade; 2.1, iOS&trade;3.X and below, note that transition and animation may not be realized.</td> 
+      </tr> 
+     </tbody> 
+</table>
+</li>
+<li>Create a modal layer pop-up using CSS3:
+<pre class="prettyprint">
+&lt;!--CSS--&gt;
+.mask 
+{
+&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;z-index: -1;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 400ms ease-in-out;
+}
+
+.mask.active 
+{
+&nbsp;&nbsp;&nbsp;opacity: .7;
+&nbsp;&nbsp;&nbsp;z-index: 498;
+}
+
+&lt;!--Layer pop-up public styles--&gt;
+.layerpop 
+{
+&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;z-index: -1;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 300ms ease-in-out;
+}
+
+.layerpop.active 
+{
+&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;z-index: 499;
+}
+/* JavaScript */
+function showModalPopup(url) 
+{
+&nbsp;&nbsp;&nbsp;url.className += &#39;active&#39;;
+}</pre>
+</li>
+</ul>
+<h3>Performance Differences</h3>
+
+<p>There can be a difference in performance depending on how the modal layer pop-up is used.</p>
+<p>The following figures illustrate the difference in event performance, when using JavaScript and CSS3.</p>
+<p class="figure">Figure: Event performance using JavaScript</p> 
+<p align="center"><img alt="Events using JavaScript" src="../../images/events_using_javascript.png" /></p>
+
+<p class="figure">Figure: Event performance using CSS3</p> 
+<p align="center"><img alt="Events using CSS3" src="../../images/events_using_css3.png" /></p>
+
+<p>The following figures illustrate the difference in memory performance, when using JavaScript and CSS3.</p>
+<p class="figure">Figure: Memory performance using JavaScript</p> 
+<p align="center"><img alt="Memory when using JavaScript" src="../../images/memory_using_javascript.png" /></p>
+
+<p class="figure">Figure: Memory performance using CSS3</p> 
+<p align="center"><img alt="Memory when using CSS3" src="../../images/memory_using_css3.png" /></p>
+
+<p>When the styles are applied using JavaScript, the UI thread is used to create the pop-up. The UI thread increases the usage of CPU memory in proportion to the number of pop-ups used.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Tizen provides remote debugging through the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">JavaScript Debugger tool</a>.</td> 
+      </tr> 
+     </tbody> 
+</table>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note"><p>If CSS is used, the handling of JavaScript events and UI DOM operations becomes unnecessary, so the load of the UI thread decreases, and the usage of CPU memory decreases as well. However, CSS3 transitions cannot be applied to versions below Android&trade; 2.3 and for versions above iOS&trade; 4.3, which are still widely used, so attention is needed when distributing it to various devices.</p></td> 
+      </tr> 
+     </tbody> 
+</table>  
+			
+				<h2 id="hw" name="hw">Using Hardware Acceleration</h2>
+				
+			<p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
+ <p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
+ 
+ <h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
+ <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>
+<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
+ <p class="figure">Figure: Blue box</p> 
+ <p align="center"><img alt="Blue box" src="../../images/blue_box.png" /></p> 
+
+ <ul>
+ <li>Use CPU painting:
+ <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
+ <ol>
+	<li>Construct the blue box and set its position on the screen:
+	<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript transition sample&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;</pre>
+</li>
+<li>
+<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method:</p>
+		<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var delta = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function process ()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.left = delta + &quot;px&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.top = delta + 50 + &quot;px&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta += 4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (delta &lt;= 200)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {process();}, 16);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre></li></ol></li>
+	<li>Use CSS transition:
+	<p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
+		<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition sample&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate(200px, 200px)&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre>
+</li>
+		<li>Use 3D transform:
+		<p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
+		<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate3d(200px, 200px, 0px)&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;p&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre>
+</li>
+	</ul>
+ <h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
+ <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
+ <pre class="prettyprint">#scroll_area 
+{
+&nbsp;&nbsp;&nbsp;overflow: scroll;
+&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;
+}</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.practices/html/web/w3c/transition_w.htm b/org.tizen.ui.practices/html/web/w3c/transition_w.htm
new file mode 100644
index 0000000..a8de2d7
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/transition_w.htm
@@ -0,0 +1,382 @@
+<!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>CSS Transitions Module (Level 3): Changing Element Styles</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#prop">Transition Properties</a></li>
+			<li><a href="#modify">Modifying Element Properties</a></li>
+			<li><a href="#hw">Using Hardware Acceleration</a>
+			</li>
+		</ul>
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transitions">CSS Transitions Module Level 3 API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transitions">CSS Transitions Module Level 3 API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>CSS Transitions Module (Level 3): Changing Element Styles</h1>
+
+<p>Transitions allow you to <a href="#modify">enable implicit transitions</a>, which describe how the CSS properties can be made to change smoothly from one value to another over a given duration. To enhance the rendering performance, you can <a href="#hw">use hardware acceleration</a>.</p>
+
+<p>When using the CSS transition properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>
+
+<h2 name="prop" id="prop">Transition Properties</h2> 
+ 
+<p>You can define various properties to control the element transitions:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">transition-property</span>
+<p>This property defines the element property that is changed during the transition. In the following code snippet, both the width and height of the element change when the mouse hovers over it, but the transition effect is applied to the width property only.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">transition-duration</span>
+<p>This property defines the duration of the transition. You must define as many instances of the property as you have elements in the <span style="font-family: Courier New,Courier,monospace">transition-property</span> property.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">transition-timing-function</span>
+<p>This property defines the pace of the transition. The value of the property is defined as a stepping function or a cubic Bézier curve. The <span style="font-family: Courier New,Courier,monospace">ease</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0.25, 0.1, 0.25, 1)</span>, and the <span style="font-family: Courier New,Courier,monospace">linear</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0, 0, 1, 1)</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">transition-delay</span>
+<p>This property defines the delay time before the start of the transition.</p></li>
+
+</ul>
+
+<p>The following code snippet demonstrates how to use transition properties. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_property.html</a>.</p>
+
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body{font-size: 12px}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-property: width;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 2s;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: ease;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-delay: 0.5s;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box: hover 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 300px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: CornflowerBlue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;CSS transitions tutorial&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Mouse over or tap here to animate&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transition-property: width, height, background&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&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">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped. </td> 
+      </tr> 
+     </tbody> 
+    </table>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property allows you to define all the transition properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">transition-property</span> | <span style="font-family: Courier New,Courier,monospace">transition-duration</span> | <span style="font-family: Courier New,Courier,monospace">transition-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">transition-delay</span>. If you omit a property value, a default value is used instead.</p>
+
+<pre class="prettyprint">
+&lt;style type=&quot;text/css&quot;&gt;
+&nbsp;&nbsp;&nbsp;.box 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition: width 1s ease 1s;
+&nbsp;&nbsp;&nbsp;}
+&lt;/style&gt;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property connects movement more naturally than the more generally used the pseudo classes, such as <span style="font-family: Courier New,Courier,monospace">:hover</span> or <span style="font-family: Courier New,Courier,monospace">:active</span>. The smooth effect can be achieved more conveniently and easily with the <span style="font-family: Courier New,Courier,monospace">transition</span> property than with JavaScript or Flash, and the <span style="font-family: Courier New,Courier,monospace">transition</span> property also supports the browser side to provide excellent performance.</p>
+
+
+<h2 id="modify" name="modify">Modifying Element Properties</h2>
+				
+<p>To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the <span style="font-family: Courier New,Courier,monospace">http://tizen.org</span> Web site, where the current &quot;UPCOMING EVENTS&quot; area only has the <span style="font-family: Courier New,Courier,monospace">text-decoration: underline</span> property in a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <span style="font-family: Courier New,Courier,monospace">transitions</span> properties in this area.</p>
+
+
+<p class="figure">Figure: Tizen site section to be transitioned</p> 
+<p align="center"><img alt="Tizen site section to be transitioned" src="../../images/transitions1.png" /></p>
+
+  
+<ol><li><p>Add a background color change to the &quot;UPCOMING EVENTS&quot; area during a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state:</p>
+
+<ol type="a"><li><p>Originally, the area on the site is defined as follows:</p>
+
+<pre class="prettyprint">
+&lt;h2 class=&quot;block-title&quot;&gt;Upcoming Events&lt;/h2&gt;
+</pre>
+
+
+<p>Additionally, a <span style="font-family: Courier New,Courier,monospace">transition</span> property is declared in the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:</p>
+
+<pre class="prettyprint">
+.block-title 
+{
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 2s ease;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">all</span> value in the transition property means that the transition effect applies to all CSS properties of the element.</p>
+</li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">mouseover</span> state for the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:
+
+<pre class="prettyprint">
+.block-title: hover {background: #eaeaea;}
+</pre>
+
+<p>Due to the CSS characteristics, adding a class through an event allows immediate rendering in the screen.</p></li></ol>
+
+<p>When the mouse is moved over the &quot;UPCOMING EVENTS&quot; area, the background color changes.</p>
+
+<p align="center"><img alt="Background color change" src="../../images/transitions2.png" /></p> </li>
+
+<li>
+
+<p>Apply the transition effect in other elements:</p>
+
+<ol type="a"><li>To avoid unnecessary repetition, tie a list of <span style="font-family: Courier New,Courier,monospace">transition</span> elements together into groups <span style="font-family: Courier New,Courier,monospace">a</span> and <span style="font-family: Courier New,Courier,monospace">span</span>:
+
+<pre class="prettyprint">
+.location, .date, .location .anibg, h3 &gt; a, .day &gt; span 
+{
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;
+}
+</pre></li>
+
+<li><p>When the mouse hovers over the date element, change the background of the date and the font size of all the elements tied into the <span style="font-family: Courier New,Courier,monospace">span</span> group. When the mouse hovers over the title element, change the color of all elements tied into the <span style="font-family: Courier New,Courier,monospace">a</span> group.</p>
+<pre class="prettyprint">
+.date: hover {background: #d2ecff !important;}
+.date: hover .day &gt; span {font-size: 1.9em;}
+
+.event-info: hover h3 &gt; a {color: #ec4986;}
+</pre></li></ol>
+
+<p align="center"><img alt="Before mouseover" src="../../images/transitions3.png" />
+</p> </li>
+<li>
+
+<p>Emphasize the location phrase by adding an empty element. The emphasis is made by filling the background with black from left to right, and changing the font color to an appropriate value for the black background.</p>
+<ol type="a">
+<li><p>Add the empty element:</p>
+
+<pre class="prettyprint">
+&lt;div class=&quot;location&quot;&gt;San Francisco, CA&lt;span class=&quot;anibg&quot;&gt;&lt;/span&gt;&lt;/div&gt;
+</pre></li>
+<li><p>Create the effect using the width value of the added element:</p>
+<pre class="prettyprint">
+.location {position: relative; z-index: 3; margin-top: 3px;}
+.location .anibg 
+{
+&nbsp;&nbsp;&nbsp;position: absolute; 
+&nbsp;&nbsp;&nbsp;left: -3px; top: 0; 
+&nbsp;&nbsp;&nbsp;display: block; 
+&nbsp;&nbsp;&nbsp;width: 0; height: 100%; 
+&nbsp;&nbsp;&nbsp;background: #000; 
+&nbsp;&nbsp;&nbsp;z-index: -1;
+}
+</pre>
+
+<p>The effect is defined by using the <span style="font-family: Courier New,Courier,monospace">position</span> property. The location element position is declared <span style="font-family: Courier New,Courier,monospace">relative</span>, while the <span style="font-family: Courier New,Courier,monospace">anibg</span> child element position is declared as <span style="font-family: Courier New,Courier,monospace">absolute</span>. The width of the child element basic state is set as 0. Since the child element layer covers the location text, the child element has been defined to come out from the back of the text in the <span style="font-family: Courier New,Courier,monospace">z-index</span> value of the child.</p></li>
+<li><p>Define the state to be changed:</p>
+<pre class="prettyprint">
+.location, .date, .location .anibg, h3 &gt; a, .day &gt; span 
+{
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;
+}
+
+.event-info: hover .location {color: #fff;}
+.event-info: hover .location .anibg {width: 100%; color: #fff;}
+</pre>
+
+<p>The transition takes place when the property in question is at the front on the screen. The <span style="font-family: Courier New,Courier,monospace">event-info</span> class is used as the subject for the change, and it has been defined so that  the transition occurs simultaneously in the <span style="font-family: Courier New,Courier,monospace">.location</span> and <span style="font-family: Courier New,Courier,monospace">.anibg</span> elements when the mouse hovers over any of the elements tied together as group <span style="font-family: Courier New,Courier,monospace">a</span>.
+</p></li>
+
+ </ol><p align="center"><img alt="Location phrase emphasis" src="../../images/transitions5.png" /></p>
+</li></ol>
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+	<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_practical.html</a></li>
+ </ul>  
+		
+				<h2 id="hw" name="hw">Using Hardware Acceleration</h2>
+				
+			<p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
+ <p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
+ 
+ <h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
+ <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>
+<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
+ <p class="figure">Figure: Blue box</p> 
+ <p align="center"><img alt="Blue box" src="../../images/blue_box.png" /></p> 
+
+ <ul>
+ <li>Use CPU painting:
+ <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
+ <ol>
+	<li>Construct the blue box and set its position on the screen:
+	<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript transition sample&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;</pre>
+</li>
+<li>
+<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method:</p>
+		<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var delta = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function process ()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.left = delta + &quot;px&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.top = delta + 50 + &quot;px&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta += 4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (delta &lt;= 200)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {process();}, 16);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre></li></ol></li>
+	<li>Use CSS transition:
+	<p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
+		<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition sample&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate(200px, 200px)&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre>
+</li>
+		<li>Use 3D transform:
+		<p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
+		<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate3d(200px, 200px, 0px)&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;p&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre>
+</li>
+	</ul>
+ <h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
+ <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
+ <pre class="prettyprint">#scroll_area 
+{
+&nbsp;&nbsp;&nbsp;overflow: scroll;
+&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;
+}</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.practices/html/web/w3c/ui_layout_ww.htm b/org.tizen.ui.practices/html/web/w3c/ui_layout_ww.htm
new file mode 100644
index 0000000..7c1e098
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/ui_layout_ww.htm
@@ -0,0 +1,706 @@
+<!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>Multiple UI Layouts: Designing Applications for Multiple Devices</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Content</p>
+		<ul class="toc">
+			<li><a href="#single">Single Layout for Multiple Devices</a></li>
+			<li><a href="#multiple">Multiple Layouts for Multiple Devices</a></li>
+		</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Multiple UI Layouts: Designing Applications for Multiple Devices</h1>
+ 
+  <p>To ensure the largest possible market for your application, you have to design your application layout so that your application can run on multiple Tizen devices.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+  
+<p>Although the Web was originally designed to structure documents for large-scaled Internet world, with CSS (Cascading Style Sheet), JavaScript, and various device APIs, it is quickly evolving to a complete runtime environment for applications. In addition, its W3C open development model and the flexibility of its CSS-based presentation make it every developer&#39;s choice as the next development platform. CSS is the key technology for flexible presentation, and it is used to describe the look and formatting of HTML documents. The role of CSS is to determine how the logical structure of the document is displayed to the user.</p>
+
+<p>The Tizen Web engine provides the basic mechanisms for fitting the application content to the target screen. However, to ensure that the application runs well on multiple devices, you must understand those mechanisms in detail. In general, select a relative layout rather than a fixed layout, because a relative layout helps to maintain usability even when the application runs on unexpected devices. To enhance usability even further, use different layouts for each device category.</p>
+
+<p>Using some CSS techniques and Tizen Web engine mechanisms, you can design your application UI layout so that it displays properly on multiple devices:</p>
+<ul><li>You can use a <a href="#single">single layout</a> and take advantage of the auto-fitting mechanism of the Tizen Web engine to ensure that a single layout covers multiple devices.</li>
+<li>You can use <a href="#multiple">multiple layouts</a> to define a separate optimal layout for each device category.</li></ul>
+
+ <h2 id="single" name="single">Single Layout for Multiple Devices</h2> 
+  <p>A typical application developer designs an optimized UI for a target device with a fixed layout and high-quality resources. This approach usually results in a nice look for the end user, but can sometimes result in an ugly layout, which makes the application unusable. And this unfortunate result can occur merely due to a change in the device form factor.</p>
+<p>Since the presentation and business logic are strictly separated in a Web application, it handles the device form factor change better than native applications. One single layout, taking advantage of Web technology, can ensure usability even on multiple devices with different form factors.</p>
+
+<p>To design applications with a single layout, you must consider the following issues:</p> 
+
+  <ul> 
+   <li><a href="#viewport">Viewport and other meta tags</a></li> 
+   <li><a href="#relative">Relative layout</a></li> 
+   <li><a href="#header_footer">Header and footer position</a></li> 
+   <li><a href="#flexible">Flexible media</a></li> </ul>
+   
+   <p>For a complete application layout that considers all the above issues, see <a href="#single_example">Single Layout Example</a>.</p>
+   
+  <h3 id="viewport" name="viewport">Viewport and Other Meta Tags</h3>   
+   
+<p>The viewport is a screen area that the Web engine displays in the UI and, in the Web world, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is used to inform the Web engine that this content is written for a specific form factor, such as device width. The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag was introduced by Apple to fill the screen resolution gap between initial Smartphone (for example, 320 px) and PC (for example, 980 px). Basically, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag helps the Web engine to determine the scale factor for the content on the current device.</p>
+
+<p>To use the tag in an HTML file, set its name and content:</p>
+<pre class="prettyprint">
+&lt;meta name=&quot;viewport&quot; content=&quot;XXX&quot;&gt;
+</pre> 
+
+<p>As shown in the following code snippet, use the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag to tell the Web engine which device width is targeted by the application. The Web engine can estimate the scale factor based on the target content size and the real screen width. For example, usually almost all wearable applications have the following <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, which sets the viewport width to the appropriate size based on each device:</p>
+<pre class="prettyprint">
+&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
+</pre> 
+
+<p>If you want to set your content layout to the target width of 320 px on every wearable device, use the following meta tag:</p>
+<pre class="prettyprint">
+&lt;meta name=&quot;viewport&quot; content=&quot;width=320&quot;&gt;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag has other properties, such as <span style="font-family: Courier New,Courier,monospace">height</span>, <span style="font-family: Courier New,Courier,monospace">initial-scale</span>, <span style="font-family: Courier New,Courier,monospace">minimum-scale</span>, <span style="font-family: Courier New,Courier,monospace">maximum-scale</span>, and <span style="font-family: Courier New,Courier,monospace">user-scalable</span>. However, do not use those properties unless you understand their exact meaning. Wrong values can cause the Web engine to incorrectly fit the application content to the current device.</p>
+
+<h3 id="relative" name="relative">Relative Layout</h3>
+
+<p>The relative layout concept means that the element size of all content is set as a relative unit (such as percentage), and not as absolute values (such as pixels or points). In responsive Web design, this concept is also known as <strong>fluid grid</strong> (for more information, search for <strong>responsive web design</strong> in your Web browser). To achieve a layout that works on multiple devices, you only need to know about relative layout, not all the other concepts of responsive Web design.</p>
+<p>To implementing a relative layout, you only have to set the width and height of each element as a percentage, as shown in the following example and figure. In the example, the width and height of the <span style="font-family: Courier New,Courier,monospace;">number_pad</span> element is set to 100% and 70%, not 320 px and 224 px. </p>
+
+<p class="figure">Figure: 320x320 calculator</p> 
+<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 100%; height: 70%;}</span></p>
+<p align="center"><img alt="320x320 calculator" src="../../images/layout_calculator.png"/></p> 
+
+<p>An application with this relative layout is auto-fitted when it runs on an unexpected device, such as the device with a 360x480 resolution shown in the following figure. Even though this adjusted layout may not be as good as the original, it is good enough, since it shows a usable application UI.</p>
+ 
+
+<p class="figure">Figure: 360x480 calculator with a relative layout</p>  
+	<p align="center"><img alt="360x480 calculator with a relative layout" src="../../images/layout_calculator_relative.png"/></p> 
+
+<p>The following figure shows what happens if you use an absolute 320x320 layout. The presentation is definitely ugly (with an empty white space at the bottom) and usability reduced, although the calculation logic itself still works.</p>
+<p class="figure">Figure: 360x480 calculator with an absolute 320x320 layout</p>
+<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 320px; height: 224px;}</span></p> 
+ 
+  
+	<p align="center"><img alt="360x480 calculator with an absolute 320x320 layout" src="../../images/layout_calculator_absolute.png"/></p> 
+
+<h3 id="header_footer" name="header_footer">Header and Footer Position</h3>
+
+<p>While the content layout itself becomes the application UI layout on a Web page, a typical wearable application layout consists of a header area, content area, and footer area. With this trend, many wearable Web applications are designed by separating the 3 areas explicitly.</p>
+<p class="figure">Figure: Typical wearable Web application layout</p>  
+<p align="center"><img alt="Typical wearable Web application layout" src="../../images/layout_app.png"/></p> 
+
+<p>Not setting the place of the header and footer areas clearly can easily cause problems for your layout. In case of the header, the side-effect is relatively small. However, a wrongly defined footer area can be quite visible and lead to poor usability. The following figure shows the original layout of a pedometer application that consists of a header, content, and footer, with a Stop button set in the footer area. </p>
+<p class="figure">Figure: 320x320 sample Web application</p>  
+<p align="center"><img alt="320x320 sample Web application" src="../../images/layout_sample.png"/></p> 
+
+<p>In this case, if the position of the footer is not defined explicitly or if the position and bottom properties do not have proper values, an ugly layout can be displayed on an unexpected device, such as the 360x480 screen shown in the following figure. </p> 
+<p class="figure">Figure: Layout on 360x480</p>  
+<p align="center"><img alt="Layout on 360x480" src="../../images/layout_sample_ugly.png"/></p> 
+
+<p>To make the layout correct, define the position property as fixed and set the bottom property explicitly as 0 px:</p> 
+
+<pre class="prettyprint">
+.footer {position: fixed; bottom: 0px;}
+</pre>
+ 
+<p>The following figure shows the same Web application running on the unexpected device after the footer properties are defined properly. With the correct values, the Web application is usable even on a new target, not planned during the development phase. Note that if a <a href="#relative">relative layout</a> is also applied to the content area, the result is an even better layout and further improved usability.</p>
+<p class="figure">Figure: Usable layout on 360x480</p>  
+<p align="center"><img alt="Usable layout on 360x480" src="../../images/layout_sample_ok.png"/></p> 
+
+<h3 id="flexible" name="flexible">Flexible Media</h3>
+	
+<p>One of key elements used in the content area is a media element, including image and video. As all other elements, the media elements also must be placed within a relative layout to allow the application flexibly handle resolution changes. When such relative sizing is applied to a media element, it is called <strong>flexible media</strong> in responsive Web design. </p>
+<p>The main issue when making a media element size relative is to ensure that the usable ratio does not change. The following figure shows a video element that works on both 320x320 and 360x480 resolutions, even though the aspect ratio of the screen is changed and scaled up. Basically, when handling media elements, you want to keep the size or ratio of the element the same as in the initially targeted device, even when displayed using a different resolution and aspect ratio. To achieve this, set the width and height properties of the media element with percentage and the auto keyword.</p>
+
+<p class="figure">Figure: Flexible media on 320x320 and 360x480</p> 
+<p><span style="font-family: Courier New,Courier,monospace;">.video iframe {width: 100%; height: auto;}</span></p>
+<p align="center"><img alt="Flexible media on 320x320 and 360x480" src="../../images/layout_flexible_media.png"/></p> 
+
+ 
+ <p>The following figure shows an example of wrong usage, where usability decreases as the video element is simply scaled up based on the aspect ratio change. If you set the video element size using a fixed size like this, you get no benefit from the increased resolution, and the layout on the whole screen becomes inharmonious, decreasing usability.</p>
+
+
+<p class="figure">Figure: Fixed size media element</p> 
+<p><span style="font-family: Courier New,Courier,monospace;"> .video iframe {width: 320px; height: 240px;} </span></p>
+<p align="center"><img alt="Fixed size media element" src="../../images/layout_fixed_media.png"/></p> 
+
+<h3 id="single_example" name="single_example">Single Layout Example</h3>
+	
+	<p>This section illustrates a complete application layout that takes advantage of the issues discussed in previous sections. In particular, it shows how to set the viewport properly to help the Web engine scaling mechanism and how to create a CSS-based layout.</p>
+	
+	
+<p>First of all, set the targeted size of the content area as 320 px in the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, and disable the <span style="font-family: Courier New,Courier,monospace">user-scalable</span> property, as shown in the following code snippet.</p>
+
+<pre class="prettyprint">
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;                                             
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=320px, user-scalable=no&quot; /&gt;                                                 
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;                                                                                                           
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile left&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box1&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;            
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile right&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box2&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile left&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box3&quot; class=&quot;box&quot;&gt;&lt;/div&gt;                                                                       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile right&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box4&quot; class=&quot;box&quot;&gt;&lt;/div&gt;                                                                       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/main&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt; 
+&lt;/html&gt;
+</pre>
+
+<p>In the above HTML code, the content area consists of 4 <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> box elements, and their UI layout is described in the <span style="font-family: Courier New,Courier,monospace">style.css</span> file. The following CSS code programs the layout and the specific box element styles that were defined in the HTML file.</p> 
+<p>The code snippet shows that the content size is set to be same as the viewport size. Each box is filled with a different color and placed so that it fills a quarter of the content area. Because each box size is defined with the width and height of 100%, the relative size of each box element remains the same even if the viewport size changes.</p>
+
+<pre class="prettyprint">
+&lt;!--Default, used for all--&gt;
+* {box-sizing: border-box;}
+body, div, h1 {margin: 0px; padding: 0px;}
+html, body {width: 100%; height: 100%; overflow-x: hidden;}
+
+#box1 {background-color: rgb(255, 255, 141);}
+#box2 {background-color: rgb(165, 241, 238);}
+#box3 {background-color: rgb(248, 179, 179);}
+#box4 {background-color: rgb(192, 161, 246);}
+.tile 
+{
+&nbsp;&nbsp;&nbsp;width: 50%;
+&nbsp;&nbsp;&nbsp;height: 50%;
+&nbsp;&nbsp;&nbsp;float: left;
+}
+.left {padding: 10px 5px 5px 10px;}
+.right {padding: 10px 10px 5px 5px;}
+
+.box 
+{
+&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;height: 100%;
+}
+</pre>
+
+
+<p>The following figure shows a final view when the 320 px is set as a target device in the HTML file. As defined in the CSS file, the content area fills the whole screen, 320x320 pixels, and the 4 box elements equally divide the area.</p> 
+ 
+ <p class="figure">Figure: Original layout on a target device</p>  
+ <p align="center"><img alt="Original layout on a target device" src="../../images/layout_original.png"/></p>
+ <p>The following figure shows that the relative layout and scaling are correctly applied even when the same application is run on a mobile device with the aspect ratio of 16:9.</p>
+  <p class="figure">Figure: Scaled layout on a 16:9 mobile device</p>  
+  <p align="center"><img alt="Scaled layout on a 16:9 mobile device" src="../../images/layout_original_scaled.png"/></p>
+<p>The following code snippet shows an example where the background color is replaced with an image while the layout is exactly same as in the 4 box example. The following figures show how the layout including media elements (such as images) functions exactly like the basic box layout.</p>
+
+<pre class="prettyprint">
+&lt;!--Default, used for all--&gt;
+* {box-sizing: border-box;}
+body, div, h1 {margin: 0px; padding: 0px;}
+html, body {width: 100%; height: 100%; overflow-x: hidden;}
+
+#box1 {background-color: rgb(255, 255, 141);}
+#box2 {background-color: rgb(165, 241, 238);}
+#box3 {background-color: rgb(248, 179, 179);}
+#box4 {background-color: rgb(192, 161, 246);}
+.tile 
+{
+&nbsp;&nbsp;&nbsp;width: 50%;
+&nbsp;&nbsp;&nbsp;height: 50%;
+&nbsp;&nbsp;&nbsp;float: left;
+}
+.left {padding: 10px 5px 5px 10px;}
+.right {padding: 10px 10px 5px 5px;}
+
+.box 
+{
+&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;height: 100%;
+&nbsp;&nbsp;&nbsp;padding: 20px;
+&nbsp;&nbsp;&nbsp;background: no-repeat center;
+&nbsp;&nbsp;&nbsp;background-size: 100% 100%;
+}
+
+#box1 {background-image: url('../a.png');}
+#box2 {background-image: url('../b.png');}
+#box3 {background-image: url('../c.png');}
+#box4 {background-image: url('../d.png');}
+</pre>
+
+
+ 
+ <p class="figure">Figure: Image-based layout on a target device</p>  
+ <p align="center"><img alt="Image-based layout on a target device" src="../../images/layout_image.png"/></p>
+
+<p class="figure">Figure: Image-based scaled layout on a 16:9 mobile device</p>  
+<p align="center"><img alt="Image-based scaled layout on a 16:9 mobile device" src="../../images/layout_image_scaled.png"/></p>	
+
+
+ <h2 id="multiple" name="multiple">Multiple Layouts for Multiple Devices</h2> 
+  
+  <p>In many cases, the desired end result for your application can be achieved using scaling and a relative layout within a <a href="#single">single layout</a>. However, this approach does not always provide the best quality for the end user. </p>
+<p>You can support the best possible layout and usability with some additional development efforts. For instance, you can create an application which, on a tablet, shows the main information (clock face) and also delivers more meaningful information (calendar), while on a watch device the same application only displays the main information (clock face). This kind of end result, as shown in the following figure, cannot be achieved by only scaling up the whole layout of the watch device.</p>
+<p class="figure">Figure: Application for a watch and tablet</p>  
+<p align="center"><img alt="Application for a watch and tablet" src="../../images/multiple_layout_example.png"/></p>  
+
+<p>W3C CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues:</p> 
+
+  <ul> 
+  <li><a href="#viewport2">Viewport setting</a></li>
+   <li><a href="#category">Category classification</a></li> 
+   <li><a href="#display">Classification for display modes</a></li>  
+ </ul>
+
+ 
+<p>Since the <strong>2.3.1</strong> version, Tizen also supports a special media query feature to provide device shape-based layouts. If you want to create an application for both square-shaped and circular-shaped devices, you can easily <a href="#migration">migrate your application to support both shapes</a>.</p> 
+ <p class="figure">Figure: Application for a square and circular device</p>  
+ <p align="center"><img alt="Application for a square and circular device" src="../../images/circular_support.png"/></p>  
+     
+
+  <h3 id="viewport2" name="viewport2">Viewport Setting for Multiple Layouts</h3>   
+<p>The difference between multiple and single layouts is that, in the multiple layouts, the content width of the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is set to <span style="font-family: Courier New,Courier,monospace">&quot;device-width&quot;</span>. This sets the layout viewport width to the ideal viewport width and tells the Web engine that the application adapts to the device width. In short, the <span style="font-family: Courier New,Courier,monospace">&quot;device-width&quot;</span> setting is needed to create an adaptive and responsive Web application. </p>
+
+<p>To use the meta tag in an HTML file, set its name and content: </p>
+ <pre class="prettyprint">
+&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
+</pre>
+
+<h3 id="category" name="category">Category Classification</h3>
+	
+<p>When creating multiple layouts, you must first configure the layout categories. In other words, a classifying category is needed to fit the layout on the current executable environment. Media queries are supported in CSS3 to give Web application information to the executable environment.</p>
+
+<h4>W3C Media Queries</h4>
+<p>Media queries consist of a media type and expressions of media features. </p>
+
+<p>The media types indicate the media on which the current Web application is running. They are defined in HTML4. The following media types are supported:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace;">aural</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">braille</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">handheld</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">print</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">projection</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">screen</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">tty</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">tv</span></li>
+</ul>
+
+<p>You can declare that sections apply to certain media types inside a CSS style sheet.  As in the following example, you can declare <span style="font-family: Courier New,Courier,monospace;">screen</span> as a media type and describe its layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span>. That code applies the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> when the Web application is run on the screen type executable context.</p>
+
+<pre class="prettyprint">
+@media screen {...}
+</pre>
+
+<p>Several media queries can be combined in a media query list to configure the executable environment and define the detailed layout configuration, as needed. The following example shows a case in which the Web application runs on the executable environment having a <span style="font-family: Courier New,Courier,monospace;">screen</span> media type and a 500 pixel minimum width. Its final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user. </p>
+
+<pre class="prettyprint">
+@media screen and (min-width: 500px) {...}
+</pre>
+
+<p>The following table lists the CSS media features, which you can use to specify the layout utilizing the media queries.</p> 
+
+<table> 
+<caption>Table: Media features</caption>
+   <tbody> 
+    <tr> 
+     <th>Feature</th> 
+	 <th>Value</th>
+	 <th>Min/Max</th>
+	 <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td>color</td> 
+     <td rowspan="2">integer</td>
+	 <td rowspan="5">yes</td>
+	 <td>Number of bits per a color component</td>	 
+    </tr> 
+  <tr>
+    <td>color-index</td>
+	 <td>Number of entries in the color lookup table</td>
+  </tr>
+    <tr> 
+     <td>device-aspect-ratio</td> 
+     <td>integer/integer</td>
+	 <td>Aspect ratio</td>	 
+    </tr>  
+    <tr> 
+     <td>device-height</td> 
+     <td rowspan="2">length</td>
+	 <td>Output device height</td>	 
+    </tr>
+    <tr> 
+     <td>device-width</td> 
+	 <td>Output device width</td>	 
+    </tr>
+    <tr> 
+     <td>grid</td> 
+     <td>integer</td>
+	 <td>no</td>
+	 <td>Set to true for a grid-based device</td>	 
+    </tr>
+    <tr> 
+     <td>height</td> 
+     <td>length</td>
+	 <td rowspan="3">yes</td>
+	 <td>Rendering surface height</td>	 
+    </tr>
+    <tr> 
+     <td>monochrome</td> 
+     <td>integer</td>
+	 <td>Number of bits per pixel in a monochrome frame buffer</td>	 
+    </tr>
+    <tr> 
+     <td>resolution</td> 
+     <td>resolution (<span style="font-family: Courier New,Courier,monospace;">dpi</span> or <span style="font-family: Courier New,Courier,monospace;">dpcm</span>)</td>
+	 <td>Resolution</td>	 
+    </tr>
+    <tr> 
+     <td>scan</td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">progressive</span> or <span style="font-family: Courier New,Courier,monospace;">interlaced</span></td>
+	 <td>no</td>
+	 <td>Scanning process of the <span style="font-family: Courier New,Courier,monospace;">tv</span> media types</td>	 
+    </tr>
+    <tr> 
+     <td>width</td> 
+     <td>length</td>
+	 <td>yes</td>
+	 <td>Rendering surface width</td>	 
+    </tr>	
+   </tbody> 
+  </table>
+ 
+<h4>Tizen Specialized Media Query</h4>
+<p>Tizen supports a special media query feature for a circular device shape. The following table lists the supported media features.</p>
+
+<table class="note">
+       <tbody>
+       <tr>
+               <th class="note">Note</th>
+       </tr>
+       <tr>
+               <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>
+       </tr>
+       </tbody>
+</table>
+
+<table> 
+<caption>Table: Tizen specialized media feature</caption>
+   <tbody> 
+    <tr> 
+     <th>Feature</th> 
+        <th>Value</th>
+        <th>Min/Max</th>
+        <th>Description</th> 
+    </tr> 
+    
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span></td> 
+     <td><span style="font-family: Courier New,Courier,monospace;">&quot;rectangle&quot;</span> | <span style="font-family: Courier New,Courier,monospace;">&quot;circle&quot;</span></td>
+        <td>No</td>
+        <td>Device shape</td>   
+    </tr>
+    
+   </tbody> 
+  </table>
+
+<p>You can combine this media query feature with the W3C type in your code. The final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user:</p>
+<pre class="prettyprint">
+@media all and (-tizen-geometric-shape: circle) {...}
+</pre>
+ 
+  	
+<h3 id="display" name="display">Classification for Display Modes</h3>
+
+<p>The display mode can be classified as portrait or landscape for a rectangle-shaped device, or circular for a circular device.</p>
+
+<h4>Portrait and Landscape</h4>
+
+<p>You can configure the device landscape and portrait mode using the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> attribute in media queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <span style="font-family: Courier New,Courier,monospace;">max-device-aspect-ratio</span> feature is used.</p> 
+<p>If you use the <span style="font-family: Courier New,Courier,monospace;">orientation:portrait/landscape</span> feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> to configure the portrait and landscape mode.</p> 
+<pre class="prettyprint lang-html">
+@media screen and (max-width: 320px) and (max-device-aspect-ratio: 1/1) 
+{
+&nbsp;&nbsp;&nbsp;&lt;!--For portrait mode--&gt;
+}
+@media screen and (max-width: 640px) and (min-device-aspect-ratio: 11/10) 
+{
+&nbsp;&nbsp;&nbsp;&lt;!--For landscape mode--&gt;
+}
+</pre>	
+
+<h4>Circular Device</h4>
+
+<p>You can configure the device circular mode using the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> attribute in the Tizen environment. The following example shows how to use the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> feature.</p>
+
+<table class="note">
+       <tbody>
+       <tr>
+               <th class="note">Note</th>
+       </tr>
+       <tr>
+               <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>
+       </tr>
+       </tbody>
+</table>
+
+
+<pre class="prettyprint lang-html">
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;&lt;!--For a circular device--&gt;
+}
+</pre>
+
+<h3 id="migration" name="migration">Application Migration to a Circular Device</h3>	
+
+<p>This section illustrates an example for how you can migrate a basic application from a rectangular device (such as Gear 2 or Gear S) to a circular device. Use this example as the best practice to improve your layout.</p>
+
+<p>The example uses the following HTML and CSS code for the sample application and its layout.</p>
+
+<pre class="prettyprint">
+&lt;!--HTML code--&gt;
+&lt;section id=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&gt;HEADER&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;article id=&quot;content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lt;ul&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 1&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 2&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 3&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 4&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 5&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 6&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 7&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 8&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 9&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 10&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/article&gt;
+&nbsp;&nbsp;&nbsp;&lt;footer&gt;FOOTER&lt;/footer&gt;
+&lt;/section&gt;
+
+&lt;!--CSS code--&gt;
+html, body 
+{
+&nbsp;&nbsp;&nbsp;height: 100%;
+&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;padding: 0;
+&nbsp;&nbsp;&nbsp;margin: 0;
+&nbsp;&nbsp;&nbsp;font-size: 24px;
+&nbsp;&nbsp;&nbsp;overflow: hidden;
+}
+
+section 
+{
+&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;height: 100%;
+&nbsp;&nbsp;&nbsp;overflow: auto;
+&nbsp;&nbsp;&nbsp;padding: 70px 0;
+}
+
+header, footer 
+{
+&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;height: 70px;
+&nbsp;&nbsp;&nbsp;min-height: 70px;
+&nbsp;&nbsp;&nbsp;line-height: 70px;
+&nbsp;&nbsp;&nbsp;font-size: 30px;
+&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;position: fixed;
+}
+
+header 
+{
+&nbsp;&nbsp;&nbsp;top: 0;
+}
+
+footer 
+{
+&nbsp;&nbsp;&nbsp;bottom: 0;
+}
+
+article ul li 
+{
+&nbsp;&nbsp;&nbsp;border-top: 1px solid rgba(52, 52, 52, 1);
+&nbsp;&nbsp;&nbsp;padding: 15px 20px;
+&nbsp;&nbsp;&nbsp;color: rgba(209, 209, 209, 1);
+&nbsp;&nbsp;&nbsp;font-size: 40px;
+}
+
+article ul li:first 
+{
+&nbsp;&nbsp;&nbsp;border-top: 0 none;
+}</pre>
+
+<p>To migrate the application, use the following steps:</p>
+
+ <ol> 
+  <li>Use a relative layout.
+
+ <p>To achieve a responsive layout for different devices, implement a relative layout. Simply set the <span style="font-family: Courier New,Courier,monospace;">width: 100%</span> attribute to the layout elements in the CSS code:</p>
+<pre class="prettyprint">
+section 
+{
+&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;height: 100%;
+&nbsp;&nbsp;&nbsp;...
+}
+
+header, footer 
+{
+&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;...
+} </pre>
+ <table class="note">
+	<tbody>
+	<tr>
+		<th class="note">Note</th>
+	</tr>
+	<tr>
+		<td class="note">The <strong>relative layout</strong> concept is described in more detail in <a href="#relative">Relative Layout</a>.</td>
+	</tr>
+	</tbody>
+</table>
+</li>
+   <li>Set extra spaces both at the top and bottom.
+
+ <p>During the migration, you can see how a certain portion of the rectangle view is covered over by the circular view, especially the header and the footer. To make them fully and consistently visible in the circular view, provide a &quot;padding&quot; space at the top and bottom of the page. In the following example migrating to a circular gear device from a rectangular Gear S, extra 77 px padding is used:</p>
+<pre class="prettyprint">
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;section {padding: 77px 0;}
+}
+</pre>
+
+ <p class="figure">Figure: Top and bottom padding</p>  
+ <p align="center"><img alt="Top and bottom padding" src="../../images/migrate_padding.png"/></p>  
+</li>
+   <li>Set the header and footer position.
+
+<p>After setting the top and bottom padding, set the header and footer position for scrolling in the circular view.</p>
+<p>For a rectangular device with a lengthwise screen, especially Gear S, the best option is to make only the content area scrollable.</p>
+
+<p class="figure">Figure: Scrolling with a rectangular screen</p>  
+<p align="center"><img alt="Scrolling with a rectangular screen" src="../../images/migrate_scrollable_rect.png"/></p>
+<p>In a circular screen, it is better to make the whole page scrollable, including the top and bottom space.</p>
+<p class="figure">Figure: Scrolling with a circular screen</p>  
+<p align="center"><img alt="Scrolling with a circular screen" src="../../images/migrate_scrollable_circle.png"/></p>
+
+<p>To implement the header and footer position, use the CSS <span style="font-family: Courier New,Courier,monospace;">position</span> attribute:</p>
+<pre class="prettyprint">
+&lt;!--Rectangular device--&gt;
+header, footer 
+{
+&nbsp;&nbsp;&nbsp;position: fixed;
+}
+
+&lt;!--Circular device--&gt;
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;header, footer 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: static;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+</li>
+   <li>Move the display to the initial position.
+
+<p>To provide a better user experience, show the entire display at the beginning, including the &quot;top padding&quot; space. A few seconds after the application launch, move the display back to its initial position, where the header is placed on the top without any space between itself and the edge of the screen. When the display moves like this, the users can perceive the existence of the top space.</p>
+
+<p class="figure">Figure: Moving to the initial position</p>  
+<p align="center"><img alt="Moving to the initial position" src="../../images/migrate_move_to_top.png"/></p>
+
+<p>The scroll move requires several lines of JavaScript code. In the following sample, the few (N) seconds is set to 1500 ms, but you can change the value as needed.</p>
+<pre class="prettyprint">
+(function initScrollPosition() 
+{
+&nbsp;&nbsp;&nbsp;var SCROLL_DELAY_TIME = 1500,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = document.getElementById(&quot;main&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollPosition = window.parseInt(window.getComputedStyle(page)[&quot;padding-top&quot;]),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initScrollTimeoutId = null,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mql = window.matchMedia(&quot;(-tizen-geometric-shape: circle)&quot;);;
+
+&nbsp;&nbsp;&nbsp;/* The effect is applied to a circular device only, so use mediaquery */
+&nbsp;&nbsp;&nbsp;if (mql.matches) 
+&nbsp;&nbsp;&nbsp;{	
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;scroll&quot;, function clearInitScrollCallback() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.clearTimeout(initScrollTimeoutId);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;scroll&quot;, clearInitScrollCallback, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initScrollTimeoutId = window.setTimeout(function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.scrollTop = scrollPosition;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, SCROLL_DELAY_TIME);
+&nbsp;&nbsp;&nbsp;}
+}());
+</pre>
+
+</li>
+   <li>Set extra attributes for a better view.
+
+<p>Extra attributes are not mandatory in the migration process, but they can be helpful for a better application view.</p>
+<p>Sometimes changing the layout of the basic elements is not enough to achieve a user-friendly view, and changes in other elements&#39; layout are needed too. For example, consider setting the <span style="font-family: Courier New,Courier,monospace;">text-align: center</span> attribute for the header and list items in the circular view (this attribute is already defined in the above circular screenshots). If the list is aligned to left in a circular view, the list items may not be all visible when placed out of the middle space.</p>
+
+<pre class="prettyprint">
+&lt;!--Common style for header and footer text--&gt;
+header, footer 
+{
+&nbsp;&nbsp;&nbsp;text-align: center;
+}
+
+&lt;!--In a circular screen, list item has a center position--&gt;
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;article ul li 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 60px;
+&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.ui.practices/html/web/w3c/woff_w.htm b/org.tizen.ui.practices/html/web/w3c/woff_w.htm
new file mode 100644
index 0000000..601a51c
--- /dev/null
+++ b/org.tizen.ui.practices/html/web/w3c/woff_w.htm
@@ -0,0 +1,132 @@
+<!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>WOFF File Format (1.0): Changing Fonts Using WOFF</title>
+</head>
+
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+	<div id="profile">
+		<p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
+	</div>
+	
+	<div id="toc_border"><div id="toc">
+		<p class="toc-title">Related Info</p>
+		<ul class="toc">
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#woff">WOFF File Format 1.0 API for Mobile Web</a></li>
+			<li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#woff">WOFF File Format 1.0 API for Wearable Web</a></li>
+			</ul>
+	</div></div>
+</div>	
+
+<div id="container"><div id="contents"><div class="content">
+<h1>WOFF File Format (1.0): Changing Fonts Using WOFF</h1>
+
+<p>You can decode and restore font data easily.</p>
+
+<p>The new text features in WOFF File Format 1.0 include:</p>
+<ul>
+
+<li>WOFF file format 1.0 
+<p>WOFF (Web Open Font Format) is a packaging format used to decode and restore font data according to the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rule</a> to display it identically with the input font. The <span style="font-family: Courier New,Courier,monospace">@font-face</span> rule is a CSS rule that allows linking to fonts and finding a suitable font to display if the original font is not available. You can <a href="#woff">use WOFF</a> within a Web page. </p></li>
+</ul> 
+
+<h2 id="woff" name="woff">Using the WOFF File Format</h2>
+				
+<p>To enhance the user experience of your application, you must learn to use the WOFF (Web Open Font Format) file format 1.0, which is a W3C standard font packaging format used in Web pages:</p>
+
+<ol>
+<li>Download and use fonts installed on the Web server by creating <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rules</a>. Within the rules, you can define the following properties:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">font-family</span>
+<p>Defines a name for the font. This property is mandatory.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">src</span>
+<p>Defines the URL of the font file on the server. This property is mandatory. If the <span style="font-family: Courier New,Courier,monospace">local</span> attribute is defined, the font resource is not downloaded from the server if it already exists in the local storage. </p></li>
+<li><span style="font-family: Courier New,Courier,monospace">font-stretch</span>
+<p>Defines the way the font is stretched. This property is optional.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">font-style</span>
+<p>Defines the font style. This property is optional.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">font-weight</span>
+<p>Defines the font weight. This property is optional.</p></li>
+</ul>
+<p>Define the rules with in a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of a Web page:</p>
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;@font-face
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_1_0.woff&#39;) format(&#39;woff&#39;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;@font-face
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_0_0.woff&#39;) format(&#39;woff&#39;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;@font-face
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: 900;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_2_0.woff&#39;) format(&#39;woff&#39;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-family: MuseoSans}
+&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-family: MuseoSans; font-weight: bold;}
+&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-family: MuseoSans; font-weight: 900;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;</pre>
+</li>
+<li>In the <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> section, create <span style="font-family: Courier New,Courier,monospace">&lt;p&gt;</span> elements containing text in which the font rules are implemented:
+<pre class="prettyprint">&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</li>
+</ol>
+<p class="figure">Figure: Implementing the @font-face rules (in mobile applications only)</p>
+<p align="center"><img alt="Implementing the @font-face rules (in mobile applications only)" src="../../images/font_face.png" /></p>
+         
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<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.practices/index.xml b/org.tizen.ui.practices/index.xml
new file mode 100644
index 0000000..1590dab
--- /dev/null
+++ b/org.tizen.ui.practices/index.xml
@@ -0,0 +1,235 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?NLS TYPE="org.eclipse.help.toc"?>
+
+
+<toc label="UI Practices" topic="html/cover_page.htm">
+
+<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/ui_component_w.htm" label="UI Components"></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 the 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 href="html/web/tau/animation_w.htm" label="Animation">
+			<topic href="html/web/tau/creating_animation_w.htm" label="Creating Applications with Animation"></topic>
+		</topic>
+		<topic href="html/web/tau/tau_porting_w.htm" label="2.4 Porting Guide"></topic>
+	</topic>
+	<topic href="html/web/w3c/guides_w3c_w.htm" label="W3C/HTML5">			
+		<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 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"></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>
+		<topic href="html/web/w3c/color_w.htm" label="CSS Color Module (Level 3)"></topic>
+		<topic href="html/web/w3c/background_w.htm" label="CSS Backgrounds and Borders Module (Level 3)"></topic>
+		<topic href="html/web/w3c/flexible_w.htm" label="CSS Flexible Box Layout Module"></topic>
+		<topic href="html/web/w3c/multi_mw.htm" label="CSS Multi-column Layout Module"></topic>
+		<topic href="html/web/w3c/text_module_w.htm" label="CSS Text Module (Level 3)"></topic>
+		<topic href="html/web/w3c/basic_ui_w.htm" label="CSS Basic User Interface Module (Level 3)"></topic>
+		<topic href="html/web/w3c/font_w.htm" label="CSS Fonts Module (Level 3)"></topic>		
+		<topic href="html/web/w3c/woff_w.htm" label="WOFF File Format (1.0)"></topic>	
+	</topic>	
+</topic>
+<topic href="html/native/guides_n.htm" label="Native Application">		
+	<topic href="html/native/efl/guides_efl_n.htm" label="EFL">
+		<topic href="html/native/efl/efl_overview_n.htm" label="EFL Overview"></topic>
+		<topic href="html/native/efl/ui_components_n.htm" label="UI Components">
+			<topic href="html/native/efl/ui_components_mn.htm" label="Mobile UI Components">
+				<topic href="html/native/efl/component_toolbar_mn.htm" label="Toolbar"></topic>
+				<topic href="html/native/efl/component_index_mn.htm" label="Index"></topic>
+				<topic href="html/native/efl/component_segmentcontrol_mn.htm" label="Segmentcontrol"></topic>
+				<topic href="html/native/efl/component_win_mn.htm" label="Win"></topic>
+				<topic href="html/native/efl/component_background_mn.htm" label="Background"></topic>
+				<topic href="html/native/efl/component_genlist_mn.htm" label="Genlist"></topic>
+				<topic href="html/native/efl/component_gengrid_mn.htm" label="Gengrid"></topic>
+				<topic href="html/native/efl/component_panel_mn.htm" label="Panel"></topic>
+				<topic href="html/native/efl/component_list_mn.htm" label="List"></topic>
+				<topic href="html/native/efl/component_label_mn.htm" label="Label"></topic>
+				<topic href="html/native/efl/component_image_mn.htm" label="Image"></topic>
+				<topic href="html/native/efl/component_icon_mn.htm" label="Icon"></topic>
+				<topic href="html/native/efl/component_progressbar_mn.htm" label="Progressbar"></topic>
+				<topic href="html/native/efl/component_photocam_mn.htm" label="Photocam"></topic>
+				<topic href="html/native/efl/component_button_mn.htm" label="Button"></topic>
+				<topic href="html/native/efl/component_check_mn.htm" label="Check"></topic>
+				<topic href="html/native/efl/component_radio_mn.htm" label="Radio"></topic>
+				<topic href="html/native/efl/component_entry_mn.htm" label="Entry"></topic>
+				<topic href="html/native/efl/component_slider_mn.htm" label="Slider"></topic>
+				<topic href="html/native/efl/component_datetime_mn.htm" label="Datetime"></topic>
+				<topic href="html/native/efl/component_colorselector_mn.htm" label="Colorselector"></topic>
+				<topic href="html/native/efl/component_spinner_mn.htm" label="Spinner"></topic>
+				<topic href="html/native/efl/component_popup_mn.htm" label="Popup"></topic>
+				<topic href="html/native/efl/component_ctxpopup_mn.htm" label="Ctxpopup"></topic>
+				<topic href="html/native/efl/component_notify_mn.htm" label="Notify"></topic>
+				<topic href="html/native/efl/component_tooltip_mn.htm" label="Tooltip"></topic>
+				<topic href="html/native/efl/component_flip_mn.htm" label="Flip"></topic>
+				<topic href="html/native/efl/component_glview_mn.htm" label="GLView"></topic>
+				<topic href="html/native/efl/component_map_mn.htm" label="Map"></topic>
+				<topic href="html/native/efl/component_plug_mn.htm" label="Plug"></topic>
+				<topic href="html/native/efl/basic_tutorial_mn.htm" label="Creating Basic Mobile Interactions"></topic>	
+				<topic href="html/native/efl/genlist_tutorial_mn.htm" label="Creating Mobile Genlists"></topic>	
+				<topic href="html/native/efl/menu_tutorial_mn.htm" label="Creating Mobile Menus"></topic>
+			</topic>	
+			<topic href="html/native/efl/ui_components_wn.htm" label="Wearable UI Components">
+				<topic href="html/native/efl/component_index_wn.htm" label="Index"></topic>
+				<topic href="html/native/efl/component_win_wn.htm" label="Win"></topic>
+				<topic href="html/native/efl/component_background_wn.htm" label="Background"></topic>
+				<topic href="html/native/efl/component_genlist_wn.htm" label="Genlist"></topic>
+				<topic href="html/native/efl/component_list_wn.htm" label="List"></topic>
+				<topic href="html/native/efl/component_label_wn.htm" label="Label"></topic>
+				<topic href="html/native/efl/component_image_wn.htm" label="Image"></topic>
+				<topic href="html/native/efl/component_icon_wn.htm" label="Icon"></topic>
+				<topic href="html/native/efl/component_progressbar_wn.htm" label="Progressbar"></topic>
+				<topic href="html/native/efl/component_button_wn.htm" label="Button"></topic>
+				<topic href="html/native/efl/component_check_wn.htm" label="Check"></topic>
+				<topic href="html/native/efl/component_radio_wn.htm" label="Radio"></topic>
+				<topic href="html/native/efl/component_entry_wn.htm" label="Entry"></topic>
+				<topic href="html/native/efl/component_slider_wn.htm" label="Slider"></topic>
+				<topic href="html/native/efl/component_datetime_wn.htm" label="Datetime"></topic>
+				<topic href="html/native/efl/component_popup_wn.htm" label="Popup"></topic>
+				<topic href="html/native/efl/component_ctxpopup_wn.htm" label="Ctxpopup"></topic>
+				<topic href="html/native/efl/component_notify_wn.htm" label="Notify"></topic>
+				<topic href="html/native/efl/component_glview_wn.htm" label="GLView"></topic>
+				<topic href="html/native/efl/component_plug_wn.htm" label="Plug"></topic>	
+				<topic href="html/native/efl/button_tutorial_wn.htm" label="Creating Wearable Buttons"></topic>
+				<topic href="html/native/efl/datetime_tutorial_wn.htm" label="Creating Wearable Datetimes"></topic>
+				<topic href="html/native/efl/genlist_tutorial_wn.htm" label="Creating Wearable Genlists"></topic>	
+				<topic href="html/native/efl/popup_tutorial_wn.htm" label="Creating Wearable Popups"></topic>
+				<topic href="html/native/efl/component_circ_datetime_wn.htm" label="Circle Datetime"></topic>
+				<topic href="html/native/efl/component_circ_genlist_wn.htm" label="Circle Genlist"></topic>
+				<topic href="html/native/efl/component_circ_object_wn.htm" label="Circle Object"></topic>
+				<topic href="html/native/efl/component_circ_progressbar_wn.htm" label="Circle Progressbar"></topic>
+				<topic href="html/native/efl/component_circ_scroller_wn.htm" label="Circle Scroller"></topic>
+				<topic href="html/native/efl/component_circ_slider_wn.htm" label="Circle Slider"></topic>
+				<topic href="html/native/efl/component_circ_surface_wn.htm" label="Circle Surface"></topic>
+				<topic href="html/native/efl/component_circ_rotary_wn.htm" label="Rotary Selector"></topic>
+				<topic href="html/native/efl/component_circ_option_wn.htm" label="More Option"></topic>
+				<topic href="html/native/efl/component_circ_spinner_wn.htm" label="Circle Spinner"></topic>
+			</topic>
+		</topic>
+		<topic href="html/native/efl/component_infra_n.htm" label="UI Component Infrastructure Modules">
+			<topic href="html/native/efl/component_focus_n.htm" label="Managing Component Focus"></topic>	
+			<topic href="html/native/efl/component_custom_n.htm" label="Customizing Components"></topic>
+			<topic href="html/native/efl/touch_gesture_n.htm" label="Handling Component Touch Gestures"></topic>		
+		</topic>
+		<topic href="html/native/efl/ui_containers_n.htm" label="UI Containers">
+			<topic href="html/native/efl/containers_n.htm" label="Using Container UI Components"></topic>	
+			<topic href="html/native/efl/form_tutorial_n.htm" label="Creating a Form for a Basic Application Layout"></topic>
+			<topic href="html/native/efl/naviframe_tutorial_n.htm" label="Creating a Naviframe for Navigation"></topic>
+			<topic href="html/native/efl/layout_tutorial_n.htm" label="Creating UI Screen Layouts"></topic>	
+			<topic href="html/native/efl/panes_tutorial_mn.htm" label="Creating Panes"></topic>			
+		</topic>
+		<topic href="html/native/efl/theme_n.htm" label="Themes">
+			<topic href="html/native/efl/edje_intro_n.htm" label="Introduction to EDC Programming"></topic>	
+			<topic href="html/native/efl/edc_positioning_n.htm" label="Positioning Parts with the EDC File"></topic>
+			<topic href="html/native/efl/edc_part_block_n.htm" label="EDJE Data Collection Reference"></topic>	
+			<topic href="html/native/efl/edc_optimization_n.htm" label="Optimizing EDC"></topic>			
+		</topic>
+		<topic href="html/native/efl/edje_objects_n.htm" label="Edje Objects">
+			<topic href="html/native/efl/edje_files_n.htm" label="Handling Edje Files"></topic>	
+			<topic href="html/native/efl/edje_scaling_n.htm" label="Scaling Edje Objects"></topic>
+			<topic href="html/native/efl/edje_color_n.htm" label="Using Edje Color Classes"></topic>	
+			<topic href="html/native/efl/edje_text_n.htm" label="Using Edje Text Classes"></topic>
+			<topic href="html/native/efl/edje_perspective_n.htm" label="Using Edje Perspective"></topic>	
+			<topic href="html/native/efl/edje_message_signal_n.htm" label="Managing Signals and Messages"></topic>	
+			<topic href="html/native/efl/edje_manage_animation_n.htm" label="Managing Edje Animations"></topic>	
+		</topic>
+		<topic href="html/native/efl/font_setting_n.htm" label="Fonts">
+			<topic href="html/native/efl/font_resource_n.htm" label="Font Resources"></topic>
+		</topic>
+		<topic href="html/native/efl/ui_scalability_n.htm" label="Scaling">
+			<topic href="html/native/efl/multiple_screens_n.htm" label="Multiple Screen Support"></topic>	
+			<topic href="html/native/efl/scalability_n.htm" label="Scalability Support"></topic>
+			<topic href="html/native/efl/resource_fallback_n.htm" label="Resource Fallback Support"></topic>
+		</topic>
+		<topic href="html/native/efl/notification_window_n.htm" label="Notification Windows"></topic>
+		<topic href="html/native/efl/core_loop_n.htm" label="Core Loop and OS Interfacing">
+			<topic href="html/native/efl/main_loop_n.htm" label="Handling the Main Loop"></topic>	
+			<topic href="html/native/efl/threads_n.htm" label="Using Threads"></topic>	
+		</topic>
+		<topic href="html/native/efl/graphical_objects_n.htm" label="Graphical Objects">
+			<topic href="html/native/efl/evas_objects_n.htm" label="Evas Objects"></topic>	
+			<topic href="html/native/efl/evas_rendering_n.htm" label="Evas Rendering Concept and Method"></topic>
+			<topic href="html/native/efl/evas_basic_objects_n.htm" label="Basic Manipulation of Evas Objects"></topic>
+			<topic href="html/native/efl/evas_advanced_objects_n.htm" label="Advanced Manipulation of Evas Objects"></topic>
+			<topic href="html/native/efl/evas_optimization_n.htm" label="Optimizing Evas"></topic>
+		</topic>
+		<topic href="html/native/efl/event_handling_n.htm" label="Event Handling">
+			<topic href="html/native/efl/event_types_n.htm" label="Event Types"></topic>	
+			<topic href="html/native/efl/multipoint_touch_n.htm" label="Tracking Multi-point Touch Events"></topic>	
+		</topic>
+		<topic href="html/native/efl/animation_effects_n.htm" label="Animations and Effects">
+			<topic href="html/native/efl/ecore_animation_n.htm" label="Ecore Animations"></topic>	
+			<topic href="html/native/efl/ecore_animation_tutorial_n.htm" label="Creating Ecore Animations"></topic>	
+			<topic href="html/native/efl/edje_animation_n.htm" label="Edje Animations"></topic>
+			<topic href="html/native/efl/edje_animation_tutorial_n.htm" label="Creating Edje Animations"></topic>
+			<topic href="html/native/efl/elementary_animation_n.htm" label="Elementary Animations"></topic>
+			<topic href="html/native/efl/elementary_animation_tutorial_n.htm" label="Creating Elementary Animations"></topic>
+			<topic href="html/native/efl/elementary_transit_effect_tutorial_n.htm" label="Creating Elementary Transit Effects"></topic>
+			<topic href="html/native/efl/evas_map_animation_n.htm" label="Evas Map Effects"></topic>
+			<topic href="html/native/efl/evas_map_effects_n.htm" label="Creating Evas Map Effects"></topic>
+		</topic>		
+		<topic href="html/native/efl/data_types_tools_n.htm" label="Data Types and Tools">
+			<topic href="html/native/efl/data_types_n.htm" label="Data Types"></topic>	
+			<topic href="html/native/efl/tools_n.htm" label="Tools"></topic>	
+		</topic>	
+		<topic href="html/native/efl/hw_input_n.htm" label="Hardware Input Handling">
+			<topic href="html/native/efl/key_events_mn.htm" label="Managing Menu and Back Key Events"></topic>	
+			<topic href="html/native/efl/rotary_events_wn.htm" label="Managing Rotary Events"></topic>	
+			<topic href="html/native/efl/key_grab_n.htm" label="Grabbing Hardware Key Events"></topic>
+		</topic>		
+	</topic>
+	<topic href="html/native/dali/guides_dali_n.htm" label="DALi">
+		<topic href="html/native/dali/dali_overview_n.htm" label="DALi Overview"></topic>
+		<topic href="html/native/dali/actors_n.htm" label="Actors">
+			<topic href="html/native/dali/layout_n.htm" label="Layout Management"></topic>
+		</topic>
+		<topic href="html/native/dali/event_handling_n.htm" label="Event Handling"></topic>
+		<topic href="html/native/dali/ui_components_n.htm" label="UI Components">
+			<topic href="html/native/dali/buttons_n.htm" label="Buttons"></topic>
+			<topic href="html/native/dali/itemview_n.htm" label="ItemView"></topic>
+			<topic href="html/native/dali/scrollview_n.htm" label="ScrollView"></topic>
+			<topic href="html/native/dali/tableview_n.htm" label="TableView"></topic>
+			<topic href="html/native/dali/textfield_n.htm" label="TextField"></topic>
+			<topic href="html/native/dali/textlabel_n.htm" label="TextLabel"></topic>
+			<topic href="html/native/dali/imageview_n.htm" label="ImageView"></topic>
+			<topic href="html/native/dali/control_base_n.htm" label="Control"></topic>
+		</topic>
+		<topic href="html/native/dali/animation_n.htm" label="Animation">
+			<topic href="html/native/dali/animation_types_n.htm" label="Animation Types"></topic>
+			<topic href="html/native/dali/constraints_n.htm" label="Constraints"></topic>
+		</topic>
+		<topic href="html/native/dali/resources_n.htm" label="Resources"></topic>
+		<topic href="html/native/dali/rendering_effects_n.htm" label="Rendering and Effects"></topic>
+		<topic href="html/native/dali/background_n.htm" label="Background Knowledge">
+			<topic href="html/native/dali/handle_n.htm" label="Handle/Body Pattern"></topic>
+			<topic href="html/native/dali/properties_n.htm" label="Properties"></topic>
+			<topic href="html/native/dali/multi_threaded_n.htm" label="Multi-threaded Architecture"></topic>
+		</topic>
+	</topic>
+</topic>		
+	
+</toc>
diff --git a/org.tizen.ui.practices/plugin.xml b/org.tizen.ui.practices/plugin.xml
new file mode 100644
index 0000000..90140e5
--- /dev/null
+++ b/org.tizen.ui.practices/plugin.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?eclipse version="3.0"?>
+
+<plugin>
+	<extension point="org.eclipse.help.toc">
+		<toc file="index.xml" primary="true" />
+	</extension>
+</plugin>